/* ─────────────────────────────────────────────────────────────────────
   DELTA BLUE CAPITAL — the shared sheet, every page.
   The 24 Sep homepage world carried across the site: one light grotesk at scale, tracked
   capitals for metadata, hairlines for structure, deep water for the dark regions, real
   photography under a navy scrim. The ocean carries the colour; gold is the gate's edge only.
   home.css adds the homepage's own sections on top of this.
   ───────────────────────────────────────────────────────────────────── */
:root{
  color-scheme:light;
  --paper:#F6F8FA;
  --mist:#E6ECF1;
  --mist-2:#DCE4EB;
  --ink:#0B1B2C;
  --ink-2:#3A5064;
  --ink-3:#5B7183;
  --line:rgba(11,27,44,.13);
  --line-2:rgba(11,27,44,.07);
  --navy:#001B3D;              /* brand navy, from the logo */
  --deep:#04182C;
  --on-deep:#E9F0F6;
  --on-deep-2:#A9BCCD;
  --on-deep-line:rgba(233,240,246,.16);
  --blue:#1F5C8F;              /* the one that acts, on light */
  --gold:#D4AF6A;              /* brand gold: the gate's edge */
  --err:#A5362A;
  --sans:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif;
  --gut:clamp(20px,5.2vw,88px);
  --col:min(1320px,100% - var(--gut)*2);
  --ease:cubic-bezier(.16,1,.3,1);
  --slow:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:#9FB4C5 var(--paper);caret-color:var(--blue)}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 clamp(15.5px,1vw,17px)/1.66 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--navy);color:#fff}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:#B8C8D5;border:3px solid var(--paper);border-radius:99px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
[data-tone="dark"] :focus-visible{outline-color:var(--on-deep)}
a{color:inherit}
img{max-width:100%;display:block}
p{margin:0 0 1.1em}p:last-child{margin-bottom:0}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:12px 18px;font:500 13px var(--sans)}
.skip:focus{left:12px;top:12px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:var(--col);margin-inline:auto;position:relative}

/* ── type ────────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--sans);font-weight:300;margin:0;color:inherit;text-wrap:balance}
h1{font-size:clamp(38px,5.2vw,82px);line-height:1.02;letter-spacing:-.035em}
.nb{white-space:nowrap}
h2{font-size:clamp(32px,3.5vw,56px);line-height:1.06;letter-spacing:-.03em}
h3{font-size:clamp(19px,1.4vw,23px);line-height:1.22;letter-spacing:-.012em;font-weight:400}
.lead{font-size:clamp(16.5px,1.18vw,19px);line-height:1.6;color:var(--ink-2)}
.meta{font:500 11px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums lining-nums}

/* a heading's section name: tracked capitals on a short rule, never a sentence.
   Only ever the client's own section names, from architecture v2. */
.tag{display:flex;align-items:center;gap:14px;margin:0 0 clamp(18px,2vw,26px)}
.tag::before{content:'';width:28px;height:1px;background:currentColor;opacity:.55}

/* the one link style: a hairline and an arrow that moves a few pixels */
.go{display:inline-flex;align-items:center;gap:14px;text-decoration:none;
  font:500 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  padding:0 0 11px;border-bottom:1px solid currentColor;border-bottom-color:color-mix(in srgb,currentColor 38%,transparent);
  transition:border-color .5s var(--ease)}
.go{position:relative}
.go::before{content:'';position:absolute;inset:-12px -4px -8px}
.go svg{width:18px;height:10px;flex:none;overflow:visible}
.go svg *{fill:none;stroke:currentColor;stroke-width:1.2}
.go svg line{transition:transform .5s var(--ease)}
.go svg polyline{transition:transform .5s var(--ease)}
.go:hover{border-bottom-color:currentColor}
.go:hover svg polyline,.go:hover svg line{transform:translateX(4px)}
.btn{display:inline-flex;align-items:center;gap:14px;text-decoration:none;cursor:pointer;
  font:500 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  padding:17px 24px;background:var(--navy);color:#fff;border:1px solid var(--navy);border-radius:0;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.btn:hover{background:var(--deep)}
.btn.ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--navy)}
.btn[disabled]{opacity:.55;cursor:progress}

/* ── navigation: quiet, takes the tone of what is under it ──────── */
.nav{position:fixed;inset:0 0 auto;z-index:60;color:var(--ink);
  transition:background .5s var(--ease),border-color .5s var(--ease),backdrop-filter .5s var(--ease)}
