/* KJP Property, v2 "drafting sheet".
   Cream paper, navy ink, one blue. Fraunces display with a single italic accent,
   Inter body, Geist Mono for the drawing annotations. Each band owns its colours. */

/* metric-matched fallbacks, so the page does not reflow when the web fonts land */
@font-face{font-family:"Fraunces Fb";src:local("Georgia"),local("Times New Roman"),local("Liberation Serif"),local("Tinos");size-adjust:102.3%}
@font-face{font-family:"Inter Fb";src:local("Arial"),local("Helvetica"),local("Liberation Sans"),local("Arimo");size-adjust:106%}
:root{
  --paper:#F4F1EA; --paper2:#EDE8DD; --navy:#0B1220; --navy2:#11203B;
  --blue:#1C53A0; --blue-l:#5B82C4; --grey:#5E636B; --line:#D8D2C5;
  --serif:"Fraunces","Fraunces Fb",Georgia,serif;
  --sans:"Inter","Inter Fb",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --pad:clamp(16px,4vw,48px);
  --max:1440px;
  --nav:56px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--nav) + 16px)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--paper);color:var(--navy);font:400 1rem/1.62 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--serif);font-weight:300;margin:0;letter-spacing:-.018em;text-wrap:balance}
h1 em,h2 em,h3 em{font-style:italic;color:var(--acc)}
h1{font-size:clamp(2.7rem,7.2vw,6.4rem);line-height:.98}
h2{font-size:clamp(2.1rem,4.6vw,4.1rem);line-height:1.02}
h3{font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.15}
strong{font-weight:600}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--navy);color:#fff;padding:10px 14px}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- grounds ---------- */
[data-ground="light"]{--bg:var(--paper);--ink:var(--navy);--mut:var(--grey);--rule:var(--line);--acc:var(--blue);
  --panel:#FBF9F4;--grid:rgba(28,83,160,.07);background:var(--bg);color:var(--ink)}
[data-ground="dark"]{--bg:var(--navy);--ink:#fff;--mut:#9AA6BC;--rule:rgba(255,255,255,.13);--acc:var(--blue-l);
  --panel:#111A2C;--grid:rgba(91,130,196,.09);background:var(--bg);color:var(--ink)}
.band{position:relative;display:flow-root;overflow-x:clip}
.band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:64px 64px;background-position:center top;opacity:.7}
.band.nogrid::before{display:none}

/* ---------- the sheet: hairline verticals and registration crosses ---------- */
.sheet{position:relative;max-width:var(--max);margin:0 auto;padding-inline:var(--pad);
  border-inline:1px solid var(--rule)}
.sheet::before,.sheet::after{content:"+";position:absolute;top:-.62em;font:300 15px/1 var(--mono);color:var(--mut)}
.sheet::before{left:-.32em}.sheet::after{right:-.32em}
.band + .band > .sheet{border-top:1px solid var(--rule)}
.sec{padding-block:clamp(72px,10vw,136px)}
.sec.tight{padding-block:clamp(56px,7vw,96px)}
@media (max-width:860px){.sheet{border-inline:0}.sheet::before,.sheet::after{display:none}.band::before{background-size:40px 40px;opacity:.5}}

/* ---------- labels ---------- */
.lab{font:500 11.5px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--mut);margin:0 0 1.4rem;
  display:flex;gap:.9em;align-items:center}
.lab .ix{color:var(--acc)}
.lab.bar::after{content:"";flex:1;height:1px;background:var(--rule);transform-origin:left;transform:scaleX(var(--d,1));
  transition:transform 1.2s var(--ease)}
.mut{color:var(--mut)}
.lede{font-size:clamp(1.04rem,1.25vw,1.18rem);line-height:1.6;max-width:56ch}
.mono{font-family:var(--mono)}
.big{font-family:var(--serif);font-weight:300;font-size:clamp(1.7rem,3.2vw,2.9rem);line-height:1.18;letter-spacing:-.012em;max-width:26ch;text-wrap:pretty}

/* ---------- buttons: a label cell and an arrow cell ---------- */
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:2rem}
.btn{--bb:var(--ink);--bf:transparent;--bt:var(--ink);position:relative;display:inline-flex;align-items:stretch;min-height:48px;
  border:1px solid var(--bb);background:var(--bf);color:var(--bt);text-decoration:none;
  font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;overflow:hidden;isolation:isolate;cursor:pointer}
.btn>span{display:flex;align-items:center;padding:0 20px}
.btn>i{display:flex;align-items:center;justify-content:center;width:48px;border-left:1px solid var(--bb);font-style:normal}
.btn>i svg{width:14px;height:14px;transition:transform .45s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:scaleY(0);transform-origin:bottom;
  transition:transform .45s var(--ease)}
.btn:hover{color:var(--bg)}
.btn:hover::before{transform:scaleY(1)}
.btn:hover>i svg{transform:translateX(3px)}
.btn.pri{--bb:var(--acc);--bf:var(--acc);--bt:#fff}
[data-ground="dark"] .btn.pri{--bt:var(--navy)}
.btn.pri::before{background:var(--ink)}
.btn.pri:hover{color:var(--bg)}
button.btn{appearance:none;padding:0}
@media (max-width:520px){.btns .btn{width:100%}.btns .btn>span{flex:1}}

.tlink{color:var(--acc);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.tlink:hover{text-decoration-thickness:2px}

/* ---------- nav: a solid bar in the brand blue, white mark ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:60;height:var(--nav);background:var(--blue);color:#fff;
  --rule:rgba(255,255,255,.22);--acc:#fff;--ink:#fff;--bg:var(--blue)}
.nav .sheet{height:100%;display:flex;align-items:stretch;padding:0;border-top:0!important;border-inline-color:var(--rule)}
.nav .sheet::before,.nav .sheet::after{display:none}
.brand{display:flex;align-items:center;padding:0 var(--pad);text-decoration:none;border-right:1px solid var(--rule);margin-right:auto}
.brand .mark{width:60px;height:46px;background:#fff;-webkit-mask:var(--markurl) left center/contain no-repeat;mask:var(--markurl) left center/contain no-repeat}
.navlinks{display:flex;list-style:none;margin:0;padding:0}
.navlinks li{display:flex;border-left:1px solid var(--rule)}
.navlinks a{display:flex;align-items:center;gap:10px;padding:0 clamp(16px,2vw,30px);text-decoration:none;color:#fff;
  font:500 11.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;position:relative;transition:background-color .3s}
.navlinks a::after{content:"";position:absolute;left:clamp(16px,2vw,30px);right:clamp(16px,2vw,30px);bottom:16px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.navlinks a:hover::after,.navlinks a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.navlinks .cta a{background:var(--navy)}
.navlinks .cta a:hover{background:#000}
.navlinks .cta a span{font-size:14px;line-height:0}
.nav :focus-visible{outline-color:#fff;outline-offset:-4px}
.navtoggle{display:none}
@media (max-width:860px){
  .navlinks{display:none}
  .navtoggle{display:flex;align-items:center;gap:12px;border:0;border-left:1px solid var(--rule);background:none;color:#fff;
    padding:0 var(--pad);font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
  .navtoggle i{display:grid;gap:4px}
  .navtoggle i b{display:block;width:18px;height:1px;background:currentColor;transition:transform .4s var(--ease)}
  .brand .mark{width:52px;height:40px}
}
/* phone menu: a navy sheet, links rise in */
.menu{position:fixed;inset:0;z-index:55;background:var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--nav) + 24px) var(--pad) 32px;clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .6s var(--ease-io),visibility 0s .6s}
.menu.open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .6s var(--ease-io)}
.menu ol{list-style:none;margin:0 0 auto;padding:0;counter-reset:m}
.menu li{border-top:1px solid rgba(255,255,255,.13);overflow:hidden}
.menu li a{display:flex;align-items:baseline;justify-content:space-between;padding:16px 0;text-decoration:none;
  font:300 clamp(2.1rem,9vw,3rem)/1.05 var(--serif);transform:translateY(105%);transition:transform .7s var(--ease)}
