/* ============================================================================
   ALL WORDS ON THIS PAGE ARE OCEANVIEW'S OWN, taken verbatim from
   oceanviewstrategy.com. Nothing here is written copy. Ordering, weight and
   pacing are the only things that changed.
   ========================================================================= */
:root{
  /* ---- Oceanview brand palette ---- */
  --navy:#0E2841;
  --deep-navy:#1A3D5C;
  --steel-blue:#2B5F8A;
  --ocean-blue:#3C8AB8;
  --sky-blue:#5BB3D6;
  --pale-aqua:#9DD3EA;
  --ice-blue:#E8F1F8;
  --white:#FFFFFF;

  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter","Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --gut:clamp(20px,5vw,84px);
  --maxw:1240px;
  /* the two phases of the descent — swapped on <body> at the crossover.
     --accent has to carry small marks (rule numbers, bullets, ticks) on BOTH
     phases, so it swaps too: Sky Blue is unreadable on white at 10px, and Steel
     Blue is unreadable on navy. Neither one works alone. */
  --ink:var(--navy);
  --muted:#5B7590;
  --rule:rgba(14,40,65,.14);
  --surface:var(--ice-blue);
  --surface-hi:var(--white);
  --accent:var(--steel-blue);
}
body.deep{
  --ink:var(--white);
  --muted:#A8C2D8;
  --rule:rgba(255,255,255,.14);
  --surface:var(--deep-navy);
  --surface-hi:#24537A;
  --accent:var(--sky-blue);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Horizontal containment, for phones.
   `overflow-x:hidden` on <body> alone turns the body into its own horizontal scroll
   container, which on a 390px phone left the layout viewport 18px wider than the
   visual one (innerWidth 408 vs clientWidth 390) — every block measured against the
   wider box, so the page could be dragged sideways. `clip` contains it WITHOUT
   creating a scroll container, and is applied to both elements so neither can
   establish one. There is no position:sticky on this page, which is the usual reason
   not to do this. */
html,body{overflow-x:clip;max-width:100%}
body{
  margin:0;color:var(--ink);background:transparent;
  font-family:var(--sans);font-size:19px;line-height:1.72;
  -webkit-font-smoothing:antialiased;overflow-wrap:break-word;
  transition:color .7s ease;
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;margin:0;
  transition:color .7s ease}
p{margin:0;transition:color .7s ease}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);position:relative;z-index:1}

/* ---- the descent: one continuous body of water behind everything ---- */
#depth{position:fixed;inset:0;z-index:-2;background:#FFFFFF;transition:background-color .35s linear}
#waterline{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;opacity:1}

/* ---------- progress rail ---------- */
#rail{position:fixed;right:max(18px,2.2vw);top:50%;transform:translateY(-50%);z-index:90;
  display:flex;flex-direction:column;gap:2px;align-items:flex-end}
#rail button{background:none;border:0;padding:7px 0 7px 14px;cursor:pointer;display:flex;
  align-items:center;gap:10px;font-family:var(--sans);color:inherit}
#rail .tick{display:block;width:20px;height:1px;background:currentColor;opacity:.3;
  transition:width .6s cubic-bezier(.2,.7,.2,1),opacity .6s,background-color .6s}
#rail button:hover .tick{opacity:.7;width:30px}
#rail button.on .tick{width:38px;opacity:1;background:var(--accent)}
#rail .lab{font-size:11px;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;
  opacity:0;transform:translateX(6px);transition:opacity .5s,transform .5s;order:-1}
#rail button:hover .lab,#rail button.on .lab{opacity:.75;transform:none}

/* ---------- nav ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .7s ease,border-color .7s ease,backdrop-filter .7s;
  border-bottom:1px solid transparent}
header.solid{background:rgba(14,40,65,.86);backdrop-filter:blur(16px);
  border-bottom-color:rgba(255,255,255,.10)}
.navbar{display:flex;align-items:center;gap:10px;height:84px}
.brand{display:flex;align-items:center;margin-right:auto}
/* The mark is type, not an image, so it inherits the descent instead of needing an
   invert filter: white over the hero video and the solid nav, navy once the page is
   light and the header has gone transparent. Same condition as the nav links. */
