/* ============================================================
   TERRA FIRMA / CONSTRUCTION ASSOCIATES — design system
   Editorial · drafted · solid ground
   ============================================================ */

:root{
  --ink:        #100F0C;
  --ink-2:      #181612;
  --ink-3:      #221F19;
  --bone:       #F2EDE3;
  --bone-2:     #E8E1D3;
  --paper:      #F7F3EA;
  --red:        #DE2316;
  --red-deep:   #B81A10;
  --grey:       #97907F;
  --grey-dark:  #5C564B;
  --line-ink:   rgba(16,15,12,.16);
  --line-bone:  rgba(242,237,227,.16);

  --font-d: "Archivo", sans-serif;          /* display */
  --font-s: "Fraunces", serif;              /* editorial serif */
  --font-m: "IBM Plex Mono", monospace;     /* drafting labels */

  --gut: clamp(20px, 4vw, 64px);
  --max: 1680px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:auto; overflow-x:clip; }
html, body{ background:var(--ink); }
body{
  font-family:var(--font-d);
  color:var(--bone);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.theme-bone{ background:var(--bone); color:var(--ink); }

::selection{ background:var(--red); color:var(--bone); }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* ---------- grain (static — animated full-screen noise costs too much repaint) ---------- */
.grain{
  position:fixed; inset:0; z-index:2000; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.04;
}

/* ---------- cursor ---------- */
.cursor-dot, .cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; z-index:3000; }
.cursor-dot{ width:6px; height:6px; background:var(--red); transform:translate(-50%,-50%); }
.cursor-ring{
  width:34px; height:34px; border:1px solid rgba(222,35,22,.55);
  transform:translate(-50%,-50%); transition:width .25s, height .25s, border-color .25s;
  display:flex; align-items:center; justify-content:center;
}
.cursor-ring .cursor-label{
  font:500 9px/1 var(--font-m); letter-spacing:.14em; color:var(--bone);
  opacity:0; transition:opacity .2s; text-transform:uppercase; white-space:nowrap;
}
.cursor-ring.is-active{ width:72px; height:72px; border-color:var(--red); background:rgba(16,15,12,.7); }
.cursor-ring.is-active .cursor-label{ opacity:1; }
/* hide the custom cursor while actively dragging a before/after slider — the
   "Drag" ring obscures the image; it returns on release (body.is-dragging off) */
body.is-dragging .cursor-dot,
body.is-dragging .cursor-ring{ opacity:0; transition:opacity .15s ease; }
@media (hover:none){ .cursor-dot,.cursor-ring{ display:none; } }

/* ---------- preloader ---------- */
.preloader{
  position:fixed; inset:0; z-index:5000; background:var(--ink);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:26px;
}
.preloader .pl-mark{ width:min(340px, 62vw); }
.pl-logo{ width:100%; display:block; opacity:0; transform:scale(.94); filter:blur(10px); }
.preloader .pl-tag{ font:italic 400 clamp(13px,1.6vw,17px)/1 var(--font-s); color:var(--grey); opacity:0; }
.preloader .pl-count{
  position:absolute; right:var(--gut); bottom:calc(var(--gut) - 6px);
  font:500 12px/1 var(--font-m); letter-spacing:.18em; color:var(--grey);
}
.preloader .pl-line{ position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--red); }

/* ---------- header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:stretch; justify-content:space-between;
  padding:0 var(--gut); height:74px;
  transition:transform .45s cubic-bezier(.65,0,.35,1), background .35s, border-color .35s;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{ background:rgba(16,15,12,.96); border-bottom-color:var(--line-bone); }
body.theme-bone .site-header.is-scrolled{ background:rgba(242,237,227,.97); border-bottom-color:var(--line-ink); }
.site-header.is-hidden{ transform:translateY(-100%); }

.brand{ display:flex; align-items:center; gap:14px; }
.brand-logo{ height:68px; width:auto; display:block; }
.brand-tag{ font:italic 400 13.5px/1.35 var(--font-s); color:var(--grey); }

.site-nav{ display:flex; align-items:center; gap:clamp(18px,2.6vw,40px); }
.site-nav a{
  position:relative; font:500 12px/1 var(--font-m); letter-spacing:.16em; text-transform:uppercase;
  padding:6px 0; opacity:.78; transition:opacity .25s;
}
.site-nav a:hover{ opacity:1; }
.site-nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--red); transform:scaleX(0); transform-origin:right;
  transition:transform .35s cubic-bezier(.65,0,.35,1);
}
.site-nav a:hover::after, .site-nav a.is-current::after{ transform:scaleX(1); transform-origin:left; }
.site-nav a.is-current{ opacity:1; }
.nav-cta{ display:flex; align-items:center; gap:8px; }
.nav-cta .sq{ width:7px; height:7px; background:var(--red); }

.nav-burger{ display:none; flex-direction:column; gap:5px; padding:10px 0; }
.nav-burger span{ display:block; width:26px; height:2px; background:currentColor; transition:transform .3s, opacity .3s; }

/* mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:1500; background:var(--ink); color:var(--bone);
  display:flex; flex-direction:column; justify-content:center; padding:0 var(--gut);
  clip-path:inset(0 0 100% 0); transition:clip-path .6s cubic-bezier(.76,0,.24,1);
}
.mobile-menu.is-open{ clip-path:inset(0 0 0% 0); }
.mobile-menu a{
  font:800 clamp(34px,9vw,64px)/1.2 var(--font-d); text-transform:uppercase;
  display:flex; align-items:baseline; gap:16px; padding:10px 0;
  border-bottom:1px solid var(--line-bone);
}
.mobile-menu a i{ font:italic 400 16px var(--font-s); color:var(--red); }
.mobile-menu .mm-foot{ margin-top:36px; font:400 12px/1.8 var(--font-m); color:var(--grey); letter-spacing:.08em; }
.mm-close{ position:absolute; top:22px; right:var(--gut); font:500 12px var(--font-m); letter-spacing:.2em; }

/* ---------- shared layout helpers ---------- */
.wrap{ max-width:var(--max); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut); }
.section{ position:relative; }

.micro{
  display:flex; align-items:center; gap:12px;
  font:500 11px/1 var(--font-m); letter-spacing:.22em; text-transform:uppercase; color:var(--grey);
}
.micro::before{ content:""; width:34px; height:1px; background:var(--red); }
.micro.no-rule::before{ display:none; }

