/* =========================================================================
   SMS CONSULT — DESIGN SYSTEM
   Mobile-first. Built from the brand mark: navy wordmark cut through by a
   rising gold arrow. The arrow (growth, momentum, upward trajectory) and
   the diagonal banner cut used on the firm's own business profile are the
   two motifs this whole system is built around — not a reskin of any
   previous project's components.
   ========================================================================= */

:root{
  /* ---- Brand color tokens (sampled from the SMS Consult logo) ---- */
  --navy-900:#0c1442;
  --navy-800:#141f5c;
  --navy-700:#1f2f74;   /* primary — matches logo swatch #253d8b/#273b87 */
  --navy-600:#2c3f92;
  --navy-500:#3d51ab;
  --navy-100:#e7eaf7;
  --gold-600:#e0a91c;
  --gold-500:#fdd251;   /* primary — matches logo swatch #fed251 */
  --gold-300:#ffe6a0;
  --gold-100:#fff6dd;
  --ink:#12162e;
  --ink-soft:#4c516f;
  --paper:#fbfbfe;
  --paper-alt:#eef0fa;
  --paper-deep:#e3e7f6;
  --line:#dde1f2;
  --line-soft:#eceffa;
  --ok:#2f7a4f;

  /* ---- Type ---- */
  --font-display:'Sora', 'Inter', system-ui, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;

  /* ---- Layout ---- */
  --maxw:1240px;
  --gutter:20px;
  --radius-sm:6px;
  --radius:12px;
  --radius-lg:20px;
  --shadow-card:0 1px 2px rgba(12,20,66,0.06), 0 10px 28px -14px rgba(12,20,66,0.28);
  --shadow-pop:0 16px 36px -10px rgba(12,20,66,0.35);

  --action-bar-h:56px;
}

@media (min-width:768px){ :root{ --gutter:32px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0; font-family:var(--font-body); color:var(--ink); background:var(--paper);
  line-height:1.6; font-size:16px; padding-bottom:var(--action-bar-h);
}
@media (min-width:900px){ body{ padding-bottom:0; } }

img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; }

h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); line-height:1.1; margin:0 0 .5em; letter-spacing:-0.01em; }
h1{ font-size:clamp(2rem, 5vw + .6rem, 3.5rem); font-weight:700; }
h2{ font-size:clamp(1.5rem, 2.6vw + .7rem, 2.3rem); font-weight:700; }
h3{ font-size:clamp(1.1rem, 1vw + .8rem, 1.4rem); font-weight:700; }
h4{ font-size:clamp(1rem, .5vw + .85rem, 1.05rem); font-weight:600; }

p{ margin:0 0 1em; color:var(--ink-soft); }
p:last-child{ margin-bottom:0; }

/* ---- Eyebrow with arrow-tick, replaces a generic label ---- */
.eyebrow{
  font-family:var(--font-display); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--navy-700); display:inline-flex; align-items:center; gap:.5em; margin:0 0 .9em; font-weight:600;
}
.eyebrow::before{
  content:''; width:0; height:0;
  border-left:5px solid var(--gold-500); border-top:4px solid transparent; border-bottom:4px solid transparent;
  transform:rotate(-40deg); flex:none;
}

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{ position:absolute; left:8px; top:-48px; background:var(--ink); color:#fff; padding:.7em 1em; border-radius:var(--radius-sm); z-index:200; transition:top .15s ease; }
.skip-link:focus{ top:8px; }
:focus-visible{ outline:3px solid var(--gold-500); outline-offset:2px; }

/* =========================================================================
   ARROW MOTIF — the signature element, echoing the logo's rising arrow
   ========================================================================= */
.arrow-tick{
  display:inline-block; width:0; height:0;
  border-left:10px solid var(--gold-500); border-top:7px solid transparent; border-bottom:7px solid transparent;
  transform:rotate(-38deg);
}
.stat .arrow-tick{ margin-right:6px; vertical-align:middle; }

/* diagonal banner cut, used as a section divider — mirrors the firm's own
   "Business Profile" cover banner treatment */
.diagonal-divider{
  position:relative; height:46px; background:var(--paper);
}
.diagonal-divider::before{
  content:''; position:absolute; inset:0;
  background:var(--navy-700);
  clip-path:polygon(0 0, 100% 40%, 100% 100%, 0 100%);
}
.diagonal-divider::after{
  content:''; position:absolute; left:0; right:0; top:0; height:6px;
  background:var(--gold-500);
  clip-path:polygon(0 0, 100% 40%, 100% calc(40% + 6px), 0 calc(100% ));
}
.diagonal-divider.flip::before{ clip-path:polygon(0 40%, 100% 0, 100% 100%, 0 100%); }
.diagonal-divider.flip::after{ clip-path:polygon(0 0, 100% 0, 100% 6px, 0 calc(40% + 6px)); }

/* =========================================================================
   HEADER / NAV
   ========================================================================= */
/* backdrop-filter on .site-header itself would make it a containing block
   for position:fixed descendants (same effect as filter/transform) —
   .main-nav is fixed and lives inside the header, so it would get confined
   to the header's own ~64px box instead of the full viewport, meaning the
   mobile slide-out panel would never visibly reach onto the page. Moving
   the blur onto a ::before pseudo-element keeps the identical visual
   effect without .site-header itself carrying the property. */
.site-header{ position:sticky; top:0; z-index:100; border-bottom:1px solid var(--line-soft); }
.site-header::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:rgba(251,251,254,0.95); backdrop-filter:saturate(150%) blur(8px);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:10px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:none; }
.brand img{ height:44px; width:auto; }

