/* =================================================================
   Home page only. Seven sections from the approved landing plan:
   hero film, track record, why self storage (chapters), why Newcoast
   (panels), film slot, investment focus (site plan), portfolio map,
   closer. Motion uses transform and opacity only; every effect has a
   still version under prefers-reduced-motion and without JS.
   ================================================================= */

/* ---------- 1 Hero film: stays put while the page slides up over it ---------- */
.film{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;background:var(--bg);isolation:isolate}
.film-media{position:absolute;inset:0;z-index:-1}
.film-media video{width:100%;height:100%;object-fit:cover}
.film-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(180deg,rgba(20,19,17,.8) 0,rgba(20,19,17,.6) 84px,transparent 220px),
  linear-gradient(0deg,rgba(20,19,17,.92) 0%,rgba(20,19,17,.82) 30%,rgba(20,19,17,.55) 50%,transparent 72%),
  linear-gradient(90deg,rgba(20,19,17,.55) 0%,rgba(20,19,17,.25) 45%,transparent 70%)}
@media (max-width:760px){.film-media::before{background:
  linear-gradient(180deg,rgba(20,19,17,.8) 0,rgba(20,19,17,.6) 72px,transparent 200px),
  linear-gradient(0deg,rgba(20,19,17,.94) 0%,rgba(20,19,17,.84) 45%,rgba(20,19,17,.6) 65%,transparent 88%)}}
[data-review] .film-media.ask{position:absolute;outline-offset:-6px}
[data-review] .film-media.ask::after{top:auto;bottom:24px;left:auto;right:84px}
.film-copy{position:absolute;inset-inline:0;bottom:clamp(48px,10vh,112px);display:grid;gap:22px;justify-items:start;will-change:transform,opacity}
.film-copy .label{color:var(--fg-2)}
.film-copy h1{font-size:var(--t-hero);max-width:16ch}
.film-lede{max-width:52ch;font-size:var(--t-lede);line-height:1.5;color:color-mix(in srgb,var(--fg) 86%,transparent)}
.film-copy .btn{margin-top:6px}


.film-stage{position:absolute;inset:0;overflow:hidden;isolation:isolate}
.film-plan{display:none}

/* Pinned hero (motion on, tall enough screen): blueprint first, then the film.
   The section is four screens tall; the stage holds for three, and the page
   slides up over the film on the last. */