.nav[data-solid]{background:rgba(246,248,250,.84);border-bottom:1px solid var(--line-2);
  backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
.nav[data-tone="dark"]{color:var(--on-deep)}
.nav[data-tone="dark"] nav a{color:rgba(233,240,246,.78)}
.nav[data-tone="dark"] nav a:hover,.nav[data-tone="dark"] nav a[aria-current]{color:#fff}
/* the client's own reverse logo over dark: gold wordmark, the A's triangle knocked out in navy */
.nav[data-tone="dark"] .mark .lt{opacity:0}
.nav[data-tone="dark"] .mark .dk{opacity:1}
.nav[data-tone="dark"] .menu-btn{color:#fff}
.nav[data-solid][data-tone="dark"]{background:rgba(4,24,44,.8);border-bottom-color:var(--on-deep-line)}
.nav .in{width:var(--col);margin-inline:auto;display:flex;align-items:center;gap:clamp(18px,3vw,44px);
  padding:clamp(18px,2.2vw,26px) 0}

.mark{display:block;line-height:0;flex:none;position:relative}
.mark img{height:clamp(28px,2.4vw,36px);width:auto;transition:opacity .5s var(--ease)}
.mark .dk{position:absolute;left:0;top:0;opacity:0}
.nav nav{margin-left:auto;display:flex;align-items:center;gap:clamp(18px,2.6vw,42px)}
.nav nav a{position:relative;text-decoration:none;font:500 11.5px/1 var(--sans);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2);padding:10px 0;transition:color .35s var(--ease)}
.nav nav a:hover,.nav nav a[aria-current]{color:var(--ink)}
.nav nav a::after{content:'';position:absolute;left:50%;bottom:-3px;width:4px;height:4px;border-radius:50%;
  background:currentColor;transform:translateX(-50%) scale(0);transition:transform .45s var(--ease)}
.nav nav a[aria-current]::after{transform:translateX(-50%) scale(1)}
.menu-btn{display:none;margin-left:auto;align-items:center;gap:10px;background:none;border:0;cursor:pointer;
  font:500 11.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);padding:16px 0;min-height:44px}
.menu-btn i{display:grid;gap:4px;width:18px}
.menu-btn i b{display:block;height:1px;background:currentColor;transition:transform .4s var(--ease),opacity .3s}
.nav[data-open] .menu-btn i b:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav[data-open] .menu-btn i b:nth-child(2){opacity:0}
.nav[data-open] .menu-btn i b:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media (max-width:940px){
  .menu-btn{display:inline-flex}
  .nav nav{position:absolute;left:0;right:0;top:100%;margin:0;display:grid;gap:0;background:var(--paper);
    padding:8px var(--gut) 24px;border-bottom:1px solid var(--line);
    clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none;visibility:hidden;
    transition:clip-path .55s var(--ease),opacity .3s,visibility 0s .55s}
  .nav[data-open] nav{clip-path:inset(0);opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s}
  .nav[data-open]{background:var(--paper)}
  /* open, the menu is paper whatever is under it: the dark tone must not leave pale links on a pale panel
     (the home page set the tone on scroll only, so Safari on a phone showed an empty panel; 13 Oct 2026) */
  .nav[data-open][data-tone]{color:var(--ink);background:var(--paper);border-bottom-color:var(--line-2)}
  .nav[data-open][data-tone] nav a{color:var(--ink)}
  .nav[data-open][data-tone] .menu-btn{color:var(--ink)}
  .nav[data-open][data-tone] .mark .lt{opacity:1}
  .nav[data-open][data-tone] .mark .dk{opacity:0}
  .nav nav a{font-size:26px;letter-spacing:-.02em;text-transform:none;font-weight:300;color:var(--ink);
    padding:14px 0;border-bottom:1px solid var(--line-2)}
  .nav nav a::after{display:none}
}

/* everything after a sticky hero slides over it */
main > section{position:relative;z-index:1}

/* ── strategy modules: the homepage's four, and "other strategies" ─ */
.mods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.3vw,20px);margin-top:clamp(52px,6vw,88px);
  list-style:none;padding:0}
.mod{position:relative;display:flex;flex-direction:column;min-height:clamp(400px,31vw,470px);text-decoration:none;color:inherit;
  border:1px solid var(--on-deep-line);overflow:hidden;background:#061A2F;
  transition:border-color .6s var(--ease)}
.mod figure{margin:0;position:relative;isolation:isolate;height:clamp(190px,16vw,250px);flex:none;overflow:hidden}
.mod figure img{width:100%;height:100%;object-fit:cover;filter:saturate(.6) contrast(1.02) brightness(.92);
  transform:scale(1.001);transition:transform 1.4s var(--ease),filter .8s var(--ease)}
.mod figure::after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(6,26,47,0) 30%,rgba(6,26,47,.7) 70%,#061A2F 100%)}
.mod .txt{position:relative;display:flex;flex-direction:column;flex:1;padding:0 clamp(18px,1.6vw,26px) clamp(20px,1.8vw,28px);margin-top:-18px}
.mod h3{margin-top:0;font-weight:300;font-size:clamp(20px,1.55vw,25px);line-height:1.18;letter-spacing:-.018em}
.mod p{margin:14px 0 0;color:var(--on-deep-2);font-size:14.5px;line-height:1.6}
.mod .arr{margin-top:auto;padding-top:22px;display:flex;align-items:center;justify-content:space-between;
  font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--on-deep-2)}
