/* ============================================================
   Aspire, Career & Educational Services
   Palette derived from the official logo: petrol TEAL #04758F +
   vivid ORANGE #F7931E. Minimal, corporate layout with a
   contemporary edge: Space Grotesk display + Inter body.
   Native scroll, no smooth-scroll libraries. See DESIGN.md.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ---------- Tokens ---------- */
:root{
  --paper:#F6F3EB;
  --paper-2:#FCFAF3;
  --paper-3:#EAE5D6;
  --ink:#0C2E37;          /* deep petrol, headings & strong text */
  --ink-2:#073640;        /* dark sections / footer (brand teal-dark) */
  --teal:#04758F;         /* brand primary */
  --teal-2:#0A6075;
  --teal-light:#9CC4CE;   /* labels/captions on dark */
  --orange:#F7931E;       /* brand accent / CTAs */
  --orange-deep:#E27E0B;
  --orange-soft:#F8A845;
  --muted:#5A6669;
  --line:#E4DECF;
  --line-dark:rgba(240,236,223,.15);
  --cream-on-dark:#EFEADC;

  /* legacy aliases (older inline styles still resolve) */
  --ivory:#F6F3EB;
  --ivory-2:#FCFAF3;
  --pine:#0C2E37;
  --pine-700:#073640;
  --clay:#04758F;
  --clay-soft:#F8A845;
  --terracotta:#F7931E;
  --accent:#F7931E;
  --accent-deep:#E27E0B;
  --accent-soft:#F8A845;
  --sand:#9CC4CE;

  --container:1180px;
  --container-wide:1300px;
  --gutter:clamp(20px,5vw,56px);
  --section-y:clamp(44px,5.5vw,82px);

  /* tightened for a more corporate, less "editorial" feel */
  --r-lg:14px;
  --r-md:10px;
  --r-sm:8px;

  --shadow:0 24px 60px -40px rgba(7,40,48,.42);
  --shadow-sm:0 14px 32px -26px rgba(7,40,48,.34);

  /* --serif = the display/heading face (now the geometric Space Grotesk);
     kept under the old token name so every existing reference resolves. */
  --serif:'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display:'Space Grotesk', system-ui, sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);font-size:1.02rem;line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
::selection{background:var(--teal);color:#fff}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.06;letter-spacing:-.025em;color:var(--ink)}
.h-display{font-size:clamp(2.7rem,6.6vw,5.4rem);line-height:1.0;letter-spacing:-.04em;font-weight:600}
h1{font-size:clamp(2.4rem,5.2vw,4.2rem)}
h2{font-size:clamp(1.9rem,3.7vw,3rem)}
h3{font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.18}
h4{font-size:1.1rem;line-height:1.3;font-weight:600}
p{max-width:66ch}
/* accent word, Space Grotesk has no italic, so the "flair" is a teal colour hit */
.it{font-style:normal;font-weight:600;color:var(--teal)}
em{font-style:normal;color:var(--teal);font-weight:500}
strong{font-weight:600}

.eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);display:inline-flex;align-items:center;gap:.7em}
.eyebrow::before{content:"";width:1.6em;height:1.5px;background:var(--orange);border-radius:2px}
.eyebrow.center{justify-content:center}
.lead{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.6;color:var(--muted)}
.muted{color:var(--muted)}

/* ---------- Layout ---------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);width:100%}
.container.wide{max-width:var(--container-wide)}
.section{padding-block:var(--section-y)}
.section.tight{padding-block:clamp(40px,5vw,72px)}
.grid{display:grid;gap:clamp(28px,4vw,64px)}
.center{text-align:center}
.max-720{max-width:720px}
.mx-auto{margin-inline:auto}
.stack > * + *{margin-top:1.1rem}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--sans);font-size:.92rem;font-weight:600;letter-spacing:.01em;padding:.95em 1.7em;border-radius:999px;line-height:1;white-space:nowrap;transition:background .28s var(--ease),color .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease),transform .28s var(--ease)}
.btn svg{width:1.05em;height:1.05em;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translate(3px,-3px)}
.btn-primary{background:var(--teal);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--teal-2)}
.btn-accent{background:var(--orange);color:#fff;box-shadow:0 14px 30px -16px rgba(247,147,30,.7)}
.btn-accent:hover{background:var(--orange-deep)}
.btn-outline{border:1px solid var(--teal);color:var(--teal)}
.btn-outline:hover{background:var(--teal);color:#fff}
.btn-light{background:var(--paper);color:var(--ink)}
.btn-light:hover{background:#fff}
.btn-ghost-light{border:1px solid rgba(241,233,217,.45);color:var(--cream-on-dark)}
.btn-ghost-light:hover{background:rgba(241,233,217,.1)}

.textlink{display:inline-flex;align-items:center;gap:.55em;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);padding-bottom:.35em;position:relative;width:fit-content}
.textlink::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:var(--orange);transform:scaleX(1);transform-origin:left;transition:transform .4s var(--ease)}
.textlink:hover::after{transform:scaleX(0);transform-origin:right}
.textlink svg{width:.95em;height:.95em;transition:transform .3s var(--ease)}
.textlink:hover svg{transform:translate(3px,-3px)}

/* ---------- Navbar + logo ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);border-bottom:1px solid transparent}
.nav-inner{max-width:var(--container-wide);margin-inline:auto;padding:1rem var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;transition:padding .4s var(--ease)}
.nav.scrolled{background:rgba(246,243,235,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line);box-shadow:0 12px 30px -26px rgba(7,40,48,.5)}
.nav.scrolled .nav-inner{padding-block:.65rem}
.brand{display:flex;align-items:center}
/* --- Text wordmark (placeholder until the upgraded logo lands) --- */
.wordmark{display:inline-flex;flex-direction:column;gap:.18em;line-height:1}
.wordmark .wm-name{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;color:var(--ink);transition:font-size .4s var(--ease),color .3s var(--ease)}
.wordmark .wm-name .dot{color:var(--orange)}
.wordmark .wm-sub{font-family:var(--sans);font-size:.56rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);transition:color .3s var(--ease)}
.nav.scrolled .wordmark .wm-name{font-size:1.34rem}
.nav.on-dark:not(.scrolled) .wordmark .wm-name{color:var(--paper)}
.nav.on-dark:not(.scrolled) .wordmark .wm-sub{color:var(--teal-light)}
.footer .wordmark .wm-name{color:var(--paper);font-size:1.7rem}
.footer .wordmark .wm-sub{color:var(--teal-light)}

