/* ═══════════════════════════════════════════════════════════
   VAU — warehouse leasing, north Houston
   Direction: the page as a measured architectural drawing.
   ═══════════════════════════════════════════════════════════ */

:root{
  --slab:      #E7E5DF;   /* concrete ground            */
  --panel:     #F1F0EB;   /* sheet / drawing panel      */
  --ink:       #15191D;   /* line work + body text      */
  --blueprint: #133150;   /* inverted section           */
  --chalk:     #BFD6E6;   /* text on blueprint          */
  --safety:    #FFC800;   /* the one accent             */
  --graphite:  #6D7278;   /* secondary text             */

  --hair: rgba(21,25,29,.15);
  --hair-2: rgba(21,25,29,.30);
  --hair-blue: rgba(191,214,230,.20);

  --display: 'Archivo', system-ui, sans-serif;
  --body: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --gut: clamp(1.25rem, 5vw, 5.5rem);
  --max: 1460px;

  --t-hero: clamp(2.3rem, 4.5vw, 4rem);
  --t-h2:   clamp(1.85rem, 3.3vw, 2.9rem);
  --t-h3:   clamp(1.05rem, 1.5vw, 1.32rem);
  --t-lede: clamp(1.01rem, 1.15vw, 1.16rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--slab);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{ margin:0; font-family:var(--display); line-height:1.02; }
p{ margin:0; }
ul,ol,dl,dd{ margin:0; padding:0; }
li{ list-style:none; }
a{ color:inherit; }

::selection{ background:var(--safety); color:var(--ink); }

.skip{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--ink); color:var(--panel); padding:.7rem 1.1rem;
  font-family:var(--mono); font-size:.8rem;
}
.skip:focus{ left:0; }

:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}
.sec-blue :focus-visible,.tb :focus-visible{ outline-color:var(--safety); }

/* ── shared type devices ───────────────────────────────── */

.eyebrow{
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--graphite);
  margin-bottom:1.5rem;
  display:flex;
  align-items:center;
  gap:.7rem;
}
.eyebrow::before{
  content:"";
  width:1.6rem; height:1px;
  background:currentColor;
  flex:0 0 auto;
}
.eyebrow-hi{ color:var(--safety); }

.sec-h2{
  font-size:var(--t-h2);
  font-variation-settings:'wdth' 112,'wght' 760;
  letter-spacing:-.018em;
  text-wrap:balance;
}

.sec-lede{
  font-size:var(--t-lede);
  color:var(--graphite);
  max-width:44ch;
  margin-top:1.35rem;
}
.sec-blue .sec-lede{ color:var(--chalk); }

/* ── buttons ───────────────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono);
  font-size:.8rem; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase;
  text-decoration:none;
  padding:1rem 1.6rem;
  border:1px solid var(--ink);
  transition:transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn-solid{ background:var(--safety); border-color:var(--safety); color:var(--ink); }
.btn-solid:hover{ background:var(--ink); border-color:var(--ink); color:var(--safety); }

.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--panel); }

.btn-line{ background:transparent; border-color:var(--hair-blue); color:var(--chalk); }
.btn-line:hover{ background:var(--chalk); color:var(--blueprint); border-color:var(--chalk); }

.btn-big{ font-size:1.05rem; padding:1.25rem 2.4rem; letter-spacing:.05em; }

/* ── top bar ───────────────────────────────────────────── */

.bar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:2rem;
  padding:.85rem var(--gut);
  border-bottom:1px solid transparent;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.bar.stuck{
  background:rgba(231,229,223,.88);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--hair);
}

.brand{
  display:flex; align-items:center; gap:.62rem;
  text-decoration:none; color:var(--ink);
  margin-right:auto;
}
.brand-mark{ width:34px; height:20px; display:block; }
.brand-word{
  font-family:var(--display);
  font-size:1.32rem;
  font-variation-settings:'wdth' 122,'wght' 800;
  letter-spacing:.02em;
}

