/* ============================================================
   DSR Global Solutions — design system
   Direction B "The Document", brand palette #111828 / #C8973A / #FFFFFF
   ============================================================ */

:root{
  /* brand */
  --ink:#111828;
  --gold:#C8973A;
  --white:#FFFFFF;

  /* derived — legibility only, same hue family */
  /* one radius scale, one easing curve: surfaces and motion agree */
  --r:10px;
  --r-s:5px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --sea:#02112C;          /* sampled from the hero photo's bottom row, so the
                             image dissolves into it with no visible seam */
  --ink-2:#1A2334;        /* cards / bands on dark */
  --gold-ink:#8F6A28;     /* gold text on white — 4.9:1. Brand gold is 2.6:1 and fails */
  --muted:#97A3B6;        /* secondary on ink — 6.9:1 */
  --ink-muted:#5A6478;    /* secondary on white — 6.0:1 */
  --rule:#DCE0E6;
  --rule-2:#EDEFF2;
  --rule-dark:rgba(255,255,255,.16);
  --slate:#8FA3BC;        /* second duotone tint */

  /* Display: Barlow Condensed stands in for Breuer Condensed, which is a commercial
     TypeTrust licence we do not hold. Closest free match in width and weight. */
  --display:"Barlow Condensed","Oswald","Arial Narrow",sans-serif;
  --serif:var(--display);   /* kept as an alias so every existing rule follows */
  /* Devanagari has no coverage in the Latin faces — load it explicitly rather than
     letting each OS pick its own and render the shloka differently everywhere */
  --deva:"Noto Serif Devanagari","Nirmala UI","Devanagari Sangam MN",serif;
  --sans:"Open Sans",-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;

  --max:1240px;
  --pad:22px;
  --sect:50px;
}


@media(min-width:900px){:root{--pad:44px;--sect:72px}}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--white);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
@media(min-width:900px){body{font-size:18px}}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
section{padding:var(--sect) 0}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--white);
  padding:12px 20px;z-index:100}
.skip:focus{left:12px;top:12px}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.02}
/* condensed caps need positive tracking, not the negative a serif wants */
h1,h2{text-transform:uppercase;letter-spacing:.012em;font-weight:700}
h1{font-size:clamp(3rem,7.6vw,5.25rem)}
h2{font-size:clamp(2.125rem,4.4vw,3.25rem);line-height:1.05}
h3{font-size:1.25rem;line-height:1.2;letter-spacing:.004em;font-weight:600}
.lede{font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.6;color:var(--ink-muted);max-width:60ch}
.dark .lede{color:var(--muted)}
p+p{margin-top:15px}

/* section marker — the document device */
.mark{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-ink);display:flex;align-items:center;gap:12px;
  margin-bottom:18px}
.mark:before{content:"";width:26px;height:1px;background:currentColor;flex:none}
.dark .mark{color:var(--gold)}

.dark{background:var(--ink);color:var(--white)}
.dark h1,.dark h2,.dark h3{color:var(--white)}
.band{background:#FAFAFB}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 30px;
  font-family:var(--sans);font-size:.9063rem;font-weight:600;letter-spacing:.015em;
  text-decoration:none;border:1px solid transparent;border-radius:var(--r-s);cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.btn-ink{background:var(--ink);color:var(--white)}
.btn-ink:hover{background:var(--ink-2)}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:#D8A94C}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--white)}
.dark .btn-line{border-color:rgba(255,255,255,.4);color:var(--white)}
.dark .btn-line:hover{background:var(--white);color:var(--ink)}
.tlink{display:inline-block;font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--gold-ink);padding-bottom:5px}
.dark .tlink{color:var(--white);border-color:var(--gold)}
/* the same arrow the buttons use, so the two link styles behave alike */
.tlink::after{content:"→";margin-left:9px;display:inline-block;
  transition:transform .32s var(--ease)}
.tlink:hover::after,.tlink:focus-visible::after{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){
  .tlink::after{transition:none}
  .tlink:hover::after,.tlink:focus-visible::after{transform:none}
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold-ink);outline-offset:3px}
.dark a:focus-visible,.dark button:focus-visible{outline-color:var(--gold)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--rule)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;height:83px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
/* The logo is a stacked lockup: emblem over "DSR / GLOBAL SOLUTIONS". A square-ish
   lockup cannot read in an 83px bar, so the two halves are cut from the same
   artwork and set side by side. The wordmark is scaled up relative to the emblem
   -- holding the original ratio would leave "GLOBAL SOLUTIONS" about 5px tall. */
.brand .mk{height:46px;width:auto;flex:none}
.brand .wm{height:33px;width:auto;flex:none}
@media(max-width:479px){.brand{gap:9px}.brand .mk{height:38px}.brand .wm{height:27px}}
.nav{display:none;align-items:center;gap:30px}
@media(min-width:960px){.nav{display:flex}}
.nav a{font-family:var(--display);font-size:1.375rem;font-weight:600;letter-spacing:.055em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);padding:4px 0;
  border-bottom:1px solid transparent}
.nav a:hover{border-color:var(--gold-ink)}
.nav a[aria-current="page"]{color:var(--gold-ink);border-color:var(--gold-ink)}
/* .nav a sets color:var(--ink), which beat .btn-ink and left the label
   ink-on-ink at 1:1. Restate it here, where the specificity wins. */
.nav .btn{min-height:40px;padding:0 20px;border-bottom:0;color:var(--white)}
.nav .btn-ink:hover,
.nav .btn-ink:focus-visible,
.nav .btn-ink:active{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.nav .btn:hover{border-color:transparent}
.burger{display:flex;flex-direction:column;gap:5px;background:none;border:0;
  padding:12px;margin-right:-12px;cursor:pointer}
@media(min-width:960px){.burger{display:none}}
.burger span{width:21px;height:1.5px;background:var(--ink);display:block}


/* ---------- mobile menu ---------- */
.mnav{position:fixed;inset:0;z-index:60;background:var(--white);display:flex;flex-direction:column;
  padding:0 var(--pad) 36px;transform:translateY(-101%);visibility:hidden;
  transition:transform .36s var(--ease)}
.mnav.open{transform:none;visibility:visible}
.mnav-top{display:flex;align-items:center;justify-content:space-between;height:70px;
  border-bottom:1px solid var(--rule)}
.mnav-x{background:none;border:0;color:var(--ink);font-size:1.6rem;line-height:1;
  padding:12px;margin-right:-12px;cursor:pointer;font-family:var(--sans)}
.mnav nav{flex:none;margin-top:12px}
.mnav nav a{display:flex;align-items:baseline;gap:14px;font-family:var(--display);font-size:1.875rem;text-transform:uppercase;letter-spacing:.04em;
  font-weight:600;line-height:1.1;letter-spacing:-.02em;text-decoration:none;color:var(--ink);
  padding:17px 0;border-bottom:1px solid var(--rule-2)}
.mnav nav a i{font-family:var(--mono);font-style:normal;font-size:.625rem;
  color:var(--gold-ink);letter-spacing:.1em}
.mnav .btn{margin-top:26px;width:100%;flex:none}
.mnav-foot{margin-top:auto;padding-top:24px;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.05em;color:var(--ink-muted);line-height:2}
@media(min-width:960px){.mnav{display:none}}
body.locked{overflow:hidden}

/* ---------- heroes ---------- */
.hero{padding-top:48px;padding-bottom:var(--sect);border-bottom:1px solid var(--rule)}
@media(min-width:900px){.hero{padding-top:96px}}
.hero-grid{display:grid;gap:48px}
@media(min-width:980px){.hero-grid{grid-template-columns:1.6fr .8fr;gap:72px}}
.hero h1{max-width:14ch;margin-bottom:26px}
.hero .lede{margin-bottom:38px}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.phero{padding-top:44px;padding-bottom:var(--sect);border-bottom:1px solid var(--rule)}
@media(min-width:900px){.phero{padding-top:88px}}
.phero h1{max-width:18ch;margin-bottom:24px;font-size:clamp(2.75rem,6.8vw,4.5rem)}

/* dossier — bordered fact column */
.dossier{border-top:2px solid var(--ink);padding-top:20px;align-self:start}
.dark .dossier{border-top-color:var(--gold)}
.dossier dt{font-family:var(--mono);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:5px}
.dark .dossier dt{color:var(--muted)}
.dossier dd{font-family:var(--serif);font-size:1rem;font-weight:600;padding-bottom:15px;
  margin-bottom:15px;border-bottom:1px solid var(--rule-2)}
.dark .dossier dd{border-bottom-color:var(--rule-dark)}
.dossier dd:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}

/* ---------- ruled register ---------- */
.reg{border-top:1px solid var(--ink);margin-top:48px}
.dark .reg{border-top-color:var(--gold)}
.reg-row{display:grid;gap:6px 22px;padding:26px 0;border-bottom:1px solid var(--rule-2);
  align-items:baseline}
@media(min-width:800px){.reg-row{grid-template-columns:52px 1fr 1.05fr;gap:0 30px;padding:28px 0}}
.dark .reg-row{border-bottom-color:var(--rule-dark)}
.reg-n{font-family:var(--mono);font-size:.8125rem;font-weight:500;color:var(--gold-ink)}
.dark .reg-n{color:var(--gold)}
.reg-t h3{margin-bottom:5px}
.reg-t p{font-size:.9375rem;color:var(--ink-muted)}
.dark .reg-t p{color:var(--muted)}
.reg-a{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;color:var(--ink-muted);
  line-height:1.85}
.dark .reg-a{color:var(--muted);opacity:.85}

.pull{margin-top:52px;font-family:var(--serif);font-size:clamp(1.625rem,3.1vw,2.375rem);
  line-height:1.32;letter-spacing:-.018em;max-width:24ch;padding-left:26px;
  border-left:2px solid var(--gold)}

/* ---------- two column ---------- */
.two{display:grid;gap:48px;margin-top:48px}
.two > *{min-width:0}
@media(min-width:900px){.two{grid-template-columns:1.1fr .9fr;gap:72px}}
.two.even{grid-template-columns:1fr}
@media(min-width:900px){.two.even{grid-template-columns:1fr 1fr}}

/* status rules list */
.rules{border-top:1px solid var(--rule-dark)}
.rules>div{padding:22px 0;border-bottom:1px solid var(--rule-dark)}
.rules .rr{display:flex;justify-content:space-between;gap:18px;align-items:baseline}
.rules .st{font-family:var(--mono);font-size:.625rem;letter-spacing:.11em;text-transform:uppercase;
  white-space:nowrap}
.st-on{color:var(--gold)}
.st-off{color:var(--muted)}
.rules p{margin-top:8px;font-size:.9063rem;color:var(--muted);max-width:50ch}

/* boxed list */
.boxed{border:1px solid var(--rule-dark);padding:30px 28px;align-self:start}
.boxed.light{border-color:var(--rule)}
.boxed h3{margin-bottom:18px}
.boxed li{list-style:none;display:flex;gap:14px;padding:13px 0;border-top:1px solid var(--rule-dark);
  font-size:.9375rem}
.boxed.light li{border-top-color:var(--rule-2)}
.boxed li i{font-family:var(--mono);font-style:normal;font-size:.6875rem;color:var(--gold);padding-top:3px}
.boxed.light li i{color:var(--gold-ink)}

/* ---------- column set ---------- */
.cols{display:grid;gap:0;margin-top:48px;border-top:1px solid var(--ink)}
.dark .cols{border-top-color:var(--gold)}
@media(min-width:860px){.cols{grid-template-columns:repeat(3,1fr)}}
.col{padding:34px 0;border-bottom:1px solid var(--rule-2)}
.dark .col{border-bottom-color:var(--rule-dark)}
@media(min-width:860px){
  .col{padding:38px 34px 40px;border-bottom:0;border-right:1px solid var(--rule-2)}
  .dark .col{border-right-color:var(--rule-dark)}
  .col:first-child{padding-left:0}
  .col:last-child{padding-right:0;border-right:0}
}
.col-n{font-family:var(--mono);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:16px}
.dark .col-n{color:var(--muted)}
.col.lead .col-n{color:var(--gold-ink)}
.dark .col.lead .col-n{color:var(--gold)}
.col h3{font-size:1.3125rem;margin-bottom:13px}
.col.lead h3{font-size:1.5rem}
.col p{font-size:.9375rem;color:var(--ink-muted);margin-bottom:24px}
.dark .col p{color:var(--muted)}

/* ---------- facts ---------- */
.facts{border-top:2px solid var(--ink)}
.dark .facts{border-top-color:var(--gold)}
.facts>div{display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--rule-2)}
.dark .facts>div{border-bottom-color:var(--rule-dark)}
.facts dt{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-muted)}
.dark .facts dt{color:var(--muted)}
.facts dd{font-family:var(--serif);font-size:1.0625rem;font-weight:600;text-align:right}

/* ---------- steps ---------- */
.steps{border-top:1px solid var(--rule-dark)}
.steps.light{border-top-color:var(--rule)}
.steps li{list-style:none;display:flex;gap:20px;padding:17px 0;
  border-bottom:1px solid var(--rule-dark);align-items:baseline}
.steps.light li{border-bottom-color:var(--rule-2)}
.steps i{font-family:var(--mono);font-style:normal;font-size:.75rem;color:var(--gold);flex:none}
.steps.light i{color:var(--gold-ink)}
.steps b{font-family:var(--serif);font-size:1rem;font-weight:600;display:block}
.steps small{color:var(--muted);font-size:.8125rem;display:block;margin-top:2px}
.steps.light small{color:var(--ink-muted)}

/* ---------- team ---------- */
/* four across, filling the container — cards, not floating circles */
.team{display:grid;gap:18px;margin-top:48px;grid-template-columns:repeat(2,1fr)}
@media(min-width:1000px){.team{grid-template-columns:repeat(5,1fr);gap:22px}}
.person{text-align:center;background:var(--white);border:1px solid var(--rule);
  border-radius:var(--r);padding:30px 18px 26px}
