/* ============================================================
   MERIDIAN — shared design system
   Used by every page (index, projects, project, services,
   studio, journal, contact)
   ============================================================ */

:root{
  --paper:#FAFAFA;
  --ink:#111111;
  --slate:#666666;
  --concrete:#D8D8D8;
  --line:#E6E6E2;
  --line-soft:#EDEDE9;
  --card:#FFFFFF;
  --deep:#0E0E0E;
  --deep-2:#161616;
  --paper-dim:#F2F2EF;

  --display:'Archivo', sans-serif;
  --body:'Instrument Sans', sans-serif;
  --mono:'Space Mono', monospace;

  --pad: clamp(22px, 5vw, 88px);
  --maxw: 1440px;
  --ease: cubic-bezier(.19,1,.22,1);
}

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

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }

/* ---------- utility labels / mono annotations ---------- */
.mono{ font-family:var(--mono); font-weight:400; letter-spacing:.04em; }
.eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--slate); display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--ink); display:inline-block; opacity:.55; }
.index{ font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; color:var(--slate); text-transform:uppercase; }

.dim{ position:relative; display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; color:var(--slate); }
.dim .rule{ position:relative; height:1px; background:var(--concrete); flex:1; }
.dim .rule::before,.dim .rule::after{ content:""; position:absolute; top:-3px; width:1px; height:7px; background:var(--slate); }
.dim .rule::before{ left:0; } .dim .rule::after{ right:0; }