.bar-nav{ display:flex; gap:1.9rem; }
.bar-nav a{
  font-family:var(--mono);
  font-size:.76rem; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; color:var(--graphite);
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.bar-nav a:hover{ color:var(--ink); border-bottom-color:var(--safety); }

.bar-call{
  display:flex; align-items:baseline; gap:.6rem;
  text-decoration:none;
  font-family:var(--mono); font-size:.82rem; font-weight:500;
  padding:.55rem .95rem;
  border:1px solid var(--hair-2);
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
.bar-call:hover{ background:var(--safety); border-color:var(--safety); }
.bar-call-label{ font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--graphite); }
.bar-call:hover .bar-call-label{ color:var(--ink); }

/* ── hero ──────────────────────────────────────────────── */

.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  align-items:center;
  gap:clamp(2rem,4vw,4.5rem);
  padding:clamp(2.5rem,5vw,4.5rem) var(--gut) clamp(3rem,6vw,6rem);
  max-width:var(--max);
  margin-inline:auto;
}

.hero-h1{
  font-size:var(--t-hero);
  font-variation-settings:'wdth' 116,'wght' 800;
  letter-spacing:-.028em;
  text-transform:uppercase;
}
.hero-h1 em{
  font-style:normal;
  font-variation-settings:'wdth' 78,'wght' 500;
  color:var(--graphite);
}

.hero-sub{
  margin-top:1.8rem;
  font-size:var(--t-lede);
  color:var(--graphite);
  max-width:38ch;
}

.hero-cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.3rem; }

.hero-plan{ margin:0; }
.plan{
  display:block; width:100%; height:auto;
  background:var(--panel);
  border:1px solid var(--hair);
}
.plan-cap{
  font-family:var(--mono);
  font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--graphite);
  margin-top:.75rem;
  text-align:right;
}

/* ── the drawing ───────────────────────────────────────── */

.p-shell{ stroke:var(--ink); stroke-width:2.4; }
.p-part line{ stroke:var(--ink); stroke-width:1; stroke-dasharray:0; opacity:.55; }
.p-thin line{ stroke-width:1; }
.p-dim line{ stroke:var(--ink); stroke-width:1.1; }
.p-dim-hi line{ stroke:var(--ink); stroke-width:1.6; }

.p-num{
  font-family:var(--mono); font-size:14px; font-weight:500;
  fill:var(--ink);
  paint-order:stroke; stroke:var(--panel); stroke-width:7px; stroke-linejoin:round;
}
.p-dim-hi .p-num{ stroke:var(--slab); }

.p-bub circle{ fill:var(--panel); stroke:var(--ink); stroke-width:1; opacity:.55; }
.p-bub text{ font-family:var(--mono); font-size:11px; fill:var(--ink); opacity:.75; }

.p-bay{ transform-box:fill-box; transform-origin:left center; }

.p-tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  fill:var(--ink); opacity:.45;
}
.p-tag-solid{ opacity:.9; font-weight:500; }
.p-avail{
  font-family:var(--display); font-size:26px;
  font-variation-settings:'wdth' 118,'wght' 800;
  letter-spacing:.02em; fill:var(--ink);
}
.p-avail-sub{ font-family:var(--mono); font-size:14px; font-weight:500; fill:var(--ink); }

.p-door rect{ fill:var(--ink); }
.p-court rect{ stroke:var(--ink); stroke-width:1; opacity:.5; }
.p-stall line{ stroke:var(--ink); stroke-width:1; opacity:.28; }
.p-north path{ fill:var(--ink); opacity:.6; }
.p-north text{ font-family:var(--mono); font-size:11px; fill:var(--ink); opacity:.6; }
.p-scale rect{ fill:var(--ink); opacity:.7; }
.p-scale .p-scale-alt{ fill:none; stroke:var(--ink); stroke-width:1; opacity:.7; }
.p-note{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.11em;
  fill:var(--graphite);
}

/* plotter draw-on */
.dr{ stroke-dasharray:1; stroke-dashoffset:1; animation:draw .85s var(--ease) forwards; animation-delay:var(--d,0s); }
.fade{ opacity:0; animation:fadein .6s var(--ease) forwards; animation-delay:var(--d,0s); }
.p-bay{ transform:scaleX(0); animation:bayin .55s var(--ease) forwards; animation-delay:.95s; }
.p-mesh{ opacity:0; animation:fadein 1.2s var(--ease) forwards; animation-delay:.1s; }

@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fadein{ to{ opacity:1; } }
@keyframes bayin{ to{ transform:scaleX(1); } }

/* ── spec strip ────────────────────────────────────────── */

