/* ============================================================
   BACUÑA ARCHITECTURE — Design System
   ============================================================ */

:root{
  /* Palette — warm concrete / ink / clay */
  --paper:#EFEAE1;
  --paper-2:#E4DCCF;
  --ink:#171310;
  --ink-2:#2A2320;
  --muted:#6E645A;
  --line:#C9BEB0;
  --clay:#B4552E;
  --clay-2:#8F3F20;
  --sand:#D8CBB7;
  --white:#FBF9F5;

  /* Type */
  --display:'Fraunces',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --mono:'Space Mono','Courier New',monospace;

  /* Motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-2:cubic-bezier(.65,0,.35,1);
  --dur:.9s;

  --nav-h:78px;
  --gutter:clamp(20px,5vw,80px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  overflow-x:clip;
  font-size:16px;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--clay);color:var(--white)}

/* Custom cursor dot */
.cursor{position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;
  background:var(--clay);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);
  transition:transform .18s var(--ease),background .2s;mix-blend-mode:normal}
.cursor.big{transform:translate(-50%,-50%) scale(4.2);background:transparent;border:1px solid var(--ink);}
@media (pointer:coarse){.cursor{display:none}}

/* ---------- Type scale ---------- */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--clay);display:inline-flex;align-items:center;gap:.7em}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--clay);display:inline-block}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.02;letter-spacing:-.01em}
h1{font-size:clamp(2.8rem,8vw,7rem)}
h2{font-size:clamp(2rem,4.6vw,4rem)}
h3{font-size:clamp(1.3rem,2vw,1.9rem);line-height:1.1}
p.lede{font-size:clamp(1.05rem,1.5vw,1.35rem);color:var(--ink-2);max-width:52ch;line-height:1.5}
.italic{font-style:italic}

/* ---------- Layout ---------- */
.wrap{padding-inline:var(--gutter)}
section{padding-block:clamp(70px,10vw,150px)}
.divider{height:1px;background:var(--line);border:0}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--gutter);transition:background .4s var(--ease),backdrop-filter .4s,border-color .4s;
  border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(239,234,225,.82);backdrop-filter:blur(14px);border-color:var(--line)}
.brand{font-family:var(--display);font-size:1.35rem;letter-spacing:-.01em;display:flex;align-items:center;gap:.5em}
.brand b{font-weight:500}
.brand .n{width:30px;height:30px}
.nav-links{display:flex;gap:2.2rem;align-items:center;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;font-weight:500}
.nav-links a{position:relative;padding:4px 0;color:var(--ink-2);transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--clay);transition:width .35s var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{border:1px solid var(--ink);border-radius:40px;padding:.6em 1.3em!important;color:var(--ink)!important}
.nav-cta::after{display:none}
.nav-cta:hover{background:var(--ink);color:var(--paper)!important}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:0}
.burger span{width:26px;height:2px;background:var(--ink);transition:.3s}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.7em;font-size:.82rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:600;padding:1.05em 2em;border-radius:44px;
  background:var(--clay);color:var(--white);transition:.4s var(--ease);border:1px solid var(--clay)}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--white);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn .arrow{transition:transform .4s var(--ease)}
.btn:hover .arrow{transform:translateX(5px)}

/* ---------- HERO ---------- */
.hero{min-height:100svh;position:relative;display:grid;
  grid-template-columns:1.15fr .85fr;align-items:center;gap:2rem;
  padding-top:var(--nav-h)}
.hero-copy{position:relative;z-index:3}
.hero h1{margin:.2em 0 .35em}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line span{display:block;transform:translateY(110%);transition:transform 1s var(--ease)}
.loaded .hero h1 .line span{transform:translateY(0)}
.hero h1 .line:nth-child(2) span{transition-delay:.12s}
.hero h1 .line:nth-child(3) span{transition-delay:.24s}
.hero-sub{display:flex;gap:2.5rem;flex-wrap:wrap;margin-top:2.4rem;align-items:center}
.hero-stats{display:flex;gap:2.4rem;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line)}
.stat .num{font-family:var(--display);font-size:2.6rem;line-height:1}
.stat .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.4em}

