/* ============================================================
   BUILD MARQUE — design language: "the drawing sheet"
   Ink & warm paper, drawing-register typography, rule lines,
   indexed sections. All motion = transform/opacity only.
   ============================================================ */
:root{
  --ink:#0D0F12;
  --ink-2:#14171D;
  --ink-3:#1C2028;
  --paper:#F4F1EA;
  --paper-2:#ECE8DE;
  --amber:#D4A24E;
  --amber-deep:#B9883B;
  --mut:#8C93A0;          /* muted on ink */
  --mut-p:#6B6B63;        /* muted on paper */
  --line:rgba(244,241,234,.14);
  --line-p:rgba(13,15,18,.16);
  --d:cubic-bezier(.19,1,.22,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Archivo',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--amber);color:var(--ink);}
img{display:block;max-width:100%;filter:saturate(.94) contrast(1.04);}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
ul{list-style:none;}

.wrap{max-width:1280px;margin:0 auto;padding:0 24px;}
@media(min-width:1024px){.wrap{padding:0 48px;}}

/* ---------- type ---------- */
.display{
  font-family:'Anton',sans-serif;
  font-weight:400;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:.01em;
}
.label{
  font-size:11px;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
}
.index-no{
  font-family:'Anton',sans-serif;
  font-size:13px;
  letter-spacing:.12em;
  color:var(--amber);
}

/* ---------- section scaffolding: rule line + index ---------- */
.sec-head{
  display:flex;align-items:baseline;gap:18px;
  padding-bottom:18px;margin-bottom:56px;
  border-bottom:1px solid var(--line);
}
.on-paper .sec-head{border-color:var(--line-p);}
.sec-head .label{color:var(--mut);}
.on-paper .sec-head .label{color:var(--mut-p);}

/* ---------- textures (static, cheap) ---------- */
.blueprint{position:relative;}
.blueprint::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(244,241,234,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,241,234,.045) 1px,transparent 1px);
  background-size:90px 90px;
}
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* ---------- reveal animations ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1s var(--d),transform 1s var(--d);}
.rv.in{opacity:1;transform:none;}
.rv-line{overflow:hidden;display:block;}
.rv-line>span{display:block;transform:translateY(112%);transition:transform 1.1s var(--d);}
.in .rv-line>span{transform:none;}
.in .rv-line:nth-child(2)>span{transition-delay:.09s;}
.in .rv-line:nth-child(3)>span{transition-delay:.18s;}
.rv-img{overflow:hidden;}
.rv-img img{transform:scale(1.12);transition:transform 1.4s var(--d);}
.rv-img.in img{transform:scale(1);}
@media(prefers-reduced-motion:reduce){
  .rv,.rv-line>span,.rv-img img{transition:none!important;transform:none!important;opacity:1!important;}
  .mq-track{animation:none!important;}
  .hero-img{animation:none!important;}
}

/* ---------- nav ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background .35s,border-color .35s;
  border-bottom:1px solid transparent;
}
nav.solid{background:rgba(13,15,18,.86);backdrop-filter:blur(14px);border-color:var(--line);}
/* On mobile the bar is solid from the start so it reads as a fixed panel that
   content scrolls cleanly under (matches the gallery page), never a translucent
   strip that looks half-there. */
@media(max-width:1023px){nav{background:rgba(13,15,18,.92);backdrop-filter:blur(14px);border-bottom-color:var(--line);}}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:72px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand-mark{
  height:40px;width:auto;display:block;
  filter:none;
}
.brand-name{font-family:'Archivo',sans-serif;font-weight:800;font-size:16px;letter-spacing:.2em;text-transform:uppercase;line-height:1;}
.brand-sub{display:block;font-family:'Archivo',sans-serif;font-size:8.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);white-space:nowrap;margin-top:1px;}
.nav-links{display:none;gap:34px;}
.nav-links a{font-size:13px;font-weight:500;letter-spacing:.06em;color:var(--mut);transition:color .25s;}
.nav-links a:hover{color:var(--paper);}
.nav-links a.active{color:var(--amber);}
.nav-cta{display:none;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.04em;
  border:1px solid var(--amber);color:var(--amber);padding:10px 20px;border-radius:2px;transition:background .25s,color .25s;}
.nav-cta:hover{background:var(--amber);color:var(--ink);}
@media(min-width:1024px){.nav-links{display:flex;}.nav-cta{display:inline-flex;}}
.burger{display:grid;place-items:center;width:44px;height:44px;}
.burger span{display:block;width:24px;height:2px;background:var(--paper);position:relative;transition:background .2s;}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:24px;height:2px;background:var(--paper);transition:transform .3s var(--d),top .3s var(--d);}
.burger span::before{top:-8px;}.burger span::after{top:8px;}
body.menu-open .burger span{background:transparent;}
body.menu-open .burger span::before{top:0;transform:rotate(45deg);}
body.menu-open .burger span::after{top:0;transform:rotate(-45deg);}
@media(min-width:1024px){.burger{display:none;}}

