/* ============================================================
   Six Eighty Properties — v2 design system
   White ground, one grotesk, a single volt-yellow accent.
   Every page loads this file. Nothing page-specific lives here.
   ============================================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --paper:#ffffff;
  --ink:#060606;
  --volt:#FFE81F;
  /* both clear 4.5:1 on paper AND on wash, and stay a visible step apart.
     Measured: mute 5.28:1, faint 4.70:1. --faint carries the booking form's
     hints and slot captions, so it is real text, not decoration. */
  --mute:rgba(6,6,6,.62);
  --faint:rgba(6,6,6,.56);
  --line:rgba(6,6,6,.14);
  --hair:rgba(6,6,6,.08);
  --wash:#FAFAF8;
  --pad:clamp(20px,3.6vw,52px);
  --font:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --nav-h:68px;
  --ease:cubic-bezier(.2,1,.3,1);
  --arw:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4.6 11.4 11.4 4.6M11.4 4.6H6.1M11.4 4.6V9.9" fill="none" stroke="black" stroke-width="1.9" stroke-linecap="square"/></svg>');
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--font);font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--volt);color:var(--ink)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--volt);outline-offset:3px}

/* ---------------- type ---------------- */
.display{font-weight:600;text-transform:uppercase;letter-spacing:-.028em;line-height:.88}
h1,h2,h3{font-weight:600;letter-spacing:-.025em;line-height:.94}
.lede{font-size:1.04rem;line-height:1.62;color:var(--mute);max-width:56ch}
.small{font-size:.86rem;line-height:1.6;color:var(--mute)}

/* ---------------- nav ---------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;padding:18px var(--pad);
  transition:padding .3s var(--ease)}
.nav-right{display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.nav .burger{width:34px;height:16px;position:relative;flex:0 0 auto;order:2;
  background:none;border:0;padding:0;cursor:pointer}
/* the two bars stay 34x16 so the mark is unchanged; an invisible pseudo-element
   gives the thumb a real 48px target. Sizing the button itself would stretch the
   bars, because they are absolutely positioned to its edges. */
.nav .burger::before{content:"";position:absolute;left:50%;top:50%;
  width:48px;height:48px;transform:translate(-50%,-50%)}
.nav .burger span{position:absolute;left:0;right:0;height:2px;background:#fff;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.5));
  transition:transform .4s var(--ease),background .3s}
.nav.solid .burger span{filter:none}
.nav .burger span:nth-child(1){top:0}
.nav .burger span:nth-child(2){bottom:0}
.nav .burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav .burger.on span:nth-child(2){transform:translateY(-7px) rotate(-45deg)}
.nav .word{font-weight:700;font-size:1.06rem;letter-spacing:.14em;color:#fff}
.nav .cta{display:flex;align-items:stretch;mix-blend-mode:normal}
.nav .cta b{background:var(--ink);color:#fff;font-weight:600;font-size:.78rem;letter-spacing:.09em;
  padding:15px 20px;display:flex;align-items:center;white-space:nowrap}
.nav .cta i{background:var(--volt);width:48px;display:grid;place-items:center;font-style:normal;color:var(--ink)}
.nav.solid{background:var(--paper);border-bottom:1px solid var(--line);
  padding-top:12px;padding-bottom:12px}
.nav.solid .word{color:var(--ink)}
.nav.solid .burger span{background:var(--ink)}
@media(max-width:700px){ .nav .cta b{display:none} }

/* ---------------- full-screen menu ---------------- */
.menu{position:fixed;inset:0;z-index:55;
  background:rgba(6,6,6,.80);-webkit-backdrop-filter:blur(30px) saturate(.75);backdrop-filter:blur(30px) saturate(.75);
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 34px) var(--pad) 34px;overflow-y:auto}
.menu.on{opacity:1;pointer-events:auto}
.menu .rows{border-top:1px solid rgba(255,255,255,.15)}
.menu .row{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;
  border-bottom:1px solid rgba(255,255,255,.15);padding:clamp(15px,3.1vh,27px) 0;
  opacity:0;transform:translateY(26px);
  transition:opacity .55s var(--ease),transform .65s var(--ease),padding-left .3s var(--ease)}
