:root{
  --ink:#0e1013; --char:#171a1e; --stone:#272c32; --concrete:#d6d8d6; --paper:#f1f2f0; --white:#fff;
  --timber:#2f6fd6; --timber-d:#1c4ea3; --muted:#848a90; --line:rgba(255,255,255,.14); --line-d:rgba(14,16,19,.12);
  --disp:"Montserrat",system-ui,sans-serif; --body:"Figtree",system-ui,sans-serif; --mono:"Figtree",system-ui,sans-serif;
  --pad:clamp(16px,5vw,72px); --max:1240px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--disp);font-weight:700;line-height:1.06;letter-spacing:-.015em;margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.eyebrow{font:600 15px/1.4 var(--body);color:var(--timber);margin:0 0 12px}
.fine{font-size:13px;color:var(--muted);margin:12px 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:2px;
  font:500 15px var(--body);text-decoration:none;border:1px solid transparent;transition:background .2s,color .2s,border-color .2s;cursor:pointer}
.btn-light{background:var(--paper);color:var(--ink)} .btn-light:hover{background:var(--white)}
.btn-line{border-color:rgba(255,255,255,.5);color:var(--white)} .btn-line:hover{border-color:var(--white)}
.btn-dark{background:var(--ink);color:var(--paper)} .btn-dark:hover{background:var(--timber-d)}
:focus-visible{outline:2px solid var(--timber);outline-offset:3px}

/* ---------- Intro ---------- */
.intro{position:fixed;inset:0;z-index:100;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .45s ease,background-color .5s ease}
.intro-svg{width:min(62vmin,460px);height:auto;overflow:visible;transform-origin:0 0}
.intro .ground{stroke:rgba(214,216,214,.35);stroke-width:2;stroke-dasharray:900;stroke-dashoffset:900;animation:draw .9s cubic-bezier(.6,0,.2,1) forwards}
.intro .axis{stroke:rgba(214,216,214,.12);stroke-width:1.5;stroke-dasharray:6 10;opacity:0;animation:fade .6s .3s forwards, fadeo .5s 3.6s forwards}
.intro .ln{fill:none;stroke:#c3c8cc;stroke-width:2.2;stroke-linejoin:miter;stroke-dasharray:2400;stroke-dashoffset:2400;
  animation:draw 1.3s cubic-bezier(.5,0,.2,1) var(--d) forwards, lnout .6s 3.5s forwards}
.intro .pour{clip-path:inset(790px 0 0 0);animation:pour .95s cubic-bezier(.55,0,.15,1) var(--d) forwards}
.intro .lt{clip-path:inset(930px calc(1080px - var(--x1)) 0 var(--x0));animation:rise .55s cubic-bezier(.3,0,.1,1) var(--d) forwards}
.intro-tag{margin:22px 0 0;font:400 clamp(13px,2.4vmin,18px)/1 var(--body);color:#e8eaec;letter-spacing:.04em;opacity:0;transform:translateY(8px);
  animation:tag .8s ease 5.0s forwards}
.intro-tag i{font-style:normal;color:var(--timber);padding:0 .35em}
.intro-skip{position:absolute;right:16px;bottom:max(16px,env(safe-area-inset-bottom));background:none;border:0;color:rgba(255,255,255,.4);font:500 12px var(--mono);cursor:pointer;padding:12px}
.intro.out{opacity:0;pointer-events:none}
.intro.out .intro-tag{transition:opacity .3s;opacity:0}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes lnout{to{stroke:rgba(201,196,185,0)}}
@keyframes pour{to{clip-path:inset(var(--t) 0 0 0)}}
@keyframes rise{to{clip-path:inset(795px calc(1080px - var(--x1)) 0 var(--x0))}}
@keyframes tag{to{opacity:1;transform:none}}
body.is-intro{overflow:hidden}
.intro:not(.go) *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.intro{display:none}}

/* ---------- Header ---------- */
.top{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--pad);color:var(--white);transition:background .3s,color .3s,padding .3s}
.top.solid{background:rgba(14,16,19,.94);padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{width:40px;height:auto}
.brand-word{font:600 15px var(--disp);letter-spacing:.34em}
.nav{display:flex;gap:26px;align-items:center}
.nav a{text-decoration:none;font-size:14.5px;opacity:.85}
.nav a:hover{opacity:1}
.nav .nav-cta{border:1px solid rgba(255,255,255,.45);padding:8px 16px;opacity:1}
.menu-btn{display:none;width:44px;height:44px;background:none;border:0;position:relative;cursor:pointer}
.menu-btn span:not(.sr){position:absolute;left:11px;right:11px;height:1.5px;background:#fff;transition:transform .3s}
.menu-btn span:first-child{top:18px}.menu-btn span:nth-child(2){top:25px}
.menu-btn[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded=true] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
@media (max-width:900px){
  .menu-btn{display:block}
  .nav{position:fixed;inset:0;top:0;background:var(--ink);flex-direction:column;justify-content:center;gap:26px;
    opacity:0;pointer-events:none;transition:opacity .3s;z-index:-1}
  .nav.open{opacity:1;pointer-events:auto}
  .nav a{font:500 22px var(--disp)}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:var(--white);background:var(--ink);overflow:hidden}
.hero-img{position:absolute;inset:0}
.hero-img img,.hero-pour{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-pour{display:none}
.hero.pouring .hero-pour{display:block}
.hero.pouring .hero-photo{opacity:0}
.hero-photo{transition:opacity 1s ease}
.hero.poured .hero-pour{opacity:0;transition:opacity 1s}

.hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,16,19,.55) 0,rgba(14,16,19,.05) 30%,rgba(14,16,19,.25) 55%,rgba(14,16,19,.92) 100%)}
.hero-text{position:relative;padding:0 var(--pad) clamp(72px,12vh,120px);max-width:880px}
.hero h1{font-size:clamp(46px,9vw,112px);font-weight:500}
.hero h1 em{font-style:normal;color:var(--concrete);-webkit-text-stroke:0}
.lede{font-size:clamp(17px,1.6vw,20px);max-width:36em;margin:22px 0 0;color:inherit;opacity:.88}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-meta{position:absolute;right:var(--pad);bottom:clamp(72px,12vh,120px);display:flex;flex-direction:column;align-items:flex-end;gap:4px;
  font:500 14px var(--body);opacity:.8}
@media (max-width:700px){.hero-meta{display:none}}

/* ---------- Proof ---------- */
.proof{display:grid;grid-template-columns:repeat(3,1fr);background:var(--ink);color:var(--paper);border-top:1px solid var(--line)}
.proof div{padding:28px var(--pad);border-right:1px solid var(--line)}
.proof div:last-child{border:0}
.proof b{display:block;font:500 clamp(26px,3vw,38px) var(--disp);color:var(--white)}
.proof span{font-size:14px;color:#b3b9bf}
@media (max-width:760px){.proof{grid-template-columns:1fr}.proof div{border-right:0;border-bottom:1px solid var(--line);padding:22px var(--pad)}}

/* ---------- Sections ---------- */
section:not(.hero):not(.proof){padding:clamp(72px,11vw,140px) var(--pad)}
.sec-head{max-width:var(--max);margin:0 auto 40px}
.sec-head h2{font-size:clamp(30px,5vw,58px);max-width:14em}
.sec-head p:not(.eyebrow){max-width:36em;margin:18px 0 0;color:#50565c}
.stages,.map,.team{background:var(--ink);color:var(--paper)}
.stages .sec-head p:not(.eyebrow),.map .sec-head p:not(.eyebrow),.team .sec-head p:not(.eyebrow){color:#b3b9bf}

/* ---------- 1. Stages ---------- */
.stage-view{position:relative;max-width:var(--max);margin:0 auto;aspect-ratio:16/9;overflow:hidden;background:var(--char);touch-action:pan-y;user-select:none;cursor:grab}
.stage-view:active{cursor:grabbing}
.stage-imgs img{-webkit-user-drag:none;pointer-events:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:opacity,transform}
.stage-track{position:relative;max-width:var(--max);margin:22px auto 0;height:44px;touch-action:none;cursor:pointer}
.stage-rail{position:absolute;left:0;right:0;top:20px;height:4px;background:var(--stone)}
.stage-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--timber)}
.stage-knob{position:absolute;top:8px;width:28px;height:28px;margin-left:-14px;border-radius:50%;background:var(--paper);border:6px solid var(--timber);box-shadow:0 2px 12px rgba(0,0,0,.4);cursor:grab}
.stage-knob:active{cursor:grabbing}
.stage-cap{position:absolute;left:16px;bottom:14px;margin:0;z-index:2;font:500 14px var(--body);background:rgba(14,16,19,.72);padding:7px 10px;color:var(--paper)}
.stage-steps{list-style:none;padding:0;margin:6px auto 0;max-width:var(--max);display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.stage-steps button{width:100%;background:none;border:0;color:#8a9096;padding:6px 0 0;text-align:center;
  font:500 13px var(--mono);cursor:pointer;transition:color .2s,border-color .2s}
.stage-steps button.on{color:var(--paper)}
.stage-steps li:first-child button{text-align:left}.stage-steps li:last-child button{text-align:right}
.stage-steps small{display:block;font-size:11px;opacity:.6}
@media (max-width:600px){.stage-view{aspect-ratio:4/5}.stage-steps button{font-size:10.5px;letter-spacing:.02em}}

/* ---------- Work: site walk ---------- */
.work{background:var(--paper);padding:0!important}
.work-pin{padding:clamp(72px,9vw,120px) 0 40px;overflow:hidden}
.work .sec-head{padding:0 var(--pad);margin-bottom:28px}
.work-rail{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 var(--pad)}
.work-rail::-webkit-scrollbar{display:none}
.work-track{display:flex;gap:14px;width:max-content;will-change:transform}
.walk{position:relative;flex:0 0 auto;width:84vw;aspect-ratio:4/5;scroll-snap-align:center;overflow:hidden;background:var(--char);border:0;padding:0;
  color:var(--white);text-align:left;cursor:pointer}
.walk img{position:absolute;inset:0 -8%;width:116%;height:100%;object-fit:cover;transform:translateX(var(--px,0));transition:transform .1s linear}
.walk::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,16,19,.15) 0,transparent 35%,rgba(14,16,19,.88) 100%)}
.walk-t{position:absolute;left:clamp(16px,2.4vw,32px);right:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,30px);z-index:1}
.walk-n{display:block;font:500 clamp(48px,7vw,104px)/.9 var(--disp);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55);margin-bottom:10px}
.walk h3{font-size:clamp(26px,3.4vw,46px)}
.walk p{margin:8px 0 0;font-size:15px;opacity:.85}
.walk .tag{top:16px;left:16px}
.work-foot{display:flex;align-items:center;gap:18px;padding:22px var(--pad) 0}
.work-count{font:500 15px var(--disp);min-width:72px}
.work-bar{flex:1;height:2px;background:var(--line-d);position:relative;max-width:420px}
.work-bar i{position:absolute;inset:0 auto 0 0;width:16.6%;background:var(--timber);transition:width .2s}
.tag{position:absolute;z-index:1;font:600 12.5px var(--body);padding:5px 9px;background:var(--paper);color:var(--ink)}
.tag.build{background:var(--timber);color:var(--white)}
@media (min-width:600px) and (max-width:899px){.walk{width:62vw}}
@media (min-width:900px){
  .work{height:var(--walk-h,400vh)}
  .work-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:70px 0 30px}
  .work-rail{overflow:visible;scroll-snap-type:none}
  .walk{width:min(62vw,860px);aspect-ratio:auto;height:min(58vh,560px)}
  .walk:nth-child(even){margin-top:4vh}
}


