/* ==========================================================================
   MARGIE — landing page
   Design system sourced from two references she supplied:
     · business-support-agency.com  → navy ground, eyebrow labels, accent-lit
       headlines, pill buttons, split image/text bands. Colours sampled from
       live screenshots, not eyeballed.
     · "Flow - Business improvement program.pdf" → Poppins + DM Sans, and the
       warm→cool spectrum of the layered-wave cover art.
   Every accent value below is traced to one of those two sources.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face{font-family:Poppins;src:url(assets/fonts/poppins-300.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(assets/fonts/poppins-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(assets/fonts/poppins-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(assets/fonts/poppins-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url(assets/fonts/dmsans-var.woff2) format('woff2');font-weight:100 1000;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  /* ground — sampled #031B38 from the BSA hero */
  --navy:#031B38;
  --navy-2:#02142A;             /* one step deeper, for insets on navy */
  --navy-soft:#0A2748;
  --white:#FFFFFF;
  --paper:#FAFAFB;              /* sampled off-white from BSA */
  --ink:#031B38;
  --ink-mid:#3D4C5F;
  --ink-soft:#6B7A8C;
  --line:#E3E7EC;
  --line-dark:rgba(255,255,255,.16);

  /* the spectrum — warm → cool, every value evidenced */
  --amber:#F5A524;              /* BSA nav CTA · FLOW ramp top */
  --coral:#F2795A;              /* FLOW ramp, warm-mid */
  --magenta:#D42A80;            /* BSA "Through Clients' Eyes" */
  --violet:#8A5BA6;             /* FLOW ramp, plum→violet transition */
  --blue:#037FB2;               /* BSA, on light */
  --blue-lt:#6DC4FF;            /* BSA, on navy */
  --teal:#00A3A8;               /* BSA "Clarity Sessions" · FLOW ramp cool end */

  --grad:linear-gradient(90deg,var(--amber),var(--coral) 26%,var(--magenta) 50%,var(--violet) 70%,var(--blue-lt) 86%,var(--teal));

  --wrap:1200px;
  --pad:clamp(20px,5vw,64px);
  --sec-y:clamp(72px,9vw,132px);

  --f-display:Poppins,system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  --ease:cubic-bezier(.22,.75,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--f-body);font-size:clamp(16px,1.06vw,17.5px);
  line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:700;letter-spacing:-.022em;line-height:1.08;margin:0}
p{margin:0 0 1.05em}
ul,ol{margin:0;padding:0;list-style:none}
em{font-style:normal}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* The nav is fixed, so an in-page jump has to stop short of it. Without this
   every anchor landed with its own eyebrow and headline behind the bar. */
section[id]{scroll-margin-top:78px}

.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}