.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{font-size:.92rem;font-weight:500;position:relative;padding:.2rem 0;transition:color .25s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-3px;height:1.5px;width:100%;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--orange-deep)}
.nav.on-dark:not(.scrolled){color:var(--cream-on-dark)}
.nav.on-dark:not(.scrolled) .nav-links a{color:var(--cream-on-dark)}
.nav.on-dark:not(.scrolled) .nav-toggle span{background:var(--cream-on-dark)}
.nav-cta{display:flex;align-items:center;gap:1rem}

.nav-toggle{display:none;flex-direction:column;gap:5px;padding:8px;z-index:60}
.nav-toggle span{width:24px;height:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .3s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:900px){
  .nav-toggle{display:flex}
  /* top is pinned just below the fixed header bar (measured ~64px) rather than
     inset:0 + top padding, so this box's own edge, not a padding illusion, is what
     keeps scrolled content from ever reaching the header: overflow-y:auto clips at
     the box boundary, so it can't paint over the logo no matter how far you scroll. */
  .nav-links{position:fixed;top:64px;left:0;right:0;bottom:0;width:100%;background:var(--paper);flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:1.5rem var(--gutter) 2rem;transform:translateX(100%);transition:transform .4s var(--ease);overflow-y:auto}
  .nav-links.open{transform:translateX(0)}
  .nav-links a{font-size:1.7rem;font-family:var(--serif);color:var(--ink)!important}
  .nav-links > a,.nav-links > .nav-item{width:100%;text-align:center;padding:1.15rem 0;border-bottom:1px solid var(--line)}
  .nav-links > a:last-child,.nav-links > .nav-item:last-child{border-bottom:none}
  .nav-item.has-mega > a{padding:0}
  .nav-cta .btn{display:none}
  .nav .brand{position:relative;z-index:60}              /* keep logo above the open menu */
  .nav.scrolled .nav-links,.nav-links{box-shadow:none}
  /* when the menu is open, the header bar must stay solid (not transparent) so it
     masks the field list as it scrolls up underneath the pinned logo/toggle, an
     opaque bar reads as a header; a transparent one lets scrolled text show through
     and visually collide with the logo. backdrop-filter still has to go, though:
     any filter on .nav would make it the containing block for .nav-links's fixed
     inset:0, breaking full-viewport coverage. */
  .nav.menu-open{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--paper)!important;box-shadow:none!important;border-bottom-color:var(--line)!important}
  /* the full-screen mobile menu is always a light panel, even when the header sits on
     a dark hero, the toggle (now an X) and logo must switch back to dark regardless
     of the page's on-dark state, since they now sit on the opaque light header bar */
  .nav.on-dark.menu-open .nav-toggle span{background:var(--ink)}
  .nav.on-dark.menu-open .wordmark .wm-name{color:var(--ink)}
  .nav.on-dark.menu-open .wordmark .wm-sub{color:var(--muted)}
}

/* ---------- Programs mega-menu (Program → Field click → Country popup → Colleges) ---------- */
.nav-item{position:relative;display:flex;align-items:center}
.nav-item.has-mega > a{display:inline-flex;align-items:center;gap:.35em}
.nav-item.has-mega > a svg{width:13px;height:13px;transition:transform .25s var(--ease)}
.nav-item.has-mega:hover > a svg,.nav-item.has-mega.mega-open > a svg{transform:rotate(180deg)}
/* the panel itself opens on hover (desktop) / tap (mobile, via .mega-open), this is
   the ONE hover-driven level. Fields/Countries below are click-driven accordions, not hover. */
/* invisible hover-bridge: without this, moving the mouse from the trigger down to the
   panel crosses a gap that isn't part of .nav-item's hover box, so :hover drops and the
   panel closes before you reach it. This pseudo-element fills that gap so hover stays
   continuous from the trigger straight into the panel. */
.nav-item.has-mega::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);width:120px;height:20px;z-index:69}
.mega{position:absolute;top:calc(100% + 20px);left:50%;transform:translateX(-50%) translateY(10px) scale(.98);width:min(860px,94vw);max-height:min(78vh,620px);overflow-y:auto;overflow-x:hidden;background:var(--paper);border-radius:var(--r-lg);box-shadow:0 40px 80px -24px rgba(6,28,34,.4),0 2px 0 rgba(6,28,34,.03);border:1px solid var(--line);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .1s linear .2s;z-index:70}
.mega::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--teal),var(--orange));border-radius:var(--r-lg) var(--r-lg) 0 0}
.mega::-webkit-scrollbar{width:7px}
.mega::-webkit-scrollbar-track{background:transparent}
.mega::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.mega{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.nav-item.has-mega:hover .mega,.nav-item.has-mega.mega-open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0) scale(1);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s}
/* three balanced columns, each holding one or more groups stacked - keeps every group
   flush to the top of its column instead of a 5th group wrapping onto a second grid row */
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:clamp(18px,2vw,26px);align-items:start}
.mega-col{min-width:0;padding:0 clamp(12px,1.4vw,20px)}
.mega-col + .mega-col{border-left:1px solid var(--line)}
.mega-group + .mega-group{margin-top:1.6rem}
.mega-group h4{display:flex;align-items:center;gap:.6em;font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin:0 0 .95rem}
.mega-group h4 .g-icon{width:28px;height:28px;flex:none;border-radius:8px;background:rgba(4,117,143,.09);color:var(--teal);display:inline-flex;align-items:center;justify-content:center}
.mega-group h4 .g-icon svg{width:15px;height:15px}
.mega-field{border-bottom:1px solid var(--line)}
.mega-field:last-child{border-bottom:none}
/* Sub-item nested under the field above it (e.g. Addiction & Mental Health under Community
   Support Worker). The indent is padding, not margin, so the row separators stay flush with
   the rest of the column, and the parent drops its separator so the pair reads as one block. */
