/* ============================================================
   Seaborne Capital · prototype V7
   One design system, four brand directions switched on <html data-brand>.
   Everything below the token block is written once and inherits.
   ============================================================ */

:root{
  /* colour ------------------------------------------------- */
  --ink:#05070B;
  --ink-2:#080C12;
  --ink-3:#0B1119;
  --mist:#EAF0F5;
  --lagoon:#56C4BC;
  --deep-a:#0E2D49;
  --deep-b:#08192A;
  --mist-72:rgba(234,240,245,.72);
  --mist-52:rgba(234,240,245,.52);
  --mist-38:rgba(234,240,245,.38);
  --hair:rgba(234,240,245,.13);

  /* spacing scale (4px base) ------------------------------- */
  --s-1:4px;  --s-2:8px;   --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px;  --s-8:64px; --s-9:96px; --s-10:128px;
  --gutter:clamp(24px,5vw,80px);
  --section-y:clamp(96px,13vw,176px);
  --maxw:1280px;

  /* type scale (fluid, one ratio) --------------------------- */
  --fs-label:11px;
  --fs-small:14px;
  --fs-body:17px;
  --fs-lead:clamp(18px,1.35vw,21px);
  --fs-h3:clamp(19px,1.5vw,23px);
  --fs-h2:clamp(30px,3.4vw,50px);
  --fs-h1:clamp(38px,4.6vw,68px);
  --fs-claim:clamp(30px,4.4vw,62px);

  /* per-brand knobs, defaults ------------------------------ */
  --f-display:'Instrument Serif',Georgia,serif;
  --f-body:'Instrument Sans',system-ui,sans-serif;
  --f-label:'Geist Mono',ui-monospace,monospace;
  --display-weight:400;
  --display-track:-0.008em;
  --display-lead:1.06;
  --display-scale:1.12;
  --label-track:.18em;
  --label-weight:500;
  --wm-size:20px;
  --wm-weight-a:400;
  --wm-weight-b:400;
  --wm-track:.005em;
  --wm-transform:none;
}

/* ---- direction 2 · bold ---------------------------------- */
html[data-brand="bold"]{
  --f-display:'Manrope',system-ui,sans-serif;
  --f-body:'Manrope',system-ui,sans-serif;
  --f-label:'Manrope',system-ui,sans-serif;
  --display-weight:800;
  --display-track:-0.035em;
  --display-lead:1.08;
  --display-scale:0.92;
  --label-track:.16em; --label-weight:700;
  --wm-size:16px; --wm-weight-a:800; --wm-weight-b:800;
  --wm-track:-.02em; --wm-transform:lowercase;
}

/* ============================================================
   base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* an explicit root ground: without it Safari samples the page's top content
   for its chrome zones and lands on the sky's navy instead of our ink */
html{scroll-behavior:auto;-webkit-text-size-adjust:100%;background:var(--ink)}
body{
  background:var(--ink);color:var(--mist);
  font-family:var(--f-body);font-size:var(--fs-body);line-height:1.6;
  font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
li{list-style:none}
::selection{background:var(--lagoon);color:var(--ink)}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);width:100%}
.measure{max-width:62ch}
.measure-s{max-width:44ch}
.measure-h{max-width:24ch}

.label{
  font-family:var(--f-label);font-size:var(--fs-label);font-weight:var(--label-weight);
  letter-spacing:var(--label-track);text-transform:uppercase;color:var(--lagoon);
  display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-6);
}
.label::before{display:none}
.snum + .label::before{content:"\00B7";display:inline;color:var(--mist-38)}

.h1,.h2,.h3,.claim{
  font-family:var(--f-display);font-weight:var(--display-weight);
  letter-spacing:var(--display-track);line-height:var(--display-lead);
}
.h1{font-size:calc(var(--fs-h1) * var(--display-scale))}
.h2{font-size:calc(var(--fs-h2) * var(--display-scale));line-height:1.14}
.h3{font-size:calc(var(--fs-h3) * var(--display-scale));line-height:1.2;margin-bottom:var(--s-3)}
.lead{font-size:var(--fs-lead);color:var(--mist-72);line-height:1.55}
.body{font-size:var(--fs-body);color:var(--mist-72)}
.body.dim{color:var(--mist-52)}

/* ============================================================
   nav · floating, no container
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s-5) var(--gutter);
  /* edge-to-edge on notched phones: the bar keeps clear of the status area */
  padding-top:calc(var(--s-5) + env(safe-area-inset-top, 0px));
  transition:background .4s ease, backdrop-filter .4s ease;
}
.nav::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(180deg,rgba(5,7,11,.78),rgba(5,7,11,0));
  transition:opacity .4s ease;
}
.nav.is-stuck::after{opacity:1}
.nav.is-stuck{background:rgba(5,7,11,.42);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15)}
/* real refraction where the platform carries it (Chromium, fine pointer);
   the frosted blur above stays as everyone else's glass */
@media (pointer:fine){
  html.liquid-ok .nav.is-stuck{backdrop-filter:url(#liquid-glass)}
}

.wordmark{
  font-family:var(--f-display);font-size:var(--wm-size);
  letter-spacing:var(--wm-track);text-transform:var(--wm-transform);
  line-height:1;display:inline-flex;align-items:center;gap:.55em;white-space:nowrap;
}
.wordmark .wm-a{font-weight:var(--wm-weight-a)}
.wordmark .wm-b{font-weight:var(--wm-weight-b);color:var(--mist-72)}
.wordmark .wm-sep{display:none}
.wm-logo{height:26px;width:auto;display:block;color:var(--mist)}
#intro .wm-logo{height:42px}
.wordmark:hover .wm-logo{color:var(--mist)}


.navlinks{display:flex;align-items:center;gap:clamp(20px,2.6vw,34px)}
.navlinks a{
  font-family:var(--f-body);font-size:14px;font-weight:700;
  letter-spacing:.005em;color:var(--mist-72);
  transition:color .25s ease;position:relative;padding-block:2px;
}
.navlinks a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:currentColor;transition:width .3s ease;
}
.navlinks a:hover{color:var(--mist)}
.navlinks a:hover::after{width:100%}
/* contact reads like its siblings; the underline on hover is signal enough */
.navlinks a.is-cta{color:var(--mist-72)}
@media(max-width:720px){.navlinks a:not(.m-cta){display:none}}

/* ============================================================
   the film · ten stills, crossfaded on scroll
   ============================================================ */
/* The first section rides up over the pinned film instead of waiting for it
   to leave. Negative margin only moves what follows; the film's own height,
   and with it the scroll maths, is untouched. */
.film{position:relative;background:var(--ink);margin-bottom:-38vh}
/* No hard edge where the section meets the film. One gradient does it: it is
   fully transparent at the very top and reaches the page ground 180px down,
   and a linear-gradient holds its last colour for the rest of the box, so the
   whole section below that strip stays solid. The literal rgba matches --ink;
   a token cannot carry the alpha-zero end of the ramp. */
.film + .block{
  position:relative;z-index:2;
  background:linear-gradient(180deg,rgba(5,7,11,0) 0,rgb(5,7,11) 180px);
}
.film-pin{position:sticky;top:0;height:100vh;
  /* the large viewport stops above the home area; the pin reaches past it so
     the picture stands behind Safari's collapsed pill, not our page ground */
  height:calc(100lvh + env(safe-area-inset-bottom, 0px));overflow:hidden}

/* isolate, so the layers inside the stage (still, loop, veil) stack against
   each other only. Without it a z-index in here escapes into the page and
   the video paints over the grade and the copy. */
.stage{position:absolute;inset:0;isolation:isolate}
.stage .fr{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;backface-visibility:hidden;
}
/* a single grade over everything, full bleed, never a local box */
.grade{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,7,11,.55) 0%,rgba(5,7,11,.12) 22%,rgba(5,7,11,0) 46%,rgba(5,7,11,.42) 78%,rgba(5,7,11,.72) 100%),
    linear-gradient(90deg,rgba(5,7,11,.58) 0%,rgba(5,7,11,.26) 34%,rgba(5,7,11,0) 68%),
    linear-gradient(270deg,rgba(5,7,11,.46) 0%,rgba(5,7,11,.16) 16%,rgba(5,7,11,0) 34%);
}

