/* ============================================================
   Align and Transform Academy
   Brand : Navy #0B1F3A · Gold #C6922E · Cream #F7F3EB
   Type  : Cinzel (marque) / Playfair Display (display) / Inter (text)
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --navy:#0B1F3A;
  --navy-deep:#071426;
  --navy-soft:#122C4E;
  --gold:#C6922E;
  --gold-lt:#E0B45C;
  --gold-dk:#8F6516;
  --cream:#F7F3EB;
  --cream-dk:#EDE6D8;
  --body:#3A4351;
  --body-lt:#68738A;
  --line:rgba(11,31,58,.14);
  --line-gold:rgba(198,146,46,.35);
  --white:#fff;

  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --caps:"Cinzel",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --wrap:1200px;
  --pad:clamp(1.15rem,4vw,2.5rem);
  --sec-y:clamp(4.5rem,9vw,8rem);
  --r:14px;
  --shadow:0 18px 50px -22px rgba(11,31,58,.34);
  --shadow-lg:0 36px 90px -34px rgba(11,31,58,.5);
  --ease:cubic-bezier(.22,.68,.32,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6.5rem}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;
  background:var(--cream);
  color:var(--body);
  font-family:var(--sans);
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--serif);color:var(--navy);font-weight:600;line-height:1.14;letter-spacing:-.012em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--gold);color:#fff}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:.8rem 1.2rem;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px;border-radius:3px}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:var(--sec-y);position:relative}
.sec--cream{background:var(--cream)}
.sec--white{background:var(--white)}
.sec--navy{background:var(--navy);color:rgba(255,255,255,.8)}
.sec--ink{background:var(--navy-deep);color:rgba(255,255,255,.8)}
.sec--navy h1,.sec--navy h2,.sec--navy h3,.sec--navy h4,
.sec--ink h1,.sec--ink h2,.sec--ink h3,.sec--ink h4{color:#fff}
.sec--tight{padding-block:clamp(3rem,6vw,4.75rem)}

.sec--navy::before,.sec--ink::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 60% at 85% 0%,rgba(198,146,46,.16),transparent 60%),
    radial-gradient(60% 50% at 0% 100%,rgba(198,146,46,.09),transparent 60%);
}
.sec--navy>*,.sec--ink>*{position:relative;z-index:1}

/* ---------- type helpers ---------- */
.eyebrow{
  font-family:var(--caps);font-size:.76rem;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dk);
  margin:0 0 1rem;display:flex;align-items:center;gap:.85rem;
}
.eyebrow::after{content:"";flex:0 0 46px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.eyebrow--c{justify-content:center}
.eyebrow--c::before{content:"";flex:0 0 46px;height:1px;background:linear-gradient(270deg,var(--gold),transparent)}
.sec--navy .eyebrow,.sec--ink .eyebrow,.hero .eyebrow,.banner .eyebrow{color:var(--gold-lt)}

.h1{font-size:clamp(2.5rem,1.6rem + 3.7vw,4.35rem)}
.h2{font-size:clamp(1.95rem,1.4rem + 2.2vw,3.05rem)}
.h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem)}
.gold{color:var(--gold-dk)}
.sec--navy .gold,.sec--ink .gold,.hero .gold,.banner .gold,.cta .gold{color:var(--gold-lt)}
.lede{font-size:clamp(1.08rem,1rem + .4vw,1.28rem);line-height:1.65}
.sec--navy .lede,.sec--ink .lede{color:rgba(255,255,255,.82)}
.muted{color:var(--body-lt)}
.sec--navy .muted,.sec--ink .muted{color:rgba(255,255,255,.62)}
.center{text-align:center}
.measure{max-width:62ch}
.measure-c{max-width:64ch;margin-inline:auto}
.mt{margin-top:clamp(2.5rem,5vw,3.75rem)}
.mt-sm{margin-top:1.75rem}

/* diamond rule — lifted from the brochure */
.drule{display:flex;align-items:center;gap:.7rem;margin:1.15rem 0 1.4rem}
.drule::before,.drule::after{content:"";height:1px;background:linear-gradient(90deg,transparent,var(--line-gold),transparent);flex:1;max-width:110px}
.drule i{width:7px;height:7px;background:var(--gold);transform:rotate(45deg);flex:0 0 auto}
.drule--c{justify-content:center}
.drule--l::before{display:none}
.drule--l::after{max-width:170px;background:linear-gradient(90deg,var(--gold),transparent)}

