/* ===========================================================
   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; }
  .nav-item > a{ display:block; border-bottom:0; padding-bottom:10px; }
  .subnav{ position:static; opacity:1; visibility:visible; transform:none; padding:0; min-width:0; transition:none; border-bottom:1px solid var(--line); padding-bottom:12px; }
  .subnav a{
    display:block; padding:9px 0 9px 20px; background:none; border:0; border-radius:0;
    font-family:var(--display); font-size:1.15rem; letter-spacing:-0.02em; font-weight:400; color:var(--ink-soft);
  }
  .subnav a:first-child, .subnav a:last-child{ border-radius:0; border-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; }
/* A mosaic that reads left to right, in order. Every tile is one column wide. A wide photo takes one row
   (3:2); a tall photo takes two rows in its column, so it comes out large (about 3:4) instead of a thin
   sliver. Short rows simply end where the photos do. */
.wall.tiles{
  --cols:4; --gap:0px; --wrap-w:100vw;
  --row-h:calc((var(--wrap-w) - var(--gap) * (var(--cols) - 1)) / var(--cols) / 1.5);
  display:grid; grid-template-columns:repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows:var(--row-h); gap:var(--gap);
}
.wall.tiles::after{ display:none; }
.wall.tiles .wall-item{ position:relative; overflow:hidden; display:block; width:auto; min-width:0; }
.wall.tiles .wall-item.is-tall{ grid-row:span 2; }
.wall.tiles .wall-item .ph-img, .wall.tiles .wall-item .ph{ height:100%; aspect-ratio:auto; }
.wall.tiles .wall-item[hidden]{ display:none; }
/* Projects page: true masonry. Columns only; each photo keeps its own height, so columns end at different
   points. (main.js deals photos into the shortest column in order; the CSS columns are the no-JS fallback.) */
.wall.tiles.masonry{ display:block; column-count:var(--cols); column-gap:var(--gap); grid-template-columns:none; grid-auto-rows:auto; }
.wall.tiles.masonry .wall-item{ break-inside:avoid; margin-bottom:var(--gap); }
.wall.tiles.masonry .wall-item.is-tall{ grid-row:auto; }
.wall.tiles.masonry .wall-item .ph-img, .wall.tiles.masonry .wall-item .ph{ height:auto; }
.wall.tiles.masonry.has-cols{ display:flex; align-items:flex-start; column-count:auto; gap:var(--gap); }
.wall.tiles.masonry.has-cols .wall-item{ margin-bottom:0; }
.wall.tiles.masonry .mcol{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:var(--gap); }


.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{ --cols:3; } }
@media (max-width:860px){ .wall.tiles{ --cols:2; } }
@media (max-width:480px){ .wall.tiles{ --cols: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{ --cols:3; --gap:12px; --wrap-w:min(100vw - 2 * var(--gutter), var(--maxw)); }
.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{ --cols:2; } }
@media (max-width:480px){ .wall.tiles.tiles-3{ --cols: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); }

/* ---------- reels: films that play by themselves, in a carousel ---------- */
.reel-carousel{ position:relative; }
.reel-carousel + .reel-carousel{ margin-top:14px; }
.reel-track{
  display:flex; gap:14px; justify-content:safe center; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; outline:none; border-radius:18px;
}
.reel-track::-webkit-scrollbar{ display:none; }
/* The spare copies that make the loop endless only exist while the row is actually looping. */
.reel-track:not(.is-looping) .reel.is-clone{ display:none; }
/* How many reels show at once (the last one peeks in, so it's clear there's more to swipe to). */
.reels-tall{ --per:5; }
.reels-wide{ --per:2; }
@media (max-width:1100px){ .reels-tall{ --per:3; } .reels-wide{ --per:1.5; } }
@media (max-width:640px){ .reels-tall{ --per:1.25; } .reels-wide{ --per:1.1; } }
/* The row of tall films runs the full width of the window, so five fit across at a good size. */
.reel-carousel.reels-tall{ width:100vw; margin-left:calc(50% - 50vw); padding-inline:var(--gutter); box-sizing:border-box; }
main{ overflow-x:clip; }
/* With a single row there is room to go big: on larger screens a reel is sized by its height (most of the
   window), and its width follows from its own shape, so the tall films are as tall as they can be. */
@media (min-width:641px){
  .reels-wide .reel{ height:clamp(300px, 56vh, 700px); width:auto; }
}
.reel{ position:relative; overflow:hidden; border-radius:18px; background:#16181d; flex:none; scroll-snap-align:start; width:calc((100% - (var(--per) - 1) * 14px) / var(--per)); }
.reel video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.reel::after{ content:''; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .5s ease; }
.reel.is-edge-left::after, .reel.is-edge-right::after{ opacity:1; }
.reel.is-edge-left::after{ background:linear-gradient(to right, rgba(10,12,16,.86) 0%, rgba(10,12,16,.6) 55%, rgba(10,12,16,.28) 100%); }
.reel.is-edge-right::after{ background:linear-gradient(to left, rgba(10,12,16,.86) 0%, rgba(10,12,16,.6) 55%, rgba(10,12,16,.28) 100%); }
.reel-audio{
  z-index:2; position:absolute; right:12px; bottom:12px; width:40px; height:40px; padding:0; border:0; border-radius:50%;
  background:rgba(10,12,16,.62); color:#fff; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:grid; place-items:center; cursor:pointer; transition:background .2s ease;
}
.reel-audio:hover{ background:rgba(10,12,16,.82); }
.reel-audio:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
/* Arrows on the left and right, like the Home carousel's. */
.reel-nav{
  position:absolute; top:50%; z-index:3; transform:translateY(-50%); width:52px; height:52px; padding:0; border:0;
  border-radius:var(--radius-btn); background:var(--paper); color:var(--ink); display:grid; place-items:center; cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.18); transition:background .2s ease, color .2s ease, opacity .2s ease;
}
.reel-nav[hidden]{ display:none; }
.reel-nav:hover:not(:disabled){ background:var(--ink); color:var(--paper); }
.reel-nav:disabled{ opacity:.35; cursor:default; }
.reel-prev{ left:14px; }
.reel-next{ right:14px; }
/* Phones: one big main film in the middle, with only a third of its neighbour showing on each side (shaded).
   Swipe, or use the arrows; the film settles centered. The cards are a little taller than the footage (the
   sides are trimmed a touch) so the main film fills more of the screen. */
@media (max-width:640px){
  .reel-nav{ width:44px; height:44px; }
  .reel-prev{ left:8px; }
  .reel-next{ right:8px; }
  .reel-carousel.reels-tall{ padding-inline:0; }
  .reels-tall .reel-track{ justify-content:flex-start; padding-inline:calc(20vw + 8.4px); scroll-snap-type:x mandatory; }
  .reels-tall .reel{ width:calc(60vw - 16.8px); aspect-ratio:9 / 18 !important; scroll-snap-align:center; }
}

/* ---------- 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; }
}


/* ---------- about page: photo left, paragraphs right ---------- */
.ab-a{ padding:56px 0 24px; }
/* The photo is as tall as the text beside it, so the bottom of "Who I work with" lines up with the bottom of the photo. */
.ab-a-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:72px; align-items:stretch; }
.ab-a .ab-photo{ display:flex; }
.ab-a .ab-photo .ph, .ab-a .ab-photo .ph-img{ flex:1; width:100%; height:auto; min-height:420px; aspect-ratio:auto; border-radius:18px; }
.ab-a .title{ max-width:none; margin-bottom:22px; font-size:clamp(2rem, 3.9vw, 3.3rem); }
.ab-a .lede{ max-width:46ch; }
.ab-story{ font-size:1.15rem; line-height:1.62; color:var(--ink-soft); max-width:56ch; margin:22px 0 0; text-wrap:pretty; }
.ab-para{ margin-top:34px; max-width:56ch; }
.ab-para h3{ font-family:var(--display); font-weight:400; font-size:1.3rem; letter-spacing:-.015em; margin:0 0 8px; }
.ab-para p{ margin:0; font-size:1.15rem; line-height:1.62; color:var(--ink-soft); text-wrap:pretty; }
@media (max-width:880px){
  .ab-a-grid{ grid-template-columns:1fr; gap:32px; }
  .ab-a .ab-photo .ph, .ab-a .ab-photo .ph-img{ flex:none; height:auto; min-height:0; aspect-ratio:4 / 5; }
}

