:root{
  --cream:#f4f0e8;
  --ink:#15140f;
  --ink-soft:rgba(21,20,15,.6);
  --line:rgba(21,20,15,.14);
  --accent:#8a6a45;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}

/* ---------- preloader ---------- */
.loader{
  position:fixed;inset:0;z-index:999;background:var(--ink);color:var(--cream);
  display:grid;place-items:center;overflow:hidden;
}
.loader__inner{display:flex;align-items:flex-end;gap:1.5rem}
.loader__mark{
  font-family:var(--serif);font-size:clamp(2rem,5vw,3.4rem);
  letter-spacing:.06em;line-height:1;opacity:.9;
}
.loader__count{
  font-size:.72rem;letter-spacing:.24em;
  font-variant-numeric:tabular-nums;padding-bottom:.4rem;
}
.loader__bar{
  position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:rgba(244,240,232,.18);
}
.loader__bar i{display:block;height:100%;width:0;background:var(--cream)}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.6rem clamp(1.2rem,4vw,3.4rem);
  mix-blend-mode:difference;color:#fff;
  transform:translateY(-100%);
}
.nav__logo{display:flex;align-items:center;gap:.7rem}
.nav__logo-mark{
  font-family:var(--serif);font-size:1.05rem;letter-spacing:.08em;
  border:1px solid currentColor;border-radius:50%;
  width:2.1rem;height:2.1rem;display:grid;place-items:center;
  transition:transform .6s var(--ease),background-color .45s var(--ease),color .45s var(--ease);
}
.nav__logo:hover .nav__logo-mark{transform:rotate(360deg);background:#fff;color:#0d0c09}
.nav__logo-text{
  font-size:.62rem;letter-spacing:.2em;line-height:1.35;text-transform:uppercase;
  transition:letter-spacing .5s var(--ease);
}
.nav__logo:hover .nav__logo-text{letter-spacing:.26em}
.nav__links{display:flex;gap:2.2rem}
.nav__links a{
  position:relative;display:block;
  padding:.55rem 0;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
}
/* underline draws in from the left, slow and smooth */
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:.1rem;
  height:1px;width:100%;background:currentColor;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .8s cubic-bezier(.25,1,.5,1);
}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__burger{
  display:none;background:none;border:0;cursor:pointer;padding:.4rem;
  flex-direction:column;gap:5px;
}
.nav__burger i{display:block;width:22px;height:1px;background:#fff}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;overflow:hidden;
  display:flex;align-items:flex-end;
  background:#0d0c09;
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__slide{
  position:absolute;inset:0;opacity:0;
  clip-path:inset(0 0 100% 0);
}
.hero__slide.is-active{opacity:1}
.hero__slide img{transform:scale(1.22)}

.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(13,12,9,.72) 0%,rgba(13,12,9,.18) 38%,rgba(13,12,9,.62) 78%,rgba(13,12,9,.92) 100%),
    linear-gradient(90deg,rgba(13,12,9,.5) 0%,transparent 58%);
}

/* arch frame */
.hero__frame{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero__frame i{position:absolute;background:rgba(244,240,232,.34)}
.hero__frame i:nth-child(1){left:clamp(1.2rem,4vw,3.4rem);top:clamp(5.5rem,10vh,8rem);bottom:0;width:1px;transform:scaleY(0);transform-origin:top}
.hero__frame i:nth-child(2){right:clamp(1.2rem,4vw,3.4rem);top:clamp(5.5rem,10vh,8rem);bottom:0;width:1px;transform:scaleY(0);transform-origin:top}
.hero__frame i:nth-child(3){left:clamp(1.2rem,4vw,3.4rem);right:clamp(1.2rem,4vw,3.4rem);top:clamp(5.5rem,10vh,8rem);height:1px;transform:scaleX(0)}
.hero__frame i:nth-child(4){
  left:50%;top:clamp(5.5rem,10vh,8rem);bottom:0;width:1px;
  background:rgba(244,240,232,.14);transform:scaleY(0);transform-origin:top;
}

.hero__body{
  position:relative;z-index:3;color:var(--cream);
  padding:0 clamp(1.2rem,4vw,3.4rem) clamp(4.5rem,9vh,7rem);
  max-width:min(60rem,92%);
}
.hero__eyebrow{
  display:flex;align-items:center;gap:.9rem;margin-bottom:1.6rem;
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
}
.hero__eyebrow .line{display:block;width:0;height:1px;background:currentColor;opacity:.6}
.hero__eyebrow .txt{display:block;overflow:hidden}

.hero__title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.7rem,9.2vw,7.4rem);
  line-height:.98;letter-spacing:-.015em;margin-bottom:1.8rem;
}
.hero__title .word{display:block;overflow:hidden;padding-bottom:.06em}
.hero__title .ch{display:block;transform:translateY(110%) rotate(4deg);opacity:0}

