/* ============================================================
   AGENTURA — Design System
   Monochrome, brutalist-editorial. Space Grotesk + Geist Mono.
   Rebuilt from spec 02/03. All colors/motion per tokens.
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../fonts/geist-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../fonts/geist-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../fonts/geist-mono-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --ink:#1f2121;
  --black:#000;
  --bg:#dbdbdb;
  --surface:#ebebeb;
  --muted:#737b7d;
  --white:#fff;
  --charcoal:#1f2121;
  --line:rgba(31,33,33,.16);
  --line-light:rgba(255,255,255,.16);

  --font-display:"Space Grotesk",sans-serif;
  --font-mono:"Geist Mono",ui-monospace,monospace;
  --font-body:"Inter",system-ui,sans-serif;

  --ls-mono:-0.28px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.2,.6,.2,1);
  --ease-expo:cubic-bezier(.19,1,.22,1);
  --dur:.6s;

  --gut:clamp(20px,5vw,64px);
  --maxw:1600px;
  --nav-h:56px;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-mono);font-size:14px;line-height:1.4;letter-spacing:var(--ls-mono);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
h1,h2,h3,h4,p{margin:0}
::selection{background:var(--ink);color:var(--bg)}

/* monochrome treatment for ALL photographic content */
.media img,.card__media img,.hero__img,.gallery img,.work__img,.p-card__media img{
  filter:grayscale(100%) contrast(1.04) brightness(.98);
}

/* ---------- Utilities ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.mono{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:var(--ls-mono)}
.kicker{font-family:var(--font-mono);text-transform:uppercase;font-size:12px;letter-spacing:.04em;color:var(--muted)}
.display{font-family:var(--font-display);font-weight:600;line-height:1;letter-spacing:-.02em;text-transform:uppercase}
.section{padding-block:clamp(52px,7vw,104px);position:relative}
.section--tight{padding-block:clamp(32px,4.5vw,64px)}
.section--dark{background:var(--charcoal);color:var(--surface)}
.section--surface{background:var(--surface)}
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-mono);text-transform:uppercase;font-size:12px;letter-spacing:.05em;color:var(--muted)}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
.rule{height:1px;background:var(--line);border:0;margin:0}
.section--dark .rule{background:var(--line-light)}

/* Reveal (fade-up) — matches spec 03 */
.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.reveal-img{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease)}
.reveal-img.is-visible{clip-path:inset(0 0 0 0)}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{position:fixed;top:16px;left:0;right:0;z-index:1000;display:flex;justify-content:center;pointer-events:none}
.nav{
  pointer-events:auto;background:var(--charcoal);color:var(--surface);
  border-radius:14px;width:min(92vw,560px);box-shadow:0 10px 40px -12px rgba(0,0,0,.4);
  overflow:hidden;transition:box-shadow .4s var(--ease);
}
.nav__bar{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);padding:0 18px}
.nav__logo{display:flex;align-items:center;gap:9px;font-family:var(--font-display);color:var(--surface)}
.nav__lockup{display:flex;flex-direction:column;line-height:1}
.nav__wm{font-weight:700;font-size:18px;letter-spacing:-.03em;color:var(--white)}
.nav__suffix{font-family:var(--font-mono);font-weight:500;font-size:8.5px;letter-spacing:.24em;color:rgba(235,235,235,.55);margin-top:2px}
.nav__stag{width:26px;height:26px;flex:0 0 auto}