.band .person{background:#FFFFFF}
.dark .person{background:var(--ink-2);border-color:var(--rule-dark)}
/* portrait sits inside the card at a fixed size, so cards can widen without the photo growing */
.team .person .duo{width:118px;height:118px;margin:0 auto 18px}
.duo{position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;
  margin-bottom:18px;background:var(--gold)}
.duo img{width:100%;height:100%;object-fit:cover;object-position:center 20%;}
.duo.mono{display:flex;align-items:center;justify-content:center;font-family:var(--serif);
  font-size:clamp(1.625rem,4vw,2.125rem);font-weight:600;letter-spacing:.03em;color:var(--ink)}
.duo.mono:after{display:none}
.person h3{margin-bottom:6px}
.person p{font-size:.8125rem;color:var(--ink-muted);line-height:1.5}
.dark .person p{color:var(--muted)}
.person .cert{display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold-ink);margin-top:7px}
.dark .person .cert{color:var(--gold)}

/* founder feature */
.founder{display:grid;gap:40px;margin-top:52px;padding-top:52px;border-top:1px solid var(--rule)}
@media(min-width:860px){.founder{grid-template-columns:220px 1fr;gap:56px;align-items:start}}
.f-photo{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:var(--rule-2);max-width:220px}
.f-photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%;}
.f-name{font-family:var(--serif);font-size:clamp(1.75rem,3.2vw,2.25rem);font-weight:600;
  letter-spacing:-.02em;line-height:1.1}
.f-role{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-ink);margin-top:12px}
.f-bio{margin-top:24px;color:var(--ink-muted);max-width:58ch}

/* ---------- forms ---------- */
.form{max-width:520px}
.field{margin-bottom:24px}
.field label{display:block;font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:9px}
.dark .field label{color:var(--muted)}
.field input,.field select,.field textarea{width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--rule);color:var(--ink);font-family:var(--sans);font-size:1rem;
  padding:11px 0;min-height:48px;border-radius:0}
.dark .field input,.dark .field select,.dark .field textarea{
  border-bottom-color:var(--rule-dark);color:var(--white)}
.field textarea{min-height:120px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-bottom-color:var(--gold-ink)}
.dark .field input:focus,.dark .field select:focus,.dark .field textarea:focus{
  border-bottom-color:var(--gold)}
.field select option{background:var(--white);color:var(--ink)}
.dark .field select option{background:var(--ink-2);color:var(--white)}
.hp{position:absolute;left:-9999px}
.form-note{margin-top:16px;font-size:.8125rem;color:var(--ink-muted)}
.dark .form-note{color:var(--muted)}

/* ---------- animated hero ---------- */
.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.hero-motif{position:absolute;top:50%;right:-16%;transform:translateY(-50%);
  width:min(760px,105vw);aspect-ratio:1;opacity:.07;pointer-events:none;z-index:0}
.hero-motif svg{width:100%;height:100%;transform-origin:50% 50%;
  animation:dsr-rotate 180s linear infinite}
.hero-motif .sweep{transform-origin:50% 50%;animation:dsr-rotate 14s linear infinite}
@keyframes dsr-rotate{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .hero-motif svg,.hero-motif .sweep{animation:none}
}

/* three pillars, stated in the hero */
.ps-set{display:grid;gap:0;margin-top:48px;border-top:1px solid var(--ink)}
@media(min-width:820px){.ps-set{grid-template-columns:repeat(3,1fr)}}
.ps{padding:22px 0;border-bottom:1px solid var(--rule-2)}
@media(min-width:820px){
  .ps{padding:24px 30px 26px 0;border-bottom:0;border-right:1px solid var(--rule-2)}
  .ps:last-child{border-right:0;padding-right:0}
}
.ps-n{font-family:var(--mono);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:10px}
.ps h3{font-size:1.125rem;margin-bottom:7px}
.ps p{font-size:.875rem;color:var(--ink-muted);line-height:1.6}

/* capability + experience strips */
.exp{display:grid;gap:1px;background:var(--rule-dark);margin-top:44px;
  border:1px solid var(--rule-dark)}
@media(min-width:640px){.exp{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.exp{grid-template-columns:repeat(4,1fr)}}
.exp>div{background:var(--ink);padding:26px 24px}
.exp b{font-family:var(--serif);font-size:1.75rem;font-weight:600;color:var(--gold);
  display:block;line-height:1.05}
.exp span{display:block;font-size:.8125rem;color:var(--muted);margin-top:11px;line-height:1.55}

/* ---------- in-section divider ---------- */
.split{margin-top:60px;padding-top:56px;border-top:1px solid var(--rule)}
.split h2{margin-bottom:6px}

/* ---------- synthesis bridge — closes the argument, routes onward ---------- */
.bridge{background:var(--ink);color:var(--white);padding:38px 30px;margin-top:60px}
@media(min-width:900px){.bridge{padding:48px 44px}}
.bridge .mark{color:var(--gold)}
.bridge h3{font-family:var(--serif);color:var(--white);font-size:clamp(1.375rem,2.4vw,1.75rem);
  font-weight:600;letter-spacing:-.02em;line-height:1.2;margin-bottom:14px;max-width:24ch}
.bridge>p{color:var(--muted);max-width:64ch;font-size:1rem;line-height:1.65}
.bridge-set{display:grid;gap:0;margin-top:36px;border-top:1px solid var(--rule-dark)}
@media(min-width:860px){.bridge-set{grid-template-columns:repeat(3,1fr)}}
.bg-item{padding:24px 0;border-bottom:1px solid var(--rule-dark)}
@media(min-width:860px){
  .bg-item{padding:26px 28px 28px 0;border-bottom:0;border-right:1px solid var(--rule-dark)}
  .bg-item:last-child{border-right:0;padding-right:0}
}
.bg-n{font-family:var(--mono);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);margin-bottom:11px}
.bg-item h4{font-family:var(--serif);font-size:1.1875rem;font-weight:600;letter-spacing:-.015em;
  margin-bottom:9px;color:var(--white)}
.bg-item p{font-size:.875rem;color:var(--muted);line-height:1.6;margin-bottom:20px}

/* ---------- proof of work ---------- */
.proof{margin-top:22px;padding-left:22px;border-left:2px solid var(--gold-ink);max-width:54ch}
.proof q{font-family:var(--serif);font-size:1.0625rem;line-height:1.55;quotes:none}
.proof span{display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-muted);margin-top:11px}
.dark .proof{border-left-color:var(--gold)}
.dark .proof span{color:var(--muted)}

/* ---------- team lockup (home) ---------- */
.tl{display:flex;align-items:center;gap:24px;margin-top:40px;flex-wrap:wrap;
  text-decoration:none;color:inherit}
.tl-faces{display:flex;align-items:center;flex:none}
.tl-faces .duo{width:78px;height:78px;margin:0;flex:none;
  box-shadow:0 0 0 3px var(--white)}
.tl-faces .duo:not(:first-child){margin-left:-22px}
.tl-txt h3{font-size:1.25rem;margin-bottom:5px}
.tl-txt p{font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold-ink)}
.tl:hover .tl-txt p{text-decoration:underline;text-underline-offset:4px}

/* ---------- callout ---------- */
.note{margin-top:26px;padding:18px 22px;background:rgba(200,151,58,.11);
  border-left:2px solid var(--gold-ink);font-size:.875rem;line-height:1.7;max-width:76ch}
.dark .note{background:rgba(200,151,58,.13);border-left-color:var(--gold)}

/* ---------- closing ---------- */
.closing{text-align:center;border-top:1px solid var(--rule)}
.closing .mark{justify-content:center}
.closing h2{max-width:17ch;margin:0 auto 18px}
.closing .lede{margin:0 auto 34px;text-align:center}

/* ---------- footer ----------
   One row: logo, social, reach. The logo is the same horizontal lockup the
   header uses -- the stacked block was too tall for a footer this shallow. */
.ftr{background:var(--ink);color:var(--white);padding:30px 0 20px}
.ftr-row{display:flex;align-items:center;flex-wrap:wrap;gap:20px 30px}
@media(min-width:900px){.ftr-row{flex-wrap:nowrap;justify-content:space-between;gap:36px}}
.ftr-brand{display:flex;align-items:center;gap:10px;flex:none}
.ftr-brand .mk{height:40px;width:auto}
.ftr-brand .wm{height:29px;width:auto}
.ftr-social{display:flex;flex-wrap:wrap;gap:9px}
.ftr-social a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border:1px solid rgba(255,255,255,.18);border-radius:50%;color:var(--muted);opacity:1;
  transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease)}
.ftr-social a:hover{color:var(--ink);border-color:var(--gold);background:var(--gold)}
.ftr-social svg{width:17px;height:17px;fill:currentColor;display:block}
.ftr-reach{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;font-size:.9063rem}
.ftr-reach span{font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
.ftr a{color:var(--white);text-decoration:none;opacity:.9}
.ftr a:hover{opacity:1;color:var(--gold)}
.ftr-b{margin-top:24px;padding-top:16px;border-top:1px solid var(--rule-dark);
  display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.04em;color:var(--muted)}

/* ============================================================
   HOME — layout set. Deliberately varied: no two sections share
   a structure, so the page reads as designed rather than tabulated.
   ============================================================ */

/* --- navy hero --- */
.jumbo{background:var(--ink);color:var(--white);position:relative;overflow:hidden;
  padding:88px 0 76px}
@media(min-width:900px){.jumbo{padding:128px 0 112px}}
.jumbo .wrap{position:relative;z-index:1}
.jumbo-art{position:absolute;top:50%;right:-20%;transform:translateY(-50%);
  width:min(860px,125vw);aspect-ratio:1;opacity:.14;pointer-events:none;z-index:0}
.jumbo-art svg{width:100%;height:100%;transform-origin:50% 50%;
  animation:dsr-rotate 220s linear infinite}
.jumbo-art .sweep{transform-origin:50% 50%;animation:dsr-rotate 16s linear infinite}
.kicker{font-family:var(--mono);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:26px}
.jumbo 
/* pillar chips — soft, not a grid */

/* --- oversized numeral list, offset --- */
.count{margin-top:52px}
.citem{display:grid;gap:4px 24px;padding:26px 0}
@media(min-width:760px){
  .citem{grid-template-columns:130px 1fr;align-items:start;padding:30px 0}
  .citem:nth-child(even){padding-left:56px}
}
.citem-n{font-family:var(--serif);font-size:clamp(2.75rem,6.4vw,4.25rem);font-weight:600;
  color:var(--gold-ink);opacity:.26;line-height:.8;letter-spacing:-.045em}
.citem h3{font-size:clamp(1.1875rem,2.2vw,1.5rem);margin-bottom:8px}
.citem>div>p{color:var(--ink-muted);max-width:52ch;font-size:.9688rem}
.citem-w{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-muted);opacity:.72;margin-top:13px}

/* --- regulatory timeline --- */
.tline{margin-top:56px}
.tline-set{display:grid;gap:36px;position:relative;padding-top:38px}
@media(min-width:880px){.tline-set{grid-template-columns:repeat(4,1fr);gap:28px}}
.tline-set:before{content:"";position:absolute;top:5px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold) 46%,rgba(200,151,58,.22) 100%)}
.tnode{position:relative;padding-right:14px}
.tnode:before{content:"";position:absolute;top:-38px;left:0;width:11px;height:11px;
  border-radius:50%;background:var(--gold)}
.tnode.ahead:before{background:var(--ink);box-shadow:inset 0 0 0 2px rgba(200,151,58,.55)}
.tstat{font-family:var(--mono);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);margin-bottom:11px}
.tnode.ahead .tstat{color:var(--muted)}
.tyear{font-family:var(--serif);font-size:1.875rem;font-weight:600;color:var(--white);
  line-height:1;margin-bottom:12px;letter-spacing:-.02em}
.tnode h4{font-family:var(--serif);font-size:1.0625rem;font-weight:600;color:var(--white);
  margin-bottom:7px}
.tnode p{font-size:.8438rem;color:var(--muted);line-height:1.6}

/* --- route cards --- */
.routes{display:grid;gap:18px;margin-top:44px}
@media(min-width:880px){.routes{grid-template-columns:repeat(3,1fr)}}
.route{background:var(--white);border:1px solid var(--rule);border-radius:var(--r);
  padding:30px 26px 28px;display:flex;flex-direction:column}
.route span.bar{height:3px;width:44px;background:var(--gold);display:block;margin-bottom:22px}
.route h4{font-family:var(--serif);font-size:1.3125rem;font-weight:600;letter-spacing:-.02em;
  margin-bottom:10px}
.route p{font-size:.9063rem;color:var(--ink-muted);line-height:1.62;flex:1;margin-bottom:22px}



/* --- display figures --- */
.figs{display:grid;gap:28px;margin-top:44px}
@media(min-width:700px){.figs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.figs{gap:24px}}
.fig b{font-family:var(--serif);font-size:clamp(2rem,4.2vw,3rem);font-weight:600;color:var(--gold);
  display:block;line-height:.98;letter-spacing:-.03em}
.fig span{display:block;font-size:.8125rem;color:var(--muted);margin-top:13px;line-height:1.55;
  max-width:24ch}

/* ============================================================
   ABOUT — editorial story, a drawn loop, and stated positions
   ============================================================ */

/* --- founder story --- */
.story{display:grid;gap:40px;margin-top:52px}
@media(min-width:900px){.story{grid-template-columns:260px 1fr;gap:70px;align-items:start}}
.story-portrait{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:var(--rule-2);max-width:260px}
@media(min-width:900px){.story-portrait{position:sticky;top:96px}}
.story-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 18%;}
.story-cap{margin-top:18px;font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-muted);line-height:1.9;max-width:260px}
.story-body{max-width:60ch}
.story-body p{font-size:1.0313rem;line-height:1.76;color:var(--ink-muted)}
.story-body p+p{margin-top:19px}
.story-body .open{font-family:var(--serif);font-size:clamp(1.625rem,3.1vw,2.1875rem);
  line-height:1.42;color:var(--ink);letter-spacing:-.018em;margin-bottom:26px}