/* section head */
.sechead{max-width:70ch;margin-bottom:clamp(2.5rem,5vw,3.75rem)}
.sechead--c{margin-inline:auto;text-align:center}
.sechead--c .eyebrow{justify-content:center}
.sechead--c .eyebrow::before{content:"";flex:0 0 46px;height:1px;background:linear-gradient(270deg,var(--gold),transparent)}
.sechead__p{margin-top:1.25rem}
.sechead--split{display:grid;gap:1.5rem clamp(2rem,5vw,4.5rem);grid-template-columns:1fr;max-width:none;align-items:end}
@media (min-width:900px){.sechead--split{grid-template-columns:1.15fr .85fr}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.9rem;border:1px solid transparent;border-radius:999px;
  font-family:var(--sans);font-size:.87rem;font-weight:600;letter-spacing:.055em;
  text-transform:uppercase;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn--gold{background:linear-gradient(135deg,var(--gold-lt),var(--gold) 55%,var(--gold-dk));color:#1B1204;box-shadow:0 12px 30px -14px rgba(198,146,46,.85)}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(198,146,46,.95)}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{transform:translateY(-2px);background:var(--navy-soft)}
.btn--ghost{border-color:rgba(255,255,255,.34);color:#fff}
.btn--ghost:hover{border-color:var(--gold-lt);color:var(--gold-lt);transform:translateY(-2px)}
.btn--outline{border-color:var(--line-gold);color:var(--navy)}
.btn--outline:hover{border-color:var(--gold);background:rgba(198,146,46,.08);transform:translateY(-2px)}
.btn--sm{padding:.68rem 1.35rem;font-size:.76rem}
.btn--full{width:100%}
.btns{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.btns--c{justify-content:center}

.tlink{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.86rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--gold-dk);
  border-bottom:1px solid var(--line-gold);padding-bottom:.3rem;transition:gap .3s var(--ease),color .3s var(--ease)
}
.tlink::after{content:"\2192"}
.tlink:hover{color:var(--gold);gap:.8rem}
.sec--navy .tlink,.sec--ink .tlink{color:var(--gold-lt)}

/* ---------- logo lockup ---------- */
.logo{display:inline-flex;align-items:center;gap:.95rem;flex:0 0 auto}
.logo__mark{width:77px;height:77px;flex:0 0 auto}

/* BA-002 Official Logo, used unmodified. The master is a light-background
   artwork with no alpha channel and navy letters, so on the navy header the
   letters would sit at 1.07:1 against the background — invisible. Clipping to
   a circle keeps the logo's own white field as a medallion (16.1:1 on navy)
   and removes only the white corners; the gold ring reaches 48% of the square
   and the clip is at 50%, so no artwork is touched. */
img.logo__mark{border-radius:50%;object-fit:cover;display:block}
.logo__ring{fill:none;stroke:var(--gold);stroke-width:3.2}
.logo__dot{fill:var(--gold)}
.logo__ltr{font-family:var(--caps);font-weight:700;font-size:42px;fill:var(--navy)}
.logo__amp{font-family:var(--caps);font-weight:700;font-size:21px;fill:var(--gold)}
.logo__txt{display:flex;flex-direction:column;line-height:1}
/* wordmark +12.6%, sub +13% — the footer lockup is unaffected, .logo--lg
   overrides both sizes there */
.logo__name{font-family:var(--caps);font-weight:700;font-size:1.16rem;letter-spacing:.1em;color:var(--navy);text-transform:uppercase}
/* ACADEMY raised 11.04px → 14.72px (+33%), now 79% of the wordmark instead of
   59%, so the two lines read as one mark. Tracking and font are untouched, and
   at this size the line is 106px wide against a 245px wordmark — it does not
   widen the lockup. */
.logo__sub{font-family:var(--sans);font-size:.92rem;font-weight:600;letter-spacing:.3em;color:var(--gold-dk);text-transform:uppercase;margin-top:.45rem}
.on-dark .logo__ltr{fill:var(--cream)}
.on-dark .logo__name{color:#fff}
.on-dark .logo__sub{color:var(--gold-lt)}
.logo--lg .logo__mark{width:78px;height:78px}
.logo--lg .logo__name{font-size:1.15rem}
.logo--lg .logo__sub{font-size:.62rem}

/* ---------- header ---------- */
.head{
  position:fixed;inset:0 0 auto;z-index:100;
  padding-top:12px;                 /* lifts the bar off the viewport edge */
  transition:background .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
/* The bar runs to 1280px — DS-003's stated maximum content width — while the
   sections below keep the 1200px --wrap. The enlarged lockup, seven links and
   the CTA need 1168px, and a 1200px container only offers 1120px of content;
   at 1280 there is 1200px and the bar fits with room to spare.

   Height is a constant 80px. The condense-to-72px on scroll is gone: a 69px
   mark inside a 72px bar leaves 1.5px of clearance, which reads as cramped. */
/* 80px → 86px: the 77px medallion needs clearance from the bar edge, which
   matters most when the bar is stuck and has a background and bottom border. */
.head__in{
  display:flex;align-items:center;gap:.75rem;min-height:86px;max-width:1280px
}
.head.is-stuck{
  background:rgba(247,243,235,.95);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom-color:var(--line-gold);
  box-shadow:0 8px 26px -24px rgba(11,31,58,.45)   /* lighter than before */
}
.head.on-dark:not(.is-stuck) .logo__name{color:#fff}
.head.on-dark:not(.is-stuck) .logo__sub{color:var(--gold-lt)}
.head.on-dark:not(.is-stuck) .nav a{color:rgba(255,255,255,.88)}
/* once the header sits on cream, the wordmark must go back to navy */
.head.is-stuck .logo__name{color:var(--navy)}
.head.is-stuck .logo__sub{color:var(--gold-dk)}

/* Fixed gap, not a vw clamp: the container caps at 1200px, so past that the
   nav gains no room and a growing gap would push the CTA out of the bar.
   Breakpoint raised 1100 → 1200 because the lockup, seven links and the CTA
   genuinely do not fit below that — see the handover note. */
/* 21px. The bar only had 24px of free width left after the larger medallion,
   so this is +3px of the +8–12px asked for — see the handover note; the rest
   needs a nav item shortened or removed. Breakpoint stays 1300px. */
.nav{display:none;margin-left:auto;align-items:center;gap:1.3125rem}
@media (min-width:1300px){.nav{display:flex}}
.nav a{
  position:relative;white-space:nowrap;
  font-size:.8rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--navy);padding-block:.4rem;transition:color .25s var(--ease)
}
/* The rule is full width and fades in place. The old version wiped in from
   the left, which read as decoration; opacity alone is quieter, and it lets
   hover and the current page sit at two different weights of the same mark. */
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold);opacity:0;transition:opacity .28s var(--ease)
}
.nav a:hover::after{opacity:.5}
.nav a[aria-current="page"]::after{opacity:1}
.nav a[aria-current="page"]{color:var(--gold-dk)}
.head.on-dark:not(.is-stuck) .nav a[aria-current="page"]{color:var(--gold-lt)}
.head__cta{margin-left:auto}
/* no extra margin once the nav is shown: the flex gap already separates them,
   and the additional margin pushed the button 8px outside the container */
@media (min-width:1300px){.head__cta{margin-left:0}}

/* Header CTA only — the same button elsewhere on the site is untouched.
   Slightly better proportions, a lighter resting shadow, and no lift on
   hover: a button that jumps in a fixed header reads as restless. */
.head__cta{
  /* flex-shrink was letting the label wrap to two lines and drag the whole
     header to 90px at 1100px — the CTA must hold its intrinsic width */
  flex:0 0 auto;white-space:nowrap;
  padding:.74rem 1.1rem;
  box-shadow:0 6px 16px -10px rgba(198,146,46,.55);
  transition:box-shadow .3s var(--ease),opacity .3s var(--ease)
}
.head__cta:hover,.head__cta:focus-visible{
  transform:none;box-shadow:0 9px 20px -11px rgba(198,146,46,.68)
}
@media (max-width:700px){.head__cta{display:none}}

.burger{display:grid;place-content:center;gap:5px;width:46px;height:46px;margin-left:.25rem;background:none;border:1px solid var(--line-gold);border-radius:50%;cursor:pointer}
@media (min-width:1300px){.burger{display:none}}
.burger span{display:block;width:19px;height:1.6px;background:var(--navy);transition:transform .3s var(--ease)}
.head.on-dark:not(.is-stuck) .burger span{background:#fff}
.head.is-open .burger span:first-child{transform:translateY(3.3px) rotate(45deg)}
.head.is-open .burger span:last-child{transform:translateY(-3.3px) rotate(-45deg)}

.mobnav[hidden]{display:none}
.mobnav{background:var(--navy);border-top:1px solid rgba(198,146,46,.28);padding:1.1rem var(--pad) 1.8rem;display:flex;flex-direction:column;gap:.15rem}
.mobnav a{padding:.82rem 0;font-size:.92rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.88);border-bottom:1px solid rgba(255,255,255,.08)}
.mobnav a[aria-current="page"]{color:var(--gold-lt)}
.mobnav .btn{width:100%;border:0;margin-top:1.1rem;color:#1B1204}

/* ---------- hero ------------------------------------------------------------
   Built to the Brand Asset Library:
     DS-001 colour   Premium Navy #0A1F44 · Premium Gold #C89A2B
                     Light Gold #E8C870 · Pure White #FFFFFF
     DS-002 type     Cormorant Garamond (display) + Inter (body)
     DS-003 spacing  8px grid · 56px buttons · 12px button radius
                     20px image radius
   The corrected brand tokens are scoped to .hero, so no other section of the
   site changes. See the note in the handover about aligning them site-wide.
   -------------------------------------------------------------------------- */
.hero{
  --navy:#0A1F44;
  --gold:#C89A2B;
  --gold-lt:#E8C870;
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;

  position:relative;display:flex;align-items:center;
  min-height:92vh;
  background:var(--navy);color:rgba(255,255,255,.82);overflow:hidden;
  /* DS-003 section padding plus clearance for the fixed header */
  /* top padding eased back 16px: the internal rhythm below carries the
     breathing room now, so the outer band does not need to as well */
  padding-block:clamp(120px,11vw,144px) clamp(48px,8vw,96px)
}
@supports (min-height:92svh){.hero{min-height:92svh}}

/* --- ambient depth, no busy graphics ------------------------------------- */
.hero__deco{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero__orb{position:absolute;display:block;aspect-ratio:1;border-radius:50%;filter:blur(64px)}
.hero__orb--gold{
  width:min(46rem,80vw);right:-12rem;top:-15rem;
  background:radial-gradient(circle,rgba(200,154,43,.28),rgba(200,154,43,0) 66%)
}
.hero__orb--blue{
  width:min(38rem,74vw);left:-13rem;bottom:-16rem;
  background:radial-gradient(circle,rgba(16,42,86,.9),rgba(16,42,86,0) 68%)
}
.hero__orb--soft{
  width:min(30rem,62vw);right:18%;bottom:-12rem;
  background:radial-gradient(circle,rgba(200,154,43,.11),rgba(200,154,43,0) 70%)
}

/* --- layout -------------------------------------------------------------- */
.hero__in{position:relative;z-index:2;display:grid;align-items:center;gap:clamp(48px,6vw,80px)}
@media (min-width:1200px){.hero__in{grid-template-columns:minmax(0,52fr) minmax(0,48fr)}}

/* 1. tagline — the hero now opens here. The academy name lives in the header
   lockup alone, so the section leads with the promise rather than the name. */
.hero__tagline{
  display:flex;align-items:center;gap:12px;margin:0;
  font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-lt)
}
.hero__tagline i{width:5px;height:5px;background:var(--gold);transform:rotate(45deg);flex:0 0 auto}

/* 3. headline — DS-002 hero heading, Cormorant Garamond Bold.
   One statement, one size, one weight. Emphasis is carried by the gold on
   "Professional Excellence" alone; the previous half-scale first line split
   the sentence into two unrelated blocks.

   Capped at 2.875rem (46px): "Into Professional Excellence" holds a single
   line up to 48px in the 542px column, so 46px leaves a safe margin and the
   headline reads as two even lines rather than three ragged ones. */
.hero__h1{
  margin:64px 0 0;color:#fff;font-family:var(--display);font-weight:700;
  font-size:clamp(2.125rem,.7rem + 3.9vw,2.875rem);line-height:1.14;letter-spacing:-.006em;
  text-wrap:balance
}
.hero__h1 span{display:block}
.hero__h1 em{font-style:normal;color:var(--gold-lt)}

/* 4. paragraph — DS-002 body: Inter, 60–70 char measure, 1.5–1.6 leading */
.hero__sub{
  /* narrowed to 32rem so the paragraph is visibly subordinate to the headline
     above it. See the handover note on words-per-line — 8–10 is not reachable
     at this column width without dropping below a comfortable body size. */
  margin:48px 0 0;max-width:32rem;
  font-size:clamp(1rem,.96rem + .3vw,1.125rem);line-height:1.6;color:rgba(255,255,255,.78)
}

/* 5 + 6. calls to action — DS-001 CTA colours, DS-003 button metrics.
   Colour-only hover: DS-001 rules out gradients, so the sheen and the lift
   from the previous pass are gone. */
/* The pair measures 507px against a 537px column at 1200, so 30px is the most
   the gap can take there before the buttons wrap. It grows on wider screens. */
.hero__btns{margin-top:64px;gap:clamp(24px,2vw,32px)}
.hero__btns .btn{
  min-height:56px;padding:0 32px;border-radius:12px;
  font-family:var(--sans);font-weight:600;letter-spacing:.04em;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)
}
.hero__btns .btn:focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px}

.hero__btns .btn--gold{
  background:var(--gold);background-image:none;color:var(--navy);box-shadow:none
}
.hero__btns .btn--gold:hover,.hero__btns .btn--gold:focus-visible{
  background:var(--gold-lt);color:var(--navy);transform:none;box-shadow:none
}

.hero__btns .btn--ghost{
  background:transparent;border:2px solid var(--gold);color:var(--gold-lt);box-shadow:none
}
.hero__btns .btn--ghost:hover,.hero__btns .btn--ghost:focus-visible{
  background:var(--gold);border-color:var(--gold);color:var(--navy);transform:none;box-shadow:none
}

/* 7. trust indicators — DS-002 statistics are Inter Bold */
.hero__trust{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;
  margin:80px 0 0;padding:32px 0 0;
  border-top:1px solid rgba(255,255,255,.14);list-style:none
}
@media (min-width:560px){.hero__trust{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hero__trust strong{
  display:block;font-family:var(--sans);font-weight:700;
  font-size:clamp(1.35rem,1.1rem + .5vw,1.6rem);line-height:1;color:var(--gold-lt)
}
.hero__trust span{display:block;margin-top:8px;font-size:.75rem;line-height:1.5;color:rgba(255,255,255,.72)}

/* --- right column: BA-001 official founder portrait -----------------------
   Stacked (below 1200px) it stays a contained plate with the DS-003 20px
   radius. On desktop it stops being a plate altogether — see the bleed block
   further down. -------------------------------------------------------- */
.hero__portrait{position:relative;margin:0 auto;width:100%;max-width:34rem;justify-self:center}

/* warm halo so the portrait sits inside the navy rather than on top of it */
.hero__portrait::before{
  content:"";position:absolute;z-index:0;inset:-9% -7%;pointer-events:none;
  background:radial-gradient(52% 52% at 50% 46%,rgba(200,154,43,.26),rgba(200,154,43,0) 70%);
  filter:blur(44px)
}
.hero__portrait img{
  position:relative;z-index:1;display:block;width:100%;height:auto;
  aspect-ratio:5/4;object-fit:cover;object-position:center 32%;
  border-radius:20px;                       /* DS-003 image rule */
  box-shadow:0 40px 90px -34px rgba(0,0,0,.85)
}
.hero__portrait::after{
  content:"";position:absolute;z-index:2;inset:0;pointer-events:none;border-radius:20px;
  background:
    linear-gradient(180deg,rgba(10,31,68,0) 64%,rgba(10,31,68,.32) 100%),
    linear-gradient(90deg,rgba(10,31,68,.2) 0%,rgba(10,31,68,0) 16%);
  box-shadow:inset 0 0 0 1px rgba(232,200,112,.22)
}

/* --- desktop: the portrait becomes the section, not an object in it -------
   The figure is pulled out to the right edge of the viewport and its left
   edge is dissolved into the navy, so there is no frame, no corner and no
   seam between the copy and the photograph.

   Crop maths, measured off the master by column luminance rather than eye:
   the founders occupy 24%–82% of the frame. The 4:3 window trims 11% from
   the 3:2 master entirely off the right (object-position:left), so the
   window shows master 0–88.9% — Anirban's edge at 82% is safely inside, and
   all the empty window glass on the left is kept for the dissolve to land
   on. In window coordinates the founders start at 27%; the mask is fully
   opaque by 22%, so neither of them is touched.

   No top fade: the ceiling architecture is as dark as hair, so the head line
   cannot be detected reliably, and a mask there risks clipping it. The left
   dissolve, the right bleed and the bottom falloff carry the integration.
   -------------------------------------------------------------------- */
@media (min-width:1200px){
  .hero__portrait{
    width:auto;max-width:none;
    /* right edge of the grid track → right edge of the viewport */
    margin-right:calc((var(--wrap) - 100vw) / 2 - var(--pad))
  }
  .hero__portrait::after{display:none}          /* no frame, no hairline */
  .hero__portrait::before{inset:-5% -3%;filter:blur(60px)}

  .hero__portrait img{
    aspect-ratio:4/3;object-position:left center;
    border-radius:0;box-shadow:none;
    -webkit-mask-image:
      linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 10%,#000 22%),
      linear-gradient(180deg,#000 84%,transparent 100%);
    -webkit-mask-composite:source-in;
            mask-image:
      linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 10%,#000 22%),
      linear-gradient(180deg,#000 84%,transparent 100%);
            mask-composite:intersect
  }
}

/* --- entrance: fade + translate only ------------------------------------- */
@keyframes heroIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes heroFloat{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-26px,0)}}

@media (prefers-reduced-motion:no-preference){
  /* staggered in hierarchy order, so the eye is led down the column */
  .hero__tagline,.hero__h1,.hero__sub,
  .hero__btns,.hero__trust,.hero__portrait{
    animation:heroIn .85s var(--ease) both
  }
  .hero__tagline{animation-delay:.06s}
  .hero__h1{animation-delay:.26s}
  .hero__portrait{animation-delay:.28s}
  .hero__sub{animation-delay:.36s}
  .hero__btns{animation-delay:.46s}
  .hero__trust{animation-delay:.56s}

  .hero__orb--gold{animation:heroFloat 22s var(--ease) infinite alternate}
  .hero__orb--blue{animation:heroFloat 28s var(--ease) infinite alternate-reverse}
  .hero__orb--soft{animation:heroFloat 34s var(--ease) infinite alternate}
}

/* page banner (inner pages) */
.banner{position:relative;background:var(--navy);color:rgba(255,255,255,.8);overflow:hidden;padding-block:clamp(8rem,13vw,10.5rem) clamp(3.5rem,6vw,5rem)}
.banner::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(75% 80% at 92% 0%,rgba(198,146,46,.2),transparent 60%),
             radial-gradient(60% 70% at 0% 100%,rgba(198,146,46,.1),transparent 60%);
}
.banner__in{position:relative;z-index:1;max-width:840px}
.banner h1{color:#fff}
.banner__p{margin-top:1.2rem;max-width:62ch;color:rgba(255,255,255,.78);font-size:clamp(1.03rem,1rem + .3vw,1.2rem)}
.crumb{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:1.1rem;font-weight:600}
.crumb a:hover{color:var(--gold-lt)}

/* gold ribbon strip (brochure footer band) */
.ribbon{background:linear-gradient(90deg,var(--gold-dk),var(--gold-lt) 48%,var(--gold-dk));padding:.95rem 0}
.ribbon p{margin:0;text-align:center;font-family:var(--caps);font-size:clamp(.68rem,.6rem + .3vw,.84rem);font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:#20180A}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-gold);border:1px solid var(--line-gold);border-radius:var(--r);overflow:hidden}
@media (min-width:820px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--navy);padding:clamp(1.6rem,3vw,2.4rem) 1.2rem;text-align:center}
.sec--cream .stat,.sec--white .stat{background:var(--cream)}
.stat__n{display:block;font-family:var(--serif);font-size:clamp(2.1rem,1.5rem + 2vw,3rem);font-weight:600;color:var(--gold-lt);line-height:1}
.sec--cream .stat__n,.sec--white .stat__n{color:var(--gold-dk)}
.stat__l{display:block;margin-top:.6rem;font-size:.8rem;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.68);font-weight:500;line-height:1.5}
.sec--cream .stat__l,.sec--white .stat__l{color:var(--body-lt)}

/* ---------- cards ---------- */
.grid{display:grid;gap:clamp(1rem,2vw,1.6rem);grid-template-columns:1fr}
@media (min-width:660px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1020px){.grid--3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1020px){.grid--4{grid-template-columns:repeat(4,1fr)}}

.card{
  position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.6rem,2.6vw,2.15rem);overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)
}
.card::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-lt));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line-gold)}
.card:hover::before{transform:scaleX(1)}
.card__h{margin-bottom:.7rem;font-size:1.26rem}
.card__p{font-size:.95rem}
.card__list{margin-top:1.15rem;display:grid;gap:.55rem}
.card__list li{position:relative;padding-left:1.5rem;font-size:.91rem}
.card__list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}
.card__n{position:absolute;top:.9rem;right:1.4rem;font-family:var(--serif);font-size:3.4rem;line-height:1;color:rgba(11,31,58,.06);font-weight:600;pointer-events:none}
.sec--navy .card,.sec--ink .card{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)}
.sec--navy .card__p,.sec--ink .card__p,.sec--navy .card__list li,.sec--ink .card__list li{color:rgba(255,255,255,.74)}
.sec--navy .card__n,.sec--ink .card__n{color:rgba(255,255,255,.07)}
.card--gold{background:linear-gradient(150deg,var(--navy),var(--navy-soft));border-color:var(--line-gold)}
.card--gold .card__h{color:#fff}
.card--gold .card__p{color:rgba(255,255,255,.76)}

/* icon medallion */
.ico{
  width:56px;height:56px;flex:0 0 auto;display:grid;place-content:center;border-radius:50%;
  background:var(--navy);color:var(--gold-lt);margin-bottom:1.15rem;transition:transform .45s var(--ease)
}
.ico svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card:hover .ico,.aud__i:hover .ico{transform:scale(1.08) rotate(-4deg)}
.sec--navy .ico,.sec--ink .ico{background:rgba(198,146,46,.15);border:1px solid rgba(198,146,46,.4)}
.ico--gold{background:linear-gradient(135deg,var(--gold-lt),var(--gold-dk));color:#1B1204}
.ico--sm{width:46px;height:46px;margin-bottom:0}
.ico--sm svg{width:21px;height:21px}

/* feature row (icon + text) */
.feats{display:grid;gap:clamp(1.5rem,3vw,2.4rem);grid-template-columns:1fr}
@media (min-width:700px){.feats{grid-template-columns:repeat(2,1fr)}}
.feat{display:flex;gap:1.15rem;align-items:flex-start}
.feat h3{font-size:1.1rem;margin-bottom:.4rem}
.feat p{font-size:.94rem;margin:0}

/* ---------- split (image + copy) ---------- */
.split{display:grid;gap:clamp(2rem,5vw,4.5rem);grid-template-columns:1fr;align-items:center}
@media (min-width:940px){
  .split{grid-template-columns:1fr 1fr}
  .split--rev .split__fig{order:2}
}
.split__fig{position:relative;margin:0;isolation:isolate}
.split__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);box-shadow:var(--shadow-lg)}
.split__fig::after{
  content:"";position:absolute;right:-14px;bottom:-14px;width:56%;height:56%;
  border:1px solid var(--line-gold);border-radius:var(--r);z-index:-1
}
.split__fig figcaption{margin-top:.9rem;font-size:.8rem;letter-spacing:.11em;text-transform:uppercase;color:var(--body-lt)}
.sec--navy .split__fig figcaption,.sec--ink .split__fig figcaption{color:rgba(255,255,255,.55)}