/* ---- Stag mark (line-art deer) + gentle nod animation ---- */
.stag{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;display:block}
.stag polyline,.stag polygon,.stag path{vector-effect:non-scaling-stroke}
.nav__stag{stroke-width:1.3px}
.hero__stag{width:clamp(56px,8vw,116px);height:auto;stroke-width:1.5px;margin:0 auto .28em;color:var(--surface)}
.stag{transform-origin:50% 84%;animation:stag-nod 4.2s ease-in-out infinite}
@keyframes stag-nod{0%,100%{transform:rotate(-11deg) translateY(0)}50%{transform:rotate(11deg) translateY(-1px)}}
@media (prefers-reduced-motion:reduce){.stag{animation:none}}
.nav__toggle{width:34px;height:34px;display:grid;place-content:center;gap:5px;border-radius:8px}
.nav__toggle span{display:block;width:18px;height:1.5px;background:var(--surface);transition:transform .35s var(--ease),opacity .25s}
.nav.is-open .nav__toggle span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.nav.is-open .nav__toggle span:nth-child(2){opacity:0}
.nav.is-open .nav__toggle span:nth-child(3){transform:translateY(-3.25px) rotate(-45deg)}
.nav__panel{max-height:0;opacity:0;transition:max-height .45s var(--ease),opacity .3s ease}
.nav.is-open .nav__panel{max-height:340px;opacity:1}
.nav__links{display:flex;flex-direction:column;padding:6px 18px 14px;gap:2px}
.nav__link{position:relative;overflow:hidden;height:36px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);text-transform:uppercase;font-size:14px;letter-spacing:var(--ls-mono)}
.nav__link span{display:block;transition:transform .4s var(--ease)}
.nav__link span::after{content:attr(data-t);position:absolute;left:0;right:0;top:100%;display:block;text-align:center}
.nav__link:hover span{transform:translateY(-100%)}
.nav__link[aria-current="page"]{color:var(--white)}
.nav__social{display:flex;justify-content:center;gap:20px;padding:12px 0 4px;border-top:1px solid var(--line-light);margin-top:4px}
.nav__social a{color:var(--surface);opacity:.7;transition:opacity .25s}
.nav__social a:hover{opacity:1}
.nav__social svg{width:16px;height:16px;display:block}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:.7em;font-family:var(--font-mono);text-transform:uppercase;font-size:13px;letter-spacing:var(--ls-mono);padding:13px 22px;border-radius:0;transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.btn__arrow{width:1.15em;height:1.15em;transition:transform .3s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn--primary{background:var(--charcoal);color:var(--surface)}
.btn--primary:hover{background:var(--black);color:var(--white)}
.btn--light{background:var(--surface);color:var(--ink)}
.btn--light:hover{background:var(--white)}
.btn--ghost{background:transparent;color:currentColor;box-shadow:inset 0 0 0 1px currentColor}
.btn--ghost:hover{background:var(--ink);color:var(--bg)}
.section--dark .btn--ghost:hover{background:var(--surface);color:var(--ink)}

/* ============================================================
   HERO — geometric (light)
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--ink)}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,21,21,.45),rgba(20,21,21,.15) 30%,rgba(20,21,21,.2) 70%,rgba(20,21,21,.6))}
.hero__frame{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;pointer-events:none;color:rgba(235,235,235,.5)}
.hero__frame line,.hero__frame circle,.hero__frame polygon,.hero__frame rect{stroke:currentColor;fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.hero__wordmark{position:relative;z-index:3;font-family:var(--font-display);font-weight:600;text-transform:uppercase;color:var(--surface);line-height:.92;text-align:center;letter-spacing:-.03em;font-size:clamp(52px,16vw,220px);mix-blend-mode:normal;text-shadow:0 2px 40px rgba(0,0,0,.25)}
.hero__wordmark small{display:block;font-family:var(--font-mono);font-size:13px;letter-spacing:.2em;font-weight:400;color:rgba(235,235,235,.8);margin-bottom:1.4em;text-shadow:none}
.hero__suffix{display:block;font-family:var(--font-mono);font-weight:500;text-transform:uppercase;font-size:clamp(12px,1.7vw,22px);letter-spacing:.42em;text-indent:.42em;color:rgba(235,235,235,.85);margin-top:.55em;text-shadow:0 2px 20px rgba(0,0,0,.3)}
.hero--sm{min-height:78svh}
.hero--sm .hero__wordmark{font-size:clamp(44px,10vw,132px)}

/* corner captions */
.corner{position:absolute;z-index:3;max-width:min(40vw,260px);font-family:var(--font-mono);text-transform:uppercase;font-size:12px;line-height:1.35;letter-spacing:var(--ls-mono);color:rgba(235,235,235,.92)}
.corner--tl{top:calc(var(--nav-h) + 42px);left:var(--gut);text-align:left}
.corner--tr{top:calc(var(--nav-h) + 42px);right:var(--gut);text-align:right}
.corner--bl{bottom:38px;left:var(--gut);text-align:left}
.corner--br{bottom:38px;right:var(--gut);text-align:right}
.hero__scroll{position:absolute;z-index:3;bottom:34px;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:rgba(235,235,235,.7);text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
.hero__scroll::after{content:"";width:1px;height:34px;background:linear-gradient(rgba(235,235,235,.7),transparent);animation:scrollLine 2.2s var(--ease) infinite}
@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* hero — editorial (blog post) */
.hero--editorial{min-height:auto;background:var(--bg);color:var(--ink);align-items:stretch;padding-top:calc(var(--nav-h) + 90px)}
.hero--editorial .hero__inner{position:relative;z-index:3;text-align:center;padding-bottom:22px}
.hero--editorial .post-title{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:clamp(38px,7vw,104px);line-height:.98;letter-spacing:-.03em;max-width:14ch;margin:20px auto 22px}
.hero--editorial .post-meta{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;color:var(--muted);font-size:12px;text-transform:uppercase}
/* author byline with avatar (monochrome -> colour on hover) */
.post-byline{display:inline-flex;align-items:center;gap:16px;justify-content:center;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:var(--ls-mono);color:var(--muted)}
.post-avatar{width:82px;height:82px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:var(--ink)}
.post-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;filter:grayscale(70%);transition:filter .55s var(--ease),transform .55s var(--ease)}
.post-byline:hover .post-avatar img{filter:grayscale(0);transform:scale(1.05)}
.post-byline__name{color:var(--ink);font-weight:500}
.post-byline__sep{opacity:.45}

/* ============================================================
   INTRO / SECTION HEADINGS
   ============================================================ */
.sec-head{display:grid;gap:22px;max-width:var(--maxw)}
.sec-head__row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.sec-title{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:clamp(30px,5vw,64px);line-height:1;letter-spacing:-.02em;max-width:20ch}
.sec-sub{font-family:var(--font-mono);text-transform:uppercase;font-size:14px;letter-spacing:var(--ls-mono);color:var(--muted);max-width:44ch}
.lede{font-family:var(--font-display);font-weight:500;text-transform:uppercase;font-size:clamp(22px,3.4vw,44px);line-height:1.08;letter-spacing:-.01em;max-width:24ch}

/* ============================================================
   SELECTED WORKS (numbered rows)
   ============================================================ */
.works{display:grid;gap:2px}
.work{position:relative;display:grid;grid-template-columns:110px 1fr;gap:var(--gut);align-items:center;padding-block:34px;border-top:1px solid var(--line)}
.work:last-child{border-bottom:1px solid var(--line)}
.work__num{font-family:var(--font-mono);font-size:13px;color:var(--muted)}
.work__body{display:grid;grid-template-columns:1.3fr .7fr;gap:var(--gut);align-items:center}
.work__title{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:clamp(22px,3vw,40px);line-height:1.02;letter-spacing:-.02em;transition:opacity .3s}
.work__tags{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted);text-transform:uppercase}
.work__media{position:absolute;top:50%;left:50%;width:300px;height:380px;transform:translate(-30%,-50%) scale(.6);opacity:0;pointer-events:none;z-index:5;overflow:hidden;transition:opacity .4s var(--ease),transform .5s var(--ease);box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
.work__media img{width:100%;height:100%;object-fit:cover}
.work:hover .work__media{opacity:1;transform:translate(-50%,-50%) scale(1)}
.work:hover .work__title{opacity:.55}
@media (hover:none){.work__media{display:none}}

/* ============================================================
   GALLERY / PROJECT INDEX (scattered)
   ============================================================ */
.p-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,3vw,44px);align-items:start}
.p-card{position:relative;display:block;overflow:hidden;background:var(--ink)}
.p-card__media{position:relative;overflow:hidden;aspect-ratio:3/4}
.p-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .5s}
.p-card:hover .p-card__media img{transform:scale(1.04)}
.p-card__mark{position:absolute;inset:0;display:grid;place-content:center;z-index:2;opacity:0;transition:opacity .4s}
.p-card__mark span{width:20px;height:20px;border:1px solid var(--white)}
.p-card:hover .p-card__mark{opacity:1}
.p-card__meta{display:flex;justify-content:space-between;gap:16px;padding-top:14px;font-size:12px;text-transform:uppercase}
.p-card__title{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;font-size:16px}
.p-card__cat{color:var(--muted)}
/* offsets for scatter */
.p-card:nth-child(6n+1){grid-column:span 5}
.p-card:nth-child(6n+2){grid-column:span 4;margin-top:60px}
.p-card:nth-child(6n+3){grid-column:span 3;margin-top:20px}
.p-card:nth-child(6n+4){grid-column:span 4}
.p-card:nth-child(6n+5){grid-column:span 3;margin-top:80px}
.p-card:nth-child(6n){grid-column:span 5;margin-top:24px}