.hero__sub{
  max-width:34rem;font-size:.9rem;line-height:1.75;color:rgba(244,240,232,.74);
  margin-bottom:2.4rem;opacity:0;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;opacity:0}

.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-width:12.5rem;padding:1.1rem 2.2rem;
  border:1px solid rgba(244,240,232,.4);
  border-radius:100px;overflow:hidden;isolation:isolate;
  font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  transition:border-color .38s cubic-bezier(.16,1,.3,1),color .38s cubic-bezier(.16,1,.3,1);
}
/* fill wipes up from the bottom edge.
   hover accelerates — holds briefly, then snaps up fast, easing off at the
   very end so it lands smoothly instead of stopping dead.
   collapse is quicker so the button feels responsive on the way out. */
.btn i{
  position:absolute;inset:0;z-index:-1;background:var(--cream);
  transform:scaleY(0);transform-origin:center bottom;
  transition:transform .3s cubic-bezier(.5,0,.85,.3);
}
.btn:hover i{
  transform:scaleY(1);
  transition:transform .5s cubic-bezier(.5,0,.82,.35);
}
.btn span{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:.55rem;
}
.btn span::after{
  content:"\2197";font-size:.85em;line-height:1;opacity:0;
  transform:translate(0,6px);
  transition:opacity .3s cubic-bezier(.5,0,.82,.35),transform .5s cubic-bezier(.5,0,.82,.35);
}
.btn:hover{border-color:var(--cream);color:var(--ink)}
.btn:hover span::after{opacity:1;transform:translate(0,0)}
.btn--ghost{border-color:rgba(244,240,232,.22)}

/* header state once the hero is behind you */
.nav.is-stuck{
  mix-blend-mode:normal;color:var(--ink);
  padding-top:1.1rem;padding-bottom:1.1rem;
  background:rgba(244,240,232,.82);
  backdrop-filter:blur(12px) saturate(1.1);
  box-shadow:0 1px 0 rgba(21,20,15,.08);
}
.nav.is-stuck .nav__burger i{background:var(--ink)}

/* aside */
.hero__aside{
  position:absolute;z-index:3;right:clamp(1.2rem,4vw,3.4rem);
  top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:2.4rem;text-align:right;
  color:var(--cream);opacity:0;
}
.hero__aside-item b{
  display:block;font-family:var(--serif);font-size:1.5rem;font-weight:400;
  margin-bottom:.4rem;
}
.hero__aside-item span{
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(244,240,232,.62);line-height:1.7;
}

