/* ============================================================
   AR SIGNATURE — shared stylesheet
   neo-brutalist system: hard borders, offset shadows, no gradients
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --black:#0B0B0B;
  --yellow:#FFDD33;
  --blue:#3B2AFF;
  --coral:#FF5C3D;
  --mint:#00C98A;
  --cream:#FFF6E0;
  --pink:#FF8FC7;
  --lilac:#B8A9FF;
  --grey:#B9B4A6;
  --paper:#FFFDF5;

  --bd:2.5px solid var(--black);
  --bd-thin:2px solid var(--black);
  --sh-sm:3px 3px 0 var(--black);
  --sh:5px 5px 0 var(--black);
  --sh-lg:8px 8px 0 var(--black);

  --disp:"Big Shoulders Display",system-ui,sans-serif;
  --body:"Space Grotesk",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;

  --pad:clamp(16px,4vw,44px);
  --gap:clamp(26px,3vw,44px);
  --sec:clamp(46px,5.4vw,86px);
  --ease:cubic-bezier(.2,.8,.2,1);
  --pop:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:78px}
body{
  background:var(--cream);color:var(--black);font-family:var(--body);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:radial-gradient(var(--black) 1.1px,transparent 1.2px);
  background-size:22px 22px;
}
a{color:inherit;text-decoration:none}
u{text-decoration-thickness:2px;text-underline-offset:3px}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
svg{display:block}
img{max-width:100%;display:block}
:focus-visible{outline:4px solid var(--blue);outline-offset:3px}
::selection{background:var(--blue);color:#fff}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   MOTION PRIMITIVES
   ============================================================ */
[data-reveal]{
  opacity:0;transform:translateY(30px);
  transition:opacity .66s var(--ease),transform .66s var(--ease);
  transition-delay:var(--d,0ms);will-change:opacity,transform;
}
[data-reveal="left"]{transform:translateX(-34px)}
[data-reveal="right"]{transform:translateX(34px)}
[data-reveal="pop"]{transform:scale(.86) rotate(-3deg);transition-timing-function:var(--pop)}
[data-reveal="wipe"]{opacity:1;clip-path:inset(0 100% 0 0);transform:none;transition:clip-path .8s var(--ease)}
/* narrow screens have no room to slide sideways — go vertical instead */
@media(max-width:700px){[data-reveal="left"],[data-reveal="right"]{transform:translateY(30px)}}
[data-reveal].in{opacity:1;transform:none}
/* only the wipe variant clips — a blanket clip-path cuts off anything that
   deliberately overflows a revealed container (e.g. the hero sticker) */
[data-reveal="wipe"].in{clip-path:inset(0 0 0 0)}

.mask{display:block;overflow:hidden}
.mask>*{display:block;transform:translateY(105%);transition:transform .8s var(--ease);transition-delay:var(--d,0ms)}
.in>.mask>*,.mask.in>*{transform:none}

.word{display:inline-block;transform:translateY(102%) rotate(4deg);opacity:0;
  transition:transform .7s var(--ease),opacity .5s linear;transition-delay:calc(var(--i,0)*46ms)}
.split.in .word{transform:none;opacity:1}
.split{overflow:hidden;padding-bottom:.06em}

@keyframes float{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-9px) rotate(var(--r,0deg))}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
@keyframes stampin{0%{transform:scale(2.4) rotate(-16deg);opacity:0}60%{transform:scale(.92) rotate(-6deg);opacity:1}100%{transform:scale(1) rotate(-4deg)}}

/* ============================================================
   CHROME
   ============================================================ */

/* scroll progress */
.prog{position:fixed;top:0;left:0;height:5px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:var(--coral);border-bottom:2px solid var(--black);z-index:120}

/* custom cursor (fine pointers only, added by JS) */
.cur,.cur-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:130;border-radius:50%;
  transform:translate(-50%,-50%);opacity:0;transition:opacity .25s}
.cur{width:9px;height:9px;background:var(--black)}
.cur-ring{width:34px;height:34px;border:var(--bd-thin);
  transition:width .2s var(--pop),height .2s var(--pop),background .2s,opacity .25s}
.cur-on .cur,.cur-on .cur-ring{opacity:1}
.cur-ring.hot{width:60px;height:60px;background:var(--yellow)}

/* page wipe */
.wipe{position:fixed;inset:0;z-index:140;display:grid;grid-template-columns:repeat(5,1fr);pointer-events:none}
.wipe i{background:var(--black);transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .38s var(--ease);transition-delay:calc(var(--n)*40ms)}
.wipe i:nth-child(2){background:var(--blue)}
.wipe i:nth-child(3){background:var(--coral)}
.wipe i:nth-child(4){background:var(--yellow)}
.wipe i:nth-child(5){background:var(--mint)}
.wipe.nt i{transition:none}
.wipe.out i{transform:scaleY(1);transform-origin:50% 0}
.wipe.in i{transform:scaleY(1)}
.wipe.clear i{transform:scaleY(0);transform-origin:50% 100%}

/* ---------- marquee tape ---------- */
.tape{background:var(--black);color:var(--yellow);border-bottom:var(--bd);overflow:hidden;padding:8px 0}
.tape .run{display:flex;width:max-content;animation:run var(--sp,30s) linear infinite}
.tape:hover .run{animation-play-state:paused}
.tape span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;padding:0 16px;white-space:nowrap}
.tape span::after{content:"◆";margin-left:16px;color:var(--coral)}
.tape--rev .run{animation-direction:reverse}
.tape--band{background:var(--blue);color:#fff;border-top:var(--bd)}
.tape--band span::after{color:var(--yellow)}
.tape--big span{font-family:var(--disp);font-weight:800;font-size:clamp(26px,3.6vw,50px);
  line-height:1.06;letter-spacing:.01em;text-transform:uppercase;padding:0 20px}
.tape--big span::after{font-size:.5em;vertical-align:middle}
@keyframes run{to{transform:translateX(-50%)}}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:100;background:var(--cream);border-bottom:var(--bd);
  transition:box-shadow .2s,background .2s}
.nav.stuck{box-shadow:0 5px 0 var(--black)}
.nav-in{display:flex;align-items:center;gap:14px;height:60px}
.logo{font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:.01em;display:flex;align-items:center;gap:6px}
.logo b{background:var(--blue);color:#fff;padding:1px 8px;border:var(--bd);display:inline-block;
  transform:rotate(-2.5deg);transition:transform .2s var(--pop),background .2s}
.logo:hover b{transform:rotate(3deg) scale(1.04);background:var(--coral)}
.nav .sp{margin-left:auto}
.menu{display:none;gap:4px;align-items:center}
@media(min-width:900px){.menu{display:flex}}
.menu a{font-weight:700;font-size:14px;padding:7px 12px;border:2px solid transparent;position:relative}
.menu a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2.5px;background:var(--black);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .28s var(--ease)}
.menu a:hover::after{transform:scaleX(1)}
.menu a[aria-current="page"]{background:var(--yellow);border:var(--bd);box-shadow:var(--sh-sm)}
.menu a[aria-current="page"]::after{display:none}
.social{display:none;gap:5px;align-items:center}
@media(min-width:900px){.social{display:flex}}
.soc{width:32px;height:32px;border:var(--bd);background:var(--cream);box-shadow:2px 2px 0 var(--black);
  display:grid;place-items:center;transition:transform .14s,box-shadow .14s,background .16s}
.soc svg{width:15px;height:15px;fill:var(--black);transition:fill .16s}
.soc:hover{transform:translate(2px,2px);box-shadow:0 0 0 var(--black)}
.soc:nth-child(1):hover{background:var(--blue)}
.soc:nth-child(2):hover{background:var(--pink)}
.soc:nth-child(3):hover{background:var(--mint)}
.soc:nth-child(4):hover{background:var(--black)}
.soc:nth-child(1):hover svg,.soc:nth-child(4):hover svg{fill:var(--cream)}
.burger{display:grid;place-items:center;width:44px;height:40px;border:var(--bd);background:var(--cream);box-shadow:var(--sh-sm)}
@media(min-width:900px){.burger{display:none}}
.burger i{display:block;width:20px;height:2.5px;background:var(--black);position:relative;transition:transform .25s var(--ease)}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:20px;height:2.5px;background:var(--black);
  transition:transform .25s var(--ease),top .2s}
.burger i::before{top:-6px}.burger i::after{top:6px}
.burger[aria-expanded="true"] i{transform:rotate(45deg)}
.burger[aria-expanded="true"] i::before{top:0;transform:rotate(-90deg)}
.burger[aria-expanded="true"] i::after{top:0;opacity:0}

.drawer{position:fixed;inset:0 0 0 auto;width:min(340px,86vw);z-index:110;background:var(--cream);
  border-left:var(--bd);padding:26px 24px;transform:translateX(101%);transition:transform .38s var(--ease);
  display:flex;flex-direction:column;gap:6px;box-shadow:-8px 0 0 rgba(11,11,11,.08)}
.drawer.open{transform:none}
.drawer a{font-family:var(--disp);font-weight:800;font-size:32px;text-transform:uppercase;
  border-bottom:var(--bd-thin);padding:12px 0;transition:padding-left .2s var(--ease),background .2s}
.drawer a:hover{padding-left:10px;background:var(--yellow)}
.drawer a[aria-current="page"]{color:var(--blue)}
.drawer .dcall{margin-top:auto;text-align:center}
.drawer .social{display:flex;justify-content:center;gap:9px;margin-top:16px}
.drawer .soc{width:46px;height:46px;box-shadow:var(--sh-sm)}
.drawer .soc svg{width:21px;height:21px}
.scrim{position:fixed;inset:0;background:rgba(11,11,11,.5);z-index:105;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}

/* ---------- buttons ---------- */
.big{font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:.02em;text-transform:uppercase;
  border:var(--bd);box-shadow:var(--sh);padding:13px 22px;display:inline-block;position:relative;
  transition:transform .14s var(--ease),box-shadow .14s var(--ease)}