.display{
  font:900 clamp(38px, 6.2vw, 96px)/.94 var(--font-d);
  text-transform:uppercase; letter-spacing:-.015em;
}
.display .it{
  font:italic 300 .82em/1 var(--font-s); text-transform:none; letter-spacing:0;
}
.display .outline{
  color:transparent;
  -webkit-text-stroke:1.5px currentColor;
}
.t-red{ color:var(--red); }

/* careers page — oversized headings dialed back to a normal scale */
body.careers .page-hero .display{ font-size:clamp(30px,4.4vw,60px); }
body.careers .role-row h4{ font-size:clamp(19px,2.6vw,34px); }

.lede{ font:italic 300 clamp(20px,2.6vw,33px)/1.45 var(--font-s); }
.body-col{ font:400 15px/1.85 var(--font-d); color:var(--grey); max-width:46ch; }
body.theme-bone .body-col{ color:var(--grey-dark); }

/* arrow link */
.alink{
  display:inline-flex; align-items:center; gap:14px;
  font:500 12px/1 var(--font-m); letter-spacing:.2em; text-transform:uppercase;
  padding-bottom:8px; border-bottom:1px solid currentColor; transition:gap .3s;
}
.alink svg{ width:18px; height:10px; transition:transform .3s; }
.alink:hover{ gap:22px; } .alink:hover svg{ transform:translateX(4px); }
.alink.red{ color:var(--red); border-color:var(--red); }

/* reveal primitives — hidden states apply ONLY under html.js-anim (added by
   main.js); without JS every element below stays fully visible */
.r-line{ overflow:hidden; display:block; }
.r-line > span{ display:block; }
.js-anim .r-line > span{ transform:translateY(110%); }
.js-anim .r-fade{ opacity:0; transform:translateY(36px); }
.r-img{ position:relative; overflow:hidden; }
.js-anim .r-img::after{
  content:""; position:absolute; inset:0; background:var(--ink); transform:scaleY(1);
  transform-origin:top; z-index:2;
}
body.theme-bone .r-img::after{ background:var(--bone); }
.js-anim .r-img img{ transform:scale(1.18); }

/* ============ HERO ============ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding:110px var(--gut) 0; overflow:hidden;
}
.hero-grid-lines{ position:absolute; inset:0; pointer-events:none; opacity:.5; }
.hero-grid-lines i{ position:absolute; top:0; bottom:0; width:1px; background:var(--line-bone); }
.hero-grid-lines i:nth-child(1){ left:25%; } .hero-grid-lines i:nth-child(2){ left:50%; }
.hero-grid-lines i:nth-child(3){ left:75%; }

/* a true 16:9 box — the WHOLE video frame is visible while small; the scroll
   scrub grows the box down-left (top-right anchored) until it is full-bleed */
.hero{ --hvw: clamp(380px, 40vw, 640px); }
.hero-video{
  position:absolute; top:13svh; right:var(--gut); z-index:6;
  width:var(--hvw); aspect-ratio:16/9; overflow:hidden;
  background:#000 url("../media/hero-poster.jpg") center/cover no-repeat;
  will-change:width, height;
}
.hero-video video{ width:100%; height:100%; object-fit:cover; pointer-events:none; }
/* never show WebKit's native play overlay on the ambient loop */
.hero-video video::-webkit-media-controls,
.hero-video video::-webkit-media-controls-start-playback-button{
  display:none !important; -webkit-appearance:none; opacity:0;
}
/* poster shield: covers the video (and any native play glyph) until the
   'playing' event fires, then dissolves */
.hv-shield{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:#000 url("../media/hero-poster.jpg") center/cover no-repeat;
  opacity:1; transition:opacity .6s ease;
}
.hv-shield.is-off{ opacity:0; }

/* the strip beneath the small video: tag, work link, coordinates */
.hero-under{
  position:absolute; right:var(--gut); top:calc(13svh + var(--hvw) * 0.5625 + 26px);
  width:var(--hvw); z-index:5;
  display:flex; flex-direction:column; align-items:flex-start; gap:22px;
}
.hv-tag{
  display:flex; align-items:center; gap:10px;
  font:400 10px/1 var(--font-m); letter-spacing:.24em; text-transform:uppercase; color:var(--grey);
}
.hv-tag::before{ content:""; width:7px; height:7px; background:var(--red); }

.hero-type{ position:relative; z-index:5; width:100%; padding-bottom:12vh; }
/* type column stops short of the video window (window starts at 56%) */
@media (min-width:861px){
  .hero-type{ max-width:50%; }
}
.hero-kicker{ margin-bottom:3.2vh; }
.hero-h1{
  font:900 clamp(46px, 6.6vw, 104px)/.9 var(--font-d);
  text-transform:uppercase; letter-spacing:-.02em;
}
/* vertical-only mask for the slide-up reveal — generous horizontal bleed so
   wide glyphs (the D, the full stop) are never clipped */
.hero-h1 .row{ display:block; width:max-content; clip-path:inset(-0.3em -2em 0 -0.15em); }
.hero-h1 .row > span{ display:inline-block; }
.js-anim .hero-h1 .row > span{ transform:translateY(112%); }
.hero-h1 .row.r2{ margin-left:clamp(28px, 4.6vw, 76px); }
.hero-sub{
  display:flex; flex-direction:column; align-items:flex-start; gap:30px; margin-top:5vh;
}
.hero-sub .lede{ max-width:34ch; color:var(--bone); }
.hero-sub .lede em{ color:var(--red); font-style:italic; }

.hero-coords{
  display:flex; align-items:center; gap:14px;
  font:400 10px/1 var(--font-m); letter-spacing:.3em; text-transform:uppercase; color:var(--grey);
}
.hero-coords::before{ content:""; width:34px; height:1px; background:var(--red); }

.hero-scroll{
  position:absolute; bottom:30px; right:var(--gut);
  display:flex; flex-direction:row; align-items:center; gap:14px;
  font:400 10px/1 var(--font-m); letter-spacing:.3em; color:var(--grey); text-transform:uppercase;
}
.hero-scroll i{ width:56px; height:1px; background:var(--grey); position:relative; overflow:hidden; }
.hero-scroll i::after{
  content:""; position:absolute; left:-100%; top:0; width:100%; height:100%;
  background:var(--red); animation:scrollcue 1.8s cubic-bezier(.76,0,.24,1) infinite;
}
@keyframes scrollcue{ 0%{left:-100%} 55%{left:0} 100%{left:100%} }

