/* ===========================================================
   MODAN MEDIA — "The New Standard"
   Soft off-white ground, one heavy grotesk voice lifted straight from
   the logo (Archivo Black), soft-rounded geometry that echoes the
   mark, one signal-orange accent used as a spark and never as text.
   Built to read as current and forward-looking next to an industry
   that still looks like a brochure. See DESIGN.md.
   =========================================================== */

@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');

:root{
  --paper: #efeeea;
  --stone: #e6e5e0;
  --stone-deep: #dad9d3;
  --ink: #0b0b0c;
  --ink-soft: #55555a;
  --line: rgba(11,11,12,.12);
  --line-faint: rgba(11,11,12,.06);
  --signal: #ff4f1f;
  --signal-ink: #0b0b0c;
  --ph-a: #e2e1db;
  --ph-b: #cdccc5;
  --radius: 20px;
  --radius-sm: 12px;
  --radius-btn: 10px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --maxw: 1360px;
  --gutter: 48px;
  --display: 'Archivo Black', 'General Sans', Arial, sans-serif;
}

@media (max-width: 880px){
  :root{ --gutter: 22px; --radius: 16px; }
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; accent-color:var(--signal); scrollbar-color:var(--ink) var(--stone); }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'General Sans', Arial, sans-serif;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }

/* Browser surfaces carry the system too */
::selection{ background:var(--signal); color:var(--signal-ink); }
:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; border-radius:4px; }
::-webkit-scrollbar{ width:12px; }
::-webkit-scrollbar-track{ background:var(--stone); }
::-webkit-scrollbar-thumb{ background:var(--ink); border-radius:8px; border:3px solid var(--stone); }

h1,h2,h3{ margin:0; font-weight:600; letter-spacing:-0.02em; text-wrap:balance; }

/* ---------- type scale ---------- */
.display{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.7rem, 2.8vw, 2.5rem);
  line-height:1.02;
  letter-spacing:-0.025em;
}
.headline{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.7rem, 3.6vw, 3rem);
  line-height:1.06;
  letter-spacing:-0.02em;
}
/* Interior-page H1 — one step down from .display, which stays reserved for
   the homepage's single hero headline. */
.title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.2rem, 5.6vw, 4.25rem);
  line-height:1;
  letter-spacing:-0.025em;
  max-width:18ch;
}
.title.title-sm{ font-size:clamp(1.8rem, 3.6vw, 2.75rem); max-width:none; }
.mini-heading{ font-size:1rem; font-weight:600; margin:0; }
.lede{
  font-size:1.2rem;
  color:var(--ink-soft);
  max-width:48ch;
  line-height:1.55;
  text-wrap:pretty;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:15px 28px;
  font-size:0.95rem;
  font-weight:500;
  font-family:inherit;
  border-radius:var(--radius-btn);
  border:1px solid transparent;
  cursor:pointer;
  transition:background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--signal); color:var(--signal-ink); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn-text{
  padding:0; font-weight:500;
  text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px;
  text-decoration-color:var(--ink);
  transition:text-decoration-color .2s ease;
}
.btn-text:hover{ text-decoration-color:var(--signal); }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
/* The frosted background lives on a ::before, not the header itself —
   backdrop-filter on an actual ancestor element creates a new containing
   block for any position:fixed descendant (the mobile nav panel below),
   which would collapse its fixed positioning down to the header's own
   84px instead of the full viewport. */
.site-header::before{
  content:'';
  position:absolute; inset:0; z-index:-1;
  background:rgba(239,238,234,.88);
  backdrop-filter:blur(12px);
}
.site-header.scrolled{ border-bottom-color:var(--line); }
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:84px;
}
.logo{ display:flex; align-items:center; }
.logo img{ height:36px; width:auto; display:block; }
.main-nav{ display:flex; align-items:center; gap:34px; }
.main-nav a{ font-size:0.95rem; font-weight:500; color:var(--ink-soft); transition:color .2s ease; }
.main-nav a:hover, .main-nav a[aria-current="page"]{ color:var(--ink); }
.main-nav a.cta{ color:var(--paper); background:var(--ink); padding:11px 22px; border:1px solid var(--ink); }
.main-nav a.cta:hover{ background:var(--signal); border-color:var(--signal); color:var(--signal-ink); }
/* Projects dropdown: opens on hover or keyboard focus. The panel's padding-top bridges the gap
   between the link and the panel so the pointer can travel down without it closing. */