.wordmark{font-family:var(--serif);font-weight:500;line-height:1;white-space:nowrap;
  color:#fff;transition:color .7s ease}
.navbar .wordmark{font-size:clamp(19px,2vw,24px);letter-spacing:.004em}
body:not(.deep):not(.athero) header:not(.solid) .navbar .wordmark{color:var(--navy)}
#nav{display:flex;align-items:center;gap:6px}
#nav a{font-size:12.5px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;
  color:rgba(255,255,255,.74);padding:9px 15px;border-radius:2px;white-space:nowrap;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);
  transition:color .5s,background .5s,border-color .5s}
body:not(.deep):not(.athero) header:not(.solid) #nav a{color:rgba(14,40,65,.72);
  border-color:rgba(14,40,65,.16);background:rgba(255,255,255,.35)}
#nav a:hover{color:#fff;background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.28)}
body:not(.deep):not(.athero) header:not(.solid) #nav a:hover{color:#0E2841;background:rgba(255,255,255,.7)}
#nav a.on{border-color:var(--accent)}
.navtoggle{display:none;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.30);
  cursor:pointer;padding:0;border-radius:2px;width:44px;height:38px;position:relative}
.navtoggle span,.navtoggle span::before,.navtoggle span::after{
  content:"";position:absolute;left:50%;width:18px;height:1.5px;background:#fff;
  transform:translateX(-50%);transition:transform .4s ease,opacity .4s}
.navtoggle span{top:50%;margin-top:-.75px}
.navtoggle span::before{left:0;transform:none;top:-6px}
.navtoggle span::after{left:0;transform:none;top:6px}
.navtoggle.open span{background:transparent}
.navtoggle.open span::before{transform:rotate(45deg);top:0}
.navtoggle.open span::after{transform:rotate(-45deg);top:0}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;
  overflow:hidden;isolation:isolate;
  background:#0E2841 url(poster.jpg) center/cover no-repeat}
#herovid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
#waves{position:absolute;inset:0;width:100%;height:100%;z-index:2;display:block;pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,28,46,.74) 0%,rgba(14,40,65,.26) 34%,rgba(9,28,46,.40) 66%,rgba(255,255,255,0) 88%,#FFFFFF 100%),
             linear-gradient(100deg,rgba(9,28,46,.88) 0%,rgba(9,28,46,.56) 38%,rgba(9,28,46,.08) 68%,transparent 88%)}
.hero .wrap{z-index:3;width:100%;padding-top:104px;padding-bottom:150px}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--sky-blue);margin-bottom:26px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--sky-blue)}
.hero h1{color:#fff;font-size:clamp(50px,8.2vw,104px);line-height:1.04;max-width:15ch;
  font-weight:400;letter-spacing:-.03em}
.hero h1 .em{font-style:italic;color:var(--sky-blue)}
.hero .lede{margin-top:30px;max-width:52ch;font-size:clamp(19px,1.8vw,24px);
  color:rgba(255,255,255,.86);font-weight:300;line-height:1.62}
.hero .cta{margin-top:46px;display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;padding:17px 34px;font-size:14.5px;
  letter-spacing:.10em;text-transform:uppercase;font-weight:600;
  background:var(--steel-blue);color:var(--white);border:1px solid var(--steel-blue);
  transition:background .55s ease,border-color .55s ease}
.btn:hover{background:var(--ocean-blue);border-color:var(--ocean-blue)}
.quiet{font-size:14px;letter-spacing:.10em;text-transform:uppercase;
  color:rgba(255,255,255,.68);border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:3px;
  transition:color .55s,border-color .55s}