.mega-field.mega-field-parent{border-bottom:none}
.mega-field.mega-field-sub{position:relative;padding-left:1.25rem}
.mega-field.mega-field-sub::before{content:"";position:absolute;left:.35rem;top:.42rem;bottom:.42rem;width:1.5px;border-radius:2px;background:var(--line)}
/* prefixed to outrank the ".nav-links .nav-item.has-mega .mega-field-btn" base rule below */
.nav-links .nav-item.has-mega .mega-field.mega-field-sub .mega-field-btn{font-size:.8rem;font-weight:500;color:var(--muted)}
.nav-links .nav-item.has-mega .mega-field.mega-field-sub .mega-field-btn:hover{color:var(--teal)}
.nav-links .nav-item.has-mega .mega-field-btn{display:flex;align-items:center;justify-content:space-between;gap:.6em;width:100%;text-align:left;background:none;border:none;border-radius:8px;padding:.82em .55em;margin:0 -0.55em;font-family:var(--sans);font-size:.85rem;font-weight:600;color:var(--ink);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease)}
.nav-links .nav-item.has-mega .mega-field-btn:hover{background:rgba(4,117,143,.06);color:var(--teal)}
.mega-field-btn svg{width:13px;height:13px;flex:none;color:var(--muted);transition:transform .25s var(--ease)}
.mega-field.field-open .mega-field-btn svg{transform:rotate(90deg)}
.mega-field.field-open .mega-field-btn{color:var(--teal)}
/* countries "pop up", revealed only after the field is clicked, not on hover */
.mega-countries{display:flex;flex-wrap:wrap;gap:.4rem;max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.mega-field.field-open .mega-countries{max-height:220px;padding:.1rem 0 .85rem}
.nav-links .nav-item.has-mega .mega-countries a{font-size:.74rem;font-weight:600;color:var(--muted);background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:.38em 1em;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.nav-links .nav-item.has-mega .mega-countries a::after{display:none}
.nav-links .nav-item.has-mega .mega-countries a:hover{color:#fff;background:var(--teal);border-color:var(--teal)}
.mega-foot{display:flex;align-items:center;justify-content:center;gap:.6em;padding:.9rem clamp(18px,2vw,26px);border-top:1px solid var(--line);background:var(--paper-2);border-radius:0 0 var(--r-lg) var(--r-lg);font-size:.82rem}
.mega-foot span{color:var(--muted)}
.mega-foot a{display:inline-flex;align-items:center;gap:.4em;font-weight:700}
/* the mega panel always has a light background, even on pages/states where the header
   itself sits on-dark, .nav-links a's on-dark color rule outranks a plain ".mega-foot a"
   selector on specificity, so this needs to match it (and win on source order) or the
   link goes pale-on-pale and disappears, same class of bug the country pills already had */
.nav-links .nav-item.has-mega .mega-foot a{color:var(--teal)}
.mega-foot a svg{width:12px;height:12px;transition:transform .25s var(--ease)}
.mega-foot a:hover svg{transform:translate(2px,-2px)}

@media(max-width:900px){
  .nav-item.has-mega{width:100%;flex-direction:column;align-items:stretch}
  .nav-item.has-mega::after{display:none}
  .nav-item.has-mega > a{justify-content:center}
  .mega{position:static;transform:none;width:100%;max-width:360px;margin:1rem auto 0;max-height:none;overflow-y:visible;opacity:1;visibility:visible;pointer-events:auto;box-shadow:none;border:none;background:transparent;padding:0;display:none;z-index:auto}
  .mega::before{display:none}
  .nav-item.has-mega.mega-open .mega,.nav-item.has-mega:hover .mega{display:block;transform:none}
  .mega-grid{grid-template-columns:1fr;padding:0}
  .mega-col{padding:0}
  .mega-col + .mega-col{border-left:none}
  .mega-group + .mega-group,.mega-col + .mega-col .mega-group:first-child{border-top:1px solid var(--line);margin-top:1rem;padding-top:1rem}
  .mega-group h4{color:var(--teal)}
  .nav-links .nav-item.has-mega .mega-field-btn{font-size:1rem}
  .nav-links .nav-item.has-mega .mega-field.mega-field-sub .mega-field-btn{font-size:.92rem}
  .mega-foot{background:transparent;border-radius:0;margin-top:.5rem;flex-wrap:wrap}
  .mega-foot a{font-size:.85rem;font-family:var(--sans)}
}
@media(max-width:560px){.wordmark .wm-name{font-size:1.3rem}.wordmark .wm-sub{font-size:.5rem;letter-spacing:.18em}}
/* sticky side columns are a desktop nicety, disable on stacked layouts so they don't overlap */
@media(max-width:820px){.split [style*="position:sticky"]{position:static!important;top:auto!important}}

/* ---------- Editorial hero (Armonia-style) ---------- */
.hero-ed{padding-top:clamp(116px,15vw,168px);padding-bottom:clamp(20px,3vw,40px)}
.hero-head{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(24px,4vw,56px);align-items:end;margin-bottom:clamp(26px,3.5vw,48px)}
.hero-head h1{margin:0}
.hero-head .h-side{padding-bottom:.6rem}
.hero-head .h-side p{font-size:1.05rem;color:var(--muted);max-width:34ch;margin-bottom:1.3rem;line-height:1.55}
.hero-figure{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/7;background:var(--line)}
.hero-figure img{width:100%;height:100%;object-fit:cover;animation:figIn 1.4s var(--ease) both}
@keyframes figIn{from{transform:scale(1.06)}to{transform:scale(1)}}
.hero-figure .tag{position:absolute;left:1.2rem;bottom:1.2rem;display:flex;gap:.5rem;flex-wrap:wrap}
.hero-figure .tag span{background:rgba(246,243,235,.92);color:var(--ink);font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:.5em 1em;border-radius:999px;backdrop-filter:blur(4px)}
@media(max-width:820px){.hero-head{grid-template-columns:1fr;align-items:start}.hero-figure{aspect-ratio:4/3}}

/* ---------- Standard hero (professional / corporate) ---------- */
.hero{position:relative;display:flex;align-items:center;min-height:clamp(540px,78vh,720px);color:#fff;isolation:isolate;overflow:hidden}
.hero .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;animation:figIn 1.6s var(--ease) both}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,32,40,.9),rgba(6,32,40,.66) 52%,rgba(6,32,40,.34))}
.hero > .container{min-width:0}
.hero .hero-inner{padding-block:clamp(132px,17vw,168px) clamp(52px,8vw,88px);max-width:760px}
.hero .eyebrow{color:var(--orange-soft)}
.hero .eyebrow::before{background:var(--orange-soft)}
.hero h1{color:#fff;max-width:15ch;margin:.9rem 0 0;overflow-wrap:break-word}
@media(max-width:560px){.hero h1.h-display{font-size:clamp(2.15rem,10vw,2.9rem)}}
.hero .it{color:var(--orange-soft)}
.hero-type::after{content:"";display:inline-block;width:3px;height:.82em;background:currentColor;margin-left:.1em;vertical-align:-.05em;animation:heroTypeBlink 1s step-end infinite}
@keyframes heroTypeBlink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.hero-type::after{animation:none}}
.hero .sub{color:rgba(255,255,255,.9);font-size:clamp(1.05rem,1.35vw,1.24rem);line-height:1.6;max-width:54ch;margin-top:1.25rem}
.hero .hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.1rem}
.hero .hero-chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:2.4rem}
.hero .hero-chips span{font-size:.74rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.4);padding:.5em 1.05em;border-radius:999px;backdrop-filter:blur(2px)}
@media(max-width:560px){.hero .hero-actions .btn{width:100%;justify-content:center}}
/* Compact hero for interior pages (same look as home, shorter) */
.hero.compact{min-height:clamp(300px,42vh,440px)}
.hero.compact .hero-inner{padding-block:clamp(118px,15vw,146px) clamp(38px,5.5vw,60px);max-width:860px}
.hero.compact .h-display{font-size:clamp(2.2rem,4.7vw,3.6rem);letter-spacing:-.03em}
.hero.compact .sub{max-width:62ch}