/* rail */
.hero__rail{
  position:absolute;z-index:3;left:clamp(1.2rem,4vw,3.4rem);bottom:clamp(4.5rem,9vh,7rem);
  display:flex;align-items:center;gap:.9rem;color:rgba(244,240,232,.7);
  opacity:0;
}
.hero__rail-txt{
  font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;
  writing-mode:vertical-rl;
}
.hero__rail-line{display:block;width:1px;height:54px;background:rgba(244,240,232,.3);overflow:hidden;position:relative}
.hero__rail-line::after{
  content:"";position:absolute;inset:0;background:var(--cream);
  animation:railRun 2.4s var(--ease) infinite;
}
@keyframes railRun{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* pager */
.hero__pager{
  position:absolute;z-index:3;left:50%;bottom:1.5rem;transform:translateX(-50%);
  display:flex;gap:1.1rem;opacity:0;
}
.hero__pager button{
  background:none;border:0;cursor:pointer;padding:.35rem;
  display:flex;align-items:center;gap:.5rem;
  font-size:.56rem;letter-spacing:.16em;color:rgba(244,240,232,.5);
  font-variant-numeric:tabular-nums;transition:color .4s var(--ease);
}
.hero__pager button i{display:block;width:16px;height:1px;background:currentColor;transition:width .5s var(--ease)}
.hero__pager button.is-on{color:var(--cream)}
.hero__pager button.is-on i{width:34px}

/* ---------- marquee ---------- */
.marquee{
  background:var(--ink);color:var(--cream);
  padding:1.1rem 0;overflow:hidden;
}
.marquee__track{display:flex;width:max-content;will-change:transform}
.marquee__set{
  display:flex;align-items:center;gap:2.4rem;padding-right:2.4rem;
  white-space:nowrap;flex:none;
}
.marquee__set span{font-family:var(--serif);font-size:1.15rem}
.marquee__set em{font-style:normal;opacity:.4}

@media (max-width:860px){
  .nav__links{display:none}
  .nav__burger{display:flex}
  .hero__aside{display:none}
  .hero__rail{display:none}
  .hero__title{font-size:clamp(2.3rem,12vw,4rem)}
}

/* ---------- shared chapter bits ---------- */
.chapter-num{
  position:absolute;z-index:4;top:clamp(5.5rem,10vh,8rem);
  left:clamp(1.2rem,4vw,3.4rem);
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(244,240,232,.6);opacity:0;
}
.chapter-num i{font-style:normal;opacity:.5;padding:0 .2em}

.eyebrow{
  display:flex;align-items:center;gap:.9rem;margin-bottom:1.3rem;
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(244,240,232,.7);
}
.eyebrow .m{display:block;overflow:hidden}
.eyebrow .m>span{display:block;transform:translateY(110%)}
.eyebrow .rule{display:block;width:0;height:1px;background:currentColor;opacity:.5}

.line-swap .l{display:block;overflow:hidden;padding-bottom:.05em}
.line-swap .l>span{display:block;transform:translateY(108%)}
.line-swap em{font-style:italic;opacity:.82}

.lede{
  max-width:32rem;font-size:.94rem;line-height:1.8;
  color:rgba(244,240,232,.72);margin-top:1.6rem;opacity:0;
}

/* ---------- 02 proposition ---------- */
.cine{
  position:relative;min-height:100svh;overflow:hidden;
  display:flex;align-items:center;background:#0d0c09;color:var(--cream);
}
.cine__media{position:absolute;inset:-12% 0;z-index:0}
.cine__img{position:absolute;inset:0;overflow:hidden}
.cine__img img{transform:scale(1.18);will-change:transform}
.cine__shade{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(13,12,9,.86) 0%,rgba(13,12,9,.5) 46%,rgba(13,12,9,.24) 100%),
    linear-gradient(180deg,rgba(13,12,9,.5) 0%,transparent 32%,rgba(13,12,9,.66) 100%);
}
.cine__copy{
  position:relative;z-index:3;width:100%;
  padding:clamp(5rem,12vh,8rem) clamp(1.2rem,4vw,3.4rem);
  max-width:58rem;
}
.cine h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.1rem,6.4vw,5rem);line-height:1.02;letter-spacing:-.012em;
}

.figs{display:flex;flex-wrap:wrap;gap:clamp(1.6rem,4vw,3.4rem);margin-top:2.8rem}
.fig{opacity:0;transform:translateY(18px)}
.fig strong{
  display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1;
  font-variant-numeric:tabular-nums;
}
.fig span{
  display:block;margin-top:.5rem;
  font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(244,240,232,.58);
}

