/* EEnovatics v2. Tokens from their posts and logo; one typeface; motion is CSS scroll timelines only. */
@font-face{font-family:"League Spartan";src:url(../assets/fonts/league-spartan.woff2) format("woff2");font-weight:100 900;font-display:swap}
/* Arial metrics adjusted to League Spartan so the swap does not shift layout */
@font-face{font-family:"LS Fallback";src:local("Arial"),local("ArialMT");size-adjust:93%;ascent-override:75.3%;descent-override:23.7%;line-gap-override:0%}

:root{
  --paper:#fff;--mist:#f1f4f7;--plexus:#e6ebf0;--line:#dce3ea;--edge:#8796a5;
  --ink:#13283d;--muted:#4f6275;--navy:#0d3c69;--red:#c4161c;--red-press:#a31217;
  --teal:#7aadae;--teal-ink:#3d7476;--yellow:#f9c80e;
  --font:"League Spartan","LS Fallback",Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --gut:clamp(16px,4vw,56px);--max:1240px;--pad:clamp(72px,10vw,140px);
  --edge-x:max(var(--gut),(100% - var(--max))/2);
  --bar:56px;--rp:14px;--seal:76px;
  --lift:0 30px 60px -30px rgba(13,60,105,.45);
  --plx:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 480'><path d='M237 79L327 148M237 79L205 201M237 79L285 194M237 79L156 85M466 43L457 181M466 43L393 39M466 43L521 142M466 43L590 84M385 178L457 181M385 178L393 39M385 178L327 148M385 178L285 194M385 178L336 233M385 178L439 243M51 243L137 278M51 243L37 317M51 243L81 177M51 243L30 139M59 52L97 113M59 52L156 85M59 52L81 177M59 52L30 139M307 390L226 385M307 390L378 413M307 390L342 316M307 390L191 329M97 113L156 85M97 113L81 177M97 113L30 139M449 446L378 413M449 446L598 445M449 446L467 378M693 31L611 143M693 31L590 84M611 143L521 142M611 143L590 84M611 143L680 216M611 143L598 231M226 385L230 279M226 385L127 365M226 385L191 329M226 385L102 429M137 278L230 279M137 278L37 317M137 278L205 201M137 278L81 177M137 278L127 365M137 278L191 329M457 181L521 142M457 181L535 230M457 181L439 243M393 39L327 148M230 279L342 316M230 279L205 201M230 279L285 194M230 279L191 329M327 148L285 194M327 148L336 233M566 332L497 283M566 332L598 445M566 332L677 328M566 332L622 377M566 332L598 231M566 332L467 378M566 332L535 230M378 413L342 316M378 413L467 378M521 142L590 84M521 142L535 230M37 317L28 412M37 317L127 365M37 317L102 429M497 283L467 378M497 283L535 230M497 283L439 243M598 445L677 328M598 445L622 377M598 445L666 464M342 316L336 233M205 201L285 194M677 328L622 377M677 328L680 216M677 328L666 464M677 328L598 231M622 377L666 464M285 194L336 233M156 85L81 177M81 177L30 139M28 412L127 365M28 412L102 429M127 365L191 329M127 365L102 429M680 216L598 231M680 216L535 230M598 231L535 230M535 230L439 243' stroke='%23e6ebf0' stroke-width='1.5' fill='none'/><g fill='%23d3dce4'><circle cx='237' cy='79' r='4'/><circle cx='466' cy='43' r='5'/><circle cx='385' cy='178' r='6'/><circle cx='51' cy='243' r='6'/><circle cx='59' cy='52' r='4'/><circle cx='307' cy='390' r='5'/><circle cx='97' cy='113' r='4'/><circle cx='449' cy='446' r='6'/><circle cx='693' cy='31' r='4'/><circle cx='611' cy='143' r='6'/><circle cx='226' cy='385' r='3'/><circle cx='137' cy='278' r='6'/><circle cx='457' cy='181' r='6'/><circle cx='393' cy='39' r='5'/><circle cx='230' cy='279' r='3'/><circle cx='327' cy='148' r='4'/><circle cx='566' cy='332' r='6'/><circle cx='378' cy='413' r='3'/><circle cx='521' cy='142' r='4'/><circle cx='37' cy='317' r='5'/><circle cx='497' cy='283' r='3'/><circle cx='598' cy='445' r='4'/><circle cx='342' cy='316' r='5'/><circle cx='205' cy='201' r='4'/><circle cx='677' cy='328' r='5'/><circle cx='622' cy='377' r='4'/><circle cx='285' cy='194' r='6'/><circle cx='156' cy='85' r='4'/><circle cx='81' cy='177' r='3'/><circle cx='28' cy='412' r='6'/><circle cx='336' cy='233' r='6'/><circle cx='590' cy='84' r='4'/><circle cx='127' cy='365' r='4'/><circle cx='30' cy='139' r='4'/><circle cx='191' cy='329' r='6'/><circle cx='680' cy='216' r='6'/><circle cx='666' cy='464' r='5'/><circle cx='598' cy='231' r='6'/><circle cx='467' cy='378' r='4'/><circle cx='535' cy='230' r='5'/><circle cx='102' cy='429' r='5'/><circle cx='439' cy='243' r='3'/></g></svg>");
}
@media (min-width:768px){:root{--rp:18px;--seal:88px}}
@media (min-width:1024px){:root{--bar:72px}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html:has(dialog[open]){overflow:hidden}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
img,video,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
address{font-style:normal}
[id]{scroll-margin-top:64px}
@media (min-width:1024px){[id]{scroll-margin-top:80px}}
/* sections carry their own top padding: land flush under the bar, no sliver of the one before
   (not + its 1 px border: tucking that pixel under it absorbs the scroll offset's rounding) */
section[id]{scroll-margin-top:var(--bar)}
:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.on-dark :focus-visible,.lb :focus-visible{outline-color:#fff}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:8px;top:-64px;z-index:90;background:var(--navy);color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;text-decoration:none}
.skip:focus{top:8px}

.wrap{width:min(100% - 2*var(--gut),var(--max));margin-inline:auto}
h1,h2,.h3,h3{color:var(--navy);text-wrap:balance}
h2{font-size:clamp(32px,4.6vw,64px);font-weight:800;line-height:1;letter-spacing:-.015em}
h3,.h3{font-size:clamp(20px,1.9vw,28px);font-weight:700;line-height:1.15}
.lead{font-size:clamp(18px,1.45vw,22px);line-height:1.45;text-wrap:pretty}
.cap{font-size:14px;font-weight:500;line-height:1.45;color:var(--muted)}
.on-dark{color:#fff}
.on-dark h2,.on-dark h3{color:#fff}
.on-dark .cap{color:#fff}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:2px solid transparent;border-radius:12px;font:600 17px/1.15 var(--font);text-decoration:none;text-align:center;transition:background-color .2s var(--ease),color .2s var(--ease),transform .18s var(--ease)}
.btn:active,.door:active,.arr:active,.chip:active span{transform:scale(.97)}
.btn.red{background:var(--red);color:#fff}
.btn.outline{border-color:var(--navy);color:var(--navy);background:#fff}
.btn.ghost{border-color:#fff;color:#fff}
.btn.wide{width:100%}
/* hover only where a pointer hovers: on touch the colour would stick after a tap */
@media (hover:hover){
  .btn.red:hover,.door.red:hover{background:var(--red-press)}
  .btn.outline:hover{background:var(--navy);color:#fff}
  .btn.ghost:hover{background:#fff;color:var(--navy)}
  .door.navy:hover{background:#0a3058}
  .door:hover .door-t{text-decoration:underline;text-underline-offset:3px}
  .fc-end a:hover{background:#fff;color:var(--red)}
  .links a:hover::after{transform:scaleX(1)}
}
.text-link{font-weight:600;text-underline-offset:4px;text-decoration-thickness:2px;min-height:44px;display:inline-flex;align-items:center}

/* bar: solid white, sticky, never hides */
.bar{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .28s var(--ease)}
.bar.scrolled{box-shadow:0 10px 28px -18px rgba(13,60,105,.55)}
.bar-in{height:var(--bar);display:flex;align-items:center;gap:8px;width:min(100% - 2*var(--gut),var(--max));margin-inline:auto}
.brand{display:flex;align-items:center;gap:8px;margin-right:auto;min-height:44px;color:var(--ink);font-weight:700;font-size:21px;letter-spacing:-.01em;text-decoration:none}
.brand img{width:30px;height:30px}
.ee{color:var(--red)}
.links{display:none}
.bar-cta{min-height:40px;padding:0 14px;font-size:16px}
.d-only{display:none}
.menu-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding:0 10px;border:2px solid var(--navy);border-radius:12px;background:#fff;color:var(--navy);font-weight:600;font-size:16px}
.menu-btn svg{width:20px;height:20px}
@media (max-width:359px){.brand>span{display:none}} /* the mark alone, so Inquire and Menu still fit at 320 */
@media (min-width:1024px){
  .brand{font-size:23px}
  .brand img{width:32px;height:32px}
  .links{display:flex;gap:32px;margin-right:32px}
  .links a{position:relative;padding:12px 0;color:var(--navy);font-weight:600;font-size:16px;text-decoration:none}
  .links a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .24s var(--ease)}
  .links a.on::after{transform:scaleX(1)}
  /* About sits beside the form: while someone is typing there, it is not where they are */
  html:has(#form:focus-within) .links a[href="#about"]::after{transform:scaleX(0)}
  .bar-cta{min-height:44px;padding:0 20px}
  .d-only{display:inline}.m-only{display:none}
  .bar .menu-btn{display:none}
}

/* menu sheet: native dialog, full height, drops 12px and fades in */
.sheet{inset:0;width:100%;height:100%;max-width:100%;max-height:100%;margin:0;padding:0;border:0;background:#fff;color:var(--ink);overflow-y:auto;opacity:0;transform:translateY(-12px);transition:opacity .28s var(--ease),transform .28s var(--ease),overlay .28s allow-discrete,display .28s allow-discrete}
.sheet[open]{opacity:1;transform:none}
@starting-style{.sheet[open]{opacity:0;transform:translateY(-12px)}}
.sheet::backdrop{background:transparent}
/* the top row repeats the bar: full-width divider, same height including it */
.sheet-top{width:auto;height:calc(var(--bar) + 1px);padding-inline:var(--gut);border-bottom:1px solid var(--line)}
.sheet-body{width:min(100% - 2*var(--gut),var(--max));margin:8px auto 32px}
.sheet nav a{display:flex;align-items:center;min-height:56px;border-bottom:1px solid var(--line);color:var(--navy);font-size:28px;font-weight:700;text-decoration:none}
.sheet-body .btn{margin-top:12px}
.sheet-body .btn.red.wide{margin-top:28px}
.sheet-contact{margin-top:24px;color:var(--muted);font-size:16px;line-height:1.8}
.sheet-contact a{display:inline-flex;align-items:center;min-height:44px;color:var(--teal-ink)}

/* photo plates and the spatial-photo contract (spatial.js owns the canvas); before the sections so their own radii win */
.plate{margin:0;border-radius:var(--rp)}
.spatial{position:relative;overflow:hidden}
/* 1.10 overscan = the travel room spatial.js has for the sweep (OVER there must match) */
.spatial>img{width:100%;height:100%;object-fit:cover;transform:scale(1.1)}
.spatial>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* opacity, not visibility: the opaque canvas covers it either way, and screen readers keep the alt */
.spatial.is-live>img{opacity:0}
.spatial>.seal{z-index:1}
.ph{position:relative;display:block;width:100%;padding:0;border:0;border-radius:var(--rp);overflow:hidden;background:var(--line);cursor:zoom-in}
.ph img{width:100%;height:100%;object-fit:cover}

/* hero */
.hero{position:relative;isolation:isolate;overflow-x:clip;display:grid;grid-template-areas:"h" "lead" "doors" "media" "trust";padding:20px var(--gut) 0}
.hero::before{content:"";position:absolute;z-index:-1;right:-200px;top:0;width:min(720px,100%);height:180px;background:var(--plx) no-repeat 0 0/720px 480px;-webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent);pointer-events:none}
.hero-copy{display:contents}
.hero h1{grid-area:h;font-size:clamp(44px,12.5vw,104px);font-weight:800;line-height:.92;letter-spacing:-.02em}
.hero h1 span{display:block;white-space:nowrap}
.hero .lead{grid-area:lead;margin-top:14px}
.doors{grid-area:doors;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}
.door{display:flex;align-items:center;gap:8px;min-height:48px;padding:6px 10px 6px 8px;border-radius:12px;color:#fff;text-decoration:none;font-size:15px;font-weight:600;line-height:1.15;transition:background-color .2s var(--ease),transform .18s var(--ease)}
.door.red{background:var(--red)}
.door.navy{background:var(--navy)}
.door svg{flex:none;width:30px;height:30px}
.door-s{display:none}
.hero-media{grid-area:media;margin-top:20px}
.hero-plate{height:clamp(400px,113vw,600px);background:#52493e} /* the photo's mean tone until it paints */
.hero-plate img{object-position:63% 40%}
.hero-media .cap{margin-top:10px}
.trust{grid-area:trust;margin-top:6px;font-size:14px;font-weight:500;color:var(--muted)}
@media (min-width:1024px){
  .hero{grid-template-columns:minmax(0,1fr) 46vw;grid-template-areas:"copy media";column-gap:clamp(40px,5vw,80px);padding:24px 0 0 var(--edge-x)}
  .hero::before{left:calc(var(--edge-x) - 64px);right:auto;top:24px;width:720px;height:480px;-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
  .hero-copy{display:flex;flex-direction:column;justify-content:center;grid-area:copy;padding-bottom:32px}
  .hero h1{font-size:clamp(56px,6.6vw,104px)}
  .hero .lead{margin-top:24px}
  .doors{grid-template-columns:1fr;grid-auto-rows:1fr;gap:12px;margin-top:36px;max-width:520px}
  /* align-content: the shorter door (equal heights via 1fr rows) keeps its title-to-subline gap instead of stretching it */
  .door{display:grid;grid-template-columns:44px 1fr;grid-template-areas:"g t" "g s";align-content:center;column-gap:16px;row-gap:2px;min-height:78px;padding:14px 20px 14px 16px}
  .door svg{grid-area:g;width:44px;height:44px;align-self:center}
  .door-t{grid-area:t;font-size:20px;font-weight:700}
  .door-s{grid-area:s;display:block;font-size:15px;font-weight:400;line-height:1.35}
  .trust{margin-top:28px;max-width:440px}
  .hero-media{margin:0}
  /* 152 = bar + 24 above the plate, and the caption line plus about 24 below it, so the caption clears the fold (down to ~550 px windows) */
  .hero-plate{height:clamp(400px,calc(100svh - 152px),900px);border-radius:18px 0 0 18px}
  .hero-plate img{object-position:58% 50%} /* centred vertically: the canvas swap lands on the same device pixel */
}
/* short, wide windows (the plate under ~0.8:1) would crop the kiosk's header: aim higher there */
@media (min-width:1024px) and (min-aspect-ratio:2/1){.hero-plate img{object-position:58% 35%}}

/* status seals: quarter circles from their posts */
.seal{--sx:9px;position:absolute;top:0;right:0;width:var(--seal);height:var(--seal);border-bottom-left-radius:100%;padding:10px var(--sx) 0 0;text-align:right;font-size:14px;font-weight:700;line-height:1.05;pointer-events:none}
/* top-left, for a photo whose top-right corner holds a face */
.seal.tl{right:auto;left:0;border-radius:0 0 100% 0;padding-right:0;padding-left:var(--sx);text-align:left}
.seal.red{background:var(--red);color:#fff}
.seal.navy{background:var(--navy);color:#fff}
.seal.yellow{background:var(--yellow);color:var(--navy)}
@media (min-width:768px){.seal{--sx:11px;padding-top:12px}}

/* what we build: their collage grid with 2px red dividers */
.build{background:var(--mist);padding-block:var(--pad)}
.collage{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--red)}
.cell{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 12px 18px;border:0;border-radius:0;background:var(--mist);color:var(--ink);text-align:left;font:inherit}
button.cell{cursor:zoom-in}
button.cell:focus-visible{outline-offset:-5px}
.cell .ph{aspect-ratio:4/3;margin-bottom:8px;border-radius:14px;cursor:inherit}
.cell .ph img{transition:transform .28s var(--ease)}
.cell-title,.cell-cta{grid-column:1/-1}
.cell-title{padding:0 0 28px;gap:14px}
.lbl{font-size:18px;font-weight:700;line-height:1.15;color:var(--navy)}
.ln{font-size:15px;line-height:1.4;color:var(--muted)}
.cell-laser{background:var(--navy);color:#fff;gap:10px;justify-content:center}
.cell-laser .lbl{color:#fff}
.cell-laser p:not(.lbl){font-size:15px;line-height:1.45}
.cell-laser .text-link{color:#fff}
.cell-cta{gap:16px;padding:28px 12px 4px;justify-content:center}
@media (hover:hover) and (pointer:fine){button.cell:hover .ph img{transform:scale(1.03)}}
@media (min-width:1024px){
  .collage{grid-template-columns:repeat(4,1fr)}
  .cell{padding:24px}
  /* the title spans the top at full H2 size, as on mobile; the CTA closes the last row */
  .cell-title{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:48px;padding:0 0 40px}
  .cell-title .lead{max-width:380px}
  .cell-cta{grid-column:span 2}
  .lbl{font-size:22px}
  .cell-cta{padding:24px}
}

/* thesis help */
.thesis{position:relative;isolation:isolate;overflow:clip;padding-block:var(--pad)}
.thesis-grid{display:grid;grid-template-areas:"h" "lead" "online" "contract" "offer" "actions" "hand" "cap"}
.t-media{display:contents}
.thesis h2{grid-area:h}
.t-lead{grid-area:lead;margin-top:18px}
.t-online{grid-area:online;margin-top:14px;color:var(--muted)}
.actions{grid-area:actions;display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.t-contract{grid-area:contract;margin-top:28px;aspect-ratio:816/450}
.t-hand{grid-area:hand;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.t-hand .ph{aspect-ratio:609/677}
/* kept under a third of the card so it clears the client's head; too small to read below 360 */
.t-hand .seal{--seal:48px;--sx:8px;padding-top:8px;font-size:11px}
@media (max-width:359px){.t-hand .seal{display:none}}
@media (min-width:768px){.t-hand .seal{--seal:72px;--sx:11px;padding-top:12px;font-size:14px}}
.t-cap{grid-area:cap;margin-top:28px}
/* the free first ten minutes, beside their own poster (it opens in the lightbox) */
.offer{grid-area:offer;display:flex;align-items:center;gap:16px;margin-top:24px}
.offer .ph{flex:none;width:92px;aspect-ratio:320/453;border-radius:8px;box-shadow:0 0 0 1px var(--line),0 14px 28px -14px rgba(13,60,105,.45)}
.badge{display:inline-block;padding:6px 12px 4px;border-radius:8px;background:var(--yellow);color:var(--navy);font-size:18px;font-weight:700;line-height:1.2;text-wrap:balance}
.fine{margin-top:8px;font-size:14px;line-height:1.4;color:var(--muted);text-wrap:pretty}
@media (min-width:1024px){
  .thesis-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,5vw,80px);grid-template-rows:1fr auto auto auto auto auto 1fr;grid-template-areas:". media" "h media" "lead media" "online media" "offer media" "actions media" ". media"}
  .offer{gap:20px;margin-top:28px}
  .offer .ph{width:120px}
  .badge{font-size:20px}
  .t-media{display:block;grid-area:media;position:relative}
  .t-contract{margin:0 0 0 auto;width:min(100%,560px)} /* the 816 px source stays sharp on retina */
  /* a clean gap, not an overlap: both bottom corners of the selfie hold a face down to the edge.
     Half the float keeps the gap open (about 20 px at its narrowest) while the plates still drift */
  .t-hand{display:flex;align-items:flex-start;gap:28px;margin-top:32px;position:relative;z-index:1}
  .t-hand .float{--fk:.5}
  .t-hand .float.slow{--fk:.25}
  .t-hand .ph{width:min(46%,290px);box-shadow:var(--lift)}
  .t-hand .ph+.ph{margin-top:20px}
  .t-cap{margin-top:40px}
}

/* plexus behind the thesis and inquiry headings */
.plx{position:relative}
/* behind the heading and the space above it, never under body text (the sections clip it at their top edge) */
.plx::before{content:"";position:absolute;z-index:-1;left:-48px;top:-120px;width:600px;height:260px;background:var(--plx) no-repeat 0 0/600px 400px;-webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent);mask-image:radial-gradient(closest-side,#000 40%,transparent);pointer-events:none}
@media (max-width:767px){.plx::before{left:-24px;width:420px;height:200px;background-size:420px 280px}}

/* Project B.E.A.T.R.I.C.E.: navy band, diagonal top edge from their "Project done!" posts */
.beatrice{background:var(--navy);padding-block:calc(var(--pad) + 2vw) var(--pad);clip-path:polygon(0 0,100% 6vw,100% 100%,0 100%)}
.b-head{display:flex;align-items:center;gap:clamp(16px,2.5vw,32px)}
.b-mark{flex:none;display:grid;place-items:center;width:84px;aspect-ratio:1;border-radius:50%;background:#fff}
.b-mark img{width:74%;height:auto}
.b-sub{margin-top:10px;font-size:15px;line-height:1.45;max-width:58ch}
.b-wide{margin-top:clamp(28px,4vw,48px);aspect-ratio:4/3;background:#0a3058}
.b-wide img{object-position:56% 50%}
.b-body{display:grid;grid-template-areas:"pow" "copy"}
/* no overlap on phones: the 4:3 crop puts the crouching woman's face on the plate's bottom edge */
.b-pow{grid-area:pow;width:82%;margin:16px 0 0 auto;position:relative;z-index:1}
.b-pow .ph{aspect-ratio:3/2;box-shadow:var(--lift)}
.b-pow .ph img{object-position:36% 50%}
.b-pow .cap{margin-top:10px}
.b-copy{grid-area:copy;margin-top:32px;max-width:560px}
.feats{margin:20px 0 28px;display:grid;gap:10px}
.feats li{position:relative;padding-left:28px;font-weight:600;font-size:18px;line-height:1.35}
.feats li::before{content:"";position:absolute;left:0;top:.28em;width:14px;height:14px;border-radius:50%;background:var(--teal)}
@media (min-width:1024px){
  .b-mark{width:128px}
  .b-wide{aspect-ratio:1920/806;max-height:520px}
  /* her face spans 51-60% of the strip's width: a column under 40% keeps the overlapping corner clear of it */
  .b-body{grid-template-columns:minmax(0,1fr) min(37%,460px);grid-template-areas:"copy pow";column-gap:clamp(40px,6vw,96px)}
  .b-pow{width:auto;margin:-80px 0 0} /* the float rides +-40 px: a real overlap (about 45-70 px while in view) on a jacket and a bag */
  .b-copy{margin-top:48px}
}

/* on-going projects: red ground, solar-2 opener, filmstrip */
.ongoing{background:var(--red);padding-block:var(--pad)}
.og-head{display:grid;gap:28px}
.og-plate{aspect-ratio:1080/710}
.og-copy .lead{margin-top:14px}
.film{display:flex;flex-direction:column;margin-top:clamp(40px,6vw,72px)}
.film-nav{order:2;display:flex;justify-content:flex-end;gap:12px;margin-top:4px}
.arr{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--navy);transition:opacity .2s var(--ease),transform .18s var(--ease)}
.arr svg{width:22px;height:22px}
.arr:disabled{opacity:.4;cursor:default;transform:none}
.track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:4px var(--edge-x) 16px;scroll-padding-inline:var(--edge-x);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.6) transparent}
.track:focus-visible{outline-offset:-3px}
.fc{flex:none;width:min-content;scroll-snap-align:start}
.fc-media{position:relative;height:260px;border-radius:14px;overflow:hidden;background:#a31217}
.fc-open{position:relative;display:block;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.fc-open img{height:100%;width:auto;max-width:none;object-fit:cover}
/* the poster is a lazy <img> under the video (a poster attribute would load eagerly) */
.fc-open video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fc-cap{margin-top:10px;font-size:15px;line-height:1.4}
.pause{position:absolute;left:10px;bottom:10px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(13,60,105,.85);color:#fff}
.pause svg{width:20px;height:20px}
.pause .i-play,.pause.paused .i-pause{display:none}
.pause.paused .i-play{display:block}
.fc-end a{display:flex;align-items:center;justify-content:center;width:220px;height:260px;padding:24px;border:2px solid #fff;border-radius:14px;color:#fff;font-size:22px;font-weight:700;line-height:1.2;text-align:center;text-decoration:none;transition:background-color .2s var(--ease),color .2s var(--ease)}
@media (min-width:1024px){
  .og-head{grid-template-columns:minmax(0,720px) minmax(0,1fr);column-gap:clamp(40px,5vw,72px);align-items:center}
  .og-copy{grid-column:2;grid-row:1}
  .og-plate{grid-column:1;grid-row:1}
  .film-nav{order:0;margin:0 auto 16px}
  .fc-media,.fc-end a{height:320px}
}

/* how can we help? form + about */
.inquire{position:relative;isolation:isolate;overflow:clip;padding-block:var(--pad)}
.inq-grid{display:grid;grid-template-areas:"head" "recap" "form" "about";row-gap:24px}
.inq-head{grid-area:head}
.inq-head .lead{margin-top:16px;max-width:36ch}
.recap{grid-area:recap;font-size:15px;font-weight:500;color:var(--muted)}
.form{grid-area:form}
.about{grid-area:about;margin-top:32px}
@media (min-width:1024px){
  .inq-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto 1fr;grid-template-areas:"head form" "about form";column-gap:clamp(48px,6vw,104px)}
  .recap{display:none}
  .about{margin-top:40px}
}
/* the about column runs ~450 px longer than the form: the form rides beside it instead of leaving a blank half.
   site.js sets .ride only while the whole form fits under the bar (a path's chips add up to 270 px) */
@media (min-width:1024px){.form{align-self:start}.form.ride{position:sticky;top:calc(var(--bar) + 24px)}}
.form fieldset{min-width:0;margin:0 0 24px;padding:0;border:0}
.form legend{padding:0;margin-bottom:12px;font-size:18px;font-weight:700;color:var(--navy)}
.tcards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tcard{display:flex;align-items:center;gap:10px;min-height:64px;padding:12px;border:1.5px solid var(--edge);border-radius:12px;background:#fff;color:var(--navy);font-size:16px;font-weight:600;line-height:1.2;cursor:pointer;transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.tcard input{flex:none;appearance:none;width:20px;height:20px;margin:0;border:2px solid var(--edge);border-radius:50%;background:#fff;transition:border-width .18s var(--ease),border-color .18s var(--ease)}
.tcard input:checked{border:6px solid var(--red)}
.tcard:has(input:checked){border-color:var(--red);background:#fdf2f2;box-shadow:inset 0 0 0 1px var(--red)}
.tcard input:focus-visible{outline:none}
.tcard:has(input:focus-visible){outline:3px solid var(--navy);outline-offset:2px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1.5px solid var(--edge);border-radius:10px;background:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease)}
.chip input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.chip input:focus-visible+span{outline:3px solid var(--navy);outline-offset:2px}
.units{margin:16px 0 0;max-width:220px}
.free{display:flex;align-items:center;gap:10px;min-height:44px;margin-top:12px;font-size:15px;font-weight:600;cursor:pointer}
.free input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--red)}
.row{display:grid;gap:0 16px}
@media (min-width:600px){.row{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:15px;font-weight:600}
.opt{font-weight:400;color:var(--muted)}
.field input,.field textarea{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--edge);border-radius:12px;background:var(--mist);color:var(--ink);font:400 17px/1.4 var(--font)}
.field textarea{min-height:150px;resize:vertical;line-height:1.5}
.field ::placeholder{color:var(--muted);opacity:1}
.field [aria-invalid=true]{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.err{color:var(--red);font-size:14px;font-weight:600}
.err:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
/* phones: button pairs go full width like the doors and the menu sheet, instead of ragged rows */
@media (max-width:599px){.actions .btn,.form-actions .btn{flex:1 1 100%}}
.form-status{margin-top:14px;font-size:15px;font-weight:600}
.form-status.bad{color:var(--red)}
.form-status a{color:inherit}
.sent{grid-area:form;align-self:start;padding:28px;border-left:4px solid var(--red);background:var(--mist);border-radius:0 18px 18px 0}
.sent p+p{margin-top:8px}
.sent a{color:var(--teal-ink);font-weight:600}
.about h3{margin-bottom:12px}
.about-intro{font-size:19px;line-height:1.5}
.about blockquote{margin:24px 0 0;padding-left:18px;border-left:3px solid var(--teal)}
.about blockquote p{font-size:20px;font-weight:600;line-height:1.35;color:var(--navy)}
.about blockquote footer{margin-top:8px;font-size:14px;font-weight:500;color:var(--muted)}
/* milestone rail: the logo's red trace with teal nodes */
.rail{position:relative;margin:32px 0;padding-left:34px}
.rail::before{content:"";position:absolute;left:7px;top:12px;bottom:14px;width:3px;border-radius:3px;background:var(--red)}
.rail li{position:relative;display:grid;grid-template-columns:5.4em 1fr;gap:8px;padding:5px 0;font-size:16px;line-height:1.45}
.rail li::before{content:"";position:absolute;left:-34px;top:8px;width:17px;height:17px;border-radius:50%;background:var(--teal)}
.rail time{font-weight:700;color:var(--navy)}
/* their own photos on the dated rail, under the entry like a post; each opens its set in the lightbox */
.rail .ph{grid-column:2;width:112px;height:84px;margin:4px 0 6px;border-radius:10px}
.contact{display:grid;font-size:16px}
@media (max-width:767px){.about .contact{display:none}} /* the footer repeats it a screen later */
.contact a{color:var(--teal-ink);font-weight:600;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center;width:max-content}
.contact-links{display:flex;gap:20px}

/* footer: navy band, then the thin red strip from their post templates */
.foot{background:var(--navy)}
.foot-in{display:grid;gap:28px;padding-block:56px}
.foot-brand{display:flex;align-items:center;gap:16px}
.disc{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#fff}
.disc img{width:46px;height:46px}
.foot-tag{font-size:22px;font-weight:700}
.foot-links{display:grid;gap:2px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-underline-offset:3px}
.foot-addr{font-size:15px;line-height:1.7}
.strip{background:var(--red)}
.strip-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding-block:12px;font-size:14px;font-weight:600}
@media (min-width:768px){.foot-in{grid-template-columns:1.3fr 1fr 1.2fr;align-items:start}}

/* lightbox */
.lb{inset:0;width:100%;height:100%;max-width:100%;max-height:100%;margin:0;padding:0;border:0;background:transparent;color:#fff;overflow-y:auto} /* a short phone scrolls to the actions instead of clipping them */
.lb[open]{animation:lb-in .24s var(--ease)}
@keyframes lb-in{from{opacity:0}}
.lb::backdrop{background:rgba(13,60,105,.96)}
.lb-in{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:100%;padding:64px 12px 16px}
.lb-x{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:rgba(13,60,105,.9);box-shadow:0 0 0 1px rgba(255,255,255,.5);color:#fff}
.lb-x svg,.lb-nav svg{width:24px;height:24px}
.lb-stage{position:relative;display:flex;justify-content:center;width:100%;touch-action:pan-y pinch-zoom}
.lb-media{position:relative;border-radius:14px;overflow:hidden;background:#0a3058}
/* at most the photo's own size: the Facebook sources show JPEG blocks when enlarged */
.lb-media img,.lb-media video{width:min(92vw,calc(var(--w)*1px),calc(min(84vh,100dvh - 230px)*var(--r)));height:auto;aspect-ratio:var(--r)}
@media (max-width:600px){.lb-media img,.lb-media video{width:min(92vw,calc(var(--w)*1px),calc((100dvh - 320px)*var(--r)))}} /* room for a 3-line caption and wrapped actions */
.lb-media .seal:empty{display:none}
.lb-nav{position:absolute;top:50%;translate:0 -50%;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:#fff;color:var(--navy);transition:opacity .2s var(--ease)}
.lb-prev{left:4px}.lb-next{right:4px}
.lb-nav:disabled{opacity:0;pointer-events:none}
.lb-info{max-width:720px;text-align:center}
.lb-cap{font-size:17px;font-weight:600;line-height:1.4;text-wrap:balance}
.lb-meta{margin-top:4px;font-size:14px;opacity:.85}
.lb-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px}
@media (min-width:1024px){.lb-prev{left:24px}.lb-next{right:24px}}

.toast{position:fixed;left:50%;bottom:24px;z-index:60;translate:-50% 8px;max-width:calc(100% - 32px);padding:12px 18px;border-radius:12px;background:var(--navy);color:#fff;font-weight:600;opacity:0;pointer-events:none;transition:opacity .22s var(--ease),translate .22s var(--ease)}
.toast.on{opacity:1;translate:-50% 0}

/* Apple-style depth, CSS only: in-frame drift, floating plates, the non-live spatial push-in */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .drift img{scale:1.05;animation:drift linear both;animation-timeline:view()}
    .float{--f:calc(var(--fk,1)*16px);animation:float linear both;animation-timeline:view()}
    .float.slow{--fk:.5}
    .spatial:not(.is-live)>img{animation:push linear both;animation-timeline:view();animation-range:cover 50% cover 100%}
    @media (min-width:1024px){.float{--f:calc(var(--fk,1)*40px)}}
  }
}
@keyframes drift{from{translate:0 -2%}to{translate:0 2%}} /* inside the 2.5% the 1.05 scale adds: no edge shows, no face is cropped */
@keyframes float{from{translate:0 var(--f)}to{translate:0 calc(var(--f)*-1)}}
/* on transform, as spatial.js reads it back at the swap; same curve as its camera: 1.00 to 1.05 past mid-view */
@keyframes push{from{transform:scale(1.1)}to{transform:scale(1.155)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}