.mod .arr span{opacity:0;transform:translateX(-6px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.mod .arr svg{width:18px;height:10px;overflow:visible;color:var(--on-deep)}
.mod .arr svg *{fill:none;stroke:currentColor;stroke-width:1.2;transition:transform .6s var(--ease)}
.mod:hover,.mod:focus-visible{border-color:rgba(233,240,246,.42)}
.mod:hover figure img,.mod:focus-visible figure img{transform:scale(1.05);filter:saturate(.72) contrast(1.02) brightness(1)}
.mod:hover .arr span,.mod:focus-visible .arr span{opacity:1;transform:none}
.mod:hover .arr svg *,.mod:focus-visible .arr svg *{transform:translateX(4px)}
/* two of the four photographs are graded toward the other two (client, 2 Oct 2026): the monochrome
   bow takes the sea's blue, the bright deck goes down to navy. A colour layer over the image, the
   hero's own move; tune the opacity here rather than re-exporting the files */
.t-blue,.t-navy{position:relative;isolation:isolate}
.t-blue::before,.t-navy::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none}
.t-blue::before{background:#0E4C8A;mix-blend-mode:color;opacity:.55}
.t-navy::before{background:#04182C;opacity:.3}
.t-navy img{filter:saturate(.55) contrast(1.02) brightness(.84)!important}
@media (max-width:1100px){.mods{grid-template-columns:repeat(2,minmax(0,1fr))}.mod{min-height:440px}}
@media (max-width:760px){
  /* a sideways run of modules, not a stack */
  .mods{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut)*-1);
    padding:0 var(--gut) 6px;scroll-padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
  .mods::-webkit-scrollbar{display:none}
  .mods li{flex:0 0 78%;scroll-snap-align:start}
  .mod{min-height:430px;height:100%}
  .swipe{display:flex!important}
}
.swipe{display:none;align-items:center;gap:12px;margin-top:18px;color:var(--on-deep-2)}
.swipe i{flex:1;height:1px;background:var(--on-deep-line);position:relative;overflow:hidden}
.swipe i b{position:absolute;inset:0 auto 0 0;width:25%;background:var(--on-deep);transition:transform .3s var(--ease)}

/* ── the course: waypoints on one line that draws once ───────────── */
.course{position:relative;margin-top:clamp(64px,7vw,104px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;padding:0;
  --dot:var(--paper)}
.course::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:currentColor;opacity:.8;
  transform-origin:left;transform:scaleX(var(--draw,1));transition:transform 1.8s var(--slow)}
.js .course:not([data-in])::before{--draw:0}
.course li{position:relative;padding:40px clamp(16px,2.4vw,40px) 0 0}
.course li+li{padding-left:clamp(16px,2.4vw,40px);border-left:1px solid var(--line-2)}
.course li::before{content:'';position:absolute;top:-4px;left:0;width:9px;height:9px;border-radius:50%;
  background:var(--dot);border:1px solid currentColor}
.course li+li::before{left:-5px}
.course h3{margin-top:0}
.course p{margin:14px 0 0;color:var(--ink-2);font-size:15px;max-width:30ch}
@media (max-width:900px){
  .course{grid-template-columns:1fr;margin-top:52px}
  .course::before{left:4px;right:auto;top:0;bottom:0;width:1px;height:auto;transform-origin:top;transform:scaleY(var(--draw,1))}
  .course li,.course li+li{padding:0 0 38px 40px;border-left:0}
  .course li::before,.course li+li::before{left:0;top:2px}
  .course h3{margin-top:12px}
}

/* ── the close: the horizon ──────────────────────────────────────── */
.close{min-height:clamp(560px,86vh,860px);display:grid;align-items:center;overflow:hidden;isolation:isolate;color:#fff}
.close .sky{position:absolute;inset:0;z-index:-1}
.close .sky img{width:100%;height:100%;object-fit:cover;object-position:center 58%;filter:saturate(.7) contrast(1.02)}
.close .sky::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(4,24,44,.62) 0%,rgba(4,24,44,.28) 48%,rgba(4,24,44,0) 78%)}
.close h2{max-width:13ch;font-size:clamp(34px,4vw,64px)}
.close .lead{color:rgba(255,255,255,.86);max-width:44ch;margin-top:clamp(20px,2.2vw,30px)}
.close .acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,3.2vw,46px)}
.close .btn{background:#fff;color:var(--navy);border-color:#fff}
.close .btn:hover{background:var(--mist)}
.close .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.close .btn.ghost:hover{border-color:#fff}

/* ── footer ──────────────────────────────────────────────────────── */
footer{background:var(--paper);padding:clamp(52px,5.6vw,80px) 0 clamp(26px,3vw,36px);position:relative;z-index:1;border-top:1px solid var(--line-2)}
footer .top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px 40px}
footer .fmark img{height:32px;width:auto}
footer nav{display:flex;flex-wrap:wrap;gap:8px 30px}
footer nav a{font:500 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;padding:6px 0;
  border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
footer nav a:hover{color:var(--ink);border-bottom-color:var(--ink)}
footer nav a,.colophon a,.crumb a{position:relative}
footer nav a::before,.colophon a::before,.crumb a::before{content:'';position:absolute;inset:-10px -6px}
.colophon{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:clamp(34px,3.6vw,52px);padding-top:22px;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--ink-3)}
.colophon a{text-decoration:none}
.colophon a:hover{color:var(--ink)}
.draft{width:var(--col);margin:16px auto 0;font-size:11.5px;color:var(--ink-3)}
.draft b{color:var(--blue);font-weight:500}

/* ── consent gate (behaviour in site.js) ─────────────────────────── */
#gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:clamp(16px,4vw,32px);
  background:rgba(4,24,44,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:gatein .45s var(--ease) both}
@keyframes gatein{from{opacity:0}to{opacity:1}}
html.consented #gate,html:not(.js) #gate{display:none}
html.js:not(.consented):not(.nogate){overflow:hidden}
#gate .gin{width:min(460px,100%);background:var(--paper);border-top:2px solid var(--gold);padding:clamp(26px,3vw,34px);
  box-shadow:0 30px 70px -20px rgba(4,24,44,.45),0 4px 14px -4px rgba(4,24,44,.18);animation:cardin .5s var(--ease) both .06s}