.hero-cross{ position:absolute; width:18px; height:18px; pointer-events:none; opacity:.9; }
.hero-cross::before, .hero-cross::after{ content:""; position:absolute; background:var(--red); }
.hero-cross::before{ left:50%; top:0; bottom:0; width:1px; }
.hero-cross::after{ top:50%; left:0; right:0; height:1px; }

/* ============ MARQUEE ============ */
.marquee{
  border-top:1px solid var(--line-bone); border-bottom:1px solid var(--line-bone);
  padding:14px 0; overflow:hidden; white-space:nowrap; position:relative;
}
body.theme-bone .marquee{ border-color:var(--line-ink); }
.marquee-track{ display:inline-flex; gap:0; will-change:transform; }
.marquee-track span{
  font:500 clamp(15px,1.9vw,26px)/1 var(--font-d); text-transform:uppercase; letter-spacing:.08em;
  padding-right:.7em;
}
.marquee-track span.o{ color:transparent; -webkit-text-stroke:.6px var(--bone); }
body.theme-bone .marquee-track span.o{ -webkit-text-stroke:.6px var(--ink); }
.marquee-track span.dot{ color:var(--red); }

/* ============ section: manifesto (bone) ============ */
.sec-bone{ background:var(--bone); color:var(--ink); }
.sec-ink{ background:var(--ink); color:var(--bone); }

.manifesto{ padding:clamp(90px,12vh,160px) 0; }
.manifesto-grid{ display:grid; grid-template-columns:1fr 1.35fr; gap:clamp(32px,6vw,110px); align-items:start; }
.manifesto .lede{ margin-top:26px; font-size:clamp(24px,3.2vw,42px); line-height:1.35; }
.manifesto .lede .rd{ color:var(--red); }
.manifesto-right{ padding-top:clamp(20px,4vh,60px); display:flex; flex-direction:column; gap:28px; }

.stats{ margin-top:clamp(60px,9vh,110px); border-top:1px solid var(--line-ink); display:grid; grid-template-columns:repeat(4,1fr); }
.stat{
  padding:34px clamp(12px,2vw,34px) 8px 0; border-right:1px solid var(--line-ink); position:relative;
}
.stat:last-child{ border-right:0; }
.stat .num{
  font:800 clamp(30px,3.8vw,58px)/1 var(--font-d); letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.stat .num sup{ font:italic 300 .42em var(--font-s); color:var(--red); margin-left:2px; }
.stat .lbl{ margin-top:14px; font:500 10.5px/1.6 var(--font-m); letter-spacing:.2em; text-transform:uppercase; color:var(--grey-dark); }

/* ============ verticals ============ */
.verticals{ padding:clamp(90px,13vh,170px) 0 0; }
.vertical-row{
  display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(16px,2vw,32px);
  padding:clamp(60px,9vh,120px) 0; border-top:1px solid var(--line-bone); align-items:center;
}
.vertical-row .vr-idx{
  grid-column:1 / span 2;
  font:300 clamp(34px,4vw,64px)/1 var(--font-d); color:transparent;
  -webkit-text-stroke:1px var(--grey); align-self:start; font-variant-numeric:tabular-nums;
}
.vertical-row .vr-body{ grid-column:3 / span 4; display:flex; flex-direction:column; gap:22px; align-items:flex-start; }
.vertical-row .vr-body h3{
  font:800 clamp(26px,3.2vw,48px)/.98 var(--font-d); text-transform:uppercase; letter-spacing:-.015em;
}
.vertical-row .vr-body h3 .it{ display:block; font:italic 300 .5em/1.2 var(--font-s); text-transform:none; color:var(--grey); }
.vertical-row .vr-media{ grid-column:8 / span 5; position:relative; }
.vertical-row.alt .vr-body{ grid-column:7 / span 4; order:3; }
.vertical-row.alt .vr-media{ grid-column:2 / span 5; order:2; }
.vertical-row.alt .vr-idx{ order:1; grid-column:1 / span 1; }
.vr-media .frame{ overflow:hidden; position:relative; aspect-ratio:4/3; }
.vr-media .frame img{ width:100%; height:100%; object-fit:cover; will-change:transform; transform:scale(1.12); }

/* hotspot */
.hotspot{ position:absolute; z-index:6; }
.hotspot .hs-pin{
  width:14px; height:14px; border:1px solid var(--bone); background:rgba(16,15,12,.4);
  position:relative; cursor:pointer; transition:background .3s;
}
.hotspot .hs-pin::after{ content:""; position:absolute; inset:4px; background:var(--red); }
.hotspot .hs-pin::before{
  content:""; position:absolute; inset:-7px; border:1px solid rgba(222,35,22,.5);
  animation:pinpulse 2.2s ease-out infinite;
}
@keyframes pinpulse{ 0%{transform:scale(.6); opacity:1} 100%{transform:scale(1.5); opacity:0} }
.hotspot .hs-card{
  position:absolute; left:24px; top:-10px; min-width:200px;
  background:rgba(16,15,12,.94); border-left:2px solid var(--red);
  color:var(--bone); padding:14px 18px; opacity:0; transform:translateX(-8px);
  transition:opacity .3s, transform .3s; pointer-events:none;
  font:400 11px/1.75 var(--font-m); letter-spacing:.06em;
}
.hotspot .hs-card b{ display:block; font-weight:600; text-transform:uppercase; letter-spacing:.14em; }
.hotspot:hover .hs-card, .hotspot.is-open .hs-card{ opacity:1; transform:translateX(0); }
.hotspot.flip .hs-card{ left:auto; right:24px; transform:translateX(8px); }
.hotspot.flip:hover .hs-card{ transform:translateX(0); }

/* ============ Architectural Digest — AD PRO Directory feature ============
   A magazine interlude: warm gallery-cream, the official AD monogram SVG,
   EB Garamond (closest free match to AD's AdobeGaramondPro brand serif),
   film-strip of profile photography. Deliberate break from ink/bone. */
.adp{
  --adp-cream:#F3F0E9; --adp-ink:#141414; --adp-grey:#5d594f; --adp-line:rgba(20,20,20,.16);
  background:var(--adp-cream); color:var(--adp-ink);
}
.adp-top{
  display:grid; grid-template-columns:minmax(340px,31%) 1fr clamp(46px,4vw,64px);
  min-height:min(86vh,860px);
}
.adp-left{
  padding:clamp(34px,3.6vw,64px) clamp(28px,3vw,56px) clamp(34px,3.6vw,64px) var(--gut);
  display:flex; flex-direction:column; align-items:flex-start;
}
.adp-brand{ color:var(--adp-ink); }
.adp-brand svg{ height:clamp(56px,5.4vw,92px); width:auto; display:block; fill:currentColor; }
.adp-kicker{
  margin-top:clamp(18px,2.4vh,30px);
  font:600 10.5px/1.8 var(--font-d); letter-spacing:.26em; text-transform:uppercase; color:#3a372f;
}
.adp-dash{ width:30px; height:1px; background:var(--adp-ink); margin:clamp(20px,3vh,34px) 0; }
.adp-title{
  font:500 clamp(38px,3.8vw,68px)/1.04 "EB Garamond", Garamond, serif;
  letter-spacing:.002em;
}
.adp-tag{
  margin-top:clamp(16px,2.4vh,26px);
  font:italic 400 clamp(20px,1.8vw,28px)/1.4 "EB Garamond", Garamond, serif;
}
.adp-body{
  margin-top:clamp(20px,3vh,32px); max-width:36ch;
  font:400 14.5px/1.85 var(--font-d); color:#403d35;
}
.adp-link{
  display:inline-flex; align-items:center; gap:14px; margin-top:clamp(26px,4vh,42px);
  font:700 11px/1 var(--font-d); letter-spacing:.24em; text-transform:uppercase; color:var(--adp-ink);
  padding-bottom:8px; border-bottom:1px solid currentColor; transition:gap .3s;
}
.adp-link svg{ width:18px; height:10px; }
.adp-link:hover{ gap:22px; }
.adp-link-light{ color:var(--adp-cream); margin-top:0; }

.adp-hero{ position:relative; overflow:hidden; }
.adp-hero img{ width:100%; height:100%; object-fit:cover; }
.adp-hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(205deg, rgba(8,8,8,.58) 0%, rgba(8,8,8,.18) 34%, transparent 55%);
}
.adp-quote{
  position:absolute; top:clamp(24px,5vh,52px); right:clamp(22px,3vw,52px); z-index:2;
  max-width:300px;
}
.adp-quote p{
  font:italic 500 clamp(19px,1.7vw,26px)/1.45 "EB Garamond", Garamond, serif; color:var(--adp-cream);
}
.adp-quote cite{
  display:block; margin-top:16px; font:600 10px/1 var(--font-d);
  letter-spacing:.26em; text-transform:uppercase; color:rgba(243,240,233,.85); font-style:normal;
}
.adp-rail{
  display:flex; align-items:center; justify-content:center;
  border-left:1px solid var(--adp-line);
}
.adp-rail span{
  writing-mode:vertical-rl; font:600 10px/1 var(--font-d);
  letter-spacing:.32em; text-transform:uppercase; color:#6a665b;
}