/* mobile menu overlay */
#menu{
  position:fixed;inset:0;z-index:55;background:var(--ink-2);
  display:flex;flex-direction:column;justify-content:center;padding:88px 28px 32px;
  overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .4s var(--d),visibility .4s;
}
body.menu-open #menu{opacity:1;visibility:visible;}
body.menu-open{overflow:hidden;}
#menu a.m-link{
  font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(34px,9vw,54px);line-height:1.16;color:var(--paper);
  display:flex;align-items:baseline;gap:16px;padding:6px 0;
  transform:translateY(26px);opacity:0;transition:transform .6s var(--d),opacity .6s;
}
#menu a.m-link em{font-family:'Archivo',sans-serif;font-style:normal;font-size:12px;color:var(--amber);letter-spacing:.15em;}
body.menu-open #menu a.m-link{transform:none;opacity:1;}
body.menu-open #menu a.m-link:nth-child(2){transition-delay:.05s;}
body.menu-open #menu a.m-link:nth-child(3){transition-delay:.1s;}
body.menu-open #menu a.m-link:nth-child(4){transition-delay:.15s;}
body.menu-open #menu a.m-link:nth-child(5){transition-delay:.2s;}
body.menu-open #menu a.m-link:nth-child(6){transition-delay:.25s;}
body.menu-open #menu a.m-link:nth-child(7){transition-delay:.3s;}
body.menu-open #menu a.m-link:nth-child(8){transition-delay:.35s;}
#menu .m-foot{margin-top:42px;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--mut);}
#menu .m-foot a{color:var(--amber);}

/* ---------- hero ---------- */
/* All hero content lives in normal flow (no absolute text layers), so the
   meta line and headline can never overlap at any viewport size. */
.hero{position:relative;display:flex;flex-direction:column;overflow:hidden;}
.hero-media{position:absolute;inset:0;}
.hero-img{width:100%;height:112%;object-fit:cover;animation:heroDrift 16s var(--d) forwards;}
@keyframes heroDrift{from{transform:scale(1.08) translateY(0);}to{transform:scale(1) translateY(-2.5%);}}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,15,18,.62) 0%,rgba(13,15,18,.30) 45%,rgba(13,15,18,.88) 86%,var(--ink) 100%);
}
.hero-flow{
  position:relative;z-index:2;width:100%;
  min-height:calc(100svh - 64px);
  display:flex;flex-direction:column;
  padding-top:80px;
}
.hero-meta-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;}
.hero-meta{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,241,234,.78);}
.hero-meta b{color:var(--amber);}
@media(max-width:640px){.hero-meta{font-size:9.5px;letter-spacing:.18em;}}
/* Headline: big, anchored high in the upper-left sky. Sized + raised so its
   bottom lands ~47-48% height — above the tree canopy (~53%) — and its right
   edge stays ~48% (left of the villa). Only this headline must clear the trees;
   the sub-text/buttons below may overlap the building (client, 2026-06-18). */
.hero-main{margin-top:0;padding:0 0 34px;max-width:none;}
.hero h1{
  font-size:clamp(46px,8.8vw,126px);
  margin-left:-4px;
  white-space:nowrap;
}
@media(max-width:768px){
  /* On phones the frame is portrait, so the wide cover is cropped horizontally.
     Shift the focus right (~63%) to centre the villa instead of the blank wall,
     and raise the headline up into the open sky at the top (client 2026-06-20)
     instead of bottom-anchoring it over the building. */
  .hero-img{object-position:63% 50%;}
  /* drop the "Building spaces, enhancing lives" tagline on phones (client
     2026-06-20); keep the location line. */
  .hero-meta-row .hero-meta:first-child{display:none;}
  /* Big headline pushes the sub-line down so it lands just above the villa
     roofline (not floating high with empty sky). hero-main fills the hero as a
     flex column; the buttons drop to the bottom via margin-top:auto, and
     hero-flow's padding-bottom lifts them clear of the Est./Licensed strip. */
  .hero-flow{padding-bottom:clamp(30px,5vh,48px);}
  .hero-main{margin-top:clamp(16px,4.5vh,42px);max-width:none;padding-bottom:0;
    display:flex;flex-direction:column;flex:1 1 auto;}
  .hero h1{font-size:clamp(54px,17vw,94px);white-space:normal;}
  /* two-class selectors so these win over the base .hero-sub/.hero-actions rules
     that appear later in the file (equal specificity would otherwise lose). */
  .hero-main .hero-sub{margin-top:18px;font-size:16px;max-width:330px;}
  .hero-main .hero-actions{margin-top:auto;padding-top:26px;}
}
.hero h1 .out{
  color:transparent;
  -webkit-text-stroke:2px var(--amber);
}
.hero-sub{
  max-width:560px;font-size:17px;line-height:1.7;color:rgba(244,241,234,.88);
  margin-top:26px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;}
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 28px;border-radius:2px;
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  transition:transform .3s var(--d),background .25s,color .25s,border-color .25s;
}
.btn:active{transform:scale(.97);}
.btn-amber{background:var(--amber);color:var(--ink);}
.btn-amber:hover{background:var(--amber-deep);}
.btn-ghost{border:1px solid rgba(244,241,234,.35);color:var(--paper);}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber);}
.btn-ink{background:var(--ink);color:var(--paper);}
.btn-ink:hover{background:var(--ink-3);}
.hero-strip{
  position:relative;z-index:2;
  border-top:1px solid var(--line);
}
.hero-strip .wrap{
  display:grid;grid-template-columns:repeat(2,1fr);
}
.hs-item{padding:18px 18px 18px 0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);}
.hs-item b{display:block;color:var(--paper);font-size:13px;letter-spacing:.12em;margin-bottom:2px;}
@media(min-width:768px){.hero-strip .wrap{grid-template-columns:repeat(4,1fr);}.hs-item{border-left:1px solid var(--line);padding-left:18px;}.hs-item:first-child{border-left:0;padding-left:0;}}
@media(max-width:767px){.hs-item:nth-child(n+3){border-top:1px solid var(--line);}}