.menu li a::after{counter-increment:m;content:"[0" counter(m) "]";font:500 11px var(--mono);color:#9AA6BC;letter-spacing:.08em}
.menu.open li a{transform:none;transition-delay:calc(.15s + var(--i) * .06s)}
.menu .mfoot{display:flex;flex-wrap:wrap;gap:8px 20px;font:500 11.5px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#9AA6BC;
  border-top:1px solid rgba(255,255,255,.13);padding-top:18px}
.menu .mfoot a{color:#fff;text-decoration:none}
body.menu-open .navtoggle i b:first-child{transform:translateY(2.5px) rotate(45deg)}
body.menu-open .navtoggle i b:last-child{transform:translateY(-2.5px) rotate(-45deg)}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform 1.1s var(--ease);transition-delay:var(--dl,0s)}
.js .rv.in{opacity:1;transform:none}
/* headings split into lines that rise out of a mask */
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln>span{display:block;transform:translateY(0)}
.js .split:not(.in) .ln>span{transform:translateY(105%)}
.js .split .ln>span{transition:transform 1.15s var(--ease);transition-delay:calc(var(--dl,0s) + var(--l) * .09s)}
/* the rule under a label draws on entry */
.js .lab.bar:not(.in)::after{--d:0}
/* image wipes in from the bottom edge and settles */
.js .wipe{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--ease-io)}
.js .wipe.in{clip-path:inset(0 0 0 0)}
.js .wipe img{transform:scale(1.08);transition:transform 1.8s var(--ease)}
.js .wipe.in img{transform:none}
/* paragraph that inks in word by word as it scrolls through */
.scrub .w{transition:color .4s}
.js .scrub .w{color:color-mix(in srgb,var(--ink) 18%,var(--bg))}
.js .scrub .w.on{color:var(--ink)}
.js .scrub em .w,.js .scrub .w.ac.on{color:var(--acc)}

/* ---------- drawings (KJP's own plan sheets, inlined) ---------- */
svg.dw .k-po{fill:currentColor;stroke:none}
svg.dw .k-md{fill:none;stroke:currentColor;stroke-width:44;stroke-linecap:round;stroke-linejoin:round}
svg.dw .k-tn{fill:none;stroke:currentColor;stroke-width:28;stroke-linejoin:round}
svg.dw .k-hr{fill:none;stroke:currentColor;stroke-width:17;opacity:.75}
svg.dw .k-dsh{fill:none;stroke:currentColor;stroke-width:17;opacity:.6;stroke-dasharray:150 110}
svg.dw circle.k-hr,svg.dw circle.k-tn{fill:none}

/* ---------- cursor: a blue square with a coordinate readout ---------- */
.cur{position:fixed;left:0;top:0;z-index:300;pointer-events:none;display:none}
.has-cur .cur{display:block}
.cur .sq{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:var(--blue-l);
  transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background-color .3s,border-color .3s;border:1px solid transparent}
.cur .xy{position:absolute;left:12px;top:10px;font:500 11px/1.35 var(--mono);letter-spacing:.06em;color:var(--blue);white-space:pre;
  transition:opacity .3s}