.nav-toggle{ display:flex; align-items:center; gap:8px; background:none; border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 12px; min-height:44px; font-size:.85rem; font-weight:600; color:var(--ink); cursor:pointer; }
.nav-toggle .bars{ width:18px; height:12px; position:relative; }
.nav-toggle .bars span{ position:absolute; left:0; right:0; height:2px; background:var(--ink); border-radius:1px; }
.nav-toggle .bars span:nth-child(1){ top:0; } .nav-toggle .bars span:nth-child(2){ top:5px; } .nav-toggle .bars span:nth-child(3){ top:10px; }

.main-nav{ position:fixed; inset:0 0 0 auto; width:min(88vw,360px); background:var(--paper); border-left:1px solid var(--line); transform:translateX(100%); transition:transform .28s ease; overflow-y:auto; padding:20px; z-index:110; }
.main-nav.is-open{ transform:translateX(0); }
.nav-scrim{ position:fixed; inset:0; background:rgba(12,20,66,.45); opacity:0; pointer-events:none; transition:opacity .28s ease; z-index:105; }
.nav-scrim.is-open{ opacity:1; pointer-events:auto; }
.nav-close{ background:none; border:none; font-family:var(--font-display); font-weight:600; font-size:.85rem; cursor:pointer; margin-bottom:18px; padding:6px 0; min-height:44px; }

.nav-group{ margin-bottom:22px; }
.main-nav ul{ list-style:none; margin:0; padding:0; }
.main-nav li + li{ border-top:1px solid var(--line-soft); }
.main-nav a{ display:block; padding:12px 4px; text-decoration:none; color:var(--ink); font-weight:600; font-size:1rem; }
.main-nav a:hover{ color:var(--navy-700); }
.nav-cta{ margin-top:8px; }
/* .main-nav a{ color:var(--ink) } above outranks .btn-primary{ color:#fff }
   by specificity (a class+type selector beats a single class), so without
   this the CTA rendered as dark ink text on its own navy background —
   nearly invisible. Force it back to white, at higher specificity than
   both the base and :hover nav-link color rules so it can't regress. */