.quiet:hover{color:#fff;border-color:#fff}
.scrollcue{position:absolute;left:50%;bottom:38px;transform:translateX(-50%);z-index:3;
  width:1px;height:56px;background:linear-gradient(180deg,rgba(255,255,255,.55),transparent);
  animation:drop 5s ease-in-out infinite}
@keyframes drop{0%,100%{opacity:.2;transform:translateX(-50%) scaleY(.5)}50%{opacity:.9;transform:translateX(-50%) scaleY(1)}}

/* ---------- text bubbles ----------
   Copy that sits on open ground gets its own ground: a blurred halo in the
   current water colour, so the shading stops behind the words instead of
   drifting through them. Blurred rather than boxed — a hard rectangle would
   turn every heading into another card and kill the descent. */
.bub{position:relative}
.bub::before{
  content:"";position:absolute;inset:-26px -40px;z-index:-1;
  background:var(--ground,#FFFFFF);
  filter:blur(30px);border-radius:60px;
  transition:background-color .35s linear;
}
.bub.tight::before{inset:-16px -30px;filter:blur(22px)}

/* ---------- sections ---------- */
.band{padding:clamp(88px,11.5vw,168px) 0;position:relative}
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  padding-bottom:28px;border-bottom:1px solid var(--rule);margin-bottom:64px;
  transition:border-color .7s ease}
.snum{font-size:12px;letter-spacing:.22em;color:var(--accent);text-transform:uppercase;
  display:block;margin-bottom:15px}
.shead h2{font-size:clamp(33px,4.6vw,56px);line-height:1.12;max-width:22ch;font-weight:400}

/* ---------- grids ---------- */
.grid{display:grid;gap:1px;background:var(--rule);transition:background-color .7s ease}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.cell{background:var(--surface);padding:clamp(28px,3vw,46px);position:relative;
  transition:background-color .9s ease}
.cell:hover{background:var(--surface-hi)}
.cell .k{font-size:12px;letter-spacing:.18em;color:var(--accent);text-transform:uppercase}
.cell h3{font-size:clamp(21px,2.2vw,28px);margin:16px 0 15px;line-height:1.28;font-weight:400}
.cell p{font-size:17px;color:var(--muted);line-height:1.7;max-width:44ch}
.cell::before{content:"";position:absolute;left:0;top:0;width:0;height:2px;
  background:var(--accent);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.cell:hover::before{width:100%}

/* ---------- proof strip ---------- */
.proof{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule)}
.pf{background:var(--surface);padding:clamp(26px,3vw,44px) clamp(18px,2vw,30px)}
.pf .fig{font-family:var(--serif);font-size:clamp(33px,4vw,55px);line-height:1;
  font-variant-numeric:tabular-nums;
  font-weight:400;letter-spacing:-.03em;white-space:nowrap}
.pf .lbl{margin-top:14px;font-size:14.5px;color:var(--muted);line-height:1.55}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule)}
.stat{background:var(--surface);padding:clamp(36px,4.4vw,70px) clamp(24px,3vw,46px)}
.stat .fig{font-family:var(--serif);font-size:clamp(40px,5.7vw,78px);line-height:1.06;
  font-variant-numeric:tabular-nums;
  font-weight:400;letter-spacing:-.03em}
.fig .u{color:var(--accent)}

/* ---------- accordion ---------- */
.acc{border-top:1px solid var(--rule)}
.item{border-bottom:1px solid var(--rule)}
.itemhd{display:flex;align-items:center;gap:24px;padding:28px 0;cursor:pointer;
  background:none;border:0;width:100%;text-align:left;color:inherit;font-family:inherit}
.itemhd .idx{font-size:13px;letter-spacing:.15em;color:var(--accent);min-width:38px}
.itemhd h3{font-size:clamp(21px,2.4vw,30px);flex:1;font-weight:400;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.itemhd:hover h3{transform:translateX(9px)}
.itemhd .pm{width:18px;height:18px;position:relative;flex:0 0 18px}
.itemhd .pm::before,.itemhd .pm::after{content:"";position:absolute;background:var(--accent);
  transition:transform .7s ease,opacity .7s}
.itemhd .pm::before{left:0;top:8px;width:18px;height:1.5px}
.itemhd .pm::after{left:8px;top:0;width:1.5px;height:18px}
.item.open .pm::after{transform:rotate(90deg);opacity:0}
.itembd{max-height:0;overflow:hidden;transition:max-height .85s cubic-bezier(.4,0,.2,1)}
.itembd ul{margin:0 0 34px;padding:0 0 0 58px;list-style:none;columns:2;column-gap:54px}
.itembd li{font-size:16.5px;color:var(--muted);line-height:1.65;margin-bottom:15px;
  break-inside:avoid;padding-left:18px;position:relative}
.itembd li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:1px;background:var(--accent)}

/* ---------- held silence ---------- */
.film{position:relative;height:clamp(420px,74vh,760px);overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:center;
  background:var(--navy) url(poster.jpg) center/cover no-repeat}
