/* The Ops Layer · Home v3 system (Claude Design handoff, 2 Oct 2026). Source: Design Handoff/home-v3.html */
/* product marks */
.mk{display:block;width:1em;height:1em;overflow:visible;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;fill:none}
.mk .fillc{fill:currentColor;stroke:none}
.mk-snap .br{transform-origin:32px 32px;transition:transform .9s var(--ex)}
.mk-snap .core{transform-origin:32px 32px;transition:transform .9s var(--ex),opacity .6s}
.mk-sprint .sl{transition:opacity .4s var(--ease),transform .7s var(--ex)}
.mk-install .pp{transition:transform .9s var(--ex),fill-opacity .6s var(--ease);fill:currentColor;fill-opacity:0}
.mk-install .pp:nth-of-type(1){transform:translateX(5px)}
.mk-install .pp:nth-of-type(2){transform:translateX(9px)}
.mk-install .pin{transition:opacity .5s .3s;opacity:.5}
.hv:hover .mk-snap .br,.on .mk-snap .br,.mk-snap.live .br{transform:scale(.8)}
.hv:hover .mk-snap .core,.on .mk-snap .core,.mk-snap.live .core{transform:scale(1.12)}
.hv:hover .mk-sprint .sl,.on .mk-sprint .sl,.mk-sprint.live .sl{animation:slat 1.6s var(--ease) infinite;animation-delay:calc(var(--k) * 110ms)}
@keyframes slat{0%,100%{opacity:var(--o)}35%{opacity:1;transform:translateY(-2px)}}
.hv:hover .mk-install .pp,.on .mk-install .pp,.mk-install.live .pp{transform:none;fill-opacity:.16}
.hv:hover .mk-install .pin,.on .mk-install .pin,.mk-install.live .pin{opacity:1}

/* buttons (6 Oct 2026, replaces the glass pills): flat, solid, hairline. The arrow rides on one of the
   logo's slanted planes; on hover that plane sweeps across the button and inverts the label through it
   (mix-blend difference, so the ground under it must be solid). Primary shows its plane at rest. */
.btn{--pw:56px;--sl:30px;position:relative;display:inline-flex;align-items:center;height:54px;padding:0 0 0 26px;border:1px solid rgb(255 255 255 / .26);border-radius:4px;background:#0B0B0B;color:#fff;font:700 15px/1 var(--sans);letter-spacing:.01em;text-decoration:none;white-space:nowrap;overflow:hidden;isolation:isolate;cursor:pointer;transition:border-color .4s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;z-index:1;background:#F0EFEE;mix-blend-mode:difference;pointer-events:none;
  clip-path:polygon(calc(100% + var(--sl)) 0,calc(100% + var(--sl)) 0,calc(100% + var(--sl)) 100%,100% 100%);
  transition:clip-path .75s var(--ex)}