/* ---------- marquee ---------- */
.mq{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:16px 0;background:var(--ink);}
.mq-track{display:flex;width:max-content;animation:mq 36s linear infinite;}
@keyframes mq{to{transform:translateX(-50%);}}
.mq-item{
  font-family:'Anton',sans-serif;text-transform:uppercase;font-size:20px;letter-spacing:.06em;
  color:var(--mut);display:flex;align-items:center;gap:28px;padding-right:28px;white-space:nowrap;
}
.mq-item i{font-style:normal;color:var(--amber);font-size:14px;}

/* ---------- paper sections ---------- */
.on-paper{background:var(--paper);color:var(--ink);}

/* manifesto */
.mani{padding:110px 0 90px;}
.mani-grid{display:grid;gap:48px;}
@media(min-width:1024px){.mani-grid{grid-template-columns:7fr 5fr;gap:80px;}}
.mani h2{font-size:clamp(40px,6vw,76px);color:var(--ink);}
.mani h2 .amber{color:var(--amber-deep);}
.mani-copy p{color:#3A3A33;font-size:17px;line-height:1.8;margin-bottom:22px;}
.mani-sig{
  margin-top:34px;padding-top:22px;border-top:1px solid var(--line-p);
  display:flex;align-items:center;gap:14px;
}
.mani-sig .index-no{color:var(--amber-deep);}
.mani-sig span{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut-p);}

/* ---------- services index rows ---------- */
.svc{padding:0 0 70px;}
/* tighten the gap under the heading and fill it with a lead line so the
   section reads as a full statement of capability, not two empty rule lines */
.svc .sec-head{margin-bottom:26px;}
.svc-lead{max-width:680px;color:var(--mut-p);font-size:clamp(17px,2vw,20px);line-height:1.6;margin-bottom:30px;}
.svc-lead b{color:var(--ink);font-weight:600;}
@media(min-width:900px){.svc-lead{margin-bottom:40px;}}
.svc-row{
  display:grid;grid-template-columns:auto 1fr;gap:18px 24px;align-items:start;
  padding:34px 0;border-top:1px solid var(--line-p);
  position:relative;
}
.svc-row:last-of-type{border-bottom:1px solid var(--line-p);}
@media(min-width:900px){
  .svc-row{grid-template-columns:90px 1fr 1.1fr 300px;align-items:center;gap:36px;}
}
.svc-no{font-family:'Anton',sans-serif;font-size:15px;color:var(--amber-deep);padding-top:6px;}
.svc-title{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(26px,4vw,44px);line-height:1;color:var(--ink);transition:color .3s;}
.svc-row:hover .svc-title{color:var(--amber-deep);}
.svc-desc{color:#4A4A42;font-size:15px;line-height:1.7;grid-column:2;}
@media(min-width:900px){.svc-desc{grid-column:auto;}}
.svc-thumb{
  grid-column:1/-1;border-radius:4px;overflow:hidden;aspect-ratio:16/8;
}
@media(min-width:900px){
  .svc-thumb{grid-column:auto;aspect-ratio:4/3;clip-path:inset(8% 8% 8% 8%);transition:clip-path .7s var(--d);}
  .svc-row:hover .svc-thumb{clip-path:inset(0 0 0 0);}
}
.svc-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--d);}
.svc-row:hover .svc-thumb img{transform:scale(1.06);}

/* capability strip */
.caps{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:54px;}
@media(min-width:900px){.caps{grid-template-columns:repeat(6,1fr);}}
.cap{
  position:relative;border-radius:4px;overflow:hidden;aspect-ratio:1/1.15;
  transition:transform .45s var(--d);
}
.cap:hover{transform:translateY(-6px);}
.cap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(13,15,18,.88));}
.cap span{
  position:absolute;bottom:12px;left:12px;right:10px;z-index:2;
  color:var(--paper);font-size:12.5px;font-weight:600;letter-spacing:.06em;line-height:1.35;
}