/* ---------- 03 precinct ---------- */
.precinct{position:relative;min-height:100svh;overflow:hidden;background:#0d0c09;color:var(--cream)}
.precinct__stage{position:relative;min-height:100svh;overflow:hidden}

/* real map tiles + overlay.
   both .tiles and .plan position against this wrapper, so it must stay the
   shared offset parent for the tile grid and the SVG to line up.
   desktop: fills the stage and does NOT clip, so dot labels can overhang. */
.precinct__map{position:absolute;inset:0;z-index:0}
.tiles{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0f0e0c}
.tile-grid{position:absolute;transform-origin:50% 50%;will-change:transform}
.tile-grid img{
  position:absolute;width:256px;height:256px;display:block;
  opacity:.92;
}
/* each provider is tuned separately: Esri is already dark, the raster
   providers ship light so they get inverted to match */
.tiles[data-p="0"] .tile-grid img{
  filter:saturate(.55) brightness(.95) contrast(1.05);
}
.tiles[data-p="1"] .tile-grid img.t-base{filter:invert(1) hue-rotate(185deg) grayscale(.5) brightness(.62) contrast(1.06)}
.tiles[data-p="1"] .tile-grid img.t-lab {filter:invert(1) hue-rotate(185deg) brightness(1.15)}
.tiles[data-p="2"] .tile-grid img{
  filter:invert(1) hue-rotate(185deg) grayscale(.5) brightness(.6) contrast(1.05);
}
/* keeps the left side clear so the copy stays readable */
.tiles-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(13,12,9,.96) 0%,rgba(13,12,9,.92) 22%,rgba(13,12,9,.62) 34%,rgba(13,12,9,.16) 44%,transparent 52%),
    linear-gradient(0deg,rgba(13,12,9,.9) 0%,rgba(13,12,9,.34) 34%,transparent 62%);
}
.map-credit{
  position:absolute;z-index:4;right:clamp(1.2rem,4vw,3.4rem);bottom:1rem;
  font-size:.52rem;letter-spacing:.14em;
  color:rgba(244,240,232,.34);
}

.plan{
  position:absolute;z-index:2;
  transform-origin:50% 50%;
  overflow:visible;
}
.plan .site .site-ring{fill:rgba(244,240,232,.14);stroke:var(--cream);stroke-width:1.4}
.plan .site .site-dot{fill:var(--cream)}
.plan .site .site-label{
  fill:var(--cream);font-family:var(--sans);font-size:12px;font-weight:500;
  letter-spacing:.24em;text-anchor:middle;
  paint-order:stroke;stroke:rgba(13,12,9,.9);stroke-width:4px;
}
.plan .compass circle{fill:none;stroke:rgba(244,240,232,.28)}
.plan .compass path{fill:rgba(244,240,232,.45);stroke:none}
.plan .scale path{stroke:rgba(244,240,232,.34);stroke-width:1;fill:none}
.plan .scale text{fill:rgba(244,240,232,.4);font-family:var(--sans);font-size:9px;letter-spacing:.14em}