.film video{position:absolute;inset:0;width:100%;height:118%;top:-9%;object-fit:cover;z-index:0;
  will-change:transform}
.film::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,#FFFFFF 0%,rgba(255,255,255,0) 14%,rgba(26,61,92,.30) 46%,rgba(14,40,65,.86) 88%,#0E2841 100%)}
.film-mark{position:relative;z-index:2;font-size:clamp(26px,4.6vw,56px);
  letter-spacing:.012em;opacity:.92}

/* ---------- work ---------- */
.workgrp{margin-bottom:66px}
.workgrp:last-child{margin-bottom:0}
.workgrp h3{font-size:13.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  font-family:var(--sans);font-weight:600;padding-bottom:17px;border-bottom:1px solid var(--rule);
  margin-bottom:0}
.work{display:grid;grid-template-columns:minmax(250px,1fr) 2fr;gap:34px;
  padding:30px 0;border-bottom:1px solid var(--rule);align-items:start}
.workgrp .work:last-child{border-bottom:0}
.work h4{font-size:clamp(19px,2vw,24px);font-weight:400;line-height:1.34}
.work p{font-size:16.5px;color:var(--muted);line-height:1.72}

/* ---------- founder ---------- */
.founder{display:grid;grid-template-columns:1fr;gap:0}
.founder p{font-family:var(--serif);font-size:clamp(24px,3vw,38px);line-height:1.44;
  font-weight:400;max-width:32ch}
.founder .hl{color:var(--accent)}

/* ---------- footer ---------- */
footer{padding:80px 0 46px;font-size:15px;color:var(--muted);position:relative}
.foot-mark{font-size:clamp(22px,2.6vw,30px);color:var(--ink)}
.frow{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;
  padding-bottom:36px;border-bottom:1px solid var(--rule);margin-bottom:30px}
.fnav{display:flex;gap:28px;flex-wrap:wrap}
.fnav a{transition:color .5s}
.fnav a:hover{color:#fff}
.disc{font-size:13.5px;line-height:1.75;opacity:.78;max-width:86ch}

/* ---------- reveal: fails VISIBLE ---------- */
.rv{opacity:1;transform:none}
.js-anim .rv{opacity:0;transform:translateY(12px);
  transition:opacity 1.4s cubic-bezier(.2,.7,.2,1),transform 1.4s cubic-bezier(.2,.7,.2,1)}
.js-anim .rv.in{opacity:1;transform:none}
.js-anim .rv.d1{transition-delay:.06s}.js-anim .rv.d2{transition-delay:.12s}
.js-anim .rv.d3{transition-delay:.18s}

@media (max-width:1050px){
  .grid.c3{grid-template-columns:repeat(2,1fr)}
  .proof{grid-template-columns:repeat(2,1fr)}
  .work{grid-template-columns:1fr;gap:10px}
  .shead{flex-direction:column;align-items:flex-start;gap:18px}
  #rail{display:none}
}
@media (max-width:720px){
  body{font-size:17.5px}
  .hero .lede,.shead h2,.cell p,.founder p,.work p,.disc,.pf .lbl{max-width:100%}
  .hero h1{max-width:100%;font-size:clamp(42px,10.8vw,64px)}
  .hero .wrap{padding-bottom:110px}
  .hero .cta{gap:18px;row-gap:16px}
  .quiet{white-space:nowrap}
  /* the halo's horizontal bleed is wider than a phone gutter */
  .bub::before{inset:-16px -18px;filter:blur(20px);border-radius:34px}
  .film{height:clamp(300px,52vh,420px)}
  .band{padding:clamp(64px,13vw,96px) 0}
  .shead{margin-bottom:40px}
  .film video{display:none}
  .film{background:var(--navy) url(poster.jpg) center/cover no-repeat}
  .grid.c3,.proof,.stats{grid-template-columns:1fr}
  .itembd ul{columns:1;padding-left:34px}
}
/* Nav collapses earlier than the rest of the layout. The wordmark is set type rather
   than a logo image, so it is wider, and three uppercase links at 12.5px need ~676px
   beside it — more than the gutters leave at 730px. Measured, not guessed. */
@media (max-width:860px){
  #nav{position:fixed;inset:84px 0 auto 0;background:rgba(14,40,65,.98);backdrop-filter:blur(16px);
      flex-direction:column;gap:0;padding:10px var(--gut) 20px;display:none;align-items:stretch}
  #nav.show{display:flex}
  #nav a{padding:15px 16px;font-size:14px;width:100%;margin-bottom:6px}
  .navtoggle{display:block}
}
@media (max-width:420px){
  .navbar .wordmark{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .js-anim .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ===========================================================================
   V2 ADDITIONS — the two-box entry structure
   Everything above this line is the original single-page stylesheet, unchanged.
   Everything below is new: the landing "gate" with its two entry boxes, plus the
   long-form components the independent-consultant page needs (reading column,
   two-sided ledger, comparison table, bios).
   ======================================================================== */

/* ---------- the gate: two entry boxes ----------
   One screen, one decision. No nav links here on purpose — a chooser that also
   offers a menu isn't a chooser. The only way out of this page is through one of
   the two boxes, which is the entire point of the structure. */
.gate{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;
  overflow:hidden;isolation:isolate;padding:clamp(88px,12vh,130px) 0 clamp(40px,7vh,80px);
  background:var(--navy) url(poster.jpg) center/cover no-repeat}
#gatevid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* Heavy enough that white type clears AA contrast over any frame of the footage,
   light enough that the water is still legibly water. The boxes carry their own
   scrim, so this layer does not have to do the contrast work on its own. */
.gate::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,28,46,.74) 0%,rgba(14,40,65,.34) 40%,rgba(9,28,46,.62) 100%),
             linear-gradient(100deg,rgba(9,28,46,.52) 0%,rgba(9,28,46,.16) 58%,transparent 94%)}