.adp-bottom{
  display:grid; grid-template-columns:clamp(230px,18.5%,300px) 1fr clamp(240px,19.5%,320px);
  min-height:clamp(280px,36vh,360px); border-top:1px solid var(--adp-line);
}
.adp-label{
  font:700 10px/1 var(--font-d); letter-spacing:.28em; text-transform:uppercase; color:rgba(243,240,233,.75);
}
.adp-label-dark{ color:#6a665b; }
.adp-dark{
  background:#121110; color:var(--adp-cream);
  padding:clamp(26px,2.6vw,38px); display:flex; flex-direction:column; justify-content:space-between; gap:20px;
}
.adp-dark .adp-link-light{ margin-bottom:2px; }
.adp-dark-copy{
  font:400 clamp(17px,1.3vw,20px)/1.55 "EB Garamond", Garamond, serif;
  color:#efece4;
}
.adp-strip{ overflow:hidden; position:relative; background:var(--adp-cream); display:flex; flex-direction:column; }
.adp-track{
  display:flex; gap:6px; flex:1; min-height:0; will-change:transform; padding:6px 0 0;
}
/* manual scrubber under the strip — drag to move, release to resume drift */
.adp-scrub{
  position:relative; height:26px; flex:0 0 auto; cursor:grab; touch-action:none;
}
.adp-scrub::before{
  content:""; position:absolute; left:14px; right:14px; top:50%; height:1px;
  background:rgba(20,20,20,.22);
}
.adp-scrub-thumb{
  position:absolute; top:50%; left:14px; width:64px; height:3px; margin-top:-1px;
  background:#141414; will-change:transform;
}
.adp-scrub:active{ cursor:grabbing; }
.adp-cell{
  flex:0 0 auto; width:clamp(220px,19vw,330px); height:100%;
  padding:0; border:0; background:none; cursor:zoom-in; overflow:hidden;
}
.adp-cell img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.adp-cell:hover img{ transform:scale(1.05); }
.adp-pub{
  padding:clamp(22px,2.4vw,34px); border-left:1px solid var(--adp-line);
  display:flex; flex-direction:column; justify-content:space-between; gap:14px; background:var(--adp-cream);
}
.adp-pub-name{
  font:400 clamp(17px,1.3vw,20px)/1.45 "EB Garamond", Garamond, serif;
}
.adp-pub-thumb{ position:relative; display:block; overflow:hidden; }
.adp-pub-thumb img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; filter:brightness(.62); }
.adp-thumb-mark{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff;
}
.adp-thumb-mark svg{ height:30px; width:auto; fill:currentColor; }
.adp-pub .adp-link{ margin-top:0; }

.adp-divider{ height:clamp(12px,1.8vh,18px); background:var(--ink); }