/* the opening holds a light vignette and the site's drifting particles over
   the first frame, purely for the standstill: both dissolve over the first
   few percent of scroll as the reader steps into the world. */
.heroveil{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 46%,rgba(0,0,0,0) 38%,rgba(0,0,0,.38) 78%,rgba(0,0,0,.6) 100%)}
/* the quiet cousin of the heroveil: a faint vignette that never leaves, so
   the whole film sits in the same held frame the opening establishes */
.filmvig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 105% at 50% 46%,rgba(0,0,0,0) 52%,rgba(0,0,0,.2) 82%,rgba(0,0,0,.4) 100%)}
/* the run-out's heavier pull, opacity driven by scroll from the last stop on */
.filmvig-end{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(115% 92% at 50% 46%,rgba(0,0,0,0) 30%,rgba(0,0,0,.5) 70%,rgba(0,0,0,.78) 100%)}
.heropart{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.beats{position:absolute;inset:0;z-index:2}
.beat{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--gutter);opacity:0;pointer-events:none;will-change:opacity,transform;
}
.beat .claim{
  font-size:calc(var(--fs-claim) * var(--display-scale));
  max-width:20ch;text-wrap:balance;line-height:1.15;
}
.beat.is-centre{align-items:center;text-align:center}
.beat.is-centre .claim{max-width:22ch}

.hairline{
  display:flex;align-items:center;gap:var(--s-3);
  margin-bottom:var(--s-5);font-family:var(--f-label);
  font-size:var(--fs-label);letter-spacing:var(--label-track);text-transform:uppercase;
}

.hairline .co{color:var(--lagoon);font-weight:var(--label-weight)}
.hairline i{width:2px;height:2px;border-radius:50%;background:var(--mist-38)}
.hairline .fn{color:var(--mist-52)}

/* chapter ticks: a stack of small dashes on the right edge. The whole rail
   breathes wider under the pointer; a single tick names its chapter in one
   word; the current beat holds a long lagoon dash. */
.rail{position:absolute;right:calc(var(--gutter) - 8px);top:50%;transform:translateY(-50%);z-index:3;
  display:flex;flex-direction:column;gap:2px;align-items:flex-end;
  pointer-events:auto;padding:10px 8px}
.rail-t{-webkit-appearance:none;appearance:none;background:none;border:none;
  padding:4px 0;margin:0;cursor:pointer;display:flex;align-items:center;
  justify-content:flex-end;gap:10px;pointer-events:auto}
.rail-t i{display:block;width:12px;height:2px;border-radius:1px;
  background:rgba(234,240,245,.30);
  transition:width .26s cubic-bezier(.2,.7,.2,1),background-color .26s ease}
.rail-t span{font-family:var(--f-label);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mist-52);opacity:0;transform:translateX(6px);
  transition:opacity .22s ease,transform .25s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;white-space:nowrap}
/* the dock bulge: the pointed-at dash is widest, its neighbours swell with
   it in two steps of falloff, the rest of the stack lifts just a little */
.rail:hover .rail-t i{width:14px;background:rgba(234,240,245,.45)}
.rail-t:hover + .rail-t i,
.rail-t:has(+ .rail-t:hover) i{width:20px;background:rgba(234,240,245,.7)}
.rail-t:hover + .rail-t + .rail-t i,
.rail-t:has(+ .rail-t + .rail-t:hover) i{width:16px;background:rgba(234,240,245,.55)}
.rail:hover .rail-t:hover i{width:28px;background:var(--mist)}
.rail-t:hover span{opacity:1;transform:none}
.rail-t.is-now i{width:24px;background:var(--lagoon);box-shadow:0 0 8px rgba(86,196,188,.45)}
.rail .rail-t.is-now i{background:var(--lagoon)}
@media(max-width:720px){.rail{display:none}}

/* ---------- the film on a phone ----------
   The portrait cut is a different picture, framed per beat, so the copy does
   not have to dodge anything: it can sit lower and run the full width. Scale
   stays on the type tokens, only placement and measure change here. */
@media(max-width:720px){
  /* the pin runs past the smallest viewport (collapsed-bar height plus the
     home area), so the copy anchors against 100svh, not against the pin's
     bottom - it stays above the fold in every Safari bar configuration */
  .beat{justify-content:flex-end;padding-bottom:calc(calc(100lvh + env(safe-area-inset-bottom, 0px) - 100svh) + clamp(72px,12svh,124px))}
  /* the 9:16 cut frames its action clear of the lower third, so the line can
     run the full width; the authored breaks are for the wide frame only */
  .beat .claim{max-width:none;font-size:calc(var(--fs-claim) * var(--display-scale) * 1.45);line-height:1.18}
  /* html prefix: these resets sit earlier in the file than the desktop
     placement rules they undo, so they need the extra specificity to win */
  html .beat.is-right{align-items:flex-start;text-align:left;padding-right:var(--gutter)}
  html .beat.is-right .hairline{flex-direction:row}
  .beat.is-low{padding-bottom:clamp(88px,16svh,140px)}
  /* the title card stays a title card: centred both ways, as on the wide cut */
  html .beat.is-centre{align-items:center;text-align:center;justify-content:center;padding-bottom:0}
  .beat.is-centre .claim{max-width:16ch}
  .hairline{margin-bottom:var(--s-4)}
    .film{margin-bottom:-30vh}
  /* the grade was drawn for a wide frame; on a tall one the side vignette
     would eat the picture, so only the vertical part stays */
  /* the base grade stays gentle; a short, bottom-aligned fade to solid ink
     sits over the picture's last 140px, so the edge under Safari's pill is a
     clean black fade instead of a hard band */
  /* the fade band grows by the pin's overhang below the smallest viewport:
     solid ink fills everything under the svh fold, and the visible fade
     always starts 140px above it - fluent in every Safari bar configuration */
  .grade{background:
    linear-gradient(0deg,
      rgb(5,7,11) 0,
      rgb(5,7,11) calc(100lvh + env(safe-area-inset-bottom, 0px) - 100svh),
      rgba(5,7,11,0) 100%)
      left bottom/100% calc(100lvh + env(safe-area-inset-bottom, 0px) - 100svh + 140px) no-repeat,
    linear-gradient(180deg,rgba(5,7,11,.48) 0%,rgba(5,7,11,.08) 24%,rgba(5,7,11,0) 48%,rgba(5,7,11,.4) 78%,rgba(5,7,11,.52) 100%)}
  /* same reasoning for the standing vignette: mostly top and bottom on a
     tall frame, the sides stay open so the 9:16 picture keeps its width */
  .filmvig{background:radial-gradient(150% 108% at 50% 48%,rgba(0,0,0,0) 56%,rgba(0,0,0,.12) 84%,rgba(0,0,0,.2) 100%)}
  .filmvig-end{background:radial-gradient(140% 96% at 50% 48%,rgba(0,0,0,0) 32%,rgba(0,0,0,.5) 72%,rgba(0,0,0,.78) 100%)}
}
@media(max-width:720px) and (orientation:landscape){
  /* a phone on its side is short, not narrow: keep the copy centred and small */
  .beat{justify-content:center;padding-bottom:0}
  .beat .claim{font-size:calc(var(--fs-claim) * var(--display-scale) * 0.78)}
}

.progress{position:absolute;top:0;left:0;right:0;height:2px;background:rgba(234,240,245,.08)}
.progress i{display:block;height:100%;width:0;background:var(--lagoon)}


/* ============================================================
   sections
   ============================================================ */
.section{padding-block:var(--section-y);position:relative}
.section.alt{background:var(--ink-2)}
.sec-head{display:flex;gap:var(--s-8);justify-content:space-between;
  align-items:flex-end;flex-wrap:wrap;margin-bottom:var(--s-9)}

#thesis .h2{margin-bottom:var(--s-6)}
#thesis .lead{margin-bottom:var(--s-9)}

.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-8);
  padding-top:var(--s-7);border-top:1px solid var(--hair)}