.menu.on .row{opacity:1;transform:none}
.menu.on .row:nth-child(1){transition-delay:.05s}
.menu.on .row:nth-child(2){transition-delay:.11s}
.menu.on .row:nth-child(3){transition-delay:.17s}
.menu.on .row:nth-child(4){transition-delay:.23s}
.menu.on .row:nth-child(5){transition-delay:.29s}
.menu.on .row:nth-child(6){transition-delay:.35s}
.menu.on .row:nth-child(7){transition-delay:.41s}
.menu.on .row:nth-child(8){transition-delay:.47s}
.menu.on .row:nth-child(n+9){transition-delay:.53s}
.menu .row:hover{padding-left:12px}
.menu .idx{font-size:.78rem;color:rgba(255,255,255,.56);font-weight:400}
.menu .lab{font-size:clamp(1.7rem,4.2vw,2.8rem);font-weight:600;letter-spacing:-.022em;
  color:rgba(255,255,255,.92);line-height:1.1;transition:color .25s}
.menu .row:hover .lab{color:#fff}
.menu .foot{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:flex-end;
  margin-top:clamp(30px,6vh,60px);opacity:0;transform:translateY(20px);
  transition:opacity .5s var(--ease) .42s,transform .5s var(--ease) .42s}
.menu.on .foot{opacity:1;transform:none}
.menu .foot .k{font-size:.7rem;letter-spacing:.14em;color:rgba(255,255,255,.56);margin-bottom:7px}
.menu .foot a,.menu .foot span{color:rgba(255,255,255,.8);font-size:1rem}
.menu .foot a:hover{color:#fff}
.menu .foot .dot{color:var(--volt)}
/* with the menu open the bar inverts: yellow label, black arrow */
.nav.menuopen{background:transparent}
/* past the hero the bar is solid white; with the menu open it must drop back out */
.nav.solid.menuopen{background:transparent;border-bottom-color:transparent}
.nav.menuopen .word{color:#fff}
.nav.menuopen .burger span{background:#fff}
.nav.menuopen .cta b{background:var(--volt);color:var(--ink)}
.nav.menuopen .cta i{background:var(--ink);color:#fff}

/* ---------------- hero ---------------- */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden}
.hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.44),rgba(0,0,0,.12) 42%,rgba(0,0,0,.66))}
.hero .inner{position:absolute;left:0;right:0;bottom:clamp(58px,9vh,108px);z-index:2;
  text-align:center;padding:0 var(--pad)}
.hero h1{color:#fff;font-size:clamp(2.7rem,10vw,8.4rem)}
.hero .where{color:rgba(255,255,255,.82);font-size:.95rem;margin-top:20px}
.hero .chip{position:absolute;left:var(--pad);bottom:clamp(22px,4vh,38px);z-index:2;
  background:rgba(255,255,255,.92);color:var(--ink);font-size:.72rem;font-weight:600;
  letter-spacing:.1em;padding:11px 19px;border-radius:100px}
.hero.short{height:auto;min-height:0;padding:calc(var(--nav-h) + 90px) 0 0}

/* ---- the one orchestrated moment: the page arriving ----
   Every hidden state is scoped to html.js, which an inline head script sets.
   With no JavaScript the hero simply renders, fully visible. ---- */
.hero h1 .ln{display:block;overflow:hidden}
html.js .hero h1 .ln > span{display:block;transform:translateY(106%);transition:transform 1.05s var(--ease)}
html.js .hero h1 .ln:nth-child(2) > span{transition-delay:.08s}
html.js .hero h1 .ln:nth-child(3) > span{transition-delay:.16s}
html.js .hero > img{transform:scale(1.06);transition:transform 1.7s var(--ease)}
html.js .hero .where,html.js .hero .chip,html.js html.js .nav{opacity:0;transition:opacity .7s ease .25s,padding .3s var(--ease),background .3s}
html.js.ready .hero h1 .ln > span{transform:none}
html.js.ready .hero > img{transform:none}
html.js.ready .hero .where,html.js.ready .hero .chip,html.js.ready .hero .scroll,html.js.ready .nav{opacity:1}
@media (prefers-reduced-motion:reduce){
  html.js .hero h1 .ln > span,html.js .hero > img{transform:none!important;transition:none!important}
  html.js .hero .where,html.js .hero .chip,html.js .hero .scroll,html.js .nav{opacity:1!important;transition:none!important}
}

/* ---------------- section scaffolding ---------------- */
section{padding:clamp(72px,10vw,160px) var(--pad)}
section.tight{padding-top:0}
section.wash{background:var(--wash)}
.marker{display:flex;align-items:center;gap:18px;font-size:.76rem;letter-spacing:.14em;font-weight:500}
.marker i{font-style:normal;color:var(--mute)}
.marker hr{flex:0 0 66px;height:1px;background:var(--ink);border:0;opacity:.5}
.statement{display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,3fr);
  gap:clamp(22px,5vw,80px);align-items:start}
.statement h2{font-weight:600;text-transform:uppercase;letter-spacing:-.025em;line-height:.94;
  font-size:clamp(1.85rem,4.9vw,4.1rem)}
.statement .said{font-size:1.04rem;line-height:1.62;color:var(--mute);max-width:54ch;margin-top:24px}
.statement .said + .said{margin-top:16px}
@media(max-width:820px){ .statement{grid-template-columns:1fr} }

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:stretch;margin-top:32px}
.btn b{background:var(--ink);color:#fff;font-weight:600;font-size:.8rem;letter-spacing:.09em;
  padding:17px 24px;display:flex;align-items:center}