/* expand-in-place popup */
.adp-pop{ position:fixed; inset:0; z-index:4200; }
.adp-pop-bg{ position:absolute; inset:0; background:rgba(10,10,9,.9); opacity:0; cursor:zoom-out; }
.adp-pop img{ position:fixed; object-fit:cover; z-index:2; }
.adp-pop-x{
  position:fixed; top:24px; right:30px; z-index:3; opacity:0;
  font:600 12px/1 var(--font-m); letter-spacing:.22em; text-transform:uppercase;
  color:var(--adp-cream); cursor:pointer;
}

@media (max-width:1100px){
  .adp-top{ grid-template-columns:minmax(300px,42%) 1fr; }
  .adp-rail{ display:none; }
  .adp-bottom{ grid-template-columns:clamp(200px,26%,280px) 1fr; height:clamp(240px,30vh,300px); }
  .adp-pub{ display:none; }
}
@media (max-width:860px){
  .adp-top{ grid-template-columns:1fr; min-height:0; }
  .adp-left{ padding:clamp(30px,6vw,44px) var(--gut); }
  .adp-hero{ aspect-ratio:4/3; }
  .adp-bottom{ grid-template-columns:1fr; height:auto; }
  .adp-dark{ padding:26px var(--gut); }
  .adp-strip{ height:220px; }
}

/* ============ sketch slider ============ */
.sketchsec{ padding:clamp(90px,13vh,170px) 0; }
.sketchsec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:clamp(40px,7vh,80px); }
.sketch-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(20px,3vw,48px); align-items:start; }
.sketch-aside{ display:flex; flex-direction:column; gap:26px; padding-top:clamp(20px,5vh,70px); }

.basld{ position:relative; overflow:hidden; user-select:none; -webkit-user-select:none; touch-action:pan-y; }
.basld *{ user-select:none; -webkit-user-select:none; }
.basld img{ -webkit-user-drag:none; user-drag:none; }
/* while a slider drag is live, nothing on the page may be text-selected */
body.is-dragging, body.is-dragging *{ user-select:none !important; -webkit-user-select:none !important; cursor:ew-resize; }
.basld img{ width:100%; height:100%; object-fit:cover; pointer-events:none; }
.basld .ba-after{ position:relative; }
.basld .ba-before{
  position:absolute; inset:0; overflow:hidden; z-index:3;
  clip-path:inset(0 calc(100% - var(--cut,55%)) 0 0);
}
.basld .ba-before img{ position:absolute; inset:0; }
.basld .ba-bar{
  position:absolute; top:0; bottom:0; left:var(--cut,55%); width:2px; background:var(--red); z-index:5;
  transform:translateX(-1px); cursor:ew-resize;
}
.basld .ba-bar::before{
  content:"◂ ▸"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:var(--red); color:#fff; font:600 10px/1 var(--font-m); letter-spacing:.1em;
  padding:9px 10px; white-space:nowrap;
}
.basld .ba-tag{
  position:absolute; z-index:6; top:16px; font:500 10px/1 var(--font-m); letter-spacing:.22em;
  text-transform:uppercase; padding:7px 11px; pointer-events:none;
}
.basld .ba-tag.l{ left:16px; background:var(--paper); color:var(--ink); border:1px solid var(--line-ink); }
.basld .ba-tag.r{ right:16px; background:var(--ink); color:var(--bone); }
.basld.tall{ aspect-ratio:2/3; max-height:78vh; }
.basld.boxy{ aspect-ratio:4/3; }

/* ============ works rail — auto-drifting strip ============ */
.works{ overflow:hidden; padding:clamp(70px,10vh,120px) 0; }
.works-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:clamp(36px,5vh,58px); }
.works-head .alink{ margin-bottom:10px; }
.works-rail{ overflow:hidden; }
.works-track{ display:flex; gap:clamp(24px,3.4vw,60px); will-change:transform; align-items:center; }
/* scrubber under the strip — drag to browse, release to resume the drift */
.works-scrub{ position:relative; height:36px; margin-top:clamp(26px,4vh,40px); cursor:grab; touch-action:none; }
.works-scrub::before{
  content:""; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px;
  background:rgba(242,237,227,.18);
}
.works-scrub-thumb{
  position:absolute; top:50%; left:0; width:96px; height:6px; margin-top:-3px;
  background:var(--bone); will-change:transform;
}
.works-scrub:hover .works-scrub-thumb{ background:var(--red); }
.works-scrub:active{ cursor:grabbing; }
.work-card{ flex:0 0 auto; width:clamp(300px,30vw,480px); position:relative; }
.work-card:nth-child(odd){ margin-top:8vh; }
.work-card .wc-img{ overflow:hidden; aspect-ratio:3/4; position:relative; }
.work-card .wc-img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.22,1,.36,1); transform:scale(1.04); }
.work-card:hover .wc-img img{ transform:scale(1.12); }
.work-card .wc-idx{
  position:absolute; top:-22px; left:-10px; z-index:4;
  font:300 64px/1 var(--font-d); color:transparent; -webkit-text-stroke:1px var(--grey);
}
.work-card .wc-meta{ display:flex; justify-content:space-between; align-items:baseline; margin-top:16px; gap:14px; }
.work-card .wc-meta h4{ font:700 17px/1.3 var(--font-d); text-transform:uppercase; letter-spacing:.02em; }
.work-card .wc-meta span{ font:400 11px/1 var(--font-m); letter-spacing:.14em; color:var(--grey); white-space:nowrap; }
.work-card .wc-cat{
  position:absolute; top:14px; right:14px; z-index:4; background:var(--red); color:#fff;
  font:600 9.5px/1 var(--font-m); letter-spacing:.18em; text-transform:uppercase; padding:6px 9px;
}

/* ============ clients — drafting-sheet logo wall, always visible ============ */
.clients{ padding:clamp(90px,13vh,160px) 0; }
.client-wall{
  margin-top:clamp(40px,6vh,70px);
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line-ink); border:1px solid var(--line-ink);
}
.client-tile{
  background:#FDFCFA; min-height:188px; padding:30px 22px 22px; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
}
.client-tile .ct-idx{
  position:absolute; top:10px; left:12px;
  font:400 9.5px/1 var(--font-m); letter-spacing:.14em; color:var(--grey);
}
.client-tile .ct-logo{
  height:74px; display:flex; align-items:center; justify-content:center;
}
.client-tile .ct-logo img{
  max-height:74px; max-width:150px; object-fit:contain;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.client-tile:hover .ct-logo img{ transform:scale(1.07); }
.client-tile .ct-name{
  font:600 11px/1.4 var(--font-m); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); text-align:center;
}
.client-tile .ct-sec{
  font:italic 300 12px/1.3 var(--font-s); color:var(--grey-dark); text-align:center; margin-top:-12px;
}
.client-tile::after{
  content:""; position:absolute; inset:0; border:1px solid transparent; pointer-events:none;
  transition:border-color .3s;
}
.client-tile:hover::after{ border-color:var(--red); }