/* Construction scene container */
.scene{position:relative;height:min(78vh,680px);align-self:stretch;display:flex;align-items:center;justify-content:center}
.scene svg{width:100%;height:100%;overflow:visible}
.scene-tag{position:absolute;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:.5em;opacity:0;animation:tagIn .6s var(--ease) forwards}
.scene-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--clay)}
.scene-tag.t1{top:8%;left:2%;animation-delay:2.6s}
.scene-tag.t2{top:40%;right:0%;animation-delay:3.1s}
.scene-tag.t3{bottom:14%;left:6%;animation-delay:3.6s}
@keyframes tagIn{to{opacity:1}}

/* Blueprint grid backdrop */
.blueprint{position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(circle at 70% 45%,#000 0%,transparent 68%);
  mask-image:radial-gradient(circle at 70% 45%,#000 0%,transparent 68%)}

/* SVG draw animation */
.draw{stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:draw 1.4s var(--ease) forwards}
.fillfade{opacity:0;animation:fillfade .8s var(--ease) forwards}
.riseUp{transform:translateY(40px);opacity:0;animation:riseUp 1s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fillfade{to{opacity:1}}
@keyframes riseUp{to{transform:translateY(0);opacity:1}}
.crane-arm{transform-box:fill-box;transform-origin:left center;animation:sway 5s ease-in-out infinite;animation-delay:4s}
@keyframes sway{0%,100%{transform:rotate(0)}50%{transform:rotate(-2.5deg)}}
.hook{animation:bob 4s ease-in-out infinite;animation-delay:4.2s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}

/* ---------- EXPLODED AXONOMETRIC HERO ---------- */
.xhero{position:relative;min-height:100svh;display:grid;grid-template-columns:.72fr 1.28fr;
  gap:1.5rem;align-items:center;padding-top:var(--nav-h);overflow:hidden}
.xhero .blueprint{opacity:.4}
.xhero-copy{position:relative;z-index:3}
.xhero-copy h1{margin:.2em 0 .35em}
.xhero-copy h1 .line{display:block;overflow:hidden}
.xhero-copy h1 .line span{display:block;transform:translateY(110%);transition:transform 1s var(--ease)}
.loaded .xhero-copy h1 .line span{transform:translateY(0)}
.xhero-copy h1 .line:nth-child(2) span{transition-delay:.12s}
.xhero-copy h1 .line:nth-child(3) span{transition-delay:.24s}
.xvideo{position:relative;z-index:2;width:100%;height:min(94vh,940px);display:flex;align-items:center;
  justify-content:flex-end;margin-right:calc(-1 * var(--gutter))}
.xvideo-el{width:100%;height:100%;object-fit:contain;object-position:center right}
@media (max-width:1024px){.xvideo{height:58vh;order:-1;margin-right:0;justify-content:center}
  .xvideo-el{object-position:center}}
.exploded{position:relative;z-index:2;height:min(88vh,780px);width:100%}
.exploded svg{width:100%;height:100%;overflow:visible}
.deck-layer{transition:transform 1.15s var(--ease);will-change:transform}
.exploded.on .deck-layer{transform:translateY(var(--dy))}
.annot{opacity:0;transition:opacity .7s ease .55s}
.exploded.on .annot{opacity:1}
.exploded-cue{position:absolute;left:0;bottom:2%;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.6em}
.exploded-cue::before{content:"";width:22px;height:1px;background:var(--clay)}
@media (max-width:1024px){
  .xhero{grid-template-columns:1fr;gap:0}
  .exploded{height:62vh;order:-1;margin-top:1rem}
}
@media (max-width:600px){
  .exploded{height:52vh}
}

/* ---------- SCROLL-SCRUBBED RENDER REEL ---------- */
.reel{position:relative;background:var(--paper)}
.reel-track{position:relative;height:360vh}          /* scroll length drives playback */
.reel-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--paper);
  display:flex;align-items:center;justify-content:center}
.reel-video{width:100%;height:100%;object-fit:contain;object-position:center;background:var(--paper)}
.reel-copy{position:absolute;top:calc(var(--nav-h) + 3.5vh);left:var(--gutter);max-width:34ch;z-index:3;pointer-events:none}
.reel-copy h2{margin:.6rem 0 .8rem}
.reel-copy .lede{font-size:1rem}
.reel-hud{position:absolute;left:var(--gutter);bottom:5vh;z-index:3;display:flex;flex-direction:column;gap:.7rem}
.reel-state{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.reel-meter{width:220px;max-width:60vw;height:3px;background:var(--line);position:relative;overflow:hidden}
.reel-meter i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--clay)}
.reel-hint{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* On touch/mobile the reel auto-plays (scroll-scrub is unreliable there) */
@media (max-width:760px){
  .reel-track{height:auto}
  .reel-stage{position:static;height:auto;flex-direction:column;justify-content:flex-start;
    padding:calc(var(--nav-h) + 4vh) var(--gutter) 6vh;gap:1.3rem}
  .reel-copy{position:static;max-width:none;pointer-events:auto}
  .reel-copy h2{font-size:clamp(1.8rem,7vw,2.4rem)}
  .reel-video{height:auto;width:100%;max-height:66vh}
  .reel-hud{display:none}
}

/* ---------- SCROLL-SCRUB EXPLODED HOUSE (anatomy) ---------- */
.anatomy{position:relative}
.anatomy-track{position:relative;height:300vh}
.anatomy-stage{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:.82fr 1.18fr;
  gap:2rem;align-items:center;overflow:hidden;padding-inline:var(--gutter)}
.anatomy-copy{position:relative;z-index:3}
.anatomy-copy h2{margin:.7rem 0 1rem;max-width:14ch}
.anatomy-hint{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--clay);display:flex;align-items:center;gap:.6em;margin-top:2rem}
.anatomy-hint .dn{display:inline-block;animation:bobY 1.6s ease-in-out infinite}
.anatomy-meter{margin-top:1.4rem;width:210px;max-width:60%;height:3px;background:var(--line);position:relative;overflow:hidden}
.anatomy-meter .am-fill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--clay)}
.anatomy-state{display:block;margin-top:.7rem;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.exploded-scroll{position:relative;z-index:2;height:92vh;width:100%}
.exploded-scroll svg{width:100%;height:100%;overflow:visible}
.exploded-scroll .deck-layer{transition:none!important;will-change:transform}
.exploded-scroll .annot{opacity:0}
@media (max-width:900px){
  .anatomy-track{height:260vh}
  .anatomy-stage{grid-template-columns:1fr;gap:0;align-content:center}
  .anatomy-copy{position:absolute;top:calc(var(--nav-h) + 10px);left:var(--gutter);right:var(--gutter);z-index:4}
  .anatomy-copy h2{font-size:clamp(1.8rem,7vw,2.4rem)}
  .exploded-scroll{height:74vh;margin-top:12vh}
}

/* ---------- CINEMATIC HERO (photo sequence) ---------- */
.cine-hero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:#0d0b0a;
  color:var(--paper);display:flex;align-items:flex-end}