.gate .wrap{z-index:3;width:100%}
.gate-top{text-align:center;margin-bottom:clamp(34px,5.5vh,64px)}
.gate-top .wordmark{font-size:clamp(30px,5vw,52px);letter-spacing:.012em}
.gate-line{margin-top:20px;color:rgba(255,255,255,.88);font-weight:300;
  font-size:clamp(16px,1.7vw,20px);max-width:58ch;margin-left:auto;margin-right:auto;line-height:1.6}

/* the boxes themselves */
.boxes{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px)}
.box{position:relative;display:flex;flex-direction:column;
  padding:clamp(28px,3.2vw,48px);border:1px solid rgba(255,255,255,.22);
  background:rgba(9,28,46,.66);backdrop-filter:blur(7px);
  transition:background .6s ease,border-color .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.box:hover{background:rgba(14,40,65,.52);border-color:var(--sky-blue);transform:translateY(-4px)}
.box::before{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--sky-blue);
  transition:width .8s cubic-bezier(.2,.8,.2,1)}
.box:hover::before{width:100%}
.box .d-for{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sky-blue)}
.box h2{margin:20px 0 0;color:#fff;font-size:clamp(25px,2.9vw,38px);line-height:1.18;font-weight:400}
.box p{margin-top:16px;color:rgba(255,255,255,.86);font-size:clamp(15.5px,1.4vw,17.5px);
  line-height:1.66;font-weight:300;flex:1}
.box .enter{margin-top:28px;display:inline-flex;align-items:center;gap:11px;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#fff}
.box .enter i{font-style:normal;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.box:hover .enter i{transform:translateX(7px)}
/* Side by side the two boxes should read as one object, which means the body copy has
   to start on the same line in both. It does not by default: "Creating Waves of Growth"
   sets on one line and "Build the firm you always wished existed." on two, so the left
   paragraph floated a line higher than the right. Reserving two lines of headline in
   both boxes levels the start of the copy; the call to action was already level,
   because `flex:1` on the paragraph pushes it to the bottom of either box.
   2.36em = two lines at the headline's own 1.18 line-height, so it tracks the clamp
   rather than pinning a pixel height. Only applied while the boxes are side by side —
   stacked on a phone there is nothing to line up, and the reserved space would just
   read as a gap. */
@media (min-width:901px){
  .box h2{min-height:2.36em}
}

/* audience switcher that rides in the nav on the two interior pages */
#nav a.alt{border-color:rgba(91,179,214,.55);color:var(--sky-blue)}
body:not(.deep):not(.athero) header:not(.solid) #nav a.alt{color:var(--steel-blue);
  border-color:rgba(43,95,138,.45);background:rgba(255,255,255,.45)}

/* ---------- long-form reading column ---------- */
.prose{max-width:68ch}
.prose.mid{margin-left:auto;margin-right:auto}
.prose > * + *{margin-top:1.4em}
.prose p{font-size:clamp(17px,1.35vw,19.5px);line-height:1.8}
.prose .lead{font-size:clamp(19.5px,2vw,25px);line-height:1.62;font-weight:300}
.prose strong{font-weight:600;color:var(--ink)}
.prose em{font-style:italic}

/* ---------- the two ledgers ---------- */
.ledger{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);
  transition:background-color .7s ease}
.led{background:var(--surface);padding:clamp(28px,3vw,46px);transition:background-color .9s ease}
.led h3{font-size:clamp(20px,2.2vw,27px);font-weight:400;padding-bottom:18px;
  border-bottom:1px solid var(--rule)}
.led ul{list-style:none;margin:24px 0 0;padding:0}
.led li{position:relative;padding-left:32px;margin-bottom:18px;font-size:16.5px;
  color:var(--muted);line-height:1.68}
.led li:last-child{margin-bottom:0}
.led li strong{color:var(--ink);font-weight:600}
.led li::before{position:absolute;left:0;top:-1px;font-size:17px;color:var(--accent);
  font-weight:600;line-height:1.68}
.led.gain li::before{content:"+"}
/* Both columns list things worth having — the headings carry the distinction, and a
   matching mark is the point: the section argues you can have the two together. */
.led.give li::before{content:"+"}

/* ---------- pull quote ---------- */
.pull{border-left:2px solid var(--accent);padding-left:clamp(22px,3vw,44px);max-width:64ch}
.pull p{font-family:var(--serif);font-size:clamp(21px,2.6vw,33px);line-height:1.46;font-weight:400}
.pull .attr{margin-top:24px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);font-family:var(--sans)}