.cur.on-dark .xy{color:#9AA6BC}
.cur.link .sq{width:34px;height:34px;margin:-17px 0 0 -17px;background:transparent;border-color:var(--blue-l)}
.cur.link .xy{opacity:0}
.cur.idle .xy{opacity:0}
.cur.down .sq{width:5px;height:5px;margin:-2.5px 0 0 -2.5px}
.has-cur,.has-cur a,.has-cur button,.has-cur summary,.has-cur label{cursor:none}
.has-cur input,.has-cur textarea,.has-cur select{cursor:auto}

/* ---------- loader (home, first visit in a session) ---------- */
.ld{display:none}
.ldon .ld,.ld.out{display:grid;place-items:center;position:fixed;inset:0;z-index:250;overflow:hidden;color:#fff;background-color:var(--blue);
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:64px 64px;background-position:center center}
.ld-in{display:grid;justify-items:center;gap:22px;width:min(72vw,270px)}
.ld-logo{position:relative;display:block;width:100%;aspect-ratio:768/412}
.ld-logo::before,.ld-logo i{content:"";position:absolute;inset:0;-webkit-mask:var(--logourl) center/contain no-repeat;mask:var(--logourl) center/contain no-repeat}
.ld-logo::before{background:rgba(255,255,255,.18)}
.ld-logo i{background:#fff;clip-path:inset(calc(100% - var(--p,0) * 1%) 0 0 0)}
.ld-bar{width:100%;height:1px;background:rgba(255,255,255,.22);overflow:hidden}
.ld-bar i{display:block;height:100%;background:#fff;transform:scaleX(calc(var(--p,0) / 100));transform-origin:left}
.ld-meta{width:100%;display:flex;justify-content:space-between;gap:16px;font:500 11px/1 var(--mono);letter-spacing:.1em;white-space:nowrap;text-transform:uppercase;color:rgba(255,255,255,.72)}
.ld-meta b{font-weight:500;color:#fff;font-variant-numeric:tabular-nums}
.ld-meta em{font-style:normal;color:#fff}
.ld.ld-acc{background-color:var(--navy)}
.ld.ld-acc .ld-bar i,.ld.ld-acc .ld-logo i{background:#fff}
.ld.ld-acc .ld-meta em{color:var(--blue-l)}
.ld .x{position:absolute;width:22px;height:22px;border:solid rgba(255,255,255,.5);border-width:0}
.ld .x1{left:var(--pad);top:var(--pad);border-width:1px 0 0 1px}.ld .x2{right:var(--pad);top:var(--pad);border-width:1px 1px 0 0}
.ld .x3{left:var(--pad);bottom:var(--pad);border-width:0 0 1px 1px}.ld .x4{right:var(--pad);bottom:var(--pad);border-width:0 1px 1px 0}
.ld.out{transform:translateY(-100%);transition:transform .5s var(--ease-io)}

.curtain.to-blue{background:var(--blue)}

/* ---------- page curtain between pages ---------- */
.curtain{position:fixed;inset:0;z-index:240;background:var(--navy);pointer-events:none;transform:scaleY(0);transform-origin:bottom}
.leaving .curtain{transform:scaleY(1);transition:transform .42s var(--ease-io)}
.entering .curtain{transform:scaleY(1);transform-origin:top}
.entered .curtain{transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease-io)}

/* ---------- shared layouts ---------- */
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.split2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.split2 .stick{position:sticky;top:calc(var(--nav) + 40px)}
@media (max-width:960px){.g2,.g3,.split2{grid-template-columns:1fr}.split2 .stick{position:static}}

/* cells: hairline grid of numbered cards, the Heron problem row */
.cells{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.cell{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);display:flex;flex-direction:column;min-width:0}
.cell .ch{display:flex;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px dashed var(--rule);
  font:500 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.cell .ch b{font-weight:500;color:var(--ink)}
.cell .ch .ix{color:var(--mut)}
.cell .ic{height:150px;display:grid;place-items:center;border-bottom:1px dashed var(--rule);position:relative}
.cell .ic svg{width:96px;height:96px;stroke:var(--ink);fill:none;stroke-width:1;opacity:.85}
.cell .ic::before,.cell .ic::after{content:"+";position:absolute;font:300 13px/1 var(--mono);color:var(--mut)}
.cell .ic::before{left:8px;top:6px}.cell .ic::after{right:8px;bottom:6px}
.cell .cb{padding:22px 18px 26px;flex:1}
.cell .cb h3{margin-bottom:.6rem}
.cell .cb p{color:var(--mut);font-size:.95rem;margin:0}
.cell:hover .ch b{color:var(--acc)}
.js .cells .ic svg .dw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease);transition-delay:var(--dl,0s)}
.js .cells .in .ic svg .dw,.js .cells.in .ic svg .dw{stroke-dashoffset:0}
@media (max-width:1100px){.cells{--n:2!important}}
@media (max-width:600px){.cells{--n:1!important}.cell .ic{height:120px}}

/* index list rows (accordion) */
.rows{border-top:1px solid var(--rule)}
.row{border-bottom:1px solid var(--rule)}
.row summary{list-style:none;display:grid;grid-template-columns:64px 1fr 32px;align-items:center;gap:12px;padding:22px 0;cursor:pointer}
.row summary::-webkit-details-marker{display:none}
.row summary .ix{font:500 11px var(--mono);color:var(--mut);letter-spacing:.08em}
.row summary h3{font-size:clamp(1.25rem,2.2vw,1.85rem);transition:transform .5s var(--ease),color .3s}
.row summary:hover h3{transform:translateX(8px)}
.row summary .pm{width:14px;height:14px;position:relative;justify-self:end}
.row summary .pm::before,.row summary .pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .45s var(--ease)}
.row summary .pm::after{transform:rotate(90deg)}
.row[open] summary .pm::after{transform:rotate(0)}
.row[open] summary h3{color:var(--acc)}
.row .rb{padding:0 32px 26px 76px;color:var(--mut);max-width:72ch}
.row .rb p:last-child{margin:0}
.js .row .rb{animation:none}
.row[open] .rb{animation:rowin .6s var(--ease)}
@keyframes rowin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:640px){.row summary{grid-template-columns:40px 1fr 20px}.row .rb{padding-left:52px;padding-right:0}}

/* marquee ticker */
.tick{overflow:hidden;border-block:1px solid var(--rule);white-space:nowrap;display:flex;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tick ul{display:flex;flex:none;list-style:none;margin:0;padding:12px 0;animation:tick 48s linear infinite}
.tick li{font:500 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--mut);padding:0 26px;display:flex;align-items:center;gap:12px}
.tick li::before{content:"";width:6px;height:6px;border:1px solid var(--acc)}
@keyframes tick{to{transform:translateX(-100%)}}
.tick:hover ul{animation-play-state:paused}

/* quotes */
.q{border:1px solid var(--rule);padding:clamp(22px,3vw,36px);background:var(--panel);margin:0;display:flex;flex-direction:column;gap:20px}
.q .stars{color:var(--acc);letter-spacing:.2em;font-size:.85rem}
.q p{font:300 clamp(1.25rem,1.8vw,1.55rem)/1.38 var(--serif);margin:0}
.q cite{font:500 11px/1.5 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--mut);font-style:normal;
  border-top:1px dashed var(--rule);padding-top:14px;margin-top:auto}
.q cite span{display:block;text-transform:none;letter-spacing:.02em;margin-top:4px}

/* figure frame with crosshairs, used round every illustration */
.fig{position:relative;margin:0;border:1px solid var(--rule);background:var(--paper)}
.fig img{width:100%;height:auto;mix-blend-mode:multiply}
.fig::before,.fig::after{content:"+";position:absolute;font:300 15px/1 var(--mono);color:var(--grey);z-index:2}
.fig::before{left:8px;top:6px}.fig::after{right:8px;bottom:6px}
.fig figcaption{position:absolute;left:0;bottom:0;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  background:var(--navy);color:#fff;padding:8px 12px}

/* hotspot: a blue square with a callout */
.hot{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy);transform:translate(-4px,-4px)}
.hot i{width:9px;height:9px;background:var(--blue);flex:none;position:relative}
.hot i::after{content:"";position:absolute;inset:-6px;border:1px solid var(--blue);opacity:0;animation:ping 2.6s var(--ease) infinite}
.hot span{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;background:var(--paper);border:1px solid var(--navy);
  padding:7px 10px;white-space:nowrap;transition:background-color .3s,color .3s}
.hot:hover span{background:var(--navy);color:#fff}
.hot.l{flex-direction:row-reverse;transform:translate(calc(-100% + 5px),-4px)}
@keyframes ping{0%{opacity:.9;transform:scale(.5)}70%,100%{opacity:0;transform:scale(1.6)}}

/* counters and bars */
.stat{border-top:1px solid var(--rule);padding-top:16px}
.stat .k{font:500 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.stat .v{font:300 clamp(2.4rem,5vw,4.4rem)/1 var(--serif);letter-spacing:-.02em;margin:.4rem 0 .9rem;font-variant-numeric:tabular-nums}
.stat .v.ac{color:var(--acc)}
.stat .br{height:6px;background:var(--rule);position:relative;overflow:hidden}
.stat .br i{position:absolute;inset:0 auto 0 0;width:calc(var(--w) * 1%);background:var(--ink);transform-origin:left;transform:scaleX(0);transition:transform 1.6s var(--ease)}
.stat .br.ac i{background:var(--acc)}
.in .stat .br i,.stat.in .br i{transform:scaleX(1)}

/* forms */
.form{display:grid;gap:18px}
.form fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:18px}
.form>fieldset>legend,.branch>fieldset>legend{font:500 11.5px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--acc);
  padding:0 0 12px;border-bottom:1px solid var(--rule);width:100%;margin-bottom:6px}
.branch{display:grid;gap:18px;border-left:1px solid var(--acc);padding-left:clamp(14px,2vw,22px)}
.branch[hidden]{display:none}
.frow,.acc-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.frow,.acc-two{grid-template-columns:1fr}}
.field{display:grid;gap:6px;min-width:0}
.field>label,.flab{font:500 11px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink);padding:0}
.hint{font-size:.86rem;color:var(--mut);margin:0}
input,select,textarea{font:400 16px/1.4 var(--sans);color:var(--ink);background:var(--panel);border:1px solid var(--rule);
  border-radius:0;padding:12px 14px;width:100%;min-height:48px;transition:border-color .25s,background-color .25s}