.story-quote{margin:34px 0;padding-left:26px;border-left:2px solid var(--gold);
  font-family:var(--serif);font-size:clamp(1.1875rem,2.1vw,1.4375rem);line-height:1.42;
  color:var(--ink);letter-spacing:-.016em}
.story-beat{font-family:var(--serif);font-size:clamp(1.125rem,2vw,1.3125rem);color:var(--ink);
  font-weight:600;letter-spacing:-.018em;line-height:1.4}
.story-sign{margin-top:36px;padding-top:24px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-ink);line-height:2}

/* ============================================================
   THE THREE PILLARS  —  vessel band, then three vector boxes
   ------------------------------------------------------------
   Sits between the founder's story and the mission: the story
   ends on the gap, this names what was built around it.

   The band carries the type; the boxes below carry the three
   pillars as line drawings. Every drawing is a ship seen a
   different way -- the helm, the hull under way, the hull
   under measurement -- so the set reads as one company rather
   than three stock symbols.
   ============================================================ */
.pil{background:var(--white);padding:0 0 clamp(44px,6vh,72px)}

/* ---- the band ---- */
.pil-band{position:relative;isolation:isolate;overflow:hidden;background:var(--sea);
  min-height:clamp(320px,42vh,470px);display:grid;place-items:center}
.pil-ship{position:absolute;inset:0;z-index:0}
.pil-ship picture{position:absolute;inset:0;display:block}
.pil-ship img{width:100%;height:100%;display:block;object-fit:cover;
  object-position:50% 58%;filter:grayscale(1)}
/* Not decoration: it is what the white type stands on. Heaviest at the head
   where the sky runs near 235 and an earlier, lighter scrim left the lede at
   2.63:1, easing across the hull so the vessel keeps its form. */
.pil-band::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(4,14,32,.78) 0%,rgba(4,14,32,.66) 40%,
    rgba(4,14,32,.52) 70%,rgba(4,14,32,.72) 100%)}

.pil-head{position:relative;z-index:2;text-align:center;
  max-width:var(--max);margin:0 auto;
  padding:clamp(46px,7vh,84px) var(--pad)}
.pil-kicker{margin:0 0 12px;font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:#FFFFFF}
/* one line: 37 characters, so at 3.4vw it needs about 770px of the 1150
   available at 1366 -- nowrap holds it above the phone breakpoint */
.pil-h{margin:0;white-space:nowrap;font-size:clamp(1.55rem,3.4vw,3.05rem);
  line-height:1.06;letter-spacing:-.02em;color:#FFFFFF}
/* 660px splits 160 characters evenly over two lines instead of leaving a
   short third. White rather than a tint: the scrim stops are percentages, so
   on a shorter section a tint that passed at desktop measured 4.01:1. */
.pil-lede{margin:16px auto 0;max-width:min(660px,100%);
  font-size:.9375rem;line-height:1.7;color:#FFFFFF}

/* ---- the three boxes ---- */
.vcards{list-style:none;margin:clamp(-46px,-5vh,-34px) 0 0;padding:0;
  position:relative;z-index:3;
  display:grid;gap:clamp(14px,2vw,24px)}
@media(min-width:760px){.vcards{grid-template-columns:repeat(3,1fr)}}
.vcard{background:var(--white);border:1px solid var(--rule);border-radius:var(--r);
  padding:clamp(24px,3vw,34px) clamp(18px,2.4vw,28px) clamp(22px,2.6vw,30px);
  text-align:center;box-shadow:0 26px 50px -34px rgba(4,14,32,.4);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),
             border-color .45s var(--ease)}
.vcard:hover,.vcard:focus-within{transform:translateY(-6px);border-color:var(--gold);
  box-shadow:0 34px 60px -32px rgba(4,14,32,.5)}

.vc-art{display:block;width:clamp(112px,13vw,148px);margin:0 auto 18px}
.vc-art svg{display:block;width:100%;height:auto;
  stroke:var(--pc-navy);stroke-width:1.6}
.vc-thin{stroke-dasharray:3 4}
/* gold-ink, not --gold: brand gold is 2.64:1 on white and these lines carry
   meaning (the sea, the reading point), so 1.4.11 asks 3:1 of them. gold-ink
   is 4.93 and matches the verb beneath. */
.vc-sea{stroke:var(--gold-ink)}
.vc-dot{fill:var(--gold-ink);stroke:none}
/* the drawing warms to gold with the card, so hover reads as one gesture */
.vc-art svg{transition:stroke .45s var(--ease)}
.vcard:hover .vc-art svg,.vcard:focus-within .vc-art svg{stroke:var(--gold-ink)}

.vcard b{display:block;font-family:var(--serif);
  font-size:clamp(1rem,1.4vw,1.1875rem);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink)}
.vcard i{display:block;margin-top:6px;font-style:normal;font-family:var(--mono);
  font-size:.6875rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-ink)}

@media(max-width:759px){
  /* nowrap cannot hold 37 characters at this width */
  .pil-h{white-space:normal;font-size:clamp(1.5rem,7vw,2rem)}
  .vcards{margin-top:clamp(-34px,-4vh,-26px)}
  .vc-art{width:96px;margin-bottom:14px}
}

@media(prefers-reduced-motion:reduce){
  .vcard,.vc-art svg{transition:none}
  .vcard:hover,.vcard:focus-within{transform:none}
}

/* --- stated positions, alternating --- */
.creeds{margin-top:52px;display:flex;flex-direction:column;gap:50px}
.creed{max-width:62ch}
@media(min-width:880px){
  .creed:nth-child(even){margin-left:auto;text-align:right}
  .creed:nth-child(even) p{margin-left:auto}
}
.creed .idx{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);display:block;margin-bottom:15px}
.creed q{display:block;font-family:var(--serif);font-size:clamp(1.625rem,3.6vw,2.4375rem);
  line-height:1.29;letter-spacing:-.024em;quotes:none;color:var(--ink)}
.creed p{margin-top:16px;color:var(--ink-muted);font-size:.9688rem;line-height:1.7;max-width:52ch}
.dark .creed q{color:var(--white)}
.dark .creed p{color:var(--muted)}
.dark .creed .idx{color:var(--gold)}

/* --- mission --- */
.manifesto{font-family:var(--serif);font-size:clamp(2rem,4.8vw,3.25rem);line-height:1.25;
  letter-spacing:-.026em;max-width:21ch;color:var(--white);margin-bottom:26px}

/* --- entity facts --- */
.entity{display:grid;gap:24px;margin-top:52px;padding-top:32px;border-top:1px solid var(--rule)}
@media(min-width:760px){.entity{grid-template-columns:repeat(4,1fr)}}
.entity dt{font-family:var(--mono);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:8px}
.entity dd{font-size:.9375rem;line-height:1.6}

/* ---------- motion ---------- */
.rise{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   CONTACT — centred, full-bleed map
   ============================================================ */
.contact-page{text-align:center;padding:var(--sect) 0 0}
.contact-h{font-family:var(--display);font-size:2.5rem;font-weight:600;letter-spacing:-.024em;
  line-height:1.1;color:var(--gold-ink);margin-bottom:22px}
@media(min-width:900px){.contact-h{font-size:3.5rem}}
.contact-rule{width:74px;height:3px;background:var(--gold-ink);margin:0 auto;border:0}
.contact-lead{font-size:1.125rem;line-height:1.75;color:var(--ink);max-width:30ch;
  margin:64px auto 0;font-weight:400}
@media(min-width:900px){.contact-lead{font-size:1.5rem;max-width:58ch;margin-top:96px}}
.contact-lead a{color:var(--gold-ink);text-decoration:none;white-space:nowrap}
.contact-lead a:hover{text-decoration:underline;text-underline-offset:4px}
.ro{margin:64px auto 0;display:inline-block;text-align:center}
@media(min-width:900px){.ro{margin-top:96px}}
.ro h2{font-family:var(--sans);font-size:1.0625rem;font-weight:700;letter-spacing:0;
  color:var(--ink);margin-bottom:18px}
.ro address{font-style:normal;font-size:.9375rem;line-height:1.75;color:var(--ink-muted)}
.ro address b{color:var(--ink);font-weight:600;display:block;margin-bottom:2px}
.ro-tel{margin-top:22px;font-size:.9375rem;line-height:1.75;color:var(--ink-muted)}
.ro-tel a{color:var(--ink-muted);text-decoration:none}
.ro-tel a:hover{color:var(--gold-ink);text-decoration:underline;text-underline-offset:3px}
.map-full{margin-top:72px;height:300px;background:#F4F5F7;border-top:1px solid var(--rule)}
@media(min-width:900px){.map-full{height:400px}}
.map-full iframe{width:100%;height:100%;border:0;display:block}

/* ============================================================
   TEAM — intro band, then founder, then the two teams
   ============================================================ */
.team-hero{background:var(--ink);color:var(--white);padding:60px 0}
@media(min-width:900px){.team-hero{padding:84px 0}}
/* the founder card reads as a continuation of "Meet Our Team", so it sits
   close under it rather than a full section gap away */
.founder-sec{padding-top:clamp(26px,3.5vw,44px)}
/* that 44px cleared the "Founder" eyebrow, which is gone now */
.founder-sec .founder-card{margin-top:0}
.th-grid{display:grid;gap:34px}
@media(min-width:940px){.th-grid{grid-template-columns:1fr 1.1fr;gap:72px;align-items:center}}
.th-l h1{color:var(--white);font-size:clamp(2.75rem,7vw,4.5rem);letter-spacing:-.032em;
  line-height:1;margin:0}
.th-social{display:flex;align-items:center;gap:2px;margin-top:22px}
.th-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  color:var(--muted);transition:color .18s var(--ease)}
.th-social a:first-child{margin-left:-9px}
.th-social a:hover{color:var(--gold)}
.th-social svg{width:17px;height:17px;fill:currentColor;display:block}
.th-social .rulewide{flex:1;height:1px;background:rgba(255,255,255,.26);margin-left:14px}
.th-r p{font-size:1rem;line-height:1.78;color:var(--text)}
@media(min-width:900px){.th-r p{font-size:1.0625rem}}

/* domain line on a person card */
.person .domain{display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold-ink);margin-top:9px;line-height:1.6}
.dark .person .domain{color:var(--gold)}
.person .domain.tbc{color:var(--ink-muted);opacity:.7;font-style:normal}
.dark .person .domain.tbc{color:var(--muted);opacity:.6}
.dark.closing{border-top-color:var(--rule-dark)}

/* ============================================================
   FOUNDER FEATURE CARD — full-bleed inside the container,
   line-art vessel + data network behind, credential strip below
   ============================================================ */
.founder-card{position:relative;overflow:hidden;background:var(--white);color:var(--ink);
  border:1px solid var(--rule);border-radius:var(--r);margin-top:44px;padding:36px 26px 30px}
@media(min-width:900px){.founder-card{padding:56px 52px 44px}}
.fc-art{position:absolute;right:-5%;bottom:-7%;width:min(700px,94%);opacity:.16;
  pointer-events:none;z-index:0}
.fc-art svg{width:100%;height:auto;display:block;stroke:var(--gold);fill:none}
.fc-grid{position:relative;z-index:1;display:grid;gap:30px}
@media(min-width:820px){.fc-grid{grid-template-columns:236px 1fr;gap:54px;align-items:start}}
.fc-id{text-align:center}
@media(min-width:820px){
    .fc-id{
        text-align:center;
    }

    .fc-photo{
        margin-left:auto;
        margin-right:auto;
    }

    .fc-name{
        text-align:center;
    }

    .fc-role{
        text-align:center;
    }
}
.fc-photo{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:var(--rule-2);max-width:230px}
.fc-photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%;}
.fc-name{font-family:var(--display);font-size:clamp(1.875rem,3.4vw,2.5rem);font-weight:700;
  color:var(--ink);letter-spacing:-.024em;line-height:1.1;margin-top:22px}
.fc-role{font-family:var(--mono);font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-ink);margin-top:11px;line-height:1.7}
.fc-body{color:var(--ink-muted);font-size:1rem;line-height:1.78}
@media(min-width:980px){.fc-body{columns:2;column-gap:44px}}
.fc-body p{break-inside:avoid}
.fc-body p+p{margin-top:16px}
.fc-body b{color:var(--ink);font-weight:600}
.fc-link{margin-top:26px}
.fc-strip{position:relative;z-index:1;display:grid;gap:1px;background:var(--rule);
  margin-top:40px;border-top:1px solid var(--rule)}
