@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800&family=Barlow:wght@400;500;600;700&display=swap');

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  --srn-navy:          #0B2545;
  --srn-navy-deep:     #07182E;
  --srn-ink:           #14202E;
  --srn-body:          #3E4A59;
  --srn-muted:         #5A6573;
  --srn-sand:          #F7F4EF;
  --srn-line:          #E6E1D8;
  --srn-orange:        #C2530F;
  --srn-orange-hover:  #A5460C;
  --srn-orange-text:   #D65A12;
  --srn-orange-light:  #F6A15E;
  --srn-tint:          #FBE9DD;
}

/* ── Base ────────────────────────────────────────────────────── */
html,
body {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.srn {
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--srn-ink);
  background: #fff;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  overflow-x: clip;
}

.srn *,
.srn *::before,
.srn *::after {
  box-sizing: border-box;
}

.srn h1, .srn h2, .srn h3,
.srn p, .srn ul, .srn dl,
.srn dd, .srn figure {
  margin: 0;
  padding: 0;
}

.srn img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
}

.srn a {
  color: var(--srn-orange);
  text-decoration: none;
}

.srn svg {
  flex-shrink: 0;
}

/* ── Typography ─────────────────────────────────────────────── */
.srn h1,
.srn h2,
.srn-display {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  line-height: 1;
  color: var(--srn-navy);
}

.srn h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  line-height: 1.1;
  color: var(--srn-navy);
}

.srn h2 {
  font-size: clamp(38px, 4.6vw, 56px);
}

.srn h1 {
  font-size: clamp(52px, 6vw, 78px);
  line-height: .95;
}

.srn-accent {
  color: var(--srn-orange-text);
}

/* ── Layout helpers ─────────────────────────────────────────── */
.srn-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.srn section {
  scroll-margin-top: 84px;
}

.srn-eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--srn-orange);
}

.srn-lead {
  font-size: 19px;
  color: var(--srn-body);
}

/* ── Buttons ─────────────────────────────────────────────────── */
.srn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  transition: background .15s, color .15s, border-color .15s;
  cursor: pointer;
}

/* Use 'a.' prefix to beat Elementor's a { color } override */
.srn a.srn-btn-primary,
.srn-btn-primary {
  background: var(--srn-orange);
  color: #fff !important;
}
.srn a.srn-btn-primary:hover,
.srn a.srn-btn-primary:focus-visible,
.srn-btn-primary:hover,
.srn-btn-primary:focus-visible {
  background: var(--srn-orange-hover);
  color: #fff !important;
}

.srn a.srn-btn-outline,
.srn-btn-outline {
  border: 2px solid var(--srn-navy);
  color: var(--srn-navy) !important;
}
.srn a.srn-btn-outline:hover,
.srn a.srn-btn-outline:focus-visible,
.srn-btn-outline:hover,
.srn-btn-outline:focus-visible {
  background: var(--srn-navy);
  color: #fff !important;
}

.srn a.srn-btn-light,
.srn-btn-light {
  background: #fff;
  color: var(--srn-navy) !important;
}
.srn a.srn-btn-light:hover,
.srn-btn-light:hover {
  background: var(--srn-sand);
  color: var(--srn-navy) !important;
}

.srn a.srn-btn-ghost,
.srn-btn-ghost {
  border: 2px solid #fff;
  color: #fff !important;
}
.srn a.srn-btn-ghost:hover,
.srn-btn-ghost:hover {
  background: #fff;
  color: var(--srn-navy) !important;
}

.srn a:focus-visible,
.srn summary:focus-visible {
  outline: 3px solid var(--srn-orange-light);
  outline-offset: 3px;
}

.srn-btn-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── Copy block (shared between split sections) ─────────────── */
.srn-copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.srn-copy p {
  font-size: 19px;
  color: var(--srn-body);
}

.srn-copy .srn-punch {
  font-size: 21px;
  font-weight: 700;
  color: var(--srn-navy);
}

.srn-textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 17px;
}
.srn-textlink:hover {
  color: var(--srn-orange-hover);
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .srn * { transition: none !important; }
}