/* ---------- reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s }
.reveal.d3{ transition-delay:.24s } .reveal.d4{ transition-delay:.32s }
.reveal.d5{ transition-delay:.40s }

/* ============== NAV ============== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:90;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--pad);
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
/* transparent-over-hero variant (homepage only) */
.nav.over{ mix-blend-mode:difference; color:#fff; }
/* default solid look for subpages */
.nav.plain{ background:rgba(250,250,250,.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); color:var(--ink); }
.nav.solid{ mix-blend-mode:normal; color:var(--ink); background:rgba(250,250,250,.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); padding-block:16px; }
.brand{ font-family:var(--display); font-weight:800; font-size:1.12rem; letter-spacing:.28em; }
.brand sup{ font-family:var(--mono); font-size:.5rem; letter-spacing:.1em; top:-1em; opacity:.7; }
.nav-menu{ display:flex; gap:38px; align-items:center; }
.nav-link{ font-size:.82rem; letter-spacing:.02em; position:relative; padding:4px 0; }
.nav-link::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:currentColor; transition:width .45s var(--ease); }
.nav-link:hover::after, .nav-link.active::after{ width:100% }
.nav-link.active{ font-weight:600; }
.nav-cta{
  font-size:.82rem; letter-spacing:.04em; border:1px solid currentColor; padding:11px 22px; border-radius:40px;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.nav.solid .nav-cta:hover, .nav.plain .nav-cta:hover{ background:var(--ink); color:var(--paper); }
.nav.over:not(.solid) .nav-cta:hover{ background:#fff; color:#000; }
.burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; color:inherit; }
.burger span{ width:24px; height:1.6px; background:currentColor; transition:.4s var(--ease); }

.sheet{ position:fixed; inset:0; z-index:120; background:var(--paper); transform:translateY(-100%); visibility:hidden; pointer-events:none; transition:transform .7s var(--ease), visibility .7s var(--ease); display:flex; flex-direction:column; padding:90px var(--pad) 40px; }
.sheet.open{ transform:none; visibility:visible; pointer-events:auto; }
.sheet a{ font-family:var(--display); font-weight:700; font-size:2.4rem; letter-spacing:-.02em; padding:14px 0; border-bottom:1px solid var(--line); }
.sheet .close{ position:absolute; top:24px; right:var(--pad); background:none; border:0; font-family:var(--mono); font-size:.8rem; letter-spacing:.1em; cursor:pointer; }

/* ============== BUTTONS ============== */
.btn{
  font-family:var(--body); font-size:.86rem; letter-spacing:.03em; cursor:pointer;
  padding:15px 30px; border-radius:44px; border:1px solid; display:inline-flex; align-items:center; gap:10px;
  transition:transform .5s var(--ease), background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.btn .arr{ transition:transform .5s var(--ease); }
.btn:hover .arr{ transform:translateX(5px); }
.btn-light{ background:#fff; color:#0b0b0b; border-color:#fff; }
.btn-light:hover{ background:transparent; color:#fff; }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.btn-ghost:hover{ background:#fff; color:#0b0b0b; border-color:#fff; }
.btn-dark{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn-dark:hover{ background:transparent; color:var(--ink); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--paper); }
.btn-sm{ padding:11px 22px; font-size:.8rem; }

/* ============== IMAGE PLACEHOLDERS ============== */
.ph{ width:100%; height:100%; background:var(--concrete); background-size:cover; background-position:center;
     filter:grayscale(.55) contrast(1.03); transition:filter .9s var(--ease), transform 1.4s var(--ease); position:relative; }
.ph::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 80% at 30% 10%, #efefec 0%, #d9d9d4 45%, #c2c2bc 100%),
    repeating-linear-gradient(135deg, rgba(0,0,0,.015) 0 2px, transparent 2px 5px);
}

/* ============== HERO (homepage) ============== */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media .ph{ position:absolute; inset:0; transform:scale(1.12); }
.hero-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,10,.42) 0%, rgba(10,10,10,.12) 38%, rgba(10,10,10,.05) 60%, rgba(10,10,10,.55) 100%); }
.hero-grid-overlay{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%; opacity:.5; mix-blend-mode:overlay; }
.hero-inner{ position:relative; z-index:3; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) clamp(40px,6vh,80px); color:#fff; }
.hero-top{ position:absolute; top:clamp(96px,14vh,150px); left:var(--pad); right:var(--pad); z-index:3; display:flex; justify-content:space-between; color:#fff; }
.hero-top .eyebrow{ color:rgba(255,255,255,.82); }
.hero-top .eyebrow::before{ background:#fff; opacity:.6; }
.hero-coord{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-align:right; color:rgba(255,255,255,.7); line-height:2; }
.hero h1{ font-family:var(--display); font-weight:800; font-size:clamp(2.7rem, 8.4vw, 8.6rem); line-height:.94; letter-spacing:-.035em; max-width:14ch; }
.hero h1 .ln{ display:block; overflow:hidden; }
.hero h1 .ln > span{ display:block; transform:translateY(110%); transition:transform 1.1s var(--ease); }
.hero.loaded h1 .ln > span{ transform:none; }
.hero h1 .ln:nth-child(2) > span{ transition-delay:.12s }
.hero h1 .ln:nth-child(3) > span{ transition-delay:.24s }
.hero h1 em{ font-style:normal; color:var(--concrete); }
.hero-foot{ margin-top:clamp(26px,4vh,46px); display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:end; }
.hero-sub{ max-width:46ch; font-size:1.05rem; line-height:1.55; color:rgba(255,255,255,.86); }
.hero-actions{ display:flex; gap:14px; justify-self:end; align-items:center; flex-wrap:wrap; }
.scroll-ind{ position:absolute; left:var(--pad); bottom:26px; z-index:3; display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.8); font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; }
.scroll-ind .bar{ width:1px; height:46px; background:rgba(255,255,255,.4); position:relative; overflow:hidden; }
.scroll-ind .bar::after{ content:""; position:absolute; inset:0; background:#fff; transform:translateY(-100%); animation:scrolldrop 2.4s var(--ease) infinite; }
@keyframes scrolldrop{ 0%{transform:translateY(-100%)} 55%{transform:translateY(100%)} 100%{transform:translateY(100%)} }

/* ============== PAGE HEADER (subpages) ============== */
.pagehead{ padding-top:clamp(150px,20vh,230px); padding-bottom:clamp(40px,7vh,80px); }
.pagehead .crumb{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--slate); text-transform:uppercase; margin-bottom:34px; display:flex; gap:10px; align-items:center; }
.pagehead .crumb a:hover{ color:var(--ink); }
.pagehead h1{ font-family:var(--display); font-weight:800; font-size:clamp(2.8rem,9vw,8rem); line-height:.92; letter-spacing:-.04em; }
.pagehead .lead{ margin-top:30px; max-width:54ch; font-size:1.12rem; line-height:1.6; color:var(--slate); }
.pagehead .headrow{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; }
.pagehead .dim{ width:260px; }

/* ============== INDEX BAR ============== */
.indexbar{ border-block:1px solid var(--line); }
.indexbar .wrap{ display:grid; grid-template-columns:auto 1fr auto; gap:40px; align-items:center; padding-block:22px; }
.indexbar p{ font-size:.92rem; color:var(--slate); max-width:60ch; }
.indexbar .k{ color:var(--ink); }

/* ============== SECTION SCAFFOLD ============== */
.section{ padding-block:clamp(72px,11vh,150px); }
.section.tight{ padding-block:clamp(54px,8vh,100px); }
.section.bordered{ border-top:1px solid var(--line); }
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:clamp(40px,6vh,72px); flex-wrap:wrap; }
.sec-head h2{ font-family:var(--display); font-weight:700; font-size:clamp(1.9rem,4.4vw,3.6rem); line-height:1.02; letter-spacing:-.025em; max-width:18ch; }
.sec-head .meta{ text-align:right; }