@media(max-width:860px){.cols{grid-template-columns:1fr;gap:var(--s-7)}}

.folio{display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--s-9)}
.folio li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-5);
  padding-block:var(--s-5);border-bottom:1px solid var(--hair)}
.folio .f-n{font-family:var(--f-display);font-weight:var(--display-weight);
  font-size:calc(var(--fs-h3) * var(--display-scale));letter-spacing:var(--display-track)}
.folio .f-r{font-family:var(--f-label);font-size:var(--fs-label);
  letter-spacing:var(--label-track);text-transform:uppercase;color:var(--mist-38);text-align:right}
@media(max-width:860px){.folio{grid-template-columns:1fr}}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-8)}
.step{border-top:1px solid var(--hair);padding-top:var(--s-5)}
.st-n{display:block;font-family:var(--f-label);font-size:var(--fs-label);
  letter-spacing:var(--label-track);color:var(--lagoon);margin-bottom:var(--s-5)}
@media(max-width:860px){.steps{grid-template-columns:1fr;gap:var(--s-7)}}

.contact{
  background:
    radial-gradient(70% 120% at 50% 0%,rgba(14,45,73,.55) 0%,rgba(8,25,42,.18) 55%,rgba(5,7,11,0) 100%),
    var(--ink);
  text-align:center;
}
.contact .h1{margin-bottom:var(--s-7)}
.mail{
  font-family:var(--f-label);font-size:var(--fs-label);letter-spacing:var(--label-track);
  text-transform:uppercase;color:var(--lagoon);border-bottom:1px solid rgba(86,196,188,.4);
  padding-bottom:6px;transition:border-color .3s ease
}
.mail:hover{border-color:var(--lagoon)}

.foot{border-top:1px solid var(--hair);padding-block:var(--s-7)}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap}
.foot .wordmark.sm{--wm-size:14px}
.foot .body{font-size:var(--fs-small)}

/* ============================================================
   debug
   ============================================================ */
.debug{position:fixed;left:24px;bottom:24px;z-index:300;display:flex;flex-direction:column-reverse;align-items:flex-start;gap:10px;
  font-family:var(--f-label);font-size:11px}
.dbg-toggle{width:34px;height:34px;border-radius:50%;background:rgba(10,13,18,.85);
  border:1px solid rgba(234,240,245,.16);backdrop-filter:blur(10px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer}
.dbg-toggle span{display:block;width:12px;height:1px;background:var(--mist-52);transition:all .25s ease}
.debug.is-open .dbg-toggle span{background:var(--lagoon)}
.dbg-panel{display:none;flex-direction:column;gap:10px;padding:14px;border-radius:10px;
  background:rgba(10,13,18,.88);border:1px solid rgba(234,240,245,.14);backdrop-filter:blur(14px)}
.debug.is-open .dbg-panel{display:flex}
.dbg-row{display:flex;align-items:center;gap:12px;justify-content:space-between}
.dbg-btns{display:flex;gap:6px}
.debug button{
  font:inherit;color:var(--mist-52);background:none;border:0;cursor:pointer;
  padding:4px 8px;border-radius:999px;transition:color .2s ease,background .2s ease;
}
.debug button:hover{color:var(--mist)}
.debug button.is-on{color:var(--ink);background:var(--lagoon)}
.dbg-l{color:var(--mist-38);text-transform:uppercase;letter-spacing:.2em}
.scrollcue{position:absolute;left:50%;bottom:calc(calc(100lvh + env(safe-area-inset-bottom, 0px) - 100svh) + 30px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;z-index:6;
  transition:opacity .5s ease;pointer-events:none}
.scrollcue span{font-family:var(--f-label);font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--mist-38)}
.scrollcue i{width:1px;height:30px;background:rgba(86,196,188,.16);position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;left:0;top:0;width:1px;height:12px;
  background:var(--lagoon);animation:cuedrop 2.1s cubic-bezier(.45,0,.25,1) infinite}
@keyframes cuedrop{
  0%{transform:translateY(-12px);opacity:0}
  22%{opacity:1}
  78%{opacity:1}
  100%{transform:translateY(30px);opacity:0}
}

.dbg-sep{width:1px;height:14px;background:rgba(234,240,245,.16)}
#cta{position:relative}
#cta .trails{position:absolute;inset:0;pointer-events:none;opacity:.55}
#cta .inner{position:relative;z-index:2}

/* ---------- cursor ---------- */
html.has-cursor, html.has-cursor body, html.has-cursor a, html.has-cursor button,
html.has-cursor [role="button"]{cursor:none}
/* ---------- the cursor ----------
   A single quiet point. Over anything clickable it opens into a thin
   lagoon circle; that one morph is all the character it needs. One element,
   no tether, no trail, no blend modes. */
.cur-dot{position:fixed;left:0;top:0;width:6px;height:6px;border-radius:50%;
  background:var(--mist);border:1px solid transparent;
  box-shadow:0 0 0 1px rgba(5,7,11,.35);
  pointer-events:none;z-index:9999;opacity:0;will-change:transform;
  transition:width .22s cubic-bezier(.2,.7,.2,1),height .22s cubic-bezier(.2,.7,.2,1),
    background-color .22s ease,border-color .22s ease,box-shadow .22s ease}
.cur-dot.is-hot{width:26px;height:26px;background:transparent;
  border-color:var(--lagoon);box-shadow:none}
.cur-dot.is-down{width:18px;height:18px}
@media(prefers-reduced-motion:reduce){.cur-dot{transition:none}}
/* the scroll feel only exists in video mode */
html:not([data-film="video"]) .dbg-scroll{display:none}
/* copy placement varies by beat so the line sits where the picture leaves
   room; on a phone everything falls back to the one bottom-left position */
.beat.is-right{align-items:flex-end;text-align:right;
  padding-right:calc(var(--gutter) + 150px)}
.beat.is-right .claim{max-width:18ch}
.beat.is-right .hairline{flex-direction:row-reverse}
.beat.is-low{justify-content:flex-end;padding-bottom:16vh}
.beat .hairline,.beat .claim{will-change:opacity,transform,filter}
.dbg-note{color:var(--mist-38)}


@media(max-width:720px){.dbg-note,.dbg-sep{display:none}}
/* placed after .debug on purpose: same specificity, so order decides, and an
   earlier rule would lose `left` to the base while keeping the transform,
   which pushed the bar half off the screen. */
@media(max-width:720px){
  .debug{left:12px;bottom:12px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stage .fr{transition:none!important}
  .scrollcue i::after{animation:none}
  }

/* ============================================================
   sections · carried over from V5's language, rebuilt on the tokens
   ============================================================ */
.block{padding:clamp(110px,17vh,220px) var(--gutter);position:relative;overflow:hidden}
.block .inner{max-width:var(--maxw);margin:0 auto;position:relative;z-index:2}
/* a canvas is a replaced element: inset:0 alone leaves it at its intrinsic
   300x150, so the box has to be stated explicitly */
.linescv{position:absolute;inset:0;width:100%;height:100%;
  z-index:1;pointer-events:none;opacity:1}

.rowhead{display:flex;align-items:baseline;gap:var(--s-4);margin-bottom:clamp(26px,3.4vh,44px)}
.snum{font-family:var(--f-label);font-size:11px;letter-spacing:.2em;color:var(--mist-38)}
.rowhead .label{margin-bottom:0}
.accent{color:var(--lagoon)}

/* the reveal only exists when JS does; without it every section stays readable */
html.has-js .reveal{opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
html.has-js .reveal.is-in{opacity:1;transform:none}

/* 01 firm ------------------------------------------------- */
#firm .h2{margin-bottom:var(--s-6)}
#firm .lead{margin-bottom:clamp(56px,9vh,104px)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5);
  padding-block:clamp(40px,6vh,64px);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.stat .sv{display:block;font-family:var(--f-display);font-weight:var(--display-weight);
  font-size:calc(clamp(38px,5.4vw,74px) * var(--display-scale));
  letter-spacing:var(--display-track);line-height:1;font-variant-numeric:tabular-nums}
.stat .sl{display:block;font-family:var(--f-label);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mist-38);margin-top:var(--s-3)}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr;gap:var(--s-7) var(--s-5)}}