.btn i{background:var(--volt);width:54px;display:grid;place-items:center;font-style:normal;
  transition:transform .4s var(--ease)}
.btn:hover i{transform:translate(3px,-3px)}
.btn.ghost b{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.ghost i{background:var(--ink);color:#fff}

/* ---------------- measures ---------------- */
.measures{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);
  margin-top:clamp(38px,6vw,88px)}
.measures > div{padding:32px 24px 24px;border-right:1px solid var(--line);
  min-height:clamp(215px,25vw,320px);display:flex;flex-direction:column;justify-content:space-between}
.measures > div:last-child{border-right:0}
.measures .fig{font-weight:500;letter-spacing:-.045em;font-size:clamp(2.4rem,5.4vw,4.3rem);line-height:.9}
.measures .what{font-size:1rem;line-height:1.4;font-weight:500}
.measures .idx{font-size:.74rem;color:var(--mute);margin-top:10px}
@media(max-width:900px){
  .measures{grid-template-columns:repeat(2,1fr)}
  .measures > div:nth-child(2n){border-right:0}
  .measures > div{border-bottom:1px solid var(--line)}
}
@media(max-width:520px){ .measures{grid-template-columns:1fr} .measures > div{border-right:0;min-height:0} }

/* ---------------- ruled list of spaces ---------------- */
.spaces{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:clamp(34px,5vw,60px)}
.space{background:var(--paper);display:grid;
  grid-template-columns:78px minmax(0,1fr) clamp(170px,19vw,250px) 146px;
  align-items:center;gap:clamp(16px,2.4vw,32px);
  padding:clamp(18px,2.4vw,26px) clamp(20px,2.6vw,30px);transition:background .3s}
.space > *{min-width:0}
.space:hover{background:var(--wash)}
.space .no{font-weight:500;font-size:1.5rem;letter-spacing:-.03em}
.space h3{text-transform:uppercase;font-size:clamp(1.1rem,2.1vw,1.68rem);line-height:1.05}
.space p{color:var(--mute);font-size:.95rem;line-height:1.55;margin-top:8px}
.space .pic{width:100%;aspect-ratio:16/10;object-fit:cover}
.space .end{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.space .sf{font-weight:500;font-size:1.02rem;white-space:nowrap}
.tag{font-size:.7rem;font-weight:600;letter-spacing:.1em;padding:8px 13px;border:1px solid var(--ink);
  display:inline-block}
.tag.open{background:var(--volt);border-color:var(--volt)}
.tag.gone{color:var(--mute);border-color:var(--line)}
@media(max-width:1080px){ .space{grid-template-columns:70px minmax(0,1fr) 150px 130px} }
@media(max-width:860px){
  .space{grid-template-columns:1fr;gap:14px}
  .space .no{font-size:1.1rem}
  .space .end{flex-direction:row;align-items:center;gap:16px}
}

/* ---------------- full-bleed band ---------------- */
.band{position:relative;height:clamp(320px,50vw,600px);overflow:hidden;padding:0}
.band img{width:100%;height:100%;object-fit:cover}
.band .over{position:absolute;inset:auto 0 0 0;padding:var(--pad);
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.62))}
.band h2{color:#fff;text-transform:uppercase;line-height:.96;
  font-size:clamp(1.55rem,4.3vw,3.3rem);max-width:20ch}