/* ============ ongoing strip ============ */
.ongoing{ padding:clamp(80px,11vh,140px) 0; }
.ongoing-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,28px); margin-top:clamp(36px,6vh,64px); }
.og-card{ position:relative; }
.og-card .og-img{ aspect-ratio:4/5; overflow:hidden; }
.og-card .og-img img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.2); transition:filter .4s, transform .8s cubic-bezier(.22,1,.36,1); transform:scale(1.04); }
.og-card:hover .og-img img{ filter:grayscale(0); transform:scale(1.1); }
.og-card h5{ margin-top:14px; font:600 13.5px/1.5 var(--font-d); text-transform:uppercase; letter-spacing:.04em; }
.og-live{
  position:absolute; top:12px; left:12px; z-index:3; display:flex; align-items:center; gap:7px;
  background:rgba(16,15,12,.88); padding:7px 10px;
  font:600 9px/1 var(--font-m); letter-spacing:.2em; color:var(--bone); text-transform:uppercase;
}
.og-live i{ width:6px; height:6px; border-radius:50%; background:var(--red); animation:blink 1.4s infinite; }
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.25} }

/* ============ CTA ============ */
.cta{
  position:relative; padding:clamp(110px,18vh,220px) 0; overflow:hidden; text-align:left;
}
.cta .cta-bg{
  position:absolute; inset:0; background:url("../generated/blueprint-wide.jpg") center/cover no-repeat;
  opacity:.58;
}
.cta .cta-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--ink) 6%, rgba(16,15,12,.45) 55%, rgba(16,15,12,.82)); }
.cta .wrap{ position:relative; z-index:3; }
.cta h2{ margin:26px 0 40px; }
.cta h2 .uline{ position:relative; display:inline-block; }
.cta h2 .uline::after{
  content:""; position:absolute; left:0; bottom:.04em; height:.085em; width:100%;
  background:var(--red); transform:scaleX(0); transform-origin:left;
}
.cta .cta-meta{ display:flex; gap:clamp(24px,5vw,80px); flex-wrap:wrap; margin-top:48px; font:400 12px/2 var(--font-m); letter-spacing:.1em; color:var(--grey); }
.cta .cta-meta b{ display:block; color:var(--bone); font-weight:500; }

/* ============ footer ============ */
.site-footer{ background:var(--ink); color:var(--bone); border-top:1px solid var(--line-bone); overflow:hidden; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(24px,4vw,70px);
  padding:clamp(60px,9vh,100px) 0 50px;
}
.footer-grid h6{ font:500 10.5px/1 var(--font-m); letter-spacing:.24em; text-transform:uppercase; color:var(--grey); margin-bottom:20px; }
.footer-grid p, .footer-grid a{ font:400 13.5px/2 var(--font-d); color:var(--bone); opacity:.85; }
.footer-grid a:hover{ color:var(--red); opacity:1; }
.footer-grid li a{ font:400 13px/2.2 var(--font-d); }
.footer-brandblock img{ width:200px; background:#fff; padding:10px; }
.footer-brandblock p{ margin-top:18px; font:italic 300 14px/1.7 var(--font-s); color:var(--grey); }
.footer-big{
  font:900 clamp(70px,13.5vw,230px)/.8 var(--font-d); text-transform:uppercase; letter-spacing:-.02em;
  color:transparent; -webkit-text-stroke:1px rgba(242,237,227,.22);
  white-space:nowrap; pointer-events:none;
  /* true-centre the oversized word even when wider than the container */
  position:relative; left:50%; transform:translateX(-50%); width:max-content;
  margin:clamp(28px,5vh,56px) 0 26px;
}
.footer-base{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  border-top:1px solid var(--line-bone); padding:22px 0 26px;
  font:400 10.5px/1.7 var(--font-m); letter-spacing:.1em; color:var(--grey); text-transform:uppercase;
}

/* ============ inner page hero ============ */
.page-hero{ padding:calc(74px + clamp(50px,9vh,110px)) 0 clamp(40px,7vh,80px); position:relative; }
.page-hero .display{ margin-top:24px; }
.page-hero .ph-sub{ margin-top:30px; max-width:62ch; }

/* ============ projects page ============ */
.filterbar{
  display:flex; gap:clamp(16px,3vw,40px); flex-wrap:wrap; align-items:center;
  border-top:1px solid var(--line-bone); border-bottom:1px solid var(--line-bone);
  padding:18px 0; margin-bottom:clamp(40px,6vh,70px);
}
body.theme-bone .filterbar{ border-color:var(--line-ink); }
.filterbar button{
  font:500 12px/1 var(--font-m); letter-spacing:.18em; text-transform:uppercase;
  color:var(--grey); padding:8px 0; position:relative; transition:color .25s;
}
.filterbar button.is-on{ color:inherit; }
.filterbar button.is-on::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--red); }
.filterbar .fcount{ margin-left:auto; font:400 11px/1 var(--font-m); color:var(--grey); letter-spacing:.12em; }