/* ============== PROJECT CARDS (homepage + portfolio) ============== */
.projects-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(18px,2.4vw,34px); }
.proj{ position:relative; display:block; }
.proj .frame{ position:relative; overflow:hidden; background:var(--concrete); }
.proj .frame .ph{ position:absolute; inset:0; }
.proj:hover .ph{ transform:scale(1.06); filter:grayscale(0) contrast(1.03); }
.proj .num{ position:absolute; top:16px; left:16px; z-index:2; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; color:#fff; mix-blend-mode:difference; }
.proj .cat{ position:absolute; top:16px; right:16px; z-index:2; font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; padding:6px 12px; border:1px solid rgba(255,255,255,.5); border-radius:30px; backdrop-filter:blur(4px); }
.proj .overlay{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:24px; color:#fff; background:linear-gradient(0deg, rgba(8,8,8,.74), rgba(8,8,8,0)); }
.proj .reveal-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; }
.proj h3{ font-family:var(--display); font-weight:600; font-size:clamp(1.25rem,2vw,1.75rem); letter-spacing:-.01em; line-height:1.05; }
.proj .loc{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; color:rgba(255,255,255,.82); margin-top:8px; }
.proj .deet{ max-height:0; overflow:hidden; opacity:0; transition:max-height .6s var(--ease), opacity .5s var(--ease), margin .6s var(--ease); }
.proj:hover .deet{ max-height:90px; opacity:1; margin-top:14px; }
.proj .deet .dl{ display:flex; gap:26px; font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:rgba(255,255,255,.85); }
.proj .deet .dl span b{ display:block; color:rgba(255,255,255,.55); font-weight:400; margin-bottom:3px; }
.proj .go{ width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.55); display:grid; place-items:center; flex:none; transition:.5s var(--ease); }
.proj:hover .go{ background:#fff; color:#0b0b0b; }
.p1{ grid-column:1 / 8; } .p1 .frame{ aspect-ratio:16/13; }
.p2{ grid-column:8 / 13; align-self:end; } .p2 .frame{ aspect-ratio:3/4; }
.p3{ grid-column:1 / 6; } .p3 .frame{ aspect-ratio:4/5; }
.p4{ grid-column:6 / 13; } .p4 .frame{ aspect-ratio:16/10; }

/* ============== PORTFOLIO LISTING ============== */
.filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:clamp(34px,5vh,56px); }
.chip{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; padding:10px 20px; border:1px solid var(--line); border-radius:40px; cursor:pointer; color:var(--slate); background:transparent; transition:.4s var(--ease); }
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.portfolio{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,48px) clamp(20px,2.6vw,38px); }
.pcard{ display:block; }
.pcard.hide{ display:none; }
.pcard .frame{ position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--concrete); }
.pcard .frame .ph{ position:absolute; inset:0; }
.pcard:hover .ph{ transform:scale(1.05); filter:grayscale(0); }
.pcard .frame .cat{ position:absolute; top:16px; left:16px; z-index:2; font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; padding:6px 12px; border:1px solid rgba(255,255,255,.5); border-radius:30px; backdrop-filter:blur(4px); }
.pcard .frame .open{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .5s var(--ease); }
.pcard .frame .open span{ background:#fff; color:#0b0b0b; border-radius:40px; padding:13px 26px; font-size:.8rem; letter-spacing:.04em; display:inline-flex; gap:9px; align-items:center; }
.pcard:hover .frame .open{ opacity:1; }
.pcard .pmeta{ display:flex; justify-content:space-between; align-items:baseline; margin-top:18px; gap:16px; border-top:1px solid var(--line); padding-top:16px; }
.pcard h3{ font-family:var(--display); font-weight:600; font-size:clamp(1.3rem,2vw,1.7rem); letter-spacing:-.015em; }
.pcard .pl{ font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--slate); text-align:right; line-height:1.7; }

/* ============== PROJECT DETAIL ============== */
.pd-title{ font-family:var(--display); font-weight:800; font-size:clamp(2.6rem,8vw,7rem); line-height:.94; letter-spacing:-.04em; }
.pd-tag{ display:inline-block; font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); border:1px solid var(--line); border-radius:40px; padding:8px 18px; margin-bottom:26px; }
.pd-feature{ position:relative; overflow:hidden; aspect-ratio:16/9; background:var(--concrete); margin-top:clamp(34px,5vh,56px); }
.pd-feature .ph{ position:absolute; inset:0; transform:scale(1.04); }
.pd-body{ display:grid; grid-template-columns:1.45fr 1fr; gap:clamp(40px,7vw,110px); align-items:start; padding-block:clamp(54px,8vh,100px); }
.pd-desc p{ font-size:1.1rem; line-height:1.75; color:var(--ink); }
.pd-desc p.lead{ font-family:var(--display); font-weight:500; font-size:clamp(1.3rem,2.3vw,1.85rem); line-height:1.3; letter-spacing:-.01em; margin-bottom:30px; }
.pd-desc p + p{ margin-top:22px; color:var(--slate); }
.pd-facts{ position:sticky; top:110px; }
.pd-facts .ft{ display:flex; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid var(--line); }
.pd-facts .ft b{ font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); font-weight:400; }
.pd-facts .ft span{ font-size:1rem; text-align:right; }
.pd-facts .ft:first-child{ border-top:1px solid var(--ink); }
.pd-cta{ display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }

.gallery{ columns:3; column-gap:clamp(14px,2vw,26px); }
.gallery .gi{ break-inside:avoid; margin-bottom:clamp(14px,2vw,26px); position:relative; overflow:hidden; background:var(--concrete); cursor:zoom-in; }
.gallery .gi .ph{ position:relative; transition:filter .8s var(--ease), transform 1.2s var(--ease); }
.gallery .gi:hover .ph{ transform:scale(1.04); filter:grayscale(0); }
.gallery .gi .zoom{ position:absolute; bottom:12px; right:12px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.9); color:#0b0b0b; display:grid; place-items:center; opacity:0; transform:scale(.7); transition:.45s var(--ease); font-size:.8rem; }
.gallery .gi:hover .zoom{ opacity:1; transform:none; }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:120; background:rgba(8,8,8,.96); display:none; align-items:center; justify-content:center; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:88vw; max-height:84vh; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.lightbox .lb-close{ position:absolute; top:24px; right:var(--pad); color:#fff; font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; background:none; border:0; cursor:pointer; }
.lightbox .lb-count{ position:absolute; top:26px; left:var(--pad); color:rgba(255,255,255,.7); font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; }
.lightbox .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:none; color:#fff; cursor:pointer; font-size:1.2rem; transition:.4s var(--ease); }
.lightbox .lb-nav:hover{ background:#fff; color:#0b0b0b; }
.lightbox .lb-prev{ left:clamp(16px,3vw,46px); } .lightbox .lb-next{ right:clamp(16px,3vw,46px); }

/* next project banner */
.nextproj{ position:relative; overflow:hidden; min-height:54vh; display:flex; align-items:center; }
.nextproj .ph{ position:absolute; inset:0; transform:scale(1.06); }
.nextproj::after{ content:""; position:absolute; inset:0; background:rgba(8,8,8,.5); }
.nextproj .np-inner{ position:relative; z-index:2; color:#fff; }
.nextproj .np-lbl{ font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.75); }
.nextproj h2{ font-family:var(--display); font-weight:800; font-size:clamp(2.4rem,7vw,6rem); line-height:.95; letter-spacing:-.03em; margin:18px 0 22px; }

/* ============== PHILOSOPHY ============== */
.philo{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(40px,7vw,110px); align-items:start; }
.philo h2{ font-family:var(--display); font-weight:700; font-size:clamp(2rem,4.8vw,4.2rem); line-height:1.02; letter-spacing:-.03em; }
.philo h2 em{ font-style:normal; color:var(--concrete); }
.philo-right p{ color:var(--slate); font-size:1.08rem; line-height:1.7; }
.philo-right p + p{ margin-top:22px; }
.philo-sign{ margin-top:34px; display:flex; align-items:center; gap:16px; }
.philo-sign .nm{ font-family:var(--display); font-weight:600; font-size:1.05rem; }
.philo-sign .rl{ font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; color:var(--slate); text-transform:uppercase; }
.philo .dim{ margin-top:42px; max-width:380px; }

/* ============== PROCESS ============== */
.process{ border-top:1px solid var(--line); }
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.step{ padding:clamp(30px,4vw,52px) clamp(20px,2.4vw,40px) clamp(34px,5vw,64px); border-left:1px solid var(--line); position:relative; }
.step:first-child{ border-left:0; padding-left:0; }
.step .stnum{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--slate); }
.step .icon{ width:46px; height:46px; margin:26px 0 24px; }
.step .icon svg{ width:100%; height:100%; stroke:var(--ink); stroke-width:1.2; fill:none; }
.step h3{ font-family:var(--display); font-weight:600; font-size:1.32rem; letter-spacing:-.01em; margin-bottom:12px; }
.step p{ color:var(--slate); font-size:.95rem; line-height:1.6; }
.step .bar{ position:absolute; top:0; left:0; height:2px; width:0; background:var(--ink); transition:width 1.1s var(--ease); }
.step.in .bar{ width:100%; }

/* ============== STATS ============== */
.stats{ background:var(--deep); color:#fff; }
.stats .wrap{ padding-block:clamp(64px,9vh,120px); }
.stats .eyebrow{ color:rgba(255,255,255,.7); }
.stats .eyebrow::before{ background:#fff; opacity:.5; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; margin-top:clamp(40px,6vh,68px); }
.stat{ border-top:1px solid rgba(255,255,255,.16); padding-top:24px; }
.stat .n{ font-family:var(--display); font-weight:700; font-size:clamp(2.6rem,6.4vw,6rem); line-height:.9; letter-spacing:-.03em; }
.stat .n .suf{ color:var(--concrete); }
.stat .l{ font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-top:18px; }

/* ============== JOURNAL ============== */
.journal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,38px); }
.art{ display:block; }
.art .frame{ position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--concrete); margin-bottom:22px; }
.art .frame .ph{ position:absolute; inset:0; }
.art:hover .ph{ transform:scale(1.05); filter:grayscale(.2); }
.art .top{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; color:var(--slate); text-transform:uppercase; margin-bottom:14px; }
.art h3{ font-family:var(--display); font-weight:600; font-size:1.32rem; line-height:1.18; letter-spacing:-.015em; max-width:24ch; }
.art .more{ display:inline-flex; align-items:center; gap:9px; margin-top:18px; font-size:.84rem; }
.art .more .u{ position:relative; }
.art .more .u::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.art:hover .more .u::after{ transform:scaleX(1); }
.art:hover .more .arr{ transform:translateX(5px); }
.art .more .arr{ transition:transform .5s var(--ease); }