/* ---------------- split feature ---------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px);align-items:center}
.split.rev > .pane:first-child{order:2}
.split img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split h3{text-transform:uppercase;font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:1}
.split .lede{margin-top:18px}
@media(max-width:860px){ .split{grid-template-columns:1fr} .split.rev > .pane:first-child{order:0} }

/* ---------------- gallery ---------------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:clamp(30px,4vw,56px)}
.gallery figure{position:relative;overflow:hidden;margin:0}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gallery figure:hover img{transform:scale(1.04)}
.gallery .wide{grid-column:span 2}
.gallery .tall{grid-row:span 2}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;color:#fff;
  font-size:.72rem;font-weight:600;letter-spacing:.09em;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.8))}
.gallery > figure{aspect-ratio:4/3}
.gallery > figure.tall{aspect-ratio:2/3}
.gallery > figure.wide{aspect-ratio:8/3}
@media(max-width:860px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery .wide,.gallery .tall{grid-column:span 2;grid-row:auto;aspect-ratio:16/9}
}

/* ---------------- spec table ---------------- */
.specs{border-top:1px solid var(--ink);margin-top:clamp(30px,4vw,54px)}
.specs .row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,2.4fr);gap:20px;
  padding:18px 2px;border-bottom:1px solid var(--line)}
.specs .k{font-size:.82rem;letter-spacing:.1em;font-weight:600;color:var(--mute);text-transform:uppercase}
.specs .v{font-size:1.02rem;line-height:1.55}
@media(max-width:620px){ .specs .row{grid-template-columns:1fr;gap:6px} }

/* ---------------- accordion ---------------- */
.qa{border-top:1px solid var(--ink);margin-top:clamp(28px,4vw,50px)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-weight:600;font-size:clamp(1rem,1.7vw,1.22rem);text-transform:uppercase;letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-weight:400;font-size:1.5rem;transition:transform .3s var(--ease)}
.qa details[open] summary::after{content:"–"}
.qa .ans{padding:0 0 26px;color:var(--mute);font-size:1rem;line-height:1.65;max-width:70ch}

/* ---------------- marquee ---------------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:18px 0;white-space:nowrap}
.marquee .track{display:inline-flex;gap:46px;animation:slide 38s linear infinite;will-change:transform}
.marquee span{font-weight:600;text-transform:uppercase;letter-spacing:.02em;font-size:1rem;color:var(--mute)}
.marquee b{color:var(--ink);font-weight:600}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------------- form ---------------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(28px,4vw,48px)}
.form .full{grid-column:1/-1}
.form label{display:block;font-size:.74rem;letter-spacing:.11em;font-weight:600;
  text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.form input,.form select,.form textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);padding:15px 16px;border-radius:0;
  -webkit-appearance:none;appearance:none;transition:border-color .25s}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--ink)}
.form textarea{min-height:128px;resize:vertical}
.form select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px;background-repeat:no-repeat}
.form button{display:inline-flex;align-items:stretch;margin-top:4px}
.form button b{background:var(--ink);color:#fff;font-weight:600;font-size:.8rem;letter-spacing:.09em;
  padding:17px 24px;display:flex;align-items:center}
.form button i{background:var(--volt);width:54px;display:grid;place-items:center;font-style:normal;
  transition:transform .4s var(--ease)}
.form button:hover i{transform:translate(3px,-3px)}
@media(max-width:700px){ .form{grid-template-columns:1fr} }

/* ---------------- closing CTA ---------------- */
.close{text-align:center}
.close h2{text-transform:uppercase;letter-spacing:-.03em;line-height:.9;font-size:clamp(2.2rem,7.6vw,6.2rem)}
.close p{color:var(--mute);max-width:52ch;margin:22px auto 0;font-size:1.04rem;line-height:1.6}
.close .btn{margin-top:36px}