.proj-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(18px,2.4vw,40px) clamp(14px,2vw,32px); padding-bottom:clamp(80px,12vh,150px); }
.proj-card{ position:relative; }
.proj-card.s-7{ grid-column:span 7; } .proj-card.s-5{ grid-column:span 5; }
.proj-card.s-6{ grid-column:span 6; } .proj-card.s-4{ grid-column:span 4; }
.proj-card.s-8{ grid-column:span 8; }
.proj-card .pc-img{ overflow:hidden; position:relative; }
.proj-card.s-7 .pc-img, .proj-card.s-8 .pc-img{ aspect-ratio:16/10; }
.proj-card.s-5 .pc-img, .proj-card.s-6 .pc-img{ aspect-ratio:4/3; }
.proj-card.s-4 .pc-img{ aspect-ratio:3/4; }
.proj-card .pc-img img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.04); transition:transform .9s cubic-bezier(.22,1,.36,1), filter .5s;
}
.proj-card:hover .pc-img img{ transform:scale(1.1); }
.proj-card .pc-idx{
  position:absolute; top:14px; left:14px; z-index:3; font:500 10px/1 var(--font-m);
  letter-spacing:.16em; color:var(--bone); background:rgba(16,15,12,.7); padding:7px 9px;
}
.proj-card .pc-meta{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-top:14px; }
.proj-card .pc-meta h4{ font:700 clamp(16px,1.6vw,21px)/1.25 var(--font-d); text-transform:uppercase; }
.proj-card .pc-meta span{ font:400 11px/1.7 var(--font-m); letter-spacing:.1em; color:var(--grey); white-space:nowrap; }
.proj-card .pc-loc{ font:italic 300 13px var(--font-s); color:var(--grey); margin-top:4px; }

/* ============ project detail ============ */
.pd-hero{ position:relative; padding-top:74px; }
.pd-hero .pdh-img{ height:72svh; overflow:hidden; position:relative; }
.pd-hero .pdh-img img{ width:100%; height:100%; object-fit:cover; }
.pd-hero .pdh-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(16,15,12,.4), transparent 35%, rgba(16,15,12,.78)); }
.pd-hero .pdh-title{ position:absolute; left:0; right:0; bottom:-2px; z-index:4; }
.pd-hero .pdh-title .display{ font-size:clamp(32px,5vw,80px); }
.pd-meta{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  border-top:1px solid var(--line-bone); border-bottom:1px solid var(--line-bone);
  padding:26px 0; margin:clamp(36px,6vh,60px) 0;
}
.pd-meta div b{ display:block; font:500 10px/1 var(--font-m); letter-spacing:.22em; text-transform:uppercase; color:var(--grey); margin-bottom:10px; }
.pd-meta div span{ font:600 15px/1.4 var(--font-d); text-transform:uppercase; }
.pd-blurb{ max-width:60ch; margin-bottom:clamp(50px,8vh,90px); }
.pd-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2vw,30px); padding-bottom:clamp(70px,10vh,130px); }
.pd-gallery figure{ overflow:hidden; cursor:zoom-in; position:relative; }
.pd-gallery figure.full{ grid-column:1 / -1; }
.pd-gallery figure img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; transition:transform .8s cubic-bezier(.22,1,.36,1); }
.pd-gallery figure.full img{ aspect-ratio:21/10; }
.pd-gallery figure:hover img{ transform:scale(1.06); }
.pd-nav{
  display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line-bone);
}
.pd-nav a{
  padding:clamp(36px,6vh,60px) var(--gut); display:flex; flex-direction:column; gap:12px;
  transition:background .3s;
}
.pd-nav a:hover{ background:var(--ink-2); }
.pd-nav a:first-child{ border-right:1px solid var(--line-bone); }
.pd-nav a .dir{ font:500 10px/1 var(--font-m); letter-spacing:.24em; text-transform:uppercase; color:var(--grey); }
.pd-nav a .nm{ font:800 clamp(20px,2.6vw,36px)/1.1 var(--font-d); text-transform:uppercase; }
.pd-nav a:last-child{ text-align:right; align-items:flex-end; }

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:4000; background:rgba(16,15,12,.96);
  display:flex; align-items:center; justify-content:center; padding:5vmin;
  opacity:0; pointer-events:none; transition:opacity .35s;
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width:100%; max-height:100%; object-fit:contain; }
.lightbox .lb-close{ position:absolute; top:24px; right:28px; font:500 12px var(--font-m); letter-spacing:.2em; color:var(--bone); }
.lightbox .lb-n{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); font:400 11px var(--font-m); letter-spacing:.2em; color:var(--grey); }

/* ============ about ============ */
/* padding-block only — this element also carries .wrap, whose side padding
   a shorthand `padding: X 0` would wipe out */
.about-duo{ display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(28px,4.5vw,90px); align-items:start; padding-block:clamp(60px,10vh,130px); }
/* the two story paragraphs run side by side — wide measure, shallow block */
.ad-text{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.6vw,44px); }
.ad-text .body-col{ max-width:none; }
.brandcards{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:clamp(30px,4.5vh,48px); }
.brandcard{ border:1px solid var(--line-ink); padding:clamp(24px,3vw,44px); position:relative; }
.brandcard.red{ background:var(--red); color:#fff; border-color:var(--red); }
.brandcard h4{ font:800 clamp(22px,2.6vw,38px)/1 var(--font-d); text-transform:uppercase; }
.brandcard .yr{ position:absolute; top:18px; right:20px; font:400 11px var(--font-m); letter-spacing:.2em; }
.brandcard p{ margin-top:14px; font:400 13.5px/1.8 var(--font-d); opacity:.85; max-width:48ch; }
.founder-fig{ margin-top:0; width:100%; }
.founder-fig img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:60% 20%; }
.founder-fig figcaption{
  margin-top:14px; padding-left:14px; border-left:2px solid var(--red);
  font:400 11px/1.7 var(--font-m); letter-spacing:.1em; text-transform:uppercase; color:var(--grey);
}
.founder-fig figcaption b{ display:block; color:var(--bone); font-weight:600; letter-spacing:.14em; }

.timeline{ padding:clamp(70px,11vh,140px) 0; }
.tl-rail{ margin-top:clamp(40px,7vh,70px); border-left:1px solid var(--line-bone); padding-left:clamp(24px,4vw,60px); display:flex; flex-direction:column; gap:clamp(36px,6vh,64px); }
.tl-item{ position:relative; max-width:680px; }
.tl-item::before{
  content:""; position:absolute; left:calc(-1 * clamp(24px,4vw,60px) - 5px); top:14px;
  width:9px; height:9px; background:var(--red);
}
.tl-item .tl-yr{ font:300 clamp(26px,3.2vw,46px)/1 var(--font-d); color:transparent; -webkit-text-stroke:1px var(--bone); }
.tl-item h5{ margin-top:10px; font:700 17px/1.4 var(--font-d); text-transform:uppercase; letter-spacing:.04em; }
.tl-item p{ margin-top:8px; font:400 14px/1.8 var(--font-d); color:var(--grey); }