/* ---------- comparison table ---------- */
.cmpwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{width:100%;border-collapse:collapse;font-size:16.5px;min-width:560px}
.cmp th,.cmp td{text-align:left;padding:19px 22px;border-bottom:1px solid var(--rule);
  vertical-align:top;transition:border-color .7s ease}
.cmp thead th{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);font-weight:600;border-bottom-width:1px}
.cmp tbody th{font-weight:400;color:var(--muted);font-size:15.5px;width:26%}
.cmp td{color:var(--muted)}
.cmp td.ov{color:var(--ink);font-weight:500;background:var(--surface);
  transition:background-color .9s ease,color .7s ease}

/* ---------- bios ---------- */
.bios{display:grid;gap:1px;background:var(--rule);transition:background-color .7s ease}
.bio{background:var(--surface);padding:clamp(26px,3vw,44px);display:grid;
  grid-template-columns:minmax(220px,1fr) 2fr;gap:clamp(18px,3vw,38px);align-items:start;
  transition:background-color .9s ease}
.bio h3{font-size:clamp(20px,2.1vw,27px);font-weight:400;line-height:1.24}
.bio .role{display:block;margin-top:10px;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.bio p{font-size:16.5px;color:var(--muted);line-height:1.72}

/* ---------- benefit / criteria cards ---------- */
.checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--rule);transition:background-color .7s ease}
.checks li{background:var(--surface);padding:clamp(24px,2.7vw,38px);transition:background-color .9s ease}
.checks li:hover{background:var(--surface-hi)}
.checks b{display:block;font-family:var(--serif);font-size:clamp(19px,2vw,25px);
  font-weight:400;margin-bottom:11px;line-height:1.26}
.checks span{font-size:16.5px;color:var(--muted);line-height:1.68;display:block}

/* ---------- closing call ---------- */
.cta-band{text-align:center}
.cta-band h2{font-size:clamp(30px,4.6vw,56px);max-width:21ch;margin:0 auto;line-height:1.14}
.cta-band .sub{margin:26px auto 0;max-width:56ch;color:var(--muted);
  font-size:clamp(17px,1.5vw,20px);line-height:1.7}