/* ---------- services ---------- */
.svc-intro{ display:grid; grid-template-columns:1.2fr 1fr; gap:72px; align-items:start; }
.svc-intro .lede{ max-width:56ch; margin:0 0 20px; }
.svc-intro p:last-child{ margin:32px 0 0; }
.svc-side{ background:var(--stone); border-radius:var(--radius); padding:32px 34px; }
.svc-side h2{ font-size:1.05rem; font-weight:600; margin:0 0 12px; }
.svc-list{ list-style:none; margin:0; padding:0; }
.svc-list li{ position:relative; padding:14px 0 14px 28px; border-top:1px solid var(--line); }
.svc-list li:first-child{ border-top:0; }
.svc-list li::before{ content:''; position:absolute; left:0; top:23px; width:10px; height:10px; border-radius:50%; background:var(--signal); }
.svc-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; counter-reset:step; }
.svc-steps li{ counter-increment:step; background:var(--stone); border-radius:var(--radius); padding:30px; }
.svc-steps li::before{ content:counter(step); font-family:var(--display); font-size:1.7rem; display:block; margin-bottom:16px; }
.svc-steps strong{ display:block; font-size:1.15rem; font-weight:600; margin-bottom:8px; }
.svc-steps p{ margin:0; color:var(--ink-soft); }
.faq{ border-top:2px solid var(--ink); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; list-style:none; padding:24px 44px 24px 0; font-weight:600; font-size:1.15rem; position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:1.6rem; font-weight:400; }
.faq details[open] summary::after{ content:'\2212'; }
.faq details p{ margin:0 0 26px; max-width:64ch; color:var(--ink-soft); }
.svc-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:20px; }
.svc-card{ display:block; background:var(--stone); border-radius:var(--radius); padding:30px; transition:background .25s var(--ease-out); }
.svc-card:hover{ background:var(--stone-deep); }
.svc-card h3{ font-family:var(--display); font-weight:400; font-size:1.4rem; letter-spacing:-0.015em; margin:0 0 10px; }
.svc-card p{ margin:0; color:var(--ink-soft); font-size:0.97rem; }
.svc-card .more{ display:inline-block; margin-top:18px; 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; }
.svc-card:hover .more{ text-decoration-color:var(--signal); }
@media (max-width:880px){
  .svc-intro{ grid-template-columns:1fr; gap:36px; }
  .svc-steps{ grid-template-columns:1fr; }
  .svc-side{ padding:24px; }
  /* In the phone menu Services is a single link to the overview (its five pages are listed there). */
  .nav-item.no-sub-mobile .subnav{ display:none; }
  .nav-item.no-sub-mobile > a{ border-bottom:1px solid var(--line); padding-bottom:18px; }
}