/* featured article (journal page) */
.feat-art{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(30px,5vw,72px); align-items:center; border:1px solid var(--line); background:var(--card); }
.feat-art .frame{ position:relative; overflow:hidden; aspect-ratio:5/4; background:var(--concrete); }
.feat-art .frame .ph{ position:absolute; inset:0; }
.feat-art:hover .ph{ transform:scale(1.04); }
.feat-art .fa-body{ padding:clamp(26px,4vw,60px) clamp(26px,4vw,60px) clamp(26px,4vw,60px) 0; }
.feat-art h3{ font-family:var(--display); font-weight:700; font-size:clamp(1.7rem,3.2vw,2.8rem); line-height:1.08; letter-spacing:-.02em; margin:18px 0; }
.feat-art p{ color:var(--slate); font-size:1.04rem; max-width:48ch; }

/* ============== TESTIMONIALS ============== */
.testi{ background:var(--paper-dim); border-block:1px solid var(--line); }
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,32px); margin-top:clamp(40px,6vh,64px); }
.quote{ background:var(--card); border:1px solid var(--line); padding:clamp(26px,3vw,40px); display:flex; flex-direction:column; justify-content:space-between; min-height:300px; }
.quote .mark{ font-family:var(--display); font-weight:800; font-size:3rem; line-height:.5; color:var(--concrete); margin-bottom:18px; }
.quote p{ font-size:1.06rem; line-height:1.55; color:var(--ink); }
.quote .who{ margin-top:28px; padding-top:20px; border-top:1px solid var(--line); }
.quote .who .nm{ font-family:var(--display); font-weight:600; font-size:.98rem; }
.quote .who .rl{ font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; color:var(--slate); text-transform:uppercase; margin-top:5px; }

/* ============== SERVICES PAGE ============== */
.svc{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.6vw,40px); }
.svc-card{ border:1px solid var(--line); background:var(--card); padding:clamp(28px,3.4vw,52px); display:flex; flex-direction:column; min-height:340px; }
.svc-card .snum{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--slate); }
.svc-card h3{ font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,2.6vw,2.2rem); letter-spacing:-.02em; margin:18px 0 14px; }
.svc-card p{ color:var(--slate); line-height:1.65; }
.svc-card ul{ list-style:none; margin-top:auto; padding-top:24px; display:grid; gap:11px; }
.svc-card ul li{ font-family:var(--mono); font-size:.78rem; letter-spacing:.04em; color:var(--ink); display:flex; gap:12px; align-items:baseline; }
.svc-card ul li::before{ content:"—"; color:var(--concrete); }

.pricing-row{ display:grid; grid-template-columns:auto 1fr auto; gap:30px; align-items:center; padding:28px 0; border-bottom:1px solid var(--line); }
.pricing-row:first-child{ border-top:1px solid var(--ink); }
.pricing-row .pr-n{ font-family:var(--mono); font-size:.74rem; letter-spacing:.12em; color:var(--slate); }
.pricing-row h4{ font-family:var(--display); font-weight:600; font-size:clamp(1.2rem,2vw,1.7rem); letter-spacing:-.01em; }
.pricing-row p{ color:var(--slate); font-size:.96rem; max-width:52ch; margin-top:6px; }
.pricing-row .pr-t{ font-family:var(--mono); font-size:.8rem; color:var(--ink); text-align:right; white-space:nowrap; }

