:root{
  --navy:#213983; --navy-d:#16265A; --deep:#0A1628;
  --ink:#111A2B; --mute:#4E5A73; --line:#E6E4DF; --line-2:#F0EEE9;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#fff;color:var(--ink);font-family:'Inter',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  letter-spacing:normal;
  font-weight:400;font-size:18px;line-height:1.52;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.serif{font-family:'Inter',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;font-weight:500;letter-spacing:-.03em}
h1,h2,h3{font-family:'Inter',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-weight:600;letter-spacing:-.035em;line-height:1.04;color:var(--deep)}
h1{font-size:clamp(38px,5.6vw,70px);letter-spacing:-.042em;line-height:1.0}
h2{font-size:clamp(27px,3.9vw,48px);line-height:1.06;letter-spacing:-.034em}
h3{font-size:clamp(20px,2.1vw,26px);line-height:1.2;letter-spacing:-.024em}

.wrap{max-width:1180px;margin:0 auto;padding:0 40px}
.mute{color:var(--mute)}
.lede{font-size:24px;line-height:1.38;color:var(--ink);max-width:40ch;font-weight:400;letter-spacing:-.008em}
.lede.strong{font-weight:600;letter-spacing:-.018em;color:var(--deep)}
p{max-width:64ch}
section{border-top:1px solid var(--line)}
.pad{padding:clamp(34px,4vw,48px) 0}
.pad-s{padding:clamp(26px,3vw,38px) 0}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.nav .in{max-width:1180px;margin:0 auto;padding:0 40px;height:70px;display:flex;
  align-items:center;justify-content:space-between}
.nav .logo img{height:18px;width:auto}
.nav ul{display:flex;gap:30px;list-style:none;align-items:center}
.nav a{font-size:13.5px;color:#46516A;transition:color .15s}
.nav a:hover,.nav a.on{color:var(--navy)}
.nav .book{border:1px solid var(--navy);background:var(--navy);padding:8px 17px;font-size:13px;color:#fff}
.nav .book:hover{background:#C3DAF7;color:var(--deep);border-color:#C3DAF7}
.navtog{display:none;background:none;border:0;font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);cursor:pointer}

/* hero */
.hero{position:relative;overflow:hidden;border-top:0}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero .veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.66) 40%,rgba(255,255,255,.22) 100%)}
.hero .in{position:relative;z-index:2;padding:clamp(76px,11vw,148px) 0 clamp(30px,4vw,48px)}
.hero h1{max-width:13ch}
.hero .sub{margin-top:28px;font-size:18px;line-height:1.55;max-width:42ch;color:var(--mute)}
.acts{margin-top:38px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.btn{display:inline-block;background:var(--navy);color:#fff;font-size:14px;letter-spacing:.02em;
  padding:15px 30px;transition:background .15s}
.btn:hover{background:#C3DAF7;color:var(--deep)}
.lnk{font-size:14.5px;color:var(--navy);border-bottom:1px solid rgba(33,57,131,.32);padding-bottom:3px}
.lnk:hover{border-color:var(--navy)}

/* counter, three stat row */
.count{position:relative;z-index:2;border-top:1px solid rgba(33,57,131,.16);
  margin-top:clamp(34px,5vw,58px);padding:clamp(26px,3.4vw,38px) 0 clamp(46px,6vw,76px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,46px)}
.count .stat{display:flex;flex-direction:column;gap:12px}
.count .stat + .stat{padding-left:clamp(22px,3vw,46px);border-left:1px solid rgba(33,57,131,.12)}
.count .n{font-family:'Inter',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-weight:600;font-size:clamp(38px,5.2vw,70px);line-height:.95;letter-spacing:-.05em;
  color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.count .n .u{font-size:.46em;letter-spacing:-.02em;margin-left:.12em;color:var(--navy)}
.count .c{font-size:clamp(12.5px,1.05vw,14.5px);color:var(--mute);line-height:1.5;
  max-width:none;white-space:nowrap}
@media(max-width:860px){
  .count{grid-template-columns:1fr;gap:0}
  .count .stat{padding:20px 0}
  .count .stat + .stat{padding-left:0;border-left:0;border-top:1px solid rgba(33,57,131,.12)}
  .count .n{font-size:clamp(40px,11vw,56px)}
}

/* generic blocks */
.stmt h2{max-width:17ch}
.stmt p{margin-top:24px;font-size:18px;line-height:1.52;color:var(--ink)}
.grid2{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(34px,6vw,86px)}
.svc{border-top:1px solid var(--line);padding:30px 0;
  display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:clamp(28px,3.4vw,52px);align-items:start}
.svc:first-of-type{border-top:0}
.svc h3{margin-bottom:10px}
.svc p{color:var(--ink);font-size:18px;max-width:62ch}
.svc .ph{grid-column:2;grid-row:1/span 2;align-self:start}
.svc-txt{grid-column:1}
@media(max-width:820px){
  .svc{grid-template-columns:1fr;gap:20px}
  .svc .ph{grid-column:1;grid-row:auto;width:100%;max-width:300px}
}
.steps{counter-reset:s}
.step{display:grid;grid-template-columns:52px 1fr;gap:22px;border-top:1px solid var(--line);padding:26px 0}
.step:first-of-type{border-top:0}
.step h3{margin-bottom:8px}
.step p{color:var(--ink);font-size:17px}

/* results table */
.tbl{width:100%;border-collapse:collapse;margin-top:8px}
.tbl th{font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:#5A6478;text-align:left;padding:0 18px 13px 0;
  border-bottom:1px solid var(--deep);white-space:nowrap}
.tbl th.r,.tbl td.r{text-align:right;padding-right:0}
.tbl td{padding:20px 18px 20px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.tbl tr:hover td{background:#FAFAF8}
.tbl .who{font-size:18px;color:var(--deep)}
.tbl .who a{border-bottom:1px solid rgba(33,57,131,.25)}
.tbl .who a:hover{color:var(--navy)}
.tbl .meta{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;color:#5A6478;letter-spacing:.02em;
  display:block;margin-top:5px;text-transform:uppercase}
.tbl .fig{font-variant-numeric:tabular-nums;font-size:16px;font-weight:500;color:var(--ink);white-space:nowrap}
.tbl .fig.hi{color:var(--deep)}
.tbl th:last-child,.tbl td:last-child{width:104px;min-width:104px;padding-left:26px}
.tbl .mult{font-family:'Inter',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-weight:600;font-size:27px;color:var(--navy);letter-spacing:-.03em;white-space:nowrap;
  display:inline-block;line-height:1}
.tblnote{margin-top:22px;font-size:14px;color:#5A6478;max-width:74ch;line-height:1.62}

/* case cards */
.case{border-top:1px solid var(--line);padding:34px 0;display:grid;
  grid-template-columns:220px minmax(0,1fr) 190px;gap:38px;align-items:start}
.case h3{margin-bottom:11px}
.case p{color:var(--ink);font-size:18px;max-width:60ch}
.case .side{font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:500;letter-spacing:.075em;
  text-transform:uppercase;color:#5A6478;line-height:1.95;text-align:right}
.case .side b{display:block;color:var(--navy);font-weight:700;font-size:14px;letter-spacing:.03em;margin-top:6px}

/* writing */
.post{border-top:1px solid var(--line);padding:28px 0;display:grid;grid-template-columns:200px minmax(0,1fr) 150px;gap:30px;align-items:start}
.post h3{margin-bottom:9px}
.post p{color:var(--ink);font-size:17px;max-width:60ch}
.post .m{font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:500;letter-spacing:.075em;
  text-transform:uppercase;color:#5A6478;text-align:right;line-height:1.9}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(34px,6vw,76px);align-items:start}
.port{aspect-ratio:4/5;background:linear-gradient(168deg,#EEF0F4,#DCE1EA);position:relative;overflow:hidden}
.port img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}

/* close band */
.close{background:var(--deep);border-top:0}
.close h2{color:#fff}
.close p{color:#AEB7C7;margin-top:22px;font-size:18px}
.close .btn{background:#fff;color:var(--deep);margin-top:34px}
.close .btn:hover{background:#C3DAF7;color:var(--deep)}

/* footer */
footer{background:var(--deep);color:#AEB7C7;font-size:16px;font-weight:450;letter-spacing:-.003em;
  border-top:1px solid rgba(255,255,255,.08)}
footer .in{max-width:1180px;margin:0 auto;padding:56px 40px 44px}
footer a:hover{color:#fff}
footer ul{list-style:none;line-height:2}

@media(max-width:900px){
  .grid2,.about,.case,.post{grid-template-columns:1fr;gap:22px}
  .case .side,.post .m{text-align:left}
  .wrap,.nav .in,footer .in{padding-left:22px;padding-right:22px}
  .nav ul{display:none}
  .nav ul.open{display:flex;position:absolute;top:70px;left:0;right:0;background:#fff;
    flex-direction:column;gap:0;padding:8px 22px 20px;border-bottom:1px solid var(--line)}
  .nav ul.open li{padding:11px 0;border-top:1px solid var(--line-2)}
  .navtog{display:block}
  .tbl th:nth-child(2),.tbl td:nth-child(2){display:none}
}

/* results table, stacked on phones */
@media(max-width:620px){
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block}
  .tbl thead{display:none}
  .tbl tr{border-bottom:1px solid var(--line);padding:24px 0 26px}
  .tbl tbody tr:first-child{border-top:1px solid var(--deep)}
  .tbl tr:hover td{background:none}
  .tbl td{border:0;padding:0}
  .tbl th:last-child,.tbl td:last-child{width:auto;min-width:0;padding-left:0}
  .tbl td.mult{display:block}
  .tbl th:nth-child(2),.tbl td:nth-child(2){display:block}
  .tbl td.na{display:none}
  .tbl .who{font-size:20px;margin-bottom:13px}
  .tbl .who .meta{display:block;margin-top:5px;font-size:10.5px}
  .tbl td[data-l]{padding:7px 0;text-align:right;overflow:hidden}
  .tbl td[data-l]::before{content:attr(data-l);float:left;font-family:'IBM Plex Mono',monospace;
    font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#5A6478;line-height:2.1}
  .tbl td[data-l] .meta{display:inline;margin:0 0 0 7px;font-size:11px;font-weight:500}
  .tbl .fig{font-size:17px}
  .tbl .mult{font-size:22px;line-height:1.3}
}

/* ============================================================
   v2, September 23. Impact pass.
   ============================================================ */

/* --- 1. FIX: multiplier column was clipping the × off the edge --- */
.tbl th:last-child,.tbl td:last-child{width:140px;min-width:140px;padding-left:22px;padding-right:0}
.tbl td:last-child{vertical-align:middle}
.tbl .mult{font-size:30px;line-height:1}
@media(max-width:620px){
  .tbl th:last-child,.tbl td:last-child{width:auto;min-width:0;padding-left:0}
  .tbl .mult{font-size:22px;line-height:1.3}
}

/* --- 2. HERO: was an invisible video under a white veil. Now inverted onto Ink. --- */
.hero{background:var(--deep);min-height:calc(100svh - 70px);display:flex;flex-direction:column;
  justify-content:center}
.hero video{filter:invert(1) brightness(1.5) contrast(1.15);mix-blend-mode:screen;opacity:.9}
.hero .veil{background:
  radial-gradient(120% 90% at 8% 40%,rgba(10,22,40,.92) 0%,rgba(10,22,40,.72) 42%,rgba(10,22,40,.30) 100%),
  linear-gradient(180deg,rgba(10,22,40,.55) 0%,rgba(10,22,40,0) 30%,rgba(10,22,40,.60) 100%)}
.hero .in{padding:clamp(56px,7vw,96px) 0 clamp(20px,2.4vw,34px)}
.hero h1{color:#fff;font-size:clamp(44px,8.6vw,124px);letter-spacing:-.045em;max-width:11ch;
  font-weight:500;line-height:.98}
.hero .sub{color:#B9C3D4;font-size:clamp(17px,1.5vw,21px);max-width:44ch;margin-top:clamp(20px,2.4vw,30px)}
.hero .btn{background:#fff;color:var(--deep)}
.hero .btn:hover{background:#C3DAF7;color:var(--deep)}
.hero .lnk{color:#fff;border-bottom-color:rgba(255,255,255,.38)}
.hero .lnk:hover{border-bottom-color:#fff}

/* stat row, now sitting inside the dark hero and much larger */
.hero .count{border-top:1px solid rgba(255,255,255,.16);
  padding:clamp(24px,3vw,34px) 0 clamp(8px,1.6vw,20px)}
.hero .count .stat + .stat{border-left-color:rgba(255,255,255,.14)}
.hero .count .n{color:#fff;font-size:clamp(42px,6.4vw,92px)}
.hero .count .c{color:#fff;font-weight:500}

/* --- 3. Two column sections had a dead void under the left heading. Pin it. --- */
@media(min-width:901px){
  .grid2 > div:first-child{position:sticky;top:118px;align-self:start}
}

/* --- 4. Scroll reveal --- */
@media(prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(18px);
    transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
  .rv.in{opacity:1;transform:none}
  .tbl tbody tr{opacity:0;transform:translateY(12px);
    transition:opacity .55s ease,transform .55s ease}
  .tbl.in tbody tr{opacity:1;transform:none}
  .tbl.in tbody tr:nth-child(1){transition-delay:.05s}
  .tbl.in tbody tr:nth-child(2){transition-delay:.14s}
  .tbl.in tbody tr:nth-child(3){transition-delay:.23s}
  .tbl.in tbody tr:nth-child(4){transition-delay:.32s}
}

/* --- 5. Section rhythm: the record deserves more presence --- */
.stmt h2{max-width:15ch}

/* hero became a flex column, so `.wrap { margin:0 auto }` shrank to content
   and pulled the stat row out of alignment with the headline. */
.hero > *{width:100%}

/* ============================================================
   v3, September 23. Logo, header scale, hero right side.
   ============================================================ */

/* --- logo doubled, header grown to hold it --- */
.nav .in{height:84px}
.nav .logo img{height:38px}

/* --- header text up 50%: 13.5 -> 20, button 13 -> 19 --- */
.nav a{font-size:20px}
.nav ul{gap:34px}
.nav .book{font-size:19px;padding:11px 24px}
.navtog{font-size:16px;letter-spacing:.12em;min-height:44px;min-width:48px;
  display:none;align-items:center;justify-content:flex-end;padding:0;margin-right:-2px}
@media(max-width:900px){.navtog{display:flex}}
.nav .logo{display:inline-flex;align-items:center;min-height:44px}

.hero{min-height:calc(100svh - 84px)}
@media(min-width:901px){ .grid2 > div:first-child{top:132px} }
@media(max-width:900px){
  .nav ul.open{top:84px}
  .nav ul.open li{padding:13px 0}
}

/* --- hero right side: the loop was there but too faint to read --- */
.hero video{filter:invert(1) brightness(2.1) contrast(1.22) saturate(1.15);opacity:1;
  transform-origin:72% 50%}
.hero .veil{background:
  radial-gradient(135% 105% at 2% 46%,
    rgba(10,22,40,.94) 0%, rgba(10,22,40,.80) 30%,
    rgba(10,22,40,.42) 60%, rgba(10,22,40,.10) 100%),
  linear-gradient(180deg,rgba(10,22,40,.50) 0%,rgba(10,22,40,0) 26%,rgba(10,22,40,.55) 100%)}

@media(prefers-reduced-motion:no-preference){
  .hero video{animation:drift 42s ease-in-out infinite alternate}
  @keyframes drift{
    from{transform:scale(1.05) translate3d(0,0,0)}
    to{transform:scale(1.15) translate3d(-2.4%,-1.6%,0)}
  }
}

/* second, mirrored copy of the loop so the right half is not half empty */
.hero video.l2{opacity:.62;transform:scaleX(-1) scale(1.12);transform-origin:38% 46%}
@media(prefers-reduced-motion:no-preference){
  .hero video.l2{animation:drift2 61s ease-in-out infinite alternate}
  @keyframes drift2{
    from{transform:scaleX(-1) scale(1.10) translate3d(0,0,0)}
    to{transform:scaleX(-1) scale(1.20) translate3d(-3%,2%,0)}
  }
}

/* ============================================================
   v4. Fixes the seam, and slows the drift right down.
   ============================================================ */

/* The seam: layer 2 was mirrored about 38%, so scaleX(-1) mapped its right
   edge to -30% and its left edge to only 80%. Everything past 80% of the
   hero got no layer 2 at all, and the screen blend made that boundary read
   as a hard vertical line with a darker field beyond it.
   Mirroring about dead centre makes the flip symmetrical, so it always covers. */
.hero video.l2{transform-origin:50% 50%;transform:scaleX(-1) scale(1.12)}

/* Belt and braces: both layers get a floor scale with margin to spare, and
   the hero paints its own ground so no gap can ever show a different colour. */
.hero{background-color:var(--deep)}
.hero video{transform-origin:62% 50%;transform:scale(1.08);background:transparent}

/* Drift slowed from 42s and 61s to 132s and 187s, with the zoom range cut
   from 10 points to 6 so the motion reads as ambient rather than active. */
@media(prefers-reduced-motion:no-preference){
  .hero video{animation:drift 132s ease-in-out infinite alternate}
  @keyframes drift{
    from{transform:scale(1.08) translate3d(0,0,0)}
    to{transform:scale(1.14) translate3d(-1.4%,-0.9%,0)}
  }
  .hero video.l2{animation:drift2 187s ease-in-out infinite alternate}
  @keyframes drift2{
    from{transform:scaleX(-1) scale(1.12) translate3d(0,0,0)}
    to{transform:scaleX(-1) scale(1.18) translate3d(1.6%,-1.1%,0)}
  }
}

/* ============================================================
   v5. Nav hover rule, button arrow, one sentence per row.
   ============================================================ */

/* nav link hover: a rule that draws in from the left */
.nav ul a:not(.book){position:relative}
.nav ul a:not(.book)::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;
  transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.nav ul a:not(.book):hover::after,.nav ul a:not(.book).on::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  .nav ul a:not(.book)::after{transition:none}
}

/* arrow inside the button, nudges right on hover */
.btn{display:inline-flex;align-items:center;gap:13px}
.btn .arw{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .24s cubic-bezier(.22,.61,.36,1)}
.btn:hover .arw{transform:translateX(5px)}
@media(prefers-reduced-motion:reduce){ .btn .arw{transition:none} }

/* headings that must break one sentence per row, never mid sentence */
h1.rows,h2.rows{max-width:none}
h1.rows > span,h2.rows > span{display:block;text-wrap:balance}

/* the four steps section is gone, so .steps / .step are no longer used */

/* ============================================================
   v6. Hover timing to 0.6s. Colour only, the arrow stays quick.
   ============================================================ */
.nav ul a:not(.book)::after{transition:transform .6s cubic-bezier(.22,.61,.36,1)}

.nav .book{transition:background-color .6s ease,color .6s ease,border-color .6s ease}
.btn{transition:background-color .6s ease,color .6s ease}
.hero .btn,.close .btn{transition:background-color .6s ease,color .6s ease}

@media(prefers-reduced-motion:reduce){
  .nav ul a:not(.book)::after,.nav .book,.btn,.hero .btn,.close .btn{transition:none}
}

/* ============================================================
   v7. Nav down, hero actions up, headline animation,
       eyebrow titles bold and larger, link arrows, multiplier.
   ============================================================ */

/* --- nav back down 20 percent: 20 -> 16, button 19 -> 15 --- */
.nav a{font-size:16px}
.nav .book{font-size:15px;padding:10px 21px}
.nav ul{gap:30px}

/* --- hero actions up 30 percent: 14 -> 18, 14.5 -> 19 --- */
.hero .btn{font-size:18px;padding:17px 34px;gap:15px}
.hero .btn .arw{width:21px;height:21px}
.hero .lnk{font-size:19px}
.hero .lnk .arw{width:20px;height:20px}

/* --- the headline, two lines, "move." set one letter at a time --- */
.hero h1.hl{max-width:none}
.hero h1.hl .l1,.hero h1.hl .l2{display:block}
.hero h1.hl .l2 i{font-style:normal;display:inline-block}
@media(prefers-reduced-motion:no-preference){
  .hero h1.hl .l1{opacity:0;transform:translateY(14px);
    animation:hlIn 1s cubic-bezier(.22,.61,.36,1) .15s forwards}
  .hero h1.hl .l2 i{opacity:0;transform:translateY(16px);
    animation:hlIn .62s cubic-bezier(.22,.61,.36,1) forwards;
    animation-delay:calc(.95s + var(--i) * .105s)}
  @keyframes hlIn{to{opacity:1;transform:none}}
}

/* --- text links: arrow, plus a rule that draws in on hover only --- */
.lnk{display:inline-flex;align-items:center;gap:11px;position:relative;
  border-bottom:0;padding-bottom:4px}
.lnk .arw{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .32s cubic-bezier(.22,.61,.36,1)}
.lnk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.lnk:hover::after{transform:scaleX(1)}
.lnk:hover .arw{transform:translateX(6px)}
@media(prefers-reduced-motion:reduce){
  .lnk::after,.lnk .arw{transition:none}
}

/* --- multiplier: labelled column, and the figures set bold --- */
.tbl .mult{font-weight:600}

/* ============================================================
   v8. Hero actions back down, headline slowed and travelling,
       multiplier row rule realigned.
   ============================================================ */

/* --- back to the earlier sizes --- */
.hero .btn{font-size:14px;padding:15px 30px;gap:13px}
.hero .btn .arw{width:18px;height:18px}
.hero .lnk{font-size:14.5px}
.hero .lnk .arw{width:17px;height:17px}

/* --- the multiplier cell was vertical-align:middle, which stopped it
       stretching to the row height, so its bottom rule sat 23px high.
       Back to baseline like every other cell. --- */
.tbl td:last-child{vertical-align:baseline}

/* --- headline: slower fade, and "move." travels in from under "money" --- */
.hero h1.hl.anim .l1,.hero h1.hl.anim .l2 i{opacity:0}
@media(prefers-reduced-motion:no-preference){
  .hero h1.hl .l1{opacity:1;transform:none;animation:none}
  .hero h1.hl .l2 i{opacity:1;transform:none;animation:none}

  .hero h1.hl.ready .l1{
    animation:fadeUp 1.8s cubic-bezier(.22,.61,.36,1) .2s both}
  .hero h1.hl.ready .l2 i{
    animation:travelIn 1.15s cubic-bezier(.19,.72,.28,1) both;
    animation-delay:calc(1.55s + var(--i) * .22s)}

  @keyframes fadeUp{
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:none}
  }
  /* --dx is measured at runtime: the distance from each letter's final
     position back to the left edge of the word "money" above it */
  @keyframes travelIn{
    from{opacity:0;transform:translateX(var(--dx,6em))}
    16%{opacity:1}
    to{opacity:1;transform:none}
  }
}

/* The real cause of the uneven rule: `.mult` is the class on the <td>, and it
   carried display:inline-block. A cell that is not display:table-cell drops out
   of the row's height calculation, so its bottom border landed ~28px high.
   The phone layout still overrides this to block at 620px, which is intended. */
.tbl td.mult{display:table-cell;vertical-align:baseline;line-height:1.1}

/* ============================================================
   v9. "move." slowed again. Travel 1.15s -> 1.6s, stagger
   0.22s -> 0.3s, so the last character lands at about 4.35s.
   The stat counters are gated on that in index.html and do not
   start until the headline is finished.
   ============================================================ */
@media(prefers-reduced-motion:no-preference){
  .hero h1.hl.ready .l2 i{
    animation:travelIn 1.6s cubic-bezier(.17,.66,.26,1) both;
    animation-delay:calc(1.55s + var(--i) * .3s)}
}

/* Anchored case studies were landing under the sticky 84px header. */
.case,[id]{scroll-margin-top:112px}

/* body copy that breaks one sentence per row, same rule as the headings */
p.rows{max-width:none}
p.rows > span{display:block;text-wrap:balance}

/* candidate names: arrow appears on hover so the row reads as clickable.
   Positioned absolutely so it never widens the link or extends its underline. */
.tbl .who a{position:relative}
.tbl .who a .arw{position:absolute;left:100%;top:50%;margin-left:9px;
  width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none;
  opacity:0;transform:translate(-5px,-52%);
  transition:opacity .28s ease,transform .28s cubic-bezier(.22,.61,.36,1)}
.tbl .who a:hover .arw{opacity:1;transform:translate(0,-52%);color:var(--navy)}
@media(prefers-reduced-motion:reduce){ .tbl .who a .arw{transition:opacity .28s ease} }

/* "move." carried an italic when the display face was Fraunces. Inter italic
   reads as emphasis rather than movement, so the animation does that work alone. */
.hero h1.hl .l2,.hero h1.hl .l2 i{font-style:normal}

/* the close band button carries the same arrow behaviour as the hero */
.close .btn .arw{width:18px;height:18px}

/* hero subhead splits one sentence per row like the headings */
.hero .sub.rows{max-width:none}
.hero .sub.rows > span{display:block}

/* homepage insights carousel */
.ins-h{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px}
.ins-nav{display:flex;gap:10px;flex:0 0 auto}
.ins-arw{width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--navy);
  transition:border-color .35s ease,background .35s ease,opacity .35s ease}
.ins-arw svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.ins-arw:hover:not(:disabled){border-color:var(--navy);background:#F5F7FB}
.ins-arw:disabled{opacity:.28;cursor:default}

.ins-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 72px)/4);gap:24px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;padding-bottom:6px}
.ins-track::-webkit-scrollbar{display:none}
.ins-track:focus-visible{outline:2px solid var(--navy);outline-offset:6px}

.ins-card{scroll-snap-align:start;min-width:0;border:1px solid var(--line);background:#fff;
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .4s ease,box-shadow .4s ease}
.ins-card:hover{border-color:#CBD2DE;box-shadow:0 12px 34px rgba(16,28,48,.08)}
.ins-img{aspect-ratio:16/10;background:var(--deep);overflow:hidden}
.ins-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.ins-card:hover .ins-img img{transform:scale(1.045)}
.ins-body{padding:22px 22px 20px;display:flex;flex-direction:column;flex:1}
.ins-card h3{font-size:20px;line-height:1.16;font-weight:600;margin-bottom:10px;text-wrap:balance}
.ins-card p{color:var(--ink);font-size:15.5px;line-height:1.5;max-width:none;margin-bottom:18px}
.ins-card .m{margin-top:auto;display:flex;flex-direction:column;gap:7px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.05em;text-transform:uppercase;font-weight:600;color:#5A6478}
.ins-card .mtop{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rt{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.clk{width:12px;height:12px;flex:0 0 12px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.post .m .rt{margin-top:2px}

@media(max-width:1180px){.ins-track{grid-auto-columns:calc((100% - 48px)/3)}}
@media(max-width:900px){.ins-track{grid-auto-columns:calc((100% - 24px)/2)}}
@media(max-width:620px){
  .ins-track{grid-auto-columns:80%}
  .ins-card h3{font-size:19px}
}

/* phones: the multiplier cell must stack like every other cell.
   the desktop display:table-cell fix was leaking into the stacked layout
   and shrinking it to content width against the left edge. */
@media(max-width:620px){
  .tbl td.mult{display:block;width:auto;min-width:0;text-align:right;
    padding:7px 0;line-height:1.3;vertical-align:baseline}
}

/* footer, sectioned like the page */
footer .fcols{display:grid;grid-template-columns:1.35fr 1.1fr 1fr;gap:0}
footer .fcol{padding:0 46px;border-left:1px solid rgba(255,255,255,.14)}
footer .fcol:first-child{padding-left:0;border-left:0}
footer .fcol:last-child{padding-right:0}
footer h4{font-size:21px;line-height:1.24;letter-spacing:-.015em;text-transform:none;
  font-weight:600;color:#fff;margin:0 0 22px;max-width:14ch}
footer ul{list-style:none;line-height:1.95;margin:0}
footer a{color:#AEB7C7;font-weight:500;transition:color .35s ease}
footer .fcol ul a{font-weight:600;color:#E4E8EF}
footer a:hover{color:#fff}
footer .flnk{display:inline-flex;align-items:center;gap:10px;color:#fff;font-size:18px;font-weight:500}
footer .flnk .arw{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
footer .flnk:hover .arw{transform:translateX(5px)}

/* LinkedIn mark: outlined circle, all white, small glyph */
footer .fsoc{display:flex;gap:10px}
footer .fsoc a{width:32px;height:32px;border:1.5px solid #fff;border-radius:50%;background:none;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;
  transition:background .35s ease}
footer .fsoc svg{width:13px;height:13px;fill:#fff;display:block;transition:fill .35s ease}
footer .fsoc a:hover{background:#fff}
footer .fsoc a:hover svg{fill:var(--deep)}

footer .fbot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-top:56px;padding-top:0;border-top:0}
footer .fhome{display:inline-block;line-height:0;transition:opacity .35s ease}
footer .fhome:hover{opacity:1}
footer .fbot img{height:30px;opacity:.9;display:block;transition:opacity .35s ease}
footer .fhome:hover img{opacity:1}
footer .fmark{font-size:15px;font-weight:500;color:#AEB7C7;opacity:1;transition:color .35s ease}
footer a.fmark:hover{color:#fff}
@media(max-width:860px){
  footer .fcols{grid-template-columns:1fr 1fr;gap:38px 0}
  footer .fcol{padding:0 30px}
  footer .fcol:nth-child(odd){padding-left:0;border-left:0}
  footer .fcol:last-child{grid-column:1 / -1;padding-left:0;border-left:0;
    border-top:1px solid rgba(255,255,255,.14);padding-top:34px}
}
@media(max-width:560px){
  footer .fcols{grid-template-columns:1fr;gap:34px}
  footer .fcol{padding:0;border-left:0}
  footer .fcol + .fcol{border-top:1px solid rgba(255,255,255,.14);padding-top:30px}
  footer .fbot{flex-direction:column;align-items:flex-start;gap:16px}
}

/* contact column: social group, then details, then the question */
footer h4.q{margin-bottom:16px}

/* contact column rhythm: social marks, then the question, then the details */
footer .fsoc{margin:0 0 34px}
footer h4.q{margin-bottom:16px}
footer .flnk{margin:0 0 28px}
footer .fcontact{margin:0;line-height:2}
@media(max-width:560px){
  footer .fsoc{margin-bottom:28px}
  footer .flnk{margin-bottom:24px}
}

/* phones: thead is hidden, so the stacked table draws its own top rule.
   the section divider above it made two lines with dead space between. */
@media(max-width:620px){
  .tblsec{border-top:0;padding-top:34px}
}

/* one lead paragraph size, so the eye knows where a section starts */
.lead{font-size:24px;line-height:1.38;letter-spacing:-.008em;color:var(--ink);
  max-width:40ch;font-weight:400}
@media(max-width:620px){
  .lede,.lead{font-size:21px;line-height:1.4;max-width:none}
}

/* ---- photo slots -------------------------------------------------------
   Dashed frames marking where photography goes. Each carries the ratio and
   the pixel size to supply. Drop an <img> inside and the frame disappears. */
.ph{position:relative;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:18px;overflow:hidden;
  background:linear-gradient(168deg,#F2F4F8,#E2E7EF);
  border:1px dashed #B9C2D2;border-radius:2px}
.ph span{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.09em;
  line-height:2;text-transform:uppercase;color:#7A869C;max-width:38ch}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph:has(img){border:0;padding:0;background:var(--deep)}
.ph:has(img) span{display:none}
.ph-sq{aspect-ratio:1/1}
.ph-wide{aspect-ratio:16/9}
.ph-43{aspect-ratio:4/3}
.close .ph{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.22)}
.close .ph span{color:#8F99AC}

@media(max-width:900px){
  /* stack: photo first, then the copy, then the figures */
  .case{grid-template-columns:1fr;gap:22px}
  .case .side{text-align:left}
  .ph-sq{aspect-ratio:16/10;max-height:320px}
}
@media(max-width:620px){
  .ph span{font-size:9.5px;letter-spacing:.07em;line-height:1.9}
  .ph-wide{aspect-ratio:4/3}
}

/* money statement: copy beside a portrait */
.stmt-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(34px,5vw,72px);align-items:start}
.stmt-grid .ph{position:sticky;top:132px}
.ph-tall{aspect-ratio:4/5}
@media(max-width:900px){
  .stmt-grid{grid-template-columns:1fr;gap:34px}
  .stmt-grid .ph{position:static}
  .ph-tall{aspect-ratio:4/3}
}

/* insights list: the carousel image repeats beside each post */
.post-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--deep);
  border:0;line-height:0}
.post-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.post:hover .post-img img{transform:scale(1.04)}
@media(max-width:860px){
  .post{grid-template-columns:150px minmax(0,1fr);gap:20px}
  .post .m{grid-column:2;margin-top:4px}
}
@media(max-width:560px){
  .post{grid-template-columns:1fr;gap:16px}
  .post .m{grid-column:1}
  .post-img{aspect-ratio:16/9}
}

/* phones: a small portrait sits beside the name, and the big one steps aside */
.port-sm{display:none}
@media(max-width:900px){
  .abouthead{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
  .abouthead > div:first-child{min-width:0}
  .port-sm{display:block;flex:0 0 132px;aspect-ratio:4/5;overflow:hidden;
    background:linear-gradient(168deg,#EEF0F4,#DCE1EA)}
  .port-sm img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
  .about .port{display:none}
  .about{gap:0}
}
@media(max-width:420px){
  .port-sm{flex:0 0 108px}
}

/* page openers need air under the nav; everything after them does not */
.pad:first-of-type{padding-top:clamp(56px,6.6vw,88px)}
/* the close band is the one place generosity reads as intent */
.close.pad{padding:clamp(56px,6.4vw,84px) 0}
/* a heading block and the copy beside it should not drift apart */
.grid2,.about{align-items:start}

/* the hero already carries its own bottom padding; the section after it
   does not need to start from scratch */
.hero + section.pad{padding-top:clamp(30px,3.4vw,42px)}

/* Recent insights now sits in the arrow row as a real heading */
.ins-h h2{margin:0}
@media(max-width:620px){
  .ins-h{flex-direction:column;align-items:flex-start;gap:18px}
}

/* a solid LinkedIn mark sitting beside the name */
.namerow{display:flex;align-items:center;gap:clamp(12px,1.4vw,18px);margin-top:20px}
.namerow h1{margin:0}
.li-btn{position:relative;flex:0 0 auto;width:clamp(40px,3.8vw,54px);aspect-ratio:1;
  border-radius:11px;background:var(--deep);display:inline-flex;align-items:center;
  justify-content:center;transition:background .35s ease}
.li-btn > svg:not(.arw){width:52%;height:52%;fill:#fff;display:block;
  transition:opacity .28s ease,transform .45s cubic-bezier(.22,.61,.36,1)}
.li-btn:hover{background:var(--navy)}
/* the site's rightward arrow, swapped in place of the mark so it never
   collides with the name sitting beside it */
.li-btn .arw{position:absolute;left:50%;top:50%;width:46%;height:46%;
  fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;transform:translate(-50%,-50%) translateX(-9px);pointer-events:none;
  transition:opacity .28s ease,transform .45s cubic-bezier(.22,.61,.36,1)}
.li-btn:hover > svg:not(.arw),.li-btn:focus-visible > svg:not(.arw){opacity:0;transform:translateX(9px)}
.li-btn:hover .arw,.li-btn:focus-visible .arw{opacity:1;transform:translate(-50%,-50%) translateX(0)}
@media(prefers-reduced-motion:reduce){
  .li-btn .arw,.li-btn > svg:not(.arw){transition:opacity .28s ease}
}
@media(max-width:420px){
  .namerow{gap:11px}
  .li-btn{width:36px;border-radius:9px}
}

/* two tone statement band */
.tt{--ttpad:clamp(46px,5.4vw,78px)}
.tt-a{background:var(--navy-d);padding:0}
.tt-b{background:var(--deep);padding:var(--ttpad) 0}
.tt-grid{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);
  gap:clamp(32px,4.4vw,70px);align-items:stretch}
.tt-txt{padding:var(--ttpad) 0}
.tt-a .ph{aspect-ratio:auto;min-height:340px;max-height:none}
.tt h2{color:#fff;text-wrap:balance}
.tt-lab{display:block;font-size:15px;font-weight:600;color:#fff;
  letter-spacing:-.004em;line-height:1.3;margin:0 0 clamp(22px,2.2vw,32px)}
.tt-txt h2{margin-top:0}
.tt-a h2{max-width:17ch}
.tt-b h2{max-width:20ch}
.tt-b p{color:#AEB7C7;font-size:18px;line-height:1.62;max-width:64ch;margin-top:20px}
.tt .lnk{color:#fff;margin-top:30px}
.tt .ph{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.22)}
.tt .ph span{color:#8F99AC}
@media(max-width:860px){
  .tt-grid{grid-template-columns:1fr;gap:28px;align-items:start}
  .tt-a{padding-top:var(--ttpad)}
  .tt-txt{padding-top:0}
  .tt-a .ph{aspect-ratio:16/10;min-height:0;max-height:320px}
}

/* client logo marks */
.logo-mark{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.logo-mark img{width:100%;height:100%;object-fit:contain;display:block}
@media(max-width:900px){ .logo-mark{max-width:260px} }

/* --- hero: live "Currents" canvas replaces the looping video --- */
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hero canvas.fx{z-index:0;opacity:0;transition:opacity 1.6s ease}
.hero canvas.fx.on{opacity:1}
.hero canvas.trail{z-index:1}
/* image slots holding the product composites: keep the image anchored and uncropped on phones */
@media(max-width:900px){
  .stmt-grid .ph{position:relative;top:auto}
  .ph-comp,.tt-a .ph.ph-comp{aspect-ratio:auto;height:auto;max-height:none;min-height:0;width:100%;max-width:440px}
  .ph-comp img{position:static;width:100%;height:auto}
}

/* services: larger work images */
.svc:has(> .ph){grid-template-columns:minmax(0,1fr) minmax(0,.95fr)}
@media(max-width:820px){ .svc:has(> .ph){grid-template-columns:1fr} .svc .ph{max-width:none} }
/* two-tone bands, matched to Baillie Gifford: square image flush to the band on the left half of the grid,
   text column starting just past the middle, and the band below aligned to that same text column */
html,body{overflow-x:clip}
@media(min-width:901px){
  .tt-grid{grid-template-columns:minmax(0,48fr) minmax(0,42fr);column-gap:10%;align-items:center}
  .tt-a .ph,.tt-a .ph.ph-comp{aspect-ratio:1/1;min-height:0;max-height:none;align-self:center;height:auto}
}

/* footnote under the product images */
.fnote{font-size:12.5px;line-height:1.5;color:#7A8394;padding:6px 0 28px;margin:0}

/* case study story labels */
.case p.lab{font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin:22px 0 6px}
.case h3 + p.lab{margin-top:14px}
/* phones: product and photo composites on Home sit smaller, centered in their column */
@media(max-width:900px){
  .ph-comp,.tt-a .ph.ph-comp{max-width:300px;margin-left:auto;margin-right:auto}
  .grid2 .ph-comp{margin-top:28px!important}
}
/* phones: About opens with the name on one line, then the portrait below it */
@media(max-width:900px){
  .abouthead{display:block}
  .abouthead .namerow{flex-wrap:nowrap}
  .abouthead .namerow h1{white-space:nowrap;font-size:min(9.2vw,52px);letter-spacing:-.03em}
  .port-sm{width:100%;max-width:340px;margin-top:26px}
}

/* live Hard Money feed: whole card clickable, titles keep their color */
.ins-card{position:relative}
.ins-card h3 a,.post h3 a{color:inherit;text-decoration:none}
.ins-card h3 a.stretch::after{content:"";position:absolute;inset:0}
.post h3 a:hover{text-decoration:underline;text-underline-offset:3px}
/* Substack signup box on Insights */
.sub-embed{margin-top:30px;max-width:480px;border:1px solid var(--line);background:#fff}
.sub-embed iframe{display:block;width:100%;height:150px;border:0}

/* Hard Money signup, styled to the site; hands off to Substack with the email filled in */
.subform{display:flex;gap:10px;margin-top:30px;max-width:520px}
.subform input{flex:1;min-width:0;height:52px;padding:0 16px;border:1px solid #C9CFD9;background:#fff;
  font:inherit;font-size:16px;color:var(--ink);border-radius:0;-webkit-appearance:none}
.subform input:focus{outline:2px solid var(--navy);outline-offset:-1px;border-color:var(--navy)}
.subform .btn{height:52px;flex:0 0 auto;border:0;cursor:pointer}
.subnote{font-size:13px;color:#6A7384;margin-top:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:480px){.subform{flex-direction:column}.subform input{flex:none;width:100%}.subform .btn{justify-content:center}}

/* Hard Money posts that are scheduled but not live yet */
.ins-card.soon .ins-img img,.post.soon .post-img img{opacity:.55}
.ins-card.soon .mtop,.post.soon .m{color:var(--navy)}