/* ============================================================
   SERVICES
   ============================================================ */
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.service{background:var(--bg);padding:clamp(28px,4vw,56px);display:grid;gap:16px;min-height:260px;align-content:start;transition:background .4s}
.section--surface .service{background:var(--surface)}
.service:hover{background:var(--surface)}
.section--surface .service:hover{background:var(--bg)}
.service__idx{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.service__title{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:clamp(22px,2.6vw,32px);letter-spacing:-.01em}
.service__desc{font-size:13.5px;line-height:1.5;color:var(--ink);max-width:42ch;text-transform:uppercase}

/* ============================================================
   TEAM
   ============================================================ */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px)}
.member__media{position:relative;aspect-ratio:3/4;overflow:visible;background:transparent}
.member__media::after{content:"";position:absolute;left:50%;bottom:2%;width:58%;height:7%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.4),rgba(0,0,0,0) 72%);opacity:0;transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none;z-index:0}
.member:hover .member__media::after{opacity:1;transform:translateX(-50%) translateY(6px)}
.member__media img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center 20%;filter:grayscale(1);transform-origin:center bottom;transition:transform .5s var(--ease),filter .5s var(--ease);will-change:transform}
.member:hover .member__media img{transform:translateY(-16px) scale(1.07);filter:grayscale(0)}
.member__name{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:20px;margin-top:16px}
.member__role{font-size:12px;color:var(--muted);text-transform:uppercase;margin-top:4px}
.member__bio{font-family:var(--font-body);font-size:14px;line-height:1.6;color:var(--ink);text-transform:none;letter-spacing:normal;margin-top:12px;opacity:.85}

/* ============================================================
   TESTIMONIALS (rotator)
   ============================================================ */
.quotes{position:relative;min-height:min(46vh,360px);display:grid}
.quote{grid-area:1/1;display:flex;flex-direction:column;justify-content:center;gap:26px;opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease);pointer-events:none}
.quote.is-active{opacity:1;transform:none;pointer-events:auto}
.quote__text{font-family:var(--font-display);font-weight:500;text-transform:uppercase;font-size:clamp(22px,3.2vw,42px);line-height:1.12;letter-spacing:-.01em;max-width:26ch}
.quote__by{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;color:var(--muted)}
.quotes__dots{display:flex;gap:10px;margin-top:32px}
.quotes__dots button{width:26px;height:2px;background:currentColor;opacity:.3;transition:opacity .3s}
.quotes__dots button.is-active{opacity:1}

/* ============================================================
   JOURNAL / BLOG CARDS
   ============================================================ */
.journal{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.j-row{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;background:var(--bg);padding:26px var(--gut);transition:background .4s,padding-left .4s var(--ease)}
.section--dark .j-row{background:var(--charcoal)}
.j-row:hover{background:var(--surface);padding-left:calc(var(--gut) + 12px)}
.section--dark .j-row:hover{background:#171818}
.j-row__meta{display:flex;gap:22px;flex-wrap:wrap;align-items:baseline}
.j-row__author{font-size:12px;text-transform:uppercase}
.j-row__cat{font-size:12px;text-transform:uppercase;color:var(--muted)}
.j-row__title{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:clamp(18px,2.4vw,30px);letter-spacing:-.01em;grid-column:1/-1}
.j-row__idx{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.j-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,32px)}
.j-card{display:block}
.j-card__media{aspect-ratio:3/4;overflow:hidden;background:var(--ink)}
.j-card__media img{width:100%;height:100%;object-fit:cover;object-position:50% 0%;filter:grayscale(70%);transition:transform .8s var(--ease),filter .55s var(--ease)}
.j-card:hover .j-card__media img{transform:scale(1.05);filter:grayscale(0%)}
.j-card__meta{display:flex;gap:16px;padding-top:14px;font-size:12px;text-transform:uppercase;color:var(--muted)}
.j-card__title{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:19px;letter-spacing:-.01em;margin-top:8px;line-height:1.05}

/* ============================================================
   PROJECT DETAIL
   ============================================================ */
.pd-block{display:grid;grid-template-columns:200px 1fr;gap:var(--gut);align-items:start;padding-block:clamp(24px,3.4vw,52px);border-top:1px solid var(--line)}
.pd-block__label{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;color:var(--muted);position:sticky;top:100px}
.pd-block__body{font-family:var(--font-display);font-weight:500;text-transform:uppercase;font-size:clamp(20px,2.6vw,34px);line-height:1.12;letter-spacing:-.01em;max-width:26ch}
.pd-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-block:40px}
.pd-fact__k{font-size:12px;color:var(--muted);text-transform:uppercase}
.pd-fact__v{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:18px;margin-top:8px;letter-spacing:-.01em}
.pd-gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,28px)}
.pd-gallery figure{margin:0;overflow:hidden;background:var(--ink)}
.pd-gallery img{width:100%;height:100%;object-fit:cover}
.pd-gallery figure:nth-child(3n+1){grid-column:span 7;aspect-ratio:4/3}
.pd-gallery figure:nth-child(3n+2){grid-column:span 5;aspect-ratio:3/4}
.pd-gallery figure:nth-child(3n){grid-column:span 12;aspect-ratio:16/8}

/* ============================================================
   ARTICLE BODY (blog post)
   ============================================================ */