.partners{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);margin-top:clamp(44px,7vh,80px)}
.partner{display:flex;align-items:center;gap:var(--s-4)}
.partner .pmono{font-family:var(--f-label);font-size:11px;letter-spacing:.1em;
  color:var(--lagoon);width:38px;height:38px;flex:none;display:grid;place-items:center;
  border:1px solid rgba(86,196,188,.34);border-radius:50%}
.partner .pn2{font-size:15px;font-weight:500}
.partner .pr{font-family:var(--f-label);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mist-38);margin-top:3px}
@media(max-width:760px){.partners{grid-template-columns:1fr 1fr;gap:var(--s-6) var(--s-5)}}

/* 02 belief ------------------------------------------------ */
.statement{background:var(--ink)}
/* The section clips its own overflow, so the glow has to finish inside it.
   Reaching the clip edge with any alpha left draws a hard horizontal line
   exactly where the section starts, which is what it did before. It now sits
   well within the box and fades to nothing long before the boundary. */
.statement::before{content:"";position:absolute;left:-8%;right:-8%;top:18%;height:64%;
  z-index:0;pointer-events:none;
  background:radial-gradient(62% 46% at 50% 50%,rgba(46,91,255,.085),rgba(46,91,255,.035) 42%,transparent 70%);
  filter:blur(70px)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,4vw,60px);
  margin-top:clamp(48px,7vh,84px)}
.pillar{padding-top:0}
.pillar .pn{display:block;font-family:var(--f-label);font-size:11px;
  letter-spacing:.16em;color:var(--lagoon);margin-bottom:var(--s-5)}
.pillar .h3{margin-bottom:var(--s-3)}
@media(max-width:820px){.pillars{grid-template-columns:1fr;gap:var(--s-7)}}
.manilink{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(44px,6vh,72px);
  font-family:var(--f-label);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lagoon);
  border-bottom:1px solid rgba(86,196,188,.35);padding-bottom:7px;transition:border-color .3s ease}
.manilink:hover{border-color:var(--lagoon)}
.manilink .mla{transition:transform .3s ease}
.manilink:hover .mla{transform:translateX(5px)}

/* 03 market & portfolio ------------------------------------ */
.datarow{display:flex;gap:clamp(36px,6vw,88px);margin-top:clamp(30px,4.5vh,54px);flex-wrap:wrap}
.datarow .k{font-family:var(--f-label);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mist-38)}
.datarow .v{font-family:var(--f-display);font-weight:var(--display-weight);
  font-size:calc(clamp(17px,1.8vw,22px) * var(--display-scale));
  letter-spacing:var(--display-track);margin-top:var(--s-2)}

.pfblock{margin-top:clamp(64px,9vh,124px)}
.pfline{font-family:var(--f-display);font-weight:var(--display-weight);
  letter-spacing:var(--display-track);line-height:1.14;
  font-size:calc(clamp(22px,2.6vw,36px) * var(--display-scale));max-width:24ch}
.logogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair);margin-top:clamp(32px,4.5vh,56px)}
.lgc{background:var(--ink);aspect-ratio:1.6/1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--s-4);
  transition:background .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.lgc:hover{background:#010206;box-shadow:inset 0 -1px 0 rgba(86,196,188,.32)}
.lgc .mk{height:34px;display:flex;align-items:center;justify-content:center}
.lgc .mk img{max-height:34px;max-width:150px;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.72;transition:opacity .35s ease,transform .45s ease}
.lgc:hover .mk img{opacity:1}
.lgc .wm2{font-family:var(--f-display);font-weight:var(--display-weight);
  letter-spacing:var(--display-track);font-size:calc(clamp(19px,2vw,26px) * var(--display-scale));
  opacity:.88;transition:opacity .35s ease,transform .45s ease;display:inline-block}
.lgc:hover .wm2{opacity:1}
.lgc .sec{font-family:var(--f-label);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mist-38);opacity:.7;transition:opacity .35s ease}
@media(max-width:900px){.logogrid{grid-template-columns:repeat(2,1fr)}}

/* 04 contact ----------------------------------------------- */
.cta2{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(40px,6vw,90px);align-items:end}
@media(max-width:900px){.cta2{grid-template-columns:1fr;gap:var(--s-7)}}
.ctah{max-width:14ch}


/* the gap has to beat the buttons' own 32px of side padding, otherwise the
   two read as one block instead of two choices. Row gap stays small: it
   only applies once they wrap on a narrow screen. */
.btns{display:flex;gap:16px clamp(24px,2.6vw,44px);margin-top:clamp(44px,6vh,68px);flex-wrap:wrap}
.btn{font-family:var(--f-body);font-weight:700;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;height:52px;padding:0 32px;position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;border-radius:2px}
.btn .bl{position:relative;z-index:2}
.btn.primary{background:var(--lagoon);color:var(--ink)}
.btn.primary::after{content:"";position:absolute;inset:0;background:var(--mist);
  transform:translateY(101%);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.btn.primary:hover::after{transform:none}
.btn.ghost{border:1px solid rgba(234,240,245,.25);color:var(--mist);transition:border-color .3s,color .3s}
.btn.ghost:hover{border-color:var(--lagoon);color:var(--lagoon)}

/* footer --------------------------------------------------- */
footer{background:var(--ink);border-top:1px solid var(--hair);
  padding:clamp(60px,9vh,110px) var(--gutter) clamp(22px,3vh,34px);position:relative;overflow:hidden}
.fbig{display:flex;justify-content:space-between;max-width:var(--maxw);margin-inline:auto;font:var(--display-weight) clamp(40px,9vw,128px)/1 var(--f-display);letter-spacing:.04em;color:rgba(234,240,245,.07);user-select:none;margin-bottom:clamp(40px,7vh,84px)}
.fbig span{display:inline-block}
/* the torch: a soft radial of the brand colours follows the hand and lights
   the letters through background-clip. Fixed attachment keeps one beam across
   all spans. Falls back to the plain hover where clip:text is unsupported. */
@supports(-webkit-background-clip:text){
  .fbig:hover span{
    background:radial-gradient(170px circle at var(--fx,50vw) var(--fy,50vh),
      rgba(86,196,188,.42) 0%, rgba(86,196,188,.16) 40%, rgba(234,240,245,.07) 70%);
    background-attachment:fixed;
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}
.fbig .sp{width:.3em;}
/* sixteen letters at the 40px floor plus tracking overrun a 375px screen by
   55px. Under 720 the floor drops and the tracking tightens; the line still
   reads as one word because the letters keep their inline-block spacing. */
@media(max-width:720px){.fbig{font-size:clamp(18px,7.9vw,110px);letter-spacing:.02em}.fbig .sp{flex:0 0 .2em}}
.fgrid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(28px,4vw,56px);align-items:start}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
.ftag{color:var(--mist-38);font-size:13.5px;max-width:32ch;line-height:1.65}
.fcol h4{font-family:var(--f-label);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mist-38);margin-bottom:var(--s-5);font-weight:500}
.fnav2{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,2.6vw,40px)}
.fcol a{display:block;font-size:14.5px;color:var(--mist-52);margin-bottom:10px;
  width:fit-content;position:relative;transition:color .25s ease}
.fcol a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;
  background:var(--lagoon);transition:width .3s ease}
.fcol a:hover{color:var(--lagoon)}
.fcol a:hover::after{width:100%}
.globe-cities{display:flex;gap:clamp(20px,3vw,34px)}
.gcity .gc-name{font-family:var(--f-label);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mist-52)}
.gcity .gc-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lagoon);
  box-shadow:0 0 10px var(--lagoon);margin-right:8px;vertical-align:middle}
.gcity .gc-t{font-family:var(--f-display);font-weight:var(--display-weight);font-size:19px;
  margin-top:5px;font-variant-numeric:tabular-nums}
.legal{max-width:var(--maxw);margin:clamp(40px,6vh,72px) auto 0;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:var(--s-4);
  font-family:var(--f-label);font-size:10.5px;letter-spacing:.12em;
  color:var(--mist-38);padding-top:var(--s-5);border-top:1px solid var(--hair)}