.big:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--black)}
.big:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--black)}
.big.b1{background:var(--blue);color:#fff}
.big.b2{background:var(--cream)}
.big.b3{background:var(--yellow);color:var(--black)}
.big .arw{display:inline-block;transition:transform .24s var(--pop)}
.big:hover .arw{transform:translateX(6px)}

/* ---------- section furniture ---------- */
h1{font-family:var(--disp);font-weight:900;font-size:clamp(30px,5.4vw,64px);line-height:.95;
  letter-spacing:-.005em;text-transform:uppercase}
h2{font-family:var(--disp);font-weight:900;font-size:clamp(28px,3.5vw,50px);line-height:.98;
  letter-spacing:-.005em;text-transform:uppercase;margin-bottom:12px}
h3{font-family:var(--disp);font-weight:800;font-size:24px;text-transform:uppercase}
.sub{font-weight:500;max-width:46ch;margin-bottom:30px}
.eyebrow{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;
  background:var(--mint);border:var(--bd);padding:6px 11px;transform:rotate(-2deg);margin-bottom:18px}
.eyebrow--y{background:var(--yellow)}
.eyebrow--p{background:var(--pink)}
.eyebrow--l{background:var(--lilac)}

/* page header (inner pages) */
.phead{border-bottom:var(--bd);padding:clamp(34px,4.4vw,64px) 0 clamp(30px,3.6vw,52px);position:relative;overflow:hidden}
.phead--y{background:var(--yellow)}
.phead--m{background:var(--mint)}
.phead--l{background:var(--lilac)}
.phead--p{background:var(--pink)}
.phead p{max-width:44ch;font-weight:500;font-size:clamp(15px,1.3vw,18px);margin-top:18px}
/* a standfirst in two columns (the Reads index), kept clear of the header's sticker on the right */
.phead-cols{display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px}
@media(min-width:760px){.phead-cols{grid-template-columns:1fr 1fr;gap:0 44px;max-width:min(1000px,calc(100% - 170px))}}
.phead .phead-cols p{max-width:none;margin:0}
.crumb{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;margin-bottom:14px}
.crumb b{color:var(--blue)}
.phead .blob{position:absolute;right:4%;top:50%;margin-top:-66px;pointer-events:none}
@media(max-width:760px){.phead .blob{display:none}}

/* rotating sticker */
.sticker{width:112px;height:112px;position:relative;display:grid;place-items:center;flex:none;
  overflow:hidden}  /* the spin animation widens the svg bbox past the square otherwise */
.sticker::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--cream);
  border:var(--bd);z-index:0}