.dot{cursor:pointer}
.dot circle.hit{fill:transparent}
.dot circle.pulse{fill:rgba(244,240,232,.18)}
.dot circle.core{fill:var(--cream);stroke:rgba(13,12,9,.7);stroke-width:1.5}
.dot line{stroke:rgba(244,240,232,.6);stroke-width:1.2}
.dot text{
  fill:#fff;font-family:var(--sans);font-size:11.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  paint-order:stroke;stroke:rgba(13,12,9,.92);stroke-width:4px;
}
.dot:hover circle.pulse{fill:rgba(244,240,232,.34)}
.dot:hover circle.core{fill:#fff}
.dot.is-active circle.core{fill:#fff;r:5}
.dot.is-active text{fill:#fff}
.dot:focus{outline:none}
.dot:focus-visible circle.core{stroke:#fff;stroke-width:2.5}

/* circular photo lens */
.lens{
  position:absolute;z-index:3;top:0;left:0;width:clamp(190px,20vw,290px);
  aspect-ratio:1;pointer-events:none;
  transform:translate(-50%,-50%) scale(.3);opacity:0;
}
.lens__clip{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.lens__clip img{transform:scale(1.28)}
.lens__ring{
  position:absolute;inset:-10px;border-radius:50%;
  border:1px solid rgba(244,240,232,.45);
  transform:scale(.94);opacity:0;
}

/* full-bleed place view — opens from the dot */
.place-view{
  position:absolute;inset:0;z-index:6;
  clip-path:circle(0px at 50% 50%);
  visibility:hidden;pointer-events:none;
}
.place-view.is-on{visibility:visible;pointer-events:auto}
.place-view__clip{position:absolute;inset:0;overflow:hidden}
.place-view__clip img{transform:scale(1.3);will-change:transform}
.place-view__shade{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(13,12,9,.62) 0%,transparent 34%,rgba(13,12,9,.9) 100%),
    linear-gradient(90deg,rgba(13,12,9,.7) 0%,transparent 56%);
}
.place-view__inner{
  position:absolute;z-index:2;left:0;right:0;bottom:0;
  padding:0 clamp(1.2rem,4vw,3.4rem) clamp(3.4rem,9vh,6rem);
  max-width:44rem;
}
.place-view__idx{
  font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(244,240,232,.6);margin-bottom:1.1rem;
  font-variant-numeric:tabular-nums;
}
.place-view__name{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.1rem,5.8vw,4.4rem);line-height:1.02;
  margin-bottom:1rem;overflow:hidden;
}
.place-view__name>span{display:block;transform:translateY(108%)}
.place-view__desc{
  max-width:30rem;font-size:.92rem;line-height:1.8;
  color:rgba(244,240,232,.72);opacity:0;
}

.precinct__copy{
  position:absolute;z-index:4;left:clamp(1.2rem,4vw,3.4rem);
  bottom:clamp(3.4rem,9vh,6rem);max-width:min(30rem,38%);width:calc(100% - 2.4rem);
}
.precinct__copy h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.9rem,5.2vw,3.9rem);line-height:1.03;
}
.dot-name{
  min-height:1.2rem;margin-bottom:.7rem;
  font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(244,240,232,.85);
}

.dot-list{list-style:none;margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.5rem;opacity:0}
.dot-list li{
  border:1px solid rgba(244,240,232,.22);border-radius:100px;
  padding:.5rem .95rem;cursor:pointer;
  font-size:.57rem;letter-spacing:.18em;text-transform:uppercase;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.dot-list li:hover{background:rgba(244,240,232,.12);border-color:rgba(244,240,232,.4)}
.dot-list li.is-on{background:var(--cream);color:var(--ink);border-color:var(--cream)}

.back-btn{
  position:absolute;z-index:8;right:clamp(1.2rem,4vw,3.4rem);
  top:clamp(5.5rem,10vh,8rem);
  display:flex;align-items:center;gap:.6rem;
  background:rgba(13,12,9,.5);color:var(--cream);
  border:1px solid rgba(244,240,232,.28);border-radius:100px;
  padding:.6rem 1.1rem;cursor:pointer;backdrop-filter:blur(6px);
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  opacity:0;pointer-events:none;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.back-btn:hover{background:var(--cream);color:var(--ink)}
.back-btn svg{width:13px;height:13px}

@media (max-width:860px){
  .precinct__copy{bottom:2.6rem}
  .dot-list{max-height:5.2rem;overflow:hidden}
  .lens{width:150px}
}

/* ══════════ 04 / CONCEPT ══════════ */
.concept{
  position:relative;overflow:hidden;
  padding:clamp(6rem,14vh,10rem) clamp(1.2rem,4vw,3.4rem);
  background:#0d0c09;color:var(--cream);
}
/* eight-line corner frame, drawn in on scroll */
.concept__decor{position:absolute;inset:clamp(1.2rem,3vw,2.6rem);pointer-events:none;z-index:1}
.concept__decor i{position:absolute;background:rgba(244,240,232,.18);transform:scale(0)}
.concept__decor .d-vl{left:0;top:0;bottom:0;width:1px;transform-origin:top}
.concept__decor .d-vr{right:0;top:0;bottom:0;width:1px;transform-origin:bottom}
.concept__decor .d-ht{left:0;right:0;top:0;height:1px;transform-origin:left}
.concept__decor .d-hb{left:0;right:0;bottom:0;height:1px;transform-origin:right}
.concept__decor .d-tl{left:0;top:0;width:16%;height:1px;transform-origin:left}
.concept__decor .d-tr{right:0;top:0;width:16%;height:1px;transform-origin:right}
.concept__decor .d-bl{left:0;bottom:0;width:16%;height:1px;transform-origin:left}
.concept__decor .d-br{right:0;bottom:0;width:16%;height:1px;transform-origin:right}

.concept__grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:.85fr 1fr;gap:clamp(2rem,5vw,5rem);
  align-items:center;max-width:76rem;margin:0 auto;
}

/* arch window that opens out of the centre */
.concept__arch{position:relative;aspect-ratio:3/4;max-height:70vh}
.arch-frame{
  position:absolute;inset:0;
  border:1px solid rgba(244,240,232,.22);
  border-radius:50% 50% 4px 4px / 32% 32% 4px 4px;
  z-index:2;pointer-events:none;
  clip-path:inset(0 0 0 0);
}
.arch-clip{
  position:absolute;inset:0;overflow:hidden;
  border-radius:50% 50% 4px 4px / 32% 32% 4px 4px;
  clip-path:inset(50% 50% 50% 50%);
}
.arch-clip img{transform:scale(1.24)}

.concept__body h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2rem,5.6vw,4.2rem);line-height:1.04;margin-bottom:.4rem;
}
.concept__body .lede{margin-top:1.4rem}