@media(min-width:680px){.fc-strip{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.fc-strip{grid-template-columns:repeat(4,1fr)}}
.fc-stat{background:var(--white);padding:22px 4px 4px}
@media(min-width:680px){.fc-stat{padding:24px 22px 6px 0}}
.fc-stat b{display:block;font-family:var(--serif);font-size:1.375rem;font-weight:600;
  color:var(--gold-ink);line-height:1.1;letter-spacing:-.02em}
.fc-stat span{display:block;font-size:.8125rem;color:var(--ink-muted);margin-top:9px;line-height:1.5}

/* faint vessel/network motif behind a light section */
.artsec{position:relative;overflow:hidden}
.artsec > .wrap{position:relative;z-index:1}
.sec-art{position:absolute;right:-8%;top:50%;transform:translateY(-50%);width:min(600px,74%);
  opacity:.13;pointer-events:none;z-index:0}
.sec-art svg{width:100%;height:auto;display:block;stroke:var(--gold);fill:none}
.sec-art.left{left:-9%;right:auto}

/* ============================================================
   HOME — hero and problems share one photograph.
   ------------------------------------------------------------
   The photo is pinned to the top of the section and runs the
   whole way down. Over it sits a white strip that is solid
   behind the headline and fades to clear by the buttons, so the
   vessel reads through underneath them. Lower down the photo
   dissolves into --sea, sampled from its own bottom row, and the
   three problems sit on that water.
   ============================================================ */
.seascape{position:relative;isolation:isolate;background:var(--sea);color:var(--white);
  overflow:hidden;padding:0 0 clamp(56px,8vh,104px)}
/* the white pad drops the ship far enough that the gold container clears
   the opaque head of the strip; it is white so it reads as part of it */
.seascape-img{position:absolute;top:0;left:0;right:0;z-index:0;margin:0;
  padding-top:clamp(70px,12vw,180px);background:var(--white)}
.seascape-img picture{display:block;width:100%}
/* natural aspect: forcing a height makes cover zoom in until the vessel
   stops reading as a whole ship */
.seascape-img img{display:block;width:100%;height:auto}
.seascape-img::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(
  180deg,rgba(2,17,44,0) 58%,rgba(2,17,44,.78) 84%,var(--sea) 100%)}
.seascape .wrap{position:relative;z-index:2}
.seascape .mark{color:var(--gold)}
.seascape h2{color:var(--white)}

/* ---------- the white strip: solid at the sentence, clear at the buttons ---------- */
.hero-v{position:relative;z-index:2;color:var(--ink);text-align:center;padding:64px 0 76px;
  background:linear-gradient(180deg,var(--white) 0%,var(--white) 46%,
    rgba(255,255,255,.80) 64%,rgba(255,255,255,.38) 83%,rgba(255,255,255,0) 100%)}
@media(min-width:900px){.hero-v{padding:88px 0 104px}}
/* its own scale: the site h1 clamp cannot hold this to two lines on a phone */
.hero-v h1{font-size:clamp(1.5rem,6.1vw,5.25rem);max-width:none;margin:0 auto 26px}
@media(min-width:900px){.hero-v h1{margin-bottom:34px}}
.hero-v-cta{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}

/* the problems clear the vessel before they begin */
/* the vessel and its wake end at 0.71 of the photo; start the copy just
   under that so the section opens straight after the ship, not after a
   stretch of empty water */
.probs-wrap{padding-top:clamp(90px,calc(59.5vw - 439px),560px)}

/* phones get the near-square portrait crop, which would otherwise sit almost
   entirely behind the strip -- give it a height and let it cover */
@media(max-width:719px){
  .seascape-img{height:clamp(600px,88vh,780px);padding-top:clamp(120px,40vw,200px)}
  .seascape-img picture{height:100%}
  .seascape-img img{height:100%;object-fit:cover;object-position:center 58%}
  .probs-wrap{padding-top:clamp(150px,30vh,300px)}
}

/* ---------- the three problems, as a slideshow on the water ----------
   Heading holds the left column; the slides run in a scroll-snap track on
   the right. Snap gives phones native swipe for free, and the arrows and
   dots just drive scrollLeft, so touch and click stay in sync. */
@media(min-width:900px){
  .probs-wrap{
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:clamp(40px,5vw,72px);
    align-items:center
  }
}
.probs-lead h2{margin:0}
/* ---- the line under the problems ----
   Static by request. Full-bleed with a hairline above and below so it reads
   as a closing statement to the section rather than a stray caption.

   --gold, not --gold-ink: this sits on the seascape, where the ground is the
   vessel photograph over dark sea. The lighter gold is the one that reads
   there, and it is measured against the painted pixels, not a flat colour. */
.probs-line{margin:clamp(26px,4vh,44px) calc(50% - 50vw) 0;width:100vw;
  padding:clamp(14px,1.9vh,20px) var(--pad);
  border-top:1px solid rgba(200,151,58,.28);
  border-bottom:1px solid rgba(200,151,58,.28);
  text-align:center;white-space:nowrap;
  /* mono caps: the site's technical-label voice, and it sets this apart from
     the condensed display face in the heading above instead of competing with
     it. Caps read larger, so the size steps down to compensate. */
  font-family:var(--mono);font-size:clamp(.6875rem,1.05vw,.8125rem);
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold)}
/* 70 characters cannot hold one line inside 346px without dropping to about
   10px, so below 760 it wraps rather than shrinking past readability.
   No max-width here: 34ch of mono is only 224px of the 346px available, which
   forced a needless third line. Tracking eases off too, since caps at this
   size do not need as much of it. */
@media(max-width:759px){
  .probs-line{white-space:normal;letter-spacing:.1em;line-height:1.7;
    margin-left:auto;margin-right:auto;width:auto}
}

.probs{position:relative;margin-top:36px}
@media(min-width:900px){.probs{margin-top:0}}

.probs-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none}
.probs-track::-webkit-scrollbar{display:none}
.probs-track:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:var(--r)}
.prob{scroll-snap-align:center;scroll-snap-stop:always}

/* controls */
.probs-ui {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 22px;
}
.probs-arrow{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:none;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24);
  color:var(--white);font-size:1rem;line-height:1;
  transition:background .18s var(--ease),border-color .18s var(--ease)}
.probs-arrow:hover{background:rgba(255,255,255,.16);border-color:var(--gold)}
.probs-arrow:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.probs-dots{display:flex;align-items:center;gap:9px;margin-right:auto}
.probs-dot{width:8px;height:8px;padding:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.28);border:0;transition:background .18s var(--ease),width .18s var(--ease)}
.probs-dot[aria-selected="true"]{background:var(--gold);width:22px;border-radius:var(--r-s)}
.probs-dot:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.problem-bottom-box {
    grid-column: 1 / -1;
    justify-self: center;

    width: fit-content;
    max-width: 90%;

    margin: 10px auto 0;
    padding: 8px 18px;

    border: 1px solid #d4a62a;
    border-radius: 10px;

    background: #142f52;
    box-sizing: border-box;
    text-align: center;
}

.problem-bottom-box p {
    margin: 0;
    color: #f2c94c;
    font-size: 16px;
    font-weight: 500;
    font-style: italic;
    line-height: 1.3;
    white-space: nowrap;
}