/* ---------- featured case (ink) ---------- */
.case{padding:110px 0;position:relative;}
.case-grid{display:grid;gap:48px;}
@media(min-width:1024px){.case-grid{grid-template-columns:4fr 8fr;gap:64px;align-items:start;}}
.case-meta{position:relative;}
@media(min-width:1024px){.case-meta{position:sticky;top:120px;}}
.case-meta h2{font-size:clamp(42px,5.5vw,70px);}
.case-meta h2 .out{color:transparent;-webkit-text-stroke:1.5px var(--paper);}
.case-meta p{color:var(--mut);font-size:16px;line-height:1.75;margin-top:22px;max-width:420px;}
.case-specs{margin-top:34px;border-top:1px solid var(--line);}
.case-specs li{
  display:flex;justify-content:space-between;gap:18px;
  padding:13px 0;border-bottom:1px solid var(--line);
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;
}
.case-specs li b{color:var(--amber);font-weight:600;}
.case-specs li span{color:var(--mut);}
.case-gal{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.case-gal .big{grid-column:1/-1;aspect-ratio:16/9;}
.case-gal figure{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:4/3;cursor:zoom-in;}
.case-gal figure img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--d);}
.case-gal figure:hover img{transform:scale(1.05);}
.case-gal figure::after{
  content:"+";position:absolute;right:12px;bottom:8px;color:var(--paper);
  font-family:'Anton',sans-serif;font-size:20px;opacity:0;transition:opacity .3s;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.case-gal figure:hover::after{opacity:1;}

/* ---------- site diary (ink-2) — pinned horizontal scroll on desktop ---------- */
.diary{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;}
.diary-stage{padding:104px 0;}
.diary-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;}
.diary-head h2{font-size:clamp(38px,5.5vw,64px);}
.diary-head h2 .out{color:transparent;-webkit-text-stroke:1.5px var(--amber);}
.diary-lead{color:var(--mut);font-size:15px;line-height:1.7;max-width:380px;}
.diary-hint{display:none;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);margin-top:10px;}
@media(hover:hover) and (pointer:fine){.diary-hint{display:block;}}
.diary-viewport{margin-top:42px;}
.diary-track{
  display:flex;gap:16px;
  overflow-x:auto;
  /* no negative margin: it would push the strip past the viewport and make the
     whole page horizontally swipeable on phones. Cards inset to the gutter. */
  margin:0;padding:6px 24px 18px;
  scrollbar-width:thin;scrollbar-color:rgba(212,162,78,.6) transparent;
  cursor:grab;
}
.diary-track.dragging{cursor:grabbing;user-select:none;}
.diary-track.dragging img{pointer-events:none;}
@media(min-width:1024px){.diary-track{margin:0;padding:6px 48px 18px;}}
.diary-track::-webkit-scrollbar{height:6px;}
.diary-track::-webkit-scrollbar-thumb{background:rgba(212,162,78,.45);border-radius:3px;}
.diary-track::-webkit-scrollbar-track{background:rgba(244,241,234,.06);}
.diary-card{flex:0 0 78vw;max-width:330px;}
@media(min-width:600px){.diary-card{flex:0 0 330px;max-width:none;}}
.diary-card .ph{position:relative;aspect-ratio:3/4;border-radius:6px;overflow:hidden;background:var(--ink-3);}
.diary-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--d);}
.diary-card:hover .ph img{transform:scale(1.05);}
.diary-card .ph .plate{
  position:absolute;top:10px;left:10px;z-index:2;
  font-family:'Anton',sans-serif;font-size:11px;letter-spacing:.14em;color:var(--amber);
  background:rgba(13,15,18,.72);padding:5px 9px;border-radius:2px;
}
.diary-card .where{margin-top:12px;font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);}
.diary-card .what{margin-top:4px;font-size:14px;color:var(--paper);line-height:1.5;}

/* pinned mode: vertical scroll drives horizontal travel (JS adds .pinned + sets section height) */
.diary.pinned .diary-stage{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;gap:20px;overflow:hidden;padding:0;}
.diary.pinned .sec-head{margin-bottom:14px;}
.diary.pinned .diary-lead{display:none;}
.diary.pinned .diary-viewport{margin-top:0;overflow:visible;}
.diary.pinned .diary-track{overflow:visible;flex-wrap:nowrap;cursor:default;margin:0;padding:0 48px;will-change:transform;}
.diary.pinned .diary-card{flex:0 0 auto;width:clamp(258px,38vh,400px);max-width:none;}

/* ---------- selected projects (paper) — horizontal scroll rail ---------- */
.reg{padding:110px 0;}
/* big, proud headline + (desktop) scroll arrows above the rail */
.reg-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 24px;margin-bottom:38px;}
.reg-title{font-size:clamp(40px,6vw,84px);color:var(--ink);line-height:.92;}
.reg-title .out{color:transparent;-webkit-text-stroke:1.6px var(--amber-deep);}
.reg-lead{color:var(--mut-p);font-size:16px;line-height:1.7;max-width:520px;margin-top:16px;}
.pj-rail-nav{display:none;gap:10px;flex:0 0 auto;}
@media(hover:hover) and (min-width:900px){.pj-rail-nav{display:flex;}}
.pj-rail-btn{
  width:54px;height:54px;border-radius:50%;border:1px solid var(--line-p);color:var(--ink);
  display:grid;place-items:center;font-size:24px;line-height:1;
  transition:background .25s,color .25s,border-color .25s,opacity .25s;
}
.pj-rail-btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.pj-rail-btn:disabled{opacity:.28;cursor:default;}
.pj-rail-btn:disabled:hover{background:none;color:var(--ink);border-color:var(--line-p);}