.nav-item{ position:relative; display:flex; align-items:center; }
.subnav{
  position:absolute; top:100%; left:-18px; padding-top:18px; min-width:180px;
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.subnav a{
  display:block; padding:12px 18px; background:var(--paper); color:var(--ink-soft);
  border:1px solid var(--line); border-top-width:0; font-size:0.92rem; font-weight:500;
}
.subnav a:first-child{ border-top-width:1px; border-radius:var(--radius-btn) var(--radius-btn) 0 0; }
.subnav a:last-child{ border-radius:0 0 var(--radius-btn) var(--radius-btn); }
.subnav a:hover{ color:var(--ink); background:var(--stone); }
.has-sub:hover .subnav, .has-sub:focus-within .subnav{
  opacity:1; visibility:visible; transform:none; transition-delay:0s;
}
.nav-toggle{
  display:none; flex-direction:column; gap:6px;
  width:40px; height:40px; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer;
}
.nav-toggle span{ width:22px; height:2px; background:var(--ink); display:block; border-radius:2px; }

@media (max-width:880px){
  .main-nav{
    position:fixed; inset:84px 0 0 0; z-index:49;
    background:var(--paper);
    flex-direction:column; align-items:stretch; gap:0;
    padding:8px var(--gutter) 24px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .main-nav.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .main-nav a{
    padding:18px 0; border-bottom:1px solid var(--line);
    font-family:var(--display); font-size:1.5rem; letter-spacing:-0.02em; font-weight:400; color:var(--ink);
  }
  .main-nav a.cta{ margin-top:20px; text-align:center; justify-content:center; border-radius:var(--radius-btn); font-family:inherit; font-size:1rem; font-weight:500; padding:16px; }
  .nav-toggle{ display:flex; }
  /* In the phone menu the sub-links are simply listed under Projects. */
  .nav-item{ display:block; }
  .subnav{ position:static; opacity:1; visibility:visible; transform:none; padding:0; min-width:0; }
  .subnav a{
    padding:12px 0 12px 20px; background:none; border:0; border-bottom:1px solid var(--line); border-radius:0;
    font-family:var(--display); font-size:1.2rem; letter-spacing:-0.02em; font-weight:400; color:var(--ink-soft);
  }
  .subnav a:first-child, .subnav a:last-child{ border-radius:0; border-top-width:0; }
}

/* Over a project hero the header is transparent with white type; it goes solid (and back to the
   normal colors) as soon as the page scrolls past the photo. */
.site-header::before{ transition:opacity .3s ease; }
body:has(.project-hero) .site-header:not(.scrolled)::before{ opacity:0; }
body:has(.project-hero) .site-header:not(.scrolled) .logo img{ filter:brightness(0) invert(1); }
body:has(.project-hero) .site-header:not(.scrolled) .nav-toggle span{ background:#fff; }
@media (min-width:881px){
  body:has(.project-hero) .site-header:not(.scrolled) .main-nav a:not(.cta){ color:rgba(255,255,255,.82); }
  body:has(.project-hero) .site-header:not(.scrolled) .main-nav a:not(.cta):hover,
  body:has(.project-hero) .site-header:not(.scrolled) .main-nav a[aria-current="page"]:not(.cta){ color:#fff; }
  /* the dropdown panel is light, so its links keep dark type over the hero too */
  body:has(.project-hero) .site-header:not(.scrolled) .main-nav .subnav a{ color:var(--ink-soft); }
  body:has(.project-hero) .site-header:not(.scrolled) .main-nav .subnav a:hover{ color:var(--ink); }
  body:has(.project-hero) .site-header:not(.scrolled) .main-nav a.cta{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
  body:has(.project-hero) .site-header:not(.scrolled) .main-nav a.cta:hover{ background:var(--signal); border-color:var(--signal); }
}

/* ---------- placeholder plates ---------- */
.ph{
  position:relative;
  width:100%;
  background:linear-gradient(155deg, var(--ph-a), var(--ph-b));
  overflow:hidden;
}
.ph::after{
  content:attr(data-label);
  position:absolute; left:18px; bottom:16px; right:18px;
  font-size:0.78rem; color:rgba(11,11,12,.55);
  font-weight:500;
}
.ph::before{
  content:'';
  position:absolute; inset:0;
  background-image:radial-gradient(circle at 30% 20%, rgba(255,255,255,.5), transparent 60%);
}
/* A real photo/video, once assigned in the site builder, replaces a .ph placeholder
   with this instead — same aspect-ratio box, but the image crops to fill it rather
   than distorting to match. */
.ph-img{ position:relative; width:100%; overflow:hidden; background:var(--stone); }
.ph-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ar-1-1{ aspect-ratio:1/1; }
.ar-4-5{ aspect-ratio:4/5; }
.ar-3-2{ aspect-ratio:3/2; }
.ar-3-4{ aspect-ratio:3/4; }
.ar-16-9{ aspect-ratio:16/9; }
.ar-21-9{ aspect-ratio:21/9; }
.ar-2-3{ aspect-ratio:2/3; }

/* ---------- hero ---------- */
/* One full-width photo carousel under the nav, then the headline on the left and the
   supporting line + actions on the right, set on the page color so they read on any photo.
   The carousel's height leaves room for that row so the whole thing fits in one screen. */
.hero{ padding:0; }
/* The one authored motion on the site: the headline rises out of a mask line by
   line while the photo unveils above it. Resting state is fully visible, so a
   blocked animation never hides content. */
.display .line{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; }
.display .line > span{ display:block; animation:rise 1s var(--ease-out) both; }
.display .line:nth-child(2) > span{ animation-delay:.09s; }
@keyframes rise{ from{ transform:translateY(108%); } to{ transform:none; } }
.hero-text{
  display:flex; justify-content:space-between; align-items:flex-end; gap:48px;
  padding-top:36px; padding-bottom:40px;
}
.hero-text .display{ font-size:clamp(2rem, 3.8vw, 3.4rem); }
.hero-side{ max-width:38ch; }
.hero-side .lede{ margin:0 0 22px; max-width:none; text-wrap:balance; }
.hero-actions{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.hero-plate{ animation:unveil 1.1s .18s var(--ease-out) both; }
@keyframes unveil{ from{ clip-path:inset(0 0 100% 0); } to{ clip-path:inset(0 0 0 0); } }

@media (max-width:760px){
  .hero-text{ flex-direction:column; align-items:flex-start; gap:20px; padding-top:26px; padding-bottom:28px; }
  .hero-side{ max-width:none; }
}

/* ---------- hero carousel ---------- */
/* Full-bleed under the nav: the photography is the page. Arrows sit on the left and right
   edges. */
.carousel{
  position:relative; overflow:hidden; width:100%;
  height:clamp(360px, calc(100svh - 84px - 215px), 960px);
  background:var(--stone);
}
.carousel .slide{ position:absolute; inset:0; opacity:0; transition:opacity .9s var(--ease-out); }
.carousel .slide.is-active{ opacity:1; }
.carousel .slide .ph, .carousel .slide .ph-img{ height:100%; border-radius:0; aspect-ratio:auto; }
.carousel-btn{
  position:absolute; top:50%; z-index:2; transform:translateY(-50%);
  width:56px; height:56px; border:none; border-radius:var(--radius-btn);
  background:var(--paper); color:var(--ink); cursor:pointer;
  display:grid; place-items:center;
  transition:background .2s ease, color .2s ease, transform .2s var(--ease-out);
}
.carousel-btn.prev{ left:var(--gutter); }
.carousel-btn.next{ right:var(--gutter); }
.carousel-btn:hover{ background:var(--ink); color:var(--paper); }
.carousel-btn:active{ transform:translateY(-50%) scale(.95); }
@media (max-width:640px){
  .carousel{ height:clamp(300px, 46svh, 460px); }
  .carousel-btn{ top:50%; width:44px; height:44px; }
  .carousel-btn.prev{ left:10px; }
  .carousel-btn.next{ right:10px; }
}

/* ---------- play icon (Films placeholder plates) ---------- */
.play-icon{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:60px; height:60px; border-radius:50%;
  background:var(--paper); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  z-index:1; padding-left:3px;
}

/* ---------- sections ---------- */
section{ padding:112px 0; }
section.tight{ padding:56px 0 96px; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:56px; flex-wrap:wrap; }
.section-head .headline{ max-width:20ch; }
.section-head .lede{ margin:18px 0 0; }
.section-head > div{ min-width:0; }
@media (max-width:880px){
  section{ padding:72px 0; }
  section.tight{ padding:32px 0 64px; }
  .section-head{ margin-bottom:36px; }
}

/* ---------- gallery walls ---------- */
.wall{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:36px var(--gutter);
}
.wall.cols-2{ grid-template-columns:repeat(2,1fr); }
.wall-item{ display:flex; flex-direction:column; gap:14px; }
.wall-item[hidden]{ display:none; }
.wall-item .cap{ font-size:0.92rem; font-weight:500; color:var(--ink-soft); }
@media (max-width:960px){
  .wall{ grid-template-columns:repeat(2,1fr); gap:28px 20px; }
}
@media (max-width:640px){
  .wall, .wall.cols-2{ grid-template-columns:1fr; }
}

/* Gallery: the same packed-rows layout as the client galleries — every photo keeps its own
   shape (vertical or horizontal, nothing cropped), rows run edge to edge, 12px between tiles,
   no photo titles or captions. */
.gallery-page{ padding:24px 0 72px; }
.gallery-wrap{ width:calc(100% - var(--gutter) * 2); max-width:1800px; margin:0 auto; }
.justified{ --row-h:380px; display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; }
/* Keeps the last, unfinished row from stretching to full width. */
.justified::after{ content:''; flex-grow:1000000; }
.justified .tile{
  --ar:1.5; margin:0; position:relative; overflow:hidden; background:var(--stone);
  width:calc(var(--ar) * var(--row-h)); max-width:100%;
  flex-grow:calc(var(--ar) * 100);
  aspect-ratio:var(--ar);
}
.justified .tile img{ width:100%; height:100%; display:block; object-fit:cover; }
.justified .tile .ph{ height:100%; }
@media (max-width:1024px){ .justified{ --row-h:300px; } }
@media (max-width:640px){ .justified{ --row-h:200px; gap:8px; } .gallery-page{ padding-top:16px; } }

/* Projects page: three across, in the same wide column as the Gallery so the cards run big. */
.wall.large{ grid-template-columns:repeat(3, 1fr); gap:48px 28px; }
.wall.large .cap{ font-size:1.05rem; color:var(--ink); }
@media (max-width:960px){ .wall.large{ grid-template-columns:repeat(2, 1fr); gap:36px 20px; } }
@media (max-width:640px){ .wall.large{ grid-template-columns:1fr; gap:32px; } }

/* Project cards (Projects page + Home): the whole card opens that project's own page. */
a.wall-item{ color:inherit; }
.project-card .ph-img img{ transition:transform .7s var(--ease-out); }
.project-card:hover .ph-img img{ transform:scale(1.03); }
.project-card .cap{ transition:color .2s ease; }
.project-card:hover .cap{ color:var(--ink); }

/* Projects page (Residential / Commercial): an edge-to-edge mosaic — no gutters, no gaps, no
   captions at rest. Hovering a tile darkens the photo and shows the project name over it. */
.gallery-wrap.bleed{ width:100%; max-width:none; }
/* Masonry: photos keep their own shape (horizontal or vertical) and stack down four columns. */
.wall.tiles{ display:block; column-count:4; column-gap:0; }
.wall.tiles .wall-item{ position:relative; gap:0; overflow:hidden; display:block; break-inside:avoid; }
.wall.tiles .wall-item[hidden]{ display:none; }
.wall.tiles .project-card:hover .ph-img img{ transform:none; }
.wall.tiles .cap{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  padding:24px; text-align:center; background:rgba(12,13,15,.6); color:#fff;
  font-size:clamp(1.05rem, 1.5vw, 1.4rem); font-weight:400; letter-spacing:.01em; line-height:1.25;
  opacity:0; transition:opacity .3s ease;
}
.wall.tiles .cap::after{ content:'— view —'; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; opacity:.7; }
.wall.tiles .project-card:hover .cap, .wall.tiles .project-card:focus-visible .cap{ opacity:1; color:#fff; }
@media (max-width:1200px){ .wall.tiles{ column-count:3; } }
@media (max-width:860px){ .wall.tiles{ column-count:2; } }
@media (max-width:480px){ .wall.tiles{ column-count:1; } }
/* Home "Selected work": six tiles, three across so every column ends even. A small gap between
   tiles, the project name always visible at the bottom left over a soft shade, and the section
   title set as a small label rather than a headline. */
.selected-work .section-head{ margin-bottom:22px; align-items:center; }
/* Label and link share one style (same font, size, weight, tracking, case, color). */
.selected-work .section-head .headline,
.selected-work .btn-text{
  font-family:inherit; font-size:.9rem; font-weight:500; letter-spacing:.02em;
  line-height:1.2; color:var(--ink); max-width:none;
}
.selected-work .btn-text{ text-decoration-thickness:1px; text-underline-offset:5px; }
.wall.tiles.tiles-3{ column-count:3; column-gap:12px; }
.wall.tiles-3 .wall-item{ margin-bottom:12px; }
.wall.tiles-3 .cap{
  opacity:1; align-items:flex-start; justify-content:flex-end; padding:20px 22px; text-align:left;
  background:linear-gradient(to top, rgba(12,13,15,.62) 0%, rgba(12,13,15,0) 42%);
  font-size:clamp(1rem, 1.35vw, 1.3rem); transition:background .3s ease;
}
.wall.tiles-3 .cap::after{ display:none; }
.wall.tiles-3 .project-card:hover .cap, .wall.tiles-3 .project-card:focus-visible .cap{
  background:linear-gradient(to top, rgba(12,13,15,.75) 0%, rgba(12,13,15,.22) 100%);
}
@media (max-width:860px){ .wall.tiles.tiles-3{ column-count:2; } }
@media (max-width:480px){ .wall.tiles.tiles-3{ column-count:1; } }
@media (prefers-reduced-motion: reduce){ .wall.tiles .cap{ transition:none; } }

/* A project's own page — set up like the client galleries: full width, 12px gaps, bigger rows,
   no buttons, tap a photo for the full-screen viewer. */
/* The photo runs all the way up behind the (transparent) header, dimmed; the name is centered
   in the part below the nav. Once you scroll past it, the header turns solid again. */
.project-hero{
  position:relative; box-sizing:border-box; height:clamp(520px, 86svh, 1100px);
  margin-top:-84px; padding-top:84px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; background:var(--stone);
}
.project-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Exposure pulled down: a cool dark shade over the whole photo, a touch heavier at the top so
   the nav stays readable. */
.project-hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(10,12,16,.62) 0%, rgba(10,12,16,.44) 36%, rgba(10,12,16,.5) 100%);
}
.project-hero-text{ text-align:center; color:#fff; }
.project-hero h1{
  font-family:var(--display); font-weight:400; letter-spacing:-0.02em; line-height:1.04; text-wrap:balance;
  font-size:clamp(2.2rem, 6vw, 5rem); max-width:18ch; margin:0 auto; position:relative; z-index:1;
}
/* Back-to-Projects stays pinned under the header the whole way down the gallery. position:fixed
   (not sticky) because the link lives inside the clipped hero; the dark frosted pill keeps it
   readable over both the hero photo and the light gallery. Corners match the other buttons. */
.project-hero .back{
  position:fixed; z-index:40; top:100px; left:max(calc(var(--gutter) - 14px), calc((100vw - var(--maxw)) / 2 + var(--gutter) - 14px));
  display:inline-flex; align-items:center; gap:6px; padding:8px 16px 8px 11px; border-radius:var(--radius-btn);
  font-size:.92rem; font-weight:500; color:#fff; background:rgba(16,18,22,.55);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:background .2s ease;
}
.project-hero .back:hover{ background:rgba(16,18,22,.78); }
.project-hero.no-photo::after{ display:none; }
.project-hero.no-photo .project-hero-text{ color:var(--ink); }
.gallery-page.client{ padding:56px 0 64px; }
@media (max-width:640px){ .gallery-page.client{ padding-top:32px; } }
.gallery-wrap.client{ width:100%; max-width:none; padding:0 clamp(32px, 5vw, 128px); }
.justified.client{ --row-h:400px; }
.justified a.tile{ display:block; cursor:zoom-in; }
@media (max-width:1024px){ .justified.client{ --row-h:340px; } }
@media (max-width:640px){ .justified.client{ --row-h:260px; } .project-hero .back{ top:92px; left:calc(var(--gutter) - 8px); } }

/* Project pages: at most three photos across. Each row of three is justified edge to edge, so
   every photo keeps its shape; phones fall back to the packed layout above. */
@media (min-width:641px){
  .justified.three{ display:block; }
  .justified.three::after{ display:none; }
  .justified.three .jrow{ display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; }
  .justified.three .jrow .tile{ flex:var(--ar) 1 0%; width:auto; min-width:0; }
  .justified.three .jfill{ flex-basis:0; min-width:0; }
}
@media (max-width:640px){
  .justified.three .jrow{ display:contents; }
  .justified.three .jfill{ display:none; }
}

/* Full-screen photo viewer (same idea as the client galleries': black, one photo, arrows,
   count, swipe). */
html.lb-open{ overflow:hidden; }
.lightbox{
  position:fixed; inset:0; z-index:100; background:#000;
  display:flex; align-items:center; justify-content:center;
  animation:lb-in .2s ease-out;
}
@keyframes lb-in{ from{ opacity:0; } to{ opacity:1; } }
.lb-stage{ margin:0; max-width:min(1100px, 100%); max-height:100%; padding:0 64px; display:flex; flex-direction:column; align-items:center; }
.lb-stage img{ max-width:100%; max-height:84vh; width:auto; height:auto; object-fit:contain; display:block; }
.lb-count{ align-self:flex-end; margin-top:14px; font-size:.78rem; color:rgba(255,255,255,.7); font-variant-numeric:tabular-nums; }
.lb-btn{ position:absolute; background:none; border:none; color:#fff; cursor:pointer; line-height:1; padding:8px 12px; }
.lb-btn:hover{ color:var(--signal); }
.lb-close{ top:14px; right:20px; font-size:2rem; }
.lb-nav{ top:50%; transform:translateY(-50%); font-size:2.6rem; }
.lb-prev{ left:12px; }
.lb-next{ right:12px; }
@media (max-width:640px){ .lb-nav{ display:none; } .lb-stage{ padding:0 12px; } }
@media (prefers-reduced-motion: reduce){ .lightbox{ animation:none; } .project-card .ph-img img{ transition:none; } }

/* ---------- old way / new standard ---------- */
.versus{ border-top:2px solid var(--ink); }
.versus-head, .versus-row{ display:grid; grid-template-columns:1fr 1.15fr; gap:48px; }
.versus-head{ padding:16px 0; font-size:0.85rem; font-weight:600; color:var(--ink-soft); border-bottom:1px solid var(--line); }
.versus-head span:last-child{ color:var(--ink); display:flex; align-items:center; gap:10px; }
.versus-head span:last-child::before{ content:''; width:10px; height:10px; border-radius:50%; background:var(--signal); }
.versus-row{ padding:28px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.versus-row .old{ margin:0; color:var(--ink-soft); text-decoration:line-through; text-decoration-color:rgba(11,11,12,.25); text-decoration-thickness:1px; }
.versus-row .new{ margin:0; font-family:var(--display); font-size:clamp(1.25rem, 2.2vw, 1.8rem); line-height:1.15; letter-spacing:-0.015em; text-wrap:balance; }
@media (max-width:760px){
  .versus-head{ display:none; }
  .versus-row{ grid-template-columns:1fr; gap:8px; padding:22px 0; }
}

/* ---------- spec rows (principles list) ---------- */
.rows{ border-top:2px solid var(--ink); }
.row{
  display:grid; grid-template-columns:1fr 1.3fr;
  gap:32px; align-items:baseline;
  padding:30px 0; border-bottom:1px solid var(--line);
}
.row h3{ font-family:var(--display); font-weight:400; font-size:1.35rem; letter-spacing:-0.015em; }
.row h3.mini-heading{ font-family:inherit; font-size:1rem; font-weight:600; letter-spacing:normal; }
.row p{ margin:0; color:var(--ink-soft); max-width:52ch; }
@media (max-width:760px){
  .row{ grid-template-columns:1fr; gap:10px; }
}

/* ---------- accordions (About: services + process) ---------- */
.about-cols{ display:grid; grid-template-columns:1fr 1fr; gap:56px 72px; align-items:start; }
.about-cols .headline{ font-size:clamp(1.5rem, 2.6vw, 2.2rem); margin-bottom:28px; }
.acc{ border-top:2px solid var(--ink); }
.acc details{ border-bottom:1px solid var(--line); }
.acc summary{
  display:flex; justify-content:space-between; align-items:center; gap:16px; cursor:pointer; list-style:none;
  padding:18px 0; font-family:var(--display); font-weight:400; font-size:1.2rem; letter-spacing:-0.015em;
  transition:color .2s ease;
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary::after{
  content:''; flex:none; width:9px; height:9px; margin-right:4px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .25s var(--ease-out);
}
.acc details[open] summary::after{ transform:rotate(-135deg) translateY(-2px); }
.acc summary:hover{ color:var(--ink-soft); }
.acc summary:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.acc details p{ margin:0 0 20px; max-width:52ch; color:var(--ink-soft); }
@media (max-width:880px){ .about-cols{ grid-template-columns:1fr; } }

/* ---------- films + project films (playable video cards) ---------- */
.film{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#0c0d0f; }
.film video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#0c0d0f; }
.project-films{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-top:12px; }
.project-films .film{ border-radius:0; }
@media (max-width:760px){ .project-films{ grid-template-columns:1fr; } }
.filter-empty{ margin:0; padding:64px var(--gutter); text-align:center; color:var(--ink-soft); }

/* ---------- CTA band ---------- */
/* No block, no box: just the closing line in ink on the page, centered. */
.band{ padding:96px 0 88px; text-align:center; }
.band .headline{ margin:0 auto 28px; max-width:26ch; font-size:clamp(1.5rem, 2.8vw, 2.4rem); line-height:1.1; }
@media (max-width:880px){ .band{ padding:72px 0 64px; } }

/* ---------- footer ---------- */
footer{ padding:64px 0 40px; }
.footer-grid{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.footer-brand img{ height:44px; width:auto; margin-bottom:18px; }
.footer-brand p{ margin:0; max-width:36ch; text-wrap:balance; color:var(--ink-soft); font-size:0.95rem; }
.footer-col h4{ margin:0 0 14px; font-size:0.85rem; color:var(--ink-soft); font-weight:500; }
.footer-col a{ display:block; margin-bottom:10px; font-size:0.95rem; color:var(--ink); }
.footer-col a:hover{ text-decoration:underline; text-decoration-color:var(--signal); text-decoration-thickness:2px; text-underline-offset:5px; }
.footer-bottom{
  margin-top:56px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:0.82rem; color:var(--ink-soft);
}

/* ---------- interior page hero (non-home) ---------- */
.page-hero{ padding:72px 0 24px; }
.page-hero .lede{ margin-top:24px; text-wrap:balance; }
@media (max-width:880px){ .page-hero{ padding:44px 0 8px; } }

/* ---------- contact form ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
form .field{ margin-bottom:26px; }
form label{ display:block; font-size:0.85rem; font-weight:500; color:var(--ink-soft); margin-bottom:8px; }
form input, form select, form textarea{
  width:100%; border:none; border-bottom:2px solid var(--line);
  background:transparent; padding:10px 0; font-size:1.02rem;
  font-family:inherit; color:var(--ink); border-radius:0;
  transition:border-color .2s ease;
}
form input:focus, form select:focus, form textarea:focus{
  outline:none; border-bottom-color:var(--signal);
}
form textarea{ resize:vertical; min-height:100px; }
@media (max-width:860px){ .form-grid{ grid-template-columns:1fr; gap:40px; } }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- about split ---------- */
.about-split{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center; }
@media (max-width:880px){ .about-split{ grid-template-columns:1fr; gap:32px; } }

@media (prefers-reduced-motion: reduce){
  .display .line > span, .hero-plate{ animation:none; }
  .carousel .slide{ transition:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}