@media(prefers-reduced-motion:reduce){
  .probs-track{scroll-behavior:auto}
  .probs-arrow,.probs-dot{transition:none}
}
.prob{border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:26px 22px 28px;
  background:rgba(255,255,255,.07);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.prob b{display:block;font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.12em;color:var(--gold);margin-bottom:12px}
.prob h3{color:var(--white);margin-bottom:10px}
.prob p{font-size:.9375rem;line-height:1.65;color:rgba(255,255,255,.8)}

/* ---------- animated buttons ---------- */
.btn-a{position:relative;display:inline-flex;align-items:center;gap:10px;
  min-height:54px;padding:0 30px;overflow:hidden;isolation:isolate;
  font-family:var(--sans);font-size:.9375rem;font-weight:600;letter-spacing:.015em;
  text-decoration:none;border-radius:var(--r-s);border:1px solid transparent;cursor:pointer;
  transition:color .28s var(--ease),border-color .28s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.btn-a > span,.btn-a > i{position:relative;z-index:1}
.btn-a::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;
  transform:translateX(-101%);
  transition:transform .44s var(--ease)}
.btn-a:hover::before,.btn-a:focus-visible::before{transform:translateX(0)}
.btn-a i{font-style:normal;font-size:1.0625rem;line-height:1;
  transition:transform .32s var(--ease)}
.btn-a:hover i,.btn-a:focus-visible i{transform:translateX(4px)}
.btn-a:hover,.btn-a:focus-visible{transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(17,24,40,.16)}
.btn-a:active{transform:translateY(0);box-shadow:none}

/* solid, sweeps to gold - ink on gold is 5.9:1 */
.btn-a-ink{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn-a-ink::before{background:var(--gold)}
.btn-a-ink:hover,.btn-a-ink:focus-visible{color:var(--ink);border-color:var(--gold)}

/* outline, sweeps to ink */
.btn-a-line{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-a-line::before{background:var(--ink)}
.btn-a-line:hover,.btn-a-line:focus-visible{color:var(--white);border-color:var(--ink)}

@media(prefers-reduced-motion:reduce){
  .btn-a,.btn-a::before,.btn-a i{transition:none}
  .btn-a:hover,.btn-a:focus-visible{transform:none;box-shadow:none}
  .btn-a:hover::before,.btn-a:focus-visible::before{transform:translateX(0)}
}

/* ============================================================
   CONSULTANCY BIOS — collapsed cards that expand on hover / click
   ------------------------------------------------------------
   Each card is absolutely positioned inside a fixed-height slot,
   so an expanded card grows downward over its neighbours instead
   of reflowing the grid. Width and position never change: the
   only movement is the card getting taller. Collapsed state
   clamps the bio to two lines; "Read more" is the touch and
   keyboard path to the same state hover gives a mouse.
   ============================================================ */
/* CONSULTANCY BIOS — collapsed until Read More is clicked */
/* ============================================================
   TEAM BIOS — READ MORE ONLY
   ============================================================ */
/* =========================================================
   CONSULTANCY BIOS — READ MORE CLICK EXPANSION
   ========================================================= */

/* ============================================================
   FINAL FIX — TEAM READ MORE
   ============================================================ */
/* ============================================================
   TEAM BIOS — CARD EXPANSION + READ MORE / READ LESS
   ============================================================ */

/* The slot must NOT have a fixed height */
.bios .person-slot {
  position: relative !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

/* The card must stay in normal document flow */
.bios .person {
  position: relative !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;

  box-sizing: border-box !important;

  overflow: visible !important;
}

/* CLOSED BIO — show only first 2 lines */
.bios .person .bio {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;

  max-height: none !important;
  height: auto !important;

  overflow: hidden !important;
}

/* OPEN BIO — show EVERYTHING */
.bios .person.is-open .bio {
  display: block !important;

  -webkit-line-clamp: unset !important;

  max-height: none !important;
  height: auto !important;

  overflow: visible !important;
}


/* ============================================================
   READ MORE / READ LESS
   ============================================================ */

.bios .person .bio-more {
  display: inline-block !important;
  position: relative !important;

  margin-top: 12px !important;
  margin-bottom: 0 !important;
  padding: 3px 0 !important;

  background: none !important;

  /* Remove browser button border */
  border: 0 !important;

  /* Keep only the small underline */
  border-bottom: 1px solid currentColor !important;

  border-radius: 0 !important;

  font-family: var(--mono) !important;
  font-size: .625rem !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;

  color: var(--gold-ink) !important;

  cursor: pointer !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  visibility: visible !important;
  opacity: 1 !important;
}

/* Hover */
.bios .person .bio-more:hover {
  color: var(--gold) !important;
}

/* Keyboard focus */
.bios .person .bio-more:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 3px !important;
}

/* Dark mode */
.dark .bios .person .bio-more {
  color: var(--gold) !important;
}


/* ============================================================
   HOVER MUST NOT OPEN THE CARD
   ============================================================ */

@media (hover: hover) and (pointer: fine) {

  .bios .person:hover {
    position: relative !important;

    top: auto !important;
    bottom: auto !important;

    z-index: auto !important;

    box-shadow: none !important;
    border-color: var(--rule) !important;
  }

  /* Closed card on hover */
  .bios .person:hover .bio {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;

    max-height: none !important;

    overflow: hidden !important;
  }


  /* ==========================================================
     CLICKED / OPEN CARD
     ========================================================== */

  .bios .person.is-open:hover {
    position: relative !important;

    top: auto !important;
    bottom: auto !important;

    z-index: 20 !important;

    box-shadow: 0 18px 44px rgba(17,24,40,.18) !important;

    border-color: var(--gold) !important;
  }

  /* Keep full information visible after clicking */
  .bios .person.is-open:hover .bio {
    display: block !important;

    -webkit-line-clamp: unset !important;

    max-height: none !important;
    height: auto !important;

    overflow: visible !important;
  }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 999px) {

  .bios .person-slot {
    min-height: 0 !important;
    height: auto !important;

    overflow: visible !important;
  }

  .bios .person {
    position: relative !important;

    height: auto !important;
    min-height: 0 !important;

    overflow: visible !important;
  }
}

/* ============================================================
   THE TEAM IN NUMBERS  +  LOGBRIDGE DEMO
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 24px;margin-top:44px}
@media(min-width:820px){.stats{grid-template-columns:repeat(5,1fr);gap:32px}}
.stat{border-top:1px solid var(--rule);padding-top:18px}
.dark .stat{border-color:var(--rule-dark)}
.stat dd{display:flex;align-items:baseline;gap:1px;margin:0 0 8px;
  font-family:var(--display);font-weight:700;line-height:1;color:var(--ink);
  font-size:clamp(2.5rem,5.2vw,3.75rem)}
.stat dd i{font-style:normal;font-size:.5em;color:var(--gold-ink)}
.stat .stat-word{font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:.01em}
.stat dt{font-family:var(--mono);font-size:.625rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-muted);line-height:1.5}
.stats-sec .tlink{margin-top:38px}

/* --- demo --- */
.demo{margin:40px 0 0}
.demo-frame{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(158deg,#1D273C 0%,#141C2E 52%,#0C121F 100%)}
.demo-art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:.22;pointer-events:none}
.demo-art svg{width:min(560px,78%);height:auto;display:block;stroke:var(--gold);fill:none}
.demo-soon{position:relative;z-index:1;font-family:var(--mono);font-size:.625rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(200,151,58,.42);border-radius:999px;padding:9px 18px;
  background:rgba(2,17,44,.55)}
.demo figcaption{margin-top:16px;font-size:.8125rem;color:var(--muted)}
.demo-sec .tlink{margin-top:34px}

/* ============================================================
   WEBGL BACKDROP  —  [data-gradient]
   ------------------------------------------------------------
   motion.js injects this canvas and sizes it from host.offsetHeight.
   Without these rules the canvas sits in normal flow, so its own
   height feeds back into the measurement and it grows every frame
   until it hits the browser ceiling (33,554,433px) and takes the
   tab with it. Absolute positioning breaks that loop.
   ============================================================ */
.has-gfx{position:relative}
.has-gfx > .gfx{position:absolute;inset:0;width:100%;height:100%;
  display:block;z-index:0;pointer-events:none}

/* ============================================================
   ORPHANED CLASSES — markup that shipped without matching rules
   ------------------------------------------------------------
   Each of these classes appears in the HTML but had no CSS at
   all, so the block fell back to raw browser defaults. Grouped
   here rather than scattered, so the gap stays visible.
   ============================================================ */

/* the home contact form: mirrors .field, on a dark ground */
.hf-form{max-width:520px}
.hf-row{display:grid;gap:0}
@media(min-width:620px){.hf-row{grid-template-columns:1fr 1fr;gap:24px}}
.hf-f{margin-bottom:24px}
/* written for a light ground now; the .dark variants keep it working if the
   form is ever placed back on ink */
.hf-f label{display:block;font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:9px}
.dark .hf-f label{color:var(--muted)}
.hf-f input,.hf-f textarea{width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--rule);color:var(--ink);
  font-family:var(--sans);font-size:1rem;padding:9px 0;border-radius:0}
.hf-f textarea{min-height:104px;resize:vertical;line-height:1.6}
.hf-f input:focus,.hf-f textarea:focus{outline:0;border-bottom-color:var(--gold)}
.hf-f input:focus-visible,.hf-f textarea:focus-visible{outline:2px solid var(--gold);
  outline-offset:3px}
.dark .hf-f input,.dark .hf-f textarea{border-bottom-color:var(--rule-dark);color:var(--white)}
.hf-note{margin-top:16px;font-size:.8125rem;color:var(--ink-muted)}
.dark .hf-note{color:var(--muted)}

/* "Where that experience was earned" */
.orgs-strip{margin-top:44px;padding-top:26px;border-top:1px solid var(--rule)}
.dark .orgs-strip{border-color:var(--rule-dark)}
.orgs-k{font-family:var(--mono);font-size:.625rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:12px}
.dark .orgs-k{color:var(--gold)}
.orgs-l{font-size:.9375rem;line-height:1.7;color:var(--ink-muted);max-width:70ch}
.dark .orgs-l{color:var(--muted)}
.orgs-n{margin-top:10px;font-size:.75rem;color:var(--ink-muted);opacity:.75}
.dark .orgs-n{color:var(--muted)}

/* the LogBridge CTA pair sat as two stacked blocks and collided */
.stage-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}

/* .tight was doing nothing: it read the same 72px as any section */
.tight{padding-top:clamp(48px,6vh,64px);padding-bottom:clamp(48px,6vh,64px)}

/* team bio headings had no rules and fell through to .person h3 / p */
.bio-h{font-size:1.125rem;margin-bottom:4px}
.bio-rank{font-family:var(--mono);font-size:.625rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:10px}
.dark .bio-rank{color:var(--gold)}

/* --- about: the approach trio, mission and shloka --- */
/* inherit rather than assert a colour: this sits on .jumbo (dark) on About
   and could sit on a light ground elsewhere. Asserting ink made it invisible. */
.big-lede{font-size:clamp(1.25rem,2.1vw,1.625rem);line-height:1.5;color:inherit;
  max-width:44ch;font-weight:600;letter-spacing:.004em}
/* the "Mission" eyebrow is gone, so this line carries the section alone. Set
   as a statement in the body face and sentence case, which keeps it distinct
   from the condensed uppercase used for section headings. */
.mission-lead{font-family:var(--sans);font-size:clamp(1.5rem,3.1vw,2.375rem);
  line-height:1.3;letter-spacing:normal;text-transform:none;font-weight:600;
  color:inherit;max-width:30ch;margin:0}
.approach{display:grid;gap:20px;margin-top:44px}
@media(min-width:900px){.approach{grid-template-columns:repeat(3,1fr);gap:26px}}
.ap{border-top:1px solid var(--rule);padding-top:20px}
.dark .ap{border-color:var(--rule-dark)}
.ap-k{font-family:var(--mono);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:12px}
.dark .ap-k{color:var(--gold)}
.ap p:not(.ap-k){font-size:.9375rem;line-height:1.7;color:var(--ink-muted)}
.dark .ap p:not(.ap-k){color:var(--muted)}
.ap b{color:var(--ink);font-weight:600}
.dark .ap b{color:var(--white)}

.shloka{margin-top:52px;padding:30px 0 0;border-top:1px solid var(--rule);
  display:grid;gap:12px}
.dark .shloka{border-color:var(--rule-dark)}
.shloka q{font-family:var(--deva),var(--serif);font-size:clamp(1.375rem,2.4vw,1.875rem);
  line-height:1.5;color:var(--gold-ink);quotes:none}
.dark .shloka q{color:var(--gold)}
.shloka span{font-size:.9375rem;line-height:1.7;color:var(--ink-muted);max-width:60ch}
.dark .shloka span{color:var(--muted)}
.shloka b{color:var(--ink);font-weight:600}
.dark .shloka b{color:var(--white)}

/* --- services: the research fields and the sequence note --- */
.fields{display:grid;gap:20px;margin-top:40px}
@media(min-width:820px){.fields{grid-template-columns:repeat(2,1fr);gap:24px}}
.field-i{border:1px solid var(--rule);border-radius:var(--r);padding:26px 24px 28px;
  background:var(--white);transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.field-i:hover{border-color:var(--gold);box-shadow:0 16px 36px -18px rgba(17,24,40,.18)}
.field-i .stage{display:inline-block;font-family:var(--mono);font-size:.625rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:12px}
.field-i h3{margin-bottom:9px}
.field-i p:not(.stage){font-size:.9063rem;line-height:1.7;color:var(--ink-muted)}
.seq{margin-top:40px;padding-left:20px;border-left:2px solid var(--gold);
  font-size:1rem;line-height:1.75;color:var(--ink-muted);max-width:66ch}
.dark .seq{color:var(--muted)}
.seq b{color:var(--ink);font-weight:600}
.dark .seq b{color:var(--white)}

/* --- logbridge --- */
.stage-box{border:1px solid var(--rule-dark);border-radius:var(--r);padding:24px 22px;
  background:rgba(255,255,255,.04)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--gold);margin-right:9px;vertical-align:middle}

/* --- shared --- */
.inline-link{color:inherit;text-decoration:none;
  border-bottom:1px solid var(--gold-ink);padding-bottom:1px;
  transition:border-color .18s var(--ease),color .18s var(--ease)}
.dark .inline-link{border-bottom-color:var(--gold)}
.inline-link:hover{color:var(--gold-ink);border-bottom-color:var(--gold)}
.dark .inline-link:hover{color:var(--gold)}
.hero-frm{margin-top:8px}

@media(prefers-reduced-motion:reduce){
  .field-i,.inline-link{transition:none}
}
.approach-k{font-family:var(--mono);font-size:.625rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-ink);margin-top:52px}
.dark .approach-k{color:var(--gold)}

/* ============================================================
   THE STORY — clamped, with a reading overlay
   ------------------------------------------------------------
   Collapsed it shows the opener and the first beat, faded out at
   the bottom. "Read the full story" moves the same DOM node into
   a dialog rather than duplicating it, so there is one copy of
   the text and the page behind dims away.
   ============================================================ */
.story-col{min-width:0}
.story-body.is-clamped{max-height:19.5rem;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 58%,transparent 100%)}
.story-more{margin-top:18px;padding:13px 26px;cursor:pointer;
  background:transparent;color:var(--ink);
  border:1px solid var(--rule);border-radius:var(--r-s);
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;
  transition:border-color .2s var(--ease),color .2s var(--ease),
             background .2s var(--ease)}
.story-more:hover{border-color:var(--gold);color:var(--gold-ink);
  background:rgba(200,151,58,.06)}
.story-more:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.story-modal{width:min(760px,92vw);max-height:88vh;padding:0;overflow:visible;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--white);
  color:var(--ink);box-shadow:0 40px 90px -30px rgba(3,10,24,.45)}
.story-modal::backdrop{background:rgba(6,12,24,.62);backdrop-filter:blur(4px)}
.story-modal-in{max-height:88vh;overflow-y:auto;padding:52px clamp(24px,4vw,56px) 48px}
.story-modal .story-body{max-width:none}
.story-modal .story-body.is-clamped{max-height:none;-webkit-mask-image:none;mask-image:none}
.story-close{position:absolute;top:14px;right:16px;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--white);border:1px solid var(--rule);border-radius:50%;
  font-size:1.25rem;line-height:1;color:var(--ink);
  transition:border-color .2s var(--ease),color .2s var(--ease)}
.story-close:hover{border-color:var(--gold);color:var(--gold-ink)}
.story-close:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* the overlay arrives, it does not appear */
.story-modal[open]{animation:story-in .32s var(--ease)}
.story-modal[open]::backdrop{animation:fade-in .32s var(--ease)}
@keyframes story-in{from{opacity:0;transform:translateY(10px) scale(.985)}
                    to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0} to{opacity:1}}
body.story-open{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  .story-modal[open],.story-modal[open]::backdrop{animation:none}
  .story-more,.story-close{transition:none}
}

/* ============================================================
   CENTRED SECTION INTROS
   ------------------------------------------------------------
   The intro of a section centres; the detail underneath stays
   left, where it is read. Centring body copy as well would cost
   readability for no gain, so it stops at the lede.
   ============================================================ */
.band > .wrap,
.stats-sec > .wrap,
.demo-sec > .wrap{text-align:center}

.band > .wrap > .mark,
.stats-sec > .wrap > .mark,
.demo-sec > .wrap > .mark{justify-content:center}

.band > .wrap > h2,
.stats-sec > .wrap > h2,
.demo-sec > .wrap > h2{margin-left:auto;margin-right:auto}

.band > .wrap > .lede{margin-left:auto;margin-right:auto}
.stats-sec > .wrap > .lede,
.demo-sec > .wrap > .lede{margin-left:auto;margin-right:auto;max-width:64ch}

/* stat figures read well centred; the pillar cards do not */
.stats .stat{text-align:center;border-top:0;position:relative;padding-top:22px}
.stats .stat::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:32px;height:2px;background:var(--gold)}
.stat dd{justify-content:center}
.cap,.capbox,.demo figcaption{text-align:left}
.demo figcaption{text-align:center}

/* Selected text used the browser's default blue, which sits badly on the
   dark grounds. Gold on ink reads on both, at 6.7:1. */
::selection{background:var(--gold);color:var(--ink)}
::-moz-selection{background:var(--gold);color:var(--ink)}

/* ============================================================
   PILLAR CARDS — three grounds, one structure
   ------------------------------------------------------------
   Each pillar owns a ground: navy for the product, cream for the
   people, gold for the research. Structure is identical across
   all three so they read as a set: label, headline, body, then
   the CTA pinned to the foot with the artwork below it.
   The whole card is the link.
   ============================================================ */
:root{
  --pc-navy:#12294B;
  --pc-navy-2:#0C1D38;
  --pc-cream:#F4F0E6;
  --pc-slate:#4A5A72;
}

/* no heading above the row any more, so the cards sit close under the section
   above; the gap between them opens up instead */
.cap{display:grid;gap:30px;margin-top:0}
@media(min-width:900px){.cap{grid-template-columns:repeat(3,1fr);gap:34px}}

.pcard{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;
  border-radius:26px;padding:38px 34px 0;text-decoration:none;text-align:left;
  transition:transform .38s var(--ease),box-shadow .38s var(--ease)}
.pcard:hover{transform:translateY(-8px);box-shadow:0 30px 60px -28px rgba(6,14,32,.42)}
.pcard:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* the soft shape behind the copy, as in the artwork */
.pcard-blob{position:absolute;top:-22%;right:-24%;width:78%;aspect-ratio:1;z-index:0;
  border-radius:46% 54% 38% 62%/52% 40% 60% 48%;opacity:.5;pointer-events:none}

/* must exclude the blob: a blanket rule here overrode its absolute
   positioning and it became a 234px-tall flex child */
.pcard > *:not(.pcard-blob){position:relative;z-index:1}

.pcard-k{display:flex;align-items:center;gap:10px;margin-bottom:18px;
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase}
.pcard-k svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.pcard h3{font-family:var(--sans);font-size:clamp(1.375rem,1.9vw,1.75rem);
  font-weight:700;line-height:1.22;letter-spacing:-.012em;text-transform:none;margin-bottom:16px}
.pcard > p{font-size:.9375rem;line-height:1.68;margin-bottom:28px}

/* CTA sits at the foot of the copy, so all three align across the row */
.pcard-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:999px;font-family:var(--sans);
  font-size:.9375rem;font-weight:700;letter-spacing:.005em}
.pcard-cta i{font-style:normal;font-size:1.0625rem;line-height:1;
  transition:transform .34s var(--ease)}
.pcard:hover .pcard-cta i{transform:translate(3px,-3px)}

/* artwork panel: floats gently, and lifts a touch further on hover */
.pcard-art{display:block;margin:38px -34px 0;padding:0 18px}
.pcard-art svg{display:block;width:100%;height:auto;border-radius:22px 22px 0 0;
  animation:pcard-float 7s ease-in-out infinite;
  transition:transform .38s var(--ease)}