.pjrail{
  display:flex;gap:16px;overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:4px 0 16px;
  scrollbar-width:thin;scrollbar-color:rgba(185,136,59,.55) transparent;
  -webkit-overflow-scrolling:touch;
}
.pjrail::-webkit-scrollbar{height:6px;}
.pjrail::-webkit-scrollbar-thumb{background:rgba(185,136,59,.4);border-radius:3px;}
.pjrail::-webkit-scrollbar-track{background:rgba(13,15,18,.08);}
@media(min-width:1000px){.pjrail{gap:18px;}}
.pj{
  position:relative;display:block;padding:0;text-align:left;
  flex:0 0 78vw;max-width:320px;scroll-snap-align:start;
  border-radius:6px;overflow:hidden;aspect-ratio:4/5;background:var(--ink-3);cursor:zoom-in;
}
@media(min-width:560px){.pj{flex-basis:330px;max-width:none;}}
@media(min-width:1000px){.pj{flex-basis:300px;}}
.pj img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--d);}
.pj:hover img,.pj:focus-visible img{transform:scale(1.07);}
.pj::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,15,18,0) 26%,rgba(13,15,18,.34) 52%,rgba(13,15,18,.74) 76%,rgba(13,15,18,.95) 100%);}
.pj-top{position:absolute;top:12px;left:12px;right:12px;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.pj-no{font-family:'Anton',sans-serif;font-size:12px;letter-spacing:.1em;color:var(--paper);background:rgba(13,15,18,.55);padding:4px 8px;border-radius:2px;}
.pj-tag{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:var(--amber);padding:5px 8px;border-radius:2px;white-space:nowrap;}
.pj-meta{position:absolute;left:16px;right:16px;bottom:15px;z-index:2;}
.pj-loc{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(20px,1.7vw,26px);line-height:1.05;letter-spacing:.03em;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.6);}
.pj-scope{margin-top:6px;font-size:12.5px;line-height:1.45;color:rgba(244,241,234,.92);text-shadow:0 1px 8px rgba(0,0,0,.55);}
.reg-more{margin-top:36px;color:var(--mut-p);font-size:14px;letter-spacing:.04em;text-align:center;}
.reg-more b{color:var(--ink);font-weight:600;}

/* ---------- process + blueprint (ink) ---------- */
.proc{padding:110px 0;position:relative;}
.proc-grid{display:grid;gap:56px;}
@media(min-width:1024px){.proc-grid{grid-template-columns:1fr 1fr;gap:80px;align-items:center;}}
.steps{counter-reset:step;}
.step{
  display:grid;grid-template-columns:64px 1fr;gap:20px;
  padding:26px 0;border-top:1px solid var(--line);
}
.step:last-child{border-bottom:1px solid var(--line);}
.step-no{font-family:'Anton',sans-serif;font-size:30px;color:var(--amber);line-height:1;}
.step h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:21px;letter-spacing:.03em;margin-bottom:6px;}
.step p{color:var(--mut);font-size:15px;line-height:1.7;max-width:480px;}
.bp-wrap{position:relative;}
.bp-wrap svg{width:100%;height:auto;display:block;}
.bp-wrap .bp-cap{
  margin-top:14px;display:flex;justify-content:space-between;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);
}
.bp path,.bp rect,.bp line,.bp circle{
  fill:none;stroke:rgba(244,241,234,.85);stroke-width:1.2;
  stroke-dasharray:1;stroke-dashoffset:1;
}
.bp .acc{stroke:var(--amber);}
.bp .thin{stroke:rgba(244,241,234,.35);stroke-width:.6;}
.bp-wrap.in .bp *{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 2.2s ease;
}
.bp-wrap.in .bp .d2{transition-delay:.5s;}
.bp-wrap.in .bp .d3{transition-delay:1s;}
.bp-wrap.in .bp .d4{transition-delay:1.5s;}

/* credential band */
.cred{
  margin-top:90px;border:1px solid rgba(212,162,78,.4);border-radius:6px;
  padding:14px 30px;
  background:linear-gradient(135deg,rgba(212,162,78,.06),transparent 55%);
}
.cred-item{
  display:flex;flex-direction:column;gap:18px;padding:22px 0;
}
.cred-item + .cred-item{border-top:1px solid rgba(212,162,78,.22);}
@media(min-width:900px){.cred-item{flex-direction:row;align-items:center;justify-content:space-between;padding:26px 12px;}}
.cred h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(20px,2.4vw,26px);letter-spacing:.02em;max-width:640px;line-height:1.25;}
.cred p{color:var(--mut);font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-top:8px;}
.cred .btn{flex:0 0 auto;}