/* numbered points, each row reveals on its own */
.points{list-style:none;margin-top:2.4rem;border-top:1px solid rgba(244,240,232,.12)}
.points li{
  display:grid;grid-template-columns:2.4rem 1fr;
  gap:.2rem 1rem;padding:1.15rem 0;
  border-bottom:1px solid rgba(244,240,232,.12);
  position:relative;overflow:hidden;
}
.points li::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:rgba(244,240,232,.05);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .8s cubic-bezier(.25,1,.5,1);
}
.points li:hover::before{transform:scaleY(1)}
.points__n{
  grid-row:1/3;font-size:.6rem;letter-spacing:.16em;
  color:rgba(244,240,232,.5);padding-top:.25rem;
}
.points__t{position:relative;z-index:1;font-size:.94rem;letter-spacing:.01em}
.points__d{
  position:relative;z-index:1;font-size:.84rem;line-height:1.7;
  color:rgba(244,240,232,.6);
}

/* ══════════ 05 / COLLECTION CARDS ══════════ */
.collection{
  position:relative;overflow:hidden;
  padding:clamp(5rem,12vh,8.5rem) clamp(1.2rem,4vw,3.4rem) clamp(4rem,9vh,6rem);
  background:var(--cream);color:var(--ink);
}
.chapter-num--dark{color:rgba(21,20,15,.45)}
.eyebrow--dark{color:rgba(21,20,15,.55)}
.eyebrow--dark .rule{background:rgba(21,20,15,.45)}

.collection__head{max-width:76rem;margin:0 auto clamp(2.2rem,5vw,3.4rem)}
.collection__head h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2rem,5.4vw,4rem);line-height:1.04;
}

.cards{
  position:relative;z-index:2;max-width:76rem;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem);
}
.card{
  position:relative;background:#fff;
  border:1px solid rgba(21,20,15,.09);
  opacity:0;transform:translateY(34px);
  transition:transform .8s cubic-bezier(.25,1,.5,1),
             box-shadow .8s cubic-bezier(.25,1,.5,1),
             border-color .8s cubic-bezier(.25,1,.5,1),
             opacity .8s cubic-bezier(.25,1,.5,1);
}
.card__media{aspect-ratio:4/5;overflow:hidden;background:#0d0c09}
.card__media img{transform:scale(1.02);transition:transform 1.2s cubic-bezier(.25,1,.5,1)}
.card__body{padding:1.5rem 1.5rem 1.7rem;position:relative;z-index:2}
.card__idx{
  font-size:.58rem;letter-spacing:.2em;color:rgba(21,20,15,.4);
  font-variant-numeric:tabular-nums;
}
.card h3{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.1;
  margin:.5rem 0 .6rem;
}
.card p{font-size:.85rem;line-height:1.7;color:rgba(21,20,15,.62);min-height:3.4em}
.card__specs{
  list-style:none;display:flex;gap:1.4rem;margin-top:1.2rem;
  padding-top:1rem;border-top:1px solid rgba(21,20,15,.1);
}
.card__specs li{
  font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(21,20,15,.5);
}
.card__specs b{
  font-family:var(--serif);font-weight:400;font-size:1.05rem;
  letter-spacing:0;margin-right:.35rem;color:var(--ink);
}
/* soft lift under the hovered card */
.card__glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  box-shadow:0 4px 12px rgba(0,0,0,.04),
             0 9px 20px rgba(0,0,0,.08),
             0 36px 36px rgba(0,0,0,.07),
             0 81px 48px rgba(0,0,0,.04);
  opacity:0;transition:opacity .8s cubic-bezier(.25,1,.5,1);
}
.card:hover{
  transform:translateY(-8px);border-color:rgba(21,20,15,.2);
}
.card:hover .card__media img{transform:scale(1.15)}
.card:hover .card__glow{opacity:1}

/* hovering one card drops the others back */
.cards:hover .card:not(:hover){opacity:.34}

.card-hint{
  max-width:76rem;margin:1.8rem auto 0;
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(21,20,15,.34);opacity:0;
}