/* quote block from the brochure */
.quote{
  position:relative;padding:clamp(1.9rem,3.5vw,2.6rem) clamp(1.8rem,3.5vw,2.8rem);
  border:1px solid var(--line-gold);border-radius:var(--r);background:rgba(198,146,46,.07)
}
.quote p{font-family:var(--serif);font-size:clamp(1.18rem,1.05rem + .7vw,1.6rem);line-height:1.45;color:var(--navy);font-style:italic;margin:0}
.quote::before{content:"\201C";position:absolute;top:.1rem;left:.5rem;font-family:var(--serif);font-size:4.5rem;color:var(--gold);opacity:.34;line-height:1}
.quote cite{display:block;margin-top:1.1rem;font-style:normal;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dk);font-weight:600}
.sec--navy .quote,.sec--ink .quote{background:rgba(198,146,46,.1)}
.sec--navy .quote p,.sec--ink .quote p{color:var(--gold-lt)}
.sec--navy .quote cite,.sec--ink .quote cite{color:rgba(255,255,255,.6)}

/* ---------- methodology rail ---------- */
.method{display:grid;gap:1px;background:var(--line-gold);border:1px solid var(--line-gold);border-radius:var(--r);overflow:hidden;grid-template-columns:1fr}
@media (min-width:620px){.method{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.method{grid-template-columns:repeat(5,1fr)}}
.method__step{background:var(--navy);padding:clamp(1.6rem,2.6vw,2.1rem) 1.35rem;text-align:center;transition:background .4s var(--ease)}
.method__step:hover{background:var(--navy-soft)}
.method__step .ico{margin:0 auto 1.1rem}
.method__k{font-family:var(--caps);font-size:.84rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lt);display:block;margin-bottom:.55rem}
.method__p{font-size:.87rem;color:rgba(255,255,255,.72);margin:0}