/* ---------- leadership (paper) ---------- */
.team{padding:110px 0;}
.team-grid{display:grid;gap:16px;}
@media(min-width:900px){.team-grid{grid-template-columns:repeat(3,1fr);gap:22px;}}
.tcard{
  border:1px solid var(--line-p);border-radius:6px;padding:34px 30px;
  background:var(--paper);
  transition:transform .45s var(--d),box-shadow .45s var(--d);
  position:relative;overflow:hidden;
}
.tcard:hover{transform:translateY(-8px);box-shadow:0 30px 60px -28px rgba(13,15,18,.35);}
.tcard::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--amber);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--d);
}
.tcard:hover::before{transform:scaleX(1);}
.tcard .ava{
  width:84px;height:84px;border-radius:50%;overflow:hidden;
  background:linear-gradient(135deg,var(--amber),var(--amber-deep));
  display:grid;place-items:center;color:var(--ink);
  font-family:'Anton',sans-serif;font-size:26px;
  margin-bottom:22px;
}
.tcard img.ava{object-fit:cover;object-position:50% 22%;}
.tcard h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:20px;letter-spacing:.03em;color:var(--ink);}
.tcard .role{color:var(--amber-deep);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:6px 0 16px;}
.tcard p{color:#4A4A42;font-size:14.5px;line-height:1.7;}
.tcard .reach{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-size:13.5px;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--amber);padding-bottom:2px;
  transition:color .25s;
}
.tcard .reach:hover{color:var(--amber-deep);}

/* ---------- our team / crew (paper) ---------- */
.crew{padding:0 0 110px;}
.crew-intro,.team-intro{display:grid;gap:22px;margin-bottom:46px;}
@media(min-width:900px){.crew-intro,.team-intro{grid-template-columns:1fr 1fr;gap:60px;align-items:end;}}
.crew-intro h2,.team-intro h2{font-size:clamp(38px,5.4vw,68px);color:var(--ink);line-height:.95;}
.crew-intro h2 .out,.team-intro h2 .out{color:transparent;-webkit-text-stroke:1.5px var(--amber-deep);}
.crew-intro p,.team-intro p{color:#3A3A33;font-size:16.5px;line-height:1.8;max-width:520px;}
.crew-grid{display:grid;gap:16px;grid-template-columns:1fr;}
@media(min-width:620px){.crew-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.crew-grid{grid-template-columns:repeat(3,1fr);gap:22px;}}

/* complete in-house capability band */
.trades{margin-top:62px;padding-top:42px;border-top:1px solid var(--line-p);}
.trades .label{color:var(--mut-p);}
.trades h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(24px,3vw,38px);color:var(--ink);margin:12px 0 26px;line-height:1.05;}
.trade-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-p);border:1px solid var(--line-p);border-radius:6px;overflow:hidden;}
@media(min-width:640px){.trade-list{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1000px){.trade-list{grid-template-columns:repeat(4,1fr);}}
.trade-list li{background:var(--paper);padding:16px 18px;display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--ink);transition:background .25s;}
.trade-list li:hover{background:var(--paper-2);}
.trade-list li::before{content:"";width:7px;height:7px;background:var(--amber);flex:0 0 auto;transform:rotate(45deg);}
.trades-banner{margin:0 0 26px;border-radius:8px;overflow:hidden;border:1px solid var(--line-p);box-shadow:0 24px 50px -30px rgba(13,15,18,.4);}
.trades-banner img{width:100%;height:auto;display:block;filter:none;}

/* ---------- CTA (amber) ---------- */
.cta{background:var(--amber);color:var(--ink);padding:72px 0;position:relative;overflow:hidden;}
.cta-layout{display:grid;gap:48px;position:relative;z-index:2;}
@media(min-width:980px){.cta-layout{grid-template-columns:1fr 1fr;gap:64px;align-items:center;}}
.cta h2{font-size:clamp(40px,7vw,92px);}
@media(min-width:980px){.cta-left h2{font-size:clamp(40px,5vw,78px);}}
.cta-left p{font-size:18px;max-width:560px;margin-top:20px;color:rgba(13,15,18,.78);font-weight:500;}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px;}
.cta .btn-ghost{border-color:rgba(13,15,18,.4);color:var(--ink);}
.cta .btn-ghost:hover{border-color:var(--ink);background:rgba(13,15,18,.06);color:var(--ink);}
.cta-meta{margin-top:44px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(13,15,18,.6);}

/* ---------- "Let's talk" contact form (dark card on amber) ---------- */
.lt-form{
  background:var(--ink);color:var(--paper);
  border-radius:8px;padding:26px 24px;
  box-shadow:0 40px 80px -40px rgba(13,15,18,.6);
}
@media(min-width:600px){.lt-form{padding:30px 30px;}}
.lt-kicker{font-size:10.5px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--amber);}
.lt-title{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(22px,2.4vw,28px);letter-spacing:.02em;margin:6px 0 4px;color:var(--paper);line-height:1.05;}
.lt-lead{font-size:13.5px;line-height:1.5;color:rgba(244,241,234,.7);margin-bottom:14px;}
.lt-field{display:block;margin-bottom:8px;}
.lt-field span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:5px;}
.lt-field input,.lt-field textarea{
  width:100%;background:rgba(244,241,234,.04);
  border:1px solid rgba(244,241,234,.16);border-radius:4px;
  padding:9px 13px;color:var(--paper);font:inherit;font-size:14.5px;
  transition:border-color .25s,background .25s;
}
.lt-field input::placeholder,.lt-field textarea::placeholder{color:rgba(140,147,160,.7);}
.lt-field input:focus,.lt-field textarea:focus{outline:none;border-color:var(--amber);background:rgba(244,241,234,.07);}
.lt-field textarea{resize:vertical;min-height:62px;}
.lt-submit{width:100%;justify-content:center;margin-top:6px;padding:13px 28px;}
.lt-status{font-size:13.5px;line-height:1.55;color:var(--amber);margin-top:14px;display:none;}
.lt-status.show{display:block;}
.lt-alt{font-size:13px;color:var(--mut);margin-top:14px;text-align:center;}
.lt-alt a{color:var(--paper);border-bottom:1px solid var(--amber);}
.lt-alt a:hover{color:var(--amber);}