.legal-links{display:flex;gap:var(--s-5)}
.legal-links a{transition:color .25s ease}
.legal-links a:hover{color:var(--lagoon)}

/* ============================================================
   intro · the title card, held for a beat, then lifted away
   ============================================================ */
#intro{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  overflow:hidden;
}
/* the light stays put while the water climbs: a travelling glow would read
   as a moving panel, a fixed one reads as a room the tide fills */
#intro::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(58% 44% at 50% 50%,
    rgba(19,55,86,.60) 0%, rgba(14,40,64,.24) 55%, rgba(5,7,11,0) 100%);
  transition:opacity .9s ease;
}
#intro.is-lift::before{opacity:0}
/* the curtain is a tall slab whose BOTTOM edge is cut in the brand's wave.
   It lifts away upward, so the wave sweeps up the screen once and the film
   appears beneath it - the swoosh, played as a rising curtain. */
.wave-curtain{
  position:absolute;left:0;right:0;top:-140vh;height:280vh;
  display:flex;flex-direction:column;
  transform:translateY(0);
  transition:transform 1.7s cubic-bezier(.65,.05,.18,1);
}
.wc-solid{flex:1;background:#040609;position:relative}
/* a soft gradient hem: the ink dissolves over the last 44vh of the curtain */
.wc-fade{height:44vh;width:100%;flex:none;
  background:linear-gradient(180deg,#040609 0%,rgba(4,6,9,.72) 38%,rgba(4,6,9,0) 100%)}
.intro-in{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:26px;
  transition:opacity .4s ease,transform .5s cubic-bezier(.4,0,.2,1);
}
#intro .wordmark{
  --wm-size:clamp(30px,5.6vw,66px);
  opacity:0;transform:translateY(18px);
  transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1);
}
/* the hairline is the brand's own motif, so the intro uses it to mark the beat */
.intro-rule{
  display:block;height:1px;width:0;background:var(--lagoon);opacity:.75;
  transition:width .55s cubic-bezier(.4,0,.2,1);
}
#intro.is-on .wordmark{opacity:1;transform:none}
#intro.is-draw .intro-rule{width:clamp(120px,18vw,260px)}
#intro.is-lift .intro-in{opacity:0;transform:translateY(-26px)}
#intro.is-lift .wave-curtain{transform:translateY(-185vh)}
#intro.is-done{display:none}
html.intro-lock,html.intro-lock body{overflow:hidden}
/* the small stacked label has to scale with the wordmark, not sit at 8px */

/* Partner-Portraets. Fotos liegen quadratisch vor, der Kreis haelt die Reihe ruhig,
   auch wenn eine Person noch kein Bild hat und nur mit Monogramm dasteht. */
.pface{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;
  filter:grayscale(1) contrast(1.04);opacity:.92;transition:filter .3s,opacity .3s}
.partner:hover .pface{filter:grayscale(0);opacity:1}
.ent-logo{height:26px;width:auto;filter:brightness(0) invert(1);opacity:.9;display:block}

/* the grid cards became links to the company pages; keep them looking
   exactly like the tiles they were */
a.lgc{text-decoration:none;color:inherit;cursor:pointer}

/* CTA rotator · pure CSS. The words stack in one inline grid cell, the cell is
   as wide as the longest word, and each word fades in on its turn. No JS
   measurement, nothing to break when fonts load late. */
.rot{display:inline-grid;vertical-align:baseline}
.rot .rlist{display:inline-grid}
.rot .rlist span{grid-area:1/1;opacity:0;animation:rotword 8s infinite;color:var(--lagoon);white-space:nowrap}
.rot .rlist span:nth-child(1){animation-delay:0s}
.rot .rlist span:nth-child(2){animation-delay:2s}
.rot .rlist span:nth-child(3){animation-delay:4s}
.rot .rlist span:nth-child(4){animation-delay:6s}
.rot .rlist span:nth-child(5){display:none}
@keyframes rotword{0%,3%{opacity:0;transform:translateY(.35em)}6%,22%{opacity:1;transform:none}27%,100%{opacity:0;transform:translateY(-.3em)}}
@media(prefers-reduced-motion:reduce){.rot .rlist span{animation:none}.rot .rlist span:nth-child(1){opacity:1}}

/* page transitions · one soft move between pages, the intro plays only once */
@keyframes ptIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html.pt-anim body{animation:ptIn .38s ease both}
html.pt-out body{opacity:0;transform:translateY(-8px);transition:opacity .22s ease,transform .22s ease}
html.intro-skip #intro{display:none}
@media(prefers-reduced-motion:reduce){html.pt-anim body{animation:none}html.pt-out body{transition:none;opacity:1;transform:none}}

/* portfolio tiles · the Creandum move: nothing scales, the mark lifts a
   touch, the sector steps aside and a Discover line arrives from below */
.lgc{position:relative}
.lgc .mk,.lgc .sec{transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .35s ease}
.lgc:hover .mk{transform:translateY(-7px)}
.lgc:hover .sec{opacity:0;transform:translateY(-6px)}
.lgc .disc{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;
  align-items:center;gap:8px;font-family:var(--f-label);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--lagoon);
  opacity:0;transform:translateY(10px);
  transition:opacity .35s ease .05s,transform .5s cubic-bezier(.2,.7,.2,1) .05s}
.lgc:hover .disc{opacity:1;transform:none}

/* the grid stays a clean rectangle: fourteen companies plus two quiet cells,
   all the same size, so no tile has to stretch to fill the last row */
.lgc.is-fill{pointer-events:none}

/* CTA · both columns start at the top and the buttons sit close to the copy
   they belong to, instead of inheriting the standalone button spacing */
.cta2{align-items:start}
.cta-r .btns{margin-top:var(--s-6)}

/* ---------- mobile polish pass (v11.5) ----------
   placed at the end of the file on purpose: same specificity as the desktop
   rules it overrides, so source order decides */
@media(max-width:720px){
  /* portfolio · one shared cap so every mark carries the same weight; the
     wide wordmarks shrink into it instead of filling the tile */
  .lgc .mk{height:24px}
  .lgc .mk img{max-height:21px;max-width:100px}
  .lgc .mk img.is-ico{max-height:25px}
  .lgc .wm2{font-size:16px}
  /* contact · the rising threads are a cursor instrument; touch has no
     cursor. The wave swooshes stay - they are the section's atmosphere. */
  #cta .trails{display:none}
  /* footer · one column that actually uses the width: the line runs the full
     measure, the clocks follow it, the links become a tappable bordered grid */
  .fgrid{grid-template-columns:1fr;gap:30px}
  .fgrid > div:nth-child(2){order:3}
  .fgrid > div:nth-child(3){order:2}
  .ftag{max-width:none;font-size:14.5px}
  .fnav2{grid-template-columns:1fr 1fr;gap:0 14px}
  .fnav2 > div{display:contents}
  html .fcol a{width:auto;font-size:15.5px;margin:0;padding:11px 2px}
  .globe-cities{gap:38px}
  .legal{flex-wrap:wrap;gap:10px}
}

/* ---------- v11.9 ---------- */
/* portfolio, wide screens: the icon mark and the LenderLink word read a step
   too light next to the wordmarks - give both more presence */
@media(min-width:721px){
  .lgc .mk img.is-ico{max-height:48px}
  .lgc .mk img[src*="lenderlink"]{max-height:44px}
}
/* subpage nav on a phone: the way back, not the brand */
.nav-back{display:none;align-items:center;gap:10px;font-family:var(--f-body);
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:var(--mist-72)}
.nav-back svg{display:block}


/* ---------- v11.10 · mobile logo presence ---------- */
@media(max-width:720px){
  .lgc .mk img.is-ico{max-height:30px}
  .lgc .mk img[src*="lenderlink"]{max-height:26px;max-width:120px}
}

/* ---------- v11.11 · beat copy legibility ----------
   The hairline's function half sat at 52% white and drowned in bright
   footage. A step more body, and the whole beat block carries a whisper of
   shadow - wide and soft, so it reads as depth, never as an outline. */