.cine-stack{position:absolute;inset:0;z-index:0}
.cine-slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.06);filter:saturate(.9) contrast(1.04);
  transition:opacity 1.7s ease, transform 7s ease;will-change:opacity,transform}
.cine-slide.active{opacity:1;transform:scale(1.17)}
.cine-slide:nth-child(2n).active{transform:scale(1.17) translate(-1.6%,0.6%)}
.cine-slide:nth-child(3n).active{transform:scale(1.17) translate(1.4%,-0.8%)}
.cine-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(13,11,10,.94) 0%,rgba(13,11,10,.5) 34%,rgba(13,11,10,.12) 62%,rgba(13,11,10,.55) 100%)}
.cine-scrim::after{content:"";position:absolute;inset:0;
  background:radial-gradient(130% 90% at 18% 92%,transparent 42%,rgba(13,11,10,.55))}
.cine-grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.10;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:150px;animation:grain .55s steps(3) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-5px,3px)}66%{transform:translate(4px,-3px)}}
.cine-bar{position:absolute;left:0;right:0;height:clamp(22px,5vh,58px);background:#0a0908;z-index:4}
.cine-bar.top{top:0;transform:translateY(-100%);animation:barIn 1.3s var(--ease) .15s forwards}
.cine-bar.bottom{bottom:0;transform:translateY(100%);animation:barIn 1.3s var(--ease) .15s forwards}
@keyframes barIn{to{transform:translateY(0)}}
.cine-copy{position:relative;z-index:5;max-width:1040px;padding-bottom:clamp(74px,13vh,150px)}
.cine-copy .eyebrow{color:var(--sand)}
.cine-copy h1{margin:.25em 0 .3em;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.cine-copy h1 .line{display:block;overflow:hidden}
.cine-copy h1 .line span{display:block;transform:translateY(110%);transition:transform 1.05s var(--ease)}
.loaded .cine-copy h1 .line span{transform:translateY(0)}
.cine-copy h1 .line:nth-child(2) span{transition-delay:.12s}
.cine-copy h1 .line:nth-child(3) span{transition-delay:.24s}
.cine-copy .lede{color:#ece4d7;max-width:46ch}
.cine-copy .hero-sub{display:flex;gap:2.5rem;flex-wrap:wrap;margin-top:2rem;align-items:center}
.cine-copy .btn{background:var(--clay);border-color:var(--clay)}
.cine-copy .btn:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.cine-copy .btn.ghost{background:transparent;color:var(--paper);border-color:rgba(255,255,255,.55)}
.cine-copy .btn.ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cine-copy .hero-stats{display:flex;gap:2.6rem;margin-top:2.6rem;padding-top:1.8rem;border-top:1px solid rgba(255,255,255,.22)}
.cine-copy .stat .num{color:var(--paper)}
.cine-copy .stat .lbl{color:var(--sand)}
.cine-hud{position:absolute;right:var(--gutter);bottom:calc(clamp(22px,5vh,58px) + 26px);z-index:5;
  display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;text-align:right}
.cine-frame{font-family:var(--mono);font-size:12px;letter-spacing:.22em;color:var(--sand)}
.cine-label{font-family:var(--display);font-size:1.4rem;line-height:1}
.cine-progress{width:130px;height:2px;background:rgba(255,255,255,.25);overflow:hidden}
.cine-progress i{display:block;height:100%;width:0;background:var(--clay)}
.scroll-cue{position:absolute;left:var(--gutter);bottom:calc(clamp(22px,5vh,58px) + 22px);z-index:5;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);
  display:flex;gap:.6em;align-items:center}
.scroll-cue span{display:inline-block;animation:bobY 1.6s ease-in-out infinite}
@keyframes bobY{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media (max-width:760px){
  .cine-hud{display:none}
  .cine-copy .hero-stats{gap:1.4rem}
  .cine-copy .stat .num{font-size:1.8rem}
}

/* Nav appearance while over the dark cinematic hero */
body.cine .nav:not(.scrolled) .brand,
body.cine .nav:not(.scrolled) .nav-links a{color:var(--paper)}
body.cine .nav:not(.scrolled) .nav-links a.active{color:var(--sand)}
body.cine .nav:not(.scrolled) .nav-cta{border-color:rgba(255,255,255,.6);color:var(--paper)!important}
body.cine .nav:not(.scrolled) .nav-cta:hover{background:var(--paper);color:var(--ink)!important;border-color:var(--paper)}
body.cine .nav:not(.scrolled) .burger span{background:var(--paper)}

/* ---------- Iso construction scene ---------- */
.iso-house{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.iso-house svg{width:100%;height:100%;overflow:visible}
.build-readout{position:absolute;left:2%;bottom:5%;display:flex;align-items:center;gap:.7em;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  background:rgba(239,234,225,.6);backdrop-filter:blur(6px);padding:.5em .9em;border:1px solid var(--line);border-radius:40px}
.dotpulse{width:8px;height:8px;border-radius:50%;background:var(--clay);animation:pulse 1.4s ease-in-out infinite;flex:none}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:.35}}

/* ---------- Rotating 3D house (CSS 3D) ---------- */
.house3d-wrap{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-block:clamp(30px,6vw,70px);margin-bottom:clamp(1.5rem,4vw,3rem)}
.house3d-wrap .ground{position:absolute;top:52%;width:250px;height:70px;
  background:radial-gradient(ellipse at center,rgba(23,19,16,.20),transparent 70%);filter:blur(3px)}
.scene3d{perspective:1500px;width:100%;max-width:460px;height:340px;display:flex;align-items:center;justify-content:center}
.rotor{position:relative;width:210px;height:150px;transform-style:preserve-3d;transform:rotateX(-17deg)}
.house3d{position:absolute;inset:0;transform-style:preserve-3d;animation:spinHouse 26s linear infinite}
.scene3d:hover .house3d{animation-play-state:paused}
@keyframes spinHouse{to{transform:rotateY(360deg)}}
.hf{position:absolute;box-sizing:border-box;border:1.5px solid var(--ink)}
.hf.front,.hf.back{width:210px;height:150px}
.hf.front{transform:translateZ(85px)}
.hf.back{transform:rotateY(180deg) translateZ(85px)}
.hf.right,.hf.left{width:170px;height:150px;left:50%;margin-left:-85px}
.hf.right{transform:rotateY(90deg) translateZ(105px)}
.hf.left{transform:rotateY(-90deg) translateZ(105px)}
.hf.roof,.hf.floor{width:210px;height:170px;top:50%;margin-top:-85px}
.hf.roof{transform:rotateX(90deg) translateZ(75px);
  background:linear-gradient(135deg,#E7DFD1,#CBBDA6);border-color:var(--ink)}
.hf.floor{transform:rotateX(90deg) translateZ(-75px);background:#3a322c;border-color:var(--ink)}
.hf.slab{width:252px;height:212px;left:50%;top:50%;margin-left:-126px;margin-top:-106px;border:none;
  background:var(--ink);transform:rotateX(90deg) translateZ(80px);box-shadow:0 0 0 1px var(--ink)}
/* glazed walls */
.hf.wall{background:linear-gradient(135deg,rgba(239,234,225,.55),rgba(200,187,167,.4))}
.hf.wall::before{content:"";position:absolute;inset:13px;border:1px solid rgba(28,23,18,.55);
  background:
    repeating-linear-gradient(90deg,transparent 0 44px,rgba(28,23,18,.32) 44px 45px),
    repeating-linear-gradient(0deg,transparent 0 38px,rgba(28,23,18,.32) 38px 39px)}
.hf.wall::after{content:"";position:absolute;left:13px;right:13px;bottom:13px;height:6px;background:var(--clay);opacity:.85}
.house3d-cap{margin-top:1.4rem;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.house3d{animation:none;transform:rotateY(-32deg)}}
@media (max-width:760px){.scene3d{max-width:320px;height:280px} .rotor{transform:rotateX(-17deg) scale(.82)}}

/* ---------- Marquee ---------- */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding-block:1.3rem;background:var(--ink);color:var(--paper)}
.marquee-track{display:flex;gap:3rem;white-space:nowrap;width:max-content;animation:scrollX 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-family:var(--display);font-size:clamp(1.4rem,3vw,2.4rem);display:inline-flex;align-items:center;gap:3rem}
.marquee .dot{width:9px;height:9px;border-radius:50%;background:var(--clay)}
@keyframes scrollX{to{transform:translateX(-50%)}}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(38px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}.reveal.d4{transition-delay:.4s}

/* ---------- Section head ---------- */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.sec-head .idx{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.1em}

/* ---------- Services ---------- */
.svc-list{border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:60px 1fr auto;gap:2rem;align-items:center;
  padding:clamp(1.6rem,3vw,2.6rem) 0;border-bottom:1px solid var(--line);position:relative;
  cursor:pointer;transition:padding-left .5s var(--ease)}
.svc-row .no{font-family:var(--mono);font-size:.85rem;color:var(--muted)}
.svc-row h3{transition:color .4s;line-height:1.05}
.svc-row .svc-desc{max-width:44ch;color:var(--muted);font-size:.95rem}
.svc-row .plus{font-size:1.6rem;color:var(--clay);transition:transform .5s var(--ease)}
.svc-row::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:bottom;
  transition:transform .5s var(--ease);z-index:-1}
.svc-row:hover{padding-left:24px;color:var(--paper)}
.svc-row:hover::before{transform:scaleY(1)}
.svc-row:hover h3{color:var(--paper)}
.svc-row:hover .svc-desc,.svc-row:hover .no{color:var(--sand)}
.svc-row:hover .plus{transform:rotate(90deg);color:var(--clay)}

/* ---------- Projects grid ---------- */
.grid-projects{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,26px)}
.card{position:relative;overflow:hidden;background:var(--sand);border-radius:2px}
.card.span7{grid-column:span 7}.card.span5{grid-column:span 5}
.card.span6{grid-column:span 6}.card.span4{grid-column:span 4}
.card.span8{grid-column:span 8}.card.span12{grid-column:span 12}
.card .ph{aspect-ratio:4/3;overflow:hidden}
.card.tall .ph{aspect-ratio:3/4}
.card.wide .ph{aspect-ratio:16/10}
.card img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .6s;filter:grayscale(.18)}
.card:hover img{transform:scale(1.06);filter:grayscale(0)}
.card .meta{position:absolute;left:0;right:0;bottom:0;padding:1.6rem;display:flex;justify-content:space-between;align-items:flex-end;
  background:linear-gradient(to top,rgba(20,17,16,.78),transparent);color:var(--paper);
  transform:translateY(8px);opacity:0;transition:.5s var(--ease)}
.card:hover .meta{transform:none;opacity:1}
.card .meta h3{font-size:1.4rem}
.card .meta .cat{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand)}
.card .yr{position:absolute;top:1.2rem;right:1.4rem;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--paper);background:rgba(20,17,16,.4);backdrop-filter:blur(6px);padding:.3em .8em;border-radius:30px;
  opacity:0;transition:.5s var(--ease)}