/* Hero with a consultation-request capture card (homepage) */
.hero-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(28px,4vw,64px);align-items:center;padding-block:clamp(132px,17vw,168px) clamp(52px,8vw,88px)}
.hero-split .hero-inner{padding-block:0;max-width:none}
/* only index.html uses .hero-split without .compact, so this only shrinks the
   homepage headline (which is long, "Your pathway to..."), not the shorter
   one-liners on the other .hero.compact pages that already use a smaller size.
   ".hero h1{max-width:15ch}" was tuned for those short one-liners and was
   quietly capping this longer headline's line length too - override it here
   so lines stretch across the full column instead of wrapping early. */
.hero-split .h-display{font-size:clamp(1.9rem,3.4vw,2.7rem);letter-spacing:-.03em;max-width:none}
.hero-split .sub{font-size:clamp(.88rem,1vw,.98rem)}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;padding-block:clamp(120px,16vw,150px) clamp(40px,6vw,60px)}}
.hero.compact .hero-grid{padding-block:clamp(118px,15vw,146px) clamp(40px,6vw,64px)}
.hero-form{background:var(--paper-2);border-radius:var(--r-md);padding:clamp(16px,1.8vw,22px);box-shadow:0 40px 80px -32px rgba(4,20,26,.6);max-width:340px;width:100%;justify-self:end}
.hero-form .eyebrow{color:var(--teal)}
.hero-form .eyebrow::before{background:var(--orange)}
.hero-form h3{font-family:var(--display);color:var(--ink);font-weight:600;font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.2;margin:.3rem 0 .8rem}
.hero-form .form{gap:.55rem}
.hero-form .field{gap:.42rem}
.hero-form .field label{color:var(--ink);font-size:.76rem}
.hero-form .field input,.hero-form .field textarea{padding:.6em .85em;font-size:.92rem}
.hero-form .field textarea{min-height:60px}
.hero-form .btn{width:100%;justify-content:center;margin-top:.2rem}
@media(max-width:960px){.hero-form{max-width:480px;justify-self:stretch}}
@media(max-width:560px){.hero.compact .h-display{font-size:clamp(2rem,8vw,2.6rem)}}

/* CSS-only intro fade (never gates content behind JS) */
[data-in]{opacity:0;transform:translateY(20px);animation:fadeInUp .9s var(--ease) forwards}
[data-in="2"]{animation-delay:.1s}
[data-in="3"]{animation-delay:.2s}
[data-in="4"]{animation-delay:.3s}
@keyframes fadeInUp{to{opacity:1;transform:none}}

/* ---------- Scroll reveal (below the fold) ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal-delay="4"]{transition-delay:.32s}
.clip-reveal{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s var(--ease)}
.clip-reveal.in{clip-path:inset(0 0 0 0)}
/* Images/media are ALWAYS visible, never gated behind a JS reveal */
.media,.o-media,.hero-figure{opacity:1!important;transform:none!important;clip-path:none!important}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:clamp(20px,3vw,40px)}
.stat{padding-top:1.3rem;border-top:1.5px solid var(--line)}
.stat .num{font-family:var(--serif);font-size:clamp(2.8rem,5.5vw,4.6rem);line-height:.95;color:var(--ink);font-weight:520;display:flex;align-items:baseline;gap:.04em;letter-spacing:-.03em}
.stat .suffix{font-size:.42em;color:var(--orange);font-weight:560}
.stat .label{margin-top:.7rem;font-size:.9rem;color:var(--muted);max-width:24ch}
.on-dark .stat{border-top-color:var(--line-dark)}
.on-dark .stat .num{color:var(--paper)}
.on-dark .stat .label{color:rgba(241,233,217,.72)}

/* ---------- Media ---------- */
.media{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--line)}
.media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.media.hover-zoom:hover img{transform:scale(1.05)}
.media .chip{position:absolute;left:1rem;bottom:1rem;background:rgba(246,243,235,.92);color:var(--ink);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:.5em 1em;border-radius:999px;backdrop-filter:blur(4px)}
.ratio-4-5{aspect-ratio:4/5}
.ratio-3-4{aspect-ratio:3/4}
.ratio-1-1{aspect-ratio:1/1}
.ratio-16-10{aspect-ratio:16/10}
.ratio-16-9{aspect-ratio:16/9}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.split.wide-left{grid-template-columns:1.15fr .85fr}
.split.wide-right{grid-template-columns:.85fr 1.15fr}
@media(max-width:820px){.split,.split.wide-left,.split.wide-right{grid-template-columns:1fr}}

/* ---------- Flanking trio ---------- */
.trio{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:clamp(24px,3vw,44px);align-items:stretch}
.trio .media{aspect-ratio:auto;min-height:clamp(330px,34vw,420px)}
.trio .t-mid{padding:0 clamp(0px,1vw,12px);display:flex;flex-direction:column;justify-content:center}
.trio .t-mid h2{margin:.4rem 0 1rem;font-size:clamp(1.6rem,2.5vw,2.2rem)}
.trio .t-mid p{color:var(--muted);font-size:.98rem}
@media(max-width:900px){.trio{grid-template-columns:1fr 1fr}.trio .t-mid{grid-column:1/-1;order:-1}}
@media(max-width:560px){.trio{grid-template-columns:1fr}}