.beat .hairline .fn{color:var(--mist-72)}
.beat .hairline,.beat .claim{
  text-shadow:0 1px 2px rgba(5,7,11,.38),0 2px 18px rgba(5,7,11,.5);
}

/* ---------- v11.12 ---------- */
/* Eddie's headshot is monochrome source material; colourising it on hover
   only shifts its grey cast, so it keeps its grade */
.partner:hover .pface[src*="eddie"]{filter:grayscale(1) contrast(1.04);opacity:.92}
/* film grain: an SVG noise tile in overlay blend, jumped in steps so it
   reads as print grain rather than as a dissolve. Sits under the copy. */
.filmgrain{position:absolute;inset:-140px;pointer-events:none;opacity:.115;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
  animation:sb-grain .84s steps(6) infinite}
@keyframes sb-grain{
  0%{transform:translate(0,0)}
  16.6%{transform:translate(-64px,38px)}
  33.3%{transform:translate(42px,-72px)}
  50%{transform:translate(-28px,-46px)}
  66.6%{transform:translate(70px,24px)}
  83.3%{transform:translate(-52px,64px)}
  100%{transform:translate(0,0)}}
@media(prefers-reduced-motion:reduce){.filmgrain{animation:none}}

/* ---------- v11.13 ---------- */
/* the lockup grows without touching the bar: the negative block margin
   returns exactly the added height, so the nav keeps its metrics */
.nav .wm-logo{height:36px;margin-block:-5px}
/* the Motorento mark is an icon among wordmarks; it needs real width */
@media(min-width:721px){
  .lgc .mk img.is-ico{max-height:58px;max-width:170px}
}
@media(max-width:720px){
  .lgc .mk img.is-ico{max-height:34px}
}

/* ---------- v12.1 · the Motorento mark ----------
   Two things made it read small. The source PNG was 2000x2000 with the
   artwork filling 44% of its height, so every max-height sized empty margin
   (the file is now trimmed to 1792x890). And it is the only STACKED mark in
   the grid - icon above, wordmark below - so at the height of a one-line
   logo its lettering comes out a quarter the size of its neighbours'. It is
   therefore matched on WIDTH to the widest wordmarks beside it, not on
   height or area, and the mark box grows to carry it. */
@media(min-width:721px){
  .lgc .mk{height:60px}
  .lgc .mk img.is-ico{max-height:60px;max-width:120px}
}
@media(max-width:720px){
  .lgc .mk{height:36px}
  .lgc .mk img.is-ico{max-height:36px;max-width:72px}
}

/* ---------- v12.3 · beats owns the finger ----------
   The touch handler alone cannot hold a swipe back: once iOS has decided a
   gesture is a scroll, touchmove arrives with cancelable=false and
   preventDefault() is ignored, so the native momentum ran anyway and sailed
   past beats. The browser has to be told BEFORE the gesture starts, and
   that is what touch-action does. Only the film's visible pin is claimed,
   and only in beats: everything below it, and every other mode, scrolls
   normally. */
html[data-scroll="steps"].film-owns{touch-action:none}
html[data-scroll="steps"].film-owns .film-pin{touch-action:none}

/* ---------- v12.4 · portfolio teaser ----------
   Six companies open the grid; the rest arrive on request, cascading in.
   Teasing beats listing - and the grid stays one screen tall. */
/* the card itself stays solid ink from the first frame - fading the whole
   card left a grey hole where the grid's hairline ground showed through.
   Only its content rises in. */
.lgc.is-reveal .mk,.lgc.is-reveal .sec{opacity:0;transform:translateY(14px)}
.lgc.is-reveal.is-in .mk,.lgc.is-reveal.is-in .sec{opacity:1;transform:none;
  transition:opacity .55s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.lgc.is-held{display:none}
.pf-more{display:flex;justify-content:center;margin-top:clamp(28px,4vh,44px);
  transition:opacity .4s ease}
.pf-more.is-gone{opacity:0;pointer-events:none}
/* show-more wears the manifesto link's clothes: label case, lagoon, hairline
   underline, an arrow that nudges down on hover - that is where the grid arrives */
.pf-more .manilink{-webkit-appearance:none;appearance:none;background:none;
  border:none;border-bottom:1px solid rgba(86,196,188,.35);cursor:pointer;
  margin-top:0}
.pf-more .manilink:hover .mla{transform:translateY(4px)}
/* the footer wordmark: SEABORNE and CAPITAL are two words, and the gap
   between them has to read as one. flex-basis, because the letters sit in a
   space-between flex row where a plain width shrinks to nothing. */
.fbig .sp{flex:0 0 .2em}
/* the word gap added real width; the letters give a step back so the whole
   lockup spans exactly the page's measure instead of running past it */
.fbig{font-size:clamp(36px,8.1vw,110px)}


/* ---------- v12.5 · show-more wears the manifesto link's clothes ----------
   Same quiet grammar as "Read the manifesto": label case, lagoon, hairline
   underline, an arrow that gives a nudge on hover - pointing down, because
   that is where the rest of the grid arrives. <button> resets included. */


/* ---------- v12.6 ---------- */
/* two buttons on a phone share the row as equals */
@media(max-width:720px){
  .art-end .btns{flex-wrap:nowrap;gap:12px}
  .art-end .btns .btn{flex:1 1 0;padding:0 10px}
}
/* footer on a phone: the line and the clocks share the first row, the links
   follow underneath - tighter, nothing lost */
@media(max-width:720px){
  .fgrid{grid-template-columns:1.35fr 1fr;gap:22px 18px;align-items:start}
  .fgrid > div:nth-child(1){grid-column:1}
  .fgrid > div:nth-child(3){order:0;grid-column:2}
  .fgrid > div:nth-child(2){order:1;grid-column:1 / -1}
  .ftag{font-size:13px;line-height:1.55}
  .globe-cities{flex-direction:column;gap:12px;align-items:flex-end;text-align:right}
  .gcity .gc-t{font-size:17px;margin-top:2px}
  .fbig{margin-bottom:clamp(24px,4vh,40px)}
  footer{padding-bottom:18px}
  .legal{margin-top:clamp(22px,3.5vh,36px)}
}

/* ---------- v12.7 · hover is a mouse thing ----------
   iOS replays :hover on the first tap, which slid the label away and laid
   "Discover" over it. On a device without a real pointer the whole hover
   choreography is switched off: a tap is a visit, not a preview. */
@media(hover:none){
  .lgc .disc{display:none}
  .lgc:hover{background:var(--ink);box-shadow:none}
  .lgc:hover .mk{transform:none}
  .lgc:hover .sec{opacity:1;transform:none}
}

/* the portfolio anchor lands on the section head, clear of the nav */
#market{scroll-margin-top:88px}


/* ---------- v13 · safe areas ----------
   viewport-fit=cover lets the film run under the notch and home bar; the
   page's own chrome steps back inside the safe box. */
.debug{bottom:calc(24px + env(safe-area-inset-bottom, 0px))}
footer .legal, .flegal{padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px))}


/* ---------- v14 · home, D1c ----------
   The firm block now carries the portfolio preview and the belief block the
   team. Sub headings step down a size so each block keeps one lead line. */
.h2.sub{font-size:calc(clamp(24px,2.7vw,38px) * var(--display-scale));line-height:1.16;
  max-width:26ch;margin-bottom:0}
.pfblock.pv{margin-top:clamp(80px,11vh,136px)}
.logogrid.pv3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.logogrid.pv3{grid-template-columns:repeat(2,1fr)}}
.pfblock.pv .btns{margin-top:clamp(32px,4.5vh,52px)}
.teamteaser{margin-top:clamp(88px,12vh,150px);padding-top:clamp(64px,9vh,110px);
  border-top:1px solid var(--hair)}
.teamteaser .partners{margin-top:clamp(32px,4.5vh,56px);gap:var(--s-6) var(--s-5)}
a.partner{color:inherit;text-decoration:none}
a.partner .pn2{transition:color .3s ease}
a.partner:hover .pn2{color:var(--lagoon)}
/* less black between the last frame and the first line: the section starts
   close under its soft edge and the picture stays until the copy is there */
.film + .block{padding-top:clamp(56px,8vh,96px)}