.pcard:nth-child(2) .pcard-art svg{animation-delay:-2.3s}
.pcard:nth-child(3) .pcard-art svg{animation-delay:-4.6s}
.pcard:hover .pcard-art svg{transform:translateY(-6px)}
@keyframes pcard-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* --- the three grounds --- */
.pcard-tech{background:linear-gradient(168deg,var(--pc-navy) 0%,var(--pc-navy-2) 100%);
  color:#FFFFFF}
.pcard-tech .pcard-blob{background:rgba(255,255,255,.05)}
.pcard-tech .pcard-k{color:var(--gold)}
.pcard-tech > p{color:#B7C4D8}
.pcard-tech .pcard-cta{background:var(--gold);color:var(--pc-navy)}

.pcard-cons{background:linear-gradient(168deg,#FBF9F4 0%,var(--pc-cream) 100%);color:var(--pc-navy)}
.pcard-cons .pcard-blob{background:rgba(18,41,75,.045)}
/* the mockup's light gold reads 3.2:1 on cream; this is the darkest gold that
   still reads as gold and clears 4.5:1 for 11px text */
.pcard-cons .pcard-k{color:#856025}
.pcard-cons > p{color:var(--pc-slate)}
.pcard-cons .pcard-cta{background:var(--pc-navy);color:#FFFFFF}

.pcard-res{background:linear-gradient(168deg,#DCB247 0%,#C89A2E 100%);color:var(--pc-navy)}
.pcard-res .pcard-blob{background:rgba(255,255,255,.14)}
.pcard-res .pcard-k{color:var(--pc-navy)}
.pcard-res > p{color:#41341A}
.pcard-res .pcard-cta{background:var(--pc-navy);color:#FFFFFF}

@media(prefers-reduced-motion:reduce){
  .pcard,.pcard-art svg,.pcard-cta i{transition:none;animation:none}
  .pcard:hover{transform:none}
  .pcard:hover .pcard-art svg{transform:none}
}

/* --- artwork palette, per ground --- */
.pcard-art svg{fill:none;stroke-linecap:round;stroke-linejoin:round}
.pcard-art .fl-g{fill:var(--gold);stroke:none}
.pcard-art .fl-n{fill:var(--pc-navy);stroke:none}

/* technology: navy panel, gold linework, mixed containers */
.pcard-tech .pcard-art svg{background:#0E2143}
.pcard-tech .pcard-art .ln,
.pcard-tech .pcard-art .hull,
.pcard-tech .pcard-art .tower{stroke:var(--gold);stroke-width:2.2}
.pcard-tech .pcard-art .tower{fill:#16305A}
.pcard-tech .pcard-art .ct rect{fill:#2C4A79;stroke:none}
.pcard-tech .pcard-art .ct .fl-w{fill:#EDF1F7}
.pcard-tech .pcard-art .ct .fl-g{fill:var(--gold)}
.pcard-tech .pcard-art .hull{fill:#1B3A6B}
.pcard-tech .pcard-art .wave{stroke:#2C4A79;stroke-width:2}

/* consultancy: navy panel under a cream card */
.pcard-cons .pcard-art svg{background:var(--pc-navy)}
.pcard-cons .pcard-art .wheel{stroke:var(--gold);stroke-width:5}
.pcard-cons .pcard-art .clip .fl-w{fill:#F6F3EC}
.pcard-cons .pcard-art .tick{stroke:var(--pc-navy);stroke-width:5}
.pcard-cons .pcard-art .ln2{stroke:var(--pc-navy);stroke-width:3}
.pcard-cons .pcard-art .ln{stroke:#16305A;stroke-width:3}
.pcard-cons .pcard-art .wave{stroke:var(--gold);stroke-width:2;opacity:.65}

/* research: cream drafting sheet under a gold card */
.pcard-res .pcard-art svg{background:#F4F1E6}
.pcard-res .pcard-art .grid{stroke:#DCD5C2;stroke-width:1}
.pcard-res .pcard-art .doc .fl-w{fill:#FFFFFF;stroke:var(--pc-navy);stroke-width:2}
.pcard-res .pcard-art .ln2{stroke:var(--pc-navy);stroke-width:2.6}
.pcard-res .pcard-art .ln-g{stroke:var(--gold);stroke-width:2.6}
.pcard-res .pcard-art .comp{stroke:var(--pc-navy);stroke-width:2.2}
.pcard-res .pcard-art .route{stroke:var(--pc-navy);stroke-width:2.4;stroke-dasharray:1 8}
.pcard-res .pcard-art .node circle{fill:var(--pc-navy);stroke:none}

/* --- the pillar row gets more width than the reading sections, so the cards
       spread horizontally instead of running tall --- */
@media(min-width:1300px){.band > .wrap{max-width:1340px}}
.pcard{padding:30px 32px 0}
.pcard > p{margin-bottom:22px}
.pcard-art{margin:26px -32px 0;padding:0 clamp(26px,5vw,58px)}

/* ============================================================
   LOGBRIDGE — the demo, then a moving belt of cards
   ------------------------------------------------------------
   Everything the product section used to say is now on cards
   that drift past continuously. The belt pauses on hover and on
   keyboard focus, and with reduced motion it stops moving and
   becomes an ordinary horizontal scroller instead.
   ============================================================ */
.lb{background:var(--sea);color:var(--white);
  padding:clamp(56px,7vh,88px) 0 clamp(64px,8vh,104px);overflow:hidden}
.lb .demo{margin:0 0 clamp(44px,6vh,72px)}

.mq{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-track{display:flex;align-items:stretch;gap:20px;width:max-content;
  animation:mq-run 68s linear infinite}
.mq:hover .mq-track,
.mq:focus-within .mq-track{animation-play-state:paused}
@keyframes mq-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.mqc{flex:none;width:280px;border-radius:var(--r);padding:28px 26px;
  display:flex;flex-direction:column;justify-content:center}
.mqc-w2{width:440px}
.mqc h2{font-family:var(--sans);font-size:1.375rem;font-weight:700;line-height:1.24;
  letter-spacing:-.01em;text-transform:none;margin-bottom:14px}
.mqc h3{font-family:var(--sans);font-size:1.0625rem;font-weight:700;
  line-height:1.3;margin-bottom:9px}
.mqc p{font-size:.9063rem;line-height:1.6}
.mqc .mqc-lead{font-size:1.125rem;line-height:1.5;font-weight:600}
/* no opacity here: dimming that way hides real contrast from measurement,
   so the tone is carried by the colour token instead */
.mqc-n{display:block;font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;
  margin-bottom:14px}
.mqc q{display:block;font-family:var(--serif);font-size:1.125rem;line-height:1.4;
  quotes:none;margin-bottom:12px}
.mqc-src{font-family:var(--mono);font-size:.5938rem;letter-spacing:.11em;
  text-transform:uppercase;margin-top:12px}
.mqc-cta{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;margin-top:16px;
  font-family:var(--sans);font-size:.875rem;font-weight:700;text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:3px}
.mqc-cta i{font-style:normal;transition:transform .3s var(--ease)}
.mqc-cta:hover i{transform:translate(3px,-3px)}

/* Each card carries its own palette as tokens: --g ground, --t heading,
   --t2 body, --t3 the step number. Every pairing below is checked against
   WCAG AA; the muddy mid-tones (a mid green, teal, coral) were pushed
   darker until white cleared 4.5, rather than left failing both ways. */
.mqc{background:var(--g);color:var(--t)}
.mqc p,.mqc q{color:var(--t2)}
.mqc .mqc-n{color:var(--t3)}
.mqc .mqc-cta{color:var(--t)}
.mqc .mqc-src{color:var(--t2)}

/* dark grounds — white type */
.mqc-navy  {--g:#12294B;--t:#FFFFFF;--t2:#FFFFFF;--t3:#C6D2E4}
.mqc-teal  {--g:#15706F;--t:#FFFFFF;--t2:#FFFFFF;--t3:#FFFFFF}
.mqc-green {--g:#1E7A52;--t:#FFFFFF;--t2:#FFFFFF;--t3:#FFFFFF}
.mqc-plum  {--g:#8A4A9E;--t:#FFFFFF;--t2:#FFFFFF;--t3:#FFFFFF}

/* light grounds — navy type */
.mqc-lemon {--g: #D9B95B;--t: #12294B;--t2: #26324D;--t3: #12294B}
.mqc-sky {--g: #8FB9D0;--t: #12294B;--t2: #26324D;--t3: #12294B}
.mqc-red {--g: #8F4A4A;--t: #FFFFFF;--t2: #FFFFFF;--t3: #FFFFFF}
.mqc-mint {--g: #78B7A0;--t: #12294B;--t2: #26324D;--t3: #12294B}
.mqc-cream {--g: #F4F0E6;--t: #12294B;--t2: #4A5A72;--t3: #7A5A21}

/* ---------- brand tonal set ----------
   Same token contract as the colour cards above (--g ground, --t heading,
   --t2 body, --t3 step number) -- only the values change, so nothing
   structural moves. Navy depth, cream and a single gold accent, so the belt
   reads as the brand instead of six unrelated hues. Gradients run at 168deg
   to match the homepage pillar cards, keeping one light direction site-wide. */
.mqc-ink  {--g:linear-gradient(168deg,#0C1D38 0%,#02112C 100%);
           --t:#FFFFFF;--t2:#C6D2E4;--t3:#DCB247;--edge:rgba(255,255,255,.09)}
.mqc-deep {--g:linear-gradient(168deg,#12294B 0%,#0C1D38 100%);
           --t:#FFFFFF;--t2:#C6D2E4;--t3:#DCB247;--edge:rgba(255,255,255,.09)}
.mqc-sand {--g:linear-gradient(168deg,#FBF9F4 0%,#F4F0E6 100%);
           --t:#12294B;--t2:#4A5A72;--t3:#7A5A21;--edge:rgba(18,41,75,.10)}
.mqc-gold {--g:linear-gradient(168deg,#DCB247 0%,#C89A2E 100%);
           --t:#12294B;--t2:#26324D;--t3:#12294B;--edge:rgba(18,41,75,.12)}

/* the advisory band is white, so a cream card would otherwise float with no
   edge; every brand card carries the same hairline rather than only that one */
.mqc-ink,.mqc-deep,.mqc-sand,.mqc-gold{
  box-shadow:inset 0 0 0 1px var(--edge);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
/* the belt already pauses on hover -- the lift just says which card stopped it */
.mqc-ink:hover,.mqc-deep:hover,.mqc-sand:hover,.mqc-gold:hover{
  transform:translateY(-5px);
  box-shadow:inset 0 0 0 1px var(--edge),0 16px 36px -20px rgba(12,29,56,.55)}
@media(prefers-reduced-motion:reduce){
  .mqc-ink,.mqc-deep,.mqc-sand,.mqc-gold{transition:none}
  .mqc-ink:hover,.mqc-deep:hover,.mqc-sand:hover,.mqc-gold:hover{transform:none}
}


@media(prefers-reduced-motion:reduce){
  .mq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .mq-track{animation:none;width:auto}
  .mqc-cta i{transition:none}
}

/* on a phone a 440px card can never be seen whole, so the belt sizes to the
   viewport instead and each card arrives complete */
@media(max-width:560px){
  .mqc{width:78vw;padding:24px 22px}
  .mqc-w2{width:86vw}
  .mqc h2{font-size:1.1875rem}
  .mq-track{animation-duration:52s}
}

/* the contact section reads on white; the footer is the only dark block left
   at the foot of the page */
.contact-sec{background:var(--white)}

/* ============================================================
   MISSION — the shloka, on white
   ------------------------------------------------------------
   The Sanskrit line is the oldest idea on the site, so it gets
   the most room. Behind it a rangoli-style mandala draws itself
   in: concentric rings, sixteen petals, and an eight-point star
   whose geometry is the same as a compass rose — the Indian
   motif and the maritime one are the same drawing.
   ============================================================ */
.mission{position:relative;isolation:isolate;overflow:hidden;
  background:var(--white);color:var(--ink);text-align:center;
  padding:clamp(64px,9vh,116px) 0 clamp(56px,8vh,96px)}
.mission > .wrap{position:relative;z-index:1}

.mission-art{position:absolute;top:50%;left:50%;z-index:0;pointer-events:none;
  width:min(760px,116vw);aspect-ratio:1;transform:translate(-50%,-50%);
  opacity:.13;animation:mandala-turn 120s linear infinite}
.mission-art svg{width:100%;height:100%;display:block;
  fill:none;stroke:var(--gold);stroke-width:1.1}
.mission-art .petal{stroke-width:1.4}
.mission-art .star{stroke-width:1}
.mission-art .dots circle{fill:var(--gold);stroke:none}
@keyframes mandala-turn{from{transform:translate(-50%,-50%) rotate(0)}
                        to{transform:translate(-50%,-50%) rotate(360deg)}}

.mission .mission-lead{margin:0 auto;max-width:36ch;color:var(--ink)}

.mission .shloka{margin:clamp(38px,5vh,60px) auto 0;padding:0;border:0;
  display:grid;gap:14px;justify-items:center;max-width:44ch}
.mission .shloka q{font-family:var(--deva),var(--serif);quotes:none;
  font-size:clamp(1.75rem,4.4vw,2.75rem);line-height:1.45;color:var(--gold-ink)}
.mission .shloka figcaption{font-size:.9375rem;line-height:1.7;color:var(--ink-muted);max-width:46ch}
.mission .shloka b{color:var(--ink);font-weight:600}

.mission .approach-k{margin-top:clamp(48px,6vh,76px);justify-content:center;display:flex}
.mission .approach{text-align:left;margin-top:30px}
.mission .ap{border-top:1px solid var(--rule)}

@media(prefers-reduced-motion:reduce){
  .mission-art{animation:none}
}

/* the pillar row follows the numbers band directly */
.band{padding-top:clamp(28px,3.5vh,44px)}

/* ============================================================
   LOGBRIDGE — the interface, beside the promise
   ------------------------------------------------------------
   The hero's right column shows the product rather than listing
   facts about it. Built as markup, not an image, so the type
   scales and the values can be edited before the real screens
   land. The whole block is a placeholder for a recording.
   ============================================================ */
.ux{align-self:start}
.ux-screen{border-radius:20px;overflow:hidden;background:var(--pc-navy);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 60px -28px rgba(6,14,32,.45)}
.ux-bar{display:flex;gap:6px;padding:14px 16px;background:#0E2143}
.ux-bar span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.24)}
.ux-head{padding:20px 22px 14px;border-bottom:1px solid rgba(255,255,255,.1)}
.ux-k{font-family:var(--mono);font-size:.5938rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold)}
.ux-t{font-family:var(--sans);font-size:1.0625rem;font-weight:700;color:#FFFFFF;margin-top:6px}
.ux-rows{padding:8px 22px}
.ux-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.ux-row span{font-size:.8125rem;color:#AEBCD2}
.ux-row b{font-family:var(--mono);font-size:.8125rem;color:#FFFFFF;font-variant-numeric:tabular-nums}
.ux-flag b{color:#FFC46B}
.ux-note{display:flex;align-items:center;gap:9px;margin:4px 22px 0;padding:11px 0;
  font-family:var(--mono);font-size:.5938rem;letter-spacing:.1em;
  text-transform:uppercase;color:#FFC46B}
.ux-dot{width:7px;height:7px;border-radius:50%;background:#FFC46B;flex:none}
.ux-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 22px 20px;border-top:1px solid rgba(255,255,255,.1)}
.ux-sig{font-family:var(--mono);font-size:.5938rem;letter-spacing:.1em;
  text-transform:uppercase;color:#8FA0BC}
.ux-btn{background:var(--gold);color:var(--pc-navy);border-radius:999px;
  padding:9px 16px;font-size:.75rem;font-weight:700}
.ux-cap{margin-top:12px;text-align:center;font-family:var(--mono);font-size:.5625rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-muted)}

/* the trail carries the whole middle of the page, so it stays tight */
.lb-trail{padding:clamp(36px,5vh,56px) 0}

/* ============================================================
   PULL QUOTE — the founder, before the story
   ------------------------------------------------------------
   The section headline already says "eighteen years at sea", so
   the story no longer opens by repeating it. This carries the
   voice instead: his sharpest line, his face, and a shape that
   anchors the pair. The portrait moved here from the story, so
   it appears once rather than twice.
   ============================================================ */
.pq{display:grid;gap:32px;margin:44px 0 0;padding:0;align-items:center}
@media(min-width:820px){.pq{grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,64px)}}

.pq-text{position:relative;padding-top:8px}
.pq-mark{display:block;font-family:var(--serif);font-size:clamp(4.5rem,9vw,7rem);
  line-height:.72;color:var(--gold-ink);margin-bottom:6px}
.pq blockquote{margin:0;font-family:var(--sans);font-weight:700;
  font-size:clamp(1.375rem,2.7vw,2.125rem);line-height:1.28;letter-spacing:-.014em;
  color:var(--ink);max-width:22ch;text-wrap:balance}
.pq figcaption{margin-top:22px;font-family:var(--serif);font-size:1.0625rem;
  font-weight:600;color:var(--ink)}
.pq figcaption span{display:block;margin-top:6px;font-family:var(--mono);
  font-size:.5938rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:400;color:var(--ink-muted)}

.pq-img{position:relative;isolation:isolate;justify-self:center;width:min(360px,100%)}
/* the shape sits behind and off-centre, so the portrait reads as placed on it */
.pq-shape{position:absolute;z-index:0;right:-6%;top:6%;width:78%;height:82%;
  background:var(--pc-navy);border-radius:120px 18px 120px 18px}
.pq-img img{position:relative;z-index:1;display:block;width:100%;height:auto;
  border-radius:18px 120px 18px 120px}

/* the story now runs full width beneath */
.story{display:block;margin-top:clamp(40px,5vh,64px)}
.story-body{max-width:64ch}

/* ============================================================
   SERVICES — centred opening, advisory trail, research sheet
   ============================================================ */
.phero-mid{text-align:center}
.phero-mid h1{max-width:none;margin:0 auto}
.phero-mid .lede{margin:18px auto 0;max-width:60ch}

/* the six advisory domains, on white, moving */
.adv{background:var(--white);color:var(--ink)}
.adv > .wrap{text-align:center}
.adv h2{max-width:24ch;margin:0 auto}
.adv .lede{margin:18px auto 0}
.adv .proof,.adv .note{text-align:left;margin-left:auto;margin-right:auto;max-width:70ch}
/* the belt breaks out of the wrap so cards run to the edge, then the mask
   fades them rather than cutting them */
.mq-inset{margin:clamp(30px,4vh,46px) calc(50% - 50vw) 0;width:100vw}

/* research reads as a working sheet: ruled ground, minimal, quiet motion */
.research-sheet{position:relative;background:var(--white);overflow:hidden}
.research-sheet > .wrap{position:relative;z-index:1;text-align:center}
.research-sheet h2{max-width:34ch;margin:0 auto}
.research-sheet .lede{margin-left:auto;margin-right:auto}
.research-sheet .fields{text-align:left}
.sheet-rule{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px);
  background-size:100% 34px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 78%);
          mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 78%)}
/* the sheet's cards settle rather than arrive: a slower, shorter rise */
.research-sheet .field-i{transition:border-color .3s var(--ease),box-shadow .3s var(--ease),
  transform .3s var(--ease)}
.research-sheet .field-i:hover{transform:translateY(-4px)}

@media(prefers-reduced-motion:reduce){
  .research-sheet .field-i{transition:none}
  .research-sheet .field-i:hover{transform:none}
}

/* ============================================================
   EARLY ACCESS — a glass panel on the dark ground
   ------------------------------------------------------------
   The heading and the form sit as a pair, and the form pairs its
   own fields two-up so the panel stays roughly as tall as the
   copy beside it rather than running past it.
   ============================================================ */
#early-access{padding:clamp(44px,6vh,68px) 0}
#early-access .two{gap:clamp(28px,4vw,52px);align-items:start}

.glass{max-width:none;
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.16);border-radius:22px;
  padding:clamp(24px,2.6vw,32px);
  box-shadow:0 26px 54px -32px rgba(0,0,0,.62)}
.glass .field{margin-bottom:15px}
.glass .btn{width:100%;margin-top:4px}
.glass .form-note{margin-top:12px}

@media(min-width:600px){
  /* minmax(0,..) or the select's longest option forces an uneven split */
  .glass{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
  .glass select{max-width:100%}
  .glass .field-wide,.glass .hp,.glass .btn,.glass .form-note{grid-column:1/-1}
}

/* serives scroll pad */
html {
    scroll-padding-top: 120px;
}


/* Mobile Version */
/* Center footer content on mobile */
@media (max-width: 899px) {
    .ftr-row {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .ftr-brand {
        justify-content: center;
    }

    .ftr-social {
        justify-content: center;
    }

    .ftr-reach {
        justify-content: center;
        text-align: center;
    }

    .ftr address {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .ftr .legal {
        text-align: center;
    }
}

@media (max-width: 899px) {
    .ftr-b {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 899px) {
    .approach {
        text-align: center;
    }

    .approach .mark {
        justify-content: center;
    }

    .approach h2,
    .approach h3,
    .approach p {
        text-align: center;
    }
}

@media (max-width: 819px) {
    .fields {
        justify-items: center;
    }

    .field-i {
        width: 90%;
        text-align: center;
    }
}

/* Center team section headings and descriptions */
/* =========================================================
   CENTER + SPACE ALL TEAM SECTIONS
   ========================================================= */

/* CENTER HEADING + DESCRIPTION */
.artsec > .wrap > h2,
.artsec > .wrap > .lede,
main > .wrap:has(> h2 + .lede + .team) > h2,
main > .wrap:has(> h2 + .lede + .team) > .lede {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* CENTER THE WHOLE TEAM/CARD AREA */
.artsec > .wrap > .team,
main > .wrap:has(> h2 + .lede + .team) > .team {
    justify-content: center;
}

/* CENTER SINGLE PERSON CARD */
.artsec > .wrap > .team:has(> .person:only-child),
main > .wrap:has(> h2 + .lede + .team) > .team {
    grid-template-columns: 260px;
    justify-content: center;
}

/* KEEP PERSON CONTENT CENTERED */
.team .person {
    text-align: center;
}

/* CENTER DESCRIPTION WIDTH */
.artsec > .wrap > .lede,
main > .wrap:has(> h2 + .lede + .team) > .lede {
    max-width: 70ch;
}

/* ⭐ ADD SPACE AFTER EACH TEAM'S PERSON CARD */
/* =========================================================
   SAME SPACING BETWEEN ALL TEAM SECTIONS
   ========================================================= */

/* All sections that contain a heading, description and person cards */
/* SAME SPACING FOR ALL TEAM SECTIONS */
main > .wrap:has(> h2):has(> .lede):has(> .team) {
    padding-bottom: 60px !important;
}

main > .artsec {
    padding-bottom: 60px !important;
}



/* Center and space Finance + Marketing sections */
main > .wrap {
    padding-top: var(--sect);
    padding-bottom: var(--sect);
    text-align: center;
}
main > .wrap .lede {
    margin-left: auto;
    margin-right: auto;
}

main > .wrap .team {
    justify-content: center;
}



/* MOBILE */
@media (max-width: 700px) {
    .artsec > .wrap > h2,
    .artsec > .wrap > .lede,
    main > .wrap:has(> h2 + .lede + .team) > h2,
    main > .wrap:has(> h2 + .lede + .team) > .lede {
        text-align: center;
    }

    .artsec > .wrap > .team {
        justify-content: center;
    }

    .artsec > .wrap > .team:has(> .person:only-child),
    main > .wrap:has(> h2 + .lede + .team) > .team {
        grid-template-columns: 260px;
        justify-content: center;
    }
}

/* Center a single team member */
.team:has(> :only-child) {
    grid-template-columns: minmax(220px, 280px);
    justify-content: center;
}

/* Keep the main 5-person team in one row */
@media (min-width: 1000px) {
    .team {
        grid-template-columns: repeat(5, 1fr);
        gap: 18px;
    }

    .team:has(> :only-child) {
        grid-template-columns: 280px;
        justify-content: center;
    }
}

/* Center the profile card on mobile team founder and info*/
/* Center founder profile on mobile */
@media (max-width: 819px) {

    .founder-card .fc-grid {
        justify-items: center;
    }

    .founder-card .fc-id {
        width: 100%;
        text-align: center;
    }

    .founder-card .fc-photo {
        margin-left: auto;
        margin-right: auto;
    }

    .founder-card .fc-body {
        width: 100%;
        max-width: 58ch;
        text-align: center;
    }

    .founder-card .fc-link {
        display: flex;
        justify-content: center;
    }

    .founder-card .fc-strip {
        width: 100%;
    }

    .founder-card .fc-stat {
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
    }
}


/* TEAM FOOTER SPACE */
main > .wrap:has(+ .closing) {
    margin-bottom: 90px !important;
}




/* =========================================
   DSR LEADERSHIP TEAM
   ========================================= */

.leadership-team {
    text-align: center !important;
}

/* Heading */
.leadership-team > h2 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Description */
.leadership-team > .lede {
    text-align: center !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* =========================================
   THREE PROFILES IN ONE ROW
   ========================================= */

.leadership-team-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 20px !important;

    width: 100% !important;
    max-width: 1000px !important;

    margin: 50px auto 0 !important;
}


/* =========================================
   PROFILE BOX
   ========================================= */

.leadership-team-grid .person {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;

    min-height: 340px !important;

    box-sizing: border-box !important;

    border: 1px solid #d9dee5 !important;
    border-radius: 8px !important;

    padding: 34px 20px !important;

    text-align: center !important;
}


/* =========================================
   REMOVE GOLD BORDER FROM PHOTO
   ========================================= */

.leadership-team-grid .leadership-photo {
    width: 140px !important;
    height: 140px !important;

    margin: 0 auto 20px !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    background: transparent !important;
}


/* IMAGE ITSELF */
.leadership-team-grid .leadership-photo img {
    width: 140px !important;
    height: 140px !important;

    display: block !important;
    margin: 0 auto !important;

    object-fit: cover !important;
    border-radius: 50% !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


/* REMOVE ANY PSEUDO-ELEMENT GOLD RING */
.leadership-team-grid .leadership-photo::before,
.leadership-team-grid .leadership-photo::after,
.leadership-team-grid .leadership-photo img::before,
.leadership-team-grid .leadership-photo img::after {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}


/* =========================================
   NAME
   ========================================= */

.leadership-team-grid .person h3 {
    text-align: center !important;
    margin: 10px 0 8px !important;
}


/* =========================================
   DESCRIPTION
   ========================================= */

.leadership-team-grid .person p {
    text-align: center !important;
    margin: 0 !important;
}


/* GOLD CATEGORY TEXT */
.leadership-team-grid .domain {
    display: block !important;
    margin-top: 14px !important;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {

    .leadership-team-grid {
        flex-direction: column !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    .leadership-team-grid .person {
        width: 300px !important;
        min-width: 300px !important;
        max-width: 300px !important;
    }
}




/* ===== 5 FOUNDER STATS IN ONE ROW ===== */

.fc-strip {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.fc-stat {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 28px 16px !important;
}

.fc-stat b,
.fc-stat span {
  display: block;
}

@media (max-width: 800px) {
  .fc-strip {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 500px) {
  .fc-strip {
    grid-template-columns: 1fr !important;
  }
}


/* Center the 3 leadership profile cards */
.team {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

.team .person {
  width: 245px;
  flex: 0 0 245px;
}

/* Remove the gold border around profile photos */
.team .duo {
  border: none !important;
}

.team .duo img {
  border: none !important;
}




/* ===== CENTER 3 LEADERSHIP CARDS ===== */

.leadership-team {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 22px !important;
  width: 100% !important;
  margin: 48px auto 0 !important;
}

.leadership-team .person-slot {
  flex: 0 0 245px !important;
  width: 245px !important;
}

.leadership-team .person {
  width: 245px !important;
  min-width: 245px !important;
  max-width: 245px !important;
}

/* Remove gold around profile photo */
.leadership-team .duo {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.leadership-team .duo img {
  border: none !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  .leadership-team {
    flex-wrap: wrap !important;
  }
}


/* INTERESTED ? CONTACT US */

.contact-link {
  display: inline-block;
  margin-top: 12px;
  padding: 3px 0;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold-ink);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
}

.contact-link:hover {
  color: var(--ink);
}





/* ===== READ MORE FIX ===== */

/* Normal/collapsed state */
.bios .person .bio {
  display: block !important;
  -webkit-line-clamp: unset !important;
  max-height: 105px !important;
  overflow: hidden !important;
  margin-top: 12px;
}

/* Expanded state after clicking Read More */
.bios .person.is-open .bio {
  display: block !important;
  -webkit-line-clamp: unset !important;
  max-height: 2000px !important;
  overflow: visible !important;
}

/* IMPORTANT: hovering must NOT expand the description */
.bios .person:hover .bio {
  display: block !important;
  -webkit-line-clamp: unset !important;
  max-height: 105px !important;
  overflow: hidden !important;
}

/* If the card is clicked/open, allow it to expand */
.bios .person.is-open:hover .bio {
  max-height: 2000px !important;
  overflow: visible !important;
}



/* =========================================================
   FINAL BIO FIX — COLLAPSED UNTIL READ MORE IS CLICKED
   ========================================================= */

.bios .person .bio {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

/* ONLY an opened card shows full information */
.bios .person.is-open .bio {
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}

/* NEVER expand just because mouse is hovering */
@media (hover: hover) and (pointer: fine) {
  .bios .person:hover .bio {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }

  .bios .person:hover {
    bottom: 0 !important;
    z-index: auto !important;
  }

  .bios .person:hover.is-open {
    bottom: auto !important;
    z-index: 20 !important;
  }

  .bios .person:hover.is-open .bio {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
  }
}




/* FINAL TEAM BIO RULES */

.bios .person .bio {
  display: block !important;
  max-height: 45px !important;
  overflow: hidden !important;
  -webkit-line-clamp: unset !important;
}

/* Only clicking Read More opens it */
.bios .person.is-open .bio {
  max-height: 2000px !important;
  overflow: visible !important;
}

/* Hover NEVER opens it */
.bios .person:hover .bio {
  max-height: 45px !important;
  overflow: hidden !important;
}

/* If it is clicked/open, keep it open even while hovering */
.bios .person.is-open:hover .bio {
  max-height: 2000px !important;
  overflow: visible !important;
}

/* ============================================================
   FINAL TEAM READ MORE FIX
   ============================================================ */

/* Let every team card have its natural height */
.team.bios .person-slot {
  position: relative !important;
  min-height: 0 !important;
  height: auto !important;
}

/* IMPORTANT:
   Remove the absolute/fixed-height behaviour */
.team.bios .person {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;

  box-sizing: border-box;
}

/* CLOSED BIO */
.team.bios .person .bio {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;

  max-height: none !important;
  height: auto !important;

  overflow: hidden !important;
}

/* OPEN BIO — after Read More is clicked */
.team.bios .person.is-open .bio {
  display: block !important;

  -webkit-line-clamp: unset !important;

  max-height: none !important;
  height: auto !important;

  overflow: visible !important;
}

/* Read More stays INSIDE the card */
.team.bios .person .bio-more {
  display: inline-block !important;
  position: relative !important;

  margin-top: 12px !important;
  margin-bottom: 0 !important;

  z-index: 5;
}

/* DO NOT let hover change the opened state */
.team.bios .person:hover {
  position: static !important;
  bottom: auto !important;
  z-index: auto !important;
  box-shadow: none;
}

/* If clicked open, it stays open even after mouse leaves */
.team.bios .person.is-open {
  position: static !important;

  height: auto !important;
  min-height: 0 !important;

  bottom: auto !important;

  z-index: 20 !important;

  box-shadow: 0 18px 44px rgba(17,24,40,.18) !important;
  border-color: var(--gold) !important;
}

.team.bios .person.is-open:hover {
  position: static !important;
  bottom: auto !important;
  z-index: 20 !important;

  box-shadow: 0 18px 44px rgba(17,24,40,.18) !important;
  border-color: var(--gold) !important;
}

.team.bios .person.is-open:hover .bio {
  display: block !important;
  -webkit-line-clamp: unset !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

/* Mobile */
@media (max-width: 999px) {
  .team.bios .person-slot {
    min-height: 0 !important;
    height: auto !important;
  }

  .team.bios .person {
    position: static !important;
    height: auto !important;
  }
}

/* INTERESTED? CONTACT US */
.contact-link {
  font-size: 13px;
}

/* =========================================
   HUMAN POTENTIAL / FINANCE / MARKETING
   THREE COLUMNS IN ONE ROW
   ========================================= */

/* .three-head-section {
    width: 100% !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
    padding: 110px 40px 130px !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 55px !important;

    box-sizing: border-box !important;
}

.three-head-box {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;
}

.three-head-box h2 {
    width: 100% !important;
    max-width: none !important;

    margin: 0 0 20px !important;
    padding: 0 !important;

    text-align: center !important;
}

.three-head-box > p {
    width: 100% !important;
    max-width: 430px !important;

    margin: 0 auto 45px !important;
    padding: 0 !important;

    text-align: center !important;
    line-height: 1.6 !important;
}

.three-person {
    width: 300px !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 30px 20px !important;

    box-sizing: border-box !important;

    text-align: center !important;
}

.three-person .duo {
    margin: 0 auto 18px !important;
}

.three-person .duo img {
    display: block !important;
    margin: 0 auto !important;
}
6
.three-person h3 {
    margin: 15px 0 8px !important;
    text-align: center !important;
}

.three-person span {
    display: block !important;
    text-align: center !important;
}


/* TABLET */
/* @media (max-width: 1000px) {

    .three-head-section {
        grid-template-columns: 1fr !important;
        gap: 100px !important;
        padding: 80px 25px 110px !important;
    }

} */


/* MOBILE */
/* @media (max-width: 600px) {

    .three-head-section {
        gap: 80px !important;
        padding: 70px 20px 90px !important;
    }

    .three-person {
        width: 300px !important;
    }

} */


/* BOX ONLY FOR THE 3 NEW PROFILE CARDS */
/* 
.three-head-box .person {
    border: 1px solid #d8dee6 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    padding: 30px 20px !important;
} */


/* ============================================================
   BIO SPOTLIGHT — read more lifts one card out of the page
   ------------------------------------------------------------
   Expanding a card in place pushed the grid around and read
   badly. Instead the page dims and the card is moved onto a
   fixed stage above the veil, at a comfortable reading width.
   It is moved, not cloned, so the bio exists once in the DOM.
   ============================================================ */
.bio-veil{position:fixed;inset:0;z-index:900;
  background:rgba(6,12,24,.66);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .28s var(--ease)}
.bio-veil.on{opacity:1;pointer-events:auto}

.bio-stage{position:fixed;inset:0;z-index:901;display:none;
  align-items:center;justify-content:center;padding:clamp(16px,4vh,48px) 20px;
  overflow-y:auto;pointer-events:none}
.bio-stage.on{display:flex;pointer-events:auto}
body.bio-locked{overflow:hidden}

/* the lifted card: released from the grid slot's absolute positioning */
.bio-stage .person{position:relative !important;inset:auto !important;
  width:min(620px,100%);max-height:none;
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r);
  padding:clamp(28px,4vw,40px);
  box-shadow:0 40px 90px -30px rgba(3,10,24,.6);
  animation:bio-in .3s var(--ease)}
.bio-stage .person .bio{-webkit-line-clamp:unset !important;max-height:none !important;
  overflow:visible !important;display:block !important}
.bio-stage .duo{width:132px;height:132px;margin:0 auto 20px}
.bio-stage .person-b{text-align:center}
.bio-stage .bio{text-align:left;margin-top:14px}
.bio-stage .bio-more{margin-top:20px}

@keyframes bio-in{from{opacity:0;transform:translateY(12px) scale(.985)}
                  to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .bio-veil{transition:none}
  .bio-stage .person{animation:none}
}

/* ============================================================
   OPEN ROLES — minimal
   ------------------------------------------------------------
   Three plain boxes, no artwork. The section says one thing, so
   it carries one CTA underneath rather than repeating it three
   times across the row.
   ============================================================ */
.roles-sec > .wrap{text-align:center}
.roles-sec h2,.roles-sec .lede{margin-left:auto;margin-right:auto}

.roles{list-style:none;display:grid;gap:16px;padding:0;
  margin:clamp(30px,4vh,44px) auto 0;max-width:760px}
@media(min-width:700px){.roles{grid-template-columns:repeat(3,1fr);gap:20px}}

.role{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  min-height:120px;padding:26px 18px;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--white);
  font-family:var(--display);font-size:1.375rem;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.role:hover{border-color:var(--gold);box-shadow:0 14px 30px -18px rgba(17,24,40,.18)}
.role-n{font-family:var(--mono);font-size:.625rem;font-weight:500;
  letter-spacing:.14em;color:var(--gold-ink);text-transform:none}

.roles-cta{margin-top:clamp(26px,3.5vh,38px);
  font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--ink-muted)}
.roles-cta a{color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--gold-ink);padding-bottom:2px}
.roles-cta a:hover{color:var(--gold-ink)}
.roles-cta span{margin:0 12px;color:var(--rule)}

@media(prefers-reduced-motion:reduce){ .role{transition:none} }

/* ============================================================
   TEAM PAGE — tighter rhythm
   ------------------------------------------------------------
   Eight sections stacked up made the page feel airy to the point
   of disconnected. The global .band top-padding override was
   also leaving these sections lopsided (29 top against 72
   bottom), so the rhythm is set explicitly here instead.
   ============================================================ */
/* !important here only to beat an existing "main > .artsec { padding-bottom:
   60px !important }" rule, not by preference */
.page-team main > section{
  padding-top:clamp(38px,5vh,56px) !important;
  padding-bottom:clamp(38px,5vh,56px) !important}
.page-team .team-hero{padding-top:clamp(48px,6vh,68px) !important;padding-bottom:clamp(40px,5vh,56px) !important}
.page-team .founder-sec{padding-top:clamp(22px,3vh,32px) !important}
.page-team .closing{padding-top:clamp(44px,6vh,64px) !important;padding-bottom:clamp(44px,6vh,64px) !important}

/* the grids carried their own trailing space on top of the section's */
.page-team .leadership-team{padding-bottom:0}
.page-team .team{margin-top:clamp(24px,3vh,34px)}
.page-team .leadership-team{margin-top:clamp(24px,3vh,34px)}

/* section intros sit closer to what they introduce */
.page-team main > section > .wrap > .lede{margin-top:14px}

/* a section holding one person reads as an empty shelf when the card keeps
   the 245px column width, so it turns on its side instead */
@media(min-width:700px){
  .page-team #facilities .leadership-team{display:block !important;padding:0}
  .page-team #facilities .person-slot{flex:none !important;width:auto !important;
    max-width:660px;margin:0 auto}
  .page-team #facilities .person{width:auto !important;min-width:0 !important;
    max-width:none !important;
    display:grid;grid-template-columns:184px minmax(0,1fr);
    gap:clamp(22px,3vw,36px);align-items:center;text-align:left}
  .page-team #facilities .duo{width:184px;height:184px;margin:0}
  .page-team #facilities .person-b{text-align:left}
  .page-team #facilities .bio-h,
  .page-team #facilities .bio-rank{text-align:left}
}

/* the role badges were inline #B8860B at 12px — 3.25:1 on white, an AA fail.
   Same family, dark enough to pass, and now in one place. */
.role-badge{font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--gold-ink);
  margin:2px 0 8px}
.dark .role-badge,.bio-stage .role-badge{color:var(--gold-ink)}

/* ============================================================
   WHATSAPP FLOATING BUTTON  —  contact page only
   ------------------------------------------------------------
   #128C7E, not the brighter #25D366. The white glyph on
   #25D366 measures 1.98:1, and the mark is the only thing
   telling you what the button does, so WCAG 1.4.11 asks 3:1 of
   it. #128C7E is WhatsApp's own darker brand green and gives
   4.14:1 for the glyph and the same against the white page.

   z-index sits under .mnav (60) so the open mobile menu is
   never covered, and well under the bio overlay (900).
   ============================================================ */
.wa-fab{position:fixed;z-index:50;
  right:calc(20px + env(safe-area-inset-right));
  bottom:calc(20px + env(safe-area-inset-bottom));
  width:56px;height:56px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#128C7E;color:#FFFFFF;text-decoration:none;
  box-shadow:0 10px 26px -8px rgba(4,14,32,.45),0 2px 6px rgba(4,14,32,.2);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),
             background-color .3s var(--ease)}
.wa-fab svg{width:30px;height:30px;fill:currentColor;display:block}
.wa-fab:hover,.wa-fab:focus-visible{transform:translateY(-3px);background:#0E7568;
  box-shadow:0 16px 32px -10px rgba(4,14,32,.5),0 2px 6px rgba(4,14,32,.22)}
.wa-fab:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wa-fab:active{transform:translateY(0)}

/* the 56px target already clears the 44px minimum, so it only needs to move
   in from the edge a little less on a phone */
@media(max-width:559px){
  .wa-fab{width:52px;height:52px;
    right:calc(14px + env(safe-area-inset-right));
    bottom:calc(14px + env(safe-area-inset-bottom))}
  .wa-fab svg{width:27px;height:27px}
}

@media(prefers-reduced-motion:reduce){
  .wa-fab{transition:none}
  .wa-fab:hover,.wa-fab:focus-visible{transform:none}
}