@keyframes cardin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#gate h2{font-size:24px;letter-spacing:-.02em;font-weight:400}
#gate p{color:var(--ink-2);font-size:14.5px;line-height:1.6;margin:12px 0 0}
#gate .gacts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
#gate .btn{padding:14px 18px;font-size:11px}
#gate .fine{color:var(--ink-3);font-size:12px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line-2)}
#gate .fine a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(31,92,143,.35);white-space:nowrap}
@media (max-width:420px){#gate .gacts .btn{flex:1 1 100%;justify-content:center}}

/* ── reveal: small, slow, and already visible without JS ─────────── */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity 1.1s var(--ease),transform 1.2s var(--ease)}
.js .rv[data-in]{opacity:1;transform:none}
.mods li:nth-child(2) .rv{transition-delay:.08s}.mods li:nth-child(3) .rv{transition-delay:.16s}.mods li:nth-child(4) .rv{transition-delay:.24s}


/* ═════════════════════════════════════════════════════════════════════
   THE INNER PAGES
   ═════════════════════════════════════════════════════════════════════ */

/* ── page hero: the homepage's sea, one page deep ────────────────── */
/* Sticky, full-bleed, white type upper-left on a navy scrim weighted top and left. The first
   section after it rises out of mist and slides over, as the homepage intro does. */
.ph{position:sticky;top:0;z-index:0;min-height:max(640px,100svh);overflow:hidden;background:#9FB2C2;color:#fff;
  display:flex;flex-direction:column}
.ph .plate{position:absolute;inset:-2% 0 0;will-change:transform}
.ph .plate img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);filter:saturate(.72) contrast(1.03)}
/* per-frame crop on desktop: a box larger than the plate, anchored by --pos, moves the subject clear
   of the type — the homepage hero's move. Set inline on the img as --w / --h. */
@media (min-width:761px){.ph .plate img{width:var(--w,100%);height:var(--h,100%);max-width:none;transform:translateY(var(--y,0))}}   /* --y lifts a tall box: object-position cannot, once the box is taller than the plate */
@media (max-width:760px){.ph .plate img{height:var(--h-m,100%)}}
.ph .plate::after{content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(4,24,44,.66) 0%,rgba(4,24,44,.26) 38%,rgba(4,24,44,.06) 62%,rgba(4,24,44,.34) 100%),
    linear-gradient(90deg,rgba(4,24,44,.56) 0%,rgba(4,24,44,.24) 44%,rgba(4,24,44,0) 70%)}
.ph .veil{position:absolute;inset:0;background:var(--mist);opacity:0;pointer-events:none}
.ph .copy{position:relative;z-index:2;flex:1;padding:clamp(128px,19vh,190px) 0 clamp(80px,12vh,130px);will-change:transform,opacity}
.ph .tag{color:rgba(240,245,249,.95)}
.ph h1{max-width:17ch}
.ph .lead{max-width:46ch;margin-top:clamp(22px,2.4vw,34px);color:rgba(255,255,255,.9)}
.ph .sub{max-width:46ch;font-size:15.5px;color:rgba(233,240,246,.8)}
.ph .lead + .sub{margin-top:clamp(14px,1.4vw,20px)}
@media (min-width:761px) and (max-width:1100px){
  .ph .plate::after{background:
    linear-gradient(180deg,rgba(4,24,44,.66) 0%,rgba(4,24,44,.3) 40%,rgba(4,24,44,.14) 64%,rgba(4,24,44,.38) 100%),
    linear-gradient(90deg,rgba(4,24,44,.72) 0%,rgba(4,24,44,.5) 50%,rgba(4,24,44,.1) 80%)}
}
/* bright plates: the scrim gains weight behind the copy column so body text holds 4.5:1 */
.ph.bright .plate::after{background:
    linear-gradient(180deg,rgba(4,24,44,.7) 0%,rgba(4,24,44,.4) 40%,rgba(4,24,44,.2) 64%,rgba(4,24,44,.4) 100%),
    linear-gradient(90deg,rgba(4,24,44,.74) 0%,rgba(4,24,44,.58) 42%,rgba(4,24,44,0) 74%)}