.film.pin{position:relative;height:400svh;margin-bottom:-100svh;min-height:0;overflow:visible}
.film.pin .film-stage{position:sticky;top:0;height:100svh;min-height:560px}
.film.pin .film-plan{display:block;position:absolute;inset:0;z-index:0;opacity:calc(1 - var(--fo,0));background-color:#18231f;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.4px);background-size:24px 24px}
.film.pin .film-media video{transform:scale(calc(1.14 - .14 * var(--fo,0)))}
.fp-svg{position:absolute;inset:0;width:100%;height:100%}
.fp-svg path,.fp-svg circle{fill:none;stroke:#E7EEE9;stroke-width:var(--sw,1.2);stroke-opacity:.8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--pd,1))}
.fp-svg .t,.fp-svg .h{stroke-opacity:.42;stroke-width:calc(var(--sw,1.2) * .7)}
.fp-svg .s{stroke-opacity:calc(.35 * var(--zs,0));stroke-width:calc(var(--sw,1.2) * .6);stroke-dasharray:none}
.fp-svg .d{stroke-opacity:.7;stroke-width:calc(var(--sw,1.2) * 1.4)}
.fp-svg .rd{stroke-opacity:.5}
.fp-svg .c{stroke-dasharray:.004 .006;stroke-dashoffset:0;opacity:var(--pd,1)}
.fp-svg .tc{stroke-opacity:.55}
.fp-svg .cm-body{fill:#D5DBD8;fill-opacity:calc(.12 + .78 * var(--zs,0));stroke-opacity:.9;stroke-width:calc(var(--sw,1.2) * .8)}
.fp-svg .cm-mir{fill:#D5DBD8;fill-opacity:calc(.12 + .78 * var(--zs,0));stroke-opacity:.8;stroke-width:calc(var(--sw,1.2) * .6)}
.fp-svg .cm-glass{fill:#141b19;fill-opacity:calc(.9 * var(--zs,0));stroke-opacity:.7;stroke-width:calc(var(--sw,1.2) * .6)}
.fp-svg .cm-roof{fill:#C4CBC8;fill-opacity:calc(.9 * var(--zs,0));stroke-opacity:.6;stroke-width:calc(var(--sw,1.2) * .5)}
.fp-svg .cm-ln{stroke:#8E9894;stroke-opacity:.8;stroke-width:calc(var(--sw,1.2) * .45)}
.fp-svg .cm-lt{stroke-opacity:.7;stroke-width:calc(var(--sw,1.2) * .6)}
.fp-svg .g{stroke-width:calc(var(--sw,1.2) * 2.4)}
.fp-lb{opacity:calc(var(--pd,1) * (1 - var(--zl,0)))}
.fp-lb text{fill:#E7EEE9;font:500 13px var(--mono);letter-spacing:.14em}
.fp-lb .v{font-size:5px;letter-spacing:.2em}
.fp-lb .sm{font-size:11px}
/* The copy keeps a dark wash behind it over the plan too. */
.film.pin .film-plan::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(20,26,23,.82) 0%,rgba(20,26,23,.55) 38%,transparent 62%),linear-gradient(0deg,rgba(20,26,23,.6) 0%,transparent 45%)}
@media (max-width:760px){.film.pin .film-plan::after{background:linear-gradient(0deg,rgba(20,26,23,.92) 0%,rgba(20,26,23,.75) 45%,transparent 80%)}}

/* The rest of the page is a sheet that rises over the film. */
.curtain{position:relative;z-index:2;background:var(--bg);border-radius:28px 28px 0 0;box-shadow:0 -30px 80px rgba(20,26,23,.28)}
.curtain>.chapter:first-child{border-radius:28px 28px 0 0}
.home footer{position:relative;z-index:2}

/* ---------- 2 Track record ---------- */
.stats h2{font-size:var(--t-h2);max-width:18ch;margin-top:22px}
.stat-groups{display:grid;gap:clamp(48px,6vw,80px);margin-top:clamp(56px,7vw,96px)}
.stat-group>h3{color:var(--fg-2);margin-bottom:22px}
.stat-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px clamp(20px,3vw,40px)}
.stat-list li{border-top:1px solid var(--line);padding-top:20px;display:grid;gap:10px}
.stat-list .v{font:400 var(--t-stat)/1 var(--display);letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.stat-list .l{color:var(--fg-2);max-width:26ch}
@media (max-width:720px){.stat-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 3 Why self storage: chapters ----------
   Default (no JS, phones, reduced motion): four stacked cards.
   .pin (wide screens with motion): the stage holds still and both
   sides change together as you scroll. */
.why .chapter-head{margin-bottom:clamp(40px,5vw,72px)}
.chapters{position:relative}
.skip-sec{position:absolute;left:-999px;top:0;z-index:5;padding:10px 14px;background:var(--accent);color:var(--bg);font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;border-radius:var(--r-ctl)}
.skip-sec:focus{left:var(--gutter)}
.ch-stage{display:grid;gap:clamp(48px,7vw,80px)}
.ch{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,80px);align-items:center}
.ch-copy{display:grid;gap:16px;align-content:center}
.ch-n{color:var(--accent)}
.ch-copy h3{font:500 clamp(28px,1.2rem + 2vw,48px)/1.05 var(--display);letter-spacing:-.03em}
.ch-copy p{font-size:var(--t-lede);line-height:1.5}
.ch-copy p{color:var(--fg-2);max-width:46ch}
.ch-fig{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:var(--bg-3);box-shadow:0 0 0 1px var(--hair),0 0 0 6px var(--shell)}
.ch-fig img{width:100%;height:100%;object-fit:cover}
.ch-progress{display:none}
@media (max-width:767px){.ch{grid-template-columns:1fr}.ch-fig{order:-1}}

.chapters.pin{height:330svh}
.chapters.pin .ch-stage{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:1fr auto;gap:0 clamp(24px,5vw,80px);align-items:center;padding-block:96px 40px}
.chapters.pin .ch{display:contents}
/* One film runs through all four reasons: the drawing stays put while the copy cross-fades in place. */
.chapters.pin .ch-copy{grid-area:1/1;align-self:center;align-content:start;min-height:19rem;opacity:0;transition:opacity .45s var(--ease)}
.chapters.pin .ch.on .ch-copy{opacity:1;transition:opacity .6s var(--ease) .15s}
.chapters.pin .ch-fig{grid-area:1/2;max-height:calc(100svh - 220px);width:100%}
.chapters.pin .ch-progress{display:grid;grid-area:2/1/3/3;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:32px}
.ch-progress i{height:2px;background:var(--line);position:relative;overflow:hidden;border-radius:2px}
.ch-progress i::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(var(--p,0));transform-origin:left}

/* ---------- 4 Why Newcoast: panels ---------- */
.panels{display:flex;gap:12px;min-height:500px}
.panel{flex:1 1 0;min-width:0;display:flex;flex-direction:column;border-radius:20px;background:var(--bg);box-shadow:0 0 0 1px var(--hair);overflow:hidden;transition:flex-grow .8s var(--spring),background .5s var(--spring)}
.panel:hover{background:color-mix(in srgb,var(--bg) 60%,var(--bg-2))}
.panel.open{flex-grow:3.4;background:var(--bg)}
.panels.has-open .panel:not(.open){flex-grow:.4}
.panel h3{font:inherit}
.panel button{width:100%;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:18px 12px;padding:28px;text-align:left;align-items:start}
.panel button:focus-visible{outline-offset:-6px}
.pn-n{grid-column:1;color:var(--accent)}
.pn-t{grid-column:1;font:500 var(--t-h3)/1.12 var(--display);letter-spacing:-.025em}
.pm{grid-column:2;grid-row:1/3;width:40px;height:40px;border-radius:999px;box-shadow:0 0 0 1px var(--hair);position:relative;transition:transform .6s var(--spring),background .4s}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;margin:-.75px 0 0 -7px;background:var(--fg);border-radius:2px}
.pm::after{transform:rotate(90deg);transition:transform .6s var(--spring)}
.panel.open .pm::after{transform:rotate(0)}
.panel button:hover .pm{background:color-mix(in srgb,var(--fg) 8%,transparent)}
.panel .sum{padding:0 28px 28px;margin-top:auto;color:var(--fg-2);max-width:30ch}
.more-body{display:none;padding:8px 28px 28px;gap:28px;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start}
.panel.open .more-body{display:grid;animation:fade-up .7s var(--spring) both}
.panel.open .sum{display:none}
.mb-copy{display:grid;gap:16px;justify-items:start}
.mb-copy p{color:var(--fg-2);max-width:52ch}
.mb-fig{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--bg-3)}
.mb-fig img,.mb-fig video{width:100%;height:100%;object-fit:cover}
/* Closed neighbours turn into slim strips with the title on its side. */
.panels.has-open .panel:not(.open) button{writing-mode:vertical-rl;transform:rotate(180deg);height:100%;grid-template-columns:auto;grid-template-rows:auto 1fr auto;padding:28px 22px;justify-items:center}
.panels.has-open .panel:not(.open) .pn-t{font-size:clamp(17px,1rem + .3vw,20px)}
.panels.has-open .panel:not(.open) .pm{grid-column:1;grid-row:3}
.panels.has-open .panel:not(.open) .sum{display:none}
@keyframes fade-up{from{opacity:0;transform:translateY(16px)}}
@media (max-width:900px){
  .panels{flex-direction:column;min-height:0}
  .panels.has-open .panel:not(.open) button{writing-mode:horizontal-tb;transform:none;height:auto;grid-template-columns:1fr auto;grid-template-rows:auto auto;padding:28px;justify-items:stretch}
  .panels.has-open .panel:not(.open) .pn-t{font-size:var(--t-h3)}
  .panels.has-open .panel:not(.open) .pm{grid-column:2;grid-row:1/3}
  .panels.has-open .panel:not(.open) .sum{display:block}
  .more-body{grid-template-columns:1fr}
}

/* ---------- 4b Film slot: grows from a framed card to full width ---------- */
.slot-sec{background:var(--bg-2);padding-block:0 clamp(80px,10vw,140px)}
.slot{width:calc(100% - 2 * var(--gutter));max-width:var(--max);margin-inline:auto;transform:scale(calc(.82 + .18 * var(--g,1)));transform-origin:50% 0;border-radius:calc(28px - 18px * var(--g,1));overflow:hidden}
.slot-in{aspect-ratio:21/9;display:grid;place-content:center;justify-items:center;gap:12px;padding:24px;text-align:center;background:repeating-linear-gradient(135deg,var(--bg-3) 0 16px,var(--bg-4) 16px 32px)}
.slot-in .label{color:var(--accent)}
.slot-note{color:var(--fg-2);max-width:40ch}
@media (max-width:640px){.slot-in{aspect-ratio:4/5}}

/* ---------- 5 Investment focus: the site plan draws itself ---------- */
/* Investment focus: the Frankfort site in isometric, one building picked out, the four points turning over it. */
/* Less space above, so the heading sits clear of the bottom of the screen once the section is in view. */
.chapter.fx{padding-top:clamp(64px,7vw,104px)}
.fx-stage{position:relative;margin-top:28px;aspect-ratio:1200/620;max-width:100%}
.fx-art{position:absolute;inset:0;width:100%;height:100%}
.fx-art .i-lot{fill:var(--bg-2);stroke:none}
.fx-art .i-road{fill:none;stroke:var(--bg-4);stroke-width:10;stroke-linecap:round}
.fx-art .i-drive{fill:var(--bg-3);stroke:none}
.fx-art .i-pond{fill:var(--bg-3);stroke:var(--bg-4);stroke-width:1}
.fx-art .i-ctx{fill:var(--bg);stroke:var(--bg-4);stroke-width:1;stroke-linejoin:round}
.fx-art .i-ctx.f-long{fill:var(--bg-2)}.fx-art .i-ctx.f-end{fill:var(--bg-3)}.fx-art .i-ctx.f-ridge{fill:none}
.fx-art .i-house{fill:var(--bg);stroke:var(--bg-4);stroke-width:.8;stroke-linejoin:round}
.fx-art .i-house.w-long{fill:var(--bg-2)}.fx-art .i-house.w-end{fill:var(--bg-3)}.fx-art .i-house.r-back{fill:var(--bg-2)}
.fx-art .i-house.r-front{fill:var(--bg)}
.fx-art .i-win{fill:var(--bg-4);stroke:none;opacity:.75}.fx-art .i-door,.fx-art .i-gdoor{fill:var(--bg-3);stroke:var(--bg-4);stroke-width:.6}
.fx-art .i-chim{fill:var(--bg-2);stroke:var(--bg-4);stroke-width:.7}.fx-art .i-chim.w-end{fill:var(--bg-3)}
.fx-art .i-sh{fill:var(--fg);stroke:none;opacity:.05}
.fx-art .i-dw{fill:var(--bg-3);stroke:var(--bg-4);stroke-width:.6}
.fx-art .i-lane{fill:none;stroke:var(--bg);stroke-width:1;stroke-dasharray:8 10}
.fx-art .i-car{fill:var(--bg);stroke:var(--bg-4);stroke-width:.7;stroke-linejoin:round}.fx-art .i-car.w-long{fill:var(--bg-2)}.fx-art .i-car.w-end{fill:var(--bg-3)}
.fx-art .i-b{fill:var(--bg);stroke:var(--fg-2);stroke-width:.9;stroke-linejoin:round}
.fx-art .i-b.f-long{fill:var(--bg-2)}.fx-art .i-b.f-end{fill:var(--bg-3)}
.fx-art .i-b.f-ridge,.fx-art .i-b.f-door{fill:none;stroke-width:.6;opacity:.7}
.fx-art .i-hl{stroke:var(--accent);stroke-width:1;stroke-linejoin:round}
.fx-art .i-hl.f-top{fill:var(--accent-hi)}.fx-art .i-hl.f-long{fill:var(--accent)}.fx-art .i-hl.f-end{fill:#0F1714}
.fx-art .i-hl.f-ridge{fill:none;stroke:var(--bg-4);stroke-width:.7}
.fx-art .i-hl.f-door{fill:none;stroke:#FFFFFF;stroke-width:.8;opacity:.85}
.fx-art .i-van{fill:#FFFFFF;stroke:var(--fg-2);stroke-width:.8}
.fx-art .i-tree{fill:var(--bg-3);stroke:var(--bg-4);stroke-width:.8}.fx-art .i-trunk{stroke:var(--bg-4);stroke-width:1.2}
.fx-art .fx-dot{fill:#FFFFFF;stroke:var(--accent);stroke-width:2}
/* The heading sits over the drawing's lower left, lifted clear of the bottom of the screen (Myles, round 3). */
.fx-h{position:absolute;left:0;bottom:clamp(72px,16%,170px);font-size:var(--t-h2);max-width:15ch;margin:0;text-shadow:0 0 22px var(--bg),0 0 10px var(--bg),0 0 4px var(--bg)}
.fx-ask{position:absolute;right:0;bottom:0}
/* The card glides from building to building on transform alone (no layout, cheap in Safari).
   --tx/--ty are the lit building's anchor in px, set by home.js; --shift keeps the card on screen. */
.fx-tick{--glide:1s cubic-bezier(.65,0,.35,1);position:absolute;left:0;top:0;transform:translate(calc(var(--tx,0px) - var(--shift,0px)),calc(var(--ty,0px) - 100%));transition:transform var(--glide);display:grid;justify-items:start}
.fx-pin{order:2;width:1px;height:clamp(40px,8vw,96px);background:var(--accent);transform:translateX(var(--shift,0px));transition:transform var(--glide)}
.fx-list{order:1;transform:translateX(-14px);padding:14px 16px;border-radius:12px;background:color-mix(in srgb,var(--bg) 96%,transparent);box-shadow:0 0 0 1px var(--hair),0 12px 30px -14px rgba(20,26,23,.35)}
.fx-list li{display:flex;gap:10px;align-items:baseline;font-size:15px;line-height:1.5;color:var(--fg)}
.fx-list .label{color:var(--fg-2)}
.fx-pause{order:0;justify-self:end;margin:0 0 6px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--bg);box-shadow:0 0 0 1px var(--hair);color:var(--fg)}
.fx-pause svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6}
.fx-pause .i-play{display:none;fill:currentColor;stroke:none}.fx-pause[aria-pressed="true"] .i-play{display:block}.fx-pause[aria-pressed="true"] .i-pause{display:none}
/* Rotating version: one point at a time in front, the neighbours fading above and below. */
.fx.rot .fx-list{position:relative;width:min(27rem,60vw);height:6.6em;overflow:hidden;padding:0 16px}
.fx.rot .fx-list li{position:absolute;left:16px;right:16px;top:50%;margin-top:-.8em;white-space:nowrap;transform:translateY(var(--y,0)) scale(var(--sc,1));transform-origin:left center;opacity:var(--op,0);font-size:18px;transition:transform .8s cubic-bezier(.65,0,.35,1),opacity .8s cubic-bezier(.65,0,.35,1)}
.fx.rot .fx-list .label{color:inherit}
@media (max-width:760px){
  .fx-stage{aspect-ratio:auto;display:grid}
  .fx-stage>*{grid-column:1}
  .fx-art{position:relative;grid-row:1;height:auto;aspect-ratio:1200/620;margin-inline:-16px;width:calc(100% + 32px)}
  .fx-tick{position:relative;left:auto;top:auto;transform:none;grid-row:2;margin-top:12px;justify-items:stretch}
  .fx-pin{display:none}
  .fx-list{transform:none}
  .fx.rot .fx-list{width:100%}
  .fx.rot .fx-list li{font-size:15.5px}
  .fx-h{position:relative;bottom:auto;grid-row:3;margin-top:24px;text-shadow:none}
  .fx-ask{position:relative;grid-row:4}
}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(48px,6vw,80px)}
.tiles li{display:grid;gap:12px;align-content:start;padding:22px;border-radius:14px;background:var(--bg);box-shadow:0 0 0 1px var(--hair)}
.t-l{color:var(--fg-2);font-size:15px;line-height:1.4}
.t-v{font:400 clamp(30px,1.4rem + 1.6vw,48px)/1 var(--display);letter-spacing:-.04em;color:var(--fg-2)}
.t-v:not(.on){font:500 var(--t-label)/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;padding-block:14px}
.t-v.on{color:var(--fg)}
.tiles .ask-tag{margin-left:0}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Motion version, switched on by script once the section is near. */
.js .bp.armed .tiles li{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .9s var(--spring)}
.js .bp.armed.drawn .tiles li{opacity:1;transform:none}
.bp.drawn .tiles li:nth-child(1){transition-delay:0.00s}.bp.drawn .tiles li:nth-child(2){transition-delay:0.12s}.bp.drawn .tiles li:nth-child(3){transition-delay:0.24s}.bp.drawn .tiles li:nth-child(4){transition-delay:0.36s}

/* ---------- 6 Portfolio map ---------- */
.map-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,72px);align-items:center}
.map-copy{display:grid;gap:22px;justify-items:start}
.map-copy h2{font-size:var(--t-h2);max-width:13ch}
.map-copy p:not(.label){color:var(--fg-2);font-size:var(--t-lede);line-height:1.5;max-width:38ch}
.map-hint{color:var(--accent)}
.usmap{width:100%;height:auto;overflow:visible}
.usmap .land path{fill:var(--bg-3);stroke:var(--bg);stroke-width:1}
.usmap .st{cursor:pointer;outline:none}
.usmap .st path{fill:var(--accent);stroke:var(--bg);stroke-width:1;transition:fill .3s var(--ease)}
.usmap .st circle{fill:var(--bg);stroke:var(--fg);stroke-width:1.2;pointer-events:none}
.usmap .st:hover path,.usmap .st:focus-visible path{fill:var(--accent-hi)}
.usmap .st:focus-visible path{stroke:var(--fg);stroke-width:3;paint-order:stroke}
.map-list{margin-top:20px;color:var(--fg-2)}
.map-list summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;font:500 var(--t-label)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.map-list ul{margin-top:12px;columns:2;column-gap:32px}
.map-list li{padding:6px 0;break-inside:avoid;font-size:15px}
@media (max-width:900px){.map-grid{grid-template-columns:1fr}.map-list ul{columns:1}}

/* Facility sheet: slides in from the side, or up from the bottom on phones. */
dialog.sheet{border:0;padding:0;margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:min(560px,100%);max-width:100%;background:var(--bg);color:var(--fg);box-shadow:-30px 0 80px rgba(20,26,23,.25);overscroll-behavior:contain}
dialog.sheet::backdrop{background:rgba(20,26,23,.6)}
dialog.sheet[open]{animation:sheet-in .6s var(--spring)}
@keyframes sheet-in{from{transform:translateX(48px);opacity:0}}
.sheet-in{padding:28px clamp(20px,4vw,36px) 48px;display:grid;gap:28px}
.sheet-head{display:flex;justify-content:space-between;gap:16px;align-items:start;position:sticky;top:-28px;padding-top:28px;margin-top:-28px;background:var(--bg);z-index:1}
.sheet-head .label{color:var(--accent)}
.sheet-head h2{font:500 var(--t-h3)/1.1 var(--display);letter-spacing:-.025em;margin-top:8px}
.x{flex:none;width:44px;height:44px;border-radius:999px;display:grid;place-items:center;box-shadow:0 0 0 1px var(--hair)}
.x:hover{background:color-mix(in srgb,var(--fg) 8%,transparent)}
.x svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.6;fill:none}
.facs{display:grid;gap:28px}
.facs.many{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
.fac{display:grid;gap:12px;align-content:start}
.fac figure{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--bg-3)}
.fac img{width:100%;height:100%;object-fit:cover}
.fac h3{font:500 20px/1.2 var(--display);letter-spacing:-.015em}
.facs.many .fac h3{font-size:17px}
.fac dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14px;color:var(--fg-2);font-variant-numeric:tabular-nums}
.fac dt{font:500 11px/1.9 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.fac dd{color:var(--fg)}
@media (max-width:640px){
  dialog.sheet{margin:auto 0 0;height:auto;max-height:88dvh;width:100%;border-radius:20px 20px 0 0}
  @keyframes sheet-in{from{transform:translateY(48px);opacity:0}}
  .facs.many{grid-template-columns:1fr}
}

/* ---------- 7 Closer ---------- */
.closer-l{color:var(--fg-2);font-size:var(--t-lede);max-width:44ch}

/* ---------- Reduced motion: everything still and complete ---------- */
@media (prefers-reduced-motion:reduce){
  .film{position:relative}
  .curtain{border-radius:0;box-shadow:none}
  .slot{transform:none;border-radius:10px}
  .panel,.panel .pm,.pm::after{transition:none}
  .panel.open .more-body,dialog.sheet[open]{animation:none}
}
.closer .core{background:var(--bg)}
.closer{padding-bottom:clamp(56px,7vw,96px)}

/* ---------- Why Newcoast, round 2: every tile keeps one height; opening a
   tile only widens it. Each tile carries a storage sketch. ---------- */
@media (min-width:901px){
  .panels{height:clamp(500px,62svh,580px);min-height:0}
  .panel{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}
  .panel>h3{grid-column:1/-1}
  .panel.open{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto minmax(0,1fr)}
  .panel.open .more-body{grid-column:1;grid-row:2;display:block;padding:0 28px 28px;overflow:auto}
  .panel.open .pn-fig{grid-column:2;grid-row:2;padding:0 28px 28px 0}
  .panels.has-open .panel:not(.open) .pn-fig{display:none}
  .panels.has-open .panel:not(.open)>h3{grid-row:1/-1;height:100%}
}
.pn-fig{min-height:0;padding:0 20px}
.pn-fig .sk-frame{aspect-ratio:auto;height:100%;min-height:180px;box-shadow:none;background:transparent;border-radius:12px}
.pn-fig .sketch{-webkit-mask-image:radial-gradient(ellipse 62% 64% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 62% 64% at 50% 50%,#000 55%,transparent 100%)}
.panel:not(.open) .pn-fig .sk-pin{display:none}
.panel.open .pn-fig .sk-frame{background:var(--bg-2)}
/* Plan-sheet drawings in the panels: dotted sheet ground, title strip, no edge fade. */
.pn-fig.sheet .sk-frame{background-color:var(--bg-2);background-image:radial-gradient(color-mix(in srgb,var(--fg) 16%,transparent) 1px,transparent 1.4px);background-size:22px 22px;box-shadow:0 0 0 1px var(--hair)}
.pn-fig.sheet .sketch{inset:5% 5% 16%;width:90%;height:79%;-webkit-mask-image:none;mask-image:none}
.pn-fig.sheet .sh-tb{font-size:10px}
.mb-copy p{max-width:46ch}
@media (max-width:900px){
  .panel{flex:none}
  .pn-fig .sk-frame{aspect-ratio:3/2;height:auto}
  .panels.has-open .panel:not(.open) .pn-fig{display:none}
}

/* Film section: the construction clip, full width. */
.slot-in{position:relative;margin:0;padding:0;background:var(--bg-3)}
.slot-in video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:640px){.slot-in{aspect-ratio:4/3}}

/* ---------- Why self storage, round 3: the heading stays in view, and chapter 01
   is the plan-to-facility film. Unpinned (phones, short screens, reduced
   motion, no JS) the drawing sits finished and the heading scrolls normally. */
.op-card{margin:0}
.op-frame{position:relative;aspect-ratio:4/3;border-radius:var(--r-shell);overflow:hidden;background-color:var(--bg-2);background-image:radial-gradient(color-mix(in srgb,var(--fg) 16%,transparent) 1px,transparent 1.4px);background-size:22px 22px;box-shadow:0 0 0 1px color-mix(in srgb,var(--fg) 40%,transparent),0 40px 80px -56px rgba(20,26,23,.5)}
.op-svg{position:absolute;inset:3% 3% 12%;width:94%;height:85%;-webkit-mask-image:none;mask-image:none;overflow:hidden}
/* Plan layers are drawn in the source sheet's pixels, scaled by 1/1.86 into feet. */
.op-px{--s:calc(var(--sw,.4) * 1.86)}
.op-px path,.op-px rect{fill:none;stroke:var(--accent);stroke-width:var(--s);stroke-opacity:.85}
.op-px .c{stroke-dasharray:.006 .008}
.op-px .h,.op-px .t,.op-px .dt{stroke-width:calc(var(--s) * .55);stroke-opacity:.5}
.op-px .rdp{fill:color-mix(in srgb,var(--accent) 10%,transparent);stroke-opacity:.6}
.op-px .rw,.op-px .rd,.op-px .sb{stroke-opacity:.5}
.op-px .pl{stroke-width:calc(var(--s) * 1.3)}
.op-px .pv{fill:color-mix(in srgb,var(--accent) 8%,transparent);stroke-opacity:.5}
.op-px .ap{fill:color-mix(in srgb,var(--accent) 20%,transparent)}
.op-px .nw{fill:var(--bg)}
.op-px .nw.t{fill:none}
.op-px .ex{fill:color-mix(in srgb,var(--accent) 6%,var(--bg))}
.op-px .ss{fill:var(--accent)}
.op-px .gt,.op-px .rw2{stroke-width:calc(var(--s) * 1.8)}
.op-px .ar,.op-px .fe{stroke-opacity:.55}
.op-px text{fill:var(--accent);font:500 12px/1 var(--mono);letter-spacing:.5px}
.op-px .nt.b{font-size:11px;letter-spacing:.8px}
.op-px .rdn{font-size:13px;letter-spacing:2px}
.op-px .fb{fill:var(--bg-2);stroke:none}
.op-px .ld,.op-px .dm{stroke-width:calc(var(--s) * .6);stroke-opacity:.8}
.op-px .na.nf{fill:var(--accent)}
.op-units path{stroke-width:calc(var(--s) * .5);stroke-opacity:.7}
.op-units .up{fill:color-mix(in srgb,var(--accent) 6%,var(--bg))}
.op-units .ug{fill:color-mix(in srgb,var(--accent) 12%,var(--bg))}
.op-units .ur{fill:color-mix(in srgb,var(--accent) 20%,var(--bg))}
.op-units .uc{fill:color-mix(in srgb,var(--accent) 30%,var(--bg))}
.op-units .uy{fill:color-mix(in srgb,var(--accent) 42%,var(--bg))}
.op-units .uo{fill:color-mix(in srgb,var(--accent) 56%,var(--bg))}
.op-units .uh{fill:color-mix(in srgb,var(--accent) 22%,var(--bg))}
.op-units .ub{fill:color-mix(in srgb,var(--accent) 72%,var(--bg))}
.op-units .hall{fill:var(--bg)}
.op-units .dp{fill:var(--accent)}
.op-units .dk{stroke-width:calc(var(--s) * 1.6)}
.op-units text{font-size:9px}
/* Outside the pinned film the drawing rests as the finished facility. */
.op-notes,.op-units{opacity:0}
/* The car and gate in the live layer. */
.op-live .car.ft{fill:color-mix(in srgb,var(--accent) 70%,var(--bg))}
.op-live .car.fl{fill:color-mix(in srgb,var(--accent) 85%,var(--bg))}
.op-live .car.fr{fill:var(--accent)}
.op-live .cab.ft{fill:color-mix(in srgb,var(--accent) 30%,var(--bg))}
.op-live .cab.fl,.op-live .cab.fr{fill:color-mix(in srgb,var(--accent) 45%,var(--bg))}
.op-live .car,.op-live .cab{stroke:var(--accent);stroke-width:.9}
.op-live .cw{fill:var(--fg);stroke:none}
.op-live .csh{fill:var(--fg);fill-opacity:.12;stroke:none}
.op-live .lamp{fill:var(--bg);stroke:none}
.op-live .gt{fill:var(--bg);fill-opacity:1}
.op-gap{fill:color-mix(in srgb,var(--fg) 72%,var(--bg));stroke:none}
.op-svg:not(.running) .op-car{display:none}
.op-svg.running .op-car-still{display:none}
.op-card .sh-tb{right:72px}
.op-card .sk-src{margin-top:14px}
.op-card .vid-btn.small{right:12px;bottom:10px}
.op-card.pin .op-px path:not(.c),.op-card.pin .op-px rect{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--pd,0))}
.op-card.pin .op-px rect{stroke-dasharray:none}
.op-card.pin .op-px .c,.op-card.pin .op-px text,.op-card.pin .op-px .fb,.op-card.pin .op-base .nw,.op-card.pin .op-px .pv{opacity:var(--pd,0)}
.op-card.pin .op-notes{opacity:var(--nt,0)}
.op-card.pin .op-units{opacity:var(--um,0)}
.op-card.pin .op-iso{opacity:var(--io,0)}
.op-card.pin .op-iso path:not(.c):not(.fn){stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--id,0))}
.op-card.pin .op-iso path{fill-opacity:var(--if,0)}
.op-card.pin .op-live{opacity:var(--lv,0)}
.ch-fig.op-fig{aspect-ratio:auto;overflow:visible;background:none;box-shadow:none;border-radius:0}