/* ---------------- footer ---------------- */
footer{border-top:1px solid var(--line);padding:clamp(38px,5vw,62px) var(--pad);
  display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;
  font-size:.92rem;color:var(--mute);line-height:1.8}
footer b{color:var(--ink);font-weight:600;display:block}
footer a:hover{color:var(--ink)}

/* ---------------- reveal ---------------- */
[data-rise]{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-rise].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  [data-rise]{opacity:1!important;transform:none!important}
}

/* ============================================================
   THE PHONE
   Kyle texts these links to people. The phone is the device the
   building gets judged on, so below 760px the page is rebuilt
   for a thumb rather than left to reflow.

   Everything here is additive and lives at the end of the file
   so it wins on source order. Nothing above 760px is touched.
   ============================================================ */
@media (max-width:760px){

  :root{ --bleed:calc(var(--pad) * -1) }
  html{scroll-padding-top:calc(var(--nav-h) + 8px)}

  /* ---- section rhythm: desktop padding makes a phone feel endless ---- */
  section{padding:clamp(52px,12vw,76px) var(--pad)}
  section.tight{padding-top:0}

  /* ---- bar ---- */
  .nav{padding:13px var(--pad)}
  .nav.solid{padding-top:9px;padding-bottom:9px}
  .nav-right{gap:15px}
  /* the stacked drop-shadows on two 2px bars render as a blob over a
     bright photo; the hero already carries a scrim, so one tight shadow does */
  .nav .burger span{filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
  .nav .burger::after{content:"";position:absolute;inset:-15px -11px}
  .nav .cta i{width:52px;min-height:46px}

  /* ---- menu ---- */
  .menu{padding:calc(var(--nav-h) + 22px) var(--pad) 30px}
  .menu .row{grid-template-columns:54px minmax(0,1fr);padding:16px 0}
  .menu .lab{font-size:clamp(1.75rem,8vw,2.6rem)}
  .menu .foot{margin-top:30px}
  .menu .foot a{display:inline-block;padding:14px 0}   /* 17px line box + 28px = 45px */

  /* ---- statements ---- */
  .statement{gap:16px}
  .statement h2{font-size:clamp(2rem,7.4vw,2.35rem);letter-spacing:-.03em;line-height:.92}
  .statement .said{font-size:1.02rem;line-height:1.58;margin-top:18px}
  .statement .said + .said{margin-top:14px}
  .marker{gap:12px;font-size:.72rem}
  .marker hr{flex:0 0 42px}

  /* ---- buttons become blocks: one action, full thumb width ---- */
  .btn{display:flex;width:100%;margin-top:26px}
  .btn b{flex:1 1 auto;padding:19px 20px;font-size:.82rem}
  .btn i{flex:0 0 58px;width:58px}
  .btns{display:block}
  .btns .btn{margin-top:14px}
  .btns .btn:first-child{margin-top:22px}

  /* ---- measures: the desktop cell is a tall box with a hole in the middle
         once it is one-up. Close the hole, run the rules wall to wall. ---- */
  .measures{margin:clamp(30px,6vw,42px) var(--bleed) 0;border-left:0;border-right:0}
  .measures > div{display:block;min-height:0;padding:24px var(--pad) 26px;
    border-bottom:1px solid var(--line)}
  .measures .fig{font-size:clamp(2.6rem,7.2vw,3.4rem);letter-spacing:-.05em;line-height:.86}
  .measures > div > div:last-child{display:flex;align-items:flex-end;
    justify-content:space-between;gap:18px;margin-top:14px}
  .measures .what{font-size:1.02rem;line-height:1.3}
  .measures .idx{margin-top:0;flex:0 0 auto;font-size:.72rem}

  /* ---- spaces: the photo leads, the letter and the status ride on it ---- */
  .spaces{margin:clamp(26px,5vw,40px) var(--bleed) 0;border-left:0;border-right:0}
  .space{grid-template-columns:1fr;grid-template-areas:"media" "body";
    gap:0;padding:0;align-items:stretch}
  .space .pic{grid-area:media;width:100%;aspect-ratio:3/2}
  .space .no{grid-area:media;align-self:start;justify-self:start;z-index:2;
    background:var(--paper);padding:11px 15px;min-width:56px;text-align:center;
    font-size:1rem;font-weight:600;letter-spacing:.03em}
  .space .end{grid-area:media;align-self:end;justify-self:stretch;z-index:2;
    flex-direction:row;align-items:center;justify-content:space-between;gap:12px;
    padding:30px 16px 14px;
    background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.74))}
  .space .sf{color:#fff;font-size:1.02rem}
  .space .tag.gone{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(0,0,0,.3)}
  .space > div:not(.no):not(.end){grid-area:body;padding:20px var(--pad) 26px}
  .space h3{font-size:1.26rem;line-height:1.08}
  /* drawn, not typed: U+2197 has emoji presentation on iOS even from content: */
.space h3::after{content:"";display:inline-block;width:.62em;height:.62em;
  margin-left:.34em;vertical-align:baseline;background:currentColor;opacity:.55;
  -webkit-mask:var(--arw) center/contain no-repeat;mask:var(--arw) center/contain no-repeat}
  .space p{font-size:.97rem;line-height:1.5;margin-top:9px}

  /* ---- gallery: an edge-to-edge rail you push with a thumb ---- */
  .gallery{display:flex;gap:8px;grid-template-columns:none;
    margin:clamp(26px,4vw,38px) var(--bleed) 0;padding:0 var(--pad);
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .gallery::-webkit-scrollbar{display:none}
  .gallery > figure,.gallery > figure.wide,.gallery > figure.tall{
    flex:0 0 78%;grid-column:auto;grid-row:auto;aspect-ratio:4/5;scroll-snap-align:start}
  /* the wide frames stay wide, so the rail has a rhythm rather than one gauge */
  .gallery > figure.wide{flex:0 0 92%;aspect-ratio:4/3}
  .gallery figcaption{padding:36px 15px 14px;font-size:.74rem}

  /* ---- a photograph in a gutter looks like an attachment ---- */
  .split{gap:24px}
  .split img{width:calc(100% + var(--pad) * 2);max-width:none;
    margin-inline:var(--bleed);aspect-ratio:3/2}
  .band{height:clamp(310px,56svh,430px)}
  .band .over{padding:44px var(--pad) 26px;
    background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.74))}
  .band h2{font-size:clamp(1.62rem,6.6vw,2.05rem);line-height:.98;max-width:17ch}

  /* ---- tables, questions, form ---- */
  .specs{margin-top:clamp(24px,4vw,36px)}
  .specs .row{padding:16px 0 18px}
  .specs .k{font-size:.72rem}
  .specs .v{font-size:1rem;line-height:1.5}
  /* a phone number or an address in a spec row is a real target, not prose */
  .specs .v a[href^="tel:"],.specs .v a[href^="mailto:"]{display:inline-block;padding:14px 0}
  .qa{margin-top:clamp(22px,4vw,34px)}
  .qa summary{padding:21px 40px 21px 0;font-size:1.02rem;line-height:1.26}
  .qa .ans{font-size:.97rem;line-height:1.6;padding-bottom:24px}
  .form{gap:16px;margin-top:clamp(24px,4vw,36px)}
  .form input,.form select,.form textarea{padding:16px 15px}
  .form select{background-position:calc(100% - 20px) 23px,calc(100% - 14px) 23px}
  .form button{display:flex;width:100%;margin-top:6px}
  .form button b{flex:1 1 auto;padding:19px 20px}
  .form button i{flex:0 0 58px;width:58px}

  .close h2{font-size:clamp(2.4rem,11vw,3.6rem)}
  .close p{font-size:1.02rem;margin-top:18px}

  /* ---- footer ---- */
  footer{gap:26px;padding:36px var(--pad) 42px;font-size:.94rem;line-height:1.75}
  footer > div{flex:1 1 100%}
  footer a{display:inline-block;padding:9px 0}   /* 26px line box + 18px = 44px */
  footer .foot-mark{max-width:148px;margin-bottom:12px}

  /* ---- marquee ---- */
  .marquee{padding:15px 0}
  .marquee .track{gap:34px}
  .marquee span{font-size:.92rem}

  /* ---- block plan ----
     The svg is a 760-unit viewBox. Squeezed into 350px its 13px bay labels
     render at 6px, which is not readable. It is given a real width inside a
     sideways scroller instead, with the legend and the hint pinned left so
     they do not slide away with it.

     blockplan.css loads AFTER this file, so only properties it does not set
     are safe to put here. Everything below is one of those. The cosmetic
     rest of the phone treatment belongs in blockplan.css itself. ---- */
  .plan-wrap > div:first-child{margin-inline:var(--bleed);
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .plan-wrap > div:first-child::-webkit-scrollbar{display:none}
  .plan svg{min-width:620px;margin:0 var(--pad)}   /* min-width, not width: blockplan sets width:100% */
  .plan-legend,.plan .plan-hint{position:sticky;left:0;
    width:calc(100vw - var(--pad) * 2);margin-left:var(--pad)}
  .plan-read .go{width:100%}
  .plan-read .go b{flex:1 1 auto}
}