.article{max-width:66ch;margin-inline:auto;font-family:var(--font-body);font-size:18px;line-height:1.72;letter-spacing:normal;text-transform:none;color:var(--ink)}
.article p{margin-bottom:1.5em}
.article h2{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:clamp(22px,3vw,32px);letter-spacing:-.01em;margin:1.8em 0 .7em}
.article img{margin:2.2em 0;width:100%}
.article blockquote{margin:1.8em 0;padding-left:24px;border-left:2px solid var(--ink);font-family:var(--font-display);font-weight:500;font-size:24px;line-height:1.3}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,90px);align-items:start}
.info-list{display:grid;gap:28px}
.info__k{font-size:12px;color:var(--muted);text-transform:uppercase;margin-bottom:8px}
.info__v{font-family:var(--font-display);font-weight:500;text-transform:uppercase;font-size:clamp(16px,1.8vw,22px);line-height:1.3;letter-spacing:-.01em}
.form{display:grid;gap:22px}
.field{display:grid;gap:10px}
.field label{font-size:12px;text-transform:uppercase;color:var(--muted)}
.field input{background:transparent;border:0;border-bottom:1px solid var(--ink);padding:12px 2px;font-family:var(--font-mono);font-size:15px;color:var(--ink);letter-spacing:var(--ls-mono);transition:border-color .3s,padding-left .3s}
.field input::placeholder{color:var(--muted);opacity:.7}
.field input:focus{outline:none;border-color:var(--ink);padding-left:8px}
.field--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__note{font-size:12px;color:var(--muted);text-transform:uppercase}
.form__status{font-family:var(--font-mono);font-size:13px;text-transform:uppercase;min-height:1.2em}
.form__status.is-ok{color:var(--ink)}

/* centered contact (name + designation info, buttons, no form) */
.contact-center{max-width:960px;margin-inline:auto;text-align:center;display:grid;gap:clamp(30px,4.5vw,54px);justify-items:center}
.commit-line{font-family:var(--font-display);font-weight:500;text-transform:uppercase;font-size:clamp(24px,3.6vw,46px);line-height:1.1;letter-spacing:-.01em;max-width:22ch}
.contact-actions{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.cinfo-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(26px,4vw,64px);width:100%}
.cinfo{display:grid;gap:8px;justify-items:center;max-width:300px}
.cinfo .info__k{margin-bottom:0}
.cinfo .info__v{font-size:clamp(14px,1.4vw,17px);line-height:1.4}
@media (max-width:809px){.cinfo-grid{gap:26px}.cinfo{max-width:none;flex:1 1 40%}}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta{position:relative;overflow:hidden;min-height:76svh;display:flex;align-items:flex-end;color:var(--white)}
.cta__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cta__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(15,16,16,.72),rgba(15,16,16,.25) 60%,rgba(15,16,16,.5))}
.cta__inner{position:relative;z-index:2;padding-block:clamp(48px,7vw,96px);width:100%;display:grid;gap:30px}
.cta__title{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:clamp(36px,7vw,110px);line-height:.96;letter-spacing:-.03em;max-width:16ch}
.cta__sub{font-family:var(--font-mono);font-size:13px;text-transform:uppercase;color:rgba(255,255,255,.75);letter-spacing:var(--ls-mono)}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--charcoal);color:var(--surface);padding-top:clamp(56px,7vw,100px)}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:64px}
.footer__brand{display:flex;align-items:center;gap:.24em;color:var(--white)}
.footer__lockup{display:flex;flex-direction:column;line-height:.86}
.footer__main{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(44px,8vw,104px);line-height:.9;letter-spacing:-.04em}
.footer__suffix{font-family:var(--font-mono);font-weight:500;text-transform:uppercase;font-size:clamp(12px,1.7vw,22px);letter-spacing:.26em;color:var(--muted);margin-top:.45em}
.footer__stag{width:clamp(40px,7vw,92px);height:auto;stroke-width:1.4px;color:var(--surface);flex:0 0 auto}
.footer__col h4{font-size:12px;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.footer__col a{display:block;padding:7px 0;font-size:14px;text-transform:uppercase;opacity:.85;transition:opacity .25s,transform .3s var(--ease)}
.footer__col a:hover{opacity:1;transform:translateX(5px)}
.footer__bottom{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-block:26px;border-top:1px solid var(--line-light);font-size:12px;text-transform:uppercase;color:var(--muted)}
.footer__bottom a{color:var(--surface)}

/* ============================================================
   ORDERFLOW PRO — project page (monochrome, Dettsec system)
   ============================================================ */
.lead{font-family:var(--font-body);font-size:clamp(16px,1.5vw,19px);line-height:1.6;max-width:72ch;text-transform:none;letter-spacing:normal;opacity:.9}
.of-subhead{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:clamp(20px,2.6vw,30px);letter-spacing:-.01em}

.of-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(127,127,127,.28);border:1px solid rgba(127,127,127,.28)}
.of-stat{background:var(--bg);padding:26px 22px;display:grid;gap:8px;align-content:start}
.section--surface .of-stat{background:var(--surface)}
.section--dark .of-stat{background:var(--charcoal)}
.of-stat__n{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1}
.of-stat__l{font-family:var(--font-mono);text-transform:uppercase;font-size:11.5px;letter-spacing:.01em;line-height:1.4;opacity:.62}
@media(max-width:809px){.of-stats{grid-template-columns:1fr 1fr}}

.of-cards{display:grid;gap:1px;background:rgba(127,127,127,.28);border:1px solid rgba(127,127,127,.28)}
.of-cards--2{grid-template-columns:repeat(2,1fr)}
.of-cards--3{grid-template-columns:repeat(3,1fr)}
.of-cards--4{grid-template-columns:repeat(4,1fr)}
.of-card{background:var(--bg);padding:clamp(22px,2.6vw,34px);display:grid;gap:12px;align-content:start}
.section--surface .of-card{background:var(--surface)}
.section--dark .of-card{background:var(--charcoal)}
.of-card__t{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:clamp(16px,1.7vw,21px);letter-spacing:-.01em;line-height:1.12}
.of-card__d{font-family:var(--font-body);font-size:14px;line-height:1.6;opacity:.8;text-transform:none;letter-spacing:normal}
@media(max-width:1099px){.of-cards--3,.of-cards--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:809px){.of-cards{grid-template-columns:1fr!important}}