/* ---------- v14.2 · claims break where they are written ----------
   Every claim carries authored <br>s sized for the wide frame; a ch cap on
   top of them split lines a second time and left orphans. */
@media(min-width:721px){
  .beat .claim,.beat.is-centre .claim{max-width:none}
}
/* phone-only breaks: the phone's lines are authored too (br.mb), the wide
   frame skips them */
@media(min-width:721px){.beat .claim br.mb{display:none}}

/* ---------- v14.2 · footer ----------
   One twelve-column grid: the line takes the left half, the links and the
   offices a quarter each, every column stacked top down. No rule above the
   wordmark; the only hairline left sits over the legal row. */
footer{border-top:none}
.fgrid2{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:clamp(20px,2.4vw,32px);row-gap:var(--s-7);align-items:start}
.fgrid2 .ftag{grid-column:1 / 7;max-width:30ch;margin:0;font-size:15px;line-height:1.6;color:var(--mist-52)}
.fcol2{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.fgrid2 > nav.fcol2{grid-column:7 / 10}
.fgrid2 > div.fcol2{grid-column:10 / 13}
.flabel{font-family:var(--f-label);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mist-38);margin-bottom:6px}
.fcol2 > a{font-size:15px;color:var(--mist-72);line-height:1.3;transition:color .25s ease}
.fcol2 > a:hover{color:var(--lagoon)}
.fclock{display:grid;grid-template-columns:18px 76px auto;align-items:center;column-gap:12px;
  color:var(--mist-72);line-height:1.3}