.chapters.pin{height:480svh}
.chapters.pin .ch-stage{grid-template-rows:auto minmax(0,1fr) auto;padding-block:92px 32px}
.chapters.pin .ch-head{grid-area:1/1/2/3;margin:0 0 clamp(36px,7vh,80px);align-items:end}
.chapters.pin .ch-head h2{font-size:clamp(30px,1rem + 2.2vw,52px);margin-top:20px;max-width:20ch}
.chapters.pin .ch-head p{font-size:16px}
.chapters.pin .ch-copy{grid-area:2/1}
.chapters.pin .ch-fig{grid-area:2/2}
.chapters.pin .ch-progress{grid-area:3/1/4/3;margin-top:20px}
.chapters.pin .sk-fig .sk-card,.chapters.pin .op-fig .op-card{width:min(100%,calc((100svh - 450px) * 4 / 3));margin-inline:auto}
.why .ch-head{margin-bottom:clamp(40px,5vw,72px)}
.why .ch-head h2{margin-top:20px}
.op-card .vid-btn[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.op-card .vid-btn{display:none}}

/* =================================================================
   Round 4 (Myles, feedback 2)
   ================================================================= */
/* Why Newcoast: each pillar reads title, description, then drawing. */
.panel .sum{margin-top:0;padding:0 28px 20px}
@media (min-width:901px){
  .panel{grid-template-rows:auto auto minmax(0,1fr)}
  .panel:not(.open) .pn-fig{padding-bottom:20px}
}