textarea{min-height:96px;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:38px}
input:hover,select:hover,textarea:hover{border-color:var(--mut)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);background:var(--bg)}
input::placeholder,textarea::placeholder{color:var(--mut);opacity:.75}
.opts{display:grid;gap:8px}
.opt-inline{display:flex;flex-wrap:wrap;gap:8px}
.opt{display:flex;align-items:flex-start;gap:10px;font-size:.95rem;cursor:pointer;line-height:1.45}
.opt-inline .opt{border:1px solid var(--rule);padding:10px 14px;align-items:center;background:var(--panel);transition:border-color .25s,background-color .25s}
.opt-inline .opt:has(input:checked){border-color:var(--acc);background:color-mix(in srgb,var(--acc) 9%,var(--panel))}
.opt input{width:16px;height:16px;min-height:0;padding:0;margin:.18em 0 0;accent-color:var(--blue);flex:none}
.opt-inline .opt input{margin:0}
.consent{font-size:.92rem;color:var(--mut)}
.err{border:1px solid #A33;background:#FBEDEC;color:#7A1F1F;padding:12px 14px;font-size:.92rem}
.form .btn{justify-self:start;margin-top:6px}
@media (max-width:520px){.form .btn{justify-self:stretch}.form .btn>span{flex:1}}

/* ---------- footer (v1 design) ---------- */
.footer{background:var(--navy);color:#fff;padding:64px 0 32px;border-top:1px solid rgba(255,255,255,.12)}
.footer .fwrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.footer .fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:48px}
.footer a{color:rgba(255,255,255,.6);text-decoration:none}
.footer a:hover{color:#fff}
.footer .fh{font:400 .72rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);margin:0 0 16px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.92rem}
.footer .fdesc{font-size:.92rem;color:#fff;max-width:36ch;margin:0}
.footer .logo{display:block;height:64px;width:120px;margin-bottom:24px;background-color:#fff;
  -webkit-mask:var(--logourl) no-repeat left center/contain;mask:var(--logourl) no-repeat left center/contain}
.credentials{border-top:1px solid rgba(255,255,255,.12);margin-top:48px;padding-top:24px}
.badges{display:flex;flex-wrap:wrap;gap:24px;align-items:center;margin-bottom:24px}
.badge{display:flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:12px 16px;min-height:56px}
.badge[hidden]{display:none}
.badge .b-logo{height:30px;width:60px;flex:none;display:block;background-position:left center;background-repeat:no-repeat;background-size:contain}
.badge .b-logo[hidden]{display:none}
.badge .b-t{font:400 .68rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);display:block}
.badge .b-n{font:400 .8rem var(--sans);color:#fff}
.legal{font-size:.82rem;color:rgba(255,255,255,.6);display:flex;flex-wrap:wrap;gap:8px 24px}
.legal p{margin:0}
@media (max-width:960px){.footer .fcols{gap:32px}.footer .logo{height:52px;width:98px}.legal{gap:8px 16px}}
@media (max-width:600px){.footer .fcols{grid-template-columns:1fr 1fr;gap:32px 24px}.footer .fcols>:first-child{grid-column:1/-1}
  .footer .logo{height:42px;width:80px}.legal{font-size:.78rem}}

/* phone contact bar */
.mbar{display:none}
@media (max-width:860px){
  .mbar{display:flex;position:fixed;left:10px;right:10px;bottom:10px;z-index:50;gap:8px;padding:8px;background:var(--navy);
    border:1px solid rgba(255,255,255,.13);transition:transform .5s var(--ease),opacity .4s}
  .mbar .btn{flex:1;min-height:44px;font-size:11px;white-space:nowrap}.mbar .btn>span{flex:1;justify-content:center;padding:0 8px}.mbar .btn>i{width:38px}
  .mbar.away{transform:translateY(130%);opacity:0}
  body.has-mbar .footer{padding-bottom:76px}
}

/* =========================================================
   PAGE: HOME
   ========================================================= */
.h-hero{padding-top:var(--nav)}
.h-hero .sheet{display:grid;grid-template-columns:minmax(0,1fr);padding-inline:0}
.h-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);border-bottom:1px solid var(--rule)}
.h-top>div{padding:clamp(40px,6vw,88px) var(--pad) clamp(32px,4vw,56px)}
.h-top>div+div{border-left:1px solid var(--rule);display:flex;flex-direction:column;justify-content:flex-end}
.h-top h1{margin-top:.2rem}
.h-fig{position:relative;padding:clamp(24px,4vw,56px) var(--pad);border-bottom:1px solid var(--rule)}
.h-fig .fig{border:0;background:none}
.h-fig .fig::before,.h-fig .fig::after{display:none}
.h-fig img{max-width:1020px;margin:0 auto;width:100%}
.h-fig .coord{position:absolute;font:500 11px var(--mono);letter-spacing:.07em;color:var(--grey)}
.h-fig .coord.a{left:var(--pad);top:18px}.h-fig .coord.b{right:var(--pad);bottom:16px}
.js .hx .h-img{animation:imgin 1.5s var(--ease) both}
@keyframes imgin{from{opacity:.001;transform:translateY(18px) scale(1.015)}to{opacity:1;transform:none}}
.js .hx .split .ln>span{animation:lnup 1.1s var(--ease) both;animation-delay:calc(.12s + var(--l) * .09s);transition:none;transform:none}
.js .hx .rvh{animation:fadeup 1s var(--ease) both;animation-delay:var(--dl,.4s)}
@keyframes lnup{from{transform:translateY(60%)}to{transform:none}}
@keyframes fadeup{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}
.ldon .hx .split .ln>span,.ldon .hx .rvh,.ldon .hx .h-img{animation-play-state:paused}
@media (max-width:960px){.h-top{grid-template-columns:1fr}.h-top>div+div{border-left:0;border-top:1px solid var(--rule)}}
@media (max-width:640px){.hot span{font-size:11px;padding:6px 8px}.hot.ml{flex-direction:row-reverse;transform:translate(calc(-100% + 5px),-4px)}}