.section-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.section-head .lead{max-width:42ch}
@media(max-width:760px){.section-head{grid-template-columns:1fr;gap:18px}}

/* ---------- Index list ---------- */
.index-list{border-top:1px solid var(--line)}
.index-row{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--line);transition:padding-left .4s var(--ease)}
.index-row:hover{padding-left:clamp(8px,1.5vw,22px)}
.index-row .idx{font-family:var(--serif);font-size:1rem;color:var(--orange);width:2.5em;font-weight:600}
.index-row .body h3{transition:color .3s}
.index-row:hover .body h3{color:var(--teal)}
.index-row .body p{color:var(--muted);margin-top:.4rem;font-size:.96rem}
.index-row .go{width:46px;height:46px;border-radius:999px;border:1px solid var(--line);display:grid;place-items:center;color:var(--teal);transition:background .3s var(--ease),color .3s var(--ease),border-color .3s}
.index-row:hover .go{background:var(--teal);color:#fff;border-color:var(--teal)}
.index-row .go svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.index-row:hover .go svg{transform:translate(2px,-2px)}
@media(max-width:640px){.index-row{grid-template-columns:auto 1fr;gap:18px}.index-row .go{display:none}}

/* ---------- Feature cards ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px)}
@media(max-width:1000px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}
.card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(24px,3vw,36px);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.card .ic{width:48px;height:48px;border-radius:12px;background:rgba(4,117,143,.1);display:grid;place-items:center;color:var(--teal);margin-bottom:1.3rem}
.card .ic svg{width:24px;height:24px}
.card h3{font-size:1.25rem;margin-bottom:.5rem}
.card p{font-size:.94rem;color:var(--muted)}

/* ---------- Why-choose features ---------- */
.feat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,48px)}
@media(max-width:1000px){.feat-row{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.feat-row{grid-template-columns:1fr}}
.feat{border-top:1.5px solid var(--line);padding-top:1.4rem;display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:start}
.feat h4{font-size:1.15rem;margin-bottom:.4rem}
.feat p{font-size:.93rem;color:var(--muted)}
.feat .f-ic{color:var(--teal)}
.feat .f-ic svg{width:26px;height:26px}

/* ---------- Country cards ---------- */

/* ---------- Field / career cards (home) ---------- */
.field-card .ic{background:rgba(4,117,143,.1)}
.field-card .whereto{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.1rem}
.field-card .whereto span{font-size:.72rem;font-weight:500;letter-spacing:.03em;color:var(--teal);background:rgba(4,117,143,.09);border:1px solid rgba(4,117,143,.16);padding:.3em .8em;border-radius:999px}

/* ---------- Best country by field (filterable grid) ---------- */
.fx-filters{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:clamp(22px,3vw,34px)}
.fx-chip{font-family:var(--sans);font-size:.85rem;font-weight:600;letter-spacing:.01em;padding:.55em 1.15em;border:1px solid var(--line);border-radius:999px;background:var(--paper-2);color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:.45em;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s}
.fx-chip:hover{border-color:var(--teal);color:var(--teal)}
.fx-chip.active{background:var(--teal);color:#fff;border-color:var(--teal)}
.fx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:clamp(14px,1.6vw,20px)}
.fx-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(20px,2.4vw,26px);display:flex;flex-direction:column;gap:.85rem;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.fx-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:rgba(4,117,143,.3)}
.fx-card h3{font-family:var(--serif);font-weight:600;font-size:clamp(1.08rem,1.5vw,1.26rem);letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.fx-card .fx-country{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-size:.86rem;font-weight:600;color:var(--teal)}
.fx-card .fx-country span{display:inline-flex;align-items:center;gap:.4em}
.fx-card .fx-unis{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:.35rem}
.fx-card .fx-unis span{font-size:.75rem;font-weight:500;letter-spacing:.01em;color:var(--muted);background:#fff;border:1px solid var(--line);padding:.34em .78em;border-radius:999px}
.fx-card[hidden]{display:none}
.fx-note{font-size:.85rem;margin-top:clamp(20px,2.6vw,30px)}

/* ---------- Field+country result (universities & programs, from the Programs mega-menu) ---------- */
#fieldResult{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
#fieldResult.is-visible{opacity:1;transform:none}
.result-head{max-width:640px;margin:0 auto;text-align:center}
.result-head h2{margin:.3rem 0 .5rem;font-size:clamp(1.5rem,3vw,2.1rem)}
.uni-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(16px,2vw,22px);margin:clamp(24px,3vw,36px) auto 0;text-align:left;max-width:1100px}
.uni-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(20px,2.2vw,26px);display:flex;flex-direction:column;gap:.7rem;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.uni-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:rgba(4,117,143,.3)}
.uni-card-head{display:flex;flex-direction:column;gap:.3rem}
.uni-card-head h3{font-family:var(--serif);font-weight:600;font-size:clamp(1.05rem,1.4vw,1.2rem);letter-spacing:-.01em;color:var(--ink);line-height:1.25}
.uni-loc{font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--teal)}
.uni-blurb{font-size:.92rem;color:var(--muted);line-height:1.55}
.uni-intakes{display:inline-flex;align-items:center;gap:.5em;align-self:flex-start;font-size:.8rem;font-weight:600;letter-spacing:.01em;color:var(--teal);background:rgba(4,117,143,.08);border:1px solid rgba(4,117,143,.25);border-radius:999px;padding:.4em .85em;line-height:1.35}
.uni-intakes svg{width:14px;height:14px;flex:none}
.uni-grid.single .uni-intakes{grid-column:1}
.uni-programs{list-style:none;margin:.2rem 0 0;padding:.85rem 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.7rem}
.uni-programs li{display:flex;flex-direction:column;gap:.2rem}
/* Single featured program (landing pages with exactly one college/program) */
.uni-grid.single{grid-template-columns:1fr}
.uni-grid.single .uni-card{padding:clamp(24px,3vw,40px)}
@media(min-width:768px){
  .uni-grid.single .uni-card{display:grid;grid-template-columns:1fr 1.05fr;grid-template-rows:auto 1fr;column-gap:clamp(32px,4vw,56px);align-items:start}
  .uni-grid.single .uni-card-head{grid-column:1;grid-row:1}
  .uni-grid.single .uni-blurb{grid-column:1;grid-row:2}
  .uni-grid.single .uni-programs{grid-column:2;grid-row:1 / 3;border-top:none;margin-top:0;padding:0 0 0 clamp(28px,3vw,44px);border-left:1px solid var(--line)}
}
.prog-name{font-size:.86rem;font-weight:700;color:var(--ink)}
.prog-desc{font-size:.84rem;color:var(--muted);line-height:1.5}
.result-actions{margin-top:clamp(24px,3vw,34px);display:flex;gap:1.2rem;justify-content:center;align-items:center;flex-wrap:wrap}