/* ---------- footer ---------- */
footer{background:var(--ink);position:relative;overflow:hidden;}
.foot-word{
  font-family:'Anton',sans-serif;text-transform:uppercase;text-align:center;
  font-size:clamp(56px,13vw,190px);line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(244,241,234,.16);
  padding:70px 0 0;user-select:none;white-space:nowrap;
}
.foot-word-sub{
  display:block;font-family:'Archivo',sans-serif;text-transform:uppercase;
  -webkit-text-stroke:0;color:var(--mut);
  font-size:clamp(10px,1.6vw,18px);font-weight:600;
  letter-spacing:.34em;line-height:1;margin-top:14px;padding-left:.34em;
}
.foot-grid{
  display:grid;gap:40px;padding:64px 0 50px;
}
@media(min-width:900px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr;}}
.foot-grid p{color:var(--mut);font-size:14px;line-height:1.7;max-width:340px;}
.foot-h{font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--paper);margin-bottom:18px;}
.foot-grid ul li{margin-bottom:11px;}
.foot-grid ul a,.foot-grid ul button{color:var(--mut);font-size:14.5px;transition:color .25s;letter-spacing:.02em;}
.foot-grid ul a:hover,.foot-grid ul button:hover{color:var(--amber);}
.socials{display:flex;gap:10px;margin-top:26px;}
.socials a{
  width:40px;height:40px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;color:var(--mut);
  transition:color .25s,border-color .25s,transform .3s var(--d);
}
.socials a:hover{color:var(--amber);border-color:var(--amber);transform:translateY(-3px);}
.socials svg{width:17px;height:17px;}
.foot-bottom{
  border-top:1px solid var(--line);padding:22px 0;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);
}

/* ---------- modals ---------- */
.modal{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  background:rgba(8,9,12,.94);padding:5vw;
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;
}
.modal.open{opacity:1;visibility:visible;}
.modal .x{
  position:absolute;top:18px;right:22px;font-size:34px;line-height:1;color:var(--paper);
  width:52px;height:52px;display:grid;place-items:center;
}
.modal img{max-width:100%;max-height:82vh;border-radius:6px;}
.lb-prev,.lb-next{
  position:absolute;top:50%;transform:translateY(-50%);
  /* solid dark disc so the arrow stays readable over bright photos */
  background:rgba(13,15,18,.55);border:1px solid rgba(244,241,234,.32);
  border-radius:50%;width:48px;height:48px;display:grid;place-items:center;
  font-size:22px;line-height:1;color:var(--paper);cursor:pointer;
  transition:background .2s,border-color .2s;z-index:3;
}
.lb-prev:hover,.lb-next:hover{background:rgba(13,15,18,.85);border-color:var(--amber);}
.lb-prev:disabled,.lb-next:disabled{opacity:.28;cursor:default;}
.lb-prev:disabled:hover,.lb-next:disabled:hover{background:rgba(13,15,18,.55);border-color:rgba(244,241,234,.32);}
.lb-prev{left:16px;} .lb-next{right:16px;}
@media(max-width:600px){
  .lb-prev,.lb-next{width:44px;height:44px;background:rgba(13,15,18,.72);}
  .lb-prev{left:8px;} .lb-next{right:8px;}
  /* close button gets a matching disc so it reads over the photo too */
  .modal .x{background:rgba(13,15,18,.72);border-radius:50%;top:14px;right:14px;width:46px;height:46px;}
}
.lb-counter{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:.14em;color:rgba(244,241,234,.5);text-transform:uppercase;
  pointer-events:none;
}
.pj-count{
  position:absolute;top:44px;left:12px;z-index:2;
  display:inline-flex;align-items:center;gap:5px;
  font-size:10px;letter-spacing:.12em;color:rgba(244,241,234,.82);
  background:rgba(13,15,18,.55);border:1px solid rgba(244,241,234,.18);
  border-radius:20px;padding:3px 9px;text-transform:uppercase;
}
.pj-count::before{
  content:"";width:10px;height:9px;border:1.4px solid currentColor;border-radius:2px;
  box-shadow:0 -3px 0 -1.4px currentColor;
}
#lm .card{
  background:#fff;border-radius:10px;padding:14px;max-width:880px;width:100%;
  transform:translateY(16px);transition:transform .45s var(--d);
  box-shadow:0 40px 90px -20px rgba(0,0,0,.85);
}
#lm.open .card{transform:none;}
#lm .card img{width:100%;border-radius:6px;max-height:none;}
#lm .cap{margin-top:12px;text-align:center;color:#6B6B63;font-size:13px;padding-bottom:6px;}