/* the plan that assembles as you scroll */
.plan{position:relative}
.plan .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-rows:var(--nav) 1fr}
.plan .stage{position:relative;display:grid;place-items:center;padding:24px var(--pad)}
.plan svg.fp{width:min(86vw,1000px);height:auto;max-height:66vh;overflow:visible;color:var(--navy)}
.plan .fp .w{transform-box:fill-box;transform-origin:center;
  --a:clamp(0,calc((var(--p) - var(--s)) / .32),1);
  transform:translate(calc(var(--dx) * (1 - var(--a)) * 1px),calc(var(--dy) * (1 - var(--a)) * 1px)) rotate(calc(var(--r) * (1 - var(--a)) * 1deg));
  opacity:calc(.25 + var(--a) * .75)}
.plan .fp .fx{--a:clamp(0,calc((var(--p) - .42 - var(--s)) / .16),1);opacity:var(--a);transform:translateY(calc((1 - var(--a)) * 700px))}
.plan .fp .dr{--a:clamp(0,calc((var(--p) - .62 - var(--s)) / .18),1);stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--a))}
.plan .say{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;text-align:center;padding:0 var(--pad)}
.plan .say p{grid-area:1/1;font:300 clamp(2rem,5.4vw,4.6rem)/1.02 var(--serif);letter-spacing:-.02em;margin:0;max-width:16ch;
  opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .8s var(--ease);
  background:color-mix(in srgb,var(--paper) 70%,transparent);padding:.1em .25em}
.plan .say p em{color:var(--blue);font-style:italic}
.plan .say p.on{opacity:1;transform:none}
.plan .box{position:absolute;left:var(--pad);bottom:28px;width:min(300px,calc(100% - 2 * var(--pad)));border:1px solid var(--navy);background:var(--paper)}
.plan .box b{display:block;background:var(--navy);color:#fff;font:500 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;padding:9px 12px}
.plan .box p{font-size:.9rem;line-height:1.5;padding:12px 12px 4px;margin:0;min-height:5.2em}
.plan .box small{display:block;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grey);padding:4px 12px 12px}
.plan .meter{position:absolute;right:var(--pad);bottom:30px;font:500 11px var(--mono);letter-spacing:.08em;color:var(--grey);text-align:right}
.plan .meter i{display:block;width:120px;height:1px;background:var(--line);margin-top:8px;position:relative}
.plan .meter i::after{content:"";position:absolute;inset:0;background:var(--blue);transform-origin:left;transform:scaleX(var(--p))}
@media (max-width:640px){.plan .box{bottom:16px}.plan .meter{display:none}.plan svg.fp{width:94vw;max-height:52vh;margin-top:-12vh}}
.noplan .plan{height:auto!important}.noplan .plan .pin{position:relative;height:auto;padding-block:60px}
.noplan .plan .say{position:relative}.noplan .plan .say p{opacity:1;transform:none;position:static}

/* two doors */
.doors{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule)}
.door{position:relative;display:flex;flex-direction:column;min-height:clamp(400px,42vw,540px);padding:clamp(26px,3vw,40px);text-decoration:none;
  border-right:1px solid var(--rule);overflow:hidden;isolation:isolate}
.door:last-child{border-right:0}
.door .dh{display:flex;justify-content:space-between;font:500 11px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
.door h3{font-size:clamp(2rem,3.8vw,3.4rem);line-height:1;margin:auto 0 1rem}
.door p{color:var(--mut);max-width:42ch;margin:0 0 1.4rem}
.door .go{display:inline-flex;gap:12px;align-items:center;font:500 11.5px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--acc)}
.door .go svg{width:14px;transition:transform .5s var(--ease)}
.door .dimg{position:absolute;inset:auto 0 0 0;height:56%;z-index:-1;opacity:.0;transform:translateY(30px) scale(1.02);
  transition:opacity .7s var(--ease),transform 1s var(--ease);display:grid;place-items:end center;padding:0 20px}
.door .dimg img{max-height:100%;width:auto;mix-blend-mode:multiply}
.door::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--paper2);transform:scaleY(0);transform-origin:bottom;transition:transform .7s var(--ease)}
.door:hover::before{transform:scaleY(1)}
[data-ground="dark"] .door::before{background:var(--panel)}
.door:hover .dimg{opacity:.22;transform:none}
.door:hover .go svg{transform:translateX(6px)}
.door .note{font:500 11px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border-top:1px dashed var(--rule);padding-top:14px}
@media (max-width:860px){.doors{grid-template-columns:1fr}.door{border-right:0;border-bottom:1px solid var(--rule);min-height:auto;gap:12px}.door h3{margin-top:2.4rem}.door .dimg{display:none}}

/* street panorama CTA */
.street{position:relative;border-top:1px solid var(--rule)}
.street .pano{overflow:hidden;border-bottom:1px solid var(--rule)}
.street .pano img{width:100%;height:clamp(240px,46vh,560px);object-fit:cover;mix-blend-mode:multiply;transform:scale(calc(1.12 - var(--p,0) * .12));transform-origin:center 60%}
.cta2{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:end}
@media (max-width:960px){.cta2{grid-template-columns:1fr}}

/* =========================================================
   PAGE: BUYERS AGENCY
   ========================================================= */
.b-hero{padding-top:var(--nav)}
.b-hero .sheet{padding-inline:0}
.b-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
.b-grid>div{padding:clamp(40px,6vw,88px) var(--pad)}
.b-grid>div+div{border-left:1px solid var(--rule);display:flex;flex-direction:column;justify-content:center;padding-block:clamp(24px,3vw,40px)}
.b-pts{list-style:none;margin:2.4rem 0 0;padding:0;border-top:1px solid var(--rule)}
.b-pts li{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:.97rem}
.b-pts li b{font:500 11px/1.9 var(--mono);color:var(--acc);letter-spacing:.06em}
.b-hero .fig{border:0;background:none}
.b-hero .fig::before,.b-hero .fig::after{display:none}
@media (max-width:960px){.b-grid{grid-template-columns:1fr}.b-grid>div+div{border-left:0;border-top:1px solid var(--rule)}}