/* one column, one big number, below 560 */
@media (max-width:560px){
  .measures{grid-template-columns:1fr}
  .measures > div{border-right:0}
  .measures > div:last-child{border-bottom:0}
  .measures .fig{font-size:clamp(3.3rem,15.4vw,4.6rem);line-height:.84}
}

/* ============================================================
   The thumb bar
   Fixed to the bottom once the hero is behind you, gone again
   when the contact form or the footer arrives, so it never
   covers the thing it is asking you to do.
   ============================================================ */
.tbar{display:none}
@media (max-width:760px){
  .tbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:54;
    background:var(--ink);align-items:stretch;
    transform:translateY(105%);transition:transform .4s var(--ease);
    padding-bottom:env(safe-area-inset-bottom,0px)}
  .tbar.on{transform:none}
  .tbar a{display:flex;align-items:center;min-height:58px;color:#fff;
    font-weight:600;font-size:.76rem;letter-spacing:.09em}

  .tbar .go{flex:1 1 auto;justify-content:space-between;padding-left:20px}
  .tbar .go i{flex:0 0 58px;background:var(--volt);color:var(--ink);
    display:grid;place-items:center;font-style:normal;font-size:1.05rem;align-self:stretch}
  .tbar a:focus-visible{outline-offset:-4px}
  /* the menu owns the screen while it is open */
  .menu.on ~ .tbar{transform:translateY(105%)}
}
@media (prefers-reduced-motion:reduce){ .tbar{transition:none} }