.sticker svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;animation:spin 16s linear infinite}
.sticker i{position:relative;z-index:2}
.sticker text{font-family:var(--mono);font-size:11.4px;font-weight:700;letter-spacing:.16em;fill:var(--black)}
.sticker i{width:58px;height:58px;background:var(--coral);border:var(--bd);border-radius:50%;
  display:grid;place-items:center;font-family:var(--disp);font-weight:900;font-size:22px;color:#fff;font-style:normal}

/* ---------- stat band ---------- */
.stats{border-top:var(--bd);border-bottom:var(--bd);background:var(--black);color:var(--cream)}
.stats-in{display:grid;grid-template-columns:repeat(2,1fr)}
@media(min-width:840px){.stats-in{grid-template-columns:repeat(4,1fr)}}
.stat{padding:26px 20px;border-right:var(--bd);border-bottom:var(--bd);text-align:center;transition:background .2s,color .2s}
.stat:hover{background:var(--yellow);color:var(--black)}
@media(min-width:840px){.stat{border-bottom:0}.stat:last-child{border-right:0}}
@media(max-width:839px){.stat:nth-child(2n){border-right:0}.stat:nth-child(n+3){border-bottom:0}}
.stat b{display:block;font-family:var(--disp);font-weight:900;font-size:clamp(38px,5vw,64px);line-height:.9;color:var(--yellow)}
.stat:hover b{color:var(--black)}
.stat span{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;display:block;margin-top:9px}

/* ---------- cards grid ---------- */
.cards{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:840px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--cream);border:var(--bd);box-shadow:var(--sh);padding:20px 19px 22px;position:relative;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.card.in:nth-child(1){transform:rotate(-1.2deg)}
.card.in:nth-child(2){transform:rotate(.8deg)}
.card.in:nth-child(3){transform:rotate(-.6deg)}
.card.in:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.card .no{font-family:var(--mono);font-weight:700;font-size:11px;background:var(--black);color:var(--yellow);
  padding:3px 9px;display:inline-block;margin-bottom:13px}
.card h3{margin-bottom:8px}
.card p{font-size:14.5px}
.card .line{height:2.5px;background:var(--black);margin-top:16px;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .4s var(--ease)}
.card:hover .line{transform:scaleX(1)}

/* ---------- who we work with ---------- */
.auds{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:700px){.auds{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.auds{grid-template-columns:repeat(3,1fr)}}
.aud{border:var(--bd);box-shadow:var(--sh);padding:22px 20px 24px;background:var(--cream);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.aud:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.aud .ic{width:46px;height:46px;border:var(--bd);background:var(--cream);
  display:grid;place-items:center;margin-bottom:15px}
.aud .ic svg{width:24px;height:24px;fill:none;stroke:var(--black);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.aud h3{font-size:23px;line-height:1;margin-bottom:9px}
.aud p{font-size:14.5px}
.aud:nth-child(1){background:var(--yellow)}
.aud:nth-child(2){background:var(--mint)}
.aud:nth-child(3){background:var(--pink)}
.aud:nth-child(4){background:var(--lilac)}
.aud:nth-child(5){background:var(--coral);color:#fff}
.aud:nth-child(5) .ic{background:var(--cream);color:var(--black)}
.aud:nth-child(6){background:var(--blue);color:#fff}
.aud:nth-child(6) .ic{background:var(--cream);color:var(--black)}

/* ---------- tiles ---------- */
.tiles{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.tile{background:var(--cream);color:var(--black);border:var(--bd);box-shadow:var(--sh-sm);padding:18px 16px;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.tile:hover{transform:translate(-2px,-3px);box-shadow:var(--sh)}
.tile b{font-family:var(--disp);font-weight:800;font-size:19px;text-transform:uppercase;display:block;margin-bottom:5px}
.tile span{font-size:13.5px}
.tile:nth-child(2){background:var(--pink)}
.tile:nth-child(3){background:var(--mint)}

/* ---------- carousel ---------- */
.car{position:relative;border:var(--bd);box-shadow:7px 7px 0 var(--black);overflow:hidden;background:var(--black);
  touch-action:pan-y;cursor:grab}
.car.drag{cursor:grabbing}
.car .track{display:flex;position:relative;z-index:1;transition:transform .55s var(--ease)}
.car.drag .track{transition:none}
.slide{min-width:100%;aspect-ratio:3/2;position:relative}
.slide svg,.slide img{width:100%;height:100%;object-fit:cover}
.slide-tag{position:absolute;top:14px;left:14px;z-index:2;display:flex;flex-direction:column;
  align-items:flex-start;gap:7px;max-width:calc(100% - 28px)}
.pin{position:absolute;z-index:3;background:var(--cream);border:var(--bd-thin);
  box-shadow:3px 3px 0 var(--black);padding:6px 10px 7px;transform:rotate(var(--r,0deg));
  animation:float 7s ease-in-out infinite;animation-delay:var(--dl,0s);max-width:46%}
.pin i{display:block;font-style:normal;font-family:var(--mono);font-size:8px;font-weight:700;
  letter-spacing:.14em;color:#5a564c}
.pin b{display:block;font-family:var(--disp);font-weight:900;font-size:clamp(13px,1.15vw,17px);
  line-height:1.05;margin-top:2px;white-space:nowrap}
.pin--y{background:var(--yellow)}
.pin--m{background:var(--mint)}
.pin--p{background:var(--pink)}
.pin--c{background:var(--cream)}
.pin:nth-of-type(2){--dl:1.2s}
.pin:nth-of-type(3){--dl:2.4s}
.pin:nth-of-type(4){--dl:3.6s}
@media(max-width:700px){
  .pin{padding:4px 7px;box-shadow:2px 2px 0 var(--black)}
  .pin i{font-size:6.5px;letter-spacing:.1em}
  .pin b{font-size:11.5px;margin-top:1px}
  .slide-tag{top:10px;left:10px;gap:5px}
  .slide-tag b{padding:5px 8px 6px}
}
.slide-tag b{font-family:var(--disp);font-weight:900;font-size:clamp(15px,1.55vw,21px);line-height:1;
  text-transform:uppercase;background:var(--yellow);border:var(--bd);box-shadow:var(--sh-sm);
  padding:7px 11px 8px;transform:rotate(-1.6deg)}
.slide-tag i{font-style:normal;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.09em;
  background:var(--cream);border:var(--bd-thin);box-shadow:2px 2px 0 var(--black);padding:5px 9px;
  transform:rotate(.9deg)}
.slide:nth-child(2) .slide-tag b{background:var(--mint)}
.slide:nth-child(3) .slide-tag b{background:var(--pink)}
.slide:nth-child(4) .slide-tag b{background:var(--lilac)}
.arrows{position:absolute;right:0;bottom:0;display:flex;border-left:var(--bd);border-top:var(--bd);z-index:3}
.arrows button{width:42px;height:40px;background:var(--cream);font-family:var(--disp);font-weight:900;font-size:22px;
  line-height:1;transition:background .16s}
.arrows button+button{border-left:var(--bd)}
.arrows button:hover{background:var(--yellow)}
.bar{position:absolute;left:0;right:0;top:0;height:5px;background:rgba(11,11,11,.18);z-index:3}
.bar i{display:block;height:100%;background:var(--coral);width:0;border-right:2px solid var(--black)}
.bar i.go{transition:width linear}
/* ---------- project cards ---------- */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:28px}
.chip{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border:var(--bd);background:var(--cream);padding:8px 14px;box-shadow:var(--sh-sm);
  transition:transform .14s,box-shadow .14s,background .16s}
.chip:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--black)}
.chip[aria-pressed="true"]{background:var(--black);color:var(--yellow)}
.empty{border:2px dashed var(--black);padding:40px 20px;text-align:center;font-family:var(--mono);
  font-size:12px;letter-spacing:.1em;font-weight:700}

/* ---------- timeline ---------- */
.tl{position:relative;padding-left:52px}
.tl::before{content:"";position:absolute;left:17px;top:6px;bottom:6px;width:4px;background:rgba(11,11,11,.16)}
.tl .fill{position:absolute;left:17px;top:6px;width:4px;background:var(--coral);height:0;
  border-right:1px solid var(--black)}
.tl-item{position:relative;padding-bottom:34px}
.tl-item:last-child{padding-bottom:0}
.tl-item .dot{position:absolute;left:-52px;top:0;width:38px;height:38px;border:var(--bd);border-radius:50%;
  background:var(--cream);display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:13px;
  transition:background .3s,transform .3s var(--pop)}
.tl-item.on .dot{background:var(--coral);color:#fff;transform:scale(1.12)}
.tl-item h3{margin-bottom:5px}
.tl-item p{max-width:52ch;font-size:15px}

/* ---------- accordion ---------- */
.acc{border:var(--bd);box-shadow:var(--sh);background:var(--cream)}
.acc-item+.acc-item{border-top:var(--bd)}
.acc-q{width:100%;text-align:left;display:flex;gap:14px;align-items:center;padding:17px 18px;
  font-family:var(--disp);font-weight:800;font-size:20px;text-transform:uppercase;transition:background .18s}
.acc-q:hover{background:var(--yellow)}
.acc-q .pm{margin-left:auto;flex:none;width:26px;height:26px;border:var(--bd-thin);display:grid;place-items:center;
  font-family:var(--mono);font-size:16px;line-height:1;transition:transform .3s var(--pop),background .2s}
.acc-q[aria-expanded="true"]{background:var(--black);color:var(--yellow)}
.acc-q[aria-expanded="true"] .pm{transform:rotate(135deg);background:var(--yellow);color:var(--black);border-color:var(--yellow)}
.acc-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease)}
.acc-q[aria-expanded="true"]+.acc-a{grid-template-rows:1fr}
.acc-a>div{overflow:hidden}
.acc-a p{padding:0 18px;max-width:66ch;font-size:15px}
.acc-q[aria-expanded="true"]+.acc-a p{padding:16px 18px 20px}

/* ---------- quote strip ---------- */
.quotes{overflow:hidden;padding:clamp(30px,3.4vw,48px) 0;border-bottom:var(--bd);background:var(--lilac)}
.qrun{display:flex;width:max-content;gap:18px;animation:run 104s linear infinite}
.quotes:hover .qrun{animation-play-state:paused}
.qcard{width:340px;flex:none;background:var(--cream);border:var(--bd);box-shadow:var(--sh);padding:18px 18px 20px}
.qcard p{font-size:15px;margin-bottom:12px}
.qcard b{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em}
.qcard i{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;color:#5a564c;letter-spacing:.06em}
.qcard .st{color:var(--coral);letter-spacing:.2em;font-size:13px;margin-bottom:9px}
.qcard p{min-height:5.6em}

/* ---------- form ---------- */
.box{background:#fff;border:var(--bd);box-shadow:6px 6px 0 var(--black);padding:clamp(20px,2.4vw,28px);position:relative}
.box.err{animation:shake .5s}
.tabs{display:flex;margin-bottom:22px;border:var(--bd);width:max-content;max-width:100%;position:relative;overflow:hidden}
.tabs button{padding:10px 17px;font-weight:700;font-size:14px;border-right:var(--bd);position:relative;z-index:1;
  transition:color .24s}
.tabs button:last-child{border-right:0}
.tabs button[aria-pressed="true"]{color:var(--yellow)}
/* the black behind the active tab comes from the JS-positioned .ink; until that
   runs, carry it on the button itself so it is never yellow-on-white */
.tabs:not(.inked) button[aria-pressed="true"]{background:var(--black)}
.tabs .ink{position:absolute;top:0;bottom:0;background:var(--black);transition:transform .32s var(--ease),width .32s var(--ease);z-index:0}
.fld{display:block;margin-bottom:16px}
.fld span{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;margin-bottom:6px}
.fld input,.fld textarea{width:100%;border:var(--bd);background:var(--cream);padding:13px 14px;font:inherit;font-size:16px;
  transition:background .18s,box-shadow .18s,transform .18s}
.fld input:focus,.fld textarea:focus{background:#fff;box-shadow:var(--sh-sm);transform:translate(-1px,-1px);outline-offset:1px}
.fld textarea{min-height:92px;resize:vertical}
.fld.bad input,.fld.bad textarea{border-color:var(--coral);background:#FFEDE9}
.fld em{font-style:normal;font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--coral);
  display:none;margin-top:5px;letter-spacing:.06em}
.fld.bad em{display:block}
.note{font-family:var(--mono);font-size:11px;margin-top:13px}
.done{position:absolute;inset:0;background:var(--mint);display:none;place-items:center;text-align:center;padding:30px}
.done.on{display:grid}
.done .mark{font-family:var(--disp);font-weight:900;font-size:clamp(32px,4vw,54px);text-transform:uppercase;
  line-height:.95;border:var(--bd);background:var(--cream);padding:14px 22px;box-shadow:var(--sh);
  animation:stampin .5s var(--pop) both}
.done p{margin-top:16px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.08em}

/* ---------- contact cards ---------- */
.ways{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:700px){.ways{grid-template-columns:repeat(3,1fr)}}
.way{border:var(--bd);box-shadow:var(--sh);padding:20px 18px;background:var(--cream);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.way:hover{transform:translate(-3px,-3px);box-shadow:var(--sh-lg)}
.way:nth-child(1){background:var(--yellow)}
.way:nth-child(2){background:var(--mint)}
.way:nth-child(3){background:var(--pink)}
.way b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;margin-bottom:9px}
.way strong{font-family:var(--disp);font-weight:900;font-size:23px;text-transform:uppercase;line-height:1;display:block}
.way span{font-size:13.5px;display:block;margin-top:7px}

/* area map */
.areas{display:flex;flex-wrap:wrap;gap:9px}
.areas b{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;border:var(--bd-thin);
  background:var(--cream);padding:7px 11px;box-shadow:2px 2px 0 var(--black);
  transition:transform .16s var(--pop),background .16s}
.areas b:hover{transform:translateY(-3px) rotate(-2deg);background:var(--yellow)}

/* ---------- CTA band ---------- */
.cta-band{background:var(--coral);color:#fff;border-top:var(--bd);border-bottom:var(--bd);
  padding:clamp(40px,4.6vw,72px) 0;text-align:center;position:relative;overflow:hidden}
.cta-band h2{color:#fff}
.cta-band p{max-width:44ch;margin:0 auto 26px;font-weight:500}
.cta-band .big{background:var(--cream);color:var(--black)}   /* was inheriting the band's white */

/* ---------- footer ---------- */
.foot{background:var(--black);color:var(--cream);padding:44px 0 46px;font-size:13.5px}
.foot-top{display:grid;gap:26px;grid-template-columns:1fr;padding-bottom:28px;border-bottom:2px solid #2a2a2a;margin-bottom:24px}
@media(min-width:820px){.foot-top{grid-template-columns:1.4fr 1fr 1fr}}
.foot .logo{color:var(--cream);margin-bottom:12px}
.foot .foot-h{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--yellow);margin-bottom:12px}
.foot nav{display:flex;flex-direction:column;gap:8px}
.foot nav a{color:var(--grey);transition:color .18s,padding-left .18s}
.foot nav a:hover{color:var(--yellow);padding-left:6px}
.foot p{max-width:74ch;margin-bottom:11px;color:var(--grey)}
.foot .rid{font-family:var(--mono);font-size:11px;color:var(--yellow)}

/* ---------- floating chrome ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:95;display:flex;border-top:var(--bd);
  transform:translateY(101%);transition:transform .3s var(--ease)}
.callbar.on{transform:none}
@media(min-width:900px){.callbar{display:none}}
.callbar a{flex:1;text-align:center;padding:14px 8px;font-family:var(--disp);font-weight:800;font-size:16px;
  text-transform:uppercase}
.callbar a:first-child{background:var(--yellow);border-right:var(--bd)}
.callbar a:last-child{background:var(--mint)}
.top{position:fixed;right:18px;bottom:18px;z-index:96;width:48px;height:48px;border:var(--bd);
  background:var(--yellow);box-shadow:var(--sh-sm);display:grid;place-items:center;font-size:20px;
  opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .25s,transform .25s var(--pop)}
.top.on{opacity:1;pointer-events:auto;transform:none}
@media(max-width:899px){.top{bottom:70px}}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tape .run,.qrun,.sticker svg,.pin{animation:none!important}
  [data-reveal],.mask>*,.word{opacity:1!important;transform:none!important;clip-path:none!important}
  *{transition-duration:.001ms!important;animation-duration:.001ms!important}
  .cur,.cur-ring,.wipe{display:none!important}
}

/* ============================================================
   PAGE BLOCKS
   ============================================================ */

/* ---------- home hero ---------- */
.hero{padding:clamp(26px,3.2vw,44px) 0 clamp(32px,4vw,54px);position:relative}
.hero-in{display:grid;gap:var(--gap);grid-template-columns:1fr;align-items:start}
.hero-side{display:flex;flex-direction:column;align-items:flex-start}
@media(min-width:980px){.hero-in{grid-template-columns:.5fr .5fr;align-items:center}}
/* the hero runs wider than the rest of the site so neither side sits idle */
@media(min-width:1240px){
  .hero>.wrap{max-width:none;margin-inline:0;padding-inline:clamp(22px,2.2vw,44px)}
}
/* headline is nowrap, so its size must track the column it sits in:
   a flat floor clipped at 320px and left it stranded at 21px up to 700px */
.hero h1{font-size:clamp(17px,6vw,40px);line-height:.96}
@media(min-width:980px){.hero h1{font-size:clamp(21px,2.75vw,44px)}}   /* two columns: tighter */
@media(min-width:1240px){.hero h1{font-size:clamp(21px,3.05vw,44px)}}  /* wide hero: more room */
@media(max-width:700px){
  .hero .eyebrow{font-size:8.5px;letter-spacing:.1em;padding:5px 9px}  /* stop it out-shouting the headline */
}
.hero h1 .one{display:block;white-space:nowrap}
.hero h1 u{text-decoration-thickness:.07em;text-underline-offset:.09em}
.hero h1 .two{display:inline-block;white-space:nowrap;background:var(--yellow);border:var(--bd);
  box-shadow:var(--sh);padding:3px 12px 6px;margin-top:10px;opacity:0;
  transform:rotate(-1.2deg) scale(.82);
  transition:transform .7s var(--pop),opacity .45s linear;transition-delay:var(--d,0ms)}
.hero h1 .two.in{transform:rotate(-1.2deg) scale(1);opacity:1}
.blurb{margin-top:30px;font-size:clamp(18px,1.72vw,24px);max-width:34ch;font-weight:500;line-height:1.38}
.blurb span{display:block}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero .cta .big{font-size:clamp(15px,1.35vw,19px);padding:15px 24px}
@media(max-width:700px){
  .hero .cta{align-self:stretch}
  .hero .cta .big{flex:1 1 100%;text-align:center;padding:14px 18px}
}
.rig{width:100%;position:relative}
@media(max-width:979px){.rig{max-width:560px}}
/* ---------- generic section ---------- */
.sec{padding:var(--sec) 0}
.sec--y{background:var(--yellow);border-top:var(--bd);border-bottom:var(--bd)}
.sec--b{background:var(--blue);color:#fff;border-bottom:var(--bd)}
.sec--b h2{color:#fff}
.sec--b p{max-width:38ch;font-weight:500;margin-bottom:26px}
.sec--b .big{background:var(--yellow);color:var(--black)}
.sec--l{background:var(--lilac);border-top:var(--bd);border-bottom:var(--bd)}
.two-col{display:grid;gap:30px;grid-template-columns:1fr}
.two-col--top{align-items:start}
@media(min-width:900px){.two-col{grid-template-columns:1fr 1fr;align-items:center}}
.split-head{display:flex;gap:22px;align-items:flex-end;flex-wrap:wrap;margin-bottom:30px}
.split-head .sub{margin-bottom:0}
.split-head>div:first-child{flex:1 1 340px}
/* keep this heading on a single line once there is room for it */
@media(min-width:600px){#job .split-head h2 span{white-space:nowrap}}

/* ---------- project listings ---------- */
.book-more{margin-top:30px;text-align:center}
.lsts{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:640px){.lsts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.lsts{grid-template-columns:repeat(3,1fr)}}
.lst{border:var(--bd);box-shadow:var(--sh);background:var(--paper);display:flex;flex-direction:column;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.lst:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.lst.gone{display:none}
.lst-art{position:relative;border-bottom:var(--bd);aspect-ratio:4/3;overflow:hidden;background:var(--c1,var(--blue))}
.lst-art img,.lst-art svg{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease)}
.lst:hover .lst-art img,.lst:hover .lst-art svg{transform:scale(1.05)}
.lst-tag{position:absolute;top:10px;left:10px;z-index:2;font-family:var(--mono);font-size:9.5px;
  font-weight:700;letter-spacing:.1em;background:var(--cream);border:var(--bd-thin);
  box-shadow:2px 2px 0 var(--black);padding:5px 8px}
.lst-in{padding:14px 14px 16px;display:flex;flex-direction:column;gap:5px;flex:1}
.lst-in h3{font-size:19px;line-height:1.03}
/* info chips deliberately break from the hard-edged card language:
   rounded, soft tints, hairline border, no offset shadow, body face not display */
.lst-facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.fact{border-radius:9px;border:1px solid rgba(11,11,11,.16);background:#FBF8EF;
  padding:4px 9px 5px;box-shadow:none}
.fact i{display:block;font-style:normal;font-family:var(--mono);font-size:6.5px;font-weight:700;
  line-height:1;letter-spacing:.12em;color:#9a9384}
.fact b{display:block;font-family:var(--body);font-weight:700;font-size:11px;line-height:1;
  margin-top:2px;white-space:nowrap;letter-spacing:-.005em}
.fact--bhk{background:#FFF7CE;border-color:rgba(150,120,0,.22)}
.fact--bhk i{color:#8a7100}
.fact--loc{background:#EFEAFF;border-color:rgba(70,50,180,.2)}
.fact--loc i{color:#6a5cc4}
.fact--pos{background:#F3F0E6;border-color:rgba(11,11,11,.14)}
.fact--rera{background:#DCF6EA;border-color:rgba(0,140,92,.28)}
.fact--rera i{color:#2b8a63}
.fact--rera b{color:#07603f}
.fact--todo{background:#FFE7E1;border-color:rgba(200,60,30,.3)}
.fact--todo i{color:#b8462c}
.fact--todo b{color:#a33418}
.lst-cta{margin-top:auto;font-family:var(--disp);font-weight:800;font-size:13.5px;letter-spacing:.03em;
  text-transform:uppercase;text-align:center;border:var(--bd-thin);box-shadow:2px 2px 0 var(--black);
  background:var(--black);color:var(--yellow);padding:9px 12px;
  transition:transform .12s,box-shadow .12s,background .16s,color .16s}
.lst-cta:hover{transform:translate(2px,2px);box-shadow:0 0 0 var(--black);
  background:var(--yellow);color:var(--black)}
.lst-cta .arw{display:inline-block;transition:transform .24s var(--pop)}
.lst-cta:hover .arw{transform:translateX(5px)}
.ledger-foot{margin-top:18px;font-family:var(--mono);font-size:10.5px;line-height:1.7;max-width:78ch}
.ledger-foot a{border-bottom:2px solid var(--black);font-weight:700}
.ledger-foot a:hover{background:var(--yellow)}

/* ---------- who we are (home) ---------- */
.who-in{display:grid;gap:var(--gap);grid-template-columns:1fr;align-items:start}
@media(min-width:980px){
  .who-in{grid-template-columns:1.05fr .95fr;align-items:stretch}
  /* drop the certificate so its base lines up with the RERA plate opposite */
  .creds{display:flex;flex-direction:column;justify-content:flex-end}
}
.paper{background:var(--paper);border:var(--bd);box-shadow:var(--sh);
  padding:clamp(20px,2.4vw,28px);margin-top:4px}
.paper .wins{margin-top:22px}
.who .prose p{max-width:54ch}
.who .prose b{font-weight:700}

.rera{margin-top:22px;display:flex;gap:14px;align-items:flex-start;background:var(--mint);
  border:var(--bd);box-shadow:var(--sh);padding:16px 18px}
.rera i{flex:none;width:34px;height:34px;border:var(--bd);border-radius:50%;background:var(--cream);
  display:grid;place-items:center;font-style:normal;font-family:var(--disp);font-weight:900;font-size:19px}
.rera b{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;margin-bottom:8px}
.rera code{display:block;font-family:var(--mono);font-size:12.5px;font-weight:700;line-height:1.4;
  overflow-wrap:anywhere;background:var(--cream);border:var(--bd-thin);padding:7px 9px}
.rera a{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.08em;border-bottom:2px solid var(--black);transition:background .16s}
.rera a:hover{background:var(--yellow)}

.wins{list-style:none;margin-top:24px;display:grid;gap:12px}
.wins li{position:relative;padding-left:36px;font-size:15px;line-height:1.5}
.wins li::before{content:"\2713";position:absolute;left:0;top:1px;width:24px;height:24px;
  border:var(--bd-thin);background:var(--yellow);display:grid;place-items:center;
  font-family:var(--body);font-size:15px;font-weight:700;line-height:1;
  box-shadow:2px 2px 0 var(--black)}
.wins li:nth-child(2)::before{background:var(--mint)}
.wins li:nth-child(3)::before{background:var(--pink)}
.wins li:nth-child(4)::before{background:var(--lilac)}
.wins li:nth-child(5)::before{background:var(--coral);color:#fff}
.wins li:nth-child(6)::before{background:var(--blue);color:#fff}
.wins b{font-weight:700}

/* framed RERA certificate — cream mat, hard frame, straightens on hover */
.cert{background:var(--cream);border:var(--bd);box-shadow:var(--sh-lg);padding:14px 14px 0;
  transition:transform .34s var(--ease),box-shadow .3s var(--ease),opacity .5s linear}
.cert:hover{transform:translateY(-4px);box-shadow:11px 11px 0 var(--black)}
.cert-shot{display:block;border:var(--bd-thin);background:#fff;overflow:hidden}
.cert-shot img{width:100%;height:auto;display:block;transition:transform .4s var(--ease)}
.cert:hover .cert-shot img{transform:scale(1.02)}
.cert figcaption{padding:13px 2px 15px}
.cert figcaption b{display:block;font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.1em;line-height:1.5}
.cert figcaption span{display:block;font-family:var(--mono);font-size:10.5px;color:#5a564c;margin-top:5px}
.cert figcaption a{display:inline-block;margin-top:9px;font-family:var(--mono);font-size:10.5px;
  font-weight:700;letter-spacing:.08em;border-bottom:2px solid var(--black);transition:background .16s}
.cert figcaption a:hover{background:var(--yellow)}

/* ---------- about ---------- */
.lede{font-family:var(--disp);font-weight:800;font-size:clamp(22px,2.6vw,34px);line-height:1.06;
  text-transform:uppercase;max-width:22ch}
.lede em{font-style:normal;background:var(--yellow);border:var(--bd);padding:0 8px;
  display:inline-block;transform:rotate(-1deg)}
.prose p{max-width:62ch;margin-bottom:16px;font-size:15.5px}
.people{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:700px){.people{grid-template-columns:repeat(3,1fr)}}
.person{border:var(--bd);box-shadow:var(--sh);background:var(--cream);padding:20px 18px;text-align:center;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.person:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.person .av{width:84px;height:84px;margin:0 auto 14px;border:var(--bd);border-radius:50%;display:grid;
  place-items:center;font-family:var(--disp);font-weight:900;font-size:32px}
.person:nth-child(1) .av{background:var(--coral);color:#fff}
.person:nth-child(2) .av{background:var(--mint)}
.person:nth-child(3) .av{background:var(--pink)}
.person b{font-family:var(--disp);font-weight:800;font-size:21px;text-transform:uppercase;display:block}
.person i{font-style:normal;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;
  display:block;margin:5px 0 10px;color:#5a564c}
.person p{font-size:14px}

/* ---------- contact page ---------- */
.talk-in{display:grid;gap:34px;grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.talk-in{grid-template-columns:.9fr 1.1fr}}

/* ---------- project card artwork (colours set per card) ---------- */
.art .bg,.lst-art .bg{fill:var(--c1)}
.art .a,.lst-art .a{fill:var(--c2)}
.art .b,.lst-art .b{fill:var(--c3)}
.art .c,.lst-art .c{fill:var(--c4)}
.art .w,.lst-art .w{fill:var(--cream)}
.art .d,.lst-art .d{fill:var(--black)}
.art .k,.lst-art .k{stroke:var(--black);stroke-width:4;stroke-linejoin:round}

/* ============================================================
   PROJECT DETAIL PAGE
   ============================================================ */
.pj-head h1{font-size:clamp(30px,5.2vw,62px)}
/* .phead p (class+element) outranks a bare .pj-sub, so scope it to win */
.pj-head .pj-sub{font-family:var(--mono);font-size:clamp(11px,.95vw,12.5px);font-weight:700;
  letter-spacing:.04em;margin-top:14px;max-width:none}
.pj-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}

.pj-hero{border:var(--bd);box-shadow:var(--sh-lg);background:#fff;margin-bottom:clamp(30px,3.6vw,48px)}
.pj-hero img{width:100%;height:auto;display:block}

.kfs{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);margin:24px 0 30px}
@media(min-width:640px){.kfs{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1040px){.kfs{grid-template-columns:repeat(8,1fr)}}
.kf{border:var(--bd);box-shadow:var(--sh-sm);background:var(--paper);padding:12px 10px;text-align:center}
.kf b{display:block;font-family:var(--disp);font-weight:900;font-size:clamp(19px,2vw,26px);line-height:1}
.kf span{display:block;font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.1em;
  margin-top:6px;color:#5a564c}
.pj-prose p{max-width:70ch;font-size:15.5px;margin-bottom:14px}

/* tables */
.tbl-wrap{border:var(--bd);box-shadow:var(--sh);background:var(--paper);overflow-x:auto}
.tbl-wrap--narrow{max-width:620px}
.tbl{width:100%;border-collapse:collapse;min-width:520px}
.tbl-wrap--narrow .tbl{min-width:320px}
.tbl thead th{background:var(--black);color:var(--yellow);font-family:var(--mono);font-size:9.5px;
  font-weight:700;letter-spacing:.12em;text-align:left;padding:10px 14px;white-space:nowrap}
.tbl tbody th{font-family:var(--disp);font-weight:800;font-size:17px;text-transform:uppercase;text-align:left}
.tbl td,.tbl tbody th{padding:11px 14px;border-top:var(--bd-thin);font-family:var(--mono);font-size:12px}
.tbl tbody tr:hover{background:var(--yellow)}

.pj-plan{margin-top:26px;border:var(--bd);box-shadow:var(--sh);background:#fff}
.pj-plan img{width:100%;height:auto;display:block;border-bottom:var(--bd)}
.pj-plan figcaption{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.12em;padding:9px 12px}

/* amenities */
.amens{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:700px){.amens{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.amens{grid-template-columns:repeat(4,1fr)}}
.amen-group{border:var(--bd);box-shadow:var(--sh-sm);background:var(--paper);padding:16px 16px 18px}
.amen-group h3{font-size:17px;margin-bottom:10px;line-height:1.05}
.amen-group ul{list-style:none}
.amen-group li{font-size:13.5px;padding:4px 0 4px 16px;position:relative}
.amen-group li::before{content:"◆";position:absolute;left:0;top:4px;font-size:7px;color:var(--coral)}

/* gallery */
.shots{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.shots{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.shots{grid-template-columns:repeat(3,1fr)}}
.shot{border:var(--bd);box-shadow:var(--sh-sm);background:#fff;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.shot:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.shot img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;border-bottom:var(--bd)}
.shot figcaption{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;padding:8px 10px}

/* connectivity */
.conns{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-bottom:22px}
.conn-group{border:var(--bd);box-shadow:var(--sh-sm);background:var(--paper);padding:14px 15px 16px}
.conn-group h3{font-size:16px;margin-bottom:8px}
.conn-group ul{list-style:none}
.conn-group li{display:flex;gap:10px;justify-content:space-between;align-items:baseline;
  font-size:13px;padding:4px 0;border-top:1px solid rgba(11,11,11,.1)}
.conn-group li:first-child{border-top:0}
.conn-group li b{font-family:var(--mono);font-size:11px;font-weight:700;white-space:nowrap}
.pj-rera{margin-top:0}

/* ---------- specification sheet (open, not an accordion) ---------- */
.spec-sheet{columns:2;column-gap:20px}
@media(max-width:860px){.spec-sheet{columns:1}}
.spec-block{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 20px;
  border:var(--bd);box-shadow:var(--sh-sm);background:var(--paper)}
.spec-block h3{display:flex;align-items:baseline;gap:10px;background:var(--black);color:var(--yellow);
  padding:9px 14px;font-size:16px;letter-spacing:.02em;margin:0}
.spec-block h3 em{font-family:var(--mono);font-size:11px;font-style:normal;font-weight:700;
  color:var(--mint);letter-spacing:.06em}
.spec-block dl{margin:0}
.spec-row{display:grid;grid-template-columns:1fr;gap:2px;padding:9px 14px;
  border-top:1px solid rgba(11,11,11,.12)}
@media(min-width:420px){.spec-row{grid-template-columns:34% 1fr;gap:12px}}
.spec-row:first-child{border-top:0}
.spec-row dt{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#6b6659;line-height:1.4;padding-top:2px}
.spec-row dd{margin:0;font-size:13px;line-height:1.42}
.spec-row:hover{background:var(--yellow)}
.spec-row:hover dt{color:var(--black)}

/* ---------- project status / RERA filing ---------- */
.status{border:var(--bd);box-shadow:var(--sh);background:var(--paper);padding:18px 20px 20px;margin-bottom:24px}
.status-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px}
.status-tag{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.12em;
  background:var(--coral);color:#fff;border:var(--bd-thin);padding:4px 9px}
.status-head b{font-family:var(--disp);font-weight:900;font-size:clamp(24px,2.6vw,34px);line-height:1}
.status-head i{flex:1 1 260px;font-style:normal;font-family:var(--mono);font-size:10px;
  letter-spacing:.04em;color:#5a564c;line-height:1.5}
.status-bar{height:16px;border:var(--bd-thin);background:#fff;margin:14px 0 16px;position:relative;overflow:hidden}
.status-bar span{display:block;height:100%;background:var(--coral);border-right:var(--bd-thin);
  background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.14) 0 5px,transparent 5px 10px)}
.status-time{display:grid;gap:10px 18px;grid-template-columns:1fr auto 1fr;align-items:center}
.status-time>div em{display:block;font-style:normal;font-family:var(--mono);font-size:8.5px;
  font-weight:700;letter-spacing:.12em;color:#6b6659}
.status-time>div b{display:block;font-family:var(--disp);font-weight:900;font-size:clamp(20px,2vw,26px);
  line-height:1;margin-top:4px}
.status-arrow{font-family:var(--disp);font-weight:900;font-size:26px;color:var(--coral)}
.status-note{grid-column:1/-1;font-size:13px;line-height:1.45;border-top:var(--bd-thin);padding-top:12px}
@media(max-width:560px){
  .status-time{grid-template-columns:1fr}
  .status-arrow{transform:rotate(90deg);justify-self:start}
}
.filing-sheet{columns:2}
@media(max-width:860px){.filing-sheet{columns:1}}
.flag{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;
  font-size:9px;font-weight:700;vertical-align:-2px;margin-right:3px}
.flag--ok{background:var(--mint);color:var(--black)}
.flag--wait{background:var(--yellow);color:var(--black)}
.conn-group--near{background:#EFEAFF}

/* ---------- price & availability ---------- */
.price-head{display:grid;gap:14px 26px;grid-template-columns:repeat(2,auto);align-items:end;
  border:var(--bd);box-shadow:var(--sh);background:var(--paper);padding:16px 20px 18px;margin-bottom:20px}
@media(min-width:760px){.price-head{grid-template-columns:auto auto 1fr}}
.price-head>div em{display:block;font-style:normal;font-family:var(--mono);font-size:8.5px;
  font-weight:700;letter-spacing:.12em;color:#6b6659}
.price-head>div b{display:block;font-family:var(--disp);font-weight:900;
  font-size:clamp(26px,3vw,38px);line-height:1;margin-top:5px}
.price-head>div b span{font-size:.5em;color:#6b6659}
.price-note{grid-column:1/-1;font-size:13px;line-height:1.45;border-top:var(--bd-thin);padding-top:12px}
@media(min-width:760px){.price-note{grid-column:3;border-top:0;border-left:var(--bd-thin);
  padding:0 0 0 20px;align-self:center}}
.tbl td.sold{font-family:var(--disp);font-weight:800;font-size:15px;text-transform:uppercase;color:var(--coral)}
.fact--price{background:#FFE9DF;border-color:rgba(200,90,40,.3)}
.fact--price i{color:#a8552b}

/* ---------- project header: summary card fills the right ---------- */
.pj-head-in{display:grid;gap:var(--gap);grid-template-columns:1fr;align-items:start}
/* .phead p caps at 44ch, which was wrapping the breadcrumb and address early */
.pj-head .crumb,.pj-head .pj-sub{max-width:none}
@media(min-width:980px){.pj-head-in{grid-template-columns:1.08fr .92fr;align-items:center}}
.pj-card{background:var(--paper);border:var(--bd);box-shadow:var(--sh-lg);padding:20px 20px 22px}
.pj-card h2{font-size:17px;letter-spacing:.02em;margin-bottom:13px;
  border-bottom:var(--bd-thin);padding-bottom:10px}
.pj-card ul{list-style:none;display:grid;gap:10px}
.pj-card li{position:relative;padding-left:19px;font-size:14px;line-height:1.42}
.pj-card li::before{content:"◆";position:absolute;left:0;top:3px;font-size:8px;color:var(--coral)}
.pj-card li b{font-weight:700}
.pj-card-cta{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.pj-card-cta .big{font-size:16px;padding:12px 20px}
.pj-call{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;
  border-bottom:2px solid var(--black)}
.pj-call:hover{background:var(--yellow)}

/* ---------- project page: stop capping text at half the row ---------- */
.pj-head-in+*,.pj-prose{--x:0}
.pj-prose{background:var(--paper);border:var(--bd);box-shadow:var(--sh);
  padding:clamp(18px,2.2vw,28px);margin-top:8px}
@media(min-width:900px){.pj-prose{columns:2;column-gap:clamp(24px,3vw,44px)}}
.pj-prose p{max-width:none;margin:0 0 14px;break-inside:avoid}
.pj-prose p:last-child{margin-bottom:0}

/* footnotes run the full width in two columns rather than a 78ch ribbon */
.ledger-foot{max-width:none}
@media(min-width:900px){.ledger-foot{columns:2;column-gap:clamp(24px,3vw,44px)}}

/* section intros sit beside the heading, so give them room */
.split-head .sub{max-width:62ch}
.split-head--gap{padding-top:clamp(36px,4.4vw,60px)}  /* padding, not margin — margin was collapsing */

/* ---------- embedded map ---------- */
.pj-map{border:var(--bd);box-shadow:var(--sh);background:var(--paper);margin-bottom:22px}
.pj-map iframe{display:block;width:100%;height:clamp(300px,36vw,460px);border:0;
  border-bottom:var(--bd);filter:grayscale(.15) contrast(1.03)}
.pj-map figcaption{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;padding:9px 12px}
.pj-map figcaption a{border-bottom:2px solid var(--black)}
.pj-map figcaption a:hover{background:var(--yellow)}

.pj-plan--map{max-width:760px;margin-left:auto;margin-right:auto}
.shots--wide .shot img{aspect-ratio:16/9}
.rera--pending{background:var(--yellow)}
.rera--pending i{background:var(--coral);color:#fff}
.rera--pending code{background:#fff}
.status-tag--go{background:var(--mint);color:var(--black)}

/* floor-plan sheets: unlike .shot these must never be cover-cropped —
   the dimension text on the drawing is the whole point of showing them */
.plans-h{font-family:var(--disp);font-weight:900;text-transform:uppercase;
  font-size:clamp(21px,2.4vw,30px);line-height:.95;letter-spacing:-.01em}
.plans{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:700px){.plans{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{border:var(--bd);box-shadow:var(--sh-sm);background:#fff;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.plan:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.plan img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:#fff;
  display:block;border-bottom:var(--bd)}
.plan figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:9px 11px}
.plan figcaption b{font-family:var(--disp);font-weight:900;font-size:17px;line-height:1;letter-spacing:.01em}
.plan figcaption span{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.06em;color:#6b6659}

/* a plain framed figure with a caption — for master plans and other wide sheets
   that should be shown whole rather than cover-cropped like .shot */
.pj-figure{border:var(--bd);box-shadow:var(--sh-lg);background:#fff;
  margin-bottom:clamp(30px,3.6vw,48px)}
.pj-figure img{width:100%;height:auto;display:block;border-bottom:var(--bd)}
.pj-figure figcaption{font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.08em;padding:9px 12px}
/* brochure-sourced sheets top out at their native width — never stretch them */
.pj-figure--cap{max-width:var(--iw,1024px);margin-inline:auto}
/* some developers publish nothing wider than 1080 — cap rather than upscale */
.pj-hero--cap{max-width:var(--iw,1080px);margin-inline:auto}

/* hero for a project whose developer publishes no imagery — the illustration is
   ours and is labelled as such, never passed off as a photograph */
.pj-hero--art svg{width:100%;height:auto;display:block;border-bottom:var(--bd)}
.pj-hero--art figcaption{font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.08em;padding:9px 12px;color:#6b6659}

/* a numbered sequence has to read across (01 02 / 03 04), not down a column the
   way the filing sheets do — so this variant is a grid, not multi-column */
.spec-sheet--steps{columns:auto;display:grid;gap:20px;grid-template-columns:repeat(2,1fr)}
.spec-sheet--steps .spec-block{margin:0}
@media(max-width:860px){.spec-sheet--steps{grid-template-columns:1fr}}

/* whole carousel slide is a link to that project's page. It sits above the
   image but below the pins and tag so those stay legible; a drag must not
   count as a click, which script.js handles by cancelling the next click. */
.slide-go{position:absolute;inset:0;z-index:4;display:block}
.slide-go i{position:absolute;right:16px;bottom:16px;display:grid;place-items:center;
  width:40px;height:40px;border:var(--bd-thin);background:var(--cream);color:var(--black);
  box-shadow:3px 3px 0 var(--black);font-style:normal;font-size:17px;font-weight:700;
  opacity:0;transform:translateX(-6px);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.slide[aria-hidden="false"] .slide-go i{opacity:1;transform:none}
.slide-go:hover i{background:var(--yellow);transform:translateX(3px)}
.slide-go:focus-visible{outline:3px solid var(--blue);outline-offset:-5px}
@media(prefers-reduced-motion:reduce){
  .slide-go i{transition:none}
}

/* footer legal block sits left, visitor counter right */
.foot-bot{display:grid;gap:22px;grid-template-columns:1fr;align-items:start}
@media(min-width:820px){.foot-bot{grid-template-columns:1fr auto;gap:38px}}
.foot-bot > div:first-child > p:last-child{margin-bottom:0}
.visits{border:2px solid #2a2a2a;background:#141414;padding:13px 16px 14px;min-width:190px}
.visits i{display:block;font-family:var(--mono);font-size:9.5px;font-weight:700;font-style:normal;
  letter-spacing:.14em;color:var(--yellow)}

/* visitor count as a mechanical code lock — one tile per digit, each with the
   split line of a rolling drum. Digits are built by script.js from data-odo. */
.odo{display:flex;gap:4px;margin-top:9px}
.odo span{position:relative;display:grid;place-items:center;width:26px;height:38px;
  background:linear-gradient(#3a3a3a 0 50%,#242424 50% 100%);
  border:1px solid #4a4a4a;border-radius:3px;overflow:hidden;
  font-family:var(--disp);font-weight:900;font-size:25px;line-height:1;color:var(--cream);
  font-variant-numeric:tabular-nums;box-shadow:inset 0 1px 0 #555,0 1px 2px rgba(0,0,0,.6)}
.odo span::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:rgba(0,0,0,.55);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.odo span.roll{animation:odoRoll .5s var(--ease) both}
@keyframes odoRoll{
  0%{transform:translateY(-58%);opacity:0}
  60%{transform:translateY(6%);opacity:1}
  100%{transform:translateY(0);opacity:1}
}
@media(prefers-reduced-motion:reduce){.odo span.roll{animation:none}}

/* logo lockup: A-frame mark + wordmark. The mark's own tile is black, so on the
   dark footer it needs a light edge to separate from the background. */
.logo .mark{flex:0 0 auto;display:block;overflow:visible}
.logo > span{display:flex;align-items:center;gap:6px}
.foot .logo .tile{stroke:var(--cream)}
.logo .mark{transition:transform .2s var(--pop)}
@media(prefers-reduced-motion:reduce){.logo .mark{transition:none}}

/* related projects — gives every project page more than one way in */
.nearby{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:700px){.nearby{grid-template-columns:repeat(3,1fr)}}
.nearby-card{display:block;border:var(--bd);box-shadow:var(--sh-sm);background:var(--paper);
  padding:15px 16px 16px;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.nearby-card:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.nearby-card b{display:block;font-family:var(--disp);font-weight:900;font-size:19px;line-height:1.05}
.nearby-card span{display:block;font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.08em;color:#6b6659;margin-top:7px}

/* hub navigation on the projects page — area / size / budget */
.browse{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:760px){.browse{grid-template-columns:repeat(3,1fr)}}
.browse-col h3{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  padding-bottom:9px;border-bottom:var(--bd);margin-bottom:12px}
.browse-links{display:flex;flex-direction:column;gap:7px}
.browse-link{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  border:1px solid rgba(11,11,11,.18);background:var(--paper);border-radius:8px;padding:8px 11px 9px;
  font-weight:700;font-size:13.5px;transition:background .16s,transform .16s var(--ease)}
.browse-link:hover{background:var(--yellow);transform:translateX(3px)}
.browse-link i{font-family:var(--mono);font-style:normal;font-size:10px;font-weight:700;color:#6b6659}
.also-in{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;margin-top:14px;color:#6b6659}
.also-in a{font-weight:700;color:var(--black);text-decoration:underline;text-underline-offset:3px}

/* FAQ — real answers to the questions people type after hearing a project name */
.faq{display:grid;gap:10px}
.faq-item{border:var(--bd);box-shadow:var(--sh-sm);background:var(--paper)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:12px;
  padding:14px 16px;font-family:var(--disp);font-weight:800;font-size:19px;line-height:1.15}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";margin-left:auto;font-family:var(--mono);font-weight:700;
  font-size:19px;line-height:1;transition:transform .2s var(--ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.faq-a{padding:0 16px 15px;border-top:var(--bd-thin)}
.faq-a p{margin-top:12px;max-width:70ch;font-size:14.5px;line-height:1.55}

/* aggregate findings across a hub's projects — the part no portal can copy */
.insight{display:grid;gap:12px;margin-top:6px;list-style:none;padding:0}
.insight li{border:var(--bd);box-shadow:var(--sh-sm);background:var(--paper);
  padding:14px 16px;font-size:14.5px;line-height:1.55;max-width:82ch}
.insight li b{font-weight:700}
.insight a{font-weight:700;border-bottom:2px solid var(--black);transition:background .16s}
.insight a:hover{background:var(--yellow)}

.tbl td small{display:block;margin-top:3px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.acc-h{margin:0 0 14px}.acc+.acc-h{margin-top:40px}

/* ============================================================
   GUIDES — long-form articles, built by build/guides.py
   ============================================================ */
/* .phead p caps at 44ch; the crumb, the standfirst and the byline need more */
.guide-head .crumb{max-width:none}
.guide-head .guide-dek{max-width:60ch}
.guide-head .guide-by{max-width:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:22px;
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.guide-by span+span::before{content:"◆";margin-right:18px;color:var(--coral)}

/* long-form text on the dotted page ground is hard going — read it off plain paper */
.guide-sec{background:var(--paper)}   /* the next section brings its own top border */
/* a read runs in up to three columns: the contents on the left, the text in the middle and the concepts it uses
   on the right. The side boxes ride along level with each other, centred in the window (never under the 84px
   header); script.js sets --toc-h and marks the section being read, and its concepts, with .is-on */
.guide-in{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr);
  --rail-top:max(84px,calc(50vh - var(--toc-h,0px)/2))}
@media(min-width:1040px){.guide-in{grid-template-columns:240px minmax(0,1fr)}
  .guide-terms{grid-column:2}}
@media(min-width:1280px){
  .guide-in--terms{max-width:1440px;grid-template-columns:clamp(210px,17vw,240px) minmax(0,1fr) clamp(210px,17vw,240px)}
  .guide-in--terms .guide-body{margin-inline:auto}
  .guide-terms{grid-column:3;position:sticky;top:var(--rail-top);max-height:calc(100vh - var(--rail-top) - 16px);overflow-y:auto}
  .guide-terms.is-up{top:84px;max-height:calc(100vh - 100px)}}
.guide-toc,.guide-terms{align-self:start;border:var(--bd);box-shadow:var(--sh-sm);background:var(--paper);padding:14px 14px 12px}
@media(min-width:1040px){.guide-toc{position:sticky;top:var(--rail-top)}}
.guide-toc a.is-on{background:var(--yellow);font-weight:700;box-shadow:inset 3px 0 0 var(--black)}
.guide-toc a.is-on::before{color:var(--black)}
.guide-toc b,.guide-terms>b{display:block;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;margin-bottom:8px}
.guide-terms details+details{border-top:1px solid rgba(11,11,11,.14)}
.guide-terms summary{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:6px;cursor:pointer;
  list-style:none;font-size:13.5px;font-weight:500;line-height:1.3;transition:background .16s}
.guide-terms summary::-webkit-details-marker{display:none}
.guide-terms summary::after{content:"+";flex:none;font-family:var(--mono);font-size:12px;font-weight:700;color:#6b6659}
.guide-terms details[open]>summary::after{content:"\2212"}
.guide-terms summary:hover{background:var(--yellow)}
.guide-terms summary:focus-visible{outline:2px solid var(--black);outline-offset:-2px}
.guide-terms details.is-on>summary{background:var(--yellow);font-weight:700;box-shadow:inset 3px 0 0 var(--black)}
.guide-terms details.is-on>summary::after{color:var(--black)}
.guide-terms p{margin:0;padding:4px 6px 11px;font-size:13.5px;line-height:1.45}
.guide-terms .gt-more{display:block;margin-top:7px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:underline;text-underline-offset:3px}
.guide-terms .gt-more:hover{background:var(--yellow)}
@media(max-width:1279px){.guide-terms{max-width:70ch;margin-top:6px}}
.guide-toc ol{list-style:none;counter-reset:t;display:grid;gap:1px}
.guide-toc li{counter-increment:t}
.guide-toc a{display:flex;gap:9px;padding:6px;font-size:13.5px;font-weight:500;line-height:1.35;transition:background .16s}
.guide-toc a::before{content:counter(t,decimal-leading-zero);flex:none;font-family:var(--mono);font-size:10px;
  font-weight:700;color:#6b6659;padding-top:2px}
.guide-toc a:hover{background:var(--yellow)}

/* the reading column: no scroll reveals on body text — it must never sit invisible */
.guide-body{max-width:70ch;min-width:0;font-size:17px;line-height:1.68}
.guide-body p{margin:0 0 18px}
.guide-body h2{font-size:clamp(25px,2.7vw,36px);line-height:1;margin:50px 0 16px;scroll-margin-top:90px}
.guide-body h3{font-size:21px;line-height:1.05;margin:30px 0 10px}
.guide-body a{font-weight:700;border-bottom:2px solid var(--black);transition:background .16s}
.guide-body a:hover{background:var(--yellow)}
.guide-body ul,.guide-body ol{margin:0 0 20px;padding-left:22px}
.guide-body li{margin-bottom:8px}
.guide-body li::marker{color:var(--coral);font-weight:700}
.guide-body b,.guide-body strong{font-weight:700}
.guide-body .kfs{grid-template-columns:repeat(2,1fr);margin:0 0 36px}
@media(min-width:640px){.guide-body .kfs{grid-template-columns:repeat(4,1fr)}}
.guide-body .kf span{font-size:8.5px;line-height:1.35}
.guide-body .tbl-wrap{margin:26px 0 10px}
.guide-body .tbl a{border:0;text-decoration:underline;text-underline-offset:3px}
.guide-body .tbl a:hover{background:none}
.guide-body .tbl tbody th{font-size:15px;line-height:1.1}
.guide-body .tbl td b{font-family:var(--disp);font-weight:900;font-size:16px}
.guide-body .wins{padding-left:0;margin:6px 0 24px}
.guide-body .wins li{font-size:16px;margin:0}
.guide-cap{font-family:var(--mono);font-size:10.5px;line-height:1.6;color:#5a564c}
.guide-body .guide-cap{margin:0 0 28px}

/* a boxed aside — the worked example, the short version */
.guide-note{border:var(--bd);box-shadow:var(--sh);background:var(--mint);padding:18px 20px 2px;margin:30px 0}
.guide-note--y{background:var(--yellow)}
.guide-note--p{background:var(--pink)}
.guide-note>b:first-child{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;margin-bottom:8px}

.guide-fig{border:var(--bd);box-shadow:var(--sh);background:#fff;margin:30px 0}
.guide-fig img{width:100%;height:auto;display:block;border-bottom:var(--bd)}
.guide-fig figcaption{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.04em;line-height:1.55;padding:10px 12px}

/* a registration number taken apart, segment by segment */
.guide-anat{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px}
.guide-anat span{display:flex;flex-direction:column;border:var(--bd-thin);background:var(--paper);
  box-shadow:2px 2px 0 var(--black);padding:7px 10px 8px}
.guide-anat code{font-family:var(--mono);font-size:14px;font-weight:700}
.guide-anat i{font-style:normal;font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#6b6659;margin-top:4px}
.guide-anat .hl{background:var(--yellow)}
.guide-anat .hl i{color:var(--black)}

.guide-src{margin-top:44px;padding-top:16px;border-top:var(--bd);font-family:var(--mono);font-size:11px;line-height:1.7;color:#3d3a33}
.guide-body .guide-src p{margin:0 0 10px}

/* hub pages: the guides that explain what the filing summary means */
.guide-row{margin-top:30px}
.guide-row>b{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;margin-bottom:12px}
.guide-row .nearby-card span{font-family:var(--body);font-size:13px;font-weight:500;letter-spacing:0;
  line-height:1.4;color:var(--black)}
@media(min-width:700px){.guide-row .nearby--4{grid-template-columns:repeat(2,1fr)}}   /* four guides sit as a 2×2 */

/* the guides index */
.gcards{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:760px){.gcards{grid-template-columns:repeat(2,1fr)}}
.gcard{display:flex;flex-direction:column;gap:12px;border:var(--bd);box-shadow:var(--sh);background:var(--paper);
  padding:22px 22px 18px;transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.gcard:nth-child(4n+1){background:var(--yellow)}
.gcard:nth-child(4n+2){background:var(--mint)}
.gcard:nth-child(4n+3){background:var(--pink)}
.gcard:nth-child(4n+4){background:var(--lilac)}
.gcard:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.gcard .no{align-self:flex-start;font-family:var(--mono);font-weight:700;font-size:11px;background:var(--black);
  color:var(--yellow);padding:3px 9px}
.gcard h2{font-size:clamp(24px,2.6vw,34px);line-height:1;margin:0}
.gcard p{font-size:15px;max-width:52ch}
.gcard-meta{margin-top:auto;padding-top:12px;border-top:var(--bd-thin);display:flex;justify-content:space-between;
  align-items:baseline;gap:12px}
.gcard-meta i{font-style:normal;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.1em}
.gcard-meta b{flex:none;font-family:var(--disp);font-weight:800;font-size:15px;letter-spacing:.03em;text-transform:uppercase}
.gcard .arw{display:inline-block;transition:transform .24s var(--pop)}
.gcard:hover .arw{transform:translateX(5px)}
.gcard h3{font-size:clamp(24px,2.6vw,34px);line-height:1;margin:0}
/* the index, grouped by stage, with a row of jump links to each group */
.gjump{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 48px}
.gjump a{display:inline-flex;align-items:center;gap:9px;border:var(--bd);background:var(--paper);box-shadow:var(--sh);
  padding:7px 13px 8px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.gjump a b{font-family:var(--disp);font-size:15px;letter-spacing:0}
.gjump a:hover{background:var(--yellow)}
.gsec{scroll-margin-top:90px}
.gsec+.gsec{margin-top:80px}

/* ---------- charts inside guides ----------
   Categorical slots are validated (scripts/validate_palette.js, all pairs, on --paper
   #FFFDF5): worst CVD ΔE 9.2, every slot ≥ 3:1. Keep the order law · builder · bank.
   Marks carry the colour; every label stays in ink. */
.guide-body{--law:#3B2AFF;--builder:#E8492C;--bank:#008F63;--you:#3B2AFF;--price:#C9C4B6;--viz-ink-2:#52514e}
/* a row whose bar is split between two payers, 2px surface gap between them */
.viz-row>span:first-child small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:#6b6659}
.viz-bars--gap{gap:4px}
.viz-seg{display:flex;flex:none;gap:2px;height:16px;min-width:3px}
.viz-seg>span{background:var(--c);min-width:3px}
.viz-seg>span:last-child{border-radius:0 4px 4px 0}
/* one column per month: the hit area is the full column, the mark is the fill */
.viz-cols{display:flex;align-items:stretch;gap:2px;height:150px;border-bottom:1px solid #c3c2b7}
.viz-cols>span{flex:1 1 0;display:flex;align-items:flex-end;cursor:default}
.viz-cols>span>i{display:block;width:100%;background:var(--bank);border-radius:3px 3px 0 0}
.viz-cols>span:hover>i,.viz-cols>span.is-hot>i{filter:brightness(1.2)}
.viz-axis{position:relative;height:22px;font-family:var(--mono);font-size:9.5px;color:#6b6659}
.viz-axis span{position:absolute;top:6px;transform:translateX(-50%);white-space:nowrap}
.viz-axis span:first-child{transform:none}
.viz-axis span:last-child{transform:translateX(-100%)}
/* the chart's table twin, one click away */
.viz-table{margin-top:10px}
.viz-table summary{cursor:pointer;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.viz-table table{width:100%;border-collapse:collapse;margin-top:8px}
.viz-table th,.viz-table td{text-align:left;padding:6px 8px;border-top:1px solid rgba(11,11,11,.1);font-size:13px}
.viz-table thead th{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#6b6659;border-top:0}
.viz-table td.n{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}

/* ---------- the paper trail: four layers, the land at the base ----------
   Layer slots validated (all adjacent pairs, on --paper): worst CVD ΔE 15.2, every slot ≥ 3:1.
   The list is in logical order (land first) and drawn bottom-up, each layer set in like a stepped tower. */
.guide-body{--d-land:#008F63;--d-perm:#3B2AFF;--d-bldg:#D96A00;--d-flat:#C2185B}
.guide-body .docflow-layers{list-style:none;display:flex;flex-direction:column-reverse;gap:10px;margin:4px 0 6px;padding:0}
.guide-body .docflow-layers>li{position:relative;margin:0 calc(var(--i,0) * 18px);border:var(--bd-thin);background:#fff;
  padding:12px 14px 12px 24px}
.guide-body .docflow-layers>li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:9px;background:var(--c)}
.guide-body .docflow-layers b{display:block;font-family:var(--disp);font-weight:900;font-size:19px;line-height:1;text-transform:uppercase}
.guide-body .docflow-layers em{display:block;font-style:normal;font-size:13.5px;line-height:1.45;color:var(--viz-ink-2);margin:5px 0 9px}
@media(max-width:560px){.guide-body .docflow-layers>li{margin:0}}

/* an annotated mock-up of a document: numbered markers, explained in the list below it */
.mockdoc{background:#fff;border:var(--bd);box-shadow:var(--sh-lg);margin:30px 0 10px;font-family:var(--mono);font-size:11.5px;line-height:1.5}
.mockdoc-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;background:#F3F0E6;
  border-bottom:var(--bd-thin);padding:10px 14px;font-weight:700;letter-spacing:.06em}
.mockdoc-stamp{display:inline-block;border:2px solid var(--coral);color:var(--coral);padding:2px 8px;transform:rotate(-3deg);
  font-weight:700;letter-spacing:.14em}
.mockdoc-body{padding:12px 14px 14px;overflow-x:auto}
.mockdoc-body p{margin:0 0 8px!important;font-size:11.5px!important;line-height:1.5}
.mockdoc table{width:100%;min-width:540px;border-collapse:collapse}
.mockdoc th,.mockdoc td{border:1px solid rgba(11,11,11,.18);padding:6px 8px;text-align:left;vertical-align:top}
.mockdoc th{background:#FBF8EF;font-weight:700}
.mk{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--coral);color:#fff;
  font-family:var(--mono);font-size:10.5px;font-weight:700;font-style:normal;vertical-align:middle;margin:0 3px}
.guide-body .callouts{list-style:none;counter-reset:c;display:grid;gap:9px;margin:14px 0 26px;padding:0}
.guide-body .callouts li{position:relative;counter-increment:c;margin:0;padding-left:30px;font-size:15.5px}
.guide-body .callouts li::before{content:counter(c);position:absolute;left:0;top:3px;width:19px;height:19px;border-radius:50%;
  background:var(--coral);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:10.5px;font-weight:700}

/* ---------- the affordability calculator: plain number inputs, results update as you type ---------- */
.calc-in{display:grid;grid-template-columns:1fr;gap:12px 18px;margin:4px 0 18px}
@media(min-width:640px){.calc-in{grid-template-columns:1fr 1fr}}
.calc-f{display:flex;flex-direction:column;gap:5px}
.calc-f>span:first-child{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#52514e}
.calc-i{display:flex;align-items:center;gap:7px}
.calc-i input{flex:1;min-width:0;border:var(--bd-thin);background:#fff;padding:9px 10px;font:inherit;font-size:16px;
  font-variant-numeric:tabular-nums}
.calc-i input:focus-visible{outline:3px solid var(--blue);outline-offset:1px}
.calc-i i{flex:none;width:62px;font-style:normal;font-family:var(--mono);font-size:10.5px;color:#52514e;white-space:nowrap}   /* a fixed unit column keeps every box the same width */
.calc-chk{grid-column:1/-1;display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:500}
.calc-chk input{width:18px;height:18px;accent-color:var(--blue)}
.calc-out{border-top:var(--bd-thin);padding-top:16px}
.calc-big em{display:block;font-style:normal;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em}
.calc-big strong{display:block;font-family:var(--disp);font-weight:900;font-size:clamp(36px,5vw,50px);line-height:1;margin:5px 0 6px}
.calc-big span{display:block;font-size:14px;line-height:1.45;color:#52514e;margin-bottom:14px}
.calc-dl{display:grid;grid-template-columns:1fr auto;gap:7px 16px;margin:14px 0 0;font-size:14px}
.calc-dl dt{color:#3d3a33}
.calc-dl dd{margin:0;text-align:right;font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.guide-body .calc-h{margin:18px 0 0;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;
  padding-top:12px;border-top:1px solid rgba(11,11,11,.12)}
.viz{border:var(--bd);box-shadow:var(--sh);background:var(--paper);padding:18px 20px 14px;margin:30px 0}
.guide-body .viz-h{font-family:var(--disp);font-weight:900;font-size:22px;line-height:1.05;text-transform:uppercase;margin:0 0 6px}
.guide-body .viz-sub{font-size:14px;line-height:1.5;color:var(--viz-ink-2);margin:0 0 16px}
.viz figcaption{font-family:var(--mono);font-size:10px;line-height:1.6;color:#5a564c;margin-top:14px;
  padding-top:10px;border-top:1px solid rgba(11,11,11,.12)}
.viz figcaption a{font-weight:700;border-bottom:1.5px solid var(--black)}
.viz-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 4px;font-family:var(--mono);font-size:10.5px;
  font-weight:700;letter-spacing:.04em}
.viz-legend span{display:inline-flex;align-items:center;gap:7px}
.viz-legend i{flex:none;width:12px;height:12px;border-radius:2px;background:var(--c)}
.viz-legend b{font-family:var(--body);font-size:13px;letter-spacing:0}
/* part-to-whole: one bar, 2px surface gaps, square at the baseline, 4px round at the far end */
.viz-stack{display:flex;gap:2px;height:24px;margin:0 0 14px}
.viz-stack>span{background:var(--c);min-width:4px;outline-offset:2px}
.viz-stack>span:last-child{border-radius:0 4px 4px 0}
.viz-stack>span.is-hot,.viz-stack>span:focus-visible{filter:brightness(1.18) saturate(1.1)}
/* one bar per charge */
.viz-bars{display:grid;gap:2px}
.viz-grp{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.12em;margin:14px 0 4px!important}
.viz-grp:first-child{margin-top:0!important}
.viz-grp i{width:10px;height:10px;border-radius:2px;background:var(--c)}
.viz-row{display:grid;grid-template-columns:minmax(130px,36%) 1fr;align-items:center;gap:12px;padding:4px 6px;
  margin:0 -6px;border-radius:4px;cursor:default;outline-offset:1px}
.viz-row>span:first-child{font-size:13.5px;line-height:1.3}
.viz-track{display:flex;align-items:center;gap:8px;min-width:0}
.viz-bar{display:block;flex:none;height:16px;min-width:3px;background:var(--c);border-radius:0 4px 4px 0}
.viz-track b{font-family:var(--mono);font-size:12px;font-weight:700;white-space:nowrap}
.viz-row:hover,.viz-row.is-hot,.viz-row:focus-visible{background:rgba(11,11,11,.05)}
@media(max-width:560px){.viz-row{grid-template-columns:1fr;gap:3px}}
/* the hover readout: value leads, label follows */
.viz-tip{position:fixed;z-index:125;pointer-events:none;max-width:280px;background:var(--black);color:var(--cream);
  border:2px solid var(--black);box-shadow:3px 3px 0 var(--yellow);padding:7px 10px 8px}
.viz-tip b{display:block;font-family:var(--disp);font-weight:900;font-size:19px;line-height:1}
.viz-tip span{display:block;font-family:var(--mono);font-size:10px;line-height:1.45;letter-spacing:.03em;margin-top:5px;color:#d9d4c7}

/* the cost sheet — the charts' table view, set like a document */
.sheet{border:var(--bd);box-shadow:var(--sh-lg);background:#fff;margin:30px 0;scroll-margin-top:90px}
.sheet-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;background:var(--black);color:var(--yellow);
  padding:10px 14px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em}
.sheet-head span{color:var(--cream)}
.sheet-wrap{overflow-x:auto}
.sheet table{width:100%;min-width:620px;border-collapse:collapse}
.sheet th,.sheet td{text-align:left;vertical-align:top;padding:9px 12px;border-top:1px solid rgba(11,11,11,.1);font-size:13.5px;line-height:1.4}
.sheet thead th{border-top:0;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#6b6659;background:#FBF8EF}
.sheet tbody th{font-weight:700}
.sheet tbody th small{display:block;font-weight:500;font-size:11.5px;color:#6b6659;margin-top:2px}
.sheet td.n{font-family:var(--mono);font-weight:700;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.sheet tr.pr th,.sheet tr.pr td{background:#F3F0E6}
.sheet tr.sub th,.sheet tr.sub td{background:#FBF8EF;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.sheet tr.total th,.sheet tr.total td{border-top:var(--bd);background:var(--yellow);font-family:var(--disp);font-weight:900;
  font-size:19px;text-transform:uppercase}
.sheet tr.total td.n{font-family:var(--disp)}
.sheet tr.total td:last-child{font-family:var(--body);font-size:13px;font-weight:700;text-transform:none}
.sheet tr.aside th,.sheet tr.aside td{color:#52514e;font-style:italic}
.sheet td a,.sheet th a{border-bottom:1.5px solid rgba(11,11,11,.35)}
/* a short table (four columns) fits a phone instead of scrolling sideways */
@media(max-width:560px){
  .sheet--fit table{min-width:0}
  .sheet--fit th,.sheet--fit td{padding:8px 7px;font-size:12.5px}
  .sheet--fit thead th{font-size:8.5px;letter-spacing:.06em}
}
.guide-body .sheet-foot{margin:0;padding:10px 14px 12px;border-top:1px solid rgba(11,11,11,.1);font-family:var(--mono);
  font-size:10px;line-height:1.6;color:#5a564c}
.tag{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.04em}
.tag i{flex:none;width:10px;height:10px;border-radius:2px;background:var(--c)}
.sheet tbody th .tag{display:flex;margin-bottom:4px;font-weight:700;color:#6b6659}   /* the layer, above the document's name */

/* when each cost falls due — the site's timeline, with a chip per charge */
.guide-body .pay-tl{margin:28px 0 12px}
.guide-body .tl-item h3{margin:4px 0 6px;font-size:22px}
.guide-body .tl-item p{font-size:15.5px;margin:0 0 10px;max-width:60ch}
.pay-chips{display:flex;flex-wrap:wrap;gap:6px}
.pay-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(11,11,11,.18);border-radius:8px;background:#fff;
  padding:3px 10px 4px;font-size:12.5px;font-weight:600}
.pay-chip i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--c)}

/* two things side by side — before and after, this or that */
.duo{display:grid;gap:14px;grid-template-columns:1fr;margin:26px 0}
@media(min-width:640px){.duo{grid-template-columns:1fr 1fr}}
.duo>div{border:var(--bd);box-shadow:var(--sh-sm);background:var(--paper);padding:16px 16px 6px}
.duo>div:first-child{background:#FFF7CE}
.duo>div:last-child{background:#DCF6EA}
.duo em{display:block;font-style:normal;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;margin-bottom:6px}
.duo strong{display:block;font-family:var(--disp);font-weight:900;font-size:34px;line-height:1;margin-bottom:8px}
.guide-body .duo p{font-size:14.5px;line-height:1.5;margin:0 0 10px}