.nav-cta .btn{ color:#fff; }
.nav-cta .btn:hover{ color:#fff; }

/* Mobile drill-down accordion: the top-level label is itself a real link
   (.nav-group-link) sitting beside a chevron toggle button
   (.nav-group-toggle) that shows/hides the sibling panel via the native
   `hidden` attribute — JS just adds/removes `hidden`, no custom animation. */
.nav-group-head{ display:flex; align-items:center; gap:4px; }
.nav-group-link{ display:block; flex:1; padding:12px 4px; text-decoration:none; color:var(--ink); font-weight:600; font-size:1rem; }
.nav-group-link:hover{ color:var(--navy-700); }
.nav-group-toggle{ flex:none; background:none; border:none; padding:12px 8px; min-width:44px; min-height:44px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.nav-group-toggle .chevron{ width:8px; height:8px; border-right:2px solid var(--ink-soft); border-bottom:2px solid var(--ink-soft); transform:rotate(45deg); transition:transform .18s ease; }
.nav-group-toggle[aria-expanded="true"] .chevron{ transform:rotate(-135deg); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.dropdown{ position:static; background:none; border:none; box-shadow:none; padding:0; margin:8px 0 0; min-width:0; }
.mega-col + .mega-col{ margin-top:18px; }
.mega-col h4{ font-family:var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--navy-700); margin:0 0 6px; }
.mega-col ul{ list-style:none; margin:0; padding:0; }

@media (min-width:1240px){
  .brand img{ height:52px; }
  .nav-toggle{ display:none; } .nav-scrim{ display:none; }
  .main-nav{ position:static; width:auto; transform:none; background:none; border:none; padding:0; overflow:visible; display:flex; align-items:center; gap:18px; flex:1; justify-content:flex-end; }
  .nav-close{ display:none; }
  .nav-group{ position:relative; margin:0; }
  .nav-group-head{ display:inline-flex; }
  .nav-group-link{
    display:inline-block; padding:8px 2px; margin:0; flex:none;
    font-family:var(--font-body); font-weight:600; font-size:.87rem; white-space:nowrap;
  }
  .nav-group-link:hover, .nav-group-link:focus{ color:var(--navy-700); }
  .nav-group-toggle{ display:none; } /* desktop reveals on hover/focus-within instead */
  .main-nav > .nav-group > ul{ margin:0; }
  .main-nav li + li{ border-top:none; }
  .main-nav > .nav-group > ul > li > a{ padding:8px 2px; font-size:.87rem; white-space:nowrap; }
  .dropdown{
    display:none; position:absolute; top:100%; left:-14px; background:#fff;
    border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-card);
    padding:10px; min-width:270px; margin-top:10px; z-index:20;
  }
  /* Bridges the gap created by .dropdown's margin-top above — without it,
     that 10px strip between the nav link and the panel isn't covered by
     any hoverable box, so moving the mouse straight down through it drops
     :hover on .nav-group and the panel closes before the cursor arrives.
     A transparent pseudo-element fills exactly that strip, keeping the
     hover chain unbroken while leaving the visual gap intact. */
  .nav-group.has-dropdown::after{
    content:''; position:absolute; left:0; right:0; top:100%; height:10px; z-index:19;
  }
  .nav-group.has-dropdown:hover .dropdown,
  .nav-group.has-dropdown:focus-within .dropdown{ display:block; }
  .dropdown a{ border-radius:var(--radius-sm); padding:10px; white-space:nowrap; }
  .dropdown a:hover{ background:var(--paper-alt); }
  .nav-cta{ margin-top:0; }

  /* Mega menu variant of .dropdown — multi-column, wider panel */
  .mega-dropdown{ left:0; min-width:640px; padding:20px; display:none; grid-template-columns:repeat(3,1fr); gap:24px 28px; }
  .nav-group.has-dropdown:hover .mega-dropdown,
  .nav-group.has-dropdown:focus-within .mega-dropdown{ display:grid; }
  .mega-col + .mega-col{ margin-top:0; }
  .mega-col a{ display:block; padding:7px 8px; border-radius:var(--radius-sm); font-size:.85rem; white-space:nowrap; color:var(--ink); text-decoration:none; }
  .mega-col a:hover{ background:var(--paper-alt); color:var(--navy-700); }
}

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:.95rem; padding:13px 24px; border-radius:999px; border:1px solid transparent; text-decoration:none; cursor:pointer; line-height:1; white-space:nowrap; transition:transform .12s ease, box-shadow .12s ease, background .12s ease; min-height:48px; }
.btn:active{ transform:scale(.98); }
.btn-primary{ background:var(--navy-700); color:#fff; }
.btn-primary:hover{ background:var(--navy-800); box-shadow:var(--shadow-pop); }
.btn-gold{ background:var(--gold-500); color:var(--navy-900); }
.btn-gold:hover{ background:var(--gold-600); box-shadow:var(--shadow-pop); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--navy-700); color:var(--navy-700); }
.btn-outline-inverse{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn-outline-inverse:hover{ background:rgba(255,255,255,.12); }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 16px; min-height:38px; font-size:.85rem; }

/* =========================================================================
   MOBILE ACTION BAR
   ========================================================================= */
.mobile-action-bar{ position:fixed; left:0; right:0; bottom:0; z-index:150; display:grid; grid-template-columns:1fr 1fr 1.3fr; background:#fff; border-top:1px solid var(--line); box-shadow:0 -6px 20px -10px rgba(12,20,66,.3); padding-bottom:env(safe-area-inset-bottom, 0); }
.mobile-action-bar a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-decoration:none; color:var(--ink); font-size:.72rem; font-weight:700; padding:9px 4px; border-right:1px solid var(--line-soft); }
.mobile-action-bar a:last-child{ border-right:none; background:var(--navy-700); color:#fff; }
.mobile-action-bar svg{ width:19px; height:19px; }
@media (min-width:900px){ .mobile-action-bar{ display:none; } }

/* =========================================================================
   SECTIONS / LAYOUT
   ========================================================================= */
.section{ padding-block:clamp(44px, 8vw, 96px); }
.section-alt{ background:var(--paper-alt); }
.section-dark{ background:var(--navy-900); color:#fff; }
.section-dark h2, .section-dark h3{ color:#fff; }
.section-dark p{ color:#c7cdec; }
.section-navy{ background:var(--navy-700); color:#fff; }
.section-navy h2, .section-navy h3{ color:#fff; }
.section-navy p{ color:#dde2f7; }

/* Eyebrows and list bullets default to navy-on-light. On dark/navy section
   backgrounds that same navy text becomes nearly invisible, so both dark
   section variants swap the eyebrow to gold and lighten list-item text. */
.section-dark .eyebrow, .section-navy .eyebrow{ color:var(--gold-500); }
.section-dark .list-check li, .section-navy .list-check li{ color:#d7dbf5; }
.section-dark .list-check li strong, .section-navy .list-check li strong{ color:#fff; }

.section-head{ max-width:720px; margin-bottom:clamp(28px,4vw,44px); }
.section-head.center{ margin-inline:auto; text-align:center; }

.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns:1fr; }
.grid-3{ grid-template-columns:1fr; }
.grid-4{ grid-template-columns:1fr; }
@media (min-width:640px){ .grid-2{ grid-template-columns:1fr 1fr; } .grid-4{ grid-template-columns:1fr 1fr; } }
@media (min-width:900px){ .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-4{ grid-template-columns:repeat(4,1fr); } }

.card{ background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:clamp(20px,3vw,28px); box-shadow:var(--shadow-card); position:relative; overflow:hidden; }
.card::after{ content:''; position:absolute; top:0; right:0; width:0; height:0; border-style:solid; border-width:0 22px 22px 0; border-color:transparent var(--gold-500) transparent transparent; opacity:0; transition:opacity .15s ease; }
.card:hover::after{ opacity:1; }
.card h3{ margin-bottom:.4em; }
.card p{ font-size:.95rem; }

.pillar-card{ background:var(--paper-alt); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(22px,3vw,30px); }
.pillar-card h3{ font-size:clamp(1.2rem,1vw + 1rem,1.5rem); }
.pillar-card ul{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.pillar-card ul a{ text-decoration:none; color:var(--navy-700); font-weight:600; font-size:.95rem; display:flex; align-items:center; gap:8px; }
.pillar-card ul a:hover{ text-decoration:underline; }
.pillar-card ul a::before{ content:''; width:0; height:0; border-left:6px solid var(--gold-500); border-top:4px solid transparent; border-bottom:4px solid transparent; transform:rotate(-38deg); flex:none; }

.stack{ display:flex; flex-direction:column; gap:14px; }
.hstack{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero{ position:relative; overflow:hidden; padding-top:clamp(40px,7vw,72px); padding-bottom:clamp(48px,8vw,88px);
  background: radial-gradient(1000px 460px at 88% -8%, var(--navy-100), transparent 60%), var(--paper); }
.hero-grid{ display:grid; gap:36px; align-items:center; }
@media (min-width:960px){ .hero-grid{ grid-template-columns:1.05fr .95fr; gap:48px; } }
.hero h1{ margin-bottom:.4em; }
.hero-lede{ font-size:clamp(1.02rem,.4vw + 1rem,1.18rem); max-width:56ch; }
.hero-actions{ margin-top:26px; }

.hero-panel{ background:var(--navy-900); color:#fff; border-radius:var(--radius-lg); padding:24px; position:relative; overflow:hidden; box-shadow:var(--shadow-pop); }
.hero-panel::before{ content:''; position:absolute; right:-40px; top:-40px; width:180px; height:180px;
  background:conic-gradient(from 220deg, var(--gold-500), transparent 40%); opacity:.18; border-radius:50%; }
.panel-row{ display:flex; justify-content:space-between; align-items:baseline; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.14); font-family:var(--font-display); font-size:.85rem; position:relative; }
.panel-row:last-child{ border-bottom:none; }
.panel-row .label{ color:#aab1de; } .panel-row .value{ color:#fff; font-weight:700; }
.panel-status{ display:inline-flex; align-items:center; gap:6px; color:#9fe0b9; }
.panel-status::before{ content:''; width:7px; height:7px; border-radius:50%; background:#4fbf7c; box-shadow:0 0 0 3px rgba(79,191,124,.22); }

.stat-strip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stat-strip .grid{ padding-block:22px; }
.stat .num{ font-family:var(--font-display); font-size:clamp(1.5rem,2vw,2rem); color:var(--navy-700); font-weight:700; }
.stat .lbl{ font-family:var(--font-display); font-size:.75rem; font-weight:600; letter-spacing:.03em; color:var(--ink-soft); display:block; margin-top:2px; }

/* =========================================================================
   BREADCRUMBS
   ========================================================================= */
.breadcrumbs{ font-family:var(--font-display); font-weight:600; font-size:.78rem; color:var(--ink-soft); padding-block:14px; }
.breadcrumbs a{ text-decoration:none; color:var(--ink-soft); }
.breadcrumbs a:hover{ color:var(--navy-700); }
.breadcrumbs .sep{ margin:0 6px; color:var(--line); }
.breadcrumbs .current{ color:var(--ink); }

/* =========================================================================
   NUMBERED PROCESS
   ========================================================================= */
.process-list{ list-style:none; margin:0; padding:0; counter-reset:step; }
.process-item{ display:grid; grid-template-columns:auto 1fr; gap:16px; padding:18px 0; border-top:1px solid rgba(255,255,255,.14); }
.process-item:first-child{ border-top:none; }
.process-num{ counter-increment:step; font-family:var(--font-display); font-weight:700; font-size:.85rem; color:var(--navy-900); background:var(--gold-500); border-radius:50%; width:38px; height:38px; display:flex; align-items:center; justify-content:center; flex:none; }
.process-num::before{ content:counter(step, decimal-leading-zero); }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq-item{ border-bottom:1px solid var(--line); padding:6px 0; }
.faq-item summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center; padding:14px 2px; font-weight:700; font-family:var(--font-display); font-size:1.02rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; font-family:var(--font-display); font-size:1.3rem; color:var(--navy-700); flex:none; transition:transform .18s ease; }
.faq-item[open] summary::after{ content:'\2212'; }
.faq-item .faq-a{ padding:0 2px 16px; }

/* =========================================================================
   FORMS / BOOKING
   ========================================================================= */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field label{ font-size:.85rem; font-weight:700; }
.field input, .field select, .field textarea{ font:inherit; padding:13px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; min-height:48px; width:100%; }
.field textarea{ min-height:110px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--navy-700); }

.booking-card{ background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:clamp(20px,3vw,30px); }
.booking-methods{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:560px){ .booking-methods{ grid-template-columns:1fr 1fr 1fr; } }
.booking-method{ border:1px solid var(--line); border-radius:var(--radius); padding:16px; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:8px; min-height:48px; }
.booking-method:hover{ border-color:var(--navy-700); }
.booking-method .tile{ width:36px; height:36px; background:var(--navy-700); color:#fff; border-radius:8px; display:flex; align-items:center; justify-content:center; }

.checkbox-group{ display:flex; flex-wrap:wrap; gap:8px; }
.checkbox-chip{ display:inline-flex; align-items:center; gap:7px; padding:9px 15px; min-height:40px; border:1px solid var(--line); border-radius:999px; background:#fff; font-size:.87rem; cursor:pointer; user-select:none; transition:border-color .12s ease, background .12s ease, color .12s ease; }
/* Overrides .field input's min-height:48px/width:100% -- these checkboxes
   sit inside a .field wrapper (for consistent label spacing) but must stay
   small, not stretch to the full-size text-input treatment. */
.checkbox-chip input{ margin:0; width:15px !important; height:15px !important; min-height:0 !important; padding:0 !important; border:none !important; accent-color:var(--navy-700); }
.checkbox-chip:has(input:checked), .checkbox-chip.is-checked{ border-color:var(--navy-700); background:var(--navy-100); color:var(--navy-700); font-weight:600; }
.field-error{ color:#b3261e; font-size:.82rem; margin-top:-8px; margin-bottom:16px; display:none; }
.field-error.is-visible{ display:block; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{ background:var(--navy-900); color:#c7cdec; }
.footer-top{ padding-block:clamp(36px,6vw,60px); }
.footer-grid{ display:grid; gap:32px; grid-template-columns:1fr; }
@media (min-width:720px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr 1fr; } }
.footer-grid-5{ }
@media (min-width:720px){ .footer-grid-5{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .footer-grid-5{ grid-template-columns:1.1fr 1fr 1fr 1fr 1fr; } }
.footer-brand img{ height:28px; margin-bottom:12px; filter:brightness(0) invert(1); }
.footer-brand p{ color:#9aa2cf; font-size:.9rem; max-width:34ch; }
.footer-col h4{ color:#fff; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; font-family:var(--font-display); font-weight:700; margin-bottom:14px; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-col a{ color:#c7cdec; text-decoration:none; font-size:.92rem; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-block:18px; font-size:.8rem; color:#9aa2cf; display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; }

/* utility */
.text-center{ text-align:center; }
.badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:600; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; background:var(--paper-alt); color:var(--navy-700); border:1px solid var(--line); padding:6px 12px; border-radius:999px; }
.list-check{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.list-check li{ position:relative; padding-left:22px; font-size:.96rem; color:var(--ink-soft); }
.list-check li::before{
  content:''; position:absolute; left:0; top:.5em; width:0; height:0;
  border-left:8px solid var(--gold-500); border-top:5px solid transparent; border-bottom:5px solid transparent;
  transform:rotate(-38deg);
}

.logo-strip{ display:flex; flex-wrap:wrap; gap:10px 14px; justify-content:center; }
.logo-chip{ font-family:var(--font-display); font-weight:700; font-size:.85rem; color:var(--navy-700); background:#fff; border:1px solid var(--line); padding:10px 18px; border-radius:999px; }

/* Paywalled report library cards — locked downloads behind a CTA */
.paywall-card{
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  padding:clamp(18px,3vw,24px); box-shadow:var(--shadow-card); position:relative;
}
.paywall-lock{
  width:36px; height:36px; border-radius:50%; background:var(--navy-100); color:var(--navy-700);
  display:flex; align-items:center; justify-content:center; margin-bottom:12px; flex:none;
}
.paywall-lock svg{ width:16px; height:16px; }
.paywall-card h3{ font-size:1.02rem; }
.paywall-card p{ font-size:.92rem; }
.paywall-badge{
  position:absolute; top:16px; right:16px; font-family:var(--font-display); font-weight:700;
  font-size:.66rem; letter-spacing:.04em; text-transform:uppercase; color:var(--navy-900);
  background:var(--gold-500); padding:5px 10px; border-radius:999px;
}

/* Sample/placeholder content — Our Work & Insights architecture ships with
   the client's real case studies and articles still to come. These make
   clear at a glance that an entry is illustrative, not a real result. */
.card-sample{ position:relative; border-style:dashed; border-color:var(--gold-600); }
.sample-ribbon{
  position:absolute; top:16px; right:16px; font-family:var(--font-display); font-weight:700;
  font-size:.66rem; letter-spacing:.04em; text-transform:uppercase; color:var(--navy-900);
  background:var(--gold-500); padding:5px 10px; border-radius:999px;
}
.proof-note{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-alt);
  padding:14px 18px; font-size:.92rem; color:var(--ink-soft);
}
.proof-note--sample{ border-color:var(--gold-600); background:var(--gold-100); color:var(--ink); }