/* ---------- checklist ---------- */
.checks{display:grid;gap:1rem}
.checks li{position:relative;padding-left:2.2rem;font-size:.97rem}
.checks li::before{content:"";position:absolute;left:0;top:.2em;width:22px;height:22px;border-radius:50%;background:var(--gold)}
.checks li::after{content:"";position:absolute;left:6px;top:.58em;width:10px;height:5px;border-left:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(-45deg)}
.checks strong{display:block;color:var(--navy);font-weight:600;font-family:var(--serif);font-size:1.05rem;letter-spacing:-.01em}
.sec--navy .checks strong,.sec--ink .checks strong{color:#fff}

/* ---------- audience row ---------- */
.aud{display:grid;gap:1px;background:var(--line-gold);border:1px solid var(--line-gold);border-radius:var(--r);overflow:hidden;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.aud{grid-template-columns:repeat(4,1fr)}}
.aud__i{background:var(--cream);padding:clamp(1.5rem,2.6vw,2.1rem) 1rem;text-align:center;transition:background .4s var(--ease)}
.aud__i:hover{background:var(--cream-dk)}
.aud__i .ico{margin:0 auto 1rem}
.aud__i p{margin:0;font-family:var(--serif);font-size:1.03rem;color:var(--navy);line-height:1.3}
.sec--navy .aud__i,.sec--ink .aud__i{background:rgba(255,255,255,.05)}
.sec--navy .aud__i:hover,.sec--ink .aud__i:hover{background:rgba(255,255,255,.09)}
.sec--navy .aud__i p,.sec--ink .aud__i p{color:#fff}

/* ---------- trainers ---------- */
.people{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:1fr}
@media (min-width:800px){.people{grid-template-columns:repeat(2,1fr)}}
.person{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.8rem,3vw,2.6rem);text-align:center;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)
}
.person:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line-gold)}
.person__pic{width:152px;height:152px;margin:0 auto 1.35rem;border-radius:50%;padding:5px;background:linear-gradient(135deg,var(--gold-lt),var(--gold-dk))}
.person__pic img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid var(--white)}
.person__n{font-size:1.45rem}
.person__r{margin:.55rem 0 0;font-family:var(--caps);font-size:.72rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--gold-dk)}
.person__p{margin-top:1.15rem;font-size:.95rem;text-align:left}
.person__tags{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;margin-top:1.4rem}
.person__tags li{padding:.32rem .85rem;border:1px solid var(--line-gold);border-radius:999px;font-size:.75rem;color:var(--gold-dk)}
.sec--navy .person,.sec--ink .person{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)}
.sec--navy .person__p,.sec--ink .person__p{color:rgba(255,255,255,.74)}
.sec--navy .person__r,.sec--ink .person__r,.sec--navy .person__tags li,.sec--ink .person__tags li{color:var(--gold-lt)}