/* ---------- Sheet ---------- */
.sheet{position:fixed;inset:0;z-index:80;background:rgba(14,16,19,.6);display:flex;justify-content:flex-end}
.sheet[hidden]{display:none}
.sheet-in{position:relative;width:min(920px,100%);height:100%;overflow:auto;background:var(--paper);padding:56px clamp(18px,4vw,48px) 48px;animation:slide .45s cubic-bezier(.2,0,0,1)}
@keyframes slide{from{transform:translateX(40px);opacity:0}}
.sheet-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;background:none;font-size:30px;cursor:pointer;color:var(--ink)}
.sheet h3{font-size:clamp(28px,4vw,44px)}
.sh-facts{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:8px 28px;margin:20px 0 0}
.sh-facts dt{font:500 13px var(--body);color:var(--muted)}
.sh-facts dd{margin:2px 0 0;font-weight:600}
@media (max-width:520px){.sh-facts{grid-template-columns:1fr 1fr}}
.sh-gallery{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:28px 0}
.sh-gallery img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--concrete)}
.sh-gallery img:first-child{grid-column:span 2;aspect-ratio:16/10}

/* ---------- 2. Planner ---------- */
.plan-wrap{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,5vw,72px);align-items:stretch}
@media (max-width:860px){.plan-wrap{grid-template-columns:1fr}}
.plan-form fieldset{border:0;padding:0;margin:0 0 26px}
.plan-form legend{font:500 12px var(--mono);color:var(--muted);margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{min-height:46px;min-width:64px;padding:0 16px;border:1px solid var(--line-d);background:var(--white);font:500 15px var(--body);cursor:pointer;color:var(--ink);transition:all .15s}
.chips button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.plan-out{background:var(--white);border:1px solid var(--line-d);padding:clamp(18px,3vw,32px)}
.plan-svg{width:100%;max-width:360px;display:block;margin:0 auto 18px;height:auto}
.plan-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 16px}
.plan-nums dt{font:500 13px var(--body);color:var(--muted)}
.plan-nums dd{margin:4px 0 0;font:500 clamp(16px,1.7vw,21px) var(--disp);white-space:nowrap}
@media (max-width:420px){.plan-nums{grid-template-columns:1fr 1fr}.plan-nums div:first-child{grid-column:span 2}}
.plan-match{margin:0 0 18px;font-size:15px;color:#50565c;min-height:1.6em}
.plan-match a{color:var(--timber-d)}
:root{--iso-l:#e2e4e3;--iso-r:#bfc4c7;--iso-top:#f3f1ec}
.iso-plot{fill:#e9ece9;stroke:var(--ink);stroke-width:1;stroke-dasharray:4 4}
.iso-road{fill:#252a30}.iso-lane{fill:#e6e8e9;opacity:.7}
.iso-shadow{fill:rgba(14,16,19,.12)}
.iso-l{fill:var(--iso-l);stroke:#5e646a;stroke-width:.8}.iso-r{fill:var(--iso-r);stroke:#5e646a;stroke-width:.8}
.iso-top{fill:var(--iso-top);stroke:#5e646a;stroke-width:.8}
.iso-win{fill:#3d4a52;opacity:.85}
.iso-comp{fill:none;stroke:var(--line-d)}.iso-needle{stroke:var(--timber);stroke-width:2.5;stroke-linecap:round}
.iso-n{font:600 13px var(--body);fill:var(--timber)}.iso-lbl{font:500 12.5px var(--body);fill:var(--muted)}
.ps-plot{fill:#f4f2ee;stroke:var(--ink);stroke-width:1.2;stroke-dasharray:4 4}
.ps-build{fill:var(--concrete);stroke:var(--ink);stroke-width:1.5;transition:all .4s}
.ps-floor{fill:none;stroke:rgba(14,16,19,.35);stroke-width:1}
.ps-txt{font:500 10px var(--mono);fill:var(--muted);}
.ps-road{fill:var(--timber)}

/* ---------- 3. Map ---------- */
.map-filters{max-width:var(--max);margin:0 auto 16px;display:flex;gap:8px;flex-wrap:wrap}
.map-filters button{min-height:42px;padding:0 16px;background:none;color:#b3b9bf;border:1px solid var(--stone);font:500 14px var(--body);cursor:pointer}
.map-filters button.on{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.map-box{max-width:var(--max);margin:0 auto;background:var(--char);border:1px solid var(--stone)}
.map-svg{width:100%;height:auto;display:block}
.map .fine{max-width:var(--max);margin:12px auto 0}
.m-road{fill:none;stroke:#2f3439;stroke-width:6;stroke-linecap:round}
.m-road.main{stroke:#3b4148;stroke-width:9}
.m-lbl{font:500 12px var(--body);fill:#868c92}
.m-area{font:400 13px var(--body);fill:#8a9096}
.m-ring{fill:none;stroke:rgba(47,111,214,.25);stroke-dasharray:3 6}
.pin{cursor:pointer;transition:opacity .3s}
.pin.off{opacity:.12;pointer-events:none}
.pin circle.dot{fill:var(--paper);stroke:var(--ink);stroke-width:3}
.pin.build circle.dot{fill:var(--timber)}
.pin circle.halo{fill:rgba(242,240,235,.12);transform-box:fill-box;transform-origin:center;animation:halo 2.6s ease-out infinite}
.pin text{font:500 15px var(--disp);fill:var(--paper)}
.pin text.sub{font:500 13px var(--body);fill:#a3a9af;}
.pin:hover circle.dot,.pin:focus circle.dot{stroke:var(--timber)}
.hq polygon{fill:var(--paper)} .hq text{font:600 12px var(--mono);fill:var(--paper);}
.map-svg.small .pin text{font-size:24px}.map-svg.small .pin text.sub{font-size:16px}
.map-svg.small .m-lbl{font-size:16px}.map-svg.small .m-area{font-size:19px}.map-svg.small .hq text{font-size:18px}
@keyframes halo{from{transform:scale(.6);opacity:1}to{transform:scale(2.2);opacity:0}}

/* ---------- Story ---------- */
.story-line{list-style:none;margin:0 auto;padding:0;max-width:var(--max);display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line-d)}
.story-line li{padding:22px 18px 0 0;position:relative}
.story-line li::before{content:"";position:absolute;top:-6px;left:0;width:11px;height:11px;background:var(--timber);transform:rotate(45deg)}
.story-line b{display:block;font:500 clamp(22px,2.6vw,32px) var(--disp)}
.story-line p{margin:8px 0 0;font-size:15px;color:#50565c}
@media (max-width:860px){.story-line{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--line-d);padding-left:22px}
  .story-line li{padding:0 0 26px}.story-line li::before{top:8px;left:-28px}}

/* ---------- 8. Team ---------- */
.team-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,24px)}
@media (max-width:860px){.team-grid{grid-template-columns:1fr}}
.person{background:var(--char);border:1px solid var(--stone);padding:28px;display:flex;flex-direction:column;gap:14px}
.person .mono{width:64px;height:64px;display:grid;place-items:center;background:var(--stone);clip-path:polygon(50% 0,100% 100%,0 100%);
  font:600 15px var(--disp);color:var(--paper);padding-top:20px}
.person h3{font-size:21px}
.person .role{font:600 14px var(--body);color:var(--timber)}
.person p{margin:0;color:#b3b9bf;font-size:15px;flex:1}
.person .acts{display:flex;gap:8px;flex-wrap:wrap}
.person .acts a{flex:1;min-width:120px;text-align:center}

/* ---------- Contact ---------- */
.contact{background:var(--paper);text-align:center}
.contact-in{max-width:640px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.contact-mark{width:84px;height:auto;margin-bottom:22px}
.contact h2{font-size:clamp(36px,6vw,72px)}
.contact .lede{color:#50565c}
.contact .btn-line{border-color:var(--ink);color:var(--ink)}
.contact .btn-light{background:var(--ink);color:var(--paper)}
address{font-style:normal;margin-top:28px;color:#50565c;font-size:15px}
address a{text-decoration:none}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px var(--pad);background:var(--ink);color:#8a9096;font-size:13px}
.foot a{text-decoration:none}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,0,0,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.pin circle.halo{animation:none}}

/* section wipes */
.sec-head.wiped{position:relative}
.wipe{position:absolute;inset:-10px -4vw;pointer-events:none;overflow:hidden;z-index:2}
.wipe i{position:absolute;top:0;bottom:0;width:9%;left:-25%;transform:skewX(-30deg);background:var(--timber)}
.wipe i:nth-child(2){background:var(--concrete);width:6%}.wipe i:nth-child(3){background:#8c877e;width:4%}.wipe i:nth-child(4){background:var(--timber-d);width:3%}
.sec-head.wiped h2,.sec-head.wiped .eyebrow{clip-path:inset(0 100% 0 0)}
.sec-head.go h2,.sec-head.go .eyebrow{clip-path:inset(0 0 0 0);transition:clip-path 1s cubic-bezier(.6,0,.2,1) .18s}
.sec-head.go .wipe i{animation:wipe 1.15s cubic-bezier(.6,0,.2,1) forwards}
.sec-head.go .wipe i:nth-child(2){animation-delay:.07s}.sec-head.go .wipe i:nth-child(3){animation-delay:.14s}.sec-head.go .wipe i:nth-child(4){animation-delay:.2s}
@keyframes wipe{to{left:125%}}
@media (prefers-reduced-motion:reduce){.sec-head.wiped h2,.sec-head.wiped .eyebrow{clip-path:none}.wipe{display:none}}

/* map routes + hover card */
.m-route{fill:none;stroke:var(--timber);stroke-width:1.6;opacity:.75;transition:opacity .3s}
.m-route.off{opacity:.06}
.map-svg.draw .m-route{transition:stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1) var(--d),opacity .3s;stroke-dashoffset:0!important}
.map-box{position:relative}
.map-card{position:absolute;width:200px;transform:translate(-50%,calc(-100% - 18px)) scale(.94);opacity:0;pointer-events:none;background:var(--paper);color:var(--ink);
  transition:opacity .2s,transform .2s;box-shadow:0 10px 30px rgba(0,0,0,.4);z-index:3}
.map-card.on{opacity:1;transform:translate(-50%,calc(-100% - 18px))}
.map-card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.map-card b{display:block;padding:8px 10px 0;font:500 15px var(--disp)}
.map-card span{display:block;padding:0 10px 9px;font-size:13px;color:var(--muted)}

/* hero slideshow of finished work */
.hero-img .slide{opacity:0;transition:opacity 1.6s ease,transform 7s linear;transform:scale(1.06)}
.hero-img .slide.on{opacity:1;transform:scale(1)}
.hero-meta{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.hero-dots{display:flex;gap:6px}
.hero-dots i{width:22px;height:3px;background:rgba(255,255,255,.3)}
.hero-dots i.on{background:var(--white)}

/* project cards: survey corner marks on hover */
.corners i{position:absolute;width:26px;height:26px;z-index:2;border:0 solid var(--white);opacity:0;transition:all .35s cubic-bezier(.2,0,0,1)}
.corners i:nth-child(1){top:24px;left:24px;border-width:2px 0 0 2px}
.corners i:nth-child(2){top:24px;right:24px;border-width:2px 2px 0 0}
.corners i:nth-child(3){bottom:24px;left:24px;border-width:0 0 2px 2px}
.corners i:nth-child(4){bottom:24px;right:24px;border-width:0 2px 2px 0}
.walk:hover .corners i,.walk:focus-visible .corners i{opacity:1}
.walk:hover .corners i:nth-child(1),.walk:focus-visible .corners i:nth-child(1){top:12px;left:12px}
.walk:hover .corners i:nth-child(2),.walk:focus-visible .corners i:nth-child(2){top:12px;right:12px}
.walk:hover .corners i:nth-child(3),.walk:focus-visible .corners i:nth-child(3){bottom:12px;left:12px}
.walk:hover .corners i:nth-child(4),.walk:focus-visible .corners i:nth-child(4){bottom:12px;right:12px}
.walk-open{position:absolute;right:clamp(16px,2.4vw,32px);bottom:clamp(18px,2.6vw,32px);z-index:2;font:600 14px var(--body);padding:10px 14px;background:var(--white);color:var(--ink);
  transform:translateY(8px);opacity:0;transition:all .3s}
.walk:hover .walk-open,.walk:focus-visible .walk-open{opacity:1;transform:none}
@media (hover:none){.walk-open{opacity:1;transform:none;padding:8px 11px;font-size:13px}}

/* chat */
.chat-fab{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:70;display:flex;align-items:center;gap:10px;
  min-height:52px;padding:0 20px 0 16px;border:0;border-radius:26px;background:var(--timber);color:var(--white);font:600 15px var(--body);cursor:pointer;box-shadow:0 8px 28px rgba(14,16,19,.35);
  transition:transform .2s,background .2s}
.chat-fab:hover{background:var(--timber-d);transform:translateY(-2px)}
.chat-fab-i{width:18px;height:16px;border:2px solid currentColor;border-radius:4px 4px 4px 0;position:relative}
.chat-fab[aria-expanded=true]{opacity:0;pointer-events:none}
body.is-intro .chat-fab{opacity:0}
.chat{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:75;width:min(380px,calc(100vw - 32px));
  height:min(560px,calc(100svh - 100px));display:flex;flex-direction:column;background:var(--paper);box-shadow:0 18px 60px rgba(14,16,19,.45);border-radius:14px;overflow:hidden;
  animation:chatIn .35s cubic-bezier(.2,0,0,1)}
.chat[hidden]{display:none}
@keyframes chatIn{from{transform:translateY(16px);opacity:0}}
.chat-h{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;background:var(--ink);color:var(--paper)}
.chat-h img{width:28px;height:auto}
.chat-h div{flex:1;line-height:1.25}.chat-h b{display:block;font:500 15px var(--disp)}.chat-h span{font-size:12.5px;color:#b3b9bf}
.chat-x{width:40px;height:40px;border:0;background:none;color:var(--paper);font-size:26px;cursor:pointer}
.chat-log{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:86%;padding:10px 13px;font-size:15px;line-height:1.45;border-radius:12px;animation:chatIn .3s ease}
.msg.bot{background:var(--white);border:1px solid var(--line-d);border-bottom-left-radius:3px}
.msg.me{align-self:flex-end;background:var(--ink);color:var(--paper);border-bottom-right-radius:3px}
.msg a{color:var(--timber-d);font-weight:600}
.chat-opts{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px 16px;border-top:1px solid var(--line-d);background:var(--paper)}
.chat-opts button,.chat-opts a{min-height:40px;padding:0 14px;border:1px solid var(--timber);background:var(--white);color:var(--timber-d);font:600 14px var(--body);border-radius:20px;cursor:pointer;
  display:inline-flex;align-items:center;text-decoration:none}
.chat-opts .go{background:var(--timber);color:var(--white)}
.typing{display:inline-flex;gap:4px}.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:.25}}


/* palette options to compare: ?palette=navy | brass | brick | sand */
html[data-p=navy]{--ink:#0d1b33;--char:#13254a;--stone:#22386a;--paper:#f6f5f1;--concrete:#e3e1da;--timber:#2c5be8;--timber-d:#1c3fae;--muted:#7a8299}
html[data-p=brass]{--ink:#0b1426;--char:#111d36;--stone:#1f2f52;--paper:#f7f3ea;--concrete:#e6dfcf;--timber:#b8912f;--timber-d:#8c6c1d;--muted:#857d6a}
html[data-p=brick]{--ink:#24160f;--char:#2f1d14;--stone:#4a3024;--paper:#faf6ef;--concrete:#ebe2d4;--timber:#b4442c;--timber-d:#8a3120;--muted:#8a7a6c}
html[data-p=sand]{--ink:#111111;--char:#1a1a1a;--stone:#2e2e2e;--paper:#efe6d6;--concrete:#e2d6c1;--timber:#d7322f;--timber-d:#a8221f;--muted:#857a68}
html[data-p] .intro,html[data-p] .hero{background:var(--ink)}


/* ---------- 1. Concept to concrete: scroll story with a building that goes up ---------- */
.st-wrap{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(260px,.8fr) 1.4fr;gap:clamp(24px,5vw,72px);align-items:stretch}
.st-sticky{position:sticky;top:90px;display:flex;flex-direction:column;gap:14px}
.st-svg{width:100%;max-width:380px;height:auto;display:block}
.st-now{margin:0;display:flex;align-items:baseline;gap:14px}
.st-now b{font:500 clamp(40px,5vw,64px)/1 var(--disp);color:var(--timber)}
.st-now span{font:500 clamp(20px,2.2vw,28px) var(--disp);color:var(--paper)}
.st-dots{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.st-dots li{flex:1;max-width:64px;height:3px;background:var(--stone);transition:background .4s}
.st-dots li.on{background:var(--timber)}
.st-list{display:flex;flex-direction:column;gap:clamp(48px,9vh,110px);padding-bottom:10vh}
.st-item{margin:0;opacity:.35;transform:translateY(14px);transition:opacity .6s,transform .6s cubic-bezier(.2,0,0,1)}
.st-item.on{opacity:1;transform:none}
.st-item img{width:100%;height:auto;display:block;background:var(--char)}
.st-item figcaption{margin-top:14px;color:#b3b9bf;font-size:16px}
.st-item figcaption small{display:block;font:600 13px var(--body);color:var(--timber);margin-bottom:4px}
.st-item figcaption b{color:var(--paper);font:500 19px var(--disp);margin-right:6px}
/* the drawing of the building */
.st-svg .gnd{fill:#1f242b;stroke:#3b4148}
.st-svg .foot{fill:none;stroke:#8a9096;stroke-dasharray:4 4}
.st-svg .dirt{fill:#6b5a48;opacity:.0;transition:opacity .5s}
.st-svg.s0 .dirt{opacity:.9}
.st-svg .col,.st-svg .slab{stroke:#c3c8cc;stroke-width:2.2;fill:none;transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform .7s cubic-bezier(.3,0,.2,1) calc(var(--k,0) * .05s)}
.st-svg .slab{transform-origin:50% 50%;transform:scaleX(0);stroke-width:1.6}
.st-svg .wall{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform .8s cubic-bezier(.3,0,.2,1) calc(var(--k,0) * .12s)}
.st-svg .wall.l{fill:#cfd2d0}.st-svg .wall.r{fill:#aeb3b5}.st-svg .wall.t{fill:#e3e5e3}
.st-svg .win{fill:#2b3a4a;opacity:0;transition:opacity .5s calc(var(--k,0) * .06s),fill .6s}
.st-svg .glass{fill:#4f86c6;opacity:0;transition:opacity .6s calc(var(--k,0) * .06s)}
.st-svg .glow{fill:#f3c56b;opacity:0;transition:opacity .7s calc(var(--k,0) * .1s)}
.st-svg.s1 .col,.st-svg.s2 .col,.st-svg.s3 .col,.st-svg.s4 .col{transform:none}
.st-svg.s1 .slab,.st-svg.s2 .slab,.st-svg.s3 .slab,.st-svg.s4 .slab{transform:none}
.st-svg.s2 .wall,.st-svg.s3 .wall,.st-svg.s4 .wall{transform:none}
.st-svg.s2 .win,.st-svg.s3 .win,.st-svg.s4 .win{opacity:1}
.st-svg.s3 .glass,.st-svg.s4 .glass{opacity:.92}
.st-svg.s4 .glow{opacity:.95}
@media (max-width:860px){
  .st-wrap{grid-template-columns:1fr;gap:0}
  .st-side{position:sticky;top:56px;z-index:3;background:var(--ink);margin:0 calc(-1 * var(--pad));padding:8px var(--pad);border-bottom:1px solid var(--stone)}
  .st-sticky{position:static;flex-direction:row;align-items:center;gap:14px}
  .st-svg{width:96px;flex:0 0 96px}
  .st-now{flex-direction:column;gap:2px}.st-now b{font-size:26px}.st-now span{font-size:17px}
  .st-dots{display:none}
  .st-list{padding-top:24px;gap:44px}
}
@media (prefers-reduced-motion:reduce){.st-svg *{transition:none!important}.st-item{opacity:1;transform:none}}


picture{display:contents}
.hero-meta a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px}
.hero-meta a:hover{border-color:var(--white)}
.sh-gallery>picture:first-child>img{grid-column:span 2;aspect-ratio:16/10}

/* craft details */
.craft{background:var(--paper)}
.craft-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(180px,22vw,300px);gap:clamp(8px,1.2vw,16px)}
.craft-t{position:relative;overflow:hidden;border:0;padding:0;background:var(--char);cursor:pointer;text-align:left;color:var(--white)}
.craft-t.tall{grid-row:span 2}
.craft-t img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,0,0,1),filter .6s}
.craft-t:hover img,.craft-t:focus-visible img{transform:scale(1.06)}
.craft-t::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(11,20,38,.82))}
.craft-c{position:absolute;left:16px;right:16px;bottom:14px;z-index:1}
.craft-c b{display:block;font:500 clamp(16px,1.6vw,21px)/1.2 var(--disp)}
.craft-c small{display:block;margin-top:4px;font-size:13.5px;opacity:.85}
@media (max-width:760px){.craft-grid{grid-template-columns:1fr 1fr;grid-auto-rows:46vw}.craft-t.tall{grid-row:span 2}}
/* footer */
.foot{display:block;padding:0;background:var(--ink);color:#b3b9bf;font-size:14.5px}
.foot-in{max-width:var(--max);margin:0 auto;padding:56px var(--pad) 32px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1.3fr;gap:32px}
.foot-brand{display:flex;flex-direction:column;gap:8px}
.foot-brand b{font:600 18px var(--disp);letter-spacing:.32em;color:var(--white)}
.foot-col{display:flex;flex-direction:column;gap:8px}
.foot-col b{font:600 13px var(--body);color:var(--timber);margin-bottom:4px}
.foot a{text-decoration:none;color:#d7dbe0}.foot a:hover{color:var(--white)}
.foot address{font-style:normal;line-height:1.6}
.foot-base{max-width:var(--max);margin:0 auto;padding:18px var(--pad) 90px;border-top:1px solid var(--stone);display:flex;justify-content:space-between;gap:16px;font-size:13px}
@media (max-width:860px){.foot-in{grid-template-columns:1fr 1fr}.foot-brand{grid-column:span 2}}
@media (max-width:480px){.foot-in{grid-template-columns:1fr}.foot-brand{grid-column:auto}}

/* ---------- Intro: the logo built like a site ---------- */
.intro .crs{opacity:0;transform:translateY(-22px);animation:lay .32s cubic-bezier(.2,.9,.3,1.15) var(--d) forwards}
@keyframes lay{to{opacity:1;transform:none}}
.intro .lvl{stroke:#d4b25a;stroke-width:2.5;opacity:0;animation:lvlup 2.35s cubic-bezier(.45,0,.55,1) 1.1s forwards, fadeo .35s 3.55s forwards}
@keyframes lvlup{0%{opacity:.95;transform:none}100%{opacity:.95;transform:translateY(-705px)}}
.intro .pegs line{stroke:#d4b25a;stroke-width:4;stroke-linecap:round;opacity:0;animation:fade .25s var(--d) forwards, fadeo .4s 3.6s forwards}
@keyframes fadeo{to{opacity:0}}
.intro .sweep{transform:translateX(-400px) skewX(-30deg);animation:sweep 1.3s cubic-bezier(.5,0,.3,1) 4.25s forwards}
@keyframes sweep{to{transform:translateX(1300px) skewX(-30deg)}}
/* ending: words leave, the mark glides into the header logo */
.intro.leave{background-color:rgba(0,0,0,0)}
.intro.leave .intro-tag,.intro.leave .word,.intro.leave .grid,.intro.leave .lines,.intro.leave .lvl,.intro.leave .pegs,.intro.leave .shine-g,.intro.leave .hm-move,.intro.leave .intro-skip{animation:none!important;opacity:0!important;transition:opacity .25s}
.intro.leave .intro-svg{transition:transform .8s cubic-bezier(.55,0,.2,1)}
html .intro.leave,html[data-p] .intro.leave{background-color:rgba(0,0,0,0);transition:background-color .6s ease}

/* courses: wet cement first, then the marble finish */
.intro .crs .cem{fill:#8d949b}
.intro .crs image{opacity:0;animation:fade .35s calc(var(--d) + .22s) forwards}
/* the hammer works its way up with the level line, striking as each course lands */
.intro .hm-move{opacity:0;animation:fade .3s .95s forwards, lvlup2 2.35s cubic-bezier(.45,0,.55,1) 1.1s forwards, fadeo .35s 3.5s forwards}
@keyframes lvlup2{0%{transform:none}100%{transform:translate(352px,-610px)}}
.intro .hm-swing{transform-box:view-box;transform-origin:107px 792px;animation:swing .6s ease-in-out 1.1s 4 both}
@keyframes swing{0%{transform:rotate(-22deg)}45%{transform:rotate(-22deg)}62%{transform:rotate(12deg)}72%{transform:rotate(8deg)}100%{transform:rotate(-22deg)}}
.intro .hm-handle{fill:#b8912f}.intro .hm-head{fill:#c9ced3}.intro .hm-face{fill:#9aa1a8}
.intro .puffs circle{fill:#c9ced3;opacity:0;transform-box:fill-box;transform-origin:center;animation:puff .6s ease-out 1.48s 4}
@keyframes puff{0%{opacity:.8;transform:scale(.4)}100%{opacity:0;transform:scale(1.8) translateY(-6px)}}

/* about + services */
.about{background:var(--paper)}
.about-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,80px);align-items:start}
.about .sec-head{margin:0}
.about .sec-head p:not(.eyebrow){font-size:18px;max-width:30em}
.svc{display:grid;gap:14px}
.svc-c{position:relative;display:grid;grid-template-columns:56px 1fr;gap:4px 20px;padding:22px 24px;background:var(--white);border:1px solid var(--line-d);
  transition:transform .3s cubic-bezier(.2,0,0,1),box-shadow .3s,border-color .3s}
.svc-c:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(11,20,38,.12);border-color:var(--timber)}
.svc-c svg{grid-row:span 3;width:56px;height:56px;fill:none;stroke:var(--timber);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.svc-c h3{font-size:21px}
.svc-c p{margin:0;color:#50565c;font-size:15.5px}
.svc-a{font-weight:600;font-size:14.5px;color:var(--timber-d);text-decoration:none;margin-top:6px}
.svc-a:hover{text-decoration:underline}
@media (max-width:860px){.about-in{grid-template-columns:1fr}}
@media (max-width:420px){.svc-c{grid-template-columns:44px 1fr;padding:18px}.svc-c svg{width:44px;height:44px}}

/* details: dark bento, 4 columns x 2 rows */
.craft{background:var(--ink);color:var(--paper)}
.craft .sec-head p:not(.eyebrow){color:#b3b9bf}
.craft-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(190px,21vw,300px)}
.craft-t.k0{grid-row:span 2}
.craft-t.k1{grid-column:span 2}
.craft-t.k2{grid-row:span 2}
.craft-t.tall{grid-row:auto}
.craft-t{outline:1px solid rgba(255,255,255,.06);outline-offset:-1px}
.craft-t::before{content:"";position:absolute;left:16px;right:16px;bottom:12px;height:2px;background:var(--timber);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,0,0,1);z-index:2}
.craft-t:hover::before,.craft-t:focus-visible::before{transform:scaleX(1)}
.craft-n{position:absolute;top:14px;left:16px;z-index:1;font:700 13px var(--disp);color:var(--timber);background:rgba(11,20,38,.75);padding:5px 8px}
.craft-c{bottom:22px}
@media (max-width:760px){.craft-grid{grid-template-columns:1fr 1fr;grid-auto-rows:44vw}.craft-t.k1{grid-column:span 2}.craft-t.k0,.craft-t.k2{grid-row:span 2}}
@media (max-width:760px){.craft-grid{grid-auto-flow:dense}}

/* planner: a blueprint drawing board */
.planner .plan-wrap{grid-template-columns:.9fr 1.3fr;align-items:stretch}
.plan-form{padding-top:6px}
.plan-form legend{font:600 15px var(--body);color:var(--ink);text-transform:none;letter-spacing:0;margin-bottom:12px}
.plan-form legend b{display:inline-block;font:700 13px var(--disp);color:var(--white);background:var(--timber);padding:3px 7px;margin-right:8px}
.plan-form fieldset{margin-bottom:30px}
.chips button{min-height:50px;font-size:16px;border-color:rgba(11,20,38,.18)}
.chips button:hover{border-color:var(--ink)}
.plan-out{position:relative;background-color:var(--ink);color:var(--paper);border:0;border-radius:4px;overflow:hidden;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
  linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:80px 80px,80px 80px,16px 16px,16px 16px;box-shadow:0 24px 60px rgba(11,20,38,.25)}
.plan-out::before{content:"DRAWING NO. 01  ·  INDICATIVE";position:absolute;right:16px;bottom:10px;font:600 10px var(--body);letter-spacing:.14em;color:rgba(255,255,255,.28)}
.plan-svg{max-width:440px}
.plan-out .plan-nums dt{color:#9aa3b5}
.plan-out .plan-nums dd{color:var(--white)}
.plan-out .plan-nums div:nth-child(2) dd{color:var(--timber)}
.plan-out .plan-match{color:#c4cad6}
.plan-out .plan-match a{color:var(--timber)}
.plan-out .fine{color:#8b94a8}
.plan-out .btn-dark{background:var(--timber);color:var(--ink)}
.plan-out .btn-dark:hover{background:var(--white)}
.plan-out .iso-plot{fill:rgba(255,255,255,.06);stroke:var(--timber);stroke-width:1.2}
.plan-out .iso-road{fill:#25324d}.plan-out .iso-lane{fill:#c9a227;opacity:.8}
.plan-out .iso-shadow{fill:rgba(0,0,0,.35)}
.plan-out .iso-l{fill:#e7e4dc;stroke:#0b1426}.plan-out .iso-r{fill:#b9b6ae;stroke:#0b1426}.plan-out .iso-top{fill:#f5f3ee;stroke:#0b1426}
.plan-out .iso-win{fill:#2f4a6b;opacity:1}
.plan-out .iso-comp{stroke:rgba(255,255,255,.25)}
.plan-out .iso-lbl{fill:#c4cad6}
@media (max-width:860px){.planner .plan-wrap{grid-template-columns:1fr}}

/* the finished logo: one clean image replaces the courses, so no seams remain */
.intro .final{opacity:0;animation:fade .3s ease 4.15s forwards}
/* dust kicked up as each course lands */
.intro .dust circle{fill:#cfd3d6;opacity:0;transform-box:fill-box;transform-origin:center;animation:dust 1.1s ease-out var(--d) forwards}
@keyframes dust{0%{opacity:.75;transform:translate(0,0) scale(.4)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(var(--s))}}
.intro.leave .dust{opacity:0!important}
.foot address{margin:0;color:#c4cad6;font-size:14.5px}

/* team with photos: 4 across */
.team-grid{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.team-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.team-grid{grid-template-columns:1fr}}
.person{padding:0;overflow:hidden;gap:0}
.person>div,.person>p,.person>.acts{padding-left:22px;padding-right:22px}
.person>div:not(.mono){padding-top:18px}
.person>p{padding-top:10px;padding-bottom:22px}
.person>.acts{padding-bottom:22px;margin-top:-6px}
.person .face{width:100%;aspect-ratio:6/7;object-fit:cover;object-position:50% 20%;display:block;background:var(--stone);filter:saturate(.92)}
.person .mono{width:100%;aspect-ratio:6/7;height:auto;clip-path:none;display:grid;place-items:center;padding:0;background:linear-gradient(160deg,var(--stone),var(--char));font:700 44px var(--disp);color:rgba(255,255,255,.35)}



/* ---------- Intro: tilt-up. Panels are cast flat as wet concrete, cure to marble, and are tilted up into place ---------- */
.intro-art{position:relative;width:min(62vmin,460px);aspect-ratio:1}
.intro-art .intro-svg{width:100%;height:100%;position:relative;z-index:1}
.intro .tilt{position:absolute;inset:0;perspective:1200px;perspective-origin:50% 20%;z-index:2;pointer-events:none;animation:fadeo .25s linear 4.3s forwards}
.intro .scene{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 82.33%;transform:rotateX(50deg) translateY(4%);
  animation:camera 2.6s cubic-bezier(.55,0,.25,1) 1.7s forwards}
@keyframes camera{to{transform:none}}
.intro .pnl{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform-origin:50% 82.33%;transform:rotateX(-90deg);opacity:0;backface-visibility:hidden;
  animation:fade .45s ease var(--a) forwards, tiltup 1s cubic-bezier(.35,1.45,.55,1) var(--t) forwards}
@keyframes tiltup{from{transform:rotateX(-90deg)}to{transform:rotateX(0)}}
.intro .pnl .wet{fill:#7e868e}
.intro .pnl .cure{opacity:0;animation:fade .7s ease var(--c) forwards}
.intro.leave .tilt{opacity:0!important}

/* team: three square portraits */
.team-grid{grid-template-columns:repeat(3,1fr);max-width:1100px}
@media (max-width:900px){.team-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.team-grid{grid-template-columns:1fr}}
.person .face{aspect-ratio:1/1;height:auto;object-position:50% 30%;filter:none}

/* client logos: a slow moving strip */
.clients{background:var(--white);padding-bottom:clamp(56px,7vw,90px)!important}
.clients .sec-head{text-align:center;margin-bottom:34px}
.clients .sec-head h2,.clients .sec-head p:not(.eyebrow){margin-left:auto;margin-right:auto}
.logo-rail{overflow:hidden;max-width:var(--max);margin:0 auto;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.logo-track{display:flex;align-items:center;gap:clamp(48px,7vw,96px);width:max-content;animation:logos 36s linear infinite}
.logo-rail:hover .logo-track{animation-play-state:paused}
.logo{flex:0 0 auto;height:clamp(40px,5vw,60px);display:flex;align-items:center}
.logo img{height:100%;width:auto;max-width:200px;object-fit:contain;transition:transform .3s}
.logo:hover img{transform:scale(1.06)}
@keyframes logos{to{transform:translateX(calc(-50% - clamp(24px,3.5vw,48px)))}}
@media (prefers-reduced-motion:reduce){.logo-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}.logo[aria-hidden]{display:none}}
.team-grid{grid-template-columns:repeat(4,1fr);max-width:var(--max)}
@media (max-width:1100px){.team-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.team-grid{grid-template-columns:1fr}}
.person .mono{aspect-ratio:1/1}

/* ---------- Intro backdrop: a time-lapse of their own sites ---------- */
.intro .tl{position:absolute;inset:0;z-index:0;overflow:hidden;transition:opacity .7s ease}
.intro .tl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12);
  animation:tlin 1.6s cubic-bezier(.2,0,.2,1) var(--t) forwards}
@keyframes tlin{0%{opacity:0;transform:scale(1.12)}25%{opacity:1}100%{opacity:1;transform:scale(1.02)}}
.intro .tl-shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(11,20,38,.55),rgba(11,20,38,.88) 75%);transition:opacity .7s ease}
.intro .tl-stage{position:absolute;left:0;right:0;bottom:max(70px,9vh);margin:0;height:22px;text-align:center;font:600 13px var(--body);letter-spacing:.32em;text-transform:uppercase;color:#d4b25a}
.intro .tl-stage span{position:absolute;left:0;right:0;opacity:0;animation:stg 1.25s ease var(--t) forwards}
.intro .tl-stage span:last-child{animation:stgl 1.8s ease var(--t) forwards}
@keyframes stg{0%{opacity:0;transform:translateY(8px)}20%,75%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
@keyframes stgl{0%{opacity:0;transform:translateY(8px)}25%,70%{opacity:1;transform:none}100%{opacity:0}}
.intro-art,.intro-tag{position:relative;z-index:1}
.intro.leave .tl-shade,.intro.leave .tl-stage{opacity:0}
.intro.leave .tl{opacity:0;transition:opacity .55s ease}
html .intro.go,html[data-p] .intro.go{background-color:var(--ink)}

/* before-you-go card */
.bye{position:fixed;inset:0;z-index:85;display:grid;place-items:center;padding:16px;background:rgba(11,20,38,.55);animation:fade .25s ease}
.bye[hidden]{display:none}
.bye-in{position:relative;width:min(460px,100%);background:var(--paper);color:var(--ink);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45);animation:chatIn .35s cubic-bezier(.2,0,0,1)}
.bye-img{height:150px;background:var(--ink) center/cover no-repeat}
.bye-body{padding:24px 26px 26px}
.bye-body h3{font-size:24px}
.bye-body p{margin:10px 0 18px;color:#50565c}
.bye-acts{display:flex;flex-wrap:wrap;gap:10px}
.bye-acts .btn{flex:1;min-width:150px}
.bye-x{position:absolute;top:8px;right:8px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(11,20,38,.6);color:#fff;font-size:24px;cursor:pointer}
.bye .later{background:none;border:0;color:var(--muted);font:500 14px var(--body);margin-top:14px;cursor:pointer;padding:6px 0}
@media (max-width:700px){.hero-meta{display:none}}

/* the headline arrives as the intro lifts */
body.arrive .hero-text>*{animation:arrive .7s cubic-bezier(.2,0,0,1) both}
body.arrive .hero-text>*:nth-child(2){animation-delay:.08s}
body.arrive .hero-text>*:nth-child(3){animation-delay:.16s}
body.arrive .hero-text>*:nth-child(4){animation-delay:.24s}
@keyframes arrive{from{opacity:0;transform:translateY(22px)}}
.intro.leave .tl-shade,.intro.leave .tl-stage{transition:opacity .4s ease}
html .intro.go.leave,html[data-p] .intro.go.leave{background-color:rgba(0,0,0,0);transition:background-color .1s linear}

/* ---------- Planner: a full drawing board ---------- */
.planner .sec-head{max-width:var(--max)}
.board{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.55fr 1fr;grid-template-areas:"draw tb" "ctl ctl";
  background-color:#0b1426;color:var(--paper);border-radius:6px;overflow:hidden;box-shadow:0 30px 70px rgba(11,20,38,.28);
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
  linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,24px 24px,24px 24px}
.board-draw{grid-area:draw;padding:18px 10px 0;display:flex;align-items:center;justify-content:center;min-height:clamp(300px,36vw,460px)}
.board .plan-svg{width:100%;max-width:640px;margin:0}
.board-tb{grid-area:tb;margin:18px 18px 18px 0;border:1px solid rgba(255,255,255,.22);display:flex;flex-direction:column;background:rgba(11,20,38,.6)}
.tb-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.22)}
.tb-head img{width:34px;height:auto}
.tb-head b{display:block;font:700 15px var(--disp);letter-spacing:.3em}
.tb-head span{font-size:12.5px;color:#9aa3b5}
.tb-nums{margin:0;display:grid}
.tb-nums div{padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.12)}
.tb-nums dt{font-size:12.5px;color:#9aa3b5}
.tb-nums dd{margin:2px 0 0;font:700 clamp(22px,2.4vw,30px) var(--disp);color:var(--white)}
.tb-nums .hl dd{color:#d4b25a}
.board .plan-match{margin:14px 18px 0;font-size:14.5px;color:#c4cad6;min-height:0}
.board .plan-match a{color:#d4b25a}
.btn-gold{margin:16px 18px;background:#c9a227;color:#0b1426;font-weight:600}
.btn-gold:hover{background:#fff}
.tb-foot{margin-top:auto;display:flex;justify-content:space-between;padding:10px 18px;border-top:1px solid rgba(255,255,255,.22);font:600 10.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:#7d879b}
.board-ctl{grid-area:ctl;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:0;border-top:1px solid rgba(255,255,255,.18);background:rgba(6,12,24,.7)}
.ctl{padding:18px 20px 20px;border-right:1px solid rgba(255,255,255,.12)}
.ctl:last-child{border-right:0}
.ctl-l{display:block;font:600 13.5px var(--body);color:#c4cad6;margin-bottom:12px}
.ctl-l b{font:700 11px var(--disp);color:#0b1426;background:#c9a227;padding:3px 6px;margin-right:8px}
.board-ctl button{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:#e7e9ee;font:600 13.5px var(--body);cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,transform .2s}
.board-ctl button:hover{border-color:#c9a227;transform:translateY(-1px)}
.board-ctl button.on{background:#c9a227;border-color:#c9a227;color:#0b1426}
.ctl-plots{display:flex;flex-wrap:wrap;gap:8px}
.ctl-plots button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 10px 7px;min-width:64px}
.ctl-plots svg{width:30px;height:30px}
.ctl-plots rect{fill:none;stroke:currentColor;stroke-width:1.6}
.ctl-road{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,38px);gap:4px;justify-content:start}
.ctl-road button{padding:0}
.ctl-road button[data-v=North]{grid-area:1/2}.ctl-road button[data-v=West]{grid-area:2/1}.ctl-road button[data-v=East]{grid-area:2/3}.ctl-road button[data-v=South]{grid-area:3/2}
.ctl-road::before{content:"";grid-area:2/2;border:1px dashed rgba(255,255,255,.35);margin:6px 12px}
.ctl-floors{display:flex;gap:8px;align-items:flex-end}
.ctl-floors button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 14px 8px}
.stack{display:flex;flex-direction:column-reverse;gap:2px}
.stack i{display:block;width:26px;height:7px;border:1.4px solid currentColor}
.plan-fine{max-width:var(--max);margin:14px auto 0}
.board .iso-dim{stroke:#c9a227;stroke-width:1;stroke-dasharray:3 3}
.board .iso-dimend{fill:#c9a227}
.board .iso-dimt{font:600 11px var(--body);fill:#d4b25a}
.board .iso-road-t{font:700 9px var(--body);letter-spacing:.3em;fill:rgba(255,255,255,.55)}
.board .iso-lbl{display:none}
@media (max-width:900px){
  .board{grid-template-columns:1fr;grid-template-areas:"draw" "ctl" "tb"}
  .board-tb{margin:0 14px 14px}
  .board-ctl{grid-template-columns:1fr;border-bottom:1px solid rgba(255,255,255,.12)}
  .ctl{border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}
  .board-draw{min-height:260px;padding:10px 0 0}
}


/* custom plot size */
.cust{display:flex;align-items:stretch;gap:0;border:1px solid rgba(255,255,255,.18)}
.cust button{border:0!important;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 10px 7px;min-width:64px}
.cust svg{width:30px;height:30px}.cust rect{fill:none;stroke:currentColor;stroke-width:1.6}
.cin{display:flex;align-items:center;gap:4px;padding:0 10px;background:rgba(255,255,255,.04)}
.cin input{width:52px;height:36px;border:1px solid rgba(255,255,255,.25);background:rgba(11,20,38,.8);color:#fff;font:600 15px var(--body);text-align:center;border-radius:2px;-moz-appearance:textfield}
.cin input::-webkit-outer-spin-button,.cin input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cin input:focus{outline:2px solid #c9a227;outline-offset:0}
.cin i{font-style:normal;color:#9aa3b5;font-size:13px}
.cust:has(button.on){border-color:#c9a227}

/* bigger drawing, clearer labels, and a hint */
.board{grid-template-columns:1.8fr 1fr}
.board-draw{position:relative;flex-direction:column;min-height:clamp(340px,40vw,560px);padding:54px 0 0}
.board .plan-svg{max-width:820px}
.board .iso-comp{stroke:rgba(255,255,255,.3)}
.board .iso-n{fill:#d4b25a}
.board .iso-dimt{font-size:12px}
.board .iso-road-t{fill:rgba(255,255,255,.4)}
.board-hint{position:absolute;top:16px;left:18px;right:18px;margin:0;font-size:14px;color:#c4cad6;display:flex;gap:10px;align-items:center;transition:opacity .5s}
.board-hint b{font:700 11px var(--disp);letter-spacing:.06em;text-transform:uppercase;color:#0b1426;background:#c9a227;padding:4px 8px;border-radius:2px;animation:hintp 1.8s ease-in-out infinite}
@keyframes hintp{50%{box-shadow:0 0 0 6px rgba(201,162,39,.25)}}
.board.used .board-hint{opacity:.45}.board.used .board-hint b{animation:none}
.board:not(.used) .board-ctl{animation:ctlglow 2.4s ease-in-out infinite}
@keyframes ctlglow{50%{box-shadow:inset 0 2px 0 rgba(201,162,39,.7)}}
.board-ctl button,.cust button{transition:background .25s,border-color .25s,color .25s,transform .25s}
.board .plan-svg *{transition:none}
@media (max-width:900px){.board-draw{padding-top:64px}.board-hint{font-size:13px}}

/* ---------- Intro v-final: built from the ground with hammers, over the time-lapse ---------- */
.intro .tl-stage span{animation-duration:.85s}
.intro .tl-stage span:last-child{animation-duration:1.6s}
.intro .tl img{animation-duration:1.1s}
.intro .final{animation:fade .3s ease 2.95s forwards}
.intro #courses{animation:fadeo .2s linear 3.3s forwards}
.intro .sweep{animation:sweep 1.1s cubic-bezier(.5,0,.3,1) 3.0s forwards}
.intro .intro-tag{animation:tag .7s ease 3.55s forwards}
.intro .grid .ground{animation:draw .7s cubic-bezier(.6,0,.2,1) .1s forwards}
/* two hammers: one on each side, striking in turn as the strips rise */
.intro .hm{opacity:0}
.intro .hm-l{animation:fade .25s .7s forwards, upl 1.95s cubic-bezier(.45,0,.55,1) .85s forwards, fadeo .3s 2.85s forwards}
.intro .hm-r{animation:fade .25s .8s forwards, upr 1.85s cubic-bezier(.45,0,.55,1) .95s forwards, fadeo .3s 2.85s forwards}
@keyframes upl{to{transform:translate(352px,-610px)}}
@keyframes upr{to{transform:translate(-318px,-540px)}}
.intro .hm-l .hm-swing{transform-box:view-box;transform-origin:107px 792px;animation:swingl .4s ease-in-out .85s 5 both}
.intro .hm-r .hm-swing{transform-box:view-box;transform-origin:963px 792px;animation:swingr .4s ease-in-out 1.05s 5 both}
@keyframes swingl{0%,40%{transform:rotate(-24deg)}62%{transform:rotate(12deg)}75%{transform:rotate(8deg)}100%{transform:rotate(-24deg)}}
@keyframes swingr{0%,40%{transform:rotate(24deg)}62%{transform:rotate(-12deg)}75%{transform:rotate(-8deg)}100%{transform:rotate(24deg)}}
.intro .hm-l .puffs circle{animation:puff .4s ease-out 1.1s 5}
.intro .hm-r .puffs circle{animation:puff .4s ease-out 1.3s 5}
.intro.leave .hm{opacity:0!important}

/* planner guide */
.board{position:relative}
.coach{position:absolute;left:0;top:0;z-index:5;pointer-events:none;opacity:0;transition:transform .8s cubic-bezier(.6,0,.2,1),opacity .3s}
.coach.on{opacity:1}
.coach-dot{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 4px 16px rgba(0,0,0,.4)}
.coach-dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid #c9a227;opacity:0}
.coach.tap .coach-dot{animation:press .5s ease}
.coach.tap .coach-dot::after{animation:ripple .7s ease-out}
@keyframes press{40%{transform:scale(.75)}}
@keyframes ripple{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
.coach-tip{position:absolute;left:22px;top:-46px;white-space:nowrap;background:#c9a227;color:#0b1426;font:700 13px var(--body);padding:7px 11px;border-radius:3px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.coach-tip::after{content:"";position:absolute;left:10px;bottom:-6px;border:6px solid transparent;border-bottom:0;border-top-color:#c9a227}
#po-wa.pulse{animation:wapulse 1s ease 2}
@keyframes wapulse{50%{box-shadow:0 0 0 8px rgba(201,162,39,.35)}}
@media (max-width:600px){.coach-tip{left:-60px;top:-50px}}
@media (max-width:900px){.board{grid-template-columns:1fr;grid-template-areas:"draw" "ctl" "tb"}}

/* direct contact: hero button and chat bar */
.wa-i{width:20px;height:20px;flex:0 0 auto}
.btn-wa{gap:9px;background:#1f9d55;color:#fff}
.btn-wa:hover{background:#178a49}
.chat-direct{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 16px;background:#e9e3d3;border-bottom:1px solid var(--line-d);font-size:13.5px;color:#50565c}
.chat-direct span{flex-basis:100%}
.chat-direct a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:18px;text-decoration:none;font-weight:600;font-size:13.5px}
.chat-direct a:first-of-type{background:#1f9d55;color:#fff}
.chat-direct a:last-of-type{border:1px solid var(--ink);color:var(--ink)}
.chat-direct .wa-i{width:16px;height:16px}
.tb-talk dd{font:500 15px/1.5 var(--body)!important;color:#c4cad6!important}
.tb-talk a{color:#d4b25a;font-weight:600;text-decoration:none;white-space:nowrap}
.tb-talk a:hover{text-decoration:underline}

/* ---------- Intro: scaffolding, hammers, a crane topping out, then the unveiling (~7.5 s) ---------- */
.intro .tl-stage span{animation-duration:1.15s}
.intro .tl-stage span:last-child{animation-duration:1.9s}
.intro .grid .ground{animation:draw .6s cubic-bezier(.6,0,.2,1) .1s forwards}
/* scaffolding goes up first, comes down at the end */
.intro .scaffold line{stroke:rgba(214,218,222,.38);stroke-linecap:round;transform-box:fill-box}
.intro .scaffold .pole{stroke-width:3;transform-origin:50% 100%;transform:scaleY(0);
  animation:sgrow .5s cubic-bezier(.3,0,.2,1) calc(.45s + var(--k) * .035s) forwards, sfall .6s cubic-bezier(.6,0,.9,.5) calc(5.25s + var(--k) * .025s) forwards}
.intro .scaffold .ledger{stroke-width:2;transform-origin:50% 50%;transform:scaleX(0);
  animation:sgrowx .45s ease calc(.85s + var(--k) * .06s) forwards, sfall .55s cubic-bezier(.6,0,.9,.5) calc(5.15s + var(--k) * .03s) forwards}
@keyframes sgrow{to{transform:scaleY(1)}}
@keyframes sgrowx{to{transform:scaleX(1)}}
@keyframes sfall{from{opacity:1}to{opacity:0;transform:translateY(70px)}}
/* courses, slower and steadier */
.intro .final{animation:fade .35s ease 5.35s forwards}
.intro #courses{animation:fadeo .2s linear 5.7s forwards}
.intro .sweep{animation:sweep 1.1s cubic-bezier(.5,0,.3,1) 5.55s forwards}
.intro .intro-tag{animation:tag .7s ease 6.55s forwards}
/* hammers climb with the build */
.intro .hm-l{animation:fade .25s 1.1s forwards, upl 2.1s cubic-bezier(.45,0,.55,1) 1.3s forwards, fadeo .3s 3.55s forwards}
.intro .hm-r{animation:fade .25s 1.2s forwards, upr 2.0s cubic-bezier(.45,0,.55,1) 1.45s forwards, fadeo .3s 3.55s forwards}
.intro .hm-l .hm-swing{animation:swingl .42s ease-in-out 1.3s 5 both}
.intro .hm-r .hm-swing{animation:swingr .42s ease-in-out 1.51s 5 both}
.intro .hm-l .puffs circle{animation:puff .42s ease-out 1.56s 5}
.intro .hm-r .puffs circle{animation:puff .42s ease-out 1.77s 5}
/* the tower crane */
.intro .crane line,.intro .crane path{stroke:#c9a227;stroke-width:2.6;fill:none}
.intro .crane .cr-lat{stroke-width:1.3;opacity:.85}
.intro .crane .cr-cw,.intro .crane .cr-cab{fill:#c9a227}
.intro .crane{animation:fadeo .5s ease 5.5s forwards}
.intro .cr-mast{transform-box:view-box;transform-origin:995px 781px;transform:scaleY(0);animation:sgrow .8s cubic-bezier(.3,0,.2,1) .4s forwards}
.intro .cr-jib{transform-box:view-box;transform-origin:1004px -80px;transform:scaleX(0);animation:sgrowx .6s cubic-bezier(.3,0,.2,1) 1.15s forwards}
.intro .trolley rect{fill:#e8e2cf}
.intro .trolley{opacity:0;transform:translateX(360px);animation:fade .3s 1.6s forwards, carry .75s cubic-bezier(.45,0,.3,1) 3.7s forwards, fadeo .4s 5.45s forwards}
.intro .carry{opacity:0;transform:translateX(360px);animation:fade .35s 3.35s forwards, carry .75s cubic-bezier(.45,0,.3,1) 3.7s forwards}
@keyframes carry{to{transform:none}}
.intro .drop{transform:translateY(-118px);animation:lower .62s cubic-bezier(.5,0,.6,1.25) 4.45s forwards}
@keyframes lower{to{transform:none}}
.intro .cr-cable{stroke:#aeb6c2;stroke-width:1.6;animation:fadeo .3s 5.1s forwards}
.intro .carry{animation:fade .35s 3.35s forwards, carry .75s cubic-bezier(.45,0,.3,1) 3.7s forwards, fadeo .2s 5.7s forwards}
.intro.leave .scaffold,.intro.leave .crane,.intro.leave .trolley,.intro.leave .carry{opacity:0!important}

/* ---------- Intro: back to the first design (blueprint lines, marble poured from the ground, letters) ---------- */
.intro .grid .ground{animation:draw .9s cubic-bezier(.6,0,.2,1) forwards}
.intro .axis{animation:fade .6s .3s forwards, fadeo .5s 2.3s forwards}
.intro .ln{animation:draw 1.1s cubic-bezier(.5,0,.2,1) var(--d) forwards, lnout .6s 2.1s forwards}
.intro .pour{clip-path:inset(790px 0 0 0);animation:pour .95s cubic-bezier(.55,0,.15,1) var(--d) forwards}
.intro .intro-tag{animation:tag .7s ease 2.95s forwards}
.intro.leave .lines,.intro.leave .grid{opacity:0!important}

/* four offices */
.offices{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:30px;width:100%;text-align:left}
.office{background:var(--white);border:1px solid var(--line-d);padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.office b{font:700 16px var(--disp);color:var(--ink)}
.office span{font-size:13px;color:var(--timber-d);font-weight:600}
.office span:empty{display:none}
.office-a{color:#50565c;text-decoration:none;font-size:14.5px;line-height:1.5}
.office-a:hover{color:var(--ink);text-decoration:underline}
.office-go{margin-top:6px;font-weight:600;font-size:14px;color:var(--timber-d);text-decoration:none}
.office-go:hover{text-decoration:underline}
.c-mail{margin:18px 0 0;font-size:15px}.c-mail a{color:var(--ink)}
.contact-in{max-width:820px}
.f-offices{display:flex;flex-direction:column;gap:8px}
@media (max-width:600px){.offices{grid-template-columns:1fr}}
/* cursor: a small circle that follows the mouse and grows with a label */
.cursor{position:fixed;left:0;top:0;z-index:90;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#c9a227;pointer-events:none;
  display:grid;place-items:center;transition:width .25s,height .25s,margin .25s,background .25s,opacity .2s,border-color .25s;opacity:0;border:1.5px solid transparent}
.cursor span{font:600 12.5px var(--body);color:#0b1426;opacity:0;transition:opacity .2s;white-space:nowrap}
.cursor.on{opacity:1}
.cursor.link{width:34px;height:34px;margin:-17px 0 0 -17px;background:transparent;border-color:#c9a227}
.cursor.big{width:76px;height:76px;margin:-38px 0 0 -38px;background:#c9a227}
.cursor.big span{opacity:1}
@media (hover:none),(pointer:coarse){.cursor{display:none}}
.team-grid{grid-template-columns:repeat(3,1fr);max-width:1100px}
@media (max-width:900px){.team-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.team-grid{grid-template-columns:1fr}}

/* map: four offices */
.office-m{cursor:pointer}
.om-sq{fill:#c9a227;stroke:#0b1426;stroke-width:2.5}
.om-n{font:700 15px var(--disp);fill:#0b1426}
.om-t{font:700 14px var(--disp);fill:#f1f2f0}
.om-s{font:600 12px var(--body);fill:#d4b25a;letter-spacing:.04em}
.om-halo{fill:rgba(201,162,39,.16);transform-box:fill-box;transform-origin:center;animation:halo 2.8s ease-out infinite}
.map-svg.small .om-n{font-size:22px}.map-svg.small .om-t{font-size:21px}.map-svg.small .om-s{font-size:18px}
.office-legend{max-width:var(--max);margin:0 auto 14px;display:grid;grid-template-columns:auto repeat(4,1fr);gap:8px;align-items:stretch}
.ol-h{align-self:center;font:600 13px var(--body);color:#9aa3b5;padding-right:6px}
.office-legend button{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 12px;background:rgba(255,255,255,.04);border:1px solid var(--stone);color:var(--paper);cursor:pointer;transition:background .2s,border-color .2s}
.office-legend button:hover{border-color:#c9a227}
.office-legend button.on{background:rgba(201,162,39,.16);border-color:#c9a227}
.ol-n{flex:0 0 28px;height:28px;display:grid;place-items:center;background:#c9a227;color:#0b1426;font:700 14px var(--disp);transform:rotate(45deg);border-radius:3px}
.ol-n i{font-style:normal;transform:rotate(-45deg)}
.ol-t b{display:block;font:700 14px var(--disp)}.ol-t small{display:block;font-size:12.5px;color:#9aa3b5}
.map-svg.focus .pin,.map-svg.focus .m-route,.map-svg.focus .office-m{opacity:.15;transition:opacity .3s}
.map-svg.focus .lit{opacity:1!important}
.map-svg.focus .m-route.lit{stroke-width:2.6}
.office-card{position:absolute;left:14px;top:14px;z-index:3;width:min(300px,calc(100% - 28px));background:var(--paper);color:var(--ink);padding:14px 16px;box-shadow:0 10px 30px rgba(0,0,0,.4);
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .25s,transform .25s}
.office-card.on{opacity:1;transform:none;pointer-events:auto}
.oc-n{font:700 11px var(--disp);letter-spacing:.08em;text-transform:uppercase;color:var(--timber-d)}
.office-card b{display:block;font:700 16px var(--disp);margin-top:2px}
.office-card p{margin:6px 0 8px;font-size:13.5px;color:#50565c}
.office-card a{font-weight:600;font-size:14px;color:var(--timber-d);text-decoration:none}
@media (max-width:900px){.office-legend{grid-template-columns:1fr 1fr}.ol-h{grid-column:span 2}}

.off-h{margin:34px 0 0;font-size:15px;color:#50565c;text-align:center}
.off-h b{display:block;font:700 20px var(--disp);color:var(--ink);margin-bottom:4px}
.offices{margin-top:16px}
.office span{order:0}
.ol-h small{display:block;font-size:11.5px;font-weight:500;color:#7d879b}
/* seamless ending: the dark lifts slowly while the logo glides home and the photo settles */
html .intro.go.leave,html[data-p] .intro.go.leave{background-color:rgba(11,20,38,0);transition:background-color .9s cubic-bezier(.4,0,.2,1)}
.intro.leave .intro-tag,.intro.leave .word{transition:opacity .45s ease!important}
body.arrive .hero-img img.on,body.arrive .hero-photo{animation:settle 1.6s cubic-bezier(.2,0,0,1) both}
@keyframes settle{from{transform:scale(1.07);filter:brightness(.55)}to{transform:none;filter:none}}

/* office pop-up sits next to its marker */
.office-card{width:280px;transition:opacity .2s,transform .2s,left .25s,top .25s}
.office-card::before{content:"";position:absolute;left:-7px;top:26px;border:7px solid transparent;border-left:0;border-right-color:var(--paper)}
.office-card a{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;background:#c9a227;color:#0b1426!important;margin-top:2px}
.office-card a:hover{background:#0b1426;color:#fff!important;text-decoration:none!important}
/* intro exit: five slanted panels, like the strips of the logo, sweep away and reveal the site */
.shutters{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:0}
.shutters i{position:absolute;top:-10%;bottom:-10%;width:30%;background:#0b1426;transform:skewX(-30deg);border-left:3px solid #c9a227}
.shutters i:nth-child(1){left:-18%}.shutters i:nth-child(2){left:8%}.shutters i:nth-child(3){left:34%}.shutters i:nth-child(4){left:60%}.shutters i:nth-child(5){left:86%}
.intro.leave .shutters{opacity:1}
html .intro.go.leave,html[data-p] .intro.go.leave{background-color:rgba(11,20,38,0);transition:none}
.intro.leave .shutters i{animation:shut .85s cubic-bezier(.7,0,.2,1) forwards}
.intro.leave .shutters i:nth-child(1){animation-delay:.28s}.intro.leave .shutters i:nth-child(2){animation-delay:.21s}
.intro.leave .shutters i:nth-child(3){animation-delay:.14s}.intro.leave .shutters i:nth-child(4){animation-delay:.07s}.intro.leave .shutters i:nth-child(5){animation-delay:0s}
@keyframes shut{to{transform:skewX(-30deg) translateX(140vw)}}
.intro-art,.intro-tag,.intro-skip{position:relative;z-index:1}
.shutters i{width:34%}
.shutters i:nth-child(1){left:-45%}.shutters i:nth-child(2){left:-17%}.shutters i:nth-child(3){left:11%}.shutters i:nth-child(4){left:39%}.shutters i:nth-child(5){left:67%}.shutters i:nth-child(6){left:95%}
.intro.leave .shutters i:nth-child(1){animation-delay:.35s}.intro.leave .shutters i:nth-child(2){animation-delay:.28s}.intro.leave .shutters i:nth-child(3){animation-delay:.21s}
.intro.leave .shutters i:nth-child(4){animation-delay:.14s}.intro.leave .shutters i:nth-child(5){animation-delay:.07s}.intro.leave .shutters i:nth-child(6){animation-delay:0s}
.office-m:focus,.pin:focus{outline:none}
.office-m:focus-visible .om-sq,.pin:focus-visible circle.dot{stroke:#fff;stroke-width:3}

/* exit, final: one diagonal wipe with a gold edge, transform-only so it stays smooth */
.shutters i{left:-35%!important;width:175%!important;top:-20%;bottom:-20%;border-left:4px solid #c9a227;will-change:transform;transform:skewX(-24deg)}
.intro.leave .shutters i{animation:wipe1 .95s cubic-bezier(.65,0,.2,1) .05s forwards!important}
@keyframes wipe1{from{transform:skewX(-24deg) translateX(0)}to{transform:skewX(-24deg) translateX(118vw)}}
.intro-svg{will-change:transform}
body.arrive .hero-img img.on,body.arrive .hero-photo{animation:settle2 1.4s cubic-bezier(.2,0,0,1) both;will-change:transform}
@keyframes settle2{from{transform:scale(1.06)}to{transform:none}}
/* wipe starts moving at once and eases out, no slow start that looks like a hang */
.intro.leave .shutters i{animation:wipe1 .8s cubic-bezier(.25,.8,.25,1) 0s forwards!important}
.intro.leave .intro-svg{transition:transform .75s cubic-bezier(.25,.8,.25,1)}

/* ---------- Intro ending, Sthira style: words fade, logo travels home, the dark dissolves, page comes up in place ---------- */
.intro.leave .shutters{display:none}
html .intro.go.leave,html[data-p] .intro.go.leave{background-color:rgba(11,20,38,0);transition:background-color 1.5s cubic-bezier(.45,0,.55,1) .55s}
.intro.leave .intro-tag,.intro.leave .word,.intro.leave .grid,.intro.leave .lines{animation:none!important;opacity:0!important;transition:opacity .6s ease!important}
.intro.leave .intro-svg{transition:transform 2.2s cubic-bezier(.65,0,.35,1)!important}
/* the page waits, then fades in where it is: nothing slides */
body.landing .top .brand-word,body.landing .top .nav,body.landing .top .menu-btn,body.landing .hero-text>*,body.landing .hero-meta,body.landing .chat-fab{opacity:0}
body.landing.arrive .hero-text>*{animation:none;opacity:1;transition:opacity 1.1s ease}
body.landing.arrive .hero-text>*:nth-child(2){transition-delay:.12s}body.landing.arrive .hero-text>*:nth-child(3){transition-delay:.24s}
body.landing.arrive .hero-meta,body.landing.arrive .chat-fab{opacity:1;transition:opacity 1s ease .6s}
body.landing.arrive .top .brand-word,body.landing.arrive .top .nav,body.landing.arrive .top .menu-btn{opacity:1;transition:opacity 1s ease 1.1s}
/* phones: the menu is a closed overlay, never fade it in after the intro */
@media (max-width:900px){body.landing .top .nav:not(.open),body.landing.arrive .top .nav:not(.open){opacity:0}body.landing .top .nav{transition:opacity .3s!important}}
.intro-skip{display:none!important}
body.arrive .hero-img img.on,body.arrive .hero-photo{animation:none}

/* upcoming projects (design renders) */
.tag.soon{background:var(--brass,#c39a3b);color:var(--ink)}

/* project gallery: full rows only, a note card fills any odd slot (8 Nov) */
.sh-gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:28px 0}
.sh-gallery>picture{display:block;margin:0}
.sh-gallery>picture>img,.sh-gallery>picture:first-child>img{grid-column:auto;display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.sh-gallery>.g-w{grid-column:1/-1}
.sh-gallery>picture.g-w>img{aspect-ratio:16/10}
.sh-gallery>picture.g-t>img{aspect-ratio:4/5}
.sh-card{background:var(--ink);color:#e9e4da;padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;justify-content:center;gap:12px}
.sh-card .eyebrow{color:#c39a3b;margin:0}
.sh-card b{font:600 clamp(20px,2.2vw,28px)/1.2 var(--disp);color:#fff}
.sh-card p{margin:0;color:#b9bfc7;font-size:15px;line-height:1.55}
.sh-card .btn{align-self:flex-start;margin-top:6px}
.sh-card.g-w{flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px 28px}
.sh-card.g-w b{flex:1 1 260px}.sh-card.g-w p{flex:2 1 300px}
.sh-gallery~#sh-wa{display:none}
@media (max-width:600px){
  .sh-gallery{grid-template-columns:1fr}
  .sh-gallery>picture>img,.sh-gallery>picture.g-w>img{aspect-ratio:3/2}
  .sh-gallery>picture.g-t>img{aspect-ratio:4/5}
  .sh-card.g-w{flex-direction:column;align-items:flex-start}
}

/* small maker credit */
.foot-credit{color:#7f868d}.foot-credit a{color:#aab0b6}.foot-credit a:hover{color:var(--white)}
@media (max-width:600px){.foot-base{flex-wrap:wrap}.foot-credit{order:3;width:100%}}

/* bigger tap area for the service links */
.svc-a{display:inline-block;padding:10px 0;margin-top:0}

/* ---- type: luxury serif headings + clean sans (9 Nov) ---- */
:root{--serif:"Cormorant Garamond",Georgia,serif;--disp:"Manrope",system-ui,sans-serif;--body:"Manrope",system-ui,sans-serif;--mono:"Manrope",system-ui,sans-serif}
body{font-size:16.5px;letter-spacing:-.003em}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.005em;line-height:1}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(54px,10vw,128px);letter-spacing:-.02em;line-height:.92}
.hero h1 em{font-style:italic}
.sec-head h2{font-size:clamp(36px,5.6vw,68px)}
.contact h2{font-size:clamp(42px,6.6vw,84px)}
.proof b,.st-now b,.story-line b,.tb-nums dd,.person .mono{font-family:var(--serif);font-weight:600}
.proof b{font-size:clamp(34px,3.6vw,48px)}
.walk-n{font-family:var(--serif);font-weight:500}
.walk h3,.sheet h3,.craft-c b,.sh-card b,.st-now span{font-family:var(--serif);font-weight:600}
.walk h3{font-size:clamp(30px,3vw,44px)}.sheet h3{font-size:clamp(36px,4.6vw,56px)}
.craft-c b{font-size:clamp(20px,1.9vw,25px)}.sh-card b{font-size:clamp(24px,2.6vw,32px)}
.eyebrow{font-family:var(--body);font-weight:600;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase}

/* ---- wow 1: sketch to site slider (9 Nov) ---- */
.sketch{background:#ebe5d9}
.sk-box{position:relative;max-width:var(--max);margin:0 auto;aspect-ratio:3/2;overflow:hidden;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;background:var(--char)}
.sk-box picture,.sk-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.sk-draw{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.sk-handle{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#e8cf8f;box-shadow:0 0 18px rgba(232,207,143,.6);outline:none}
.sk-handle i{position:absolute;top:50%;left:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(11,20,38,.78);border:1.5px solid #e8cf8f;backdrop-filter:blur(4px);transition:transform .25s}
.sk-handle i::before,.sk-handle i::after{content:"";position:absolute;top:50%;width:9px;height:9px;margin-top:-5px;border:solid #e8cf8f;border-width:0 0 2px 2px}
.sk-handle i::before{left:13px;transform:rotate(45deg)}.sk-handle i::after{right:13px;transform:rotate(-135deg)}
.sk-box.dragging .sk-handle i,.sk-handle:focus-visible i{transform:scale(1.12)}
.sk-tag{position:absolute;top:18px;padding:6px 12px;font:600 12px var(--body);letter-spacing:.14em;text-transform:uppercase;background:rgba(11,20,38,.7);color:#e8cf8f}
.sk-tag.l{left:18px}.sk-tag.r{right:18px;background:rgba(255,255,255,.85);color:var(--ink)}
.sk-cap{position:absolute;left:18px;bottom:16px;color:#fff;font:600 14px var(--body);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.sk-cap .m{display:none}
@media (max-width:700px){.sk-box{aspect-ratio:4/5;margin:0 calc(-1 * var(--pad))}.sk-cap .d{display:none}.sk-cap .m{display:inline}}

/* ---- wow 2: full-screen project opening (9 Nov) ---- */
.sheet{background:rgba(11,20,38,.0);display:block;transition:background .3s}
.sheet.open,.sheet.flying{background:rgba(11,20,38,.55)}
.sheet-in{width:100%;max-width:none;height:100%;padding:0;animation:none;background:var(--paper);opacity:0;transition:opacity .32s ease}
.sheet.open .sheet-in{opacity:1}
.sh-cover{position:relative;height:min(82vh,820px);min-height:420px;overflow:hidden;background:var(--ink)}
.sh-cover-img,.sh-cover-img picture,.sh-cover-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sheet.open .sh-cover-img img{animation:shZoom 9s ease-out both}
@keyframes shZoom{from{transform:scale(1.04)}to{transform:scale(1)}}
.sh-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,20,38,.35) 0%,rgba(11,20,38,0) 30%,rgba(11,20,38,.15) 55%,rgba(11,20,38,.85) 100%)}
.sh-cover-t{position:absolute;z-index:1;left:0;right:0;bottom:0;max-width:1100px;margin:0 auto;padding:0 clamp(18px,4vw,48px) clamp(34px,6vh,64px);color:#fff}
.sh-cover-t .eyebrow{color:#e8cf8f}
.sheet .sh-cover-t h3{color:#fff;font-size:clamp(48px,8vw,112px);line-height:.95;transform:translateY(18px);opacity:0;transition:transform .9s cubic-bezier(.2,0,0,1) .1s,opacity .9s ease .1s}
.sheet.open .sh-cover-t h3{transform:none;opacity:1}
.sh-down{position:absolute;z-index:1;right:clamp(18px,4vw,48px);bottom:clamp(36px,6vh,66px);color:rgba(255,255,255,.75);font:600 12px var(--body);letter-spacing:.14em;text-transform:uppercase}
.sh-body{max-width:1100px;margin:0 auto;padding:36px clamp(18px,4vw,48px) 56px}
.sh-body .sh-facts{margin-top:0}
.sh-body #sh-note{max-width:44em;font-size:18px;line-height:1.65}
.sheet-x{position:fixed;z-index:3;top:16px;right:16px;width:48px;height:48px;border-radius:50%;background:rgba(11,20,38,.6);color:#fff;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.3);font-size:26px;line-height:1}
.sh-fly{position:fixed;z-index:120;object-fit:cover;pointer-events:none;box-shadow:0 30px 80px rgba(0,0,0,.35)}
@media (max-width:700px){.sh-cover{height:72vh;min-height:360px}.sh-down{display:none}}

/* ---- wow 3: stages drawing builds with the scroll (9 Nov) ---- */
.st-svg.scrub .col,.st-svg.scrub .slab,.st-svg.scrub .wall,.st-svg.scrub .win,.st-svg.scrub .glass,.st-svg.scrub .glow,.st-svg.scrub .dirt{transition:none!important}
.st-svg.scrub{filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}
@media (min-width:861px){.st-svg{max-width:440px}}

/* ==== 9 Nov: three-panel hero cut at the logo's angle ==== */
.hero-img,.hero-meta{display:none!important}
.tri{position:absolute;inset:0;background:var(--ink)}
.tp{position:absolute;inset:0;cursor:pointer;outline:none}
.tp-img{position:absolute;overflow:hidden}
.tp-img picture,.tp-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tp-img img{transform:scale(1.12);transition:transform 2.4s cubic-bezier(.2,0,0,1) var(--d,0s),filter .6s}
.tri.in .tp-img img{transform:scale(1.02)}
.tri.wide .tp:not(.big) .tp-img img{filter:brightness(.78)}
.tri.wide:not(:hover) .tp .tp-img img{filter:none}
.tp.big .tp-img img{transform:scale(1)}
.tp::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,20,38,.55) 0%,rgba(11,20,38,0) 28%,rgba(11,20,38,.1) 52%,rgba(11,20,38,.88) 100%);pointer-events:none}
.tp-l{position:absolute;z-index:1;top:104px;display:flex;flex-direction:column;gap:4px;color:#fff;opacity:0;transform:translateY(10px);transition:opacity .8s ease calc(var(--d,0s) + .7s),transform .8s ease calc(var(--d,0s) + .7s)}
.tri.in .tp-l{opacity:1;transform:none}
.tp-l i{font:500 12px var(--body);font-style:normal;letter-spacing:.3em;color:#e8cf8f}
.tp-l b{font:600 13px var(--body);letter-spacing:.32em;text-transform:uppercase}
.tp-l small{font:500 13px var(--body);color:rgba(255,255,255,.75);max-height:0;overflow:hidden;transition:max-height .5s ease}
.tp.big .tp-l small,.tp:focus-visible .tp-l small{max-height:24px}
.hero-text{z-index:2;pointer-events:none}.hero-text .hero-cta,.hero-text a{pointer-events:auto}
@media (max-width:759px){
  .tri{bottom:34%}
  .tri::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(180deg,rgba(11,20,38,0),var(--ink));pointer-events:none}
  .tp::after{background:linear-gradient(90deg,rgba(11,20,38,.6),rgba(11,20,38,.05) 70%)}
  .tp-l{left:var(--pad);transform:translateY(-50%);gap:2px}.tri.in .tp-l{transform:translateY(-50%)}
  .tp-l small{max-height:24px;font-size:12px}
}

/* ==== 9 Nov: type that matches the ADITYA wordmark (geometric, wide-tracked caps for labels) ==== */
:root{--disp:"Montserrat",system-ui,sans-serif;--serif:"Montserrat",system-ui,sans-serif}
h1,h2,h3{font-family:var(--disp);font-weight:300;letter-spacing:-.025em;line-height:1.04}
.hero h1{font-family:var(--disp);font-weight:300;font-size:clamp(44px,8.4vw,118px);letter-spacing:-.035em;line-height:.98}
.hero h1 .h1-a{display:block}
.hero h1 .h1-b{display:block;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.86em;background:linear-gradient(100deg,#f6f2ea 0%,#d9d4cb 30%,#ffffff 45%,#cfc9be 62%,#efe9df 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-head h2,.contact h2{font-weight:300}
.sec-head h2 b,.contact h2 b{font-weight:700}
.eyebrow{font:600 11.5px var(--body);letter-spacing:.32em;text-transform:uppercase}
.proof b,.st-now b,.story-line b,.tb-nums dd,.person .mono,.walk-n,.walk h3,.sheet h3,.craft-c b,.sh-card b,.st-now span{font-family:var(--disp)}
.proof b{font-weight:300;letter-spacing:-.03em}
.walk h3{font-weight:600;letter-spacing:-.01em;font-size:clamp(26px,2.6vw,38px)}
.sheet .sh-cover-t h3{font-weight:300;letter-spacing:-.03em}
.craft-c b,.sh-card b{font-weight:500}
.st-now b{font-weight:300}

/* skewed panels (no clip-path) */
.tp{inset:auto;overflow:hidden;transform-origin:50% 50%}
.tp-img{transform-origin:50% 50%}
.tp-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,20,38,.55) 0%,rgba(11,20,38,0) 28%,rgba(11,20,38,.1) 52%,rgba(11,20,38,.88) 100%);pointer-events:none}
.tp::after{display:none}
@media (min-width:760px){.tp-l{top:104px}}
@media (max-width:759px){.tp-img::after{background:linear-gradient(90deg,rgba(11,20,38,.65),rgba(11,20,38,.05) 70%)}.tp-l{top:50%}}

/* panel labels: shown once the panels are open (no fade, so they never get stuck hidden) */
.tp-l{transition:none!important}
.tri.in .tp-l{opacity:1}
@media (min-width:760px){.tri.in .tp-l{transform:none}}
/* a soft shade behind the headline so it reads over the photos */
.tri::before{content:"";position:absolute;z-index:1;left:0;bottom:0;width:70%;height:75%;background:radial-gradient(ellipse at 0% 100%,rgba(11,20,38,.82) 0%,rgba(11,20,38,.45) 45%,rgba(11,20,38,0) 72%);pointer-events:none}
@media (max-width:759px){.tri::before{display:none}}

/* ==== One day, six sites (9 Nov) ==== */
.diary{--sky:rgb(24,52,92);--glow:rgb(243,220,160);background:linear-gradient(180deg,var(--ink) 0,var(--sky) 22%,var(--sky) 78%,var(--ink) 100%);color:var(--paper);transition:background .2s linear;position:relative}
.diary .sec-head p:not(.eyebrow){color:rgba(255,255,255,.72)}
.diary .eyebrow{color:#e8cf8f}
.dy-wrap{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(260px,.8fr) 1.4fr;gap:clamp(24px,5vw,72px)}
.dy-sticky{position:sticky;top:110px;display:flex;flex-direction:column;gap:6px}
.dy-sun{width:100%;max-width:340px;overflow:visible}
.dy-arc{fill:none;stroke:rgba(255,255,255,.28);stroke-width:1.4;stroke-dasharray:3 6}
.dy-hor{stroke:rgba(255,255,255,.35);stroke-width:1}
.dy-dot{fill:var(--glow);filter:drop-shadow(0 0 14px var(--glow))}
.dy-time{margin:8px 0 0;font:300 clamp(64px,8vw,120px)/1 var(--disp);letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.dy-place{margin:0;font:600 13px var(--body);letter-spacing:.28em;text-transform:uppercase;color:var(--glow)}
.dy-list{display:flex;flex-direction:column;gap:clamp(56px,10vh,120px);padding-bottom:12vh}
.dy-item{margin:0;opacity:.4;transform:scale(.97);transition:opacity .6s,transform .8s cubic-bezier(.2,0,0,1)}
.dy-item.on{opacity:1;transform:none}
.dy-item img{width:100%;height:auto;display:block;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.dy-item figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:16px;color:rgba(255,255,255,.75);font-size:15.5px}
.dy-item .dy-t{font:600 13px var(--body);letter-spacing:.2em;color:var(--glow)}
.dy-item figcaption b{color:#fff;font:600 19px var(--disp)}
.dy-item figcaption span:not(.dy-t){flex-basis:100%}
.dy-item figcaption a{color:#e8cf8f;text-decoration:none;font-weight:600;padding:8px 0}
@media (max-width:860px){
  .dy-wrap{grid-template-columns:1fr;gap:0}
  .dy-side{position:sticky;top:56px;z-index:3;margin:0 calc(-1 * var(--pad));padding:10px var(--pad);background:var(--sky);border-bottom:1px solid rgba(255,255,255,.12)}
  .dy-sticky{position:static;flex-direction:row;align-items:center;gap:14px}
  .dy-sun{width:84px;flex:0 0 84px}
  .dy-time{font-size:40px;margin:0}
  .dy-place{font-size:11px;letter-spacing:.2em}
  .dy-list{padding-top:28px;gap:56px}
}
/* proof line on project cards */
.walk-proof{display:block;margin-top:6px;font:600 11px var(--body);letter-spacing:.16em;text-transform:uppercase;color:#e8cf8f}

/* warm horizon light that grows toward sunset (brand navy + gold, no purple) */
.diary::before{content:"";position:absolute;inset:auto 0 0 0;height:60%;background:radial-gradient(ellipse at 20% 100%,var(--glow) 0%,transparent 60%);opacity:var(--gk,.08);pointer-events:none}
.diary .dy-wrap,.diary .sec-head{position:relative;z-index:1}

/* 10 Nov: phone hero, labels clear of logo and headline */
@media (max-width:759px){.tri::after{height:22%}}
@media (max-width:900px){.office-legend{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.office-legend button{min-width:0;overflow-wrap:anywhere}}
/* 10 Nov: faster client strip (owner) */
.logo-track{animation-duration:18s}
@media (max-width:759px){.logo-track{animation-duration:12s}}
/* 12 Nov: four numbers in the proof strip */
.proof{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.proof{grid-template-columns:1fr 1fr}.proof div:nth-child(2){border-right:0}.proof div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media (max-width:760px){.proof div{padding:20px 16px;border-right:0;border-bottom:1px solid var(--line)}.proof div:nth-child(1){border-right:1px solid var(--line)}.proof div:nth-child(n+3){grid-column:span 2}.proof div:last-child{border-bottom:0}.proof b{font-size:34px}}

/* 14 Nov: contact links with icons; Instagram shown as its handle */
.f-ic{display:inline-flex;align-items:center;gap:9px;overflow-wrap:anywhere}
.ic{width:17px;height:17px;flex:0 0 auto}
.foot .f-ic .ic{color:var(--timber)}
.btn-wa-ic{gap:9px}
.c-ig{margin:10px 0 0;font-size:15px}
.c-ig a{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none}
.c-ig a:hover span{text-decoration:underline}
@media (min-width:861px){.foot-in{grid-template-columns:1.1fr .75fr 1.45fr 1.3fr}.foot .f-ic{overflow-wrap:normal;white-space:nowrap}}