/* ---------- brand mark: concentric aperture, echoing the BSA logo ---------- */
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.brand__mark{
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;position:relative;
  background:
    radial-gradient(circle,#fff 0 17%,transparent 17.5%),
    conic-gradient(from 180deg,var(--amber),var(--coral),var(--magenta),var(--violet),var(--blue-lt),var(--teal),var(--amber));
  box-shadow:inset 0 0 0 3.5px var(--navy);
}
.brand__mark--sm{width:22px;height:22px;box-shadow:inset 0 0 0 3px var(--navy)}
.brand__word{font-family:var(--f-display);font-weight:700;font-size:18px;letter-spacing:.19em;color:#fff}

/* ---------- nav ---------- */
/* Solid navy from the start — same as the BSA site, and the only way the white
   wordmark stays legible above the light end of the hero artwork. */
.nav{position:fixed;inset:0 0 auto;z-index:100;background:var(--navy);transition:box-shadow .35s var(--ease)}
.nav.is-stuck{box-shadow:0 1px 0 rgba(255,255,255,.09),0 10px 30px -18px rgba(0,0,0,.8)}
.nav__in{
  max-width:var(--wrap);margin-inline:auto;padding:18px var(--pad);
  display:flex;align-items:center;gap:clamp(16px,3vw,44px);
}
.nav__links{display:flex;gap:clamp(14px,2.2vw,30px);margin-left:auto}
.nav__links a{
  font-size:14px;color:rgba(255,255,255,.78);text-decoration:none;position:relative;padding-block:4px;
  transition:color .2s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--grad);
  transition:right .3s var(--ease);
}
.nav__links a:hover{color:#fff}
.nav__links a:hover::after{right:0}
.nav__cta{flex:0 0 auto}
.nav__toggle{display:none;background:none;border:0;padding:10px;cursor:pointer;margin-left:auto}
.nav__toggle span{display:block;width:24px;height:2px;background:#fff;transition:transform .3s var(--ease),opacity .2s}
.nav__toggle span+span{margin-top:6px}
.nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.nav__mobile{background:var(--navy);border-top:1px solid var(--line-dark);padding:8px var(--pad) 22px}
.nav__mobile a{display:block;padding:13px 0;color:rgba(255,255,255,.85);text-decoration:none;border-bottom:1px solid var(--line-dark);font-size:16px}
.nav__mobile-cta{color:var(--amber)!important;border-bottom:0!important;font-weight:700}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:11px;padding:13px 24px;border-radius:999px;
  font-family:var(--f-body);font-size:14px;font-weight:700;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
  border:1.5px solid transparent;white-space:nowrap;
}
.btn--solid{background:var(--amber);color:var(--navy)}
.btn--solid:hover{transform:translateY(-2px);background:#FFB840}
.btn--ghost{border-color:rgba(255,255,255,.45);color:#fff}
.btn--ghost:hover{border-color:#fff;transform:translateY(-2px)}
.btn--lg{padding:17px 30px;font-size:15.5px}
.arw{width:22px;height:8px;flex:0 0 auto;position:relative}
.arw::before{content:"";position:absolute;left:0;top:3px;width:100%;height:1.5px;background:currentColor;transition:width .25s var(--ease)}
.arw::after{content:"";position:absolute;right:0;top:0;width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
.btn:hover .arw::before{width:130%}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);min-height:min(100svh,860px);background:var(--navy)}
.hero__art{position:relative;overflow:hidden}
.hero__art img{width:100%;height:100%;object-fit:cover;object-position:58% 50%}
/* Two washes: one carries the artwork into the navy copy column on the right,
   one grounds the bottom so the portrait recedes into shadow instead of being
   guillotined by the white band underneath. */
.hero__art::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,transparent 55%,rgba(3,27,56,.55) 88%,var(--navy) 100%),
    linear-gradient(180deg,transparent 74%,rgba(3,27,56,.38) 100%);
}
/* The measure here is set by one line: "couldn't see before" has to hold
   together. At 72px in a 760px column it broke after "see" and left "before"
   stranded on a line of its own, which is where the eye stops. */
.hero__body{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(104px,12vw,150px) var(--pad) clamp(56px,7vw,92px) clamp(30px,4.4vw,64px);
  max-width:860px;
}
.h1{
  color:#fff;font-size:clamp(38px,5vw,68px);letter-spacing:-.03em;line-height:1.04;
  margin-bottom:clamp(26px,3.4vw,40px);
}
.grad{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block;padding-bottom:.06em;
}
.rule{border:0;height:1px;background:var(--line-dark);margin:0 0 clamp(24px,3vw,34px)}
.lead{color:rgba(255,255,255,.8);font-size:clamp(16px,1.25vw,18.5px);max-width:60ch;margin-bottom:clamp(30px,3.6vw,42px)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- bands ---------- */
.band{padding-block:var(--sec-y);position:relative}
.band--light{background:var(--white);color:var(--ink)}
.band--navy{background:var(--navy);color:rgba(255,255,255,.82)}
.band--tight{padding-top:clamp(8px,2vw,26px)}
.band--navy+.band--navy{padding-top:0}

/* the spectrum thread — a hairline that carries the palette between bands */
.band--light+.band--navy::before,
.band--navy+.band--light::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);
}

/* ---------- section heads ---------- */
.eyebrow{
  font-family:var(--f-body);font-size:11.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;margin:0 0 clamp(16px,2vw,22px);color:var(--ink-soft);
}
.eyebrow--amber{color:#B9791A}
.eyebrow--coral{color:#C7513A}
.eyebrow--magenta{color:var(--magenta)}
.eyebrow--violet{color:var(--violet)}
.eyebrow--teal{color:#00838A}
.eyebrow--blue{color:var(--blue-lt)}
.eyebrow--onwash{color:rgba(255,255,255,.75)}
.band--navy .eyebrow--amber{color:var(--amber)}
.band--navy .eyebrow--teal{color:var(--teal)}
.band--navy .eyebrow--magenta{color:#FF6BAE}
.band--navy .eyebrow--violet{color:#C79BE0}

.sechead{max-width:820px;margin-bottom:clamp(40px,5vw,64px)}
.h2{font-size:clamp(29px,3.9vw,52px);letter-spacing:-.028em}
.band--navy .h2{color:#fff}
.h3{font-size:clamp(21px,2.1vw,28px);letter-spacing:-.022em;margin-bottom:.7em}
.sechead__note{margin-top:clamp(18px,2.2vw,26px);color:var(--ink-mid);max-width:64ch;font-size:clamp(15.5px,1.1vw,17px)}
.band--navy .sechead__note{color:rgba(255,255,255,.72)}

.ink-amber{color:#C07E10}.band--navy .ink-amber{color:var(--amber)}
.ink-coral{color:var(--coral)}
.ink-magenta{color:var(--magenta)}
.ink-teal{color:#008C91}.band--navy .ink-teal{color:var(--teal)}
.ink-blue{color:var(--blue)}.band--navy .ink-blue{color:var(--blue-lt)}
.ink-white{color:#fff}

/* ---------- asks (self-selection grid) ----------
   Four quotes: one row of 4 wide, 2x2 medium, 1 column small. Cut from eight —
   the grid did its recognition job long before the eighth cell. Kept at four
   columns rather than 2x2: at 2x2 the cells are wide enough that each quote
   fills two lines of a 170px box, and the dead space reads as a mistake. */
.asks{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.ask{
  background:var(--white);padding:clamp(24px,2.6vw,34px);
  font-family:var(--f-display);font-weight:400;font-size:clamp(15.5px,1.15vw,17.5px);
  line-height:1.42;letter-spacing:-.015em;color:var(--ink);
  display:flex;align-items:flex-start;
  position:relative;transition:background .3s var(--ease),color .3s var(--ease);
}
.ask::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad);
  opacity:0;transition:opacity .3s var(--ease);
}
.ask:hover{background:var(--paper)}
.ask:hover::before{opacity:1}

/* ---------- steps: See it / Connect it / Improve it ---------- */
.steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:clamp(26px,3vw,44px);margin-bottom:clamp(48px,6vw,80px);
}
.step{position:relative;padding-top:26px;border-top:1px solid var(--line-dark)}
.step::before{content:"";position:absolute;top:-1px;left:0;width:44%;height:2px;background:currentColor}
.step--amber{color:var(--amber)}
.step--magenta{color:#FF6BAE}
.step--teal{color:var(--teal)}
.step__n{font-family:var(--f-display);font-weight:700;font-size:13px;letter-spacing:.16em;display:block;margin-bottom:12px}
.step__t{color:#fff;font-size:clamp(22px,2.2vw,30px);margin-bottom:.55em}
.step p{color:rgba(255,255,255,.72);margin:0;font-size:clamp(15px,1.06vw,16.5px)}

.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(24px,3vw,40px)}
.principle{background:var(--navy-2);padding:clamp(26px,3vw,38px);border-left:2px solid var(--blue-lt)}
.principle h3{color:#fff;font-size:clamp(18px,1.55vw,21px);font-weight:600;letter-spacing:-.015em;margin-bottom:.75em;line-height:1.25}
.principle p{color:rgba(255,255,255,.72);margin:0;font-size:clamp(14.8px,1.02vw,16px)}

/* ---------- why (portrait + neurodivergence) ---------- */
.why__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,5vw,72px);align-items:center}
.why__fig{margin:0;position:relative}
.why__fig::before{
  content:"";position:absolute;left:-14px;top:-14px;width:46%;height:46%;
  background:var(--grad);opacity:.16;z-index:-1;
}
.why__fig img{width:100%;object-fit:cover;aspect-ratio:3/2}
.why__body p{color:var(--ink-mid);font-size:clamp(15.5px,1.1vw,17px)}
/* The payoff line, not a caveat. This slot used to hold the working limits —
   which read as "I will be clever, you do the work". It now holds what the way
   of thinking is worth to the reader, and the accent moved violet → teal to
   match: teal is the improve/positive end of the spectrum everywhere else. */
.why__gain{border-left:2px solid var(--teal);padding-left:20px;margin-top:1.6em;color:var(--ink)!important}

/* ---------- cards: four domains ---------- */
/* Four domains: 2x2. Three-across orphaned the fourth card on its own row. */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.2vw,28px)}
.card{
  padding:clamp(28px,3vw,38px);background:var(--paper);border-top:3px solid var(--line);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(3,27,56,.4)}
.card--amber{border-top-color:var(--amber)}
.card--coral{border-top-color:var(--coral)}
.card--magenta{border-top-color:var(--magenta)}
.card--teal{border-top-color:var(--teal)}
.card__n{font-family:var(--f-display);font-weight:700;font-size:12.5px;letter-spacing:.16em;color:var(--ink-soft);display:block;margin-bottom:16px}
.card--amber .card__n{color:#B9791A}
.card--coral .card__n{color:#C7513A}
.card--magenta .card__n{color:var(--magenta)}
.card--teal .card__n{color:#00838A}
.card h3{font-size:clamp(18px,1.5vw,21px);font-weight:600;letter-spacing:-.015em;margin-bottom:.75em;line-height:1.24}
.card p{color:var(--ink-mid);margin:0;font-size:clamp(14.6px,1.02vw,15.8px)}

/* ---------- ways ---------- */
/* Eight formats: two columns, four rows — three-across left two holes. */
.ways{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(36px,5vw,80px)}
.way{padding:clamp(22px,2.4vw,28px) 0;border-bottom:1px solid var(--line-dark);position:relative}
.way::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--grad);transition:width .45s var(--ease)}
.way:hover::after{width:100%}
.way h3{color:#fff;font-size:clamp(17.5px,1.45vw,20px);font-weight:600;letter-spacing:-.012em;margin-bottom:.55em}
.way p{color:rgba(255,255,255,.68);margin:0;font-size:clamp(14.4px,1vw,15.6px)}
/* ---------- promise / boundary pair ---------- */
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:clamp(28px,3.4vw,52px);align-items:start}
.pair__col{padding:clamp(28px,3.2vw,42px)}
.pair__col--after{background:var(--paper);border-top:3px solid var(--teal)}
.pair__col--not{background:var(--navy);color:rgba(255,255,255,.78);border-top:3px solid var(--magenta)}
.pair__col--not .h3{color:#fff}
.ticks li,.nots li{position:relative;padding-left:30px;margin-bottom:15px;font-size:clamp(14.8px,1.04vw,16.2px);line-height:1.5}
.ticks li{color:var(--ink-mid)}
.ticks li::before{
  content:"";position:absolute;left:2px;top:.42em;width:11px;height:6px;
  border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg);
}
.nots li{color:rgba(255,255,255,.76)}
.nots li::before{
  content:"";position:absolute;left:3px;top:.62em;width:12px;height:2px;background:var(--magenta);
}
.pair__note{margin:22px 0 0;padding-top:20px;border-top:1px solid var(--line);color:var(--ink);font-weight:500}

/* ---------- proof ---------- */
.quote{margin:0 0 clamp(48px,6vw,78px);max-width:900px;position:relative}
.quote__mark{
  font-family:var(--f-display);font-weight:700;font-size:88px;line-height:.6;color:var(--teal);
  display:block;margin-bottom:18px;
}
.quote blockquote{margin:0}
.quote blockquote p{
  color:rgba(255,255,255,.9);font-family:var(--f-display);font-weight:300;
  font-size:clamp(17px,1.65vw,23px);line-height:1.5;letter-spacing:-.015em;
}
.quote figcaption{
  margin-top:20px;font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.worked__note{
  color:rgba(255,255,255,.62);max-width:70ch;font-size:clamp(14.6px,1.02vw,16px);
  padding-left:18px;border-left:2px solid var(--blue-lt);margin-bottom:clamp(28px,3.4vw,40px);
}
.worked__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:clamp(22px,2.6vw,34px)}
.worked__item{background:var(--navy-2);padding:clamp(24px,2.8vw,32px)}
.worked__q{
  font-family:var(--f-display);font-weight:600;font-size:clamp(16px,1.3vw,18.5px);
  color:var(--blue-lt);letter-spacing:-.015em;margin-bottom:.9em;line-height:1.3;
}
.worked__item p:last-child{color:rgba(255,255,255,.7);margin:0;font-size:clamp(14.4px,1vw,15.6px)}

/* ---------- range ---------- */
.range{margin-bottom:clamp(30px,3.4vw,42px)}
.range__t{
  font-family:var(--f-body);font-size:11.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:16px;
}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips li{
  border:1px solid var(--line);padding:8px 15px;border-radius:999px;font-size:14px;
  color:var(--ink);background:var(--white);transition:border-color .25s var(--ease),color .25s var(--ease);
}
.chips li:hover{border-color:var(--coral);color:var(--coral)}
.chips--quiet li{color:var(--ink-soft);background:var(--paper)}
.chips--quiet li:hover{border-color:var(--teal);color:var(--teal)}

/* ---------- closing CTA ----------
   Named .cta, not .ask — `.ask` is already the founder-quote cell above, and the
   collision gave this section a white panel and bottom-aligned those quotes. */
.band--cta{position:relative;overflow:hidden}
.band--cta::after{
  content:"";position:absolute;right:-14%;top:-38%;width:62%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(0,163,168,.30),rgba(212,42,128,.16) 46%,transparent 68%);
  pointer-events:none;
}
.cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,4vw,64px);align-items:end;position:relative;z-index:1}
.cta__h{max-width:17ch}
.cta__lead{color:rgba(255,255,255,.75);max-width:56ch;margin:clamp(22px,2.6vw,30px) 0 clamp(28px,3.2vw,36px);font-size:clamp(15.5px,1.12vw,17.5px)}
.cta__row{display:flex;flex-wrap:wrap;gap:14px}
.cta__aside{
  margin:clamp(30px,3.6vw,44px) 0 0;color:rgba(255,255,255,.45);font-size:14px;
  max-width:52ch;line-height:1.55;
}
.cta__fig{margin:0;flex:0 0 auto}
.cta__fig img{width:clamp(180px,20vw,300px);filter:drop-shadow(0 22px 44px rgba(0,0,0,.45))}

/* ---------- footer ---------- */
.foot{background:var(--navy-2);color:rgba(255,255,255,.6);padding-top:clamp(48px,6vw,72px);font-size:14.5px}
.foot__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(26px,3vw,44px);padding-bottom:clamp(34px,4vw,48px)}
.foot__brand{display:flex;align-items:center;gap:12px}
.foot__word{font-family:var(--f-display);font-weight:700;letter-spacing:.19em;color:#fff;margin:0;font-size:16px}
.foot__sub{margin:2px 0 0;font-size:13.5px}
.foot__links{display:flex;flex-direction:column;gap:9px}
.foot__links a{text-decoration:none;transition:color .2s var(--ease);width:fit-content}
.foot__links a:hover{color:var(--amber)}
.foot__legal{margin:0;max-width:38ch;font-size:13.5px;color:rgba(255,255,255,.45)}
.foot__credit{
  display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;
  padding-block:20px;border-top:1px solid var(--line-dark);font-size:12.5px;color:rgba(255,255,255,.4);
}
.foot__mono{font-family:var(--f-body);letter-spacing:.19em;font-size:10.5px;font-weight:700}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.no-js .reveal,.reveal.is-off{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.card,.ask,.way::after{transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero__art{height:clamp(230px,42vw,360px)}
  .hero__art::after{background:linear-gradient(180deg,transparent 40%,rgba(3,27,56,.7) 84%,var(--navy) 100%)}
  .hero__body{padding:clamp(38px,7vw,60px) var(--pad) clamp(52px,8vw,72px);max-width:none}
  .why__grid{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr}
  .cta__fig{display:none}
}
@media (max-width:1000px){
  .asks{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .ways{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
}
@media (max-width:860px){
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:block}
}
@media (max-width:560px){
  .asks{grid-template-columns:1fr}
  .pair__col{padding:26px 22px}
  .quote__mark{font-size:64px}
}

/* ========================================================================== 
   2026-08 refinement — the page behaves like a connected system
   ========================================================================== */

::selection{background:rgba(212,42,128,.2);color:var(--navy)}

.scroll-meter{
  position:fixed;inset:0 0 auto;height:3px;background:rgba(255,255,255,.08);
  z-index:180;pointer-events:none;
}
.scroll-meter span{
  display:block;width:100%;height:100%;background:var(--grad);transform-origin:left;
  transform:scaleX(var(--scroll-progress,0));will-change:transform;
}

/* Fully opaque, not .95 — at rest the nav sits over the brightest part of the
   hero artwork, and any transparency mottled the bar and dirtied the wordmark. */
.nav{
  background:linear-gradient(90deg,var(--navy),#04203F);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  border-bottom-color:rgba(255,255,255,.08);
  box-shadow:0 14px 38px -26px rgba(0,0,0,.9);
}
.nav__links a.is-active{color:#fff}
.nav__links a.is-active::after{right:0}
.nav__mobile a.is-active{color:var(--amber)}
.brand__mark{animation:brand-breathe 5.5s ease-in-out infinite}

/* ---------------------------------------------------------------------------
   Hero. The portrait is a FIXED composition — it fades up once and then holds.
   The previous version drifted the portrait, spectrum, halo and map with the
   pointer on a ~1.1s ease; the lag read as cheap, and a face that slides around
   competes with the headline for the one thing the hero has to deliver. The only
   motion left is the entrance: copy staggers in, and the connection map draws
   itself once. Nothing in here loops.
   --------------------------------------------------------------------------- */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:auto 0 0 44%;height:1px;z-index:8;
  background:linear-gradient(90deg,transparent,var(--magenta),var(--blue-lt),transparent);
  opacity:.65;
}
.hero__art{isolation:isolate;background:#dceff1}
.hero__art .hero__spectrum{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 50%;
  transform:scale(1.04);
}
.hero__art::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),transparent 26%),
    radial-gradient(circle at 66% 68%,rgba(3,27,56,.06),rgba(3,27,56,.36) 66%,rgba(3,27,56,.14));
  pointer-events:none;
}
.hero__art::after{z-index:5;pointer-events:none}
.hero__halo{
  position:absolute;z-index:2;width:58%;aspect-ratio:1;left:51%;bottom:-10%;border-radius:50%;
  background:radial-gradient(circle,rgba(109,196,255,.42),rgba(212,42,128,.16) 38%,transparent 68%);
  transform:translateX(-50%);filter:blur(7px);pointer-events:none;
}
.hero__art .hero__portrait{
  position:absolute;z-index:4;left:52%;bottom:0;width:clamp(228px,23vw,326px);height:auto;
  object-fit:contain;object-position:center bottom;transform:translateX(-50%);
  filter:drop-shadow(0 26px 32px rgba(3,27,56,.42));
}
.page-ready .hero__art .hero__portrait{animation:portrait-arrive .9s .2s var(--ease) both}
.hero__body{position:relative;z-index:6}
.js .hero__body>*{animation:hero-copy .72s var(--ease) both}
.js .hero__body>*:nth-child(1){animation-delay:.16s}
.js .hero__body>*:nth-child(2){animation-delay:.25s}
.js .hero__body>*:nth-child(3){animation-delay:.36s}
.js .hero__body>*:nth-child(4){animation-delay:.45s}
.js .hero__body>*:nth-child(5){animation-delay:.54s}
.hero .eyebrow{color:rgba(255,255,255,.56)}

/* The white sections retain air, but no longer feel like empty documents. */
.band{isolation:isolate}
.band>.wrap{position:relative;z-index:1}
.band--light{
  background:
    radial-gradient(circle at 94% 12%,rgba(109,196,255,.10),transparent 26%),
    radial-gradient(circle at 3% 88%,rgba(245,165,36,.08),transparent 24%),
    var(--white);
}
.band--navy{
  background:
    radial-gradient(circle at 88% 8%,rgba(0,163,168,.09),transparent 25%),
    radial-gradient(circle at 6% 92%,rgba(212,42,128,.08),transparent 24%),
    var(--navy);
}
.sechead{position:relative}
.sechead::after{
  content:"";position:absolute;left:0;bottom:calc(clamp(40px,5vw,64px) * -.46);
  width:clamp(72px,9vw,116px);height:1px;background:var(--grad);transform-origin:left;
}

/* Recognition grid — four founder sentences, each treated as a signal. */
.asks{
  counter-reset:question;gap:12px;background:transparent;border:0;
}
.ask{
  counter-increment:question;display:block;min-height:170px;padding:54px clamp(22px,2.4vw,32px) 28px;
  border:1px solid var(--line);border-radius:6px;overflow:hidden;isolation:isolate;
  box-shadow:0 1px 0 rgba(3,27,56,.03);
  transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color .34s var(--ease),background .34s var(--ease);
}
.ask::before{
  top:0;right:0;bottom:auto;width:100%;height:3px;opacity:1;background:var(--cell,var(--amber));
  transform:scaleX(.16);transform-origin:left;transition:transform .42s var(--ease);
}
.ask::after{
  content:counter(question,decimal-leading-zero);position:absolute;right:22px;top:17px;
  font-family:var(--f-body);font-size:10.5px;font-weight:700;letter-spacing:.18em;
  color:var(--cell,var(--amber));opacity:.9;
}
.ask:nth-child(2),.ask:nth-child(6){--cell:var(--coral)}
.ask:nth-child(3),.ask:nth-child(7){--cell:var(--magenta)}
.ask:nth-child(4),.ask:nth-child(8){--cell:var(--teal)}
.ask:hover{
  transform:translateY(-6px);border-color:color-mix(in srgb,var(--cell,var(--amber)) 45%,var(--line));
  box-shadow:0 24px 44px -30px rgba(3,27,56,.42);background:#fff;
}
.ask:hover::before{transform:scaleX(1)}

/* See / connect / improve is a real path, not three detached columns.
   The connector is drawn per-segment (node → next node) rather than as one line
   across the container: a single line overshot the third node and trailed off
   into empty space, and it let each segment carry the colour handover. */
.steps{--steps-gap:clamp(30px,4vw,58px);position:relative;isolation:isolate;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--steps-gap)}
.step{border:0;padding-top:44px}
.step:not(:last-child)::after{
  content:"";position:absolute;z-index:-1;left:18px;top:8px;height:1px;
  width:calc(100% + var(--steps-gap) - 9px);opacity:.6;
}
.step--amber::after{background:linear-gradient(90deg,var(--amber),#FF6BAE)}
.step--magenta::after{background:linear-gradient(90deg,#FF6BAE,var(--teal))}
.step::before{
  top:0;left:0;width:18px;height:18px;border-radius:50%;background:var(--navy);
  border:3px solid currentColor;box-shadow:0 0 0 7px rgba(255,255,255,.035);
}
.step.is-in::before{animation:step-ping 1s .42s var(--ease)}
.step__n{font-size:11px;opacity:.8}
.step__t{font-size:clamp(24px,2.45vw,34px)}
.principle{
  position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.075);border-left:2px solid var(--blue-lt);
  background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  box-shadow:0 20px 40px -34px rgba(0,0,0,.8);
}
.principle::after{
  content:"";position:absolute;width:150px;aspect-ratio:1;border:1px solid rgba(109,196,255,.12);
  border-radius:50%;right:-78px;bottom:-100px;box-shadow:0 0 0 24px rgba(109,196,255,.025);
}

/* Personal context gets a more editorial portrait treatment. */
.why{overflow:hidden}
.why__grid{grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr)}
/* A clean rectangle. The previous version clipped the photo to a lopsided
   quadrilateral and morphed it again on hover; at a glance it read as a broken
   render, and it re-cropped her face. The framing devices — a spectrum wedge
   behind the top corner and an offset outline below — carry the composition
   instead, and the picture itself is left alone. */
.why__fig{isolation:isolate;padding:14px 14px 0 0}
.why__fig::before{
  left:auto;right:0;top:0;width:62%;height:56%;opacity:.5;
  background:var(--grad);clip-path:none;
}
.why__fig::after{
  content:"";position:absolute;inset:auto 0 0 auto;width:58%;height:44%;z-index:-1;
  border:1px solid rgba(138,91,166,.42);transform:translate(14px,14px);
}
.why__fig img{
  aspect-ratio:4/5;object-position:50% 40%;
  filter:saturate(.94) contrast(1.02);box-shadow:0 30px 62px -42px rgba(3,27,56,.72);
}
.why__gain{background:linear-gradient(90deg,rgba(0,163,168,.075),transparent);padding:16px 18px 16px 22px}

/* Domain cards read as one family while each keeps a clear signal colour. */
.cards{gap:16px}
.card{
  --card-accent:var(--amber);position:relative;isolation:isolate;overflow:hidden;min-height:270px;
  border:1px solid var(--line);border-top:3px solid var(--card-accent);border-radius:6px;
  background:linear-gradient(145deg,#fff,var(--paper));
  box-shadow:0 12px 34px -34px rgba(3,27,56,.45);
}
.card--coral{--card-accent:var(--coral)}
.card--magenta{--card-accent:var(--magenta)}
.card--teal{--card-accent:var(--teal)}
.card::before{
  content:"";position:absolute;z-index:-1;right:-54px;top:-62px;width:160px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--card-accent) 18%,transparent),transparent 68%);
  transition:transform .55s var(--ease);
}
/* A three-node motif used to sit here at .16 opacity behind a clip-path that cut
   two of the three dots in half. At card scale it read as dust on the screen,
   not as a mark — cut rather than rescued. */
.card:hover{
  transform:translateY(-7px);border-color:color-mix(in srgb,var(--card-accent) 42%,var(--line));
  box-shadow:0 26px 50px -32px rgba(3,27,56,.52);
}
.card:hover::before{transform:scale(1.22)}
.card__n{width:fit-content;padding:5px 8px;border:1px solid color-mix(in srgb,var(--card-accent) 32%,transparent);border-radius:999px}

/* Ways to work becomes a numbered decision index. */
.ways{counter-reset:way;gap:0 clamp(36px,5vw,80px)}
.way{counter-increment:way;padding:clamp(26px,2.7vw,34px) 42px clamp(26px,2.7vw,34px) 70px}
.way::before{
  content:counter(way,decimal-leading-zero);position:absolute;left:0;top:clamp(28px,2.85vw,36px);
  font-family:var(--f-display);font-size:12px;font-weight:700;letter-spacing:.15em;color:var(--amber);
}
.way h3{display:flex;align-items:center;justify-content:space-between;gap:20px}
.way h3::after{
  content:"↗";font-family:var(--f-body);font-size:16px;font-weight:400;color:rgba(255,255,255,.32);
  transform:translate(-6px,4px);opacity:0;transition:transform .32s var(--ease),opacity .32s var(--ease),color .32s var(--ease);
}
.way:hover h3::after{transform:none;opacity:1;color:var(--amber)}
.way:hover h3{color:var(--amber)}

/* Promise and boundary act as a deliberate pair. */
.pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pair__col{
  border-radius:7px;box-shadow:0 18px 50px -40px rgba(3,27,56,.62);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.pair__col:hover{transform:translateY(-5px);box-shadow:0 28px 55px -38px rgba(3,27,56,.68)}
.pair__col--after{background:linear-gradient(145deg,#fff,#f1f8f7)}
.pair__col--not{background:linear-gradient(145deg,var(--navy),#071f43)}

/* Evidence pairs the real words with a real person. */
.proof__story{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.65fr);
  align-items:stretch;gap:clamp(34px,5vw,76px);margin-bottom:clamp(54px,7vw,90px);
}
.quote{margin:0;align-self:center}
.quote__mark{font-size:clamp(82px,8vw,118px);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.proof__portrait{
  margin:0;position:relative;isolation:isolate;min-height:470px;padding:10px 0 0 10px;
}
.proof__portrait::before{
  content:"";position:absolute;z-index:-1;inset:0 10px 10px 0;background:var(--grad);opacity:.82;
}
.proof__portrait img{width:100%;height:100%;min-height:460px;object-fit:cover;object-position:51% 45%;filter:saturate(.84) contrast(1.04)}
.proof__portrait span{
  position:absolute;inset:10px 0 0 10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  background:linear-gradient(180deg,transparent 54%,rgba(3,27,56,.52));pointer-events:none;
}
.worked__item{
  border:1px solid rgba(255,255,255,.065);background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  transition:transform .34s var(--ease),border-color .34s var(--ease),background .34s var(--ease);
}
.worked__item:hover{transform:translateY(-5px);border-color:rgba(109,196,255,.3);background:rgba(255,255,255,.065)}

/* Experience remains secondary, but feels authored rather than tagged. */
.chips{gap:10px}
.chips li{
  position:relative;border-radius:4px;padding:9px 15px 9px 29px;background:rgba(255,255,255,.72);
}
.chips li::before{
  content:"";position:absolute;left:13px;top:50%;width:5px;height:5px;border-radius:50%;
  background:var(--coral);transform:translateY(-50%);box-shadow:0 0 0 3px rgba(242,121,90,.11);
}
.chips--quiet li::before{background:var(--teal);box-shadow:0 0 0 3px rgba(0,163,168,.1)}

/* The final portrait has its own orbit, echoing the opening map. */
.cta::before{
  content:"";position:absolute;right:3%;top:50%;width:clamp(230px,28vw,370px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(109,196,255,.12);box-shadow:0 0 0 42px rgba(212,42,128,.035),0 0 0 88px rgba(109,196,255,.022);
  transform:translateY(-50%);pointer-events:none;
}
.cta__fig{position:relative;z-index:1}
.cta__fig::before{
  content:"";position:absolute;inset:12% -10% -8%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,rgba(109,196,255,.25),rgba(212,42,128,.12) 43%,transparent 69%);
}
/* The cutout ends in a hard horizontal slice at the waist. In the hero that edge
   is the section boundary and invisible; here it floats mid-band, so it is
   dissolved into the navy instead of shown. */
.cta__fig img{
  position:relative;z-index:1;animation:portrait-float 5.5s ease-in-out infinite;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 99%);
  mask-image:linear-gradient(180deg,#000 72%,transparent 99%);
}
.foot__mono{color:rgba(255,255,255,.54)}

.reveal{transform:translateY(22px);filter:blur(5px);transition:opacity .72s var(--ease),transform .72s var(--ease),filter .72s var(--ease)}
.reveal.is-in{filter:none}
.no-js .reveal,.reveal.is-off{filter:none}

/* The hero is the one place that holds completely still. Two quiet loops are kept
   deliberately, Flori's call (17 Aug 2026): the brand mark breathes, and the
   closing portrait floats. The headline gradient no longer crawls — it stopped
   earning it once the headline fit on one line and the full amber→teal ramp
   landed across the whole phrase at rest. */
@keyframes brand-breathe{
  0%,100%{filter:saturate(1);box-shadow:inset 0 0 0 3.5px var(--navy),0 0 0 0 rgba(109,196,255,0)}
  50%{filter:saturate(1.2);box-shadow:inset 0 0 0 3.5px var(--navy),0 0 0 5px rgba(109,196,255,.08)}
}
@keyframes portrait-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes portrait-arrive{from{opacity:0}to{opacity:1}}
@keyframes hero-copy{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes step-ping{0%{box-shadow:0 0 0 0 currentColor}100%{box-shadow:0 0 0 14px transparent}}
@keyframes mobile-menu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

@media (max-width:1040px){
  /* Stacked hero: the art band has to be taller than the portrait by more than
     the height of the fixed nav, or the nav crops the top of her head. */
  .hero::after{inset:auto 0 0;height:1px}
  .hero__art{height:clamp(320px,48vw,430px)}
  .hero__art .hero__portrait{width:clamp(195px,27vw,270px);left:64%}
  .hero__halo{width:70%;left:62%}
  .why__grid{grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr)}
}
@media (min-width:1041px) and (max-height:850px){
  .hero{min-height:100svh}
  .hero__body{padding-top:110px;padding-bottom:42px}
  .h1{font-size:clamp(46px,4.6vw,62px);margin-bottom:24px}
  .hero .rule{margin-bottom:24px}
  .hero .lead{margin-bottom:28px}
}
@media (max-width:900px){
  /* The path turns vertical rather than squeezing three columns into 240px. */
  .steps{--steps-gap:12px;grid-template-columns:minmax(0,1fr)}
  .step{padding:0 0 30px 44px}
  .step:not(:last-child)::after{
    left:8px;top:18px;width:1px;height:calc(100% + var(--steps-gap) - 9px);
  }
  .step--amber::after{background:linear-gradient(180deg,var(--amber),#FF6BAE)}
  .step--magenta::after{background:linear-gradient(180deg,#FF6BAE,var(--teal))}
}
@media (max-width:860px){
  .nav__mobile a.is-active{color:var(--amber)}
  .nav__mobile:not([hidden]){animation:mobile-menu-in .3s var(--ease) both}
  .proof__story{grid-template-columns:1fr .7fr;gap:28px}
  .proof__portrait{min-height:410px}
  .proof__portrait img{min-height:400px}
}
@media (max-width:760px){
  .why__grid,.proof__story{grid-template-columns:1fr}
  .why__fig{max-width:520px}
  .why__fig img{aspect-ratio:4/3}
  .proof__portrait{min-height:0;max-height:390px;padding-top:8px}
  .proof__portrait img{min-height:0;aspect-ratio:16/10;object-position:50% 38%}
  .proof__portrait span{inset:8px 0 0 10px}
  .pair{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hero__art{height:332px}
  .hero__art .hero__portrait{width:190px;left:64%}
  .hero__halo{width:80%;left:62%}
  .principles,.worked__grid{grid-template-columns:minmax(0,1fr)}
  .ask{min-height:0;padding:50px 22px 25px}
  .way{padding:25px 34px 25px 52px}
  .way::before{top:28px}
  .proof__portrait{max-height:310px}
  .cta,.cta__body,.cta__row{min-width:0;width:100%}
  .cta__h{max-width:100%}
  .cta__row .btn{
    width:100%;min-width:0;padding:15px 18px;font-size:13.5px;line-height:1.28;
    white-space:normal;overflow-wrap:anywhere;justify-content:space-between;text-align:left;
  }
  .cta::before{right:-30%;width:320px}
}

/* Reduced motion kills the entrances but must NOT null the transforms: the hero
   portrait and halo are centred with translateX(-50%), so a blanket
   `transform:none` shunted both of them half a width to the right. */
@media (prefers-reduced-motion:reduce){
  .hero__portrait,.nav__mobile,.js .hero__body>*,.step.is-in::before,
  .brand__mark,.cta__fig img{animation:none!important}
  .hero__portrait{opacity:1}
  .reveal{filter:none}
  .ask,.pair__col,.worked__item,.chips li{transition:none}
}