.of-figure{margin:0;overflow:hidden;background:var(--ink);border:1px solid rgba(127,127,127,.28)}
.of-figure img{width:100%;height:auto;display:block;filter:grayscale(72%) contrast(1.03);transition:filter .55s var(--ease)}
.of-figure:hover img{filter:grayscale(0)}

.of-defs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(127,127,127,.28);border:1px solid rgba(127,127,127,.28);margin-top:20px}
.of-def{background:var(--bg);padding:20px 22px}
.section--surface .of-def{background:var(--surface)}
.of-def dt{font-family:var(--font-mono);text-transform:uppercase;font-size:12.5px;letter-spacing:var(--ls-mono);margin-bottom:7px;font-weight:600}
.of-def dd{margin:0;font-family:var(--font-body);font-size:13.5px;line-height:1.55;opacity:.78}
@media(max-width:809px){.of-defs{grid-template-columns:1fr}}

.of-ps-list{display:grid;gap:1px;background:rgba(127,127,127,.28);border:1px solid rgba(127,127,127,.28)}
.of-ps{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(127,127,127,.28)}
.of-ps__p,.of-ps__s{background:var(--surface);padding:22px 24px;font-family:var(--font-body);font-size:14px;line-height:1.55}
.of-ps__p{opacity:.72}
.of-ps__s{font-weight:500}
.of-ps span{display:block;font-family:var(--font-mono);text-transform:uppercase;font-size:11px;letter-spacing:.08em;opacity:.55;margin-bottom:8px}
@media(max-width:809px){.of-ps{grid-template-columns:1fr}}

.of-table-wrap{overflow-x:auto;margin-top:22px;border:1px solid rgba(127,127,127,.28)}
.of-table{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:13px}
.of-table th,.of-table td{text-align:left;padding:12px 16px;border-bottom:1px solid rgba(127,127,127,.22);text-transform:uppercase;letter-spacing:.01em}
.of-table th{font-size:11px;opacity:.6;font-weight:600}
.of-table tbody td:first-child{font-weight:600}
.of-table__us td{background:var(--ink);color:var(--bg);font-weight:700}
.of-table--matrix td,.of-table--matrix th{text-align:center}
.of-table--matrix td:first-child,.of-table--matrix th:first-child{text-align:left}

.of-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(127,127,127,.28);border:1px solid rgba(127,127,127,.28);margin-top:8px}
.of-step{background:var(--bg);padding:20px 18px;display:grid;gap:6px;align-content:start;font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:15px;letter-spacing:-.01em}
.of-step span{font-family:var(--font-display);font-weight:700;font-size:22px}
.of-step em{font-family:var(--font-body);font-style:normal;font-size:12px;opacity:.7;text-transform:none;letter-spacing:normal;font-weight:400}
@media(max-width:809px){.of-steps{grid-template-columns:1fr}}