.btn-w::after,.btn.apf-send::after,.btn.qz-next::after,.btn.qz-send::after,.btn.sub-go::after,.rt-p>.btn::after{clip-path:polygon(calc(100% - var(--pw)) 0,calc(100% + var(--sl)) 0,calc(100% + var(--sl)) 100%,calc(100% - var(--pw) - var(--sl)) 100%)}
.btn:hover::after,.btn:focus-visible::after{clip-path:polygon(0 0,calc(100% + var(--sl)) 0,calc(100% + var(--sl)) 100%,calc(0px - var(--sl)) 100%)}
.btn:hover{border-color:rgb(255 255 255 / .6)}
.btn-w{border-color:rgb(255 255 255 / .5)}
.btn:active::after{transition-duration:.2s;opacity:.88}
.btn:focus-visible{outline:2px solid #F26B21;outline-offset:3px}
.btn .ic{flex:none;width:16px;height:16px;margin:0 22px 0 58px;font-size:16px;color:currentColor;transition:transform .6s var(--ex)}
.btn:hover .ic{transform:translateX(4px)}
.btn>span:only-child,.btn:not(:has(.ic)){padding-right:26px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.band-light .btn{background:#F6F5F2;color:#0F0F0F;border-color:rgb(0 0 0 / .28)}
.band-light .btn:hover{border-color:rgb(0 0 0 / .7)}
.band-light .btn-w,.band-light .rt-p>.btn,.band-light .btn.sub-go,.band-light .btn.qz-next,.band-light .btn.qz-send,.band-light .btn.apf-send{background:#0F0F0F;color:#fff;border-color:#0F0F0F}
@media (max-width:760px){.nav .btn{height:42px;padding:0 18px;font-size:13px}.nav .btn .ic{display:none}.nav .btn::after{clip-path:polygon(calc(100% + var(--sl)) 0,calc(100% + var(--sl)) 0,calc(100% + var(--sl)) 100%,100% 100%)}}
@media (prefers-reduced-motion:reduce){.btn::after,.btn .ic{transition:none}}
.lk{display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:700;text-decoration:none;color:var(--fg);position:relative;padding-bottom:6px}
.lk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.32}
.lk::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ex)}
.lk:hover::before{transform:scaleX(1)}
.lk .ic{font-size:16px;transition:transform .5s var(--ex)}
.lk:hover .ic{transform:translateX(5px)}

/* nav */
.nav{position:sticky;top:0;z-index:60;height:88px;margin-bottom:-88px;transition:background-color .6s var(--ease)}
.nav.scrolled{background:rgba(0,0,0,.84);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
.nav-prog{position:absolute;left:0;bottom:0;height:1px;width:100%;opacity:0;transition:opacity .4s}
.nav.scrolled .nav-prog{opacity:1}
.nav-prog i{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.7));transform-origin:left;transform:scaleX(var(--sp,0))}
.nav-in{height:88px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.nav-logo{display:block;width:136px;flex:none;transition:opacity .3s}
.nav-logo:hover{opacity:.75}
.nav-logo img{display:block;width:100%;height:auto}
.nav-links{display:flex;align-items:center;gap:clamp(20px,2.6vw,40px);margin:0;padding:0;list-style:none}
.nav .btn{--pw:46px;--sl:24px;height:44px;padding-left:20px;font-size:14px}
.nav .btn .ic{width:14px;height:14px;margin:0 17px 0 46px}
.ol.js:not(.is-static) .nav{opacity:0;translate:0 -14px;transition:opacity 1.2s var(--ex) .4s,translate 1.2s var(--ex) .4s,background-color .6s var(--ease)}
.ol.js:not(.is-static).loaded .nav{opacity:1;translate:0 0}


/* WP: the header lives inside Divi's Theme Builder wrapper, so sticky has no room; pin it instead */
.ol .nav{position:fixed;left:0;right:0;top:var(--wp-admin--admin-bar--height,0px);margin-bottom:0}

/* footer: opaque ground so the silk light ends here */
.foot{position:relative;background:#000;color:var(--on-d2);padding-block:clamp(96px,9vw,140px) 36px;border-top:1px solid var(--hair)}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:64px clamp(48px,8vw,140px);align-items:start}
.foot-logo{display:block;width:190px;transition:opacity .3s}
.foot-logo:hover{opacity:.75}
.foot-logo img{display:block;width:100%;height:auto}
.foot-tag{margin-top:36px;font-family:var(--disp);font-size:clamp(21px,1.75vw,27px);line-height:1.34;letter-spacing:-.01em;color:#fff;max-width:24ch;text-wrap:pretty}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:space-between;gap:40px 48px;padding-top:10px}
.foot-h{font-size:13px;font-weight:700;color:#fff;margin-bottom:22px}
.foot-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.foot-col a{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;color:var(--on-d2);text-decoration:none;transition:color .25s,translate .5s var(--ex)}
.foot-col a .ic{font-size:15px;opacity:.7}
.foot-col a:hover{color:#fff;translate:4px 0}
.foot-bot{margin-top:clamp(80px,8vw,120px);padding-top:26px;border-top:1px solid var(--hair);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px 32px;font-size:13px;color:var(--on-d3)}
.foot-bot nav{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center}
.foot-bot a{color:var(--on-d3);text-decoration:none;transition:color .25s}.foot-bot a:hover{color:#fff}
.foot-credit{justify-self:end}
.foot-credit span{color:var(--on-d2)}
@media (max-width:1100px){.foot-top{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.foot-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.foot-bot{grid-template-columns:minmax(0,1fr)}.foot-bot nav{justify-content:flex-start}.foot-credit{justify-self:start}}

/* shared responsive chrome (was only in pages/home.css) */
@media (max-width:760px){
.nav-links{display:none}
.btn{white-space:normal;height:auto;min-height:54px;padding:12px 0 12px 22px;line-height:1.3}.btn .ic{margin-left:50px}
.nav .btn{white-space:nowrap;min-height:0;height:42px}
}

/* shared sections: FAQ and closing call to action (moved from pages/home.css) */
/* faq */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);gap:clamp(40px,6vw,104px);align-items:start}
.faq-l{position:sticky;top:140px}
.faq-l .h2{font-size:clamp(36px,3.7vw,60px)}
.faq-list{border-top:1px solid var(--hair2)}
.faq-list details{border-bottom:1px solid var(--hair);interpolate-size:allow-keywords}
.faq-list details::details-content{height:0;overflow:hidden;transition:height .7s var(--ex),content-visibility .7s allow-discrete}
.faq-list details[open]::details-content{height:auto}
.faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:30px 0;font-family:var(--disp);font-weight:700;font-size:clamp(19px,1.6vw,24px);line-height:1.25;color:var(--on-d2);transition:color .35s}
.faq-list summary:hover,.faq-list details[open] summary{color:var(--fg)}
.faq-list summary>*{transition:translate .7s var(--ex)}
.faq-list summary:hover>*:first-child{translate:10px 0}
.faq-list summary::-webkit-details-marker{display:none}
.pm{flex:none;font-size:18px;transition:transform .7s var(--ex)}
details[open] .pm{transform:rotate(135deg)}
.faq-a{padding:0 72px 34px 0;font-size:16px;line-height:1.75;color:var(--on-d2);text-wrap:pretty}

/* final */
.final{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(170px,17vw,280px)}
.final::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.3) 50%,rgba(0,0,0,0) 75%)}
.final .d{font-size:clamp(46px,6.2vw,110px);max-width:11em}
.final .lead{margin-top:40px;color:var(--on-d);max-width:48ch}
.final-ctas{display:flex;flex-wrap:wrap;gap:28px 40px;margin-top:60px}
.final-ctas .cta{display:flex;flex-direction:column;gap:12px}
.note{font-size:13px;line-height:1.5;color:var(--on-d2);max-width:34ch}
.mail{margin-top:60px;font-size:15px;color:var(--on-d2);display:flex;align-items:center;gap:10px}
.mail .ic{font-size:18px}
.mail a{color:var(--fg);text-decoration:none;border-bottom:1px solid rgb(var(--ink) / .35);padding-bottom:2px;transition:border-color .2s}
.mail a:hover{border-color:var(--fg)}

@media (max-width:1100px){.faq{grid-template-columns:minmax(0,1fr)}.faq-l{position:static}}
@media (max-width:760px){.faq-a{padding-right:0}}

/* compact menu (below 1180px the inline links do not fit) */
.nav-r{display:flex;align-items:center;gap:18px}
.nav-tg{display:none;align-items:center;gap:12px;height:46px;padding:0 4px;font-size:14px;font-weight:700;color:#fff}
.nav-tg-i{position:relative;width:22px;height:10px}
.nav-tg-i i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .6s var(--ex),top .6s var(--ex)}
.nav-tg-i i:first-child{top:0}.nav-tg-i i:last-child{top:8px;left:6px}
.nav-open .nav-tg-i i:first-child{top:4px;transform:rotate(-29deg)}
.nav-open .nav-tg-i i:last-child{top:4px;left:0;transform:rotate(29deg)}
.nav-sheet{position:fixed;top:0;left:0;width:100%;height:100vh;height:100dvh;overflow:auto;z-index:-1;padding-top:118px;padding-bottom:48px;background:rgba(0,0,0,.94);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;transition:opacity .5s var(--ease)}
.nav-sheet[hidden]{display:block;visibility:hidden;pointer-events:none}
.nav-open .nav-sheet{opacity:1;visibility:visible;pointer-events:auto}
.nav-open{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
@media (max-width:520px){.nav-r .btn{display:none}}

/* shared form controls (choice chips, underlined fields, consent), light bands. Moved from pages/snapshot.css */
@keyframes sweep{to{transform:translateX(320%) skewX(-29deg)}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ch{position:relative;display:inline-flex;cursor:pointer}
.ch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.ch span{position:relative;display:inline-flex;align-items:center;gap:14px;min-height:54px;padding:12px 22px 12px 14px;border-radius:4px;border:1px solid rgb(0 0 0 / .16);background:rgb(255 255 255 / .55);font-size:16px;line-height:1.35;color:var(--on-d);overflow:hidden;transition:border-color .35s var(--ease),background-color .45s var(--ease),color .35s}
.ch span i{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:3px;border:1px solid rgb(0 0 0 / .18);font-style:normal;font-size:11px;font-weight:700;color:var(--mute);font-variant-numeric:tabular-nums;transition:inherit}
.ch:hover span{border-color:rgb(0 0 0 / .5)}
.ch input:checked+span{background:#0F0F0F;border-color:#0F0F0F;color:#fff}
.ch input:checked+span i{border-color:rgb(255 255 255 / .35);color:#fff}
.ch input:focus-visible+span{outline:2px solid #F26B21;outline-offset:3px}
.ch input:checked+span::after{background:linear-gradient(90deg,rgb(255 255 255 / 0),rgb(255 255 255 / .28) 50%,rgb(255 255 255 / 0))}
.fld{display:flex;flex-direction:column;gap:6px}
.fld>span{font-size:13px;font-weight:700;color:var(--on-d2)}
.fld input,.fld textarea{width:100%;padding:8px 0 14px;border:0;border-radius:0;background:linear-gradient(#0F0F0F,#0F0F0F) left bottom/0 1.5px no-repeat,linear-gradient(rgb(0 0 0 / .22),rgb(0 0 0 / .22)) left bottom/100% 1px no-repeat;font-family:var(--disp);font-size:clamp(23px,2vw,32px);line-height:1.3;color:var(--fg);caret-color:#0F0F0F;outline:none;resize:none;field-sizing:content;transition:background-size .8s var(--ex)}
.fld textarea{min-height:2.6em}
.fld input:focus,.fld textarea:focus{background-size:100% 1.5px,100% 1px}
.fld input::placeholder,.fld textarea::placeholder{color:rgb(0 0 0 / .26);font-style:italic}
.fld-l{margin-top:36px;max-width:760px}
.qq-consent{display:flex;gap:16px;align-items:flex-start;margin-top:36px;max-width:640px;font-size:14px;line-height:1.65;color:var(--on-d2);cursor:pointer}
.qq-consent input{appearance:none;flex:none;width:20px;height:20px;margin:2px 0 0;border:1px solid rgb(0 0 0 / .35);border-radius:3px;background:#fff;cursor:pointer;transition:background-color .3s,box-shadow .3s}
.qq-consent input:checked{background:#0F0F0F;border-color:#0F0F0F;box-shadow:inset 0 0 0 4px #fff}
.qq-consent input:focus-visible{outline:2px solid #F26B21;outline-offset:3px}
.qq-consent a{color:var(--fg);text-underline-offset:3px}
.qq-err{margin-top:16px;min-height:1px;font-size:14px;color:#A3441F}
.qq-err:empty{margin:0}
@media (max-width:760px){.ch span{min-height:50px;font-size:15px}}
.ch input:checked+span::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:46%;pointer-events:none;background:linear-gradient(90deg,rgb(255 255 255 / 0),rgb(255 255 255 / .28) 50%,rgb(255 255 255 / 0));transform:translateX(-140%) skewX(-29deg);animation:sweep 1s var(--ex) forwards}
@media (hover:none){.ch span i{display:none}.ch span{padding-left:20px}}

/* lead-sentence pattern: the first sentence carries the point in display type, the rest sits quieter */
.ld{display:block;margin-bottom:10px;font-family:var(--disp);font-size:clamp(20px,1.65vw,26px);line-height:1.3;letter-spacing:-.006em;color:var(--fg);text-wrap:pretty}
.has-ld{font-size:15px!important;line-height:1.7!important;color:var(--on-d3)!important}
.band-light .has-ld{color:var(--on-d2)!important}

/* Sprint application form (shared by /clarity-sprint and /contact). Moved from pages/clarity-sprint.css */
.apf{margin-top:clamp(56px,5vw,88px);padding-top:clamp(40px,4vw,64px);border-top:1px solid rgb(0 0 0 / .12);scroll-margin-top:120px}
.apf ::selection{background:#0F0F0F;color:#F6F5F2}
.qz-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.apf-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px clamp(40px,5vw,80px)}
.apf .fld input,.apf .fld textarea{font-size:clamp(21px,1.8vw,28px)}
.apf-w,.apf-f{grid-column:1/-1}
.apf-w>span{font-size:15px;font-weight:400;line-height:1.55;color:var(--on-d);max-width:70ch}
.apf-f{border:0;margin:0;padding:0;min-width:0}
.apf-f legend{padding:0;margin-bottom:16px;font-size:13px;font-weight:700;color:var(--on-d2)}
.ap-o{display:flex;flex-wrap:wrap;gap:8px}
.apf .ch span{min-height:46px;padding:10px 18px;font-size:15px}
.apf .qq-other{display:none;margin-top:24px;max-width:420px}
.apf-f:has(input[value="Other"]:checked) .qq-other{display:flex}
.ap-month-f{max-width:260px}
.apf .qq-consent{margin-top:48px}
.apf-go{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:20px 36px}
.apf-mail{font-size:14px;color:var(--on-d2)}
.apf-mail a{color:var(--fg);text-underline-offset:3px}
.apf.busy .apf-send{opacity:.6;pointer-events:none}
.apf-done{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding-block:24px}
.apf-done[hidden]{display:none}
.apf-done .mk{font-size:72px;color:var(--fg)}
.apf-done h3{font-size:clamp(40px,4.4vw,72px)}
.apf-done p{font-size:17px;line-height:1.7;color:var(--on-d2)}
.apf.sent>:not(.apf-done){display:none}


@media (max-width:760px){.apf-g{grid-template-columns:minmax(0,1fr)}}

/* cookie consent: a small panel, not a wall. Accept and reject carry equal weight. */
.ck{position:fixed;left:clamp(12px,2vw,28px);bottom:clamp(12px,2vw,28px);z-index:80;width:min(420px,calc(100vw - 24px));padding:22px 22px 20px;border-radius:6px;border:1px solid rgb(255 255 255 / .18);background:rgba(10,10,10,.9);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);box-shadow:0 24px 60px -24px rgb(0 0 0 / .9);color:var(--on-d,#F0EFEE);font-family:var(--sans);opacity:0;translate:0 16px;transition:opacity .6s var(--ease),translate .8s var(--ex)}
.ck[hidden]{display:none}
.ck.show{opacity:1;translate:0 0}
.ck-h{margin:0;font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.2;color:#fff}
.ck-b{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:#B7B5B2}
.ck-b a{color:#fff;text-underline-offset:3px}
.ck-a{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ck-btn{height:44px;border-radius:4px;border:1px solid rgb(255 255 255 / .3);background:rgb(255 255 255 / .06);color:#fff;font:700 14px/1 var(--sans);text-align:center;cursor:pointer;transition:background-color .3s,border-color .3s}
.ck-btn:hover{background:rgb(255 255 255 / .14);border-color:rgb(255 255 255 / .6)}
.ck-btn:focus-visible,.ck-open:focus-visible{outline:2px solid #F26B21;outline-offset:3px}
.ck-open{padding:0;border:0;background:none;font:inherit;color:var(--on-d3);cursor:pointer;transition:color .25s}
.ck-open:hover{color:#fff}

/* nav v2: one travelling dot, two panels (Engagements, Insights) on one surface, search */
.nav-main{position:relative;align-self:stretch;display:flex;align-items:center}
.nav-links{gap:clamp(18px,2.2vw,36px)}
.nav-a{position:relative;display:inline-flex;align-items:center;gap:7px;padding:12px 0;margin:0;border:0;background:none;font:inherit;font-size:13.5px;font-weight:400;letter-spacing:.01em;line-height:1;color:var(--on-d2);text-decoration:none;cursor:pointer;transition:color .3s var(--ease)}
.nav-a:hover,.nav-a.cur,.nav-a[aria-expanded="true"]{color:#fff}
.nav-a:focus-visible{outline:1px solid rgb(255 255 255 / .6);outline-offset:6px;border-radius:2px}
.nav-cv{font-size:9px;opacity:.55;transition:transform .6s var(--ex),opacity .3s}
.nav-a[aria-expanded="true"] .nav-cv{transform:rotate(180deg);opacity:1}
.nav-dot{position:absolute;left:0;top:calc(50% + 16px);width:4px;height:4px;margin-left:-2px;border-radius:2px;background:#fff;pointer-events:none;opacity:0;transform:translateX(var(--dx,0px));transition:transform .75s var(--ex),opacity .4s,width .3s var(--ease),margin .3s var(--ease)}
.nav-dot.on{opacity:1}
.nav-dot.mv{width:16px;margin-left:-8px}
.nav-dot.snap{transition:opacity .4s}

.nav-sr{display:inline-grid;place-items:center;width:44px;height:44px;margin-right:-6px;padding:0;border:0;border-radius:50%;background:none;color:var(--on-d2);cursor:pointer;transition:color .3s,background-color .3s,opacity .3s}
.nav-sr .ic{font-size:18px;transition:transform .6s var(--ex)}
.nav-sr:hover{color:#fff;background:rgb(255 255 255 / .07)}
.nav-sr:hover .ic{transform:rotate(-8deg) scale(1.06)}
.nav-sr:focus-visible,.nav-tg:focus-visible{outline:1px solid rgb(255 255 255 / .6);outline-offset:3px}

/* the panel surface: height follows the open panel, panels slide in from the side they were called from */
.px{position:absolute;left:0;right:0;top:100%;height:var(--mh,0px);overflow:hidden;background:rgb(7 7 7 / .97);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair2);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .65s var(--ex),height .6s var(--ex),visibility 0s .65s}
.px[hidden]{display:block}
.px-open .px{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .75s var(--ex),height .6s var(--ex),visibility 0s}
.px-open{background:rgb(7 7 7 / .97)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.px-veil{position:fixed;inset:0;z-index:55;background:rgb(0 0 0 / .5);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}
.px-veil.on{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}
.px-p{position:absolute;top:0;left:0;right:0;padding:clamp(44px,4vw,64px) 0 clamp(48px,4.4vw,68px);opacity:0;visibility:hidden;translate:calc(var(--dir,0) * 48px) 0;transition:opacity .3s var(--ease),translate .6s var(--ex),visibility 0s .3s}
.px-p.on{opacity:1;visibility:visible;translate:0 0;transition:opacity .45s var(--ease) .06s,translate .7s var(--ex),visibility 0s}
.px-g{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,8.8fr);gap:clamp(40px,5vw,96px);align-items:start}
.px-l{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.px-h{margin:0;max-width:11em;font-size:clamp(26px,2.2vw,36px);line-height:1.08;letter-spacing:-.015em;color:var(--on-d2);text-wrap:balance}
.px-h em{color:#fff}
.px-sk{margin:0 0 14px;font-size:13px;color:var(--on-d3)}
.px-p .px-l,.px-p [style*="--k"],.px-p .px-rl,.px-p .px-sk{opacity:0;translate:0 14px;transition:opacity .5s var(--ease),translate .8s var(--ex)}
.px-p.on .px-l,.px-p.on [style*="--k"],.px-p.on .px-rl,.px-p.on .px-sk{opacity:1;translate:0 0;transition-delay:calc(var(--k,0) * 70ms + 120ms)}
.px-p.on .px-rl{transition-delay:340ms}

/* Engagements: the three steps on one line; the line fills to whichever step you are on */
.path{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.path-ln{position:absolute!important;left:0;right:0;top:4px;height:1px;background:var(--hair2);opacity:1!important;translate:none!important;transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ex) .12s}
.px-p.on .path-ln{transform:scaleX(1)}
.path-ln i{position:absolute;inset:0;background:linear-gradient(90deg,rgb(255 255 255 / .25),#fff);transform-origin:left;transform:scaleX(var(--fill,0));transition:transform .9s var(--ex)}
.px-p:not(.on) .path-ln i{transform:scaleX(0)}
.path a{position:relative;display:flex;flex-direction:column;gap:10px;padding-top:34px;text-decoration:none;color:inherit}
.path-dot{position:absolute;left:0;top:0;width:9px;height:9px;border-radius:50%;background:#070707;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .45);transition:background-color .4s,box-shadow .4s,transform .6s var(--ex)}
.path li.lit .path-dot{background:#fff;box-shadow:inset 0 0 0 1px #fff}
.path li.at .path-dot{transform:scale(1.45)}
.path b{font-size:clamp(20px,1.6vw,24px);white-space:nowrap;line-height:1.1;letter-spacing:-.012em;color:var(--on-d2);transition:color .35s,translate .7s var(--ex)}
.path small{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;color:var(--on-d3)}
.path small em{font-family:var(--disp);font-size:14px;color:#fff}
.path-d{max-width:30ch;font-size:14.5px;line-height:1.55;color:var(--on-d3);transition:color .35s}
.path li.at b{color:#fff;translate:6px 0}
.path li.at .path-d{color:var(--on-d2)}
.path a:focus-visible{outline:1px solid rgb(255 255 255 / .6);outline-offset:8px}

/* Insights panel */
.px-r{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,4vw,72px);align-items:start}
.px-posts{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.px-posts li{border-bottom:1px solid var(--hair)}
.px-posts a{display:flex;flex-direction:column;gap:8px;padding:16px 0 18px;text-decoration:none}
.px-posts small{font-size:12.5px;color:var(--on-d3)}
.px-posts b{font-size:clamp(18px,1.45vw,21px);line-height:1.22;color:var(--on-d2);transition:color .3s,translate .6s var(--ex)}
.px-posts a:hover b,.px-posts a:focus-visible b{color:#fff;translate:6px 0}
.px-empty{padding:18px 0;color:var(--on-d3)}
.px-rl{position:relative;display:flex;flex-direction:column;gap:10px;padding:28px 28px 26px;border:1px solid var(--hair2);border-radius:4px;text-decoration:none;color:inherit;transition:border-color .4s}
.px-rl b{font-size:26px;line-height:1.1;color:#fff}
.px-rl small{font-size:13px;color:var(--on-d3)}
.px-rl>span:not(.px-rl-go){margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--on-d2)}
.px-rl-go{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font-size:14px;font-weight:700;color:#fff}
.px-rl-go .ic{font-size:15px;transition:transform .5s var(--ex)}
.px-rl:hover{border-color:rgb(255 255 255 / .5)}
.px-rl:hover .px-rl-go .ic{transform:translateX(4px)}

/* compact sheet */
.sh-sr{display:flex;align-items:center;gap:14px;width:100%;height:56px;padding:0 18px;margin-bottom:36px;border:1px solid var(--hair2);border-radius:4px;background:rgb(255 255 255 / .03);font:inherit;font-size:15px;color:var(--on-d2);cursor:pointer;text-align:left}
.sh-sr .ic{font-size:17px}
.sh-k{margin:0 0 6px;font-size:13px;color:var(--on-d3)}
.sh-path{position:relative;list-style:none;margin:0 0 28px;padding:0 0 0 22px}
.sh-path::before{content:"";position:absolute;left:4px;top:24px;bottom:24px;width:1px;background:var(--hair2)}
.sh-path a{position:relative;display:flex;flex-direction:column;gap:4px;padding:12px 0;text-decoration:none}
.sh-path a::before{content:"";position:absolute;left:-22px;top:24px;width:9px;height:9px;border-radius:50%;background:#000;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .5)}
.sh-path li:first-child a::before{background:#fff}
.sh-path b{font-size:clamp(22px,4.4vw,30px);line-height:1.1;color:#fff}
.sh-path small{font-size:13px;color:var(--on-d3)}
.sh-main{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.sh-main li{border-bottom:1px solid var(--hair)}
.sh-main a{display:block;padding:16px 0;font-family:var(--disp);font-weight:700;font-size:clamp(28px,5vw,48px);line-height:1.1;letter-spacing:-.015em;color:var(--on-d2);text-decoration:none;transition:color .3s,translate .6s var(--ex)}
.sh-main a:hover,.sh-main a.cur{color:#fff}
.sh-main a:hover{translate:10px 0}
.nav-open .nav-sr{opacity:0;pointer-events:none}
.nav-sheet [style*="--k"]{opacity:0;translate:0 18px;transition:opacity .6s var(--ease),translate .9s var(--ex);transition-delay:calc(var(--k) * 50ms + 80ms)}
.nav-open .nav-sheet [style*="--k"]{opacity:1;translate:0 0}

/* search */
.srch{position:fixed;inset:0;z-index:90;overflow:auto;overscroll-behavior:contain;background:#060606;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
.srch[hidden]{display:block}
.srch.on{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
.srch-in{min-height:100%;display:flex;flex-direction:column;padding-top:28px;padding-bottom:40px}
.srch-top{display:flex;justify-content:flex-end;align-items:center;height:60px}
.srch-x{display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 4px;border:0;background:none;font:inherit;font-size:14px;font-weight:700;color:#fff;cursor:pointer}
.srch-x .ic{font-size:18px;transition:transform .6s var(--ex)}
.srch-x:hover .ic{transform:rotate(90deg)}
.srch-f{position:relative;margin-top:clamp(40px,9vh,120px)}
.srch-q{display:block;width:100%;padding:0 0 22px;border:0;border-radius:0;background:none;font-size:clamp(36px,5.4vw,80px);font-weight:700;line-height:1.1;letter-spacing:-.02em;color:#fff;caret-color:#fff;-webkit-appearance:none;appearance:none}
.srch-q::placeholder{color:rgb(255 255 255 / .26)}
.srch-q:focus{outline:0}
.srch-q::-webkit-search-cancel-button{display:none}
.srch-ln{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hair2);overflow:hidden}
.srch-ln i{position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(var(--typed,0));transition:transform .8s var(--ex)}
.srch.busy .srch-ln i{animation:srch-run 1s var(--ease) infinite}
@keyframes srch-run{0%{transform-origin:left;transform:scaleX(0)}50%{transform-origin:left;transform:scaleX(1)}50.01%{transform-origin:right}100%{transform-origin:right;transform:scaleX(0)}}
.srch-n{min-height:20px;margin:20px 0 0;font-size:13px;color:var(--on-d3)}
.srch-list{list-style:none;margin:12px 0 0;padding:0}
.srch-list li{border-bottom:1px solid var(--hair);opacity:0;translate:0 10px;animation:srch-in .6s var(--ex) forwards;animation-delay:calc(var(--k,0) * 40ms)}
@keyframes srch-in{to{opacity:1;translate:0 0}}
.srch-list a{position:relative;display:grid;grid-template-columns:120px minmax(0,1fr) 20px;gap:6px 32px;align-items:baseline;padding:24px 0;text-decoration:none;color:inherit}
.srch-list small{grid-row:1/3;font-size:13px;color:var(--on-d3)}
.srch-list b{font-family:var(--disp);font-size:clamp(22px,2vw,30px);line-height:1.15;letter-spacing:-.01em;color:var(--on-d2);transition:color .25s,translate .6s var(--ex)}
.srch-list p{grid-column:2;margin:0;max-width:78ch;font-size:15px;line-height:1.6;color:var(--on-d3)}
.srch-list mark{background:none;color:#fff;box-shadow:inset 0 -1px 0 rgb(255 255 255 / .55)}
.srch-list .ic{grid-column:3;grid-row:1;font-size:16px;color:#fff;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .5s var(--ex)}
.srch-list a.on b,.srch-list a:hover b{color:#fff;translate:8px 0}
.srch-list a.on .ic,.srch-list a:hover .ic{opacity:1;transform:none}
.srch-list a:focus-visible{outline:1px solid rgb(255 255 255 / .6);outline-offset:4px}
.srch-idle{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;margin-top:clamp(40px,6vh,72px)}
.srch.has-q .srch-idle{display:none}
.srch-try{display:flex;flex-wrap:wrap;gap:6px 26px;margin:0}
.srch-try button{padding:4px 0;border:0;background:none;font-size:clamp(22px,2.2vw,32px);font-style:italic;font-weight:400;color:var(--on-d2);cursor:pointer;transition:color .3s,translate .6s var(--ex)}
.srch-try button:hover,.srch-try button:focus-visible{color:#fff;translate:0 -2px}
.srch-go{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.srch-go li{border-bottom:1px solid var(--hair)}
.srch-go a{display:block;padding:14px 0;font-size:15px;color:var(--on-d2);text-decoration:none;transition:color .3s,translate .6s var(--ex)}
.srch-go a:hover{color:#fff;translate:6px 0}
.srch-open{overflow:hidden}

@media (max-width:1180px){.nav-main{display:none}.nav-tg{display:inline-flex}.px,.px-veil{display:none!important}}
@media (max-width:760px){.srch-list a{grid-template-columns:minmax(0,1fr);gap:6px}.srch-list small{grid-row:auto}.srch-list p,.srch-list .ic{grid-column:1}.srch-list .ic{display:none}.srch-idle{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.px,.px-p,.nav-dot,.path-ln i{transition:none!important}.srch-list li{animation:none;opacity:1;translate:none}}

/* Display headings (every h1 and h2 set in Playfair): the roman words sit in regular weight and the italic phrase
   carries the bold, so the emphasis is the heaviest thing on the line. Price headings keep their own setting. */
:where(h1,h2).d:not(.pr-n):not(.pc-n){font-weight:400;letter-spacing:-.018em}
:where(h1,h2).d:not(.pr-n):not(.pc-n) em{font-weight:700;letter-spacing:-.02em}

/* Inner page heroes: one live artwork per page on black (assets/js/hero-art.js), behind the hero's own shading */
.hero.has-art{position:relative;isolation:isolate;overflow:hidden;background:#000}
.hart{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-2;display:block;pointer-events:none}
.ol.js .hart{opacity:0;animation:hart-in 2.4s var(--ease) .2s forwards}
@keyframes hart-in{to{opacity:1}}
.ol.js:not(.loaded) .hart{animation-play-state:paused}
@keyframes hart-in-m{to{opacity:.5}}
@media (max-width:760px){.ol.js .hart{animation-name:hart-in-m}}
@media (prefers-reduced-motion:reduce){.ol.js .hart{animation:none;opacity:1}}

/* Inner heroes in the Home pattern (dev/gen/heroes.py): artwork on black, a two-line sentence along the foot,
   the button and one short note on the right. The rest of the old hero lives in the lead band below. */
.hero.hz{min-height:max(680px,100vh);min-height:max(680px,100svh);display:flex;flex-direction:column;background:#000}
.hero.hz::before{z-index:-1;background:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,.5) 34%,rgba(0,0,0,0) 62%),linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,0) 46%)}
.hero.hz>.wrap{width:100%}
.hz-in{position:relative;margin-top:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 64px;align-items:end;padding-top:140px;padding-bottom:clamp(40px,6vh,72px)}
.hz-h1{margin:0;max-width:17em;font-size:clamp(36px,3.9vw,68px);line-height:1.02;letter-spacing:-.025em;color:#fff}
.hz-h1 .ln+.ln{padding-left:0}
.hz-h1 em{color:var(--on-d2)}
.hz-cta{display:flex;flex-direction:column;align-items:flex-end;gap:12px;max-width:340px;text-align:right}
.hz-cta>span{font-size:13px;line-height:1.5;color:var(--on-d3)}
.hz-cta .lk{font-size:13px}
.hz-pf{width:min(30vw,440px);margin:0}
.hz-pf .pf{aspect-ratio:4/5}
@media (max-width:760px){.hz-in{grid-template-columns:minmax(0,1fr)}.hz-cta{align-items:flex-start;text-align:left;max-width:none}.hz-pf{order:-1;width:min(72vw,360px)}}

.lead2{padding-block:clamp(96px,10vw,170px)}
.lead2-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:36px clamp(48px,7vw,120px);align-items:start}
.lead2-p{margin:0;font-weight:400;font-size:clamp(28px,2.8vw,46px);line-height:1.14;letter-spacing:-.015em;color:var(--fg);text-wrap:balance}
.lead2-p em{font-weight:700;color:var(--on-d2)}
.lead2-b{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-top:6px}
.lead2-b p{margin:0;max-width:56ch;font-size:16.5px;line-height:1.7;color:var(--on-d2)}
.lead2-b .lk{margin-top:10px}
.lead2-x{margin-top:clamp(56px,6vw,96px)}
.lead2-b .ab-name{font-family:var(--disp);font-size:24px;color:var(--fg)}
.lead2-b .ab-role{margin-top:-12px;font-size:13.5px;color:var(--on-d3)}
@media (max-width:900px){.lead2-g{grid-template-columns:minmax(0,1fr)}}
.ab-hero.hz::before{background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,0) 50%),radial-gradient(60% 50% at 0% 100%,rgba(0,0,0,.7),rgba(0,0,0,0) 70%)}

/* footer v2 (3 Oct 2026): the motto, a direct line to Vishnu, and the mark engraved in hairlines that settle
   into straight strata as the footer arrives (assets/js/footer-art.js) */
.ft{padding-block:clamp(110px,10vw,170px) 30px;border-top:1px solid var(--hair);overflow:hidden}
.ft-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:40px clamp(48px,6vw,110px);align-items:end}
.ft-motto{margin:0;font-weight:400;font-size:clamp(44px,5.6vw,100px);line-height:.98;letter-spacing:-.025em;color:#fff;text-wrap:balance}
.ft-motto em{display:block;font-weight:700;color:var(--on-d2)}
.ft-reach{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:10px}
.ft-mail{display:inline-flex;align-items:center;gap:14px;font-family:var(--disp);font-size:clamp(22px,1.9vw,30px);color:#fff;text-decoration:none;box-shadow:inset 0 -1px 0 rgb(255 255 255 / .3);padding-bottom:6px;transition:box-shadow .4s}
.ft-mail .ic{font-size:20px;transition:transform .6s var(--ex)}
.ft-mail:hover{box-shadow:inset 0 -1px 0 #fff}
.ft-mail:hover .ic{transform:translateX(5px)}
.ft-note{margin:0;font-size:13.5px;color:var(--on-d3)}
.ft-li{display:inline-flex;align-items:center;gap:10px;margin-top:8px;font-size:14px;color:var(--on-d2);text-decoration:none;transition:color .3s}
.ft-li .ic{font-size:17px}
.ft-li:hover{color:#fff}
.ft-art{position:relative;height:clamp(240px,30vw,470px);margin-top:clamp(56px,6vw,96px)}
.ft-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.ft-mid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px 64px;align-items:start;margin-top:clamp(40px,4vw,64px);padding-top:36px;border-top:1px solid var(--hair)}
.ft-logo{width:150px}
.ft-nav{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:end;gap:28px clamp(40px,6vw,110px)}
.ft-nav ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:13px}
.ft-nav a{font-size:14.5px;color:var(--on-d2);text-decoration:none;transition:color .25s,translate .5s var(--ex);display:inline-block}
.ft-nav a:hover{color:#fff;translate:4px 0}
.ft-bot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px 32px;margin-top:clamp(56px,6vw,88px);padding-top:22px;border-top:1px solid var(--hair);font-size:13px;color:var(--on-d3)}
.ft-bot p{margin:0}
.ft-bot nav{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center}
.ft-bot a,.ft-bot .ck-open{color:var(--on-d3);text-decoration:none;transition:color .25s}
.ft-bot a:hover,.ft-bot .ck-open:hover{color:#fff}
.ft-credit{justify-self:end;display:inline-flex;align-items:center;gap:6px}
.ft-credit span{color:var(--on-d2);transition:color .25s}
.ft-credit .ic{font-size:12px;opacity:.6;transition:transform .5s var(--ex),opacity .3s}
.ft-credit:hover span{color:#fff}
.ft-credit:hover .ic{opacity:1;transform:translate(2px,-2px)}
@media (max-width:1000px){.ft-top{grid-template-columns:minmax(0,1fr)}.ft-mid{grid-template-columns:minmax(0,1fr)}.ft-nav{justify-content:start}}
@media (max-width:760px){.ft-nav{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ft-bot{grid-template-columns:minmax(0,1fr)}.ft-bot nav{justify-content:flex-start}.ft-credit{justify-self:start}.ft-art{height:clamp(200px,62vw,320px)}}

/* footer v3 (3 Oct 2026): a note from Vishnu that writes itself in, a single line carrying the operating rhythm,
   then compact links. (footer-art.js draws the pulse) */
.fn{padding-block:clamp(110px,10vw,170px) 30px;border-top:1px solid var(--hair);overflow:hidden}
.fn-note{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:40px clamp(48px,6vw,110px);align-items:end}
.fn-pt{margin:0;display:flex;flex-direction:column;gap:16px;max-width:260px}
.fn-pt img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;border-radius:6px;filter:contrast(1.05)}
.fn-pt figcaption{display:flex;flex-direction:column;gap:3px}
.fn-pt b{font-family:var(--disp);font-weight:700;font-size:19px;color:#fff}
.fn-pt span{font-size:13px;color:var(--on-d3)}
.fn-body{padding-bottom:4px}
.fn-l{margin:0;font-weight:400;font-size:clamp(30px,3.3vw,58px);line-height:1.1;letter-spacing:-.02em;color:#fff;max-width:20em}
.fn-l .fn-ln{display:block}
.fn-l em{display:block;margin-top:.12em;font-weight:700;color:var(--on-d2)}
.fn-s{margin:clamp(24px,2.4vw,36px) 0 0;max-width:46ch;font-size:16px;line-height:1.65;color:var(--on-d2)}
.fn-a{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;margin-top:clamp(28px,2.8vw,40px)}
/* the note writes itself in, line by line */
.ol.js .fn-ln{clip-path:inset(-10% 100% -20% 0);transition:clip-path 1.5s cubic-bezier(.65,0,.35,1);transition-delay:calc(var(--k) * 420ms + 200ms)}
.ol.js .fn-note.in .fn-ln{clip-path:inset(-10% -2% -20% 0)}
.ol.js .fn-pt{opacity:0;translate:0 20px;transition:opacity 1.2s var(--ease),translate 1.4s var(--ex)}
.ol.js .fn-note.in .fn-pt{opacity:1;translate:0 0}
.fn-pulse{position:relative;height:clamp(110px,10vw,160px);margin-top:clamp(64px,6vw,104px)}
.fn-pulse canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.fn-links{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px 56px;align-items:center;margin-top:clamp(24px,3vw,40px)}
.fn-logo{width:140px}
.fn-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px}
.fn-nav a,.fn-mail a{font-size:14px;color:var(--on-d2);text-decoration:none;transition:color .25s}
.fn-nav a:hover,.fn-mail a:hover{color:#fff}
.fn-mail{display:flex;gap:24px}
.fn-bot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px 32px;margin-top:clamp(36px,4vw,56px);padding-top:22px;border-top:1px solid var(--hair);font-size:13px;color:var(--on-d3)}
.fn-bot p{margin:0}
.fn-bot nav{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center}
.fn-bot a,.fn-bot .ck-open{color:var(--on-d3);text-decoration:none;transition:color .25s}
.fn-bot a:hover,.fn-bot .ck-open:hover{color:#fff}
.fn-credit{justify-self:end;display:inline-flex;align-items:center;gap:6px}
.fn-credit span{color:var(--on-d2);transition:color .25s}
.fn-credit .ic{font-size:12px;opacity:.6;transition:transform .5s var(--ex),opacity .3s}
.fn-credit:hover span{color:#fff}
.fn-credit:hover .ic{opacity:1;transform:translate(2px,-2px)}
@media (max-width:1100px){.fn-links{grid-template-columns:minmax(0,1fr)}.fn-nav{justify-content:flex-start}}
@media (max-width:860px){.fn-note{grid-template-columns:minmax(0,1fr)}.fn-pt{flex-direction:row;align-items:center;max-width:none}.fn-pt img{width:72px;border-radius:50%;aspect-ratio:1}}
@media (max-width:760px){.fn-bot{grid-template-columns:minmax(0,1fr)}.fn-bot nav{justify-content:flex-start}.fn-credit{justify-self:start}}
@media (prefers-reduced-motion:reduce){.ol.js .fn-ln{clip-path:none;transition:none}.ol.js .fn-pt{opacity:1;translate:none}}

/* Playfair 2 tuning (3 Oct 2026): its 700 runs heavier and wider than Playfair Display's, so bold sits at 600,
   the roman at 380, and display sizes are set a touch tighter. Optical size follows the font size. */
.ol{font-optical-sizing:auto}
.d,.ol strong.d,.ol b.d{font-weight:600}
:where(h1,h2).d:not(.pr-n):not(.pc-n){font-weight:380;letter-spacing:-.026em}
:where(h1,h2).d:not(.pr-n):not(.pc-n) em{font-weight:600;letter-spacing:-.028em}
.d em{letter-spacing:-.02em}
.ho-h1,.hz-h1,.fn-l,.ft-motto,.lead2-p{letter-spacing:-.03em}
.ho-h1 em,.hz-h1 em,.fn-l em,.lead2-p em{font-weight:600}
.fn-l,.lead2-p,.ft-motto{font-weight:380}

/* footer v4 (3 Oct 2026): the route map. The site's own navigation drawn as a routing map: the three engagements on
   the spine, the rest on branches at the logo's slant. Current page pulses, visited pages light up (footer-art.js). */
.rmf{padding-block:clamp(100px,9vw,150px) 30px;border-top:1px solid var(--hair);overflow:hidden}
.rmf-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px clamp(40px,5vw,90px);align-items:end}
.rmf-logo{width:150px;align-self:start}
.rmf-line{margin:0;max-width:30em;font-weight:380;font-size:clamp(22px,2vw,32px);line-height:1.22;letter-spacing:-.02em;color:#fff}
.rmf-line em{font-weight:600;color:var(--on-d2)}
.rmf-reach{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.rmf-reach a{font-size:14px;color:var(--on-d2);text-decoration:none;transition:color .25s}
.rmf-reach a:first-child{font-family:var(--disp);font-size:19px;color:#fff;box-shadow:inset 0 -1px 0 rgb(255 255 255 / .3);padding-bottom:3px}
.rmf-reach a:hover{color:#fff}
.rmf-map{position:relative;margin-top:clamp(56px,6vw,96px)}
.rm-map{display:block;width:100%;height:auto;overflow:visible}
.rm-ln{fill:none;stroke:rgb(255 255 255 / .22);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s cubic-bezier(.65,0,.35,1)}
.rm-spine{stroke:rgb(255 255 255 / .38);stroke-width:1.6}
.rmf-map.on .rm-ln{stroke-dashoffset:0}
.rmf-map.on .rm-ln:nth-child(n+2){transition-delay:.7s}
.rm-st{cursor:pointer;opacity:0;transition:opacity .8s var(--ease)}
.rmf-map.on .rm-st{opacity:1;transition-delay:calc(.9s + var(--k,0) * 90ms)}
.rm-dot{fill:#000;stroke:rgb(255 255 255 / .6);stroke-width:1.4;vector-effect:non-scaling-stroke;transition:fill .4s,stroke .4s}
.rm-halo{fill:rgb(255 214 176 / 0);transition:fill .5s}
.rm-st text{font-family:var(--sans);font-size:15px;fill:var(--on-d2);transition:fill .3s}
.rm-main text{font-family:var(--disp);font-size:23px;font-weight:600;fill:#fff;letter-spacing:-.01em}
.rm-st:hover .rm-dot,.rm-st:focus-visible .rm-dot{fill:#fff;stroke:#fff}
.rm-st:hover text,.rm-st:focus-visible text{fill:#fff}
.rm-st:hover .rm-halo{fill:rgb(255 214 176 / .1)}
.rm-st.seen .rm-dot{fill:rgb(255 224 196 / .85);stroke:rgb(255 224 196)}
.rm-st.here .rm-dot{fill:#fff;stroke:#fff}
.rm-st.here .rm-halo{fill:rgb(255 200 150 / .18);transform-box:fill-box;transform-origin:center;animation:rm-here 2.4s var(--ease) infinite}
@keyframes rm-here{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.8);opacity:0}}
.rm-you text{font-family:var(--sans);font-size:12px;fill:rgb(255 214 176)}
.rm-key{display:flex;gap:24px;margin:18px 0 0;font-size:12.5px;color:var(--on-d3)}
.rm-key span{display:inline-flex;align-items:center;gap:8px}
.rm-key span::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
.rm-key .k-seen::before{background:rgb(255 224 196 / .85)}
.rm-list{display:none;margin:0;padding:0;list-style:none}
@media (max-width:900px){
.rmf-top{grid-template-columns:minmax(0,1fr)}.rmf-reach{align-items:flex-start}
.rm-map,.rm-key{display:none}
.rm-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 24px;padding-top:28px;border-top:1px solid var(--hair)}
.rm-list a{font-size:15px;color:var(--on-d2);text-decoration:none}
.rm-list a.here{color:#fff}
}
@media (prefers-reduced-motion:reduce){.rm-ln{transition:none;stroke-dashoffset:0}.rm-st{opacity:1;transition:none}.rm-st.here .rm-halo{animation:none}}
.rm-ln.lit{stroke:rgb(255 214 176 / .75);stroke-width:1.6}
.rm-trail{stroke-width:2.2;transition-delay:1.6s!important}
.rm-key .k-seen::after{content:"";width:18px;height:1.5px;margin-left:10px;background:rgb(255 214 176 / .75)}

/* Tighter heading spacing (3 Oct 2026, user request): display headings closer still */
.d{letter-spacing:-.032em}
:where(h1,h2).d:not(.pr-n):not(.pc-n){letter-spacing:-.038em}
:where(h1,h2).d:not(.pr-n):not(.pc-n) em,.d em{letter-spacing:-.036em}
.ho-h1,.hz-h1,.fn-l,.ft-motto,.lead2-p,.rmf-line{letter-spacing:-.04em}
.ho-h1 em,.hz-h1 em,.lead2-p em,.rmf-line em{letter-spacing:-.038em}

/* The envelope line was a flex row: on phones the sentence and the address split into two columns, and everywhere
   the closing full stop floated a gap away from the address. Plain inline flow fixes both. */
.mail{display:block;line-height:1.75}
.mail .ic{display:inline-block;vertical-align:-3px;margin-right:10px}

/* Phone and tablet pass (6 Oct 2026). Shared rhythm and chrome fixes; page-specific ones sit at the end of each page file. */
@media (max-width:760px){
.nav,.nav-in{height:72px}
.nav-logo{width:118px}
.nav-sheet{padding-top:100px}
.sec{padding-block:clamp(88px,22vw,120px)}
.final{padding-block:clamp(112px,28vw,150px)}
.final .lead{margin-top:28px}
.final-ctas{margin-top:44px}
.mail{margin-top:44px}
.faq-list summary{padding:24px 0;gap:20px}
.faq-l .h2{font-size:clamp(34px,9.6vw,44px)}
}
@media (min-width:761px) and (max-width:1100px){
.sec{padding-block:clamp(110px,14vw,150px)}
}
/* cookie panel: about a third of a phone screen before; same words, tighter set */
@media (max-width:520px){
.ck{left:8px;right:8px;bottom:8px;width:auto;padding:16px 16px 14px}
.ck-h{font-size:16.5px}
.ck-b{margin-top:6px;font-size:12.5px;line-height:1.5}
.ck-a{margin-top:12px}
.ck-btn{height:42px;font-size:13.5px}
}
/* tablets: the hero line bottomed out at 36px on a 768 to 1100px screen with the whole hero to fill */
@media (min-width:761px) and (max-width:1100px){.hz-h1{font-size:clamp(44px,6vw,58px)}}
@media (max-width:760px){.hz-h1{font-size:clamp(36px,10.4vw,44px)}}
/* route map: the branch lines leave the spine just right of each station and ran through its name.
   A ground-coloured halo on the labels lets the line pass behind the type instead (stations sit after lines in the SVG). */
/* The halo is a copy of each label drawn behind it (footer-art.js). paint-order on the label itself
   made Safari paint the stroke over the letters and chop them up (12 Oct). */
.rmf .rm-st text.rm-th{fill:none;stroke:#000;stroke-width:10px;stroke-linejoin:round}

/* Not-clients attribution (9 Oct 2026): one wording, set right next to every group of logos; the key sentence reads brighter. */
.att{font-size:14.5px;line-height:1.6;color:var(--on-d3)}
.att span{color:var(--fg)}
.band-light .att span{color:#0F0F0F}
.cs-att{margin-top:18px;max-width:60ch}
.envs-att{margin-top:18px}