.strip{
  background:var(--safety);
  border-block:1px solid var(--ink);
  overflow:hidden;
  padding:.85rem 0;
}
.strip-track{
  display:flex; align-items:center; gap:1.6rem;
  width:max-content;
  font-family:var(--mono);
  font-size:.82rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
  white-space:nowrap;
  animation:marquee 42s linear infinite;
}
.strip-track b{ opacity:.4; font-weight:400; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ── sections ──────────────────────────────────────────── */

.sec{
  padding:clamp(4rem,8vw,8rem) var(--gut);
  max-width:var(--max);
  margin-inline:auto;
}
.sec-head{ max-width:52rem; margin-bottom:clamp(2.5rem,4vw,4rem); }

/* ── what fits ─────────────────────────────────────────── */

.fits{ border-top:1px solid var(--hair-2); }
.fit{
  display:grid;
  grid-template-columns:minmax(0,21rem) minmax(0,1fr);
  gap:clamp(1rem,3vw,3rem);
  align-items:baseline;
  padding:1.55rem .9rem 1.55rem 1.1rem;
  border-bottom:1px solid var(--hair);
  position:relative;
  transition:background .22s var(--ease);
}
.fit::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--safety);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .28s var(--ease);
}
.fit:hover{ background:rgba(255,200,0,.09); }
.fit:hover::before{ transform:scaleY(1); }
.fit h3{
  font-size:var(--t-h3);
  font-variation-settings:'wdth' 106,'wght' 640;
  letter-spacing:-.008em;
}
.fit p{ color:var(--graphite); max-width:52ch; }

/* ── blueprint section ─────────────────────────────────── */

.sec-blue{
  background:var(--blueprint);
  color:var(--chalk);
  max-width:none;
}
.sec-blue .sec-h2,.sec-blue .how-h{ color:#F3F8FC; }
.sec-blue > *{ max-width:var(--max); margin-inline:auto; }

.blue-grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2.5rem,5vw,6rem);
  align-items:start;
}
.blue-intro .btn{ margin-top:2.2rem; }

.specs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(2rem,4vw,3.5rem);
}
.spec{
  display:grid;
  grid-template-columns:auto minmax(1rem,1fr) auto;
  align-items:baseline;
  padding:.78rem 0;
  border-bottom:1px solid var(--hair-blue);
}
.spec::before{
  content:"";
  grid-column:2;
  border-bottom:1px dotted rgba(191,214,230,.35);
  margin:0 .6rem;
  transform:translateY(-.28em);
}
.spec dt{
  grid-column:1;
  font-family:var(--mono);
  font-size:.72rem; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(191,214,230,.72);
}
.spec dd{
  grid-column:3;
  font-family:var(--mono);
  font-size:.86rem; font-weight:500;
  color:#EAF3F9;
  white-space:nowrap;
}
.spec .hi{ color:var(--safety); }

.how{
  margin-top:clamp(3.5rem,6vw,6rem);
  padding-top:clamp(2.5rem,4vw,3.5rem);
  border-top:1px solid var(--hair-blue);
}
.how-h{
  font-size:clamp(1.3rem,2.1vw,1.85rem);
  font-variation-settings:'wdth' 100,'wght' 620;
  letter-spacing:-.012em;
  max-width:26ch;
  line-height:1.2;
}
.how-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:clamp(1.5rem,3vw,3rem);
  margin-top:2.5rem;
}
.how-step{
  display:block;
  font-family:var(--mono);
  font-size:.7rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--safety);
  padding-bottom:.85rem;
  margin-bottom:.95rem;
  border-bottom:1px solid var(--hair-blue);
}
.how-list p{ color:var(--chalk); font-size:.97rem; }

/* ── location ──────────────────────────────────────────── */

.loc{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2.5rem,5vw,5rem);
  align-items:start;
}
.loc-note{
  margin-top:1.6rem;
  padding-left:1.15rem;
  border-left:3px solid var(--safety);
  color:var(--graphite);
  max-width:46ch;
}
.loc-text .btn{ margin-top:2.2rem; border-color:var(--ink); color:var(--ink); }
.loc-text .btn:hover{ background:var(--ink); color:var(--panel); }

.loc-facts{ border-top:1px solid var(--hair-2); }
.loc-facts li{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
  padding:1.05rem .2rem;
  border-bottom:1px solid var(--hair);
}
.loc-facts span{
  font-family:var(--mono);
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--graphite);
}
.loc-facts b{
  font-family:var(--mono);
  font-size:.86rem; font-weight:500;
  text-align:right;
}