.of-reasons{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(127,127,127,.28);border:1px solid rgba(127,127,127,.28)}
.of-reason{background:var(--bg);padding:clamp(22px,2.4vw,30px);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.of-reason__n{font-family:var(--font-mono);font-size:13px;opacity:.5}
@media(max-width:809px){.of-reasons{grid-template-columns:1fr}}

.of-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.of-plan{border:1px solid rgba(127,127,127,.32);padding:28px 24px;display:grid;gap:6px;align-content:start;background:var(--bg)}
.of-plan--pop{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.of-plan__tag{font-family:var(--font-mono);text-transform:uppercase;font-size:10.5px;letter-spacing:.1em;opacity:.75;margin-bottom:2px}
.of-plan__k{font-family:var(--font-mono);text-transform:uppercase;font-size:12px;letter-spacing:var(--ls-mono);opacity:.7}
.of-plan__p{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,4vw,48px);letter-spacing:-.02em;margin:2px 0 12px}
.of-plan__p span{font-family:var(--font-mono);font-size:14px;font-weight:400;opacity:.6}
.of-plan ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.of-plan li{font-family:var(--font-body);font-size:13.5px;line-height:1.4;padding-left:16px;position:relative;opacity:.85}
.of-plan li::before{content:"—";position:absolute;left:0;opacity:.5}
@media(max-width:809px){.of-plans{grid-template-columns:1fr}}

.of-note{font-family:var(--font-body);font-size:12.5px;line-height:1.6;opacity:.6;max-width:80ch;margin-top:34px;text-transform:none;letter-spacing:normal}

/* home brief band for OrderFlow Pro */
.of-band{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.of-band__media{display:block;overflow:hidden;background:#000;aspect-ratio:16/11}
.of-band__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(72%) contrast(1.03);transition:filter .6s var(--ease),transform .9s var(--ease)}
.of-band__media:hover img{filter:grayscale(0);transform:scale(1.03)}
.of-band__text{display:grid;gap:20px}
.of-band__stats{display:grid;grid-template-columns:repeat(4,auto);gap:clamp(18px,2.4vw,32px);justify-content:start;margin-top:2px}
.of-band__stat{font-family:var(--font-mono);text-transform:uppercase;font-size:11px;letter-spacing:.02em;opacity:.72;line-height:1.3}
.of-band__stat span{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.02em;opacity:1;margin-bottom:2px}
.of-band--rev .of-band__media{order:2}
@media(max-width:809px){.of-band{grid-template-columns:1fr}.of-band__stats{grid-template-columns:1fr 1fr;gap:18px}.of-band--rev .of-band__media{order:0}}

/* products carousel — one panel, slide + bounce between products */
.sec-head--center{justify-items:center;text-align:center}
.sec-head--center .sec-head__row{justify-content:center}
.carousel{position:relative}
.carousel__viewport{overflow:hidden}
.carousel__track{display:flex;will-change:transform;transition:transform .72s cubic-bezier(.3,1.25,.4,1)}
.carousel__slide{flex:0 0 100%;min-width:100%}
.carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:var(--surface);background:rgba(235,235,235,.06);border:1px solid rgba(235,235,235,.18);cursor:pointer;transition:background .3s var(--ease),border-color .3s}
.carousel__arrow:hover{background:rgba(235,235,235,.14);border-color:rgba(235,235,235,.42)}
.carousel__arrow svg{width:26px;height:26px;transition:transform .3s var(--ease)}
.carousel__arrow--prev{left:-64px}
.carousel__arrow--next{right:-64px}
.carousel__arrow--next:hover svg{transform:translateX(3px)}
.carousel__arrow--prev:hover svg{transform:translateX(-3px)}
.carousel__dots{display:flex;gap:10px;justify-content:center;margin-top:34px}
.carousel__dots button{width:28px;height:2px;background:var(--surface);opacity:.28;border:0;padding:0;cursor:pointer;transition:opacity .3s}
.carousel__dots button.is-active{opacity:1}
@media(max-width:1280px){.carousel__arrow--prev{left:8px}.carousel__arrow--next{right:8px}}
@media(max-width:809px){.carousel__arrow{width:44px;height:44px}.carousel__arrow svg{width:20px;height:20px}.carousel__arrow--prev{left:4px}.carousel__arrow--next{right:4px}}
@media(prefers-reduced-motion:reduce){.carousel__track{transition:transform .2s ease}}

/* ============================================================
   WEBSITES SHOWCASE — pinned stage, live embedded sites
   Asymmetric editorial composition. Two expansions layered on arrival: an
   off-centre clip window unfurls leftward to full bleed WHILE the preview
   inside scales up into place. The preview then blooms from mono into full
   colour — the work itself is the only real colour in the section.
   ============================================================ */
/* Default accent lives on the section root so elements OUTSIDE the stage
   (the dots, the counter) can resolve it too. JS retargets it to the active
   site's accent on every swap. */
.wsx{position:relative;background:var(--charcoal);color:var(--surface);
  height:calc((var(--wsx-count) * 0.85 + 1) * 100svh);
  --wsx-accent:#A8BBA2}
.wsx__pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden;
  padding:calc(var(--nav-h) + 30px) 0 30px}
.wsx__inner{width:100%;display:grid;gap:clamp(18px,2.4vw,32px)}

/* Stage. The preview sits RIGHT of centre; the index numeral and name occupy
   the left, so the composition is deliberately asymmetric rather than a centred
   box. Height is fixed so the foot copy never moves as sites swap.
   --wsx-accent is set per site from data.js (muted, low-opacity use only). */
.wsx__stage{position:relative;width:100%;height:clamp(300px,54svh,540px)}
.wsx__item{position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .45s var(--ease)}
.wsx__item.is-active{opacity:1;pointer-events:auto}

/* THE OPEN — off-centre. Collapsed is a right-weighted letterbox (46%→84% of
   the stage); active is full bleed, so the window unfurls mostly leftward.
   clip-path runs on the compositor, so nothing re-lays-out per frame. */
.wsx__frame{position:absolute;inset:0;display:block;background:#0f1111;
  clip-path:inset(24% 16% 24% 46%);
  transition:clip-path 1.1s var(--ease-expo)}
.wsx__item.is-active .wsx__frame{clip-path:inset(0% 0% 0% 0%)}

/* Full-bleed backdrop + a soft accent bloom, revealed by the wings. */
.wsx__backdrop{position:absolute;inset:0;z-index:1;
  background:radial-gradient(130% 130% at 66% 44%,#272d2e 0%,#191c1c 58%,#0f1111 100%)}
.wsx__glow{position:absolute;inset:0;z-index:2;opacity:0;
  background:radial-gradient(52% 62% at 66% 50%,var(--wsx-accent) 0%,transparent 72%);
  transition:opacity 1.4s var(--ease)}
.wsx__item.is-active .wsx__glow{opacity:.17;transition-delay:.35s}

/* THE PREVIEW — off-centre right, and it SCALES UP into place as the window
   opens. Two expansions layered: the window unfurls, the preview blooms.
   Transform only, so --wsx-s is computed once and the iframe never reflows. */
.wsx__thumb{position:absolute;z-index:3;top:50%;right:10%;
  width:min(720px,84vw);aspect-ratio:3/2;overflow:hidden;background:#0b0b0b;
  border:1px solid rgba(235,235,235,.14);box-shadow:0 44px 100px -36px rgba(0,0,0,.8);
  will-change:transform;
  transform:translateY(-50%) scale(.84);
  transition:transform 1.2s var(--ease-expo),box-shadow .6s var(--ease)}
.wsx__item.is-active .wsx__thumb{transform:translateY(-50%) scale(1);transition-delay:.06s}
.wsx__thumb iframe{position:absolute;top:0;left:0;width:1440px;height:960px;border:0;pointer-events:none;
  transform:scale(var(--wsx-s,.5));transform-origin:top left;
  filter:grayscale(1) contrast(1.06) brightness(.82);
  transition:filter 1.1s var(--ease)}
/* Colour arrives AFTER the expansion settles — the work supplies the colour. */
.wsx__item.is-active .wsx__thumb iframe{filter:grayscale(0) contrast(1.02) brightness(.96);transition-delay:.5s}
.wsx__mask{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(31,33,33,.34),rgba(31,33,33,.5));
  transition:opacity .8s var(--ease)}
.wsx__item.is-active .wsx__mask{opacity:.4;transition-delay:.5s}
.wsx__frame:hover .wsx__thumb{box-shadow:0 54px 120px -34px rgba(0,0,0,.9)}
.wsx__frame:hover iframe{filter:grayscale(0) contrast(1) brightness(1)}
.wsx__frame:hover .wsx__mask{opacity:0}
.wsx__open{position:absolute;right:14px;bottom:14px;z-index:4;pointer-events:none;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--white);
  padding:8px 13px;background:rgba(20,22,22,.78);border:1px solid var(--wsx-accent);
  opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.wsx__frame:hover .wsx__open{opacity:1;transform:none}

/* Index numeral — oversized accent watermark, left, outside the clip. */
.wsx__index{position:absolute;z-index:4;left:var(--gut);top:12%;pointer-events:none;
  font-family:var(--font-display);font-weight:700;line-height:.8;
  font-size:clamp(72px,13vw,190px);letter-spacing:-.05em;
  color:var(--wsx-accent);opacity:0;transform:translateY(26px);
  transition:opacity 1s var(--ease),transform 1.1s var(--ease-expo)}
.wsx__item.is-active .wsx__index{opacity:.2;transform:none;transition-delay:.16s}

/* Name — overlaps the preview's left edge, inverting against whatever is
   behind it. Wipes up from a mask on arrival. */
.wsx__name{position:absolute;z-index:6;left:var(--gut);top:50%;
  transform:translateY(-50%);max-width:52%;pointer-events:none;overflow:hidden;
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  font-size:clamp(38px,6.4vw,96px);line-height:.92;letter-spacing:-.035em;
  color:#fff;mix-blend-mode:difference}
.wsx__name-in{display:block;transform:translateY(105%);
  transition:transform 1.1s var(--ease-expo)}
.wsx__item.is-active .wsx__name-in{transform:none;transition-delay:.24s}

/* Foot: swapping meta on the left, fixed counter + dots on the right. */
.wsx__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.wsx__metas{position:relative;flex:1 1 auto;min-height:74px}
.wsx__meta{position:absolute;inset:0;opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.wsx__meta.is-active{opacity:1;transform:none;pointer-events:auto;transition-delay:.34s}
.wsx__rule{display:block;width:0;height:2px;background:var(--wsx-accent);margin-bottom:14px;
  transition:width 1.1s var(--ease-expo)}
.wsx__meta.is-active .wsx__rule{width:clamp(48px,7vw,104px);transition-delay:.42s}
.wsx__tags,.wsx__role{font-family:var(--font-mono);text-transform:uppercase;font-size:12.5px;
  letter-spacing:var(--ls-mono);opacity:.72;line-height:1.5}
.wsx__role{margin-top:4px;opacity:.5}

.wsx__nav{display:flex;align-items:center;gap:20px;flex:0 0 auto;padding-bottom:4px}
.wsx__count{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;opacity:.55}
.wsx__count b{opacity:1;font-weight:500}
.wsx__dots{display:flex;gap:10px}
.wsx__dots button{width:30px;height:2px;background:var(--surface);opacity:.26;border:0;padding:0;cursor:pointer;
  transition:opacity .3s,background .3s}
.wsx__dots button.is-active{opacity:1;background:var(--wsx-accent,var(--surface))}

@media(max-width:1099px){
  .wsx__stage{height:clamp(300px,46svh,440px)}
  /* Preview recentres and the name/index step out of its way on narrow screens. */
  .wsx__frame{clip-path:inset(22% 20% 22% 20%)}
  .wsx__thumb{right:50%;width:min(720px,90vw);transform:translate(50%,-50%) scale(.84)}
  .wsx__item.is-active .wsx__thumb{transform:translate(50%,-50%) scale(1)}
  .wsx__index{font-size:clamp(56px,16vw,110px);top:0}
  .wsx__name{top:auto;bottom:0;transform:none;max-width:none;font-size:clamp(30px,8.6vw,52px)}
  .wsx__metas{min-height:96px}
  .wsx__foot{align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .wsx__frame{clip-path:inset(0)!important;transition:none}
  .wsx__thumb{transform:translateY(-50%) scale(1)!important}
  .wsx__name-in,.wsx__meta{transform:none!important}
  .wsx__index{opacity:.2;transform:none!important}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1199px){
  .footer__top{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1;margin-bottom:20px}
  .p-card:nth-child(n){grid-column:span 6;margin-top:0}
  .pd-gallery figure:nth-child(n){grid-column:span 12;aspect-ratio:4/3}
}
@media (max-width:809px){
  :root{--nav-h:52px}
  .site-header{top:10px}
  .nav{width:94vw}
  .sec-head__row{flex-direction:column;align-items:flex-start;gap:14px}
  .work{grid-template-columns:1fr;gap:14px;padding-block:26px}
  .work__num{font-size:12px}
  .work__body{grid-template-columns:1fr;gap:12px}
  .work__media{display:none}
  .services{grid-template-columns:1fr}
  .team{grid-template-columns:1fr}
  .member{max-width:520px}
  .p-grid{grid-template-columns:1fr;gap:36px}
  .p-card:nth-child(n){grid-column:span 1;margin-top:0}
  .j-cards{grid-template-columns:1fr}
  .j-row{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .pd-block{grid-template-columns:1fr;gap:16px}
  .pd-block__label{position:static}
  .pd-facts{grid-template-columns:1fr 1fr}
  .footer__top{grid-template-columns:1fr}
  .corner{font-size:10px;max-width:44vw}
  .corner--tl,.corner--tr{top:calc(var(--nav-h) + 30px)}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .reveal-img{clip-path:none}
}

/* ============================================================
   PROJECTS — cinematic work bands (.pwork)
   ============================================================ */
.pworks-intro{font-family:var(--font-display);font-weight:500;font-size:clamp(20px,2.6vw,34px);line-height:1.28;letter-spacing:-.01em;max-width:24ch;color:var(--ink)}

.pwork{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,5vw,72px);align-items:center;max-width:var(--maxw);margin-inline:auto;padding:clamp(52px,8vw,104px) var(--gut);border-top:1px solid var(--line)}
.pwork--rev .pwork__media-col{order:2}

.pwork__media-col{position:relative;will-change:transform}
.pwork__index{position:absolute;top:-.5em;left:-.06em;z-index:0;pointer-events:none;font-family:var(--font-display);font-weight:700;font-size:clamp(84px,13vw,200px);line-height:.8;letter-spacing:-.05em;color:var(--ink);opacity:.06}
.pwork--rev .pwork__index{left:auto;right:-.06em}

/* media — static product shot */
.pwork__media{position:relative;z-index:1;display:block;overflow:hidden;background:#000;aspect-ratio:16/11}
.pwork__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(80%) contrast(1.05);transition:filter .7s var(--ease),transform 1.1s var(--ease)}
.pwork:hover .pwork__media img{filter:grayscale(0);transform:scale(1.045)}

/* media — live iframe preview (scaled like the home showcase) */
.pwork__media--frame{aspect-ratio:16/10;background:#0f1111;cursor:pointer}
.pwork__frame{position:absolute;inset:0;overflow:hidden}
.pwork__frame iframe{position:absolute;top:0;left:0;width:1440px;height:900px;border:0;pointer-events:none;transform-origin:0 0;transform:scale(var(--pw-s,.5));filter:grayscale(26%) contrast(1.02);transition:filter .7s var(--ease)}
.pwork:hover .pwork__frame iframe{filter:grayscale(0)}
.pwork__open{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;justify-content:flex-end;padding:16px;background:linear-gradient(0deg,rgba(15,17,17,.55),transparent 44%);opacity:0;transition:opacity .4s var(--ease)}
.pwork__media--frame:hover .pwork__open{opacity:1}
.pwork__open span{font-family:var(--font-mono);text-transform:uppercase;font-size:11px;letter-spacing:.16em;color:#fff;border:1px solid rgba(255,255,255,.65);padding:8px 13px}

/* text */
.pwork__text{position:relative;z-index:1;display:grid;gap:16px;align-content:center;max-width:58ch}
.pwork__kind{font-family:var(--font-mono);text-transform:uppercase;font-size:11px;letter-spacing:.18em;color:var(--muted)}
.pwork__name{font-family:var(--font-display);font-weight:700;text-transform:uppercase;line-height:.88;letter-spacing:-.03em;font-size:clamp(40px,6.2vw,100px)}
.pwork__name::after{content:"";display:block;width:54px;height:2px;margin-top:.3em;background:var(--accent,var(--ink))}
.pwork__discipline{font-family:var(--font-mono);text-transform:uppercase;font-size:12px;letter-spacing:.05em;color:var(--muted);margin-top:-2px}
.pwork__desc{font-family:var(--font-body);font-size:clamp(14px,1.1vw,17px);line-height:1.62;color:var(--ink);opacity:.86;max-width:54ch}
.pwork__stats{display:grid;grid-template-columns:repeat(4,auto);gap:clamp(14px,2vw,28px);justify-content:start;margin-top:4px}
.pwork__stat{font-family:var(--font-mono);text-transform:uppercase;font-size:10px;letter-spacing:.02em;color:var(--muted);line-height:1.3;max-width:11ch}
.pwork__stat span{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.4vw,32px);letter-spacing:-.02em;color:var(--ink);margin-bottom:3px}
.pwork__tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:2px}
.pwork__tags span{font-family:var(--font-mono);text-transform:uppercase;font-size:10px;letter-spacing:.08em;color:var(--muted);border:1px solid var(--line);padding:6px 11px}
.pwork__cta{margin-top:10px}

@media (max-width:860px){
  .pwork{grid-template-columns:1fr;gap:22px;padding-block:clamp(40px,11vw,64px)}
  .pwork--rev .pwork__media-col{order:0}
  .pwork__media-col{transform:none!important}
  .pwork__index{font-size:clamp(64px,20vw,110px);top:-.42em}
  .pwork__stats{grid-template-columns:1fr 1fr;gap:14px}
}
@media (prefers-reduced-motion:reduce){.pwork__media-col{transform:none!important}}

/* ============================================================
   HOME — services editorial list (.svcs)
   ============================================================ */
.svcs{display:grid}
.svc{position:relative;display:grid;grid-template-columns:56px minmax(220px,.92fr) 1.28fr 34px;gap:clamp(16px,3vw,52px);align-items:start;padding:clamp(24px,3.2vw,42px) 0;border-top:1px solid var(--line);color:var(--ink);transition:padding-left .5s var(--ease)}
.svc:last-child{border-bottom:1px solid var(--line)}
.svc__idx{font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;color:var(--muted);padding-top:.55em}
.svc__title{font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:-.02em;line-height:1.02;font-size:clamp(21px,2.5vw,36px);transition:color .35s var(--ease)}
.svc__desc{font-family:var(--font-body);font-size:clamp(13px,1vw,15.5px);line-height:1.62;color:var(--ink);opacity:.82;max-width:54ch;padding-top:.5em}
.svc__mark{color:var(--muted);opacity:0;transform:translate(-7px,7px);transition:opacity .4s var(--ease),transform .4s var(--ease),color .35s var(--ease);padding-top:.5em}
.svc__mark svg{width:22px;height:22px;display:block}
/* accent line that draws across the row top on hover */
.svc::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--ink);transition:width .55s var(--ease)}
.svc:hover{padding-left:clamp(8px,1.4vw,22px)}
.svc:hover::before{width:100%}
.svc:hover .svc__title{color:var(--black)}
.svc:hover .svc__mark{opacity:1;transform:none;color:var(--ink)}
.svc:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media (max-width:860px){
  .svc{grid-template-columns:auto 1fr;gap:6px 16px;padding-block:22px}
  .svc__idx{grid-row:1;padding-top:.15em}
  .svc__title{grid-column:2}
  .svc__desc{grid-column:2;max-width:none}
  .svc__mark{display:none}
}

/* ---------- Contact icons (email / call / whatsapp) ---------- */
.nav__contact{display:flex;justify-content:center;gap:22px;padding:12px 0 4px;border-top:1px solid var(--line-light);margin-top:4px}
.nav__contact a{color:var(--surface);opacity:.72;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.nav__contact a:hover{opacity:1;transform:translateY(-1px)}
.nav__contact svg{width:17px;height:17px;display:block}
.footer__contact{display:flex;gap:16px;margin-top:14px}
.footer__contact a{color:currentColor;opacity:.6;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.footer__contact a:hover{opacity:1;transform:translateY(-1px)}
.footer__contact svg{width:18px;height:18px;display:block}

/* ---------- Interactive 360° viewer media (Spin 360) ---------- */
.pwork__media--viewer{position:relative;z-index:1;aspect-ratio:16/11;background:transparent;overflow:hidden}
.pwork__media--viewer iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:transparent}
.pwork__hint,.of-band__hint{position:absolute;left:14px;bottom:12px;z-index:2;pointer-events:none;font-family:var(--font-mono);text-transform:uppercase;font-size:10px;letter-spacing:.14em;color:rgba(235,235,235,.8);background:rgba(20,21,21,.4);padding:5px 9px}
.of-band__media--viewer{position:relative;aspect-ratio:16/11;background:transparent;overflow:hidden}
.of-band__media--viewer iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:transparent}