.cta-band .cta{margin-top:42px;display:flex;gap:26px;flex-wrap:wrap;justify-content:center;align-items:center}
.cta-band .quiet{color:var(--muted);border-bottom-color:var(--rule)}
.cta-band .quiet:hover{color:var(--ink);border-bottom-color:var(--ink)}
.sig{margin-top:44px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}

/* ---------- v2 responsive ---------- */
@media (max-width:900px){
  .boxes{grid-template-columns:1fr;gap:14px}
  .box{padding:26px 24px}
  .box p{font-size:16px}
  .gate{padding-top:clamp(74px,11vh,110px);align-items:flex-start}
  .ledger{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr}
  .bio{grid-template-columns:1fr;gap:12px}
}
@media (max-width:720px){
  .prose p{font-size:17px}
  .prose .lead{font-size:19px}
  .pull p{font-size:20px}
  /* On a phone the second box otherwise lands entirely below the fold, which hides
     half the choice this page exists to offer. Tightening the intro brings its top
     edge into view so it is obvious something follows. */
  .gate{padding-top:clamp(60px,9vh,86px);padding-bottom:26px}
  .gate-top{margin-bottom:24px}
  .gate-line{margin-top:15px}
  .box{padding:24px 22px}
}

/* The client page now carries five nav items (the audience switcher plus "Where We
   Come In"), which needs roughly 1,090px beside the wordmark. Measured, not guessed:
   below 1260px the gutters no longer leave that much, so the bar collapses to the
   hamburger instead of overflowing. */
@media (max-width:1260px){
  #nav{position:fixed;inset:84px 0 auto 0;background:rgba(14,40,65,.98);backdrop-filter:blur(16px);
      flex-direction:column;gap:0;padding:10px var(--gut) 20px;display:none;align-items:stretch}
  #nav.show{display:flex}
  #nav a{padding:15px 16px;font-size:14px;width:100%;margin-bottom:6px}
  .navtoggle{display:block}
}

/* The proof strip is five columns on the client page; the partner page has four.
   And an odd-numbered card grid would otherwise leave a bare cell showing the rule
   colour, so the last card spans instead. */
.proof.c4{grid-template-columns:repeat(4,1fr)}
.checks li:last-child:nth-child(odd){grid-column:1/-1}
@media (max-width:1050px){ .proof.c4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:720px){ .proof.c4{grid-template-columns:1fr} }

/* ---------- crossover band ----------
   The client site is the front door now, so the consultant path needs one clear,
   deliberate entrance rather than a splash screen everyone has to walk through.
   Ruled top and bottom so it reads as a change of address — a different audience
   being spoken to — rather than as another content section. */
.crossover{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:clamp(38px,5vw,62px) 0;display:flex;align-items:center;
  justify-content:space-between;gap:clamp(22px,4vw,56px);flex-wrap:wrap;
  transition:border-color .7s ease}
.crossover .cx-txt{flex:1 1 340px}
.crossover .cx-k{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);display:block}
.crossover h3{font-family:var(--serif);font-size:clamp(23px,2.8vw,34px);font-weight:400;
  margin:15px 0 0;line-height:1.2}
.crossover p{margin-top:13px;color:var(--muted);font-size:16.5px;line-height:1.66;max-width:54ch}
.crossover .cx-go{flex:0 0 auto;display:inline-flex;align-items:center;gap:12px;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--ink);border-bottom:1px solid var(--rule);padding-bottom:6px;
  transition:color .5s,border-color .5s}