@media (max-width:900px){
  .concept__grid{grid-template-columns:1fr;gap:2.4rem}
  .concept__arch{aspect-ratio:4/5;max-height:none}
  .cards{grid-template-columns:1fr}
  .card p{min-height:0}
  .cards:hover .card:not(:hover){opacity:1}
}


/* ══ 05 / THE STORY (sideways) ═══════════════════════════ */
.story{position:relative;background:var(--ink);color:var(--cream)}
.story__pin{position:relative;height:100svh;overflow:hidden}
.story__track{
  display:flex;align-items:center;height:100%;
  will-change:transform;
}
.story__panel{
  position:relative;flex:0 0 auto;
  width:clamp(22rem,42vw,38rem);
  padding:0 clamp(2rem,5vw,5rem);
  height:100%;display:flex;flex-direction:column;justify-content:center;
  border-left:1px solid rgba(244,240,232,.12);
}
.story__panel:first-child{border-left:0}
.story__panel--lead{
  width:100vw;max-width:none;flex:0 0 auto;
  background:var(--ink);display:block;
}
.story__lead{
  display:grid;grid-template-columns:1.15fr minmax(0,.85fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
  width:100%;height:100%;
}
.story__lead-text{display:flex;flex-direction:column;justify-content:center}
.story__lead-media{position:relative}
.story__lead-img{
  position:relative;overflow:hidden;
  aspect-ratio:4/5;
}
.story__lead-img img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);
}
.story__lead-cap{
  display:flex;justify-content:space-between;gap:1rem;
  margin-top:.9rem;
  font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(244,240,232,.4);
}
.story__years{
  list-style:none;margin-top:clamp(1.8rem,4vh,2.8rem);
  border-top:1px solid rgba(244,240,232,.14);
  max-width:34rem;
}
.story__years li{
  display:flex;align-items:baseline;gap:1.4rem;
  padding:.85rem 0;
  border-bottom:1px solid rgba(244,240,232,.14);
}
.story__years b{
  flex:0 0 4.2rem;
  font-family:var(--serif);font-weight:400;font-size:1.1rem;
  color:var(--cream);
}
.story__years span{
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(244,240,232,.45);
}
.story__panel--lead h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.2rem,6vw,4.6rem);line-height:1.02;margin-top:1.4rem;
}
.story__panel--lead .lede{margin-top:1.6rem;max-width:24rem}
.story__panel--lead .chapter-num{
  position:static;display:block;
  margin-bottom:clamp(2rem,6vh,4rem);
}

.story__n{
  display:block;margin-bottom:1.4rem;
  font-size:.58rem;letter-spacing:.24em;color:rgba(244,240,232,.42);
}
.story__media{
  position:relative;overflow:hidden;
  aspect-ratio:4/3;margin-bottom:1.8rem;
}
.story__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.14);
}
.story__text h3{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1;
}
.story__text p{
  margin-top:.9rem;max-width:26rem;
  font-size:.92rem;line-height:1.75;color:rgba(244,240,232,.66);
}
.story__panel--end{
  width:clamp(22rem,34vw,30rem);
  background:#0d0c09;color:var(--cream);
  border-left:1px solid rgba(244,240,232,.12);
}
.story__panel--end .story__n{color:rgba(244,240,232,.45)}
.story__text--big p{color:rgba(244,240,232,.7);font-size:1.05rem}
.story__panel--end .btn{margin-top:2.4rem}
.story__panel--end .btn i{background:var(--cream)}

.story__bar{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  height:1px;background:rgba(244,240,232,.14);
}
.story__bar i{
  display:block;height:100%;width:100%;background:var(--cream);
  transform:scaleX(0);transform-origin:left;
}