.cmp{width:100%;border-collapse:collapse;font-size:.97rem}
.cmp th,.cmp td{text-align:left;padding:18px 16px;border-bottom:1px solid var(--rule);vertical-align:top}
.cmp thead th{font:500 11px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--mut);border-bottom:1px solid var(--ink)}
.cmp tbody th{font:500 11px/1.6 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--mut);width:22%}
.cmp td{color:var(--mut)}
.cmp td.ba{color:var(--ink);position:relative}
.cmp td.ba::before{content:"";position:absolute;left:0;top:22px;width:7px;height:7px;background:var(--acc)}
.cmp td.ba{padding-left:24px}
.cmp thead th.ba{color:var(--acc)}
.js .cmp tbody tr{opacity:0;transform:translateX(-10px);transition:opacity .7s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i) * .08s)}
.js .cmp.in tbody tr{opacity:1;transform:none}
@media (max-width:640px){
  .cmp thead{display:none}.cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:100%}
  .cmp tr{border-bottom:1px solid var(--rule);padding:12px 0}.cmp th,.cmp td{border:0;padding:4px 0}
  .cmp td::before{display:block;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);content:attr(data-h)}
  .cmp td.ba{padding-left:0}.cmp td.ba::before{content:attr(data-h);position:static;width:auto;height:auto;background:none;color:var(--acc)}
  .cmp tbody th{width:auto;color:var(--ink)}
}

/* the five sheets, pinned and run sideways */
.hz{position:relative}
.hz .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding-top:var(--nav)}
.hz .head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:0 var(--pad) clamp(20px,3vw,36px);max-width:var(--max);margin:0 auto;width:100%}
.hz .track{display:flex;gap:0;padding-left:var(--pad);padding-right:var(--pad);width:max-content;will-change:transform;transform:translate3d(calc(var(--x,0) * -1px),0,0)}
.hz .sh{flex:none;width:min(420px,78vw);border:1px solid var(--rule);margin-right:-1px;background:var(--panel);display:flex;flex-direction:column;min-height:clamp(340px,46vh,440px)}
.hz .sh .ch{display:flex;justify-content:space-between;padding:14px 18px;border-bottom:1px dashed var(--rule);font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.hz .sh .num{font:300 clamp(4rem,8vw,7rem)/1 var(--serif);color:var(--acc);padding:22px 18px 0;letter-spacing:-.04em}
.hz .sh h3{padding:0 18px;margin:auto 0 .7rem}
.hz .sh p{padding:0 18px 22px;color:var(--mut);margin:0;font-size:.97rem}
.hz .sh.end{background:transparent;border-style:dashed;justify-content:center;align-items:flex-start;padding:24px}
.hz .prog{font:500 11px var(--mono);letter-spacing:.08em;color:var(--mut);display:flex;align-items:center;gap:12px}
.hz .prog i{display:block;width:120px;height:1px;background:var(--rule);position:relative}
.hz .prog i::after{content:"";position:absolute;inset:0;background:var(--acc);transform-origin:left;transform:scaleX(var(--p,0))}
@media (max-width:860px){
  .hz{height:auto!important}.hz .pin{position:static;height:auto;padding-block:72px 40px;display:block}
  .hz .track{transform:none!important;flex-direction:column;padding-right:var(--pad);width:auto}
  .hz .sh{width:100%;min-height:auto;margin:0 0 -1px}.hz .sh .num{font-size:3.2rem}.hz .sh h3{margin-top:.8rem}
  .hz .prog{display:none}
}

.fee{border:1px solid var(--rule);background:var(--panel);display:flex;flex-direction:column}
.fee .ch{display:flex;justify-content:space-between;padding:14px 22px;border-bottom:1px dashed var(--rule);font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.fee .fb{padding:26px 22px}
.fee h3{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-bottom:.8rem}
.fee p{color:var(--mut);margin:0}
.terms{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule)}
.terms li{padding:22px 22px 22px 0;border-bottom:1px solid var(--rule)}
.terms li+li{padding-left:22px;border-left:1px solid var(--rule)}
.terms h3{font-size:1.25rem;margin-bottom:.5rem}
.terms p{color:var(--mut);margin:0;font-size:.95rem}
@media (max-width:860px){.terms{grid-template-columns:1fr}.terms li+li{padding-left:0;border-left:0}}

.faq{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,4vw,56px)}
.faq .row summary{grid-template-columns:1fr 24px}
.faq .row summary h3{font-size:1.18rem;font-family:var(--serif)}
.faq .row .rb{padding:0 0 22px}
@media (max-width:960px){.faq{grid-template-columns:1fr}.faq .rows+.rows{border-top:0}}

/* =========================================================
   PAGE: ACCOMMODATION
   ========================================================= */
.a-hero{padding-top:var(--nav)}
.a-hero .sheet{padding-inline:0;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.a-hero .a-l{padding:clamp(40px,6vw,88px) var(--pad) 0;display:flex;flex-direction:column}
.a-hero .a-l .fig{border:0;background:none;margin-top:auto;padding-top:28px}
.a-hero .a-l .fig::before,.a-hero .a-l .fig::after{display:none}
.a-hero .a-r{border-left:1px solid var(--rule);padding:clamp(28px,4vw,56px) var(--pad);background:var(--panel)}
.a-hero .a-r .form{position:sticky;top:calc(var(--nav) + 24px)}
.a-hero .free{font:300 clamp(1.3rem,2vw,1.7rem)/1.2 var(--serif);color:var(--acc);margin:1.4rem 0 0}
.a-hero .mini{font-size:.9rem;color:var(--mut);margin-top:1.4rem;max-width:52ch}
.acc-hint{font:500 11px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
@media (max-width:960px){.a-hero .sheet{grid-template-columns:1fr}.a-hero .a-r{border-left:0;border-top:1px solid var(--rule)}.a-hero .a-l .fig{max-width:640px}}

/* the brief, read down a line */
.flow{position:relative;margin-top:clamp(28px,4vw,56px)}
.flow::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;width:1px;margin:0 auto;background:var(--rule)}
.flow .fl{position:absolute;left:50%;top:0;width:1px;height:calc(var(--p,0) * 100%);background:var(--acc);transform:translateX(-.5px)}
.step{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:clamp(150px,20vh,200px);position:relative}
.step .bar{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--navy);color:#fff;padding:14px 18px;
  font:500 12px var(--mono);letter-spacing:.09em;text-transform:uppercase;position:relative}