.card:hover .yr{opacity:1}
/* Touch devices have no hover — always show project info + animate cards in */
@media (hover:none){
  .card .meta{opacity:1;transform:none}
  .card .yr{opacity:1}
  .card img{filter:grayscale(0)}
}

/* Filter chips */
.filters{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2.5rem}
.chip{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  padding:.6em 1.2em;border:1px solid var(--line);border-radius:40px;cursor:pointer;transition:.3s;color:var(--muted)}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.card.hide{display:none}

/* ---------- Split feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.split .media{overflow:hidden;border-radius:2px}
.split .media img{filter:grayscale(.15);transition:transform 1.2s var(--ease)}
.split:hover .media img{transform:scale(1.05)}
.parallax-img{will-change:transform}

/* ---------- Stats band ---------- */
.band{background:var(--ink);color:var(--paper)}
.band .stat .num{color:var(--white)}
.band .stat .lbl{color:var(--sand)}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.stat-grid .stat .num{font-size:clamp(2.5rem,5vw,4.2rem)}

/* ---------- Process steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.step{border-top:2px solid var(--ink);padding-top:1.4rem}
.step .no{font-family:var(--mono);font-size:12px;color:var(--clay);letter-spacing:.1em}
.step h3{margin:.7rem 0 .6rem;font-size:1.4rem}
.step p{color:var(--muted);font-size:.95rem}

/* ---------- Testimonials ---------- */
.quote{font-family:var(--display);font-size:clamp(1.6rem,3.4vw,3rem);line-height:1.18;max-width:22ch}
.quote-author{margin-top:2rem;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- CTA ---------- */
.cta-big{text-align:center;padding-block:clamp(80px,12vw,180px)}
.cta-big h2{font-size:clamp(2.6rem,9vw,8rem);line-height:.95}
.cta-big a:not(.btn){color:var(--ink);position:relative;display:inline-block}
.cta-big a .u{display:inline-block;position:relative}
.cta-big a .u::after{content:"";position:absolute;left:0;bottom:.08em;height:3px;width:100%;background:var(--clay);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.cta-big a:hover .u::after{transform:scaleX(1)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem)}
.field{margin-bottom:1.8rem;position:relative}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.6rem}
.field input,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:.7em 0;font-family:var(--sans);font-size:1.05rem;color:var(--ink);transition:border-color .4s}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--clay)}
.field textarea{resize:vertical;min-height:110px}
.info-row{display:flex;justify-content:space-between;padding:1.3rem 0;border-bottom:1px solid var(--line)}
.info-row .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.info-row .v{font-size:1.05rem}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:var(--paper);padding-block:clamp(60px,8vw,110px) 2.5rem}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem;padding-bottom:4rem;border-bottom:1px solid #33302c}
.footer h2{font-size:clamp(2rem,5vw,3.4rem);max-width:16ch}
.footer .col h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);margin-bottom:1.3rem}
.footer .col a{display:block;color:#cfc6ba;padding:.35rem 0;transition:color .3s,transform .3s}
.footer .col a:hover{color:var(--paper);transform:translateX(5px)}
.footer-bot{display:flex;justify-content:space-between;align-items:center;padding-top:2rem;flex-wrap:wrap;gap:1rem;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#8b8177}

/* ---------- Page hero (sub pages) ---------- */
.phead{padding-top:calc(var(--nav-h) + clamp(50px,8vw,100px));padding-bottom:clamp(40px,6vw,70px)}
.phead h1{font-size:clamp(2.6rem,7vw,6rem);margin:.3em 0}
.crumb{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.crumb a:hover{color:var(--clay)}

/* ---------- Page transition curtain ---------- */
.curtain{position:fixed;inset:0;background:var(--ink);z-index:9998;transform:translateY(100%);pointer-events:none}
.curtain.play{animation:curtain 1.1s var(--ease-2) forwards}
@keyframes curtain{0%{transform:translateY(100%)}45%{transform:translateY(0)}55%{transform:translateY(0)}100%{transform:translateY(-100%)}}

/* Scroll progress */
.progress{position:fixed;top:0;left:0;height:2px;background:var(--clay);z-index:950;width:0}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hero{grid-template-columns:1fr;gap:0}
  .scene{height:44vh;order:-1;margin-top:1rem}
  .stat-grid,.steps{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav-links{position:fixed;inset:0;background:var(--paper);flex-direction:column;justify-content:center;
    gap:1.8rem;font-size:1.4rem;transform:translateX(100%);transition:transform .5s var(--ease);z-index:800}
  .nav-links.open{transform:none}
  .nav-links a{color:var(--ink)}
  .burger{display:flex;z-index:810}
  .nav.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.menu-open .burger span:nth-child(2){opacity:0}
  .nav.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .grid-projects .card{grid-column:span 12!important}
  .split,.contact-grid,.footer-top{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:2.5rem 1rem}
  .steps{grid-template-columns:1fr}
  .hero-stats{gap:1.5rem}
  .stat .num{font-size:2rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
  .reveal{opacity:1;transform:none}
}