/* ══ FOOTER ══════════════════════════════════════════════ */
.foot{
  background:var(--ink);color:var(--cream);
  padding:clamp(3.6rem,8vw,6.4rem) clamp(1.2rem,4vw,3.4rem) 2rem;
}
.foot__top{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:2.4rem;flex-wrap:wrap;
  padding-bottom:clamp(2.4rem,5vw,3.6rem);
  border-bottom:1px solid rgba(244,240,232,.14);
}
.foot__logo{display:flex;align-items:center;gap:.9rem}
.foot__blurb{
  max-width:26rem;font-size:.9rem;line-height:1.8;
  color:rgba(244,240,232,.6);
}
.foot__cols{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1.6rem,3vw,2.8rem);
  padding:clamp(2.4rem,5vw,3.6rem) 0;
}
.foot__col h4{
  margin:0 0 1.3rem;
  font-size:.56rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(244,240,232,.42);
}
.foot__col ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.foot__col li a,.foot__legal a{
  font-size:.86rem;color:rgba(244,240,232,.78);
  text-decoration:none;
  transition:color .4s var(--ease);
}
.foot__col li a:hover,.foot__legal a:hover{color:var(--cream)}
.foot__col address{
  font-style:normal;font-size:.86rem;line-height:1.9;
  color:rgba(244,240,232,.78);
}
.foot__hours{
  margin-top:1rem;font-size:.76rem;line-height:1.8;
  color:rgba(244,240,232,.45);
}
/* resting colour is inherited from .foot / .story__panel--end, so the label
   must NOT be pinned to cream here — that would beat inheritance and leave
   cream text sitting on the cream fill once .btn:hover kicks in */
.btn--foot{margin-top:1.6rem}
.btn--foot i{background:var(--cream)}

.foot__base{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem;flex-wrap:wrap;
  padding-top:1.8rem;border-top:1px solid rgba(244,240,232,.14);
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(244,240,232,.38);
}
.foot__legal{display:flex;gap:1.4rem}
.foot__legal a{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}

@media (max-width:900px){
  /* stack it: copy on top, map in its own bounded row underneath.
     block flow, not grid — a 1fr row inside an auto-height container has no
     free space to resolve against and collapses toward zero, and the map's
     only children are absolutely positioned, so it collapsed to nothing.
     explicit height on the map instead. */
  .precinct__stage{
    display:block;
    min-height:100svh;height:auto;overflow:hidden;
  }
  .precinct__copy{
    position:relative;left:auto;bottom:auto;
    max-width:none;width:auto;
    padding:clamp(5rem,11vh,7rem) clamp(1.2rem,4vw,3.4rem) clamp(1.4rem,3vh,2.2rem);
  }
  .precinct__map{
    position:relative;inset:auto;overflow:hidden;
    height:46svh;min-height:260px;
    margin:0 clamp(.7rem,3vw,1.1rem) clamp(1.4rem,4vw,2.2rem);
    border-radius:.55rem;
    box-shadow:0 0 0 1px rgba(244,240,232,.1);
  }
  /* the map no longer sits under the copy, so the bottom-up scrim is only
     there to seat the dots — keep it light */
  .tiles-veil{
    background:
      linear-gradient(0deg,rgba(13,12,9,.8) 0%,rgba(13,12,9,.34) 22%,transparent 46%),
      linear-gradient(180deg,rgba(13,12,9,.6) 0%,transparent 18%);
  }
  /* labels would clip against the rounded box on a narrow map, and the chip
     list right above the map already names every place */
  .plan .dot text,
  .plan .site .site-label{display:none}
  .dot-list{max-height:none;overflow:visible}
  .precinct__copy h2{font-size:clamp(1.7rem,8vw,2.4rem)}
  /* on mobile the chapter number is absolutely positioned at a fixed offset,
     which stops lining up once headings wrap to more lines and it ends up
     sitting on top of the next section's headline. put it back in flow so it
     reserves its own space and can never collide. */
  .chapter-num{
    position:static;display:block;
    margin:0 clamp(1.2rem,4vw,3.4rem) clamp(1.4rem,3vh,2.2rem);
  }
}
  .foot__cols{grid-template-columns:repeat(2,1fr)}
  .story__pin{height:auto;overflow:visible}
  .story__track{
    flex-direction:column;align-items:stretch;height:auto;transform:none!important;
  }
  .story__panel,.story__panel--lead,.story__panel--end{
    width:100%;height:auto;padding:3.4rem clamp(1.2rem,4vw,3.4rem);
    border-left:0;border-top:1px solid rgba(244,240,232,.12);
  }
  .story__panel--lead{border-top:0;padding-top:clamp(4rem,12vw,7rem)}
  .story__lead{grid-template-columns:1fr;gap:2.4rem;height:auto}
  .story__lead-img{aspect-ratio:16/10}
  .story__media{aspect-ratio:16/10}
  .story__bar{display:none}
  .foot__base{justify-content:flex-start}
}