.crossover .cx-go i{font-style:normal;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.crossover .cx-go:hover{border-bottom-color:var(--accent)}
.crossover .cx-go:hover i{transform:translateX(7px)}
@media (max-width:720px){
  .crossover{padding:34px 0}
  .crossover h3{font-size:22px}
}

/* ---------- engagement stages ----------
   A chevron flow rather than a row of cards. Each stage is clipped to an arrow whose
   point nests into the notch of the one after it, so the eye is carried left to right
   through the lifecycle without needing a drawn connector. The sliver of daylight
   between them is the page itself showing through, which means the separator keeps
   pace with the scroll descent instead of carrying its own colour. Below 1050px the
   row becomes a column and the arrows turn to point down, for the same reason. */
.stages{display:flex;align-items:stretch;--pt:clamp(22px,2.8vw,40px);--cg:3px}

/* --pt is the depth of the point. Horizontal padding has to clear it on both sides or
   the longest line of text runs into the bevel at the vertical midpoint. */
.stage{flex:1 1 0;min-width:0;position:relative;background:var(--surface);
  margin-left:calc(var(--cg) - var(--pt));
  padding:clamp(26px,2.6vw,36px) calc(var(--pt) + 16px) clamp(30px,2.8vw,40px)
          calc(var(--pt) + 30px);
  clip-path:polygon(0 0,calc(100% - var(--pt)) 0,100% 50%,calc(100% - var(--pt)) 100%,
    0 100%,var(--pt) 50%);
  transition:background-color .9s ease}
/* the first stage has nothing to nest into, so it keeps a flat left edge */
.stage:first-child{margin-left:0;padding-left:clamp(26px,2.6vw,36px);
  clip-path:polygon(0 0,calc(100% - var(--pt)) 0,100% 50%,calc(100% - var(--pt)) 100%,0 100%)}
.stage:hover{background:var(--surface-hi)}

/* An arrowhead sitting just inside each notch. The bevel alone is a slant; this is what
   makes the row read as chevrons pointing somewhere. It has to go a few pixels to the
   RIGHT of the notch apex, because everything to the left of that apex is clipped away.
   The first stage has no notch, so it has no mark. */
.stage::after{content:"";position:absolute;left:calc(var(--pt) + 4px);top:50%;
  width:11px;height:11px;border-top:1.5px solid var(--accent);
  border-right:1.5px solid var(--accent);
  transform:translateY(-50%) rotate(45deg);
  transition:transform .45s cubic-bezier(.2,.7,.3,1),border-color .5s}
.stage:first-child::after{display:none}
.stage:hover::after{transform:translateY(-50%) translateX(5px) rotate(45deg)}

.stage .sn{display:flex;align-items:center;justify-content:center;
  width:35px;height:35px;border:1px solid var(--accent);color:var(--accent);
  border-radius:50%;font-size:11.5px;letter-spacing:.06em;
  margin-bottom:22px;transition:background-color .5s,color .5s,border-color .5s}
.stage:hover .sn{background:var(--accent);color:var(--surface)}
.stage h3{font-size:clamp(18px,2vw,24px);font-weight:400;line-height:1.26;margin:0 0 12px}
.stage p{font-size:15.5px;color:var(--muted);line-height:1.68}
/* Stage four's heading takes two lines where the other three take one, which would drop
   its sentence a line below the rest of the row. Reserving two lines on every heading
   lines the four columns up. Wide layout only: stacked, there is no row to align to and
   the reserved line is just a hole. */
@media (min-width:1051px){
  .stage h3{min-height:2.52em}
}

/* The shared reveal lifts elements up from below. Here they should arrive from the left
   instead, so the four chevrons cascade in the direction they point. The d1/d2/d3 delays
   already on the markup supply the stagger. */
.js-anim .stages .rv{transform:translateX(-20px)}
.js-anim .stages .rv.in{transform:none}

@media (max-width:1050px){
  .stages{flex-direction:column;--pt:22px}
  .stage{margin-left:0;margin-top:calc(var(--cg) - var(--pt));
    padding:calc(var(--pt) + 20px) clamp(22px,4vw,32px) calc(var(--pt) + 22px);
    clip-path:polygon(0 0,50% var(--pt),100% 0,100% calc(100% - var(--pt)),50% 100%,
      0 calc(100% - var(--pt)))}
  .stage:first-child{margin-top:0;padding-top:clamp(22px,4vw,32px);
    padding-left:clamp(22px,4vw,32px);
    clip-path:polygon(0 0,100% 0,100% calc(100% - var(--pt)),50% 100%,
      0 calc(100% - var(--pt)))}
  /* the notch is now along the top edge, so the arrowhead turns to point down with it */
  .stage::after{left:50%;top:calc(var(--pt) + 2px);
    transform:translateX(-50%) rotate(135deg)}
  .stage:hover::after{transform:translateX(-50%) translateY(5px) rotate(135deg)}
  /* the horizontal entrance is wrong once the arrows point down */
  .js-anim .stages .rv{transform:translateY(12px)}
}

@media (prefers-reduced-motion:reduce){
  .js-anim .stages .rv{transform:none}
}