/* ---------- Track toggle (services roadmap) ---------- */
.track-toggle{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem;margin-bottom:clamp(32px,4.5vw,52px)}
.track-toggle .tab{padding:.85em 1.7em;border-radius:999px;background:var(--paper-3);color:var(--ink);font-family:var(--sans);font-size:.92rem;font-weight:600;border:1px solid transparent;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s}
.track-toggle .tab:hover{border-color:var(--line)}
.track-toggle .tab.active{background:var(--teal);color:#fff}
.track-panel{display:none}
.track-panel.active{display:block;animation:fadeUp .55s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- Dark section ---------- */
.panel-dark{background:var(--ink-2);color:var(--cream-on-dark);position:relative;overflow:hidden}
.panel-dark h1,.panel-dark h2,.panel-dark h3{color:var(--paper)}
.panel-dark .eyebrow{color:var(--orange-soft)}
.panel-dark .eyebrow::before{color:var(--orange-soft)}
.panel-dark p{color:rgba(241,233,217,.82)}
.panel-dark .topo{position:absolute;inset:0;opacity:.12;pointer-events:none}

/* ---------- Testimonial ---------- */
.quote{font-family:var(--serif);font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1.32;color:var(--ink);font-weight:500;letter-spacing:-.02em}
.panel-dark .quote{color:var(--paper)}
.q-person{display:flex;align-items:center;gap:1rem;margin-top:2rem}
.q-person img{width:56px;height:56px;border-radius:999px;object-fit:cover}
.q-person b{display:block;font-family:var(--sans);font-size:.95rem;font-weight:600}
.q-person span{font-size:.84rem;color:var(--muted)}
.panel-dark .q-person span{color:rgba(241,233,217,.66)}

/* ---------- Steps ---------- */
.steps{display:grid;gap:0}
.step{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.5vw,32px);padding:clamp(13px,1.7vw,20px) 0;border-top:1px solid var(--line);align-items:center}
.step:last-child{border-bottom:1px solid var(--line)}
.step .s-num{font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);color:var(--orange);line-height:1;font-weight:600;display:inline-flex}
.step .s-num svg{width:1em;height:1em;stroke-width:1.4}
.step h3{margin-bottom:.4rem}
.step p{color:var(--muted)}
.panel-dark .step{border-top-color:rgba(241,233,217,.18)}
.panel-dark .step h3{color:var(--paper)}
.panel-dark .step p{color:rgba(241,233,217,.92)}