@media (min-width:761px) and (max-width:1100px){
  .ph.bright .plate::after{background:
    linear-gradient(180deg,rgba(4,24,44,.7) 0%,rgba(4,24,44,.44) 40%,rgba(4,24,44,.26) 64%,rgba(4,24,44,.44) 100%),
    linear-gradient(90deg,rgba(4,24,44,.78) 0%,rgba(4,24,44,.64) 52%,rgba(4,24,44,.12) 84%)}
}
/* the scroll cue, on every page that opens with a hero or page head — the homepage's own cue */
.cue{position:relative;display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.cue i{width:20px;height:32px;border:1px solid currentColor;border-radius:12px;position:relative;opacity:.8;flex:none}
.cue i::after{content:'';position:absolute;left:50%;top:7px;width:1px;height:7px;background:currentColor;
  transform:translateX(-50%);animation:cue 2.6s var(--slow) infinite}
@keyframes cue{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,9px)}}
.cue .meta{color:inherit}
.ph .foot{position:absolute;z-index:2;left:0;right:0;bottom:clamp(20px,3.6vh,36px);color:var(--on-deep)}
.phead .wrap.foot{display:block;margin-top:clamp(40px,4.4vw,64px);color:var(--ink-2)}
@media (max-height:760px) and (min-width:761px){.ph .foot{bottom:12px}}   /* short laptops: keep clear of the copy */
@media (max-width:760px){.ph .foot,.phead .wrap.foot{display:none!important}}
/* breadcrumb on the strategy pages: it takes the tag's place, and it is wayfinding, not a kicker */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;list-style:none;padding:0;margin:0 0 clamp(18px,2vw,26px);color:rgba(240,245,249,.95)}
.crumb::before{content:'';width:28px;height:1px;background:currentColor;opacity:.55}
.crumb li{display:flex;align-items:center;gap:14px}
.crumb li+li::before{content:'';width:12px;height:1px;background:currentColor;opacity:.55}
.crumb a{text-decoration:none;border-bottom:1px solid rgba(233,240,246,.35);padding-bottom:3px;transition:border-color .4s var(--ease)}
.crumb a:hover{border-bottom-color:currentColor}
.crumb [aria-current]{color:#fff}
@media (max-width:760px){
  .crumb{display:grid;grid-template-columns:28px 1fr;column-gap:14px;row-gap:8px;align-items:center}
  .crumb::before{grid-row:1}
  .crumb li{grid-column:2}
  .crumb li+li::before{display:none}
}
@media (max-width:760px){
  .ph{position:relative;min-height:auto}
  .ph .plate{inset:0}
  .ph .plate::after,.ph.bright .plate::after{background:linear-gradient(180deg,rgba(4,24,44,.78) 0%,rgba(4,24,44,.68) 50%,rgba(4,24,44,.64) 68%,rgba(4,24,44,.3) 82%,rgba(230,236,241,0) 90%,var(--mist) 100%)}
  .ph.bright .plate::after{background:linear-gradient(180deg,rgba(4,24,44,.8) 0%,rgba(4,24,44,.72) 50%,rgba(4,24,44,.7) 76%,rgba(4,24,44,.34) 88%,rgba(230,236,241,0) 94%,var(--mist) 100%)}
  .ph .plate img{object-position:var(--pos-m,var(--pos,50% 50%))}
  .ph .copy{padding:clamp(112px,16vh,136px) 0 clamp(150px,34svh,260px)}
  .ph .sub{font-size:15px}
}

/* a hero with one line to say: shorter, so the page arrives sooner */
.ph.short{min-height:max(560px,74svh)}
@media (max-width:760px){.ph.short .copy{padding-bottom:clamp(120px,26svh,200px)}}

/* the section that slides over a hero rises out of the mist the hero fades to */
.ph + section{background:linear-gradient(180deg,var(--mist) 0%,var(--paper) min(520px,60%));
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 150px);mask:linear-gradient(180deg,transparent 0,#000 150px);
  margin-top:-150px;padding-top:calc(clamp(120px,11vw,170px) + 150px)}
/* a full-height hero fills the first screen: the section starts at the fold and its masked top edge
   dissolves over the pinned photo only as it scrolls up (28 Sep — the overlap used to start inside the
   first viewport and read as a pale band across the foot of the photo). The short Contact hero keeps
   the overlap: there the next section is meant to show on arrival */
.ph:not(.short) + section{margin-top:0}
.ph + section .tag{color:var(--ink-2)}   /* --ink-3 drops to 4.3:1 on the mist end */
@media (max-width:760px){
  .ph + section{-webkit-mask:none;mask:none;margin-top:0;background:linear-gradient(180deg,var(--mist) 0%,var(--paper) 360px);padding-top:clamp(64px,16vw,88px)}
}

/* ── page head: the pages without a plate ───────────────────────── */
.phead{background:linear-gradient(180deg,var(--mist) 0%,var(--paper) 100%);padding:clamp(150px,17vw,230px) 0 clamp(64px,7vw,110px)}
.phead .tag{color:var(--ink-2)}
.phead .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,90px);align-items:end}
.phead h1{max-width:17ch}
.phead .body{max-width:48ch;color:var(--ink-2)}
.phead .body .lead{color:var(--ink-2)}
@media (max-width:900px){.phead .wrap{grid-template-columns:1fr;gap:22px}}

/* ── sections ────────────────────────────────────────────────────── */
.pad{padding:clamp(96px,10vw,156px) 0}
/* a light section that follows another light one: no second gap, a hairline instead */
.pad.ruled{padding-top:0}
.pad.ruled > .wrap{border-top:1px solid var(--line);padding-top:clamp(64px,7vw,110px)}
main > :where(section){background:var(--paper)}   /* zero specificity: any section that sets its own ground wins */

/* a section head: statement left, text right, bottom-aligned */
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,5vw,90px);align-items:end}
.head h2{max-width:15ch}
.head .lead{max-width:46ch}
.head .go{margin-top:clamp(22px,2.4vw,30px)}
.head .body{max-width:56ch;color:var(--ink-2)}
.head .body p:first-child{font-size:clamp(17px,1.28vw,20px);line-height:1.58;color:var(--ink)}
@media (max-width:900px){.head{grid-template-columns:1fr;gap:18px}}

/* chapters: a strategy page's argument. Statement left, text right, ruled between. */
.chap .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(28px,6vw,110px);align-items:start}
.chap h2{max-width:14ch}
.chap .body{max-width:60ch;color:var(--ink-2)}
.chap .body p:first-child{font-size:clamp(17px,1.28vw,20px);line-height:1.58;color:var(--ink)}
/* .wide breaks the rhythm: the heading across, the text in two columns. Never twice in a row. */
.chap.wide .wrap{grid-template-columns:1fr;gap:clamp(26px,3.2vw,48px)}
.chap.wide h2{max-width:22ch}
.chap.wide .body{max-width:none;columns:2;column-gap:clamp(28px,6vw,110px)}
.chap.wide .body p{break-inside:avoid}
.chap.wide .body p:first-child{column-span:all;max-width:52ch;margin-bottom:1.3em}
@media (max-width:900px){
  .chap .wrap{grid-template-columns:1fr;gap:22px}
  .chap.wide .body{columns:1}
}