/* Why self storage: the heading sits closer to the chapters, the chapter titles step
   down a size so the two stay distinct, and the drawing moves in towards the copy. */
.chapters.pin .ch-head{margin-bottom:clamp(28px,4.5vh,52px)}
.ch-copy h3{font-size:clamp(22px,1rem + 1.1vw,34px);line-height:1.12}
.chapters.pin .ch-stage{column-gap:clamp(24px,3vw,48px)}
.chapters.pin .op-fig .op-card{margin-inline:0 auto}
.op-card .op-cap{text-align:center;max-width:none}

/* Portfolio snapshot: map and list share one box. */
.map-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.map-toggle{min-height:44px;padding:0 4px;font:500 var(--t-label)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:6px}
.map-toggle:hover{text-decoration-color:currentColor}
.map-toggle[hidden]{display:none}
.js .map-wrap{display:grid;align-items:center}
.js .map-wrap>*{grid-area:1/1}
.js .map-wrap:not(.as-list) .map-list{visibility:hidden}
.js .map-wrap.as-list .usmap{visibility:hidden}
.js .map-list{margin:0;padding:clamp(20px,3vw,40px);border-radius:16px;background:var(--bg);box-shadow:0 0 0 1px var(--hair)}
.js .map-list ul{margin:0}
.map-grid{align-items:start}