/* ============ careers ============ */
.roles{ border-top:1px solid var(--line-bone); margin-top:clamp(40px,7vh,80px); }
.role-row{
  display:grid; grid-template-columns:70px 1fr auto; gap:24px; align-items:center;
  padding:clamp(22px,3.6vh,36px) 0; border-bottom:1px solid var(--line-bone); position:relative;
}
.role-row .rr-idx{ font:400 11px var(--font-m); color:var(--grey); }
.role-row h4{
  font:800 clamp(24px,4vw,56px)/1.05 var(--font-d); text-transform:uppercase; letter-spacing:-.01em;
  transition:transform .35s cubic-bezier(.22,1,.36,1), color .3s;
}
.role-row:hover h4{ transform:translateX(20px); color:var(--red); }
.role-row .rr-note{ font:italic 300 14px var(--font-s); color:var(--grey); text-align:right; transition:opacity .25s; }
.role-row .rr-arrow{ position:absolute; right:0; opacity:0; transition:opacity .3s, transform .3s; transform:translateX(-12px); color:var(--red); }
.role-row:hover .rr-note{ opacity:0; }  /* note yields to the arrow — they share the right edge */
.role-row:hover .rr-arrow{ opacity:1; transform:none; }

/* ============ contact ============ */
.contact-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(36px,6vw,110px); padding-bottom:clamp(80px,12vh,150px); }
.cform{ display:flex; flex-direction:column; gap:0; margin-top:clamp(30px,5vh,50px); }
.cfield{ position:relative; border-bottom:1px solid var(--line-bone); padding:26px 0 14px; }
.cfield label{
  position:absolute; top:30px; left:0; font:500 11px/1 var(--font-m); letter-spacing:.2em;
  text-transform:uppercase; color:var(--grey); transition:transform .3s, font-size .3s, color .3s;
  pointer-events:none;
}
.cfield input, .cfield textarea, .cfield select{
  width:100%; background:transparent; border:0; outline:0; color:var(--bone);
  font:400 17px/1.5 var(--font-d); padding-top:14px; resize:vertical;
}
.cfield select{ appearance:none; cursor:pointer; }
.cfield select option{ background:var(--ink); }
.cfield.is-filled label, .cfield:focus-within label{ transform:translateY(-18px); font-size:9px; color:var(--red); }
.cfield .cf-bar{ position:absolute; left:0; bottom:-1px; height:1px; width:0; background:var(--red); transition:width .45s cubic-bezier(.65,0,.35,1); }
.cfield:focus-within .cf-bar{ width:100%; }
.csubmit{
  margin-top:44px; align-self:flex-start; display:inline-flex; align-items:center; gap:16px;
  font:600 13px/1 var(--font-m); letter-spacing:.22em; text-transform:uppercase;
  border:1px solid var(--bone); padding:20px 30px; transition:background .3s, color .3s, border-color .3s;
}
.csubmit:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.csubmit.is-sending, .csubmit:disabled{ opacity:.6; pointer-events:none; }
/* spam honeypot — hidden from humans, bots fill it */
.cf-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.cform-status{ margin-top:18px; font:400 14px/1.55 var(--font-d); max-width:46ch; }
.cform-status[data-kind="ok"]{ color:var(--bone); }
.cform-status[data-kind="err"]{ color:var(--red); }
body.theme-bone .cform-status[data-kind="ok"]{ color:var(--ink); }
.contact-info{ display:flex; flex-direction:column; gap:38px; padding-top:clamp(30px,5vh,50px); }
.cinfo b{ display:block; font:500 10.5px/1 var(--font-m); letter-spacing:.24em; text-transform:uppercase; color:var(--grey); margin-bottom:12px; }
.cinfo p, .cinfo a{ font:400 16px/1.8 var(--font-d); }
.cinfo a:hover{ color:var(--red); }
.coords{
  border:1px solid var(--line-bone); padding:24px; font:400 11px/2 var(--font-m);
  letter-spacing:.14em; color:var(--grey); text-transform:uppercase; position:relative;
}
.coords::before{ content:""; position:absolute; top:-1px; left:-1px; width:26px; height:26px; border-top:2px solid var(--red); border-left:2px solid var(--red); }

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .vertical-row .vr-idx{ grid-column:1/span 12; }
  .vertical-row .vr-body{ grid-column:1/span 12; order:2; }
  .vertical-row .vr-media{ grid-column:1/span 12; order:3; }
  .vertical-row.alt .vr-body{ grid-column:1/span 12; }
  .vertical-row.alt .vr-media{ grid-column:1/span 12; }
  .sketch-grid{ grid-template-columns:1fr; }
  .ongoing-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .about-duo{ grid-template-columns:1fr; }
  .about-duo .founder-fig{ max-width:420px; }
  .pd-meta{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .site-nav{ display:none; }
  .nav-burger{ display:flex; }
  .brand-logo{ height:54px; }
  .brand-tag{ font-size:12px; }
  .hero-video{ position:relative; top:auto; right:auto; width:100%; aspect-ratio:16/9; margin-top:30px; order:2; z-index:1; }
  .hero-under{ position:static; width:100%; margin-top:20px; order:3; }
  .hero-h1 .row.r2{ margin-left:24px; }
  .hero{ flex-direction:column; align-items:stretch; padding-top:96px; }
  .hero-type{ padding-bottom:4vh; order:1; }
  .hero-scroll{ display:none; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2){ border-right:0; }
  .manifesto-grid{ grid-template-columns:1fr; }
  .proj-card{ grid-column:1 / -1 !important; }
  .pd-gallery{ grid-template-columns:1fr; }
  .client-wall{ grid-template-columns:repeat(2,1fr); }
  .ad-text{ grid-template-columns:1fr; }
  .brandcards{ grid-template-columns:1fr; }
  .ongoing-grid{ grid-template-columns:1fr; }
  .works{ padding:70px 0; }
  .works-head{ flex-direction:column; align-items:flex-start; gap:18px; }
  .work-card{ width:min(78vw,340px); margin-top:0 !important; }
  .works-scrub-thumb{ width:72px; }
  .pd-nav{ grid-template-columns:1fr; }
  .pd-nav a:first-child{ border-right:0; border-bottom:1px solid var(--line-bone); }
}