/* ── deep water: the dark region ─────────────────────────────────── */
.deep{background:var(--deep);color:var(--on-deep);overflow:hidden;isolation:isolate}
.deep .water{position:absolute;inset:0;z-index:-1}
.deep .water img{width:100%;height:100%;object-fit:cover;filter:saturate(.55) brightness(.62)}
.deep .water::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,24,44,.96) 0%,rgba(4,24,44,.78) 44%,rgba(4,24,44,.93) 100%)}
.deep .tag{color:var(--on-deep-2)}
.deep .lead,.deep .body{color:var(--on-deep-2)}
.deep .course{color:var(--on-deep);--dot:#06203A}
.deep .course li+li{border-left-color:var(--on-deep-line)}
.deep .course p{color:var(--on-deep-2)}
@media (max-width:900px){.deep .course li+li{border-left:0}}
/* a statement: heading left, text beside it */
.stmt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(28px,6vw,110px);align-items:start}
.stmt h2{max-width:14ch;font-size:clamp(34px,4vw,62px)}
.stmt h2 .ln{display:block}
.stmt h2:has(.ln){max-width:none}
.stmt .body{max-width:54ch;padding-top:clamp(0px,.8vw,12px)}
.stmt .body p:first-child{font-size:clamp(17px,1.28vw,20px);line-height:1.58;color:var(--on-deep)}
@media (max-width:900px){.stmt{grid-template-columns:1fr;gap:26px}}

/* four ruled items, for sets that are not a sequence */
.quad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,2.6vw,44px);list-style:none;padding:0;margin:clamp(56px,6vw,96px) 0 0}
.quad li{padding-top:26px;border-top:1px solid var(--ink)}
.quad h3{margin:0}
.quad p{margin:14px 0 0;color:var(--ink-2);font-size:15px;max-width:30ch}
.deep .quad li{border-top-color:rgba(233,240,246,.5)}
.deep .quad p{color:var(--on-deep-2)}
@media (max-width:1100px){.quad{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px clamp(20px,4vw,44px)}}
@media (max-width:560px){.quad{grid-template-columns:1fr;gap:34px}}
.tag + .quad{margin-top:clamp(28px,3vw,44px)}
.focus .quad h3{font-size:clamp(22px,1.9vw,30px);font-weight:300;letter-spacing:-.02em;line-height:1.14}
.focus .quad p{font-size:15.5px}
/* four across: each heading holds one line at every width, so the row reads the same on any screen */
@media (min-width:1101px){.focus .quad h3{white-space:nowrap;font-size:clamp(20px,1.75vw,30px)}}

/* ── about: the five principles, with an index rail ──────────────── */
.doc{display:grid;grid-template-columns:minmax(190px,.3fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:start}
.rail{position:sticky;top:120px;align-self:start}
.rail ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line);position:relative}
.rail li a{display:flex;gap:12px;padding:9px 0 9px 20px;text-decoration:none;
  font:500 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);transition:color .35s var(--ease)}
.rail li a:hover,.rail li a[aria-current]{color:var(--ink)}
.rail .n{flex:none;min-width:2.2em;font-variant-numeric:tabular-nums lining-nums}
.rail .tick{position:absolute;left:-1px;top:0;width:1px;height:1px;background:var(--ink);
  transform-origin:0 0;transform:scaleY(0);transition:transform .6s var(--ease);pointer-events:none}
@media (max-width:900px){.doc{grid-template-columns:1fr;gap:0}.rail{display:none}}

.pr{display:grid;grid-template-columns:clamp(64px,7vw,120px) minmax(0,1fr);gap:0 clamp(16px,2vw,32px);
  padding:clamp(40px,4.4vw,64px) 0;border-top:1px solid var(--line);scroll-margin-top:100px}
.pr:last-child{padding-bottom:0}
.pr .no{font-weight:300;font-size:clamp(34px,3.4vw,54px);line-height:.9;letter-spacing:-.03em;color:var(--ink-3);
  font-variant-numeric:tabular-nums lining-nums}
.pr h3{font-size:clamp(26px,2.4vw,38px);font-weight:300;letter-spacing:-.025em;line-height:1.1}
.pr .maxim{margin:14px 0 0;font-size:clamp(17px,1.28vw,20px);line-height:1.5;color:var(--ink)}
.pr .body{margin-top:clamp(20px,2vw,28px);max-width:62ch;color:var(--ink-2)}
@media (max-width:560px){.pr{grid-template-columns:1fr}.pr .no{margin-bottom:18px}}

/* a close with more to say: two paragraphs, and on phones a scrim across the whole plate */
@media (max-width:760px){.close .sky::after{background:linear-gradient(180deg,rgba(4,24,44,.5) 0%,rgba(4,24,44,.62) 55%,rgba(4,24,44,.7) 100%)}}
.close .body{max-width:48ch;margin-top:clamp(20px,2.2vw,30px);color:rgba(255,255,255,.86)}
.close .body p:first-child{font-size:clamp(16.5px,1.18vw,19px);line-height:1.6;color:#fff}

/* ── strategies: the catalogue ──────────────────────────────────── */
.cat{list-style:none;padding:0;margin:clamp(56px,6vw,96px) 0 0;border-top:1px solid var(--ink)}
.cat li{border-bottom:1px solid var(--line)}
.cat a{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(24px,4.6vw,80px);align-items:center;
  padding:clamp(28px,3vw,44px) 0;text-decoration:none;color:inherit}
.cat figure{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--mist-2)}
.cat figure img{width:100%;height:100%;object-fit:cover;filter:saturate(.62) contrast(1.03);
  transform:scale(1.001);transition:transform 1.4s var(--ease),filter .8s var(--ease)}