/* ---------- Roadmap (services track panels: milestone list + winding road) ---------- */
.rm-grid{display:grid;grid-template-columns:1.1fr .8fr;gap:clamp(28px,4vw,64px);align-items:center}
.rm-labels{display:flex;flex-direction:column;gap:clamp(20px,3vw,30px)}
.rm-milestone{display:flex;gap:1.1rem;align-items:flex-start}
.rm-ic{width:50px;height:50px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 8px 18px -8px rgba(247,147,30,.55)}
.rm-ic svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8}
.rm-milestone h3{margin-bottom:.3rem;font-size:1.05rem}
.rm-milestone p{color:var(--muted);font-size:.92rem;line-height:1.6;margin:0}
.rm-road{position:relative}
.rm-road-img{width:100%;height:auto;display:block;pointer-events:none;user-select:none}
.rm-pin{position:absolute;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px -8px rgba(4,117,143,.6);border:3px solid var(--paper-2);transition:transform .2s var(--ease)}
.rm-pin:hover{transform:translate(-50%,-50%) scale(1.08)}
.rm-pin svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8}
.rm-pin--1{top:68%;left:20%}
.rm-pin--2{top:54%;left:33%}
.rm-pin--3{top:40%;left:50%}
.rm-pin--4{top:27%;left:65%}
.rm-pin--5{top:16%;left:80%}
@media(max-width:900px){
  .rm-grid{grid-template-columns:1fr}
  .rm-road{max-width:340px;margin:8px auto 0}
}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:1.3rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:3.2rem;width:max-content;animation:scrollx 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,2rem);color:var(--ink);display:inline-flex;align-items:center;gap:3.2rem;white-space:nowrap;font-weight:480}
.marquee span::after{content:"◆";color:var(--orange);font-size:.5em}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ---------- Forms ---------- */
.form{display:grid;gap:1.4rem}
.field{display:grid;gap:.5rem}
.field[hidden]{display:none}
.field label{font-size:.82rem;font-weight:500;letter-spacing:.03em;color:var(--ink)}
.field input,.field select,.field textarea{font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:.9em 1.1em;width:100%;transition:border-color .25s,box-shadow .25s,background .25s}
.field input::placeholder,.field textarea::placeholder{color:#9aa0a0}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(4,117,143,.14);background:#fff}
.field textarea{resize:vertical;min-height:130px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}
.form-note{font-size:.82rem;color:var(--muted)}
.form-group{margin-top:.4rem}
.form-group .gh{font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);padding-top:1.2rem;margin-bottom:.2rem;border-top:1px solid var(--line)}
.checks{display:grid;gap:.85rem;margin-top:.2rem}
.check{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;font-size:.86rem;color:var(--muted);line-height:1.5;cursor:pointer}
.check input{margin-top:.15rem;width:18px;height:18px;accent-color:var(--teal);flex:none;cursor:pointer}
/* one-click pill choices (radio) */
.flabel{font-size:.82rem;font-weight:500;letter-spacing:.03em;color:var(--ink);display:block;margin-bottom:.1rem}
.choice{display:flex;flex-wrap:wrap;gap:.5rem}
.opt{position:relative;display:inline-flex}
.opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.opt span{padding:.55em 1.15em;border:1px solid var(--line);border-radius:999px;background:var(--paper-2);font-size:.92rem;color:var(--ink);transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);user-select:none;white-space:nowrap}
.opt input:hover + span{border-color:var(--teal)}
.opt input:checked + span{background:var(--teal);color:#fff;border-color:var(--teal)}
.opt input:focus-visible + span{outline:2px solid var(--teal);outline-offset:2px}
/* yes/no declaration rows */
.ynlist{display:grid;gap:0;margin-top:.2rem}
.yn{display:flex;justify-content:space-between;align-items:center;gap:1.4rem;padding:.9rem 0;border-top:1px solid var(--line)}
.yn:first-child{border-top:0;padding-top:.2rem}
.yn-q{font-size:.92rem;color:var(--ink);max-width:48ch;line-height:1.4}
.yn .choice{flex:none}
@media(max-width:600px){.yn{flex-direction:column;align-items:flex-start;gap:.6rem}}
/* validation: flag only after the user has interacted */
.field input:user-invalid,.field textarea:user-invalid{border-color:#C0492B;box-shadow:0 0 0 3px rgba(192,73,43,.13)}
.choice.invalid .opt span{border-color:#C0492B}
.field-error{font-size:.8rem;color:#C0492B;margin-top:.2rem;display:none}
.field-error.show{display:block}
.form-success{display:none;padding:1.1em 1.3em;border-radius:var(--r-sm);background:rgba(4,117,143,.1);border:1px solid var(--teal);color:var(--ink);font-size:.95rem}
.form-success.show{display:block}

/* ---------- Page header ---------- */
.page-head{padding:clamp(116px,13vw,156px) 0 clamp(32px,4.5vw,58px);position:relative}
.page-head .crumb{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:1.2rem}
.page-head .hero-head{margin-bottom:0}
.page-head p.lead{margin-top:0}

/* ---------- Info ---------- */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(20px,3vw,40px)}
.info .k{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:.5rem}
.info .v{font-size:1.1rem;color:var(--ink);font-family:var(--serif)}
.info .v a{transition:color .25s}
.info .v a:hover{color:var(--teal)}

/* ---------- Footer ---------- */
.footer{background:var(--ink-2);color:var(--cream-on-dark);padding-top:clamp(60px,8vw,104px)}
.footer a{color:rgba(241,233,217,.78);transition:color .25s}
.footer a:hover{color:var(--paper)}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(28px,4vw,48px);padding-bottom:clamp(46px,6vw,76px)}
.footer .brand .logo{height:56px}
.footer h5{font-family:var(--sans);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-light);margin-bottom:1.2rem;font-weight:600}
.footer ul{list-style:none;display:grid;gap:.8rem}
.footer .f-about{max-width:34ch;color:rgba(241,233,217,.72);margin:1.2rem 0}
.footer-bottom{border-top:1px solid var(--line-dark);padding-block:1.7rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;font-size:.83rem;color:rgba(241,233,217,.6)}
.footer-bottom .socials{display:flex;gap:1.2rem}
.footer-bottom .socials a{display:grid;place-items:center}
.footer-bottom .socials svg{width:18px;height:18px}
@media(max-width:780px){.footer-top{grid-template-columns:1fr 1fr}.footer .brand-col{grid-column:1/-1}}
@media(max-width:480px){.footer-top{grid-template-columns:1fr}}

/* ---------- CTA band ---------- */
.cta-band{position:relative;border-radius:var(--r-lg);overflow:hidden;padding:clamp(46px,7vw,92px) clamp(28px,5vw,76px);color:var(--cream-on-dark);isolation:isolate}
.cta-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,rgba(6,36,44,.9),rgba(6,36,44,.55))}
.cta-band h2{color:var(--paper);max-width:18ch}
.cta-band p{color:rgba(241,233,217,.85);max-width:48ch;margin-top:1.1rem}
.cta-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.1rem}

/* ---------- Landing pages (Google Ads only, not linked from the main site nav) ----------
   Minimal static header/footer (no fixed positioning, no scroll-color transition, no
   mega-menu) since these pages have nothing to navigate to except the lead form and,
   via the logo, back to the main site. */
.lp-header{background:var(--ink);padding:.9rem 0}
.lp-header .nav-inner{padding:0;max-width:var(--container-wide);margin-inline:auto}
.lp-header .wordmark .wm-name{color:var(--paper)}
.lp-header .wordmark .wm-sub{color:var(--teal-light)}
.lp-header .nav-cta{display:flex;align-items:center;gap:.6rem}
@media(max-width:640px){.lp-header .nav-cta .btn span{display:none}}
.lp-hero{padding-block:clamp(48px,7vw,84px)}
.lp-hero .hero-grid{padding-block:0}
/* .panel-dark h3{color:var(--paper)} is meant for headings sitting directly on the
   dark panel, but the hero-form card floating on top of it is its own light card,
   so its heading needs to win back the dark ink color or it goes pale-on-pale */
.panel-dark .hero-form h3{color:var(--ink)}
.lp-hero .eyebrow::before{background:var(--orange-soft)}
.lp-hero .lead{color:rgba(241,233,217,.85);max-width:52ch;margin-top:1.1rem;font-size:1.05rem;line-height:1.6}
.lp-hero .hero-form{max-width:380px}
.lp-hero .lp-badge{display:inline-flex;align-items:center;gap:.5em;background:rgba(247,147,30,.16);color:var(--orange-soft);border:1px solid rgba(247,147,30,.4);border-radius:999px;padding:.45em 1.05em;font-size:.8rem;font-weight:600;letter-spacing:.02em;margin:0 0 1.1rem}
/* Two-step landing-page lead form */
.hero-form .field select{padding:.6em .85em;font-size:.92rem}
.hero-form .field select.is-locked{color:var(--ink);-webkit-text-fill-color:var(--ink);opacity:1;background:rgba(4,117,143,.05);border-style:dashed;cursor:not-allowed}
.lf-progress{display:flex;gap:.4rem;margin:0 0 1rem}
.lf-seg{flex:1;height:4px;border-radius:999px;background:var(--line);transition:background .3s var(--ease)}
.lf-seg.is-active{background:var(--orange)}
.lf-step{display:none}
.lf-step.is-active{display:flex;flex-direction:column;gap:.95rem;animation:lfIn .3s var(--ease)}
@keyframes lfIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hero-form .btn.lf-next{margin-top:.4rem}
.lf-nav{display:flex;gap:.6rem;align-items:stretch;margin-top:.4rem}
.lf-nav .lf-back{flex:0 0 auto;width:auto;margin-top:0;background:transparent;border:1px solid var(--line);color:var(--muted);padding-inline:1.15em}
.lf-nav .lf-back:hover{border-color:var(--teal);color:var(--teal)}
.lf-nav [type="submit"]{flex:1;margin-top:0}
/* photo background, same technique as the main site's .hero/.hero-bg: an absolutely
   positioned img behind everything (z-index:-2) plus a dark gradient (z-index:-1) for
   text legibility, sitting above panel-dark's own solid background color */
