/* SELEQT · The Fold, on paper.
   The page is one sheet of two-sided paper: light on the front, SELEQT navy on the back.
   Everything navy on the site is the back of the paper showing: a turned corner,
   the paper that folds between pages, the last fold of the page at the foot.
   Every colour and every type choice lives here, so both can follow the Brand Kit. */
:root{
  --navy:#0a2148; --navy-2:#13326f; --navy-3:#06163a;
  --cobalt:#2f6bf2; --sky:#a9c8ff; --coral:#ff6a48; --paper:#f7f4ec;
  --fold-1:#153878; --fold-2:#11316c; --fold-3:#0d2859; --fold-4:#133372;   /* the paper the pages fold with */
  --body:'DM Sans',sans-serif; --logo:'Cormorant Garamond',serif;
  --bg:#eee7d9; --bg-lo:#dfd5c2; --bg-hi:#f9f4ea;            /* linen */
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,5vw,84px);
  /* ink on the light side of the paper */
  --ink:#0a2148; --soft:rgba(10,33,72,.76); --faint:rgba(10,33,72,.5); --line:rgba(10,33,72,.15); --accent:#2459dc; --wash:rgba(255,255,255,.46); --on-ink:#f7f4ec;
}
/* type, from the Brand Kit: Manrope ExtraBold for headings, DM Sans for text */
html{--display:'Manrope',sans-serif;--dw:800;--dw2:800;--dls:-.04em;--dlh:1;--h2s:.9}
html{--ems:normal}
/* ink on the navy side */
.dark,.scrolled .bar,.foldout,.card:hover{--ink:#f4f1e8;--soft:rgba(244,241,232,.76);--faint:rgba(244,241,232,.48);--line:rgba(244,241,232,.17);--accent:var(--sky);--wash:rgba(244,241,232,.07);--on-ink:#0a2148;color:var(--ink)}

*{box-sizing:border-box;margin:0;padding:0}
/* the page colour lives on the root, so the background canvas (z-index -1) is painted over it, not under it */
html{background:var(--bg) radial-gradient(120% 95% at 72% 18%,var(--bg-hi) 0%,var(--bg) 52%,var(--bg-lo) 100%) fixed;-webkit-text-size-adjust:100%}
body{font-family:var(--body);font-weight:400;color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
em{font-style:var(--ems,italic)}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}
:focus-visible{outline:1px solid var(--accent);outline-offset:4px}

/* ---------- the wordmark: a plain Q whose tail is a folded strip of paper ---------- */
.wm{font-family:var(--logo);font-weight:500;letter-spacing:.2em;line-height:1;white-space:nowrap;display:inline-block}
.wm span{display:inline-block}
.wm .q{position:relative}
.wm .tail{position:absolute;left:0;top:calc(var(--qb,.8)*1em);width:1em;height:1em;overflow:visible;pointer-events:none}
.wm .tail polygon{transition:transform .5s var(--ease);transform-box:fill-box;transform-origin:0 100%}
.logo:hover .tail polygon:last-child{transform:rotate(-58deg)}

/* ---------- the top bar: open at the top of a page, a strip of navy paper once you scroll ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:40;padding:18px var(--pad);pointer-events:none;
  transition:opacity .9s ease,transform .6s var(--ease),padding .5s var(--ease)}
.bar{position:relative;pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:28px;max-width:100%;margin:0 auto;padding:8px 0;color:var(--ink);
  clip-path:polygon(0 0,100% 0,100% 0,100% 100%,0 100%);
  transition:max-width .7s var(--ease),padding .6s var(--ease),background .5s,color .4s,clip-path .6s var(--ease)}
.bar::after{content:"";position:absolute;right:0;top:0;width:0;height:0;background:linear-gradient(225deg,transparent 50%,var(--coral) 50%);transition:width .6s var(--ease),height .6s var(--ease)}
.logo{font-size:25px;display:block;padding:6px 0;transition:font-size .5s var(--ease)}
.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px);transition:gap .5s var(--ease)}
.nl{position:relative;font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--soft);padding:10px 0;transition:color .3s}
.nl::before{content:"";position:absolute;left:0;right:.22em;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.nl:hover,.nl.on,.nl[aria-expanded=true]{color:var(--ink)}
.nl:hover::before,.nl.on::before,.nl[aria-expanded=true]::before{transform:scaleX(1)}
.nl.on::after{content:"";position:absolute;right:-8px;top:6px;border:4px solid transparent;border-top-color:var(--coral);border-right-color:var(--coral)}
.menu-btn{display:none}
.scrolled .top{padding:12px var(--pad)}
.scrolled .bar{max-width:860px;padding:7px 12px 7px 24px;background:var(--navy);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
.scrolled .bar::after{width:16px;height:16px}
.scrolled .logo{font-size:20px}
.scrolled .nav{gap:clamp(14px,2vw,28px)}
.nav-away .top{transform:translateY(-130%)}

/* ---------- buttons: a sheet with one corner turned down ---------- */
.btn{position:relative;display:inline-block;font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;padding:17px 30px 17px 26px;color:var(--ink);
  background:var(--wash);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
  transition:clip-path .45s var(--ease),background .35s,color .35s,filter .35s}
.btn::before{content:"";position:absolute;inset:0;border:1px solid var(--line);pointer-events:none}
.btn::after{content:"";position:absolute;right:0;top:0;width:12px;height:12px;background:linear-gradient(225deg,transparent 50%,var(--accent) 50%);transition:width .45s var(--ease),height .45s var(--ease)}
.btn:hover{clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.btn:hover::after{width:22px;height:22px}
.btn.solid{background:var(--ink);color:var(--on-ink)}
.btn.solid::before{border-color:transparent}
.btn.solid::after{background:linear-gradient(225deg,transparent 50%,var(--coral) 50%)}
.btn.solid:hover{filter:brightness(1.25)}
.dark .btn.solid:hover,.scrolled .bar .btn.solid:hover{filter:none;background:#fff}
.btn.small{padding:12px 24px 12px 18px;font-size:10.5px}

/* ---------- the fold-out menu ---------- */
.foldout{position:fixed;z-index:42;top:78px;right:var(--pad);width:min(440px,calc(100vw - 2*var(--pad)));perspective:1100px;pointer-events:none}
.fo{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:16px;padding:13px 20px 13px 16px;color:var(--ink);
  background:linear-gradient(180deg,var(--fold-1),var(--fold-2));box-shadow:0 18px 30px -18px rgba(6,22,58,.6);
  transform-origin:50% 0;transform:rotateX(-96deg);opacity:0;transition:transform .5s var(--ease),opacity .22s ease,background .3s;transition-delay:calc((var(--n) - var(--i))*35ms)}
.fo:nth-child(even){background:linear-gradient(180deg,var(--fold-3),var(--fold-2))}
.fo + .fo{border-top:1px solid rgba(169,200,255,.18)}
.fo svg{width:46px;height:46px}
.fo b{display:block;font-family:var(--display);font-weight:var(--dw2);font-size:21px;line-height:1.15;letter-spacing:-.01em}
.fo small{display:block;font-size:11.5px;color:var(--soft);line-height:1.35}
.fo i{font-style:normal;font-size:15px;color:var(--sky);transform:translateX(-6px);opacity:0;transition:transform .4s var(--ease),opacity .3s}
.fo:hover{background:linear-gradient(180deg,#2453ab,#1c468f)}
.fo:hover i{transform:none;opacity:1}
.fo.extra{display:none}
.foldout.open{pointer-events:auto}
.foldout.open .fo{transform:none;opacity:1;transition-delay:calc(var(--i)*55ms)}

/* ---------- page changes: the page fades, opens or turns under the paper figure, which waits in the middle of the screen ---------- */
#view{transition:opacity .42s ease,transform .6s var(--ease)}
#view.leaving{opacity:0;transform:translateY(-14px)}
#view.snap{transition:none}

/* ---------- the paper, and the intro ---------- */
#paper{position:fixed;inset:0;width:100%;height:100%;z-index:35;pointer-events:none;display:block}
.fly{position:fixed;z-index:44;left:0;top:0;opacity:0;pointer-events:none;transform-origin:0 0;will-change:transform;color:var(--ink)}
.fly .wm{padding-left:.2em}
.fly.measure .wm span{transform:none!important;transition:none!important;animation:none!important}
/* each letter of the name opens out of the Q, like a flap being raised: no bounce, one easy motion */
.fly .wm>span:not(.q),.fly .q .o{display:inline-block;opacity:0;transform:perspective(700px) translateY(.1em) rotateX(-68deg);transform-origin:50% 100%;transition:opacity .55s ease,transform .9s cubic-bezier(.2,.75,.2,1)}
.fly .wm>span.on:not(.q),.fly .q.on .o{opacity:1;transform:none}
.fly .q .o{transform:none;transition:opacity .4s ease}
.fly .q .tail{opacity:0;transform:perspective(400px) rotate3d(1,1,0,-120deg) scale(.6);transform-origin:46% -27%;transition:opacity .35s ease,transform .9s cubic-bezier(.2,.75,.2,1)}
.fly .q.tail-on .tail{opacity:1;transform:none}
.fly-sub{position:absolute;left:0;right:0;top:calc(100% + .1em);text-align:center;font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--accent);white-space:nowrap;
  opacity:0;transform:translateY(-6px);transition:opacity .6s ease,transform .9s var(--ease)}
.fly-sub::before{content:"";display:block;width:min(46%,340px);height:1px;margin:0 auto 16px;background:linear-gradient(90deg,transparent,var(--accent),transparent);transform:scaleX(0);transition:transform 1s var(--ease)}
.fly.sub .fly-sub{opacity:1;transform:none}
.fly.sub .fly-sub::before{transform:scaleX(1)}
.intro-say{position:fixed;z-index:44;left:0;right:0;top:calc(50% + min(26vw,23vh) + 3.5vh);text-align:center;pointer-events:none;font-family:var(--display);font-weight:var(--dw);font-size:clamp(24px,3.6vw,56px);line-height:1.05;letter-spacing:var(--dls);color:var(--ink);opacity:0;transition:opacity .4s ease}
.intro-say.show{opacity:1}
.intro-say b{display:inline-block;font-weight:inherit;color:var(--accent);opacity:0;transform:perspective(700px) rotateX(-80deg);transform-origin:50% 100%;transition:opacity .25s ease,transform .6s var(--ease)}
.intro-say b.on{opacity:1;transform:none}
.skip{position:fixed;z-index:46;right:var(--pad);bottom:28px;font-size:10px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--faint);padding:10px 0;opacity:0;visibility:hidden;transition:opacity .5s,color .3s}
.skip:hover{color:var(--ink)}
.intro .skip{opacity:1;visibility:visible}
.intro .top,.boot .top{opacity:0;pointer-events:none;transform:translateY(-10px)}
.intro .top .bar,.boot .top .bar{pointer-events:none}
.intro #view,.boot #view{visibility:hidden}
.logo .wm{transition:opacity .01s}
.hide-logo .logo .wm{opacity:0}
.logo.landed .tail polygon:last-child{animation:flick 1.1s var(--ease) .1s}
@keyframes flick{0%,100%{transform:none}40%{transform:rotate(-58deg)}}

/* ---------- type ---------- */
.eyebrow{font-size:10.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
h2{font-family:var(--display);font-weight:var(--dw2);font-size:calc(clamp(30px,3.7vw,58px)*var(--h2s,1));line-height:1.05;letter-spacing:calc(var(--dls)*.6)}
h2 em,.mega em{color:var(--accent);font-family:var(--emf,inherit);font-weight:var(--emw,inherit);letter-spacing:var(--emls,inherit);font-size:var(--emz,1em)}
.lede{font-size:clamp(15.5px,1.2vw,18px);line-height:1.7;color:var(--soft);max-width:46ch}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

/* things arrive the way paper opens: hinged at the top */
.r{opacity:0;transform:perspective(900px) rotateX(-24deg) translateY(16px);transform-origin:50% 0;
  transition:opacity .9s ease,transform 1.2s var(--ease);transition-delay:calc(var(--i,0)*70ms + var(--d,80ms))}
.in .r,.r.in{opacity:1;transform:none}

/* ---------- the hero ---------- */
/* A headline and one small paper figure, with nothing behind it. Three placements of the figure are under review.
   The app fits the headline to the room its layout gives it (--fa). */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:calc(84px + 3vh) var(--pad) clamp(56px,9vh,104px)}
.mega{font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dls);word-spacing:.04em;line-height:var(--dlh);color:var(--ink);font-size:var(--fa,clamp(44px,7vw,120px))}
.mega .ln{display:block;white-space:nowrap}
.mega.static{font-size:calc(clamp(40px,6vw,104px)*var(--h2s,1))}
.probe{position:absolute!important;left:0;top:0;visibility:hidden;pointer-events:none;width:max-content;font-size:var(--pf,100px)!important}
.probe .ln{display:block!important;width:max-content;white-space:nowrap!important;transform:none!important;transition:none!important}
.tie{font-family:var(--emf,var(--display));font-style:var(--ems);font-weight:var(--emw,var(--dw2));font-size:clamp(21px,2.1vw,32px);line-height:1.2;letter-spacing:-.01em;color:var(--accent);margin-top:.85em;max-width:27em}
.hero-sub{margin-top:clamp(22px,3.6vh,36px)}
.hero-sub .lede{margin-top:0}
.hero-sub .actions{margin-top:26px}
.hero.home .hero-sub .actions{margin-top:0}
.fig-anchor{display:block}
.fig-anchor.grab{cursor:grab;touch-action:none;z-index:37}
.figbox{position:relative;aspect-ratio:1}
.figbox .fig-anchor{position:absolute;inset:0}
/* what the paper is folded as: one small line */
.capline{display:flex;align-items:baseline;gap:12px;font-size:10px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--soft);white-space:nowrap}
.capline small{font-size:inherit;color:var(--faint)}
.capline b{font-weight:500;color:var(--ink);transition:color .3s}
.capline b span{display:inline-block;transition:opacity .35s ease,transform .5s var(--ease)}
.capline.swap b span{opacity:0;transform:translateY(5px)}
.capline i{font-style:normal;transition:transform .4s var(--ease)}
.capline:hover b{color:var(--accent)}.capline:hover i{transform:translateX(5px)}

/* In the sentence. The figure stands on the baseline, inside the headline, like one more word. It keeps its own
   size (--fig) whatever size the type is set at. On the home page the words after it change with it: each is
   folded up and the next folded down in its place. */
:root{--fig:clamp(58px,min(8.2vw,13.6vh),150px)}
.hero .mega{line-height:1.06}
.slot{display:inline-block;position:relative;width:calc(var(--fig)*1.18);height:.8em;margin:0 .1em;vertical-align:baseline}
.slot .fig-anchor{position:absolute;left:0;right:0;bottom:0;height:var(--fig)}
.swap{display:inline-grid;vertical-align:baseline}
.swap > span{grid-area:1/1;justify-self:start;opacity:0;transform:perspective(700px) rotateX(-80deg);transform-origin:50% 100%;transition:opacity .28s ease,transform .7s var(--ease)}
.swap > span.on{opacity:1;transform:none;transition-delay:.2s}

/* On the words. In a section with no figure of its own, the paper walks along the top of the heading. */
.fig-anchor[data-perch]{display:inline-block;width:0;height:0;vertical-align:baseline}

/* The seal, to the lower right of the hero: the next fold, inside a slowly turning ring of words that names it. */
.seal{position:absolute;right:var(--pad);top:50%;width:min(18vw,30vh);aspect-ratio:1;transform:translateY(-14%);color:var(--ink)}
.seal svg{position:absolute;inset:0;width:100%;height:100%;animation:turn 44s linear infinite;opacity:0;transition:opacity 1s ease calc(var(--d,80ms) + .4s)}
.in .seal svg{opacity:1}
.seal text{font-family:var(--body);font-size:10.4px;font-weight:500;letter-spacing:.1em;fill:currentColor;transition:opacity .35s ease}
.seal.swap text{opacity:0}
.seal::after{content:"";position:absolute;inset:17%;border-radius:50%;background:rgba(255,255,255,0);transition:background .4s ease}
.seal:hover::after{background:rgba(255,255,255,.34)}
.seal .fig-anchor{position:absolute;inset:27%;z-index:1}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes sayin{from{opacity:0}to{opacity:1}}

/* Two ornaments for empty corners, kept faint: a figure hanging on a thread, and a figure as a footnote mark. */
.hanger{position:absolute;top:0;width:38px;pointer-events:none;opacity:.5;transform-origin:50% 0;animation:sway 7s ease-in-out infinite}
.hanger::before{content:"";display:block;width:1px;height:34px;margin:0 auto -3px;background:currentColor;opacity:.55}
.hanger svg{display:block;width:100%;height:auto}
.close .hanger{left:57%;top:-2.85vw;width:44px;opacity:.38}   /* it hangs from the slanted edge of the fold */
.close .hanger::before{height:calc(2.85vw + 70px)}
.next .hanger{right:calc(var(--pad) + 13vw)}
@keyframes sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.foot .fn{display:inline-block;padding:0;width:1.7em;height:1.7em;margin:0 .35em 0 0;vertical-align:-.5em;opacity:.7}
.fn svg{display:block;width:100%;height:100%}
.foot p:not(.legal) > .fn{width:1.35em;height:1.35em;margin:0 0 0 .25em;vertical-align:.15em}   /* after the line it marks, raised like a footnote number */

/* ---------- sections ---------- */
.page{padding-top:1px}
.sec{position:relative;padding:clamp(70px,11vh,130px) var(--pad);border-top:1px solid var(--line)}
.sec-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:6vw;align-items:end;margin-bottom:clamp(36px,6vh,64px)}
.sec-h p{color:var(--soft);font-size:16.5px;line-height:1.75;max-width:54ch}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{position:relative;padding:28px 26px 30px;background:rgba(249,244,234,.92);color:var(--ink);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);transition:clip-path .5s var(--ease),background .4s,color .4s,opacity .9s ease calc(var(--i,0)*70ms + var(--d,80ms)),transform 1.2s var(--ease) calc(var(--i,0)*70ms + var(--d,80ms))}
.card::after{content:"";position:absolute;right:0;top:0;width:16px;height:16px;background:linear-gradient(225deg,transparent 50%,var(--navy) 50%);transition:width .5s var(--ease),height .5s var(--ease),background .4s}
.card:hover{background:var(--navy);clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,0 100%)}   /* a card turns over to its navy side */
.card:hover::after{width:34px;height:34px;background:linear-gradient(225deg,transparent 50%,var(--coral) 50%)}
.card i{font-family:var(--display);font-style:normal;font-size:15px;font-weight:var(--dw2);color:var(--accent);transition:color .4s}
.card h3{font-family:var(--display);font-weight:var(--dw2);font-size:calc(clamp(21px,1.8vw,27px)*var(--h2s,1));line-height:1.15;letter-spacing:-.012em;margin:10px 0 10px}
.card p{font-size:14.5px;color:var(--soft);line-height:1.65;transition:color .4s}
.note{margin-top:28px;font-size:12.5px;color:var(--faint)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.stats div{padding:38px var(--pad) 40px;border-right:1px solid var(--line)}
.stats div:last-child{border-right:0}
.stats div + div{padding-left:clamp(18px,2.4vw,36px)}
.stats b{display:block;font-family:var(--display);font-weight:var(--dw);font-size:calc(clamp(38px,4.4vw,70px)*var(--h2s,1));line-height:1;letter-spacing:var(--dls)}
.stats span{display:block;margin-top:10px;font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);line-height:1.6;max-width:24ch}
.team{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.team li{background:var(--bg-hi);padding:22px 22px 24px}
.team b{display:block;font-family:var(--display);font-weight:var(--dw2);font-size:calc(21px*var(--h2s,1));line-height:1.15;letter-spacing:-.01em}
.team span{display:block;margin-top:6px;font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
.reach div{display:grid;grid-template-columns:minmax(120px,1fr) 3fr;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.reach div:first-child{border-top:1px solid var(--line)}
.reach dt{font-size:10.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--faint)}
.reach dd{font-family:var(--display);font-weight:var(--dw2);font-size:calc(clamp(20px,2.2vw,34px)*var(--h2s,1));overflow-wrap:anywhere;letter-spacing:-.012em}
.reach a:hover{color:var(--accent)}
.next{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(20px,3vw,44px);padding:clamp(44px,8vh,90px) var(--pad);border-top:1px solid var(--line);transition:background .5s,opacity .9s ease,transform 1.2s var(--ease)}
.next:hover{background:var(--wash)}
.next-fig{width:clamp(84px,9vw,130px);height:clamp(84px,9vw,130px);padding:12px;background:linear-gradient(160deg,var(--navy-2),var(--navy));transform:rotate(-4deg);transition:transform .8s var(--ease)}
.next:hover .next-fig{transform:rotate(4deg) scale(1.05)}
.next small{display:block;font-size:10.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.next b{font-family:var(--display);font-weight:var(--dw);font-size:calc(clamp(32px,4.8vw,80px)*var(--h2s,1));line-height:1;letter-spacing:var(--dls)}
.next>i{font-style:normal;font-family:var(--body);font-weight:300;font-size:clamp(34px,4vw,64px);color:var(--accent);transition:transform .6s var(--ease)}
.next:hover>i{transform:translateX(14px)}
/* the foot of the page: the sheet folds over one last time, navy side up */
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:30px;padding:64px var(--pad) 40px;font-size:14px;color:var(--soft);background:linear-gradient(180deg,var(--navy),var(--navy-3))}
.foot-wm{font-family:var(--logo);font-weight:500;font-size:24px;letter-spacing:.2em;color:var(--ink)}
.foot small{display:block;font-size:10px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.foot a,.foot span{display:block;padding:3px 0}
.foot a:hover{color:var(--ink)}
.foot .legal{grid-column:1/-1;margin-top:22px;padding-top:22px;border-top:1px solid var(--line);font-size:11.5px;color:var(--faint);max-width:none}

/* ---------- home, below the hero ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);padding:20px 0;white-space:nowrap}
.marquee .track{display:inline-block;animation:slide 46s linear infinite;font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--soft)}
.marquee .track span{margin:0 22px}.marquee .track i{font-style:normal;color:var(--coral)}
@keyframes slide{to{transform:translateX(-50%)}}
.statement{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:6vw;align-items:end}
.statement h2{font-size:calc(clamp(32px,4.5vw,74px)*var(--h2s,1));line-height:1.03}
.statement p{color:var(--soft);font-size:16.5px;line-height:1.75;max-width:46ch}
.statement .btn{margin-top:28px}
/* the five practices: the list on one side, the figure on the other, refolding as you move down the list */
.prac{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:4vw;align-items:start}
.prac-fig{position:sticky;top:calc(50vh - min(12vw,20vh));display:flex;justify-content:center}
.prac-fig .figbox{width:min(24vw,40vh)}
.prow{position:relative;display:grid;grid-template-columns:3.4rem 1fr auto;align-items:baseline;column-gap:14px;padding:clamp(18px,3.2vh,30px) 0;border-bottom:1px solid var(--line);
  transition:opacity .9s ease calc(var(--i,0)*70ms + var(--d,80ms)),transform 1.2s var(--ease) calc(var(--i,0)*70ms + var(--d,80ms)),padding .5s var(--ease)}
.prow i{font-family:var(--body);font-style:normal;font-weight:500;font-size:12px;letter-spacing:.1em;color:var(--faint);transition:color .4s}
.prow b{font-family:var(--display);font-weight:var(--dw);font-size:calc(clamp(32px,4.2vw,70px)*var(--h2s,1));line-height:1.02;letter-spacing:var(--dls);color:var(--faint);transition:color .4s,transform .6s var(--ease);transform-origin:0 50%}
.prow u{text-decoration:none;font-family:var(--body);font-weight:300;font-size:30px;color:var(--accent);opacity:0;transform:translateX(-12px);transition:opacity .4s,transform .5s var(--ease)}
.prow span{grid-column:2/4;font-size:14.5px;color:var(--soft);max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .5s,margin .6s var(--ease)}
.prow.on b{color:var(--ink);transform:translateX(10px)}
.prow.on i{color:var(--coral)}
.prow.on u{opacity:1;transform:none}
.prow.on span{max-height:60px;opacity:1;margin-top:10px}
.band{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:6vw;align-items:center}
.band h2{margin-bottom:20px}
.band p{color:var(--soft);font-size:16.5px;line-height:1.75;max-width:48ch}
.band .btn{margin-top:30px}
.gstats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.gstats div{background:linear-gradient(160deg,var(--navy-2),var(--navy));padding:30px 26px 32px;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.gstats b{display:block;font-family:var(--display);font-weight:var(--dw);font-size:calc(clamp(38px,4.2vw,66px)*var(--h2s,1));line-height:1;letter-spacing:var(--dls)}
.gstats span{display:block;margin-top:10px;font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);line-height:1.6}
/* the closing section is the navy side of the page */
.close{min-height:92vh;display:flex;flex-direction:column;justify-content:center;border-top:0;background:linear-gradient(175deg,var(--navy-2),var(--navy) 46%,var(--navy));
  margin-top:5vw;padding-top:calc(clamp(70px,11vh,130px) + 3vw)}
.close::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:5vw;background:var(--navy-2);clip-path:polygon(0 100%,100% 0,100% 100%)}   /* the edge of the fold runs across the page at a slant */
.close .figbox{position:absolute;right:calc(var(--pad) + 3vw);top:50%;transform:translateY(-50%);width:min(28vw,46vh)}
.close .reach{max-width:min(40rem,50vw);margin-top:44px}
.close .mega{color:var(--ink)}

@media (max-width:900px){
  .nav{display:none}.menu-btn{display:block}
  .bar,.scrolled .bar{max-width:100%;padding:6px 14px 6px 16px;background:var(--navy);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
    --ink:#f4f1e8;--soft:rgba(244,241,232,.76);--line:rgba(244,241,232,.17);--accent:var(--sky);color:var(--ink)}
  .bar::after{width:14px;height:14px}
  .top,.scrolled .top{padding:10px 12px}
  .logo,.scrolled .logo{font-size:20px}
  .fo.extra{display:grid}
  .hero{min-height:0;padding:104px var(--pad) 60px;justify-content:flex-start}
  .mega{font-size:calc(min(12.6vw,8.6vh)*var(--megs,1))}   /* a wide face is set smaller on a phone, so its longest word still fits */
  .mega .ln{white-space:normal}
  .tie{font-size:22px}
  .slot{width:1.14em}.slot .fig-anchor{height:.94em}
  .swap{display:inline}.swap > span{display:none}.swap > span.on{display:inline;animation:sayin .5s ease}   /* on a phone the words simply change: stacking every version would make the line as wide as the longest */
  .seal{position:relative;right:auto;top:auto;transform:none;width:min(54vw,28vh);margin:38px auto 0;display:block}
  .next .hanger{display:none}.close .hanger{left:auto;right:12%;top:5vw}
  .capline{letter-spacing:.2em;gap:10px}.capline small{display:none}
  .sec-h,.statement,.band,.prac{grid-template-columns:1fr;gap:22px}
  .prac-fig{position:static;order:-1}.prac-fig .figbox{width:min(44vw,24vh);margin-bottom:6px}
  .cards{grid-template-columns:1fr}
  h2,.team b,.card h3,.next b,.prow b,.stats b{overflow-wrap:anywhere}.team li,.stats div,.next span{min-width:0}
  .stats,.team{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats div{border-bottom:1px solid var(--line);padding:26px var(--pad) 28px}
  .stats div + div{padding-left:var(--pad)}
  .foot{grid-template-columns:1fr 1fr}
  .close{min-height:0}.close .reach{max-width:none}
  .close .figbox{position:relative;right:auto;top:auto;transform:none;width:min(46vw,26vh);margin:0 auto 26px;order:-1}
  .reach div{grid-template-columns:1fr;gap:4px}
  .fly-sub{font-size:8.5px;letter-spacing:.3em}
}
@media (prefers-reduced-motion:reduce){
  .r,.prow,#view,.swap > span{transition-duration:.01s;transition-delay:0s}
  .seal svg,.hanger{animation:none}
  .fo{transition-duration:.01s;transition-delay:0s!important}
  .marquee .track{animation:none}
}

/* ---------- review panel: compare the options. Not part of the site. ---------- */
.opts{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:60;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:400;color:#f4f1e8;background:rgba(6,18,46,.94);
  border:1px solid rgba(169,200,255,.24);padding:10px 12px 12px;max-width:min(430px,calc(100vw - 28px));box-shadow:0 18px 40px -18px rgba(0,5,20,.6)}
.opts-tab{display:flex;justify-content:space-between;gap:20px;width:100%;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:#a9c8ff}
.opts-tab i{font-style:normal;font-size:13px;letter-spacing:0;line-height:.8}
.opts.shut{padding:0;border-right:0}.opts.shut .opts-body{display:none}
.opts.shut .opts-tab{writing-mode:vertical-rl;padding:14px 6px;gap:10px;font-size:8.5px}
.og{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.og small{width:76px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,241,232,.55)}
.og button{font-size:10.5px;letter-spacing:.04em;padding:6px 10px;border:1px solid rgba(244,241,232,.18);color:rgba(244,241,232,.78);white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.og button:hover{border-color:#a9c8ff;color:#fff}
.og button.on{background:#f6f3ea;color:#0a2148;border-color:#f6f3ea}
@media (max-width:900px){.opts{left:8px;right:8px;top:auto;bottom:8px;transform:none;max-width:none}.opts.shut{left:auto;right:8px;padding:8px 10px;border-right:1px solid rgba(169,200,255,.24)}.opts.shut .opts-tab{writing-mode:horizontal-tb;padding:0;font-size:9.5px}.og small{width:100%}}

/* ---------- the cursor: a folded paper dart, coral over anything you can press ---------- */
html,html *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M3 3 27 12 15 15z' fill='%2313326f' stroke='%23fff' stroke-linejoin='round'/%3E%3Cpath d='M3 3 15 15 12 27z' fill='%230a2148' stroke='%23fff' stroke-linejoin='round'/%3E%3C/svg%3E") 3 3,auto}
html a,html button,html a *,html button *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M3 3 27 12 15 15z' fill='%23ff6a48' stroke='%23fff' stroke-linejoin='round'/%3E%3Cpath d='M3 3 15 15 12 27z' fill='%23d24f31' stroke='%23fff' stroke-linejoin='round'/%3E%3C/svg%3E") 3 3,pointer}
.fig-anchor.grab,.fig-anchor.grab *{cursor:grab}