.step .bar::after{content:"";position:absolute;top:50%;width:9px;height:9px;background:var(--acc);transform:translate(-50%,-50%)}
.step .bar i{font-style:normal;color:#9AA6BC;font-size:11px}
.step .tx{padding:0 clamp(18px,3vw,44px)}
.step .tx h3{margin-bottom:.4rem}
.step .tx p{color:var(--mut);margin:0;font-size:.97rem}
.step:nth-child(odd) .bar{grid-column:1;margin-right:-1px}
.step:nth-child(odd) .bar::after{left:100%}
.step:nth-child(odd) .tx{grid-column:2;grid-row:1}
.step:nth-child(even) .bar{grid-column:2;margin-left:-1px}
.step:nth-child(even) .bar::after{left:0}
.step:nth-child(even) .tx{grid-column:1;grid-row:1;text-align:right}
.js .step .bar{transform:scaleX(0);transition:transform 1s var(--ease)}
.js .step:nth-child(odd) .bar{transform-origin:right}.js .step:nth-child(even) .bar{transform-origin:left}
.js .step.in .bar{transform:none}
@media (max-width:760px){
  .flow::before,.flow .fl{left:6px;margin:0}
  .step{grid-template-columns:1fr;gap:12px;padding:22px 0 22px 28px;min-height:0}
  .step .bar,.step:nth-child(even) .bar,.step:nth-child(odd) .bar{grid-column:1;margin:0}
  .step .tx,.step:nth-child(even) .tx,.step:nth-child(odd) .tx{grid-column:1;grid-row:2;text-align:left;padding:0}
  .step .bar::after,.step:nth-child(odd) .bar::after,.step:nth-child(even) .bar::after{left:-22px}
}

/* checks: the plan with callouts */
.chk{position:relative}
.chk .pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  align-items:center;gap:clamp(24px,4vw,64px);padding:var(--nav) var(--pad) 0;max-width:var(--max);margin:0 auto}
.chk ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.chk li{display:grid;grid-template-columns:40px 1fr;gap:6px 10px;padding:12px 0;border-bottom:1px solid var(--rule);color:var(--mut);transition:color .4s}
.chk li b{font:500 11px/1.9 var(--mono);letter-spacing:.06em}
.chk li h3{font-size:1.12rem;color:inherit;transition:color .4s}
.chk li p{grid-column:2;margin:0;font-size:.92rem;max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease),opacity .5s}
.chk li.on{color:var(--ink)}
.chk li.on b{color:var(--acc)}
.chk li.on p{max-height:7em;opacity:1;color:var(--mut)}
.chk .pl{position:relative}
.chk .pl svg{width:100%;height:auto;color:var(--ink)}
.chk .co{position:absolute;display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .6s var(--ease)}
.chk .co.on{opacity:1;transform:none}
.chk .co.l{flex-direction:row-reverse;translate:calc(-100% + 10px) 0}
.chk .co span b{font-weight:500}
@media (max-width:600px){.chk .co span em{display:none}}
.chk .co span em{font-style:normal}
.chk .co i{width:10px;height:10px;background:var(--acc);flex:none}
.chk .co span{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;background:var(--acc);color:#fff;padding:6px 9px;white-space:nowrap}
.chk .co.cur span{background:var(--navy)}
.chk .ring{position:absolute;inset:4% 2% 6% 2%;border:1px dashed var(--acc);opacity:0;transition:opacity .6s}
.chk .ring.on{opacity:1}
@media (max-width:960px){
  .chk{height:auto!important}.chk .pin{position:static;height:auto;grid-template-columns:1fr;padding-block:72px}
  .chk li p{max-height:none;opacity:1}.chk li{color:var(--ink)}.chk li b{color:var(--acc)}
  .chk .co,.chk .ring{opacity:1;transform:none}.chk .co span{font-size:9px;padding:4px 6px}
  .chk .pl{order:-1}
}

.floor{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center}
.floor .two{font:300 clamp(7rem,20vw,17rem)/.8 var(--serif);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px var(--acc);margin:0}
.floor .two span{display:block;font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;-webkit-text-stroke:0;color:var(--mut);margin-top:1.4rem}
@media (max-width:960px){.floor{grid-template-columns:1fr}}

.ex{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:2rem}
@media (max-width:760px){.ex{grid-template-columns:1fr}}

.reqs{list-style:none;margin:1.2rem 0 0;padding:0;border-top:1px solid var(--rule)}
.reqs li{display:grid;grid-template-columns:28px 1fr;padding:11px 0;border-bottom:1px solid var(--rule);font-size:.95rem}
.reqs li::before{content:"";width:7px;height:7px;border:1px solid var(--acc);margin-top:.55em}
.hostform{border:1px solid var(--rule);background:var(--panel);padding:clamp(22px,3vw,36px)}

/* =========================================================
   PAGE: ABOUT
   ========================================================= */
.ab-hero{padding-top:var(--nav)}
.ab-hero .sheet{padding-inline:0}
.ab-hero .t{padding:clamp(48px,7vw,104px) var(--pad) clamp(32px,4vw,56px);display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:40px;align-items:end}
@media (max-width:960px){.ab-hero .t{grid-template-columns:1fr}}
.ab-zoom{position:relative;height:150vh;border-top:1px solid var(--rule)}
.ab-zoom .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.ab-zoom img{width:min(1200px,96vw);height:auto;mix-blend-mode:multiply;transform:scale(calc(1 + var(--p,0) * .28)) translateY(calc(var(--p,0) * -2%));transform-origin:38% 52%}
.ab-zoom .cap{position:absolute;left:var(--pad);bottom:24px;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
@media (max-width:860px){.ab-zoom{height:auto}.ab-zoom .pin{position:relative;height:auto;padding:24px 0}.ab-zoom img{transform:none}}
/* drawing title block */
.tb{border:1px solid var(--ink)}
.tb dl{display:grid;grid-template-columns:1fr 1fr;margin:0;font-size:.95rem}
.tb dl>div{padding:14px 16px;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);min-width:0}
.tb dl>div:nth-child(2n){border-right:0}
.tb dl>div:last-child{border-bottom:0}
.tb dt{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.tb dd{margin:0}
.tb dl>.wide{grid-column:1/-1;border-right:0}
.tb .head{background:var(--ink);color:var(--bg);display:flex;justify-content:space-between;padding:10px 16px;font:500 11px var(--mono);letter-spacing:.09em;text-transform:uppercase}
@media (max-width:560px){.tb dl{grid-template-columns:1fr}.tb dl>div{border-right:0}}
/* sticky stacked sheets */
.stack{display:grid;gap:clamp(18px,3vw,28px)}
.stack .sc{position:sticky;top:calc(var(--nav) + 28px + var(--i) * 18px);border:1px solid var(--rule);background:var(--panel);
  display:grid;grid-template-columns:120px 1fr;min-height:260px;transform-origin:top center}
.stack .sc .n{border-right:1px dashed var(--rule);padding:22px;font:300 3.4rem/1 var(--serif);color:var(--acc)}
.stack .sc .b{padding:24px clamp(18px,3vw,36px)}
.stack .sc .b .k{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);display:block;margin-bottom:12px}
.stack .sc h3{margin-bottom:.8rem}
.stack .sc p{color:var(--mut);margin:0}
@media (max-width:640px){.stack .sc{grid-template-columns:1fr;position:static}.stack .sc .n{border-right:0;border-bottom:1px dashed var(--rule);font-size:2.2rem;padding:14px 18px}}

/* =========================================================
   PAGE: CONTACT
   ========================================================= */
.c-wrap{padding-top:var(--nav)}
.c-wrap .sheet{padding-inline:0;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.c-main{padding:clamp(44px,6vw,88px) var(--pad)}
.c-side{border-left:1px solid var(--rule);background:var(--panel)}
.c-side .in2{position:sticky;top:var(--nav);padding:clamp(32px,4vw,56px) var(--pad);display:grid;gap:28px}
.c-pct{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--rule);padding-bottom:14px}
.c-pct b{font:300 clamp(3rem,6vw,5rem)/1 var(--serif);letter-spacing:-.03em;color:var(--acc);font-variant-numeric:tabular-nums}
.c-pct span{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);text-align:right}
.c-bar{height:1px;background:var(--rule);position:relative;margin-top:-28px}
.c-bar i{position:absolute;inset:0;background:var(--acc);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .6s var(--ease)}
.c-steps{list-style:none;margin:0;padding:0;counter-reset:c}
.c-steps li{display:grid;grid-template-columns:44px 1fr;padding:14px 0;border-bottom:1px solid var(--rule)}
.c-steps li::before{counter-increment:c;content:"0" counter(c);font:500 11px/1.8 var(--mono);color:var(--acc);letter-spacing:.06em}
.c-alt{display:grid;gap:10px}
.c-alt a{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--rule);padding:14px 16px;text-decoration:none;
  font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;background:var(--bg);transition:border-color .3s,color .3s}