.lp-hero{position:relative;isolation:isolate;overflow:hidden}
.lp-hero .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.lp-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(7,54,64,.94),rgba(7,54,64,.82) 48%,rgba(7,54,64,.58))}
.lp-facts{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:1.6rem}
.lp-facts span{font-size:.85rem;color:rgba(241,233,217,.85);display:inline-flex;align-items:center;gap:.5em}
.lp-facts span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange)}
.lp-footer{background:var(--ink-2);color:rgba(241,233,217,.75);padding:clamp(32px,5vw,44px) 0;text-align:center}
.lp-footer .wordmark{display:inline-flex}
.lp-footer .wordmark .wm-name{color:var(--paper)}
.lp-footer .wordmark .wm-sub{color:var(--teal-light)}
.lp-footer p{font-size:.82rem;margin-top:.8rem}
.lp-footer a{color:var(--teal-light)}

/* ---------- Utilities ---------- */
.divider{height:1px;background:var(--line);border:0}
.pill-tags{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none}
/* Sticky sub-nav (services page) */
.subnav{position:sticky;top:60px;z-index:30;background:rgba(246,243,235,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding-block:.85rem;margin-bottom:clamp(8px,2vw,24px)}
.subnav .pill-tags{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.subnav .pill-tags::-webkit-scrollbar{display:none}
.subnav .pill{white-space:nowrap;font-weight:500}
.subnav .pill.current{background:var(--ink);color:var(--cream-on-dark);border-color:var(--ink)}
.section[id]{scroll-margin-top:130px}
.pill{font-size:.82rem;padding:.5em 1.1em;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:var(--paper-2)}
a.pill{transition:background .25s,color .25s,border-color .25s}
a.pill:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.float-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(22px,3vw,32px);box-shadow:var(--shadow-sm)}
.aside-figure{position:relative}
.aside-figure .badge{position:absolute;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md);padding:1.2rem 1.4rem;box-shadow:var(--shadow);max-width:230px}
.aside-figure .badge .num{font-family:var(--serif);font-size:2.2rem;color:var(--teal);line-height:1}
.aside-figure .badge .lbl{font-size:.84rem;color:var(--muted);margin-top:.2rem}

/* ---------- Mobile sticky action bar (intent-based nav) ---------- */
.mobile-bar{display:none}
@media(max-width:768px){
  .mobile-bar{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.3rem;
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:.4rem .5rem calc(.4rem + env(safe-area-inset-bottom,0px));
    background:rgba(252,250,243,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--line);box-shadow:0 -10px 30px -22px rgba(7,40,48,.55)
  }
  .mobile-bar a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
    padding:.55rem .2rem;border-radius:12px;text-align:center;
    font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
    color:var(--ink);line-height:1.1;min-width:0;transition:background .2s var(--ease),color .2s var(--ease)
  }
  .mobile-bar a svg{width:22px;height:22px;stroke-width:1.7}
  .mobile-bar a:active{background:var(--paper-3)}
  .mobile-bar a.mb-primary{background:var(--orange);color:#fff;box-shadow:0 10px 22px -12px rgba(247,147,30,.8)}
  .mobile-bar a.mb-primary:active{background:var(--orange-deep)}
  /* keep page content clear of the bar */
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .footer{padding-bottom:1rem}
  /* hide the bar while the full-screen mobile menu is open */
  body:has(.nav-links.open) .mobile-bar{display:none}
}
@media(max-width:768px) and (prefers-reduced-motion:no-preference){
  .mobile-bar{transform:translateY(0)}
}

/* ---------- Important-notice modal ---------- */
.notice{
  position:fixed;inset:0;z-index:1000;display:none;
  align-items:center;justify-content:center;padding:clamp(16px,4vw,40px)
}
.notice.open{display:flex}
.notice-backdrop{
  position:absolute;inset:0;background:rgba(7,29,35,.66);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .3s var(--ease)
}
.notice.open .notice-backdrop{opacity:1}
.notice-dialog{
  position:relative;width:min(760px,100%);max-height:calc(100dvh - 2*clamp(16px,4vw,40px));
  overflow:auto;background:var(--ink-2);color:var(--cream-on-dark);
  border-radius:14px;box-shadow:0 40px 90px -30px rgba(4,26,32,.7);
  padding:clamp(34px,5vw,58px) clamp(24px,5vw,60px) clamp(34px,5vw,60px);
  text-align:center;
  transform:translateY(14px) scale(.98);opacity:0;
  transition:transform .34s var(--ease),opacity .34s var(--ease)
}
.notice.open .notice-dialog{transform:none;opacity:1}
.notice-close{
  position:absolute;top:16px;right:16px;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(239,234,220,.28);border-radius:10px;background:transparent;
  color:var(--cream-on-dark);cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease)
}
.notice-close:hover{background:rgba(239,234,220,.12);border-color:rgba(239,234,220,.5)}
.notice-close svg{width:20px;height:20px}
.notice-eyebrow{
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--orange-soft);margin-bottom:.9rem
}
.notice-dialog h2{
  font-family:var(--display);color:var(--paper);
  font-size:clamp(1.5rem,4.2vw,2.15rem);line-height:1.12;margin:0 auto .2rem;max-width:18ch
}
.notice-rule{width:56px;height:3px;border-radius:2px;background:var(--orange);margin:1.15rem auto 1.4rem}
.notice-dialog p{
  color:rgba(239,234,220,.86);font-size:clamp(.95rem,1.4vw,1.02rem);line-height:1.7;
  max-width:56ch;margin:0 auto 1rem
}
.notice-dialog p:last-of-type{margin-bottom:0}
.notice-dialog p strong{color:var(--paper);font-weight:600}
.notice-actions{margin-top:1.7rem}
.notice-actions .btn{min-width:190px;justify-content:center}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  [data-in]{opacity:1!important;transform:none!important;animation:none!important}
  .hero-figure img{animation:none!important}
  .clip-reveal{clip-path:none!important}
  .marquee-track{animation:none!important}
}