/* Closer: the copy on the left, the two ways in on the right. */
.closer .cl-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:start;justify-items:stretch}
.cl-copy{display:grid;gap:28px;justify-items:start}
.cl-doors{display:grid;gap:0}
.cl-doors li{display:grid;gap:12px;justify-items:start;padding:28px 0;border-top:1px solid var(--line)}
.cl-doors li:last-child{border-bottom:1px solid var(--line)}
.cl-doors .label{color:var(--fg-2)}
.cl-doors h3{font:500 var(--t-h3)/1.15 var(--display);letter-spacing:-.02em}
.cl-doors p{color:var(--fg-2);max-width:40ch}
.cl-doors .btn{margin-top:6px}
.cl-doors .btn-row .btn{margin-top:6px}
@media (max-width:900px){.closer .cl-grid{grid-template-columns:1fr}}

/* Institutional expertise drawing: a real-looking facility (office joined to a sliding
   gate, drive in from the street, fence), each point lighting its own building, and
   cars that drive the streets and fade out at the edges. */
/* Asphalt: streets, the drive, the forecourt and the aisles inside the fence, a cool grey
   darker than the lawn, with white lane and stall markings. */
.fx-art{--asphalt:color-mix(in srgb,var(--bg-4) 86%,var(--fg-2))}
.fx-art .i-road,.fx-art .i-pave{fill:var(--asphalt);stroke:none}
.fx-art .i-lane{fill:none;stroke:var(--bg);stroke-width:1.2;stroke-dasharray:8 10}
.fx-art .i-stall{fill:none;stroke:var(--bg);stroke-width:1.1;stroke-linecap:round}
.fx-art .i-walk{fill:none;stroke:var(--bg-3);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.fx-art .i-mull{stroke:var(--fg-2);stroke-width:.6}
.fx-art .i-house.r-flat{fill:none;stroke:none}
.fx-art .i-house.r-back{fill:var(--bg-2)}.fx-art .i-house.r-front{fill:var(--bg)}
.fx-art .i-of{fill:var(--bg);stroke:var(--fg-2);stroke-width:.9;stroke-linejoin:round}
.fx-art .i-of.f-long{fill:var(--bg-2)}.fx-art .i-of.f-end{fill:var(--bg-3)}
.fx-art .i-glass{fill:var(--bg-4);stroke:var(--fg-2);stroke-width:.6}
.fx-art .i-sign{fill:var(--accent);stroke:none}
.fx-art .i-fence{fill:none;stroke:var(--fg-2);stroke-width:.6;opacity:.6}
.fx-art .i-gate{fill:var(--bg);fill-opacity:.7;stroke:var(--fg-2);stroke-width:.9}
.fx-art .i-gate-p{fill:none;stroke:var(--fg-2);stroke-width:.5;opacity:.7}
.fx-art .i-post{stroke:var(--fg-2);stroke-width:1}
.fx-art .i-key{fill:var(--fg-2);stroke:none}
.fx-art .i-pond{fill:var(--bg-3);stroke:var(--bg-4)}
.fx-art .fx-bld .i-b{transition:fill .9s cubic-bezier(.65,0,.35,1),stroke .9s cubic-bezier(.65,0,.35,1)}
.fx-art .fx-bld.on .i-b{stroke:var(--accent)}
.fx-art .fx-bld.on .i-b.f-top{fill:var(--accent-hi)}
.fx-art .fx-bld.on .i-b.f-long{fill:var(--accent)}
.fx-art .fx-bld.on .i-b.f-end{fill:#0F1714}
.fx-art .fx-bld.on .i-b.f-ridge{stroke:var(--bg-4)}
.fx-art .fx-bld.on .i-b.f-door{stroke:#FFFFFF;opacity:.85}
/* The edge fade is a CSS mask on each layer (cheap to composite), and the cars sit on their own
   layer, so the browser doesn't repaint the whole drawing on every frame. */
.fx-art{-webkit-mask-image:radial-gradient(64% 64% at 54% 48%,#000 46%,transparent 100%);mask-image:radial-gradient(64% 64% at 54% 48%,#000 46%,transparent 100%)}
.fx-cars{pointer-events:none}
.fx-mv{animation:fx-drive var(--t) linear var(--d) infinite}
@keyframes fx-drive{0%{transform:translate(0,0);opacity:0}8%,88%{opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:0}}
.bp.still .fx-mv,.bp:not(.seen) .fx-mv{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .fx-mv{animation:none;transform:translate(calc(var(--dx) * .45),calc(var(--dy) * .45))}
  .fx-tick,.fx-pin,.fx.rot .fx-list li{transition:none}
}
/* Why Newcoast sheets: the tag text that sits on a filled label. */
.sheet text.inv{fill:var(--bg)}

/* Hero blueprint, round 4: larger lettering, the new buildings a touch brighter, the car. */
.fp-lb .sm{font-size:13px;letter-spacing:.18em}
.fp-lb .xs{font-size:8px;letter-spacing:.2em}
.fp-svg .nb{stroke-opacity:.95}
.fp-svg .car{stroke-opacity:.9}
/* The tilt pivots on the aisle's left wall, so that wall stays upright and the right one leans in, as in the clip. */
.fp-svg{transform-origin:21.7% 50%}
/* While the drawing fades, it shrinks with the clip (which settles from 1.14 to 1), so the drawn car stays on the filmed one. */
.film.pin .film-plan{transform:scale(calc(1 - .1228 * var(--fo,0)))}
/* Hero blueprint, line cleanup: the lede wraps sooner so the whole site fits beside it, and on
   phones the plan fades out above the copy (--mb, set as the camera moves). */
@media (min-width:761px){.film.pin .film-lede{max-width:42ch}}
@media (max-width:760px){.film.pin .fp-svg{-webkit-mask-image:linear-gradient(180deg,#000 calc(var(--mb,100vh) - 40px),transparent var(--mb,100vh));mask-image:linear-gradient(180deg,#000 calc(var(--mb,100vh) - 40px),transparent var(--mb,100vh))}}


/* Why self storage (Myles and Craig, 2026-10-23): the heading comes down to sit with the
   chapters, the type is a step larger, and the copy is centred on the drawing beside it.
   The heading, the chapter and the progress bar now sit as one group in the middle of the screen. */
.chapters.pin .ch-stage{grid-template-rows:auto auto auto;align-content:center;padding-block:128px 32px}
.chapters.pin .ch-head{margin-bottom:clamp(32px,5vh,56px)}
.chapters.pin .ch-head h2{font-size:clamp(34px,1.1rem + 2.5vw,58px);margin-top:0}
.chapters.pin .ch-copy{align-self:center;align-content:center;min-height:0}
.chapters.pin .ch-copy h3{font-size:clamp(24px,1.05rem + 1.3vw,38px)}
.chapters.pin .ch-copy p{font-size:calc(var(--t-lede) * 1.06)}
.chapters.pin .ch-fig{align-self:center}
.chapters.pin .ch-progress{margin-top:clamp(24px,4vh,40px)}
/* Why self storage (Oliver, 2026-10-23): the heading and the chapter text sit together as one
   block on the left, and the drawing is centred on that block, so the three read as a group in
   the middle of the screen. The two flexible rows above and below keep the group centred. */
.chapters.pin .ch-stage{grid-template-rows:minmax(0,1fr) auto auto minmax(0,1fr) auto;align-content:stretch;padding-block:88px 28px}
.chapters.pin .ch-head{grid-area:2/1/3/2;margin:0 0 clamp(20px,3.5vh,40px);align-self:end}
.chapters.pin .ch-head{grid-template-columns:1fr}
.chapters.pin .ch-head h2{max-width:16ch;font-size:clamp(32px,min(1.1rem + 2.5vw,6.6vh),58px)}
.chapters.pin .ch-copy{grid-area:3/1/4/2;align-self:start;align-content:start}
.chapters.pin .ch-fig{grid-area:1/2/5/3;align-self:center}
.chapters.pin .ch-progress{grid-area:5/1/6/3}
.chapters.pin .sk-fig .sk-card,.chapters.pin .op-fig .op-card{width:min(100%,calc((100svh - 250px) * 4 / 3))}