.fcf{width:18px;height:18px;display:block;color:var(--mist);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.fcf .fs{stroke:var(--lagoon)}
.fclock:hover .fcf{transform:scale(1.35)}
.fcity{font-size:15px}
.ftime{font-size:15px;color:var(--mist);font-variant-numeric:tabular-nums}
@media(max-width:720px){
  .fgrid2{grid-template-columns:1fr 1fr;row-gap:var(--s-7);column-gap:var(--s-5)}
  .fgrid2 .ftag{grid-column:1 / -1;font-size:14px}
  .fgrid2 > nav.fcol2{grid-column:1}
  .fgrid2 > div.fcol2{grid-column:2}
  .fclock{grid-template-columns:16px auto auto;column-gap:10px}
  .fcf{width:16px;height:16px}
}

/* ---------- v14.2 · buttons ----------
   Two kinds only: primary (filled) for the one action a section leads to,
   secondary (outline) for the way onward. Same size and spacing everywhere. */
.teamteaser .btns,#belief .pillars + .btns{margin-top:clamp(40px,5.5vh,60px)}
.teamteaser .btns{margin-top:clamp(36px,5vh,56px)}
@media(max-width:720px){
  .fclock{grid-template-columns:16px 62px auto}
  /* the later 36px floor pushed the wordmark past the right gutter */
  .fbig{font-size:7.6vw;letter-spacing:.02em}
}

/* ---------- v14.4 ----------
   copy: headings balance their lines, running text avoids a lone last word */
h1,h2,h3,h4,.h1,.h2,.h3,.lead,.pull,blockquote,.way-t,.pfline{text-wrap:balance}
p,li,.body,.tbio,.ftag,figcaption{text-wrap:pretty}

/* portfolio preview: the grid carries its own heading, the way on sits
   centred under it */
.pfblock.pv .h2.sub{margin-top:0}
.pfblock.pv .logogrid{margin-top:clamp(28px,4vh,44px)}
.btns.pv-more{justify-content:center}

/* secondary buttons hold their own ground over lines and film */
.btn.ghost{background:rgba(5,7,11,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn.ghost:hover{background:rgba(5,7,11,.78)}

/* working with + team read as one section: no rule between them */
.teamteaser{border-top:none;padding-top:0;margin-top:clamp(96px,13vh,160px)}

/* contact: one column, read top to bottom */
.cta3{display:flex;flex-direction:column;align-items:flex-start}
.cta3 .ctah{max-width:none}
.cta3 .body{margin-top:var(--s-6);max-width:44ch;font-size:var(--fs-lead);color:var(--mist-72)}
.cta3 .btns{margin-top:var(--s-6)}

/* footer offices: icon, time, city. Nothing moves on hover. */
.fclock{grid-template-columns:18px 50px auto;column-gap:12px}
.fclock:hover .fcf{transform:none}
.fclock .ftime{color:var(--mist)}
.fclock .fcity{color:var(--mist-52)}
@media(max-width:720px){.fclock{grid-template-columns:16px 46px auto;column-gap:10px}}
/* long running text: pretty, not balance (Chrome only balances up to six
   lines, and a lead should keep its full measure) */
.lead,.pull{text-wrap:pretty}
/* the rotating word always takes its own line */
.cta3 .ctah{text-wrap:wrap}
/* team teaser on a phone: face above the name, so names and roles keep the
   full column width and never break */
@media(max-width:720px){
  .teamteaser .partners{grid-template-columns:1fr 1fr;gap:var(--s-7) var(--s-5)}
  .teamteaser .partner{flex-direction:column;align-items:flex-start;gap:var(--s-3)}
  .teamteaser .pn2,.teamteaser .pr{white-space:nowrap}
}
.nw{white-space:nowrap}


/* ---------- v14.6 · one rhythm for every page ----------
   Label to title, title to text, text to buttons and section to section use
   the same four steps everywhere. html body raises the rules above the
   per-section margins written earlier in both stylesheets. */
:root{--r-label:22px;--r-text:26px;--r-block:clamp(44px,6vh,64px);
  --r-btn:clamp(40px,5.5vh,56px);--r-sub:clamp(110px,14vh,170px)}
html body .rowhead{margin-bottom:var(--r-label)}
html body :is(.h1,.h2){margin-top:0;margin-bottom:0}
html body .h2.sub{font-size:calc(var(--fs-h2) * var(--display-scale));line-height:1.14;max-width:none}
html body :is(.h1,.h2) + :is(p,.lead,.body){margin-top:var(--r-text);margin-bottom:0}
html body #firm .lead{margin-bottom:0}
html body :is(.h1,.h2,.lead,.pf-bar) + :is(.pillars,.partners,.logogrid,.tgrid,.art-img,.pf-ways,.fundgrid2){margin-top:var(--r-block)}
html body .art-img + .article-body{margin-top:var(--r-block)}
html body .btns{margin-top:var(--r-btn)}
html body :is(.teamteaser,.pfblock.pv,.ab-sec,.pf-list,.pf-funds){margin-top:var(--r-sub)}
/* every button the same width, whatever its label */
html body .btn{min-width:240px}
@media(max-width:720px){html body .btn{min-width:0}}

html body :is(.h1,.h2) + .article-body{margin-top:var(--r-text)}
html body .article-body > .body:first-child{margin-top:0}
/* team roles read the same on every page */
html body :is(.trole,.partner .pr){color:var(--mist-52)}

/* ---------- v14.8 · team hover: the role rolls over to LinkedIn ----------
   Two lines share one grid cell and clip to it; every letter moves on its own
   short delay, so the swap reads as a ripple, not a slide. */
.roll{display:inline-grid;overflow:hidden;vertical-align:top;line-height:1.3;padding-bottom:1px}
.roll > span{grid-area:1/1;white-space:nowrap}
.roll .ch{display:inline-block;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .35s ease;
  transition-delay:calc(var(--i) * 16ms)}
.roll .r2 .ch{transform:translateY(105%);opacity:0;color:var(--lagoon)}
a:hover .roll .r1 .ch{transform:translateY(-105%);opacity:0}
a:hover .roll .r2 .ch{transform:none;opacity:1}
a:focus-visible .roll .r1 .ch{transform:translateY(-105%);opacity:0}
a:focus-visible .roll .r2 .ch{transform:none;opacity:1}
@media(hover:none){.roll .r2{display:none}}
@media(prefers-reduced-motion:reduce){.roll .ch{transition:opacity .2s ease;transition-delay:0s}}
/* phone-only line break in a heading: keeps a coloured phrase in one piece */
@media(min-width:721px){br.mbr{display:none}}
/* the roll keeps the line height of the role it replaces, so rolled and
   plain roles sit on the same baseline */
.roll{line-height:inherit;padding-bottom:0}
/* phones: every button takes the full measure, so all read the same width */
@media(max-width:720px){html body .btns .btn{flex:1 1 100%;width:100%}}

/* ---------- v14.12 · phone claims: three lines at most ----------
   One size for every beat, sized so each authored phone line fits a 360px
   screen; the closing card carries three long lines and steps down a size. */
@media(max-width:720px){
  html body .beat .claim,html body .beat.is-centre .claim{font-size:min(34px,8.2vw);line-height:1.14;max-width:none}
  html body .beat[data-chapter="9"] .claim{font-size:min(29px,7.05vw)}
}

/* ---------- v14.12 · one company tile, home and portfolio ----------
   The grid draws its lines per tile, so it ends with the last company. The
   mark sits dead centre; the sector hangs at the foot of the tile and never
   pushes the mark up. Mark height follows 1/sqrt(aspect) via --f, so every
   logo carries the same visual weight. On touch the tile is the logo alone
   and a tap opens the company sheet (assets/pf.js). */
.pfgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:none;border:none;
  border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.pfgrid.pv3{grid-template-columns:repeat(3,1fr)}
.pfgrid .lgc{position:relative;aspect-ratio:1.6/1;padding:0 14px;text-align:center;
  display:flex;align-items:center;justify-content:center;
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.pfgrid .lgc[hidden]{display:none}
.pfgrid .lgc .mk{height:auto;min-height:0;display:flex;align-items:center;justify-content:center;width:100%}
.pfgrid .lgc .mk img,.pfgrid .lgc .mk img.is-ico{height:calc(var(--f) * 80px);width:auto;
  max-height:none;max-width:72%}
.pfgrid .lgc .wm2{font-size:calc(clamp(19px,1.9vw,25px) * var(--display-scale))}
.pfgrid .lgc .sec,.pfgrid .lgc .disc{position:absolute;left:0;right:0;bottom:clamp(14px,9%,24px);
  text-align:center;display:flex;justify-content:center;align-items:center;gap:8px}
.pfgrid .lgc .disc{white-space:nowrap}
.pfgrid .lgc .disc i{font-style:normal;opacity:.5;margin:0 2px}
.pfgrid .lgc.is-static{cursor:default}
@media(max-width:900px){.pfgrid,.pfgrid.pv3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){
  .pfgrid .lgc{aspect-ratio:1.28/1;padding:0 10px}
  .pfgrid .lgc .mk img,.pfgrid .lgc .mk img.is-ico{height:calc(var(--f) * 58px);max-width:78%}
  .pfgrid .lgc .wm2{font-size:18px}
}
@media(hover:none){
  .pfgrid .lgc .sec,.pfgrid .lgc .disc{display:none}
  .pfgrid .lgc{cursor:pointer}
}
/* the filter sits right on the grid: its lower edge is the grid's top line */
html body .pf-bar{align-items:flex-end}
html body .pf-bar .h2{margin-bottom:var(--r-text)}
html body .pf-bar + .pfgrid{margin-top:0}
.pf-bar .seg{border-bottom:0}
@media(max-width:720px){html body .pf-bar{gap:0}}

/* company sheet (phones): the tile's company on its own card, from below */
.pf-sheet{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;
  background:rgba(1,2,6,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .3s ease}
.pf-sheet.is-open{opacity:1}
.pf-sheet[hidden]{display:none}
.pfs-card{position:relative;width:100%;background:#0B1017;border-top:1px solid var(--hair);
  padding:72px var(--gutter) calc(32px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:center;text-align:center;
  transform:translateY(40px);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.pf-sheet.is-open .pfs-card{transform:none}
.pfs-close{position:absolute;top:16px;left:16px;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(234,240,245,.2);background:none;color:var(--mist);font-size:18px;cursor:pointer}
.pfs-mk .mk{display:flex;align-items:center;justify-content:center;min-height:64px}
.pfs-mk img{height:calc(var(--f,.45) * 96px);width:auto;max-width:70vw;filter:brightness(0) invert(1)}
.pfs-mk .wm2{font-family:var(--f-display);font-weight:var(--display-weight);font-size:30px}
.pfs-name{margin-top:var(--s-6);font-size:17px;font-weight:600}
.pfs-meta{margin-top:8px;font-family:var(--f-label);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mist-52)}
.pfs-meta i{font-style:normal;opacity:.5}
.pfs-go{margin-top:var(--s-7);width:100%;justify-content:center}
.pfs-go[hidden]{display:none}
html.sheet-open,html.sheet-open body{overflow:hidden}
@media(max-width:720px){
  html body .pf-bar{flex-direction:column;align-items:stretch}
  html body .pf-bar .h2{text-align:left}
  html body .pf-bar .seg{display:flex;width:100%}
}
html body :is(.ab-sec,.pf-list,.pf-funds,#portfolio,#team){scroll-margin-top:calc(110px + env(safe-area-inset-top,0px))}

/* ---------- v14.15 · phone claims: two lines where the copy allows ----------
   Only one claim is ever on screen, so each takes the largest size at which
   its own lines fit the width: --cw is the widest line measured at 1px. */
@media(max-width:720px){
  html body .beat .claim,html body .beat.is-centre .claim,html body .beat[data-chapter="9"] .claim{
    font-size:min(34px, calc((100vw - 2 * var(--gutter)) / var(--cw) * .96));line-height:1.14;max-width:none}
}

/* the filter keeps a little air above the grid */
html body .pf-bar + .pfgrid{margin-top:14px}
.pf-bar .seg{border-bottom:1px solid rgba(234,240,245,.16)}

/* one nav on every page: the logo leads home everywhere, no back link */
@media(max-width:720px){
  html body .nav .wordmark{display:inline-flex}
  html body .nav-back{display:none}
}
.pfs-close{left:auto;right:16px}

/* ---------- v14.19 · one entrance for everything ----------
   Every block and every line of running text arrives the same way: a short
   rise with a fade, same duration and curve on every page. The line reveal
   drops its mask and blur so it reads as the same motion, just finer. Hover
   transitions of tiles and links are kept alongside. */
/* v14.27: softer. Opacity builds evenly instead of jumping to 70 % in the
   first frames; the 20px rise settles on a long, gentle ease-out. */
:root{--in-dur:1.1s;--in-ease:cubic-bezier(.25,.8,.3,1);--in-fade:cubic-bezier(.4,0,.3,1);--in-y:20px}
html.has-js .reveal{opacity:0;transform:translate3d(0,var(--in-y),0);
  transition:opacity var(--in-dur) var(--in-fade),transform var(--in-dur) var(--in-ease),
    background-color .35s ease,border-color .3s ease,color .25s ease}
html.has-js .reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html.has-js .reveal,.flow .lni{opacity:1;transform:none;transition:none}
}
/* 12-hour clock: the time column holds "12:00 PM", so both offices align */
.fclock{grid-template-columns:18px 78px auto}
.fclock .ftime{white-space:nowrap}
@media(max-width:720px){.fclock{grid-template-columns:16px 70px auto;column-gap:8px}}
@media(max-width:720px){html body .fgrid2{grid-template-columns:.8fr 1.2fr}}
/* v14.27 · portfolio bar: headline and filter share one line on the wide
   frame, centred on each other; the bar carries the gap to the grid */
html body .pf-bar{align-items:center;margin-bottom:var(--r-text)}
html body .pf-bar .h2{margin-bottom:0}
html body .pf-bar + .pfgrid{margin-top:0}
@media(max-width:720px){
  html body .pf-bar{align-items:stretch;row-gap:var(--r-text);margin-bottom:14px}
}
/* the film's copy is picture, not text to edit or select: no selection and
   no insertion caret (a click or F7 caret browsing drew the system-accent
   caret straight through a claim) */
#film,#film *{-webkit-user-select:none;user-select:none;caret-color:transparent}
/* phones: a long role (Nate) wraps instead of being cut off */
@media(max-width:720px){html body .roll > span{white-space:normal}}
.roll .rw{display:inline-block;white-space:nowrap}