.cat h3{font-size:clamp(26px,2.6vw,40px);font-weight:300;letter-spacing:-.025em;line-height:1.1;max-width:14ch}
.cat p{margin:16px 0 0;color:var(--ink-2);max-width:42ch}
.cat .go{margin-top:clamp(24px,2.6vw,36px)}
.cat a:hover figure img,.cat a:focus-visible figure img{transform:scale(1.04);filter:saturate(.74) contrast(1.03)}
.cat a:hover .go{border-bottom-color:currentColor}
.cat a:hover .go svg *{transform:translateX(4px)}
@media (max-width:760px){.cat a{grid-template-columns:1fr;gap:22px}}

/* private capital on deep water: a split, because it is not maritime */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,110px);align-items:center}
.split figure{margin:0;aspect-ratio:4/5;max-height:720px;overflow:hidden;background:#06203A}
.split figure img{width:100%;height:100%;object-fit:cover;filter:saturate(.62) contrast(1.03) brightness(.94)}
.split h2{max-width:13ch}
.split .body{margin-top:clamp(20px,2.2vw,30px);max-width:50ch}
.split .go{margin-top:clamp(28px,3vw,40px)}
@media (max-width:900px){.split{grid-template-columns:1fr}.split figure{aspect-ratio:16/11}}

/* ── other strategies: the modules, on paper ─────────────────────── */
.others .tag{margin:0}
.others .mods{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(28px,3vw,44px)}
.others .mod{background:#fff;border-color:var(--line);min-height:clamp(380px,30vw,440px)}
.others .mod figure::after{display:none}
.others .mod figure img{transform:none}
.others .mod .txt{margin-top:0;padding-top:22px}
.others .mods li{display:flex}
.others .mod{flex:1}
.others .mod p{color:var(--ink-2)}
.others .mod .arr{color:var(--ink-3)}
.others .mod .arr svg{color:var(--ink)}
.others .mod:hover,.others .mod:focus-visible{border-color:rgba(11,27,44,.42)}
.others .swipe{color:var(--ink-3)}
.others .swipe i{background:var(--line)}
.others .swipe i b{background:var(--ink);width:33.4%}
@media (max-width:1000px){
  .others .mods{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut)*-1);
    padding:0 var(--gut) 6px;scroll-padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
  .others .mods::-webkit-scrollbar{display:none}
  .others .mods li{flex:0 0 min(78%,380px);scroll-snap-align:start}
  .others .mod{min-height:400px}
  .others .swipe{display:flex}
}
.others{padding-bottom:clamp(72px,7vw,110px)}

/* ── team ────────────────────────────────────────────────────────── */
.band{position:relative;height:clamp(260px,34vw,560px);overflow:hidden;background:var(--mist-2)}
.band img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);filter:saturate(.45) contrast(1.03)}
.band::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,24,44,.12),rgba(4,24,44,.02) 40%,rgba(4,24,44,.18))}
.people{list-style:none;padding:0;margin:0;border-top:1px solid var(--ink)}
.person{display:grid;grid-template-columns:clamp(150px,15vw,220px) minmax(0,.8fr) minmax(0,1.1fr);gap:22px clamp(28px,4.4vw,80px);
  align-items:start;padding:clamp(40px,4.4vw,68px) 0;border-bottom:1px solid var(--line)}
/* headshots: 4:5, graded like every other photograph; a quiet placeholder until the client's arrive */
.face{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--mist-2)}
.face img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.02)}
.face.pending{display:grid;place-items:center;background:linear-gradient(160deg,var(--mist) 0%,var(--mist-2) 100%)}
.face.pending span{font-weight:300;font-size:clamp(30px,2.8vw,42px);letter-spacing:.04em;color:var(--ink-3)}
.person h3{font-size:clamp(28px,2.7vw,42px);font-weight:300;letter-spacing:-.025em;line-height:1.08}
.person .role{margin:16px 0 0;color:var(--ink-2)}
.person:last-child{border-bottom:0}
.person .body{max-width:58ch;color:var(--ink-2)}
.person .body p{font-size:clamp(16px,1.12vw,18px);line-height:1.7}
@media (max-width:1000px){.person{grid-template-columns:clamp(130px,22vw,180px) minmax(0,1fr)}.person .body{grid-column:2}}
@media (max-width:560px){.person{grid-template-columns:104px minmax(0,1fr);column-gap:20px}.person .body{grid-column:1/-1}.person h3{font-size:26px}}

/* ── contact: three routes, one form ─────────────────────────────── */
.routes{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(20px,3vw,56px)}
.routes li{display:flex;flex-direction:column;padding-top:26px;border-top:1px solid var(--ink)}
.routes h3{font-size:clamp(22px,1.8vw,28px);font-weight:300;letter-spacing:-.02em}
.routes p{margin:14px 0 clamp(26px,2.6vw,36px);color:var(--ink-2);max-width:34ch}
.routes .go{margin-top:auto;align-self:flex-start}
@media (max-width:900px){.routes{grid-template-columns:1fr;gap:48px}}