/* ---- the arrow is drawn, not typed ----
   U+2197 has emoji presentation on iOS, so the nav CTA rendered as a blue
   rounded-square emoji instead of a glyph. An inline SVG looks identical on
   every platform and inherits the button's colour. ---- */
.arw{width:15px;height:15px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter}
.nav .cta i .arw{width:14px;height:14px}


/* ---------------- designer credit ----------------
   A signature, not a second brand: it sits on its own line under the footer
   columns, in muted grey, and only comes up to full ink on hover. --mute, not
   --faint, because it is a link someone is meant to be able to read. */
.kb-credit{flex:1 1 100%;border-top:1px solid var(--hair);margin-top:4px;padding-top:6px}
.kb-credit a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  color:var(--mute);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;padding:13px 0;transition:color .25s var(--ease)}
.kb-credit a:hover{color:var(--ink)}
.kb-credit img{width:28px;height:auto;opacity:.55;transition:opacity .25s var(--ease)}
.kb-credit a:hover img{opacity:1}
.kb-credit a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* the hero had no call to action at all: the headline sold the room and then
   asked for nothing. The button is the site's standard .btn so it reads the
   same as every other action, just centred and lifted off the address line. */
.hero .hero-go{margin-top:clamp(20px,3vh,30px)}
.hero .hero-go b{background:rgba(6,6,6,.92);backdrop-filter:blur(2px)}
.hero .hero-go:focus-visible{outline:3px solid var(--volt);outline-offset:3px}
@media (max-width:560px){
  .hero .hero-go b{padding:15px 18px;font-size:.74rem}
  .hero .hero-go i{width:46px}
}