@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:500 800;font-display:swap;src:url(/assets/fonts/bricolage.woff2) format("woff2")}

:root{
  --g:#F5F4F1; --panel:#FBFAF7; --ink:#1a1c1e; --soft:#666b70; --line:#e0ddd5;
  --acc:#B0562E; --tech:#4a5462;
  --disp:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --sans:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
/* canvas pinned to the light gallery — the work is the color */
*{box-sizing:border-box} body{margin:0;background:var(--g)}
.site{background:var(--g);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}
a{color:inherit}
img{max-width:100%;display:block}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--g) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);transition:transform .28s ease}
.nav.hide{transform:translateY(-100%)}
.nav .in{display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px}
.lg{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;font-size:18px;text-decoration:none}
.lk{display:flex;align-items:center;gap:24px;font-size:14px}
.lk a{text-decoration:none;color:var(--soft)} .lk a:hover{color:var(--ink)}
.lk a.cta{background:var(--ink);color:#fff;font-weight:650;padding:10px 18px;border-radius:9px}

/* hero */
.hero{position:relative;height:min(72vh,560px);overflow:hidden;background:#ccc center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.32) 0%,rgba(0,0,0,.08) 36%,rgba(0,0,0,.42) 62%,rgba(0,0,0,.82) 100%)}
.hero .txt h1,.hero .txt .eb,.hero .txt .sub{text-shadow:0 1px 14px rgba(0,0,0,.35)}
.hero .txt{position:absolute;z-index:2;left:0;right:0;bottom:0;padding-bottom:clamp(34px,5vw,54px);color:#fff}
.eb{font-family:var(--mono);font-size:clamp(10.5px,1.4vw,12.5px);letter-spacing:.14em;text-transform:uppercase;opacity:.92;margin:0 0 16px}
.hero h1{font-family:var(--disp);font-weight:800;letter-spacing:-.028em;font-size:clamp(34px,5.4vw,62px);line-height:1.0;margin:0 0 16px;max-width:18ch;text-wrap:balance}
.hero h1 em{font-style:normal;color:#E5A278}
.hero .sub{font-size:clamp(15px,1.8vw,17px);line-height:1.5;max-width:52ch;margin:0 0 22px;color:rgba(255,255,255,.88)}
.hero .go{display:inline-block;background:var(--acc);color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:14px 26px;border-radius:10px}

/* stat strip */
.strip{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);background:var(--panel)}
.stat{padding:22px 26px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat .v{font-family:var(--disp);font-weight:800;font-size:23px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);margin-top:5px}

/* sections */
section{padding:clamp(48px,6vw,78px) 0}
.sec-lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);font-weight:600;margin:0 0 12px}
h2{font-family:var(--disp);font-weight:800;letter-spacing:-.025em;font-size:clamp(26px,3.4vw,40px);line-height:1.05;margin:0 0 14px;text-wrap:balance;max-width:24ch}
.lead{font-size:16px;color:var(--soft);max-width:58ch;line-height:1.6;margin:0}

/* work grid */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0}
.filters button{font-family:var(--mono);font-size:11.5px;padding:7px 14px;border:1px solid var(--line);border-radius:999px;color:var(--soft);background:transparent;cursor:pointer}
.filters button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;background:var(--line);border-radius:12px;overflow:hidden}
.cell{position:relative;overflow:hidden;background:#ccc center/cover no-repeat;min-height:230px;display:block;text-decoration:none}
.cell::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.68) 100%)}
.cell.big{grid-column:span 3;min-height:330px} .cell.med{grid-column:span 3} .cell.third{grid-column:span 2}
.cell.hidden{display:none}
.cap{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;z-index:2;color:#fff}
.cap .meta{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;display:flex;justify-content:space-between;gap:10px;color:#f0d9c9;margin-bottom:5px}
.cap .t{font-family:var(--disp);font-weight:700;font-size:16.5px;letter-spacing:-.01em;line-height:1.15}
.cap .cs{display:inline-block;margin-top:7px;font-size:11.5px;font-weight:650;color:#fff;border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:1px}

/* services */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.svc{background:var(--panel);padding:24px 24px 26px}
.svc .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--acc);margin:0 0 10px}
.svc h3{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:-.01em;margin:0 0 7px}
.svc p{font-size:13.5px;color:var(--soft);line-height:1.55;margin:0}
.sessions{margin-top:16px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:10px;padding:20px 22px;display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.sessions b{font-family:var(--disp);font-size:16px}
.sessions span{font-size:14px;color:var(--soft);max-width:64ch;line-height:1.55}

/* studio */
.studio{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start}
.studio .story p{font-size:15px;color:var(--soft);line-height:1.65;margin:0 0 14px;max-width:56ch}
.studio .story p b{color:var(--ink);font-weight:650}
.people{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.person{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px}
.person .ph{aspect-ratio:1;border-radius:10px;background:#E7E3D9;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:800;font-size:42px;color:var(--acc);margin-bottom:14px}
.person h3{font-family:var(--disp);font-weight:700;font-size:17px;margin:0 0 2px}
.person .role{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--acc);font-weight:650;margin:0 0 10px}
.person p{font-size:13.5px;color:var(--soft);line-height:1.55;margin:0}

/* contact / cta band */
.end{background:var(--ink);color:var(--g);border-radius:16px;padding:clamp(36px,5vw,58px);display:grid;grid-template-columns:1.2fr .8fr;gap:34px;align-items:center}
.end h2{color:#fff;margin:0 0 12px}
.end p{color:rgba(245,244,241,.75);font-size:15.5px;line-height:1.6;margin:0 0 20px;max-width:44ch}
.end .go{display:inline-block;background:var(--acc);color:#fff;text-decoration:none;font-weight:700;font-size:15.5px;padding:15px 28px;border-radius:10px}
.end .off{font-size:14px;line-height:1.7;color:rgba(245,244,241,.8)}
.end .off b{display:block;color:#fff;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 4px}
.end .off a{color:#fff}
.end .off .gap{display:block;height:14px}

.foot{border-top:1px solid var(--line);padding-top:26px;padding-bottom:42px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--soft)}
.foot .lg{font-size:15px}

/* reveal (JS-gated; reduced-motion users never see hidden content) */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}

@media (max-width:860px){
  .grid{grid-template-columns:1fr 1fr} .cell.big,.cell.med,.cell.third{grid-column:span 2;min-height:210px}
  .strip{grid-template-columns:repeat(2,1fr)} .stat:nth-child(2){border-right:0}
  .svcs{grid-template-columns:1fr}
  .studio{grid-template-columns:1fr;gap:26px}
  .end{grid-template-columns:1fr}
  .lk a:not(.cta){display:none}
}
@media (max-width:520px){ .grid{grid-template-columns:1fr} .people{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}