/* back-to-top tick */
#top-tick{
  position:fixed;right:22px;bottom:22px;z-index:50;
  width:46px;height:46px;border:1px solid var(--line);border-radius:50%;
  background:rgba(13,15,18,.7);backdrop-filter:blur(8px);color:var(--paper);
  display:grid;place-items:center;font-size:18px;
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s,border-color .25s;
}
#top-tick.on{opacity:1;visibility:visible;}
#top-tick:hover{border-color:var(--amber);color:var(--amber);}

/* ---------- consultancies band (paper) ---------- */
.consult{margin-top:64px;padding-top:40px;border-top:1px solid var(--line-p);}
.consult .label{color:var(--mut-p);}
.consult h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(24px,3vw,38px);color:var(--ink);margin:12px 0 8px;line-height:1.05;}
.consult p{color:var(--mut-p);font-size:15px;max-width:560px;line-height:1.7;}
.consult-list{margin-top:28px;display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-p);border:1px solid var(--line-p);border-radius:6px;overflow:hidden;}
@media(min-width:640px){.consult-list{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1000px){.consult-list{grid-template-columns:repeat(3,1fr);}}
.consult-list li{background:var(--paper);padding:16px 18px;display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--ink);transition:background .25s;}
.consult-list li:hover{background:var(--paper-2);}
.consult-list li::before{content:"";width:7px;height:7px;background:var(--amber);flex:0 0 auto;transform:rotate(45deg);}
.consult-list li.more{color:var(--mut-p);font-style:italic;}
.consult-list li.more::before{background:transparent;border:1px solid var(--amber);}

/* ---------- gallery CTA band (full-bleed photo) ---------- */
.gallery-cta{
  position:relative;margin-top:64px;display:flex;gap:24px;
  align-items:stretch;justify-content:space-between;
  min-height:320px;padding:40px;border-radius:12px;overflow:hidden;
  color:var(--paper);transition:transform .5s var(--d),box-shadow .5s var(--d);
}
.gallery-cta:hover{transform:translateY(-5px);box-shadow:0 40px 80px -34px rgba(13,15,18,.7);}
.gcta-bg{position:absolute;inset:0;z-index:0;}
.gcta-bg img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--d);}
.gallery-cta:hover .gcta-bg img{transform:scale(1.07);}
.gcta-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(13,15,18,.94) 0%,rgba(13,15,18,.66) 46%,rgba(13,15,18,.22) 100%);}
.gcta-bg::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(rgba(244,241,234,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(244,241,234,.05) 1px,transparent 1px);
  background-size:64px 64px;}
.gcta-text{position:relative;z-index:2;align-self:flex-end;max-width:70%;}
.gcta-text .label{color:var(--amber);}
.gcta-h{display:block;font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(32px,5.4vw,62px);line-height:.95;margin-top:12px;}
.gcta-h .out{color:transparent;-webkit-text-stroke:1.5px var(--amber);}
.gcta-go{position:relative;z-index:2;flex:0 0 auto;align-self:center;
  width:66px;height:66px;border-radius:50%;background:var(--amber);color:var(--ink);
  display:grid;place-items:center;transition:transform .45s var(--d),background .25s;}
.gallery-cta:hover .gcta-go{transform:translateX(10px) scale(1.06);}
.gcta-go svg{width:26px;height:26px;}
@media(max-width:560px){.gcta-text{max-width:100%;}.gcta-go{display:none;}}

/* ---------- gallery page ---------- */
.gal-hero{padding:130px 0 40px;}
.gal-hero h1{font-size:clamp(48px,9vw,120px);}
.gal-hero h1 .out{color:transparent;-webkit-text-stroke:2px var(--amber);}
.gal-hero p{color:var(--mut);font-size:17px;max-width:560px;margin-top:18px;line-height:1.7;}
/* padding-top/bottom only: keep .wrap's horizontal gutter so the grid and
   section headers don't bleed to the screen edge on mobile. */
.gal-cat{padding-top:54px;padding-bottom:10px;}
.gal-cat .sec-head{margin-bottom:32px;}
/* true masonry: JS packs each tile into the shortest column (absolute positioning) */
.gal-grid{position:relative;}
.gal-item{position:absolute;top:0;left:0;border-radius:6px;overflow:hidden;background:var(--ink-3);cursor:zoom-in;display:block;padding:0;}
.gal-item img{width:100%;display:block;transition:transform .9s var(--d);}
.gal-item:hover img{transform:scale(1.05);}
.gal-item figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:32px 14px 12px;text-align:left;
  font-size:12.5px;color:var(--paper);
  background:linear-gradient(180deg,transparent,rgba(13,15,18,.82));
  opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s var(--d);
}
.gal-item:hover figcaption{opacity:1;transform:none;}
/* touch / narrow screens can't hover: show captions so descriptions aren't hidden */
@media(hover:none),(max-width:768px){.gal-item figcaption{opacity:1;transform:none;}}
.gal-back{display:inline-flex;align-items:center;gap:10px;color:var(--amber);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-top:30px;}