/* ============== STUDIO PAGE ============== */
.statement{ font-family:var(--display); font-weight:600; font-size:clamp(1.8rem,4.4vw,3.6rem); line-height:1.18; letter-spacing:-.02em; max-width:20ch; }
.statement em{ font-style:normal; color:var(--concrete); }
.studio-img{ position:relative; overflow:hidden; aspect-ratio:21/9; background:var(--concrete); }
.studio-img .ph{ position:absolute; inset:0; transform:scale(1.04); }
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,40px); }
.value h3{ font-family:var(--display); font-weight:600; font-size:1.3rem; letter-spacing:-.01em; margin-bottom:12px; }
.value .vn{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--slate); }
.value p{ color:var(--slate); line-height:1.65; margin-top:8px; }
.value{ border-top:1px solid var(--ink); padding-top:22px; }
.team{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,30px); }
.member .frame{ position:relative; overflow:hidden; aspect-ratio:3/4; background:var(--concrete); margin-bottom:16px; }
.member .frame .ph{ position:absolute; inset:0; filter:grayscale(1) contrast(1.02); }
.member:hover .ph{ filter:grayscale(.2); transform:scale(1.04); }
.member h3{ font-family:var(--display); font-weight:600; font-size:1.1rem; }
.member .role{ font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; color:var(--slate); text-transform:uppercase; margin-top:5px; }
.awards{ display:grid; gap:0; }
.award{ display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:baseline; padding:20px 0; border-bottom:1px solid var(--line); }
.award:first-child{ border-top:1px solid var(--ink); }
.award .ay{ font-family:var(--mono); font-size:.8rem; color:var(--slate); }
.award .at{ font-family:var(--display); font-weight:500; font-size:clamp(1.05rem,1.8vw,1.4rem); }
.award .ao{ font-family:var(--mono); font-size:.74rem; color:var(--slate); text-align:right; }

/* ============== CONTACT PAGE ============== */
.contact-cta{ font-family:var(--display); font-weight:700; font-size:clamp(2.1rem,6.6vw,6rem); line-height:.98; letter-spacing:-.035em; max-width:16ch; }
.contact-cta em{ font-style:normal; color:var(--concrete); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,96px); margin-top:clamp(46px,7vh,84px); align-items:start; }
.contact-info p{ color:var(--slate); font-size:1.04rem; line-height:1.7; max-width:42ch; }
.contact-info .lines{ margin-top:32px; display:grid; gap:18px; }
.contact-info .lines .row{ display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:14px; }
.contact-info .lines .row b{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); font-weight:400; }
.contact-info .lines .row span{ font-size:.98rem; }
.form{ display:grid; gap:22px; }
.field{ position:relative; }
.field label{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); display:block; margin-bottom:10px; }
.field input,.field textarea,.field select{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--ink); padding:10px 0;
  font-family:var(--body); font-size:1.02rem; color:var(--ink); outline:none; transition:border-color .4s var(--ease);
}
.field textarea{ resize:vertical; min-height:90px; }
.field input::placeholder,.field textarea::placeholder{ color:#b4b4ae; }
.form .two{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.form .btn{ justify-self:start; margin-top:6px; }
.offices{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,40px); }
.office{ border-top:1px solid var(--ink); padding-top:22px; }
.office h3{ font-family:var(--display); font-weight:600; font-size:1.3rem; }
.office .ot{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--slate); text-transform:uppercase; }
.office address{ font-style:normal; color:var(--slate); line-height:1.7; margin-top:12px; font-size:.96rem; }