/* ── call band ─────────────────────────────────────────── */

.band{
  background:var(--safety);
  border-top:1px solid var(--ink);
  padding:clamp(4rem,7vw,7rem) var(--gut);
}
.band-in{ max-width:var(--max); margin-inline:auto; }
.band-h{
  font-size:var(--t-h2);
  font-variation-settings:'wdth' 114,'wght' 780;
  letter-spacing:-.022em;
  max-width:20ch;
  text-transform:uppercase;
}
.band-p{ margin-top:1.4rem; max-width:44ch; color:rgba(21,25,29,.72); }
.band .btn{ margin-top:2.4rem; background:var(--ink); border-color:var(--ink); color:var(--safety); }
.band .btn:hover{ background:transparent; color:var(--ink); }

/* ── title block ───────────────────────────────────────── */

.tb{
  background:var(--ink);
  color:#D9DBDD;
  padding:clamp(2.5rem,5vw,4.5rem) var(--gut) 2.5rem;
}
.tb-frame{
  max-width:var(--max); margin-inline:auto;
  border:1px solid rgba(217,219,221,.28);
}
.tb-row{ display:flex; flex-wrap:wrap; border-bottom:1px solid rgba(217,219,221,.28); }
.tb-row:last-child{ border-bottom:0; }
.tb-cell{
  flex:1 1 12rem;
  min-width:0;
  padding:1rem 1.2rem;
  border-right:1px solid rgba(217,219,221,.28);
}
.tb-cell:last-child{ border-right:0; }
.tb-wide{ flex:2.4 1 20rem; }
.tb-key{
  display:block;
  font-family:var(--mono);
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(217,219,221,.52);
  margin-bottom:.4rem;
}
.tb-val{
  display:block;
  font-family:var(--mono);
  font-size:.92rem; font-weight:500;
  color:#F2F4F5;
}
.tb-link{ text-decoration:none; border-bottom:1px solid var(--safety); }
.tb-link:hover{ color:var(--safety); }

.tb-row-top .tb-logo{ flex:0 0 auto; display:flex; align-items:center; gap:.6rem; padding:1.15rem 1.5rem; }
.tb-mark{ width:34px; height:20px; display:block; color:#F2F4F5; }
.tb-word{
  font-family:var(--display);
  font-size:1.5rem;
  font-variation-settings:'wdth' 122,'wght' 800;
  color:#F2F4F5;
}
.tb-sheet .tb-val{ color:var(--safety); }

.tb-fine{
  max-width:var(--max); margin:1.6rem auto 0;
  font-family:var(--mono);
  font-size:.66rem; line-height:1.75; letter-spacing:.04em;
  color:rgba(217,219,221,.58);
  max-inline-size:80ch;
}

/* ── scroll reveal ─────────────────────────────────────── */

.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.fits .reveal{ transition-delay:calc(var(--i,0) * 60ms); }

/* ── responsive ────────────────────────────────────────── */

@media (max-width:1080px){
  .hero{ grid-template-columns:1fr; gap:2.75rem; }
  .hero-sub,.hero-h1{ max-width:34ch; }
  .blue-grid,.loc{ grid-template-columns:1fr; }
  .plan-cap{ text-align:left; }
}

@media (max-width:820px){
  .bar-nav{ display:none; }
  .bar-call-label{ display:none; }
  .fit{ grid-template-columns:1fr; gap:.5rem; }
  .specs{ grid-template-columns:1fr; }
  .p-tag,.p-note,.p-bub text{ display:none; }
  .p-num{ font-size:18px; }
  .p-avail{ font-size:32px; }
  .p-avail-sub{ font-size:18px; }
}

@media (max-width:560px){
  body{ font-size:16px; }
  .hero-cta .btn{ flex:1 1 100%; }
  .tb-cell{ flex:1 1 100%; border-right:0; border-bottom:1px solid rgba(217,219,221,.28); }
  .tb-cell:last-child{ border-bottom:0; }
  .loc-facts li{ flex-direction:column; gap:.3rem; }
  .loc-facts b{ text-align:left; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .dr,.fade,.p-bay,.p-mesh,.strip-track{ animation:none !important; }
  .dr{ stroke-dashoffset:0; }
  .fade,.p-mesh{ opacity:1; }
  .p-bay{ transform:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn:hover{ transform:none; }
}