/* ==========================================================================
   Syndew Atelier — tokens.css (shared design system for all page templates)
   Brand: "Syndew Atelier" · a premium embroidery & monogram house in Lagos.
   Palette taken from the real Syndew Atelier logo — deep indigo (#2D2F81) and
   warm orange-gold (#F9A617) on an ivory linen ground.
   Fonts: DM Serif Display (display headings) + DM Sans (body).
   Self-hosted woff2 in /fonts; font-display:swap.

   Note for future editors: the CSS variable NAMES below are kept from the base
   design system (--navy, --teal, --mint, --amber ...) so every template keeps
   working, but their VALUES are mapped to the Syndew Atelier brand:
     --navy → brand indigo (dark bands)   --teal → deep amber (text accent)
     --mint/--gold-bright → brand orange (buttons, decorative, on-dark accents)
   Semantic aliases (--gold, --cream) are provided for new content.
   ========================================================================== */

/* Self-hosted fonts (latin subset, woff2). DM Sans ships as a variable font, so one
   file covers the 400-700 range. Served from /fonts on our own origin. */
@font-face { font-family:'DM Sans'; src:url('/fonts/dmsans.woff2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; }
@font-face { font-family:'DM Serif Display'; src:url('/fonts/dmserifdisplay.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }

:root {
  /* Brand palette (from the logo) */
  --brand-indigo:#2D2F81; --brand-orange:#F9A617;
  --gold:#C77A00; --gold-bright:#F9A617; --cream:#F7F2E8;
  /* Design-system tokens (names kept, values mapped to the brand) */
  --navy:#2D2F81; --teal:#C77A00; --mint:#F9A617;
  --coral:#C0442F; --amber:#D98324; --sand:#F7F2E8;
  --ink:#23244A; --ink-soft:#4C4E70; --ink-muted:#7C7E9A;
  --navy-2:#3A3C96; --line:#E6E3D6; --white:#FFFFFF;
  --serif:'DM Serif Display', Georgia, serif;
  --sans:'DM Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
  --radius:16px; --radius-lg:24px; --maxw:1140px;
  --shadow:0 2px 16px rgba(35,36,74,0.09);
}

*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:var(--sans); color:var(--ink); background:var(--sand); font-size:17px; line-height:1.6; text-wrap:pretty; }
img { max-width:100%; display:block; }
a { color:var(--teal); text-decoration:none; }
a:hover { color:var(--navy); }
h1,h2,h3 { font-family:var(--serif); font-weight:400; line-height:1.12; margin:0; color:var(--ink); text-wrap:balance; }
h1 { font-size:clamp(38px,5.4vw,62px); }
h2 { font-size:clamp(30px,3.6vw,42px); }
h3 { font-size:24px; }
p { margin:0; }

/* ---- Layout ---- */
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section { padding:88px 0; }
.section--tight { padding:56px 0; }

/* Article / case-study body: content blocks should read as one flowing document, not a stack of
   full-bleed marketing sections. Tighten each section's rhythm and collapse the doubled gap where a
   heading sits directly above the prose it introduces. */
.article-body .section { padding:36px 0; }
.article-body > .section:first-child,
.article-body > div:first-child .section { padding-top:12px; }
.article-body .section + .section,
.article-body > div + div .section { padding-top:0; }
.band { background:var(--navy); color:var(--sand); }
.band h1,.band h2,.band h3 { color:var(--sand); }
.band p { color:#C9CBE6; }
.eyebrow { font-size:13px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--teal); margin-bottom:14px; }
.lede { font-size:20px; color:var(--ink-soft); max-width:640px; }

/* ---- Tri-segment stripe motif (the logo as an accent device) ---- */
.stripe { display:flex; height:6px; border-radius:4px; overflow:hidden; gap:3px; width:120px; }
.stripe > i { flex:1; }
.stripe > i:nth-child(1){ background:var(--teal);} .stripe > i:nth-child(2){ background:var(--mint);} .stripe > i:nth-child(3){ background:var(--amber);}
.stripe--full { width:100%; border-radius:0; height:6px; gap:0; }

/* ---- Buttons ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--sans); font-weight:700; font-size:16px; padding:15px 30px; border-radius:100px; border:none; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; }
.btn:hover { transform:translateY(-1px); }
.btn--primary { background:var(--gold-bright); color:var(--navy); box-shadow:0 4px 16px rgba(249,166,23,0.34); }
.btn--primary:hover { color:var(--navy); }
.btn--ghost { background:transparent; color:var(--sand); border:2px solid rgba(248,247,244,0.35); }
.btn--ghost:hover { color:#fff; border-color:rgba(248,247,244,0.7); }
.btn--navy { background:var(--navy); color:#fff; }
.btn--navy:hover { color:#fff; }

/* ---- Header ---- */
.site-header { background:rgba(255,255,255,0.88); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; transition:box-shadow .22s ease, background .22s ease; }
.site-header.is-scrolled { box-shadow:0 6px 26px rgba(35,36,74,0.09); border-bottom-color:transparent; }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; height:76px; }
.logo img { height:40px; width:auto; }
.brand-logo-img { display:block; width:auto; }
/* On dark surfaces the real (indigo+orange) logo sits on a light chip so it stays legible
   and on-brand rather than being knocked out to a flat white silhouette. */
.brand-chip { display:inline-block; background:var(--cream); padding:11px 18px; border-radius:14px; line-height:0; }
.site-nav { display:flex; align-items:center; gap:34px; }
.site-nav > a.btn { margin-left:6px; }
.site-nav a { font-weight:500; font-size:15.5px; color:var(--ink-soft); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color:var(--ink); }
/* Hover underline grow (desktop). */
.site-nav > a:not(.btn)::before, .nav-drop > button::before { content:''; position:absolute; left:0; right:0; bottom:-10px; height:2.5px; border-radius:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .2s ease; }
.site-nav > a:not(.btn):hover::before, .nav-drop:hover > button::before { transform:scaleX(1); }
.nav-toggle { display:none; background:none; border:none; font-size:26px; color:var(--navy); cursor:pointer; }

/* Selected / current page indicator: teal underline under the active top-level item. */
.site-nav > a:not(.btn), .nav-drop { position:relative; }
.site-nav > a[aria-current="page"]:not(.btn) { font-weight:600; color:var(--ink); }
.site-nav > a[aria-current="page"]:not(.btn)::after,
.nav-drop[data-current]::after {
  content:''; position:absolute; left:0; bottom:-10px; height:2.5px; border-radius:2px;
  background:var(--teal);
}
.site-nav > a[aria-current="page"]:not(.btn)::after { right:0; }
.nav-drop[data-current] > button { font-weight:600; }
.nav-drop[data-current]::after { left:0; right:18px; }

/* ---- Nav dropdown (Who it's for) ---- */
.nav-drop { position:relative; }
.nav-drop > button { font-family:var(--sans); font-weight:500; font-size:15.5px; color:var(--ink-soft); background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:7px; padding:0; }
.nav-drop > button::after { content:''; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); }
.nav-drop:hover > button, .nav-drop > button:focus, .nav-drop[data-current] > button { color:var(--ink); }
.drop-menu { position:absolute; top:calc(100% + 16px); left:-16px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 14px 36px rgba(35,36,74,0.14); padding:10px; display:none; flex-direction:column; gap:2px; min-width:240px; }
.drop-menu::before { content:''; position:absolute; top:-16px; left:0; right:0; height:16px; }
.nav-drop:hover .drop-menu, .nav-drop:focus-within .drop-menu { display:flex; }
.drop-menu a { padding:11px 14px; border-radius:10px; font-weight:500; font-size:15.5px; color:var(--ink-soft); }
.drop-menu a:hover, .drop-menu a[aria-current="page"] { background:var(--sand); color:var(--ink); }
.drop-menu a span { display:block; font-size:12.5px; font-weight:400; color:var(--ink-muted); }

/* ---- Service lead photo (verticalPage header) ---- */
.service-hero-media { width:100%; background:var(--navy); }
.service-hero-media img { width:100%; height:clamp(280px,44vh,470px); object-fit:cover; display:block; }

/* ---- Service cards (home / services teaser) ---- */
.service-card { display:flex; flex-direction:column; background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; text-decoration:none; color:var(--ink); transition:transform .18s ease, box-shadow .18s ease; }
.service-card:hover { transform:translateY(-4px); box-shadow:0 14px 34px rgba(35,36,74,0.16); text-decoration:none; }
.service-card__img { display:block; aspect-ratio:3/2; background-size:cover; background-position:center; background-color:var(--sand); }
.service-card__body { display:flex; flex-direction:column; gap:9px; padding:24px 24px 26px; flex:1; }
.service-card__title { font-family:var(--serif); font-size:22px; line-height:1.15; color:var(--ink); }
.service-card__text { color:var(--ink-soft); font-size:15px; line-height:1.55; }
.service-card__more { margin-top:auto; padding-top:6px; color:var(--gold); font-weight:700; font-size:14.5px; }

/* ---- Product cards (shop / art) ---- */
.product-card { display:flex; flex-direction:column; background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; text-decoration:none; color:var(--ink); transition:transform .18s ease, box-shadow .18s ease; }
.product-card:hover { transform:translateY(-4px); box-shadow:0 14px 34px rgba(35,36,74,0.16); text-decoration:none; }
.product-card__img { display:block; aspect-ratio:1/1; background-size:cover; background-position:center; background-color:var(--sand); }
.product-card__body { display:flex; flex-direction:column; gap:6px; padding:20px 22px 22px; }
.product-card__title { font-family:var(--serif); font-size:20px; line-height:1.15; color:var(--ink); }
.product-card__price { font-weight:700; font-size:16px; color:var(--gold); }
.product-card__avail { font-size:13px; color:var(--ink-muted); }

/* ---- Measurement tool ---- */
.mt-help { background:rgba(45,47,129,0.05); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin:26px 0 8px; font-size:15px; color:var(--ink-soft); }
.mt { margin-top:22px; }
.mt-pick { display:flex; gap:10px; flex-wrap:wrap; }
.mt-tab { border:2px solid var(--line); background:var(--white); color:var(--ink-soft); font:inherit; font-weight:700; font-size:15px; padding:11px 18px; border-radius:100px; cursor:pointer; }
.mt-tab.is-active { border-color:var(--navy); background:var(--navy); color:#fff; }
.mt-blurb { color:var(--ink-soft); margin:16px 0 4px; }
.mt-unit { display:inline-flex; background:var(--sand); border:1px solid var(--line); border-radius:100px; padding:3px; margin:14px 0 6px; }
.mt-unit__btn { border:0; background:transparent; font:inherit; font-size:14px; font-weight:600; color:var(--ink-soft); padding:8px 16px; border-radius:100px; cursor:pointer; }
.mt-unit__btn.is-active { background:var(--white); color:var(--navy); box-shadow:0 1px 3px rgba(35,36,74,0.14); }
.mt-group { margin:30px 0 4px; font-size:20px; }
.mt-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:14px; }
.mt-field { display:flex; flex-direction:column; gap:5px; }
.mt-field label { font-weight:700; font-size:14.5px; }
.mt-unitlab { font-weight:400; color:var(--ink-muted); }
.mt-field input { font:inherit; font-size:16px; color:var(--ink); background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; }
.mt-field input:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(249,166,23,0.18); }
.mt-field input.is-bad { border-color:var(--coral); }
.mt-hint { display:flex; gap:10px; align-items:flex-start; }
.mt-dia { flex:none; width:46px; }
.mt-dia svg { width:46px; height:auto; display:block; }
.mt-how { font-size:13px; color:var(--ink-muted); line-height:1.45; }
.mt-warn { font-size:13px; color:var(--coral); font-weight:600; }
.mt-photo { margin:16px 0 4px; display:flex; gap:10px; flex-wrap:wrap; }
.mt-chartbtn { border:1.5px solid var(--navy); background:var(--navy); color:#fff; font:inherit; font-weight:700; font-size:14.5px; padding:12px 18px; border-radius:12px; cursor:pointer; }
.mt-photobtn { border:1.5px dashed var(--gold); background:rgba(249,166,23,0.06); color:var(--navy); font:inherit; font-weight:700; font-size:14.5px; padding:12px 18px; border-radius:12px; cursor:pointer; }
.mt-photobtn span { font-weight:500; color:var(--ink-muted); }
.mt-estnote { margin-top:12px; background:rgba(249,166,23,0.10); border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:13.5px; color:var(--ink-soft); }
.mt-est { display:inline-block; font-size:11px; font-weight:700; color:#8A3020; background:rgba(176,71,43,0.13); border-radius:6px; padding:1px 6px; letter-spacing:.02em; }
.mt-actions { margin-top:28px; }

/* ---- Photo-estimate modal (beta) ---- */
.mp-overlay { position:fixed; inset:0; z-index:1200; background:rgba(35,36,74,0.55); display:flex; align-items:flex-start; justify-content:center; overflow-y:auto; padding:24px 14px; }
.mp-box { position:relative; background:var(--white); border-radius:var(--radius-lg); max-width:520px; width:100%; padding:28px 26px 26px; box-shadow:0 24px 64px rgba(35,36,74,0.35); }
.mp-close { position:absolute; top:12px; right:14px; border:0; background:none; font-size:28px; line-height:1; color:var(--ink-muted); cursor:pointer; }
.mp-title { font-size:24px; }
.mp-beta { font-family:var(--sans); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#8A3020; background:rgba(176,71,43,0.13); border-radius:6px; padding:2px 7px; vertical-align:middle; }
.mp-lead { color:var(--ink-soft); font-size:14.5px; margin-top:10px; line-height:1.55; }
.mp-steps { color:var(--ink-soft); font-size:14px; margin:14px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:7px; }
.mp-cal { margin:18px 0 8px; }
.mp-cal label { font-weight:700; font-size:14.5px; display:flex; flex-direction:column; gap:6px; max-width:200px; }
.mp-cal input { font:inherit; font-size:16px; border:1.5px solid var(--line); border-radius:12px; padding:11px 14px; }
.mp-frame { position:relative; width:min(320px, 78vw); aspect-ratio:3 / 5; margin:10px auto 14px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--sand); }
.mp-frame img, .mp-frame video { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.mp-frame video { background:#12132b; }
.mp-guide { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:var(--gold); stroke-width:5; stroke-linecap:round; opacity:0.7; pointer-events:none; }
.mp-capture { text-align:center; }
.mp-file { cursor:pointer; }
.mp-cam { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:4px; }
.mp-retake, .mp-flip { background:transparent; color:var(--navy); border:2px solid var(--line); }
.mp-retake:hover, .mp-flip:hover { border-color:var(--navy); }
.mp-upload { text-align:center; margin:12px 0 0; }
.mp-upload a { color:var(--ink-soft); font-size:14px; text-decoration:underline; cursor:pointer; }
.mp-upload a:hover { color:var(--navy); }
.mp-framing { text-align:center; font-size:14px; line-height:1.4; margin:10px auto 0; max-width:340px; min-height:1.2em; }
.mp-framing.is-ok { color:#1f7a3d; font-weight:700; }
.mp-framing.is-warn { color:var(--gold); font-weight:600; }
.mp-status { margin-top:14px; font-size:14px; color:var(--ink-soft); }
.mp-status.is-err { color:var(--coral); font-weight:600; }
.mp-actions { margin-top:18px; }

/* ---- Full measurement chart overlay ---- */
.mc-box { max-width:760px; }
.mc-wrap { display:flex; gap:26px; margin-top:16px; align-items:flex-start; }
.mc-fig { flex:none; width:250px; }
.mc-fig svg { width:100%; height:auto; }
.mc-legend { flex:1; min-width:0; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; max-height:70vh; overflow-y:auto; }
.mc-legend li { display:flex; gap:12px; align-items:flex-start; }
.mc-n { flex:none; width:24px; height:24px; border-radius:50%; background:var(--gold); color:#fff; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; }
.mc-legend li strong { display:block; font-size:15px; color:var(--ink); }
.mc-how { display:block; font-size:13px; color:var(--ink-muted); line-height:1.45; margin-top:2px; }
@media (max-width:600px) { .mc-wrap { flex-direction:column; align-items:center; } .mc-legend { max-height:none; width:100%; } }
.mt-sheet { margin-top:26px; background:var(--white); border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow); }
.mt-sheet__ref { font-size:15px; color:var(--ink-soft); margin-bottom:10px; }
.mt-sheet__ref strong { font-size:18px; color:var(--navy); letter-spacing:.04em; }
.mt-sheet__pre { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13.5px; color:var(--ink); background:var(--sand); border-radius:10px; padding:14px 16px; overflow-x:auto; white-space:pre-wrap; }
.mt-sheet__actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
.mt-note { font-size:13px; color:var(--ink-muted); margin-top:14px; }
@media (max-width:560px) { .mt-fields { grid-template-columns:1fr; } }

/* ---- Order code badge + call-to-order panel ---- */
.ref-badge { display:inline-block; font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.05em; color:var(--navy); background:rgba(45,47,129,0.08); border:1px solid rgba(45,47,129,0.18); border-radius:8px; padding:3px 10px; }
.ref-badge--sm { align-self:flex-start; margin-top:2px; font-size:12px; padding:2px 8px; }
.order-panel { background:var(--white); border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow); }
.order-panel__code { font-size:15px; color:var(--ink-soft); margin-bottom:6px; }
.order-panel__code strong { font-family:var(--sans); font-size:19px; color:var(--navy); letter-spacing:.04em; }
.order-panel__lead { color:var(--ink-soft); font-size:15.5px; margin-bottom:16px; }
.order-panel__actions { display:flex; gap:12px; flex-wrap:wrap; }
.order-panel__wa { background:#25D366; color:#0a3d20; }
.order-panel__wa:hover { color:#0a3d20; }

/* ---- Gallery (portfolio) ---- */
.gallery-grid { columns:3; column-gap:18px; }
.gallery-item { break-inside:avoid; margin:0 0 18px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--white); }
.gallery-item img { width:100%; display:block; }
.gallery-item__cap { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 14px; }
.gallery-item__text { font-size:14px; color:var(--ink-soft); }
@media (max-width:900px) { .gallery-grid { columns:2; } }
@media (max-width:560px) { .gallery-grid { columns:1; } }

/* ---- Floating WhatsApp button ---- */
.wa-float { position:fixed; right:20px; bottom:20px; z-index:900; display:inline-flex; align-items:center; gap:9px; background:#25D366; color:#0a3d20; font-family:var(--sans); font-weight:700; font-size:15px; padding:13px 18px; border-radius:100px; box-shadow:0 8px 24px rgba(37,211,102,0.42); text-decoration:none; transition:transform .12s ease; }
.wa-float:hover { transform:translateY(-2px); color:#0a3d20; }
.wa-float svg { width:22px; height:22px; }
@media (max-width:620px) { .wa-float span { display:none; } .wa-float { padding:14px; } }

/* ---- Cards ---- */
.card { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:32px; }
.card--top-teal { border-top:5px solid var(--teal); }
.card--top-amber { border-top:5px solid var(--amber); }
.grid { display:grid; gap:24px; }
/* minmax(0,1fr) keeps tracks even when a card has wide unbreakable content. */
.grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.tag { display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; padding:5px 14px; border-radius:100px; }
.tag--teal { background:rgba(249,166,23,0.12); color:#B26A00; }
.tag--amber { background:rgba(176,71,43,0.13); color:#A85A12; }
.tag--mint { background:rgba(249,166,23,0.16); color:#B26A00; }

/* ---- Steps (navy band) ---- */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.step-num { font-family:var(--serif); font-size:52px; color:var(--mint); line-height:1; }
.step h3 { margin:12px 0 8px; }

/* ---- Fanned cards illustration (pure CSS) ---- */
.fanned { position:relative; width:340px; height:300px; }
.fanned > div { position:absolute; width:150px; height:216px; border-radius:26px; box-shadow:0 14px 40px rgba(0,0,0,0.32); display:flex; justify-content:center; padding-top:26px; }
.fanned > div > i { width:28px; height:28px; border-radius:50%; background:#fff; }
.fanned .f1 { background:var(--teal); left:0; top:36px; transform:rotate(-13deg); }
.fanned .f2 { background:var(--mint); left:95px; top:16px; transform:rotate(-2deg); }
.fanned .f3 { background:var(--amber); left:190px; top:30px; transform:rotate(9deg); }

/* ---- Footer ---- */
.site-footer { position:relative; background:var(--navy); color:#C9CBE6; padding:64px 0 40px; }
.site-footer::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--gold), var(--gold-bright), var(--gold)); }
.site-footer .cols { display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.site-footer img { height:38px; width:auto; }
.site-footer nav { display:flex; flex-direction:column; gap:10px; }
.site-footer a { color:#C9CBE6; font-size:15px; }
.site-footer a:hover { color:var(--sand); }
.site-footer .legal { border-top:1px solid rgba(184,196,212,0.18); margin-top:44px; padding-top:24px; font-size:13.5px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* ---- Social icon row ---- */
.social-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.social-row a { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; transition:transform .18s ease, background .18s ease, color .18s ease; }
.social-row--footer { margin-top:22px; }
.social-row--footer a { color:#C9CBE6; background:rgba(255,255,255,0.07); }
.social-row--footer a:hover { color:var(--navy); background:var(--gold-bright); transform:translateY(-2px); }
.social-row--contact a { color:var(--navy); background:rgba(45,47,129,0.07); }
.social-row--contact a:hover { color:#fff; background:var(--navy); transform:translateY(-2px); }

/* ---- Map embed (Contact page) ---- */
.map-embed { position:relative; width:100%; height:420px; border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:0 14px 36px rgba(35,36,74,0.08); }
.map-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
@media (max-width:620px) { .map-embed { height:320px; } }

/* ---- Forms (T5) ---- */
.field { display:flex; flex-direction:column; gap:7px; }
.field label { font-weight:700; font-size:14.5px; }
.field input, .field select, .field textarea { font-family:var(--sans); font-size:16px; color:var(--ink); background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:13px 16px; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(249,166,23,0.15); }
.hp { position:absolute; left:-9999px; }

/* ---- CTA banner ---- */
.cta-banner { border-radius:var(--radius-lg); background:var(--navy); color:var(--sand); padding:56px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.cta-banner h2, .cta-banner h3 { color:var(--sand); }
.cta-banner p { color:#C9CBE6; }

/* ---- Motion & pizzazz ---- */
.rv { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.rv-in { opacity:1; transform:none; }
@keyframes rise { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }
.band h1 { animation:rise .7s .08s ease-out both; }
.band { position:relative; overflow:hidden; }
.band::before { content:''; position:absolute; width:680px; height:680px; border-radius:50%; background:radial-gradient(circle, rgba(249,166,23,0.16), transparent 65%); top:-220px; right:-160px; pointer-events:none; }
.card { transition:transform .18s ease, box-shadow .18s ease; }
.card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(35,36,74,0.13); }
@keyframes bob1 { 0%,100% { transform:rotate(-13deg) translateY(0); } 50% { transform:rotate(-13deg) translateY(-12px); } }
@keyframes bob2 { 0%,100% { transform:rotate(-2deg) translateY(0); } 50% { transform:rotate(-2deg) translateY(-16px); } }
@keyframes bob3 { 0%,100% { transform:rotate(9deg) translateY(0); } 50% { transform:rotate(9deg) translateY(-10px); } }
.fanned .f1 { animation:bob1 5.2s ease-in-out infinite; }
.fanned .f2 { animation:bob2 5.2s ease-in-out .5s infinite; }
.fanned .f3 { animation:bob3 5.2s ease-in-out 1s infinite; }
@media (prefers-reduced-motion: reduce) { .band h1, .fanned .f1, .fanned .f2, .fanned .f3 { animation:none; } .rv { opacity:1; transform:none; } }

/* ---- Video embed (T3) ---- */
.video-frame { position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 24px 64px rgba(35,36,74,0.25); background:var(--navy); }
.video-frame video { display:block; width:100%; aspect-ratio:16/9; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .steps { grid-template-columns:1fr; }
  .section { padding:64px 0; }
}
/* Single column on phones so cards never sit cramped two-up. */
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns:1fr; }
}
/* ---- Articles (News / Case Studies) ---- */
.article-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; }
.article-card { display:flex; flex-direction:column; background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; text-decoration:none; color:var(--ink); transition:transform .15s ease, box-shadow .15s ease; }
.article-card:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(35,36,74,0.14); text-decoration:none; }
.article-card__img { display:block; aspect-ratio:16/10; background-size:cover; background-position:center; background-color:var(--sand); }
.article-card__body { display:flex; flex-direction:column; gap:12px; padding:24px; flex:1; }
.article-card__meta { display:flex; align-items:center; gap:12px; }
.article-card__meta time { color:var(--ink-muted); font-size:13.5px; }
.article-card__title { font-family:var(--serif, inherit); font-weight:700; font-size:20px; line-height:1.25; }
.article-card__summary { color:var(--ink-soft); font-size:15px; line-height:1.55; }
.article-card__stat { font-weight:800; font-size:26px; color:var(--teal); line-height:1.1; }
.article-card__stat em { display:block; font-style:normal; font-weight:500; font-size:14.5px; color:var(--ink-soft); }
.article-card__more { margin-top:auto; color:var(--teal); font-weight:700; font-size:14.5px; }
.pill { display:inline-block; padding:4px 11px; border-radius:999px; background:var(--sand); color:var(--navy); font-size:12.5px; font-weight:700; letter-spacing:.02em; }
.pill--light { background:rgba(255,255,255,0.14); color:#fff; }
.scheduler-embed iframe { width:100%; border:0; min-height:640px; }
.list-controls { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.list-controls__right { display:flex; align-items:center; gap:12px; }
.list-controls__label { font-size:13.5px; color:var(--ink-muted); font-weight:600; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { border:1px solid var(--line); background:var(--white); color:var(--ink-soft); font:inherit; font-size:14px; font-weight:600; padding:7px 14px; border-radius:999px; cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease; }
.chip:hover { border-color:var(--teal); color:var(--navy); }
.chip.is-active { background:var(--navy); border-color:var(--navy); color:#fff; }
.rss-link { font-size:14px; font-weight:600; color:var(--ink-muted); }
.rss-link:hover { color:var(--teal); }
.article-nav { max-width:820px; display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:10px auto 0; }
.article-nav__link { display:flex; flex-direction:column; gap:4px; padding:18px 22px; background:var(--white); border:1px solid var(--line); border-radius:14px; text-decoration:none; color:var(--ink); }
.article-nav__link:hover { border-color:var(--teal); text-decoration:none; }
.article-nav__link span { font-size:13px; font-weight:700; color:var(--teal); }
.article-nav__link strong { font-weight:600; font-size:15.5px; line-height:1.3; }
.article-nav__link--next { text-align:right; align-items:flex-end; }
@media (max-width: 620px) { .list-controls { flex-direction:column; align-items:flex-start; } .article-nav { grid-template-columns:1fr; } }
.seg { display:inline-flex; background:var(--sand); border:1px solid var(--line); border-radius:999px; padding:3px; }
.seg button { border:0; background:transparent; cursor:pointer; font:inherit; font-size:14px; font-weight:600; color:var(--ink-soft); padding:7px 16px; border-radius:999px; transition:background .15s ease, color .15s ease; }
.seg button.is-active { background:var(--white); color:var(--navy); box-shadow:0 1px 3px rgba(35,36,74,0.12); }
@media (max-width: 900px) { .article-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 620px) { .article-grid { grid-template-columns:1fr; } }

/* ---- Two ways to split (splitModes block) ---- */
.split-modes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; margin-top:40px; }
.split-mode { position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px 32px; display:flex; flex-direction:column; box-shadow:var(--shadow); overflow:hidden; }
.split-mode::before { content:""; position:absolute; top:0; left:0; right:0; height:5px; }
.split-mode--teal::before { background:var(--teal); }
.split-mode--amber::before { background:var(--amber); }
.split-mode__label { display:inline-block; align-self:flex-start; font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; border-radius:100px; margin-bottom:16px; }
.split-mode--teal .split-mode__label { background:rgba(249,166,23,0.12); color:#B26A00; }
.split-mode--amber .split-mode__label { background:rgba(176,71,43,0.13); color:#A85A12; }
.split-mode__title { font-size:25px; margin-bottom:12px; }
.split-mode__body { color:var(--ink-soft); font-size:16px; }
.split-mode__points { list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.split-mode__points li { position:relative; padding-left:28px; color:var(--ink-soft); font-size:15.5px; line-height:1.5; }
.split-mode__points li::before { content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%; background:var(--mint); -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5 L6.5 11.5 L12.5 4.5' stroke='black' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat; mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5 L6.5 11.5 L12.5 4.5' stroke='black' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat; }
.split-mode__link { margin-top:26px; padding-top:20px; border-top:1px solid var(--line); font-weight:700; font-size:15px; color:var(--teal); }
.split-mode--amber .split-mode__link { color:#A85A12; }
.split-mode__link:hover { color:var(--navy); }
.band .split-mode { background:var(--navy-2); border-color:rgba(255,255,255,0.10); }
.band .split-mode__title { color:var(--sand); }
.band .split-mode__body, .band .split-mode__points li { color:#C9CBE6; }
@media (max-width: 620px) { .split-modes { grid-template-columns:1fr; } }

/* ---- Cookie consent banner ---- */
.cookie-consent { position:fixed; left:0; right:0; bottom:0; z-index:1000; display:none; padding:16px; }
.cookie-consent.is-open { display:block; }
.cookie-consent__card { max-width:var(--maxw); margin:0 auto; background:var(--navy); color:var(--sand); border-radius:var(--radius); box-shadow:0 12px 40px rgba(35,36,74,0.35); padding:22px 26px; display:flex; align-items:center; gap:20px 28px; flex-wrap:wrap; }
.cookie-consent__text { flex:1; min-width:260px; font-size:14.5px; line-height:1.55; color:#D6D8EE; }
.cookie-consent__text a { color:var(--mint); text-decoration:underline; }
.cookie-consent__actions { display:flex; gap:12px; flex-wrap:wrap; }
.cookie-consent .btn { padding:11px 22px; font-size:14.5px; }
.cookie-consent__decline { background:transparent; color:var(--sand); border:1px solid rgba(255,255,255,0.28); border-radius:100px; font-weight:700; cursor:pointer; font:inherit; font-size:14.5px; padding:11px 22px; }
.cookie-consent__decline:hover { border-color:var(--sand); }
@media (max-width:620px) { .cookie-consent__actions { width:100%; } .cookie-consent__actions .btn, .cookie-consent__decline { flex:1; text-align:center; } }

/* ---- Footer newsletter ---- */
.footer-news { margin-top:24px; max-width:340px; }
.footer-news__label { display:block; font-size:13.5px; color:#A9ABD0; margin-bottom:10px; }
.footer-news__row { display:flex; gap:8px; }
.footer-news__row input { flex:1; min-width:0; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); color:#fff; border-radius:100px; padding:11px 16px; font:inherit; font-size:14.5px; }
.footer-news__row input::placeholder { color:#9092BC; }
.footer-news__row input:focus { outline:none; border-color:var(--mint); }
.footer-news__row .btn { padding:11px 20px; font-size:14px; white-space:nowrap; }
.footer-news__thanks { font-size:14.5px; color:var(--mint); font-weight:600; }
.footer-news__err { font-size:13px; color:var(--coral); margin-top:8px; }

/* Per-block visibility (Block Settings panel). */
@media (max-width: 720px) { .u-hide-mobile { display:none !important; } }
@media (min-width: 721px) { .u-hide-desktop { display:none !important; } }

@media (max-width: 720px) {
  .grid--2 { grid-template-columns:1fr; }
  .site-nav { display:none; position:absolute; top:76px; left:0; right:0; background:#fff; flex-direction:column; align-items:stretch; padding:14px 20px 22px; gap:2px; box-shadow:0 22px 42px rgba(35,36,74,0.14); max-height:calc(100vh - 76px); overflow-y:auto; }
  .site-nav.open { display:flex; animation:navDrop .22s ease; }
  @keyframes navDrop { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } }
  .nav-toggle { display:block; }
  .site-nav > a:not(.btn) { padding:12px 4px; border-bottom:1px solid var(--line); font-size:16px; }
  .site-nav > a.btn { margin-top:14px; width:100%; }
  .nav-drop { border-bottom:1px solid var(--line); padding:4px 0 8px; }
  .nav-drop .drop-menu { position:static; display:flex; box-shadow:none; border:none; padding:2px 0 0 12px; min-width:0; }
  .nav-drop > button { pointer-events:none; padding:12px 4px 6px; font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-muted); }
  .nav-drop > button::after { display:none; }
  .cta-banner { padding:36px 28px; }
  .fanned { transform:scale(0.8); transform-origin:top left; }
}