/* ============== FOOTER ============== */
.footer{ background:var(--deep); color:rgba(255,255,255,.85); }
.footer .wrap{ padding-block:clamp(56px,8vh,96px) 34px; }
.footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:clamp(40px,6vh,72px); border-bottom:1px solid rgba(255,255,255,.14); }
.footer .fbrand{ font-family:var(--display); font-weight:800; font-size:1.5rem; letter-spacing:.22em; color:#fff; }
.footer .ftag{ margin-top:20px; color:rgba(255,255,255,.6); max-width:34ch; font-size:.96rem; line-height:1.6; }
.footer h4{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:22px; font-weight:400; }
.footer ul{ list-style:none; display:grid; gap:13px; }
.footer ul a{ font-size:.95rem; color:rgba(255,255,255,.82); transition:color .3s var(--ease); }
.footer ul a:hover{ color:#fff; }
.footer-bot{ display:flex; justify-content:space-between; align-items:center; padding-top:30px; gap:20px; flex-wrap:wrap; }
.footer-bot .mono{ font-size:.7rem; letter-spacing:.1em; color:rgba(255,255,255,.45); text-transform:uppercase; }
.socials{ display:flex; gap:24px; }
.socials a{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.socials a:hover{ color:#fff; }

/* ============== RESPONSIVE ============== */
@media (max-width:1080px){
  .hero-foot{ grid-template-columns:1fr; gap:24px; }
  .hero-actions{ justify-self:start; }
  .philo{ grid-template-columns:1fr; gap:40px; }
  .journal-grid{ grid-template-columns:repeat(2,1fr); }
  .testi-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:36px; }
  .pd-body{ grid-template-columns:1fr; gap:40px; }
  .pd-facts{ position:static; }
  .svc{ grid-template-columns:1fr; }
  .feat-art{ grid-template-columns:1fr; }
  .feat-art .fa-body{ padding:0 clamp(26px,4vw,50px) clamp(34px,5vw,50px); }
  .values{ grid-template-columns:1fr; }
  .team{ grid-template-columns:repeat(2,1fr); }
  .offices{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .nav-menu{ display:none; }
  .burger{ display:flex; }
  .nav .nav-cta{ display:none; }
  .indexbar .wrap{ grid-template-columns:1fr; gap:16px; }
  .projects-grid{ grid-template-columns:1fr; }
  .p1,.p2,.p3,.p4{ grid-column:1 / -1; }
  .p1 .frame,.p2 .frame,.p3 .frame,.p4 .frame{ aspect-ratio:4/3; }
  .portfolio{ grid-template-columns:1fr; }
  .process-grid{ grid-template-columns:1fr 1fr; }
  .step{ border-left:0 !important; border-top:1px solid var(--line); padding-inline:0 !important; }
  .step:first-child{ border-top:0; }
  .stats-grid{ grid-template-columns:1fr 1fr; gap:30px 24px; }
  .contact-grid{ grid-template-columns:1fr; }
  .form .two{ grid-template-columns:1fr; }
  .hero-top{ display:none; }
  .gallery{ columns:2; }
  .pricing-row{ grid-template-columns:1fr; gap:8px; }
  .pricing-row .pr-t{ text-align:left; }
}
@media (max-width:560px){
  .journal-grid{ grid-template-columns:1fr; }
  .process-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .team{ grid-template-columns:1fr 1fr; }
  .gallery{ columns:1; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.001s !important; }
  .reveal{ opacity:1; transform:none; }
  .hero h1 .ln > span{ transform:none; }
}

/* ============================================================
   ADDITIONS — local <img> support, booth gallery, tweaks
   ============================================================ */

/* let <img> fill any image frame (cards, members, feature, studio banner) */
.proj .frame img,
.pcard .frame img,
.member .frame img,
.studio-img img,
.pd-feature img,
.nextproj img{ width:100%; height:100%; object-fit:cover; display:block; }

/* member portraits: unify to monochrome like the rest */
.member .frame img{ filter:grayscale(1) contrast(1.02); transition:filter .8s var(--ease), transform 1.2s var(--ease); }
.member:hover .frame img{ filter:grayscale(.15); transform:scale(1.04); }

/* 3-up stat rows (studio + homepage trimmed to 3 metrics) */
.stats-grid.three{ grid-template-columns:repeat(3,1fr); }

/* ---- BOOTH gallery: natural aspect ratios via <img> children ---- */
.gallery .gi img{ width:100%; display:block; filter:grayscale(.18) contrast(1.02); transition:filter .8s var(--ease), transform 1.2s var(--ease); }
.gallery .gi:hover img{ filter:none; transform:scale(1.03); }

/* booth intro band */
.booth-hero{ position:relative; }
.booth-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.booth-tags span{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); border:1px solid var(--line); border-radius:40px; padding:9px 18px; }

@media (max-width:820px){
  .stats-grid.three{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .stats-grid.three{ grid-template-columns:1fr; }
}

/* ============================================================
   HERO REDESIGN (no photo) + NAV FIX + LOGO LOCKUP
   ============================================================ */

/* --- NAV: kill blend-mode (was causing mis-targeted clicks), make links sit on top --- */
.nav.over{ mix-blend-mode:normal; color:var(--ink); background:transparent; border-bottom-color:transparent; }
.nav.over .nav-cta{ border-color:var(--ink); }
.nav.over.solid{ color:var(--ink); }
.nav-menu, .nav a, .nav .nav-cta, .brand{ position:relative; z-index:5; }

/* --- brand lockup (small mark + wordmark), top-left --- */
.brand{ display:inline-flex; align-items:center; gap:10px; }
.brand-mark{ display:inline-flex; }
.brand-mark .mk{ height:24px; width:auto; display:block; }
.brand-txt{ font-family:var(--display); font-weight:800; letter-spacing:.26em; font-size:1.0rem; }

/* --- footer lockup, bottom-left --- */
.fbrand{ display:inline-flex; align-items:center; gap:11px; }
.fbrand-mark{ display:inline-flex; }
.fbrand-mark .mk{ height:30px; width:auto; display:block; }

/* --- HERO: brand-cream background, no client photo, dark text --- */
.hero{ background:
   radial-gradient(125% 95% at 80% 8%, #f4f2ec 0%, #edeae2 48%, #e7e4db 100%); }
.hero-media{ display:none; }
.hero-grid-overlay{ background-image:linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
  mix-blend-mode:normal; opacity:.35; }
.hero-inner{ color:var(--ink); }
.hero-top{ color:var(--ink); }
.hero-top .eyebrow{ color:var(--slate); }
.hero-top .eyebrow::before{ background:var(--ink); opacity:.5; }
.hero-coord{ color:var(--slate); }
.hero h1 em{ color:var(--slate); }
.hero-sub{ color:var(--slate); }
.scroll-ind{ color:var(--slate); }
.scroll-ind .bar{ background:rgba(0,0,0,.25); }
.scroll-ind .bar::after{ background:var(--ink); }

/* subtle line-art logo watermark on the right of the hero */
.hero-mark{ position:absolute; right:clamp(-30px,1vw,40px); top:0; bottom:0; z-index:0;
  display:flex; align-items:center; justify-content:center; width:min(48vw,560px); pointer-events:none; }
.hero-mark .mk{ width:72%; height:auto; color:#b9b2a4; opacity:.5; }

@media (max-width:760px){ .hero-mark{ opacity:.5; width:70vw; right:-10vw; } .brand-txt{ font-size:.92rem; letter-spacing:.2em; } }

/* --- TEAM without photos (names only) --- */
.team.names{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,40px); }
.member.textonly{ border-top:1px solid var(--ink); padding-top:22px; }
.member.textonly .mno{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--slate); }
.member.textonly h3{ font-family:var(--display); font-weight:700; font-size:clamp(1.3rem,2.4vw,1.9rem); letter-spacing:-.01em; margin-top:14px; }
.member.textonly .role{ color:var(--slate); margin-top:6px; font-size:.98rem; }
@media (max-width:620px){ .team.names{ grid-template-columns:1fr; } }

/* ============================================================
   EMPTY STATES + IMAGE-LESS JOURNAL CARDS
   ============================================================ */
.gallery.is-empty{ columns:1; }
.empty-state{ border:1px dashed var(--line); border-radius:14px; padding:clamp(32px,6vw,64px); text-align:center; background:var(--card); }
.empty-state p{ color:var(--slate); max-width:52ch; margin:14px auto 22px; line-height:1.65; }

/* journal card with no image: neutral tinted block instead of a broken frame */
.art .frame .ph:empty{ background:linear-gradient(135deg,#efece5 0%,#e4e0d7 100%); }
.art .frame .ph:empty::before{ content:""; position:absolute; inset:0;
  background-image:linear-gradient(90deg, rgba(0,0,0,.045) 1px, transparent 1px);
  background-size:34px 100%; }

/* project detail gallery via <img> */
.gallery .gi img{ width:100%; height:auto; display:block; }
.pd-feature img, .nextproj img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ============================================================
   BOOTH / INTERIOR — titled cards with photo grid
   ============================================================ */
.card-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3vw,40px); }
.card-gallery.is-empty{ grid-template-columns:1fr; }
.gcard{ }
.gc-head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:14px; border-bottom:1px solid var(--ink); padding-bottom:10px; }
.gc-head h3{ font-family:var(--display); font-weight:700; font-size:clamp(1.15rem,2.2vw,1.6rem); letter-spacing:-.01em; }
.gc-loc{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); white-space:nowrap; }
.gc-grid{ display:grid; gap:10px; }
.gc-grid.cols1{ grid-template-columns:1fr; }
.gc-grid.cols2{ grid-template-columns:1fr 1fr; }
.gc-grid.cols3{ grid-template-columns:1fr 1fr 1fr; }
.gc-grid .gi{ position:relative; overflow:hidden; background:var(--concrete); cursor:zoom-in; aspect-ratio:4/3; }
.gc-grid .gi img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(.15) contrast(1.02); transition:filter .7s var(--ease), transform 1.1s var(--ease); }
.gc-grid .gi:hover img{ filter:none; transform:scale(1.04); }
.gc-grid .gi .zoom{ position:absolute; bottom:10px; right:10px; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.9); color:#0b0b0b; display:grid; place-items:center; opacity:0; transform:scale(.7); transition:.4s var(--ease); font-size:.75rem; }
.gc-grid .gi:hover .zoom{ opacity:1; transform:none; }
@media (max-width:820px){ .card-gallery{ grid-template-columns:1fr; } }