/* ---------- rows ---------- */
.rows{border-top:1px solid var(--line)}
.row{display:grid;gap:.4rem 2rem;padding:clamp(1.3rem,2.4vw,1.9rem) clamp(.4rem,1.5vw,1rem);border-bottom:1px solid var(--line);grid-template-columns:1fr;transition:background .35s var(--ease)}
@media (min-width:840px){.row{grid-template-columns:.9fr 1.7fr .6fr;align-items:baseline}}
.row:hover{background:rgba(198,146,46,.06)}
.row h3{font-size:1.15rem}
.row p{margin:0;font-size:.94rem}
.row__meta{font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-dk);font-weight:600}
.sec--navy .rows,.sec--navy .row,.sec--ink .rows,.sec--ink .row{border-color:rgba(255,255,255,.13)}
.sec--navy .row p,.sec--ink .row p{color:rgba(255,255,255,.72)}
.sec--navy .row__meta,.sec--ink .row__meta{color:var(--gold-lt)}

/* ---------- CTA band ---------- */
.cta{position:relative;background:var(--navy-deep);color:rgba(255,255,255,.82);overflow:hidden;padding-block:clamp(3.75rem,7vw,6rem);text-align:center}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 100% at 50% 0%,rgba(198,146,46,.22),transparent 65%)}
.cta__in{position:relative;z-index:1;max-width:760px;margin-inline:auto}
.cta h2{color:#fff}
.cta__sub{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,1rem + .55vw,1.45rem);color:var(--gold-lt);margin-top:.9rem}