.c-alt a svg{width:14px;height:14px;flex:none}
.c-alt a:hover{border-color:var(--acc);color:var(--acc)}
.c-head{margin-bottom:clamp(28px,4vw,48px)}
.c-head .note{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--acc);border:1px solid var(--rule);display:inline-block;padding:8px 12px;margin-top:1rem}
@media (max-width:960px){.c-pct,.c-bar{display:none}.c-wrap .sheet{grid-template-columns:1fr}.c-side{border-left:0;border-top:1px solid var(--rule)}.c-side .in2{position:static}}

/* utility pages */
.u-hero{padding-top:var(--nav)}
.prose{max-width:72ch}
.prose h2,.prose h3{font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.15;margin:2.2rem 0 .8rem}
.prose ul{padding-left:1.2em}
.prose a{color:var(--acc)}
.hero .wrap,.wrap{max-width:none}

.noplan .hz,.noplan .chk{height:auto!important}
.noplan .hz .pin,.noplan .chk .pin{position:static;height:auto;padding-block:72px}
.noplan .hz .track{transform:none!important;flex-wrap:wrap;row-gap:0}
.noplan .chk li p{max-height:none;opacity:1}.noplan .chk .co,.noplan .chk .ring{opacity:1;transform:none}
.noplan .ab-zoom{height:auto}.noplan .ab-zoom .pin{position:relative;height:auto}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .tick ul{animation:none}
  .ld.out{transform:none;opacity:0;transition:opacity .4s linear!important}
}

/* ---------- v3 (21 Oct 2026): investors group in the nav, journey tiles, inked plan sheets, status tag ---------- */
.navlinks .has-sub{position:relative}
.navlinks .has-sub>a .car{width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);display:inline-block}
.navlinks .sub{position:absolute;top:100%;left:-1px;min-width:250px;list-style:none;margin:0;padding:0;background:var(--navy);border:1px solid var(--rule);border-top:0;
  display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s var(--ease),transform .35s var(--ease),visibility 0s .35s}
.navlinks .has-sub:hover .sub,.navlinks .has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease),transform .35s var(--ease)}
.navlinks .sub li{border-left:0;border-top:1px solid var(--rule)}
.navlinks .sub li:first-child{border-top:0}
.navlinks .sub a{padding:15px 20px;width:100%;min-height:44px}
.navlinks .sub a::after{bottom:9px;left:20px;right:20px}
.navlinks .sub a:hover{background:rgba(255,255,255,.06)}
.menu{overflow-y:auto}
.menu li a::after{content:"[" counter(m,decimal-leading-zero) "]"}
.menu li.msub a{font-size:clamp(1.25rem,5.2vw,1.6rem);padding:9px 0 9px 18px}
.cell{position:relative}
.cell .cl{color:inherit;text-decoration:none;display:inline-block;padding-block:10px;margin-block:-10px}
.cell .cl::after{content:"";position:absolute;inset:0;z-index:1}
.cell .cl:focus-visible{outline:none}
.cell:focus-within{outline:2px solid var(--acc);outline-offset:-2px}
.cell .go{display:inline-flex;gap:10px;align-items:center;margin-top:1rem;font:500 11px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--acc)}
.cell .go svg{width:13px;transition:transform .5s var(--ease)}
.cell:hover .go svg{transform:translateX(5px)}
.sig{margin:0;border:1px solid var(--rule);background:var(--panel);position:relative;padding:clamp(18px,3vw,36px) clamp(14px,2.4vw,28px) clamp(14px,2vw,24px)}
.sig .cap{display:block;font:500 11px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--mut);margin-bottom:14px}
.sig svg{display:block;width:100%;height:auto;max-height:440px;color:var(--ink)}
.sig .k-po{fill:currentColor;stroke:none}.sig .k-md{fill:none;stroke:currentColor;stroke-width:44;stroke-linecap:round;stroke-linejoin:round}
.sig .k-tn{fill:none;stroke:currentColor;stroke-width:28;stroke-linejoin:round}.sig .k-hr{fill:none;stroke:currentColor;stroke-width:17;opacity:.75}
.sig .k-dsh{fill:none;stroke:currentColor;stroke-width:17;opacity:.6;stroke-dasharray:150 110}.sig circle.k-hr{fill:none}
.js .sig .ln2{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.7s var(--ease) var(--d,0s)}
.js .sig .k-po,.js .sig .fd{opacity:0;transition:opacity .8s var(--ease) var(--d,0s)}
.js .sig.in .ln2{stroke-dashoffset:0}
.js .sig.in .k-po{opacity:1}.js .sig.in .fd{opacity:.6}
@media (prefers-reduced-motion:reduce){.js .sig .ln2,.js .sig .k-po,.js .sig .fd{transition:none}}
.status{display:inline-flex;align-items:center;gap:10px;margin:1.4rem 0 0;padding:7px 12px;border:1px solid currentColor;color:var(--acc);
  font:500 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.status::before{content:"";width:7px;height:7px;background:currentColor}
.glance dd{font-size:.97rem}
.b-hero .glance{margin-top:0}
.fee .note{font:500 11px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border-top:1px dashed var(--rule);padding-top:12px;margin-top:14px}