.enquire{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(30px,6vw,110px);align-items:start}
.enquire .aside h2{max-width:12ch}
.enquire .aside .body{margin-top:clamp(18px,2vw,26px);max-width:40ch;color:var(--ink-2)}
.addr{margin-top:clamp(32px,3.4vw,48px);padding-top:22px;border-top:1px solid var(--line);font-size:15px;color:var(--ink-2);font-style:normal;line-height:1.7}
.addr b{display:block;color:var(--ink);font-weight:500}
.addr a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(31,92,143,.35);transition:border-color .4s var(--ease)}
.addr a:hover{border-bottom-color:var(--blue)}
@media (max-width:900px){.enquire{grid-template-columns:1fr}}

.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 22px}
.form .full{grid-column:1/-1}
.fld{display:grid;gap:10px;align-content:start}
.fld > label,.form legend{font:500 12px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.fld .opt{color:var(--ink-3);letter-spacing:.1em;text-transform:none;font-weight:400;font-size:12px;line-height:1}
.fld input,.fld textarea{
  width:100%;font:400 16px/1.5 var(--sans);color:var(--ink);background:#fff;
  border:1px solid rgba(11,27,44,.2);border-radius:0;padding:14px 16px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.fld textarea{min-height:176px;resize:vertical}
.fld input:hover,.fld textarea:hover{border-color:rgba(11,27,44,.42)}
.fld input:focus,.fld textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,92,143,.14)}
.fld[data-err] input,.fld[data-err] textarea,.fld[data-err] .seg{border-color:var(--err)}
.fld .err{display:none;font-size:13px;color:var(--err);margin:0}
.fld[data-err] .err{display:block}
.form fieldset{border:0;margin:0;padding:0;min-width:0}
.form legend{padding:0;margin-bottom:12px}
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid rgba(11,27,44,.2);background:#fff}
.seg label{position:relative;display:block;cursor:pointer}
.seg label+label{border-left:1px solid rgba(11,27,44,.2)}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg span{display:block;padding:15px 12px;text-align:center;font:400 15px/1.3 var(--sans);color:var(--ink-2);
  transition:background .3s var(--ease),color .3s var(--ease)}
.seg label:hover span{background:var(--mist);color:var(--ink)}
.seg input:checked+span{background:var(--navy);color:#fff}
.seg input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
@media (max-width:560px){
  .form{grid-template-columns:1fr}
  .seg{grid-template-columns:1fr}
  .seg label+label{border-left:0;border-top:1px solid rgba(11,27,44,.2)}
}
.form .send{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:6px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.status{grid-column:1/-1;margin:0;padding:18px 20px;border:1px solid var(--line);background:#fff;font-size:15px;color:var(--ink-2)}
.status b{color:var(--ink);font-weight:500}
.status[data-kind="err"]{border-color:rgba(165,54,42,.35);background:#FBF4F3}
.status a{color:var(--blue)}
.sent{border-top:1px solid var(--ink);padding:clamp(28px,3.4vw,44px) 0 0}
.sent:focus{outline:0}
.sent h3{font-size:clamp(26px,2.4vw,36px);font-weight:300;letter-spacing:-.025em;max-width:18ch}
.sent p{color:var(--ink-2);margin-top:16px;max-width:46ch}

/* ── legal: a document ───────────────────────────────────────────── */
.chapter{padding:clamp(52px,5.6vw,88px) 0;border-top:1px solid var(--line);scroll-margin-top:100px}
.chapter:first-child{border-top:0;padding-top:0}
.chapter h2{font-size:clamp(26px,2.4vw,36px);letter-spacing:-.025em;max-width:20ch}
.chapter h2 + .body{margin-top:clamp(20px,2.2vw,30px)}
.chapter .body{max-width:68ch}
.chapter .body p{font-size:16px;color:var(--ink-2)}
.chapter .body > p:first-child,.chapter .body h3 + p{color:var(--ink)}
.chapter h3{font-size:clamp(18px,1.3vw,21px);margin:0 0 12px}
.legal .doc{padding-bottom:clamp(40px,4vw,64px)}
.note{margin:0 0 24px;padding:14px 18px;border:1px solid var(--line);background:#fff;
  font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:68ch}
.chapter .body p.note{font-size:13.5px;color:var(--ink-2)}
.note b{color:var(--blue);font-weight:500}
.chapter .sub-h{margin:14px 0 0}
.chapter .sub-h + .body{margin-top:clamp(30px,3vw,44px)}
.chapter .clause{padding-top:clamp(26px,2.6vw,36px)}
.chapter .clause:first-child{padding-top:0}
.chapter .clause h3{margin:0 0 12px}
.chapter .clause > p:first-of-type{color:var(--ink)}
.chapter .body > .clause > p:not(:first-of-type){color:var(--ink-2)}
.alpha{margin:0 0 1.1em;padding-left:2.2em;color:var(--ink-2);font-size:16px;list-style:lower-alpha}
.alpha li{padding-left:.3em;margin-bottom:.45em}
.alpha li::marker{color:var(--ink-3)}
.chapter .addr{margin:4px 0 1.1em}
.form .fine{margin:0;font-size:13.5px;color:var(--ink-3);max-width:40ch}
.form .fine a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(31,92,143,.35)}
.reset{margin-top:10px}
.reset-msg{font-size:14px;color:var(--ink-2);margin:14px 0 0}
.phead .note{margin:0}

@media (max-height:620px){.ph{position:relative}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .rv{opacity:1!important;transform:none!important}
  .ph{position:relative}
}

/* ── 404 ─────────────────────────────────────────────────────────── */
.phead.nf{min-height:max(560px,78svh);display:grid;align-items:end}
.nf .acts{display:flex;flex-wrap:wrap;gap:22px 40px;margin-top:clamp(28px,3vw,40px)}