/* ---------- contact ---------- */
.contact{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:1fr;align-items:start}
@media (min-width:960px){.contact{grid-template-columns:.85fr 1.15fr}}
.cinfo{display:grid;gap:1.4rem;margin-top:2rem}
.cinfo li{display:flex;gap:1rem;align-items:flex-start}
.cinfo .lbl{display:block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dk);font-weight:700;margin-bottom:.2rem}
.cinfo a:hover{color:var(--gold-dk)}
.sec--navy .cinfo .lbl,.sec--ink .cinfo .lbl{color:var(--gold-lt)}
.sec--navy .cinfo a:hover,.sec--ink .cinfo a:hover{color:var(--gold-lt)}

.form{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.6rem,3vw,2.6rem);display:grid;gap:1.15rem;grid-template-columns:1fr;box-shadow:var(--shadow)}
@media (min-width:620px){.form{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:.45rem}
.field--wide{grid-column:1/-1}
.field label{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--navy)}
.field input,.field select,.field textarea{
  width:100%;padding:.85rem 1rem;border:1px solid var(--line);border-radius:9px;background:var(--cream);
  font-size:.96rem;transition:border-color .25s var(--ease),background .25s var(--ease)
}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:var(--white)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__note{margin:.85rem 0 0;font-size:.87rem;color:var(--body-lt)}
.btn[aria-busy="true"]{opacity:.65;pointer-events:none}
.form__note.is-err{color:#B3261E}
.form__note.is-ok{color:var(--gold-dk)}

/* ---------- footer ---------- */
.foot{background:var(--navy-deep);color:rgba(255,255,255,.66);padding-block:clamp(3rem,6vw,4.75rem) 0;position:relative}
.foot::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.foot__in{display:grid;gap:clamp(2rem,4vw,3rem);grid-template-columns:1fr}
@media (min-width:760px){.foot__in{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.foot__in{grid-template-columns:1.5fr .8fr .8fr 1.15fr}}
.foot h4{color:#fff;font-family:var(--caps);font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.2rem}
.foot a{transition:color .25s var(--ease)}
.foot a:hover{color:var(--gold-lt)}
.foot__nav{display:grid;gap:.7rem;font-size:.92rem}
.foot__p{margin-top:1.4rem;font-size:.93rem;max-width:40ch}
.foot__tag{display:flex;align-items:center;gap:.7rem;margin-top:1.5rem;font-family:var(--caps);font-size:.7rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.foot__tag i{width:4px;height:4px;background:var(--gold);transform:rotate(45deg);flex:0 0 auto}
.foot__base{margin-top:clamp(2.5rem,5vw,3.5rem);padding-block:1.5rem;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-size:.83rem}
.foot__base p{margin:0}
.social{display:flex;gap:.6rem;margin-top:1.5rem}
.social a{width:40px;height:40px;display:grid;place-content:center;border:1px solid rgba(255,255,255,.2);border-radius:50%;transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)}
.social a:hover{border-color:var(--gold);background:rgba(198,146,46,.15);transform:translateY(-2px)}
.social svg{width:17px;height:17px;fill:currentColor}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}