/* ==========================================================
   Unique Graphics & Window Film — site styles
   Clean, architectural, minimal.
   ========================================================== */

/* Single light theme on purpose: the navy/grey logo is built for a light ground. */
:root {
  color-scheme: light;
  --paper: #f7f7f5;
  --paper-2: #efefec;
  --white: #ffffff;
  --ink: #0d1222;
  --ink-2: #3a3f4c;
  --muted: #7a7f8c;
  --line: rgba(13, 18, 34, 0.12);
  --line-soft: rgba(13, 18, 34, 0.06);
  --navy: #0a1a4e;          /* logo navy */
  --steel: #5c6068;         /* logo grey */
  --dark: #0b1020;
  --h-section: clamp(32px, 3vw + 18px, 80px);   /* one heading size for the statement and every § section; grows on big monitors */
  --t-lede: 16px;                          /* one size for the paragraph under each heading */
  --oak: #604e46;           /* smoked taupe pulled from the hero photo's feature wall */
  --oak-deep: #483a34;

  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* content spans the full window minus side gutters; the cap only kicks in on ultra-wide (>2600px) screens */
  --max: 2400px;
  --max-wide: 2400px;
  --gutter: clamp(16px, 4vw, 112px);
  --radius: 18px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; letter-spacing: -0.035em; line-height: 1.02; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--navy); color: #fff; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(var(--max), 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap--wide { width: min(var(--max-wide), 100% - var(--gutter) * 2); margin-inline: auto; }

/* small uppercase spec labels */
.label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; vertical-align: middle; margin: 0 .7em; }

/* ---------- column guides ---------- */
.guides { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.guides__inner {
  width: min(var(--max), 100% - var(--gutter) * 2);
  height: 100%; margin-inline: auto;
  display: grid; grid-template-columns: repeat(6, 1fr);
}
.guides i { border-left: 1px solid var(--line-soft); }
.guides i:last-child { border-right: 1px solid var(--line-soft); }
@media (max-width: 720px) {
  .guides__inner { grid-template-columns: repeat(2, 1fr); }
  .guides i:nth-child(n+3) { display: none; }
  .guides i:nth-child(2) { border-right: 1px solid var(--line-soft); }
}
main, .footer, .nav { position: relative; z-index: 1; }
/* keyboard "skip to content" link: hidden until focused with Tab */
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; transition: top .2s var(--ease); }
.skip:focus { top: 12px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  height: 52px; padding: 0 28px;
  border-radius: 999px;
  font-size: 15px; font-weight: 500; letter-spacing: -0.005em;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
  white-space: nowrap;
}
.btn--sm { height: 42px; padding: 0 20px; font-size: 14px; }
.btn--dark { background: var(--dark); color: #fff; }
.btn--dark:hover { background: var(--navy); }
.btn--oak { background: var(--oak); color: #fff; }
.btn--oak:hover { background: var(--oak-deep); }
/* white with a soft gradient: a lighter, secondary partner to the taupe buttons (gallery Collapse) */
.btn--pearl {
  background: linear-gradient(180deg, #ffffff 0%, #ecebe8 100%);
  color: var(--oak-deep);
  border: 1px solid rgba(96, 78, 70, 0.22);
  box-shadow: 0 1px 2px rgba(13, 18, 34, 0.06), inset 0 1px 0 #fff;
}
.btn--pearl:hover { background: linear-gradient(180deg, #ffffff 0%, #e2e0dc 100%); border-color: rgba(96, 78, 70, 0.4); }
.btn--ghost { border: 1px solid var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }

/* ---------- nav ---------- */
/* paint the phone status-bar band so content never scrolls visibly under it */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--paper); }
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  transition: background .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(247, 247, 245, 0.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line);
}
/* full-width bar: logo pinned to the left edge, links + CTA pinned to the right edge at any screen width */
.nav__inner {
  width: 100%;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  height: 76px; display: flex; align-items: center; gap: 32px;
}
.nav__brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.nav__mark { height: 40px; width: 40px; object-fit: contain; }
.nav__name { display: flex; flex-direction: column; font-weight: 600; font-size: 15px; letter-spacing: .22em; text-transform: uppercase; color: var(--navy); line-height: 1.1; }
.nav__name small { font-family: var(--mono); font-weight: 400; font-size: 9px; letter-spacing: .16em; color: var(--steel); margin-top: 4px; }
.nav__links { display: flex; gap: 32px; font-size: 14px; color: var(--ink-2); }
.nav__links a { position: relative; padding: 4px 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__toggle { display: none; width: 44px; height: 44px; position: relative; }
.nav__toggle span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease); }
.nav__toggle span:first-child { top: 18px; }
.nav__toggle span:last-child { top: 25px; }
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.nav__mobile { display: none; }

@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: block; }
  .nav__mobile:not([hidden]) {
    display: flex; flex-direction: column;
    padding: 8px var(--gutter) 28px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }
  .nav__mobile a { font-size: 28px; letter-spacing: -0.03em; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
  .nav.menu-open { background: var(--paper); }
}

/* ---------- hero ---------- */
/* full-bleed photo runs up under the transparent nav; a paper wash keeps the headline crisp,
   then clears so the room shows through, and fades back to paper at the bottom edge */
/* The hero always fills exactly one screen (taller screens just show more photo).
   Spacing and the headline scale with screen HEIGHT as well as width, so the
   headline, text and both buttons stay in view on short laptop screens. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: -76px;
  min-height: 100vh; min-height: 100svh;
  padding-top: calc(76px + clamp(16px, 6.5vh, 120px));
  /* lifts the frosted stats band toward the buttons; a strip of photo (with the scroll cue) shows below it.
     Scales with screen height: short laptop screens get a small lift, tall monitors a bigger one. */
  padding-bottom: clamp(48px, calc(30vh - 150px), 200px);
  display: flex; flex-direction: column; gap: clamp(16px, 3vh, 40px);
}
.hero__bg { position: absolute; inset: 0; z-index: -1; background: var(--paper-2); }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    var(--paper) 0%,
    color-mix(in srgb, var(--paper) 84%, transparent) 14%,
    color-mix(in srgb, var(--paper) 74%, transparent) 52%,
    color-mix(in srgb, var(--paper) 18%, transparent) 76%,
    transparent 86%,
    var(--paper) 100%);   /* bottom edge fades into the page, mirroring the top */
}
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; animation: heroIn 1.8s var(--ease) both; }
@keyframes heroIn { from { transform: scale(1.06); } to { transform: none; } }
.hero .btn--ghost { background: color-mix(in srgb, var(--paper) 72%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* soft two-layer drop shadow so both hero buttons lift off the photo */
.hero__ctas .btn {
  box-shadow: 0 1px 2px rgba(13, 18, 34, .10), 0 8px 24px -6px rgba(13, 18, 34, .28);
  transition: background .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.hero__ctas .btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(13, 18, 34, .12), 0 12px 30px -6px rgba(13, 18, 34, .34); }
/* scroll cue: taupe double chevron centred in the photo strip at the very bottom of the hero,
   with a soft white glow so it stands out against the image; gently bobs and cascades */
.scroll-cue {
  position: absolute; left: 50%; bottom: clamp(2px, calc(15vh - 97px), 78px); z-index: 2;   /* centred in the photo strip below the band (half the strip minus half the cue) */
  width: 44px; height: 44px; margin-left: -22px;
  display: grid; place-items: center; border-radius: 50%;
  color: var(--oak);
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 1)) drop-shadow(0 0 8px rgba(255, 255, 255, .9)) drop-shadow(0 0 16px rgba(255, 255, 255, .6));
  animation: cueBob 2s ease-in-out infinite;
}
.scroll-cue svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.scroll-cue__a { animation: cueFade 2s ease-in-out infinite; }
.scroll-cue__b { animation: cueFade 2s ease-in-out infinite .3s; }
.scroll-cue:hover { color: var(--oak-deep); }
@keyframes cueBob { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
@keyframes cueFade { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue, .scroll-cue__a, .scroll-cue__b { animation: none; } }
.hero__head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero__title {
  margin-top: clamp(14px, 2.6vh, 28px);
  font-size: clamp(36px, min(7vw, 9.8vh), 132px);   /* ~15% smaller than before, so it sits more comfortably on laptop screens */
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: .96;
}
.hero__lede { margin-top: clamp(14px, 2.6vh, 28px); max-width: 600px; font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-2); }
.hero__ctas { margin-top: clamp(20px, 3.6vh, 40px); display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 720px) {
  .hero__img { object-position: 32% 60%; }
  .hero__ctas { width: 100%; max-width: 280px; }   /* narrower stacked buttons, centred */
  .hero__ctas .btn { flex: 1 1 100%; }
  .hero__head > .label { font-size: 10px; letter-spacing: .08em; }
  .hero__head > .label .dot { margin: 0 .45em; }
  /* phones: stats band sits a fixed, shorter distance under the buttons instead of being pinned to the bottom;
     the leftover height shows more of the photo below the band */
  .hero .spec { margin-top: 40px; }
  .hero { padding-bottom: clamp(20px, 6vh, 80px); }   /* phones keep their own (already tuned) band position */
  .scroll-cue { bottom: max(0px, calc(3vh - 22px)); }
  /* phones: hero fills 8/9 of the screen height (the next section peeks in below) */
  .hero { min-height: 88.89vh; min-height: calc(100svh * 8 / 9); }
}

/* ---------- spec strip ---------- */
/* Lives at the bottom of the hero (margin-top:auto pushes it down) as a frosted-film band,
   so the headline AND the stats are both visible on load. Sizes scale with screen height too. */
/* the frosted band runs edge to edge across the screen; the four stats inside stay on the page's content grid */
.spec {
  margin-top: auto;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 60%, transparent);
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
}
.spec__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.spec__cell { padding: clamp(10px, 1.6vh, 18px) 24px clamp(12px, 1.9vh, 20px) 0; display: flex; flex-direction: column; gap: clamp(3px, .7vh, 8px); min-width: 0; }
.spec__cell + .spec__cell { padding-left: 24px; border-left: 1px solid var(--line); }
/* one size for all four figures, sized from the column width so "Nationwide" (the longest) always fits */
.spec__grid { container-type: inline-size; }
.spec__num {
  font-weight: 300; letter-spacing: -0.05em; line-height: 1; margin-top: clamp(4px, 1vh, 10px);
  font-size: min(56px, calc((25cqi - 48px) * 0.13), 5.4vh);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.spec__sub { font-size: 14px; color: var(--ink-2); }
/* "inhale" after the 1,000+ count-up finishes: swell + soft white glow over 1.2s, then back to normal */
.spec__num { transform-origin: left center; }
.spec__num.is-pulse { animation: numInhale 1.2s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes numInhale {
  0%   { transform: scale(1);    text-shadow: 0 0 0 transparent; }
  45%  { transform: scale(1.14); text-shadow: 0 0 4px rgba(255, 255, 255, 1), 0 0 12px rgba(255, 255, 255, .95), 0 0 24px rgba(255, 255, 255, .85), 0 0 40px rgba(255, 255, 255, .6); }
  100% { transform: scale(1);    text-shadow: 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .spec__num.is-pulse { animation: none; } }
@media (max-width: 900px) {
  .spec__grid { grid-template-columns: repeat(2, 1fr); }
  .spec__cell:nth-child(3) { padding-left: 0; border-left: 0; }
  .spec__cell:nth-child(n+3) { border-top: 1px solid var(--line); }
  .spec__num { font-size: min(40px, calc((50cqi - 48px) * 0.14)); }
}
/* phones: all four stats visible together on ONE row (no swiping). Columns are a quarter of the
   width each, so type is scaled down and the figure size is computed so "Nationwide" still fits. */
@media (max-width: 720px) {
  .spec__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .spec__cell { padding: 8px 6px 10px 0; gap: 2px; }
  .spec__cell + .spec__cell { padding-left: 6px; border-left: 1px solid var(--line); }
  .spec__cell:nth-child(3) { padding-left: 6px; border-left: 1px solid var(--line); }
  .spec__cell:nth-child(n+3) { border-top: 0; }
  .spec__num { font-size: calc((25cqi - 12px) * 0.185); letter-spacing: -0.055em; margin-top: 2px; }
  .spec__sub { font-size: 9.5px; line-height: 1.3; }
  .spec .label { font-size: 7.5px; letter-spacing: .06em; }
}

/* ---------- statement ---------- */
.statement { padding: clamp(52px, 6.2vw, 92px) 0 clamp(36px, 4.2vw, 64px); text-align: center; }
.statement__title { font-size: var(--h-section); letter-spacing: -0.045em; line-height: 1.04; }
.statement__body { margin: 16px auto 0; max-width: 560px; color: var(--ink-2); font-size: var(--t-lede); }
.clients { margin-top: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.clients ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; }
.clients li { font-size: clamp(15px, 1.4vw, 19px); letter-spacing: -0.02em; color: var(--oak); font-weight: 500; }   /* same taupe as the Request consultation button */

/* ---------- section head ---------- */
.sec-head {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 14px 24px;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.sec-head .label { grid-column: 1 / -1; }
.sec-head__title { font-size: var(--h-section); letter-spacing: -0.045em; line-height: 1.04; }
/* dimension-line motif: a rule with end ticks */
.rule { grid-column: 1 / -1; height: 9px; position: relative; }
.rule::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--ink); }
.rule::after { content: ""; position: absolute; inset: 0; border-left: 1px solid var(--ink); border-right: 1px solid var(--ink); }

/* ---------- featured projects ---------- */
/* compact: shorter photo blocks, tighter spacing between and inside projects */
.work { padding: clamp(40px, 5vw, 64px) 0 clamp(24px, 3vw, 48px); }
.work .sec-head, .serve-sec .sec-head, .services .sec-head { margin-bottom: clamp(24px, 3vw, 44px); }
.project {
  display: grid; grid-template-columns: 4fr 8fr; gap: clamp(20px, 3vw, 48px); align-items: center;
  padding: clamp(20px, 2.4vw, 36px) 0;
  border-top: 1px solid var(--line);
}
.project:first-of-type { border-top: 0; padding-top: 0; }
.project--flip { grid-template-columns: 8fr 4fr; }
.project--flip .project__meta { order: 2; }
.project__meta { display: flex; flex-direction: column; gap: 12px; }
.project__title { font-size: clamp(24px, 2.4vw, 36px); letter-spacing: -0.04em; line-height: 1.05; }
.project__meta p { color: var(--ink-2); font-size: var(--t-lede); }
.project__spec { margin: 4px 0 0; border-top: 1px solid var(--line); }
.project__spec div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.project__spec dt { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.project__spec dd { margin: 0; color: var(--ink); }

.project__media { display: grid; gap: 10px; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; height: clamp(260px, 28vw, 500px); }
.project__media .shot--main { grid-row: 1 / 3; }

.shot { position: relative; overflow: hidden; border-radius: 12px; background: var(--paper-2); display: block; width: 100%; height: 100%; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .6s var(--ease); }
.shot:hover img { transform: scale(1.04); }
/* photos glide up into place (quick fade + 18px rise) once they've loaded AND scrolled into view,
   instead of popping in. Only applies when JS is running (.js on <html>), so photos never stay hidden without it. */
.js .shot img {
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.2, .7, .1, 1);
  transition-delay: var(--glide-delay, 0ms);
}
.js .shot img.is-in { opacity: 1; transform: none; }
.js .shot:hover img.is-in { transform: scale(1.04); transition-delay: 0ms; transition-duration: .5s, 1s; }
/* "What we do" thumbnails: same quick glide, but sliding in from the right and settling into place */
.js .svc__img {
  opacity: 0; transform: translateX(28px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.2, .7, .1, 1), filter .5s var(--ease);
}
.js .svc__img.is-in { opacity: .85; transform: none; }
.js .svc__row:hover .svc__img.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .svc__img { transform: none !important; transition: opacity .3s ease !important; } }
.shot::after {
  content: "+"; position: absolute; right: 12px; bottom: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.9); color: var(--ink); font-size: 18px; font-weight: 300;
  opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.shot:hover::after, .shot:focus-visible::after { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .project, .project--flip { grid-template-columns: 1fr; }
  .project--flip .project__meta { order: 0; }
  .project__media { height: auto; aspect-ratio: 1 / 1; grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr; }
  .project__media .shot--main { grid-row: auto; grid-column: 1 / -1; }
}

/* ---------- archive gallery ---------- */
.archive { padding: clamp(64px, 8vw, 120px) 0; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filter {
  height: 38px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2);
  transition: all .25s var(--ease);
}
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
/* Interior Signage sub-filters: a smaller second row, shown only while Interior Signage is selected */
.subfilters {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: -18px 0 32px; padding: 12px 0 0 14px;
  border-left: 1px solid var(--line);
  animation: tileIn .35s var(--ease) both;
}
.subfilters[hidden] { display: none; }
.subfilter {
  height: 32px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2);
  transition: all .25s var(--ease);
}
.subfilter:hover { border-color: var(--oak); color: var(--oak-deep); }
.subfilter.is-active { background: var(--oak); color: #fff; border-color: var(--oak); }
@media (max-width: 720px) {
  .subfilters { margin-top: -20px; padding-left: 10px; gap: 5px; }
  .subfilter { height: 30px; padding: 0 11px; font-size: 11.5px; }
}

/* compact masonry: more, smaller columns and tighter gaps */
.gallery { columns: 4; column-gap: 12px; }
.gallery .tile { break-inside: avoid; margin: 0 0 12px; width: 100%; text-align: left; display: block; }
.gallery .tile.is-hidden { display: none; }
.gallery-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.gallery-more:not(:has(.btn:not([hidden]))) { display: none; }
.gallery-more .btn[hidden] { display: none; }
@media (max-width: 720px) {
  .gallery-more { margin-top: 20px; gap: 8px; }
  .gallery-more .btn { height: 44px; padding: 0 18px; font-size: 14px; }
}
.tile .shot { height: auto; }
.tile .shot img { height: auto; }
.tile__cap { display: flex; justify-content: space-between; gap: 10px; padding: 6px 2px 2px; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.tile__cap .label { flex-shrink: 0; }
.tile.fade-in { animation: tileIn .5s var(--ease) both; }
@keyframes tileIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (min-width: 1600px) { .gallery { columns: 5; column-gap: 14px; } .gallery .tile { margin-bottom: 14px; } }
@media (min-width: 2200px) { .gallery { columns: 6; } }
@media (max-width: 1100px) { .gallery { columns: 3; } }
/* phones: 3 narrow columns; captions shrink to two short lines and drop the index number */
@media (max-width: 720px) {
  .gallery { columns: 3; column-gap: 8px; }
  .gallery .tile { margin-bottom: 8px; }
  .gallery .shot { border-radius: 8px; }
  .tile__cap { padding: 4px 1px 0; font-size: 10.5px; line-height: 1.3; }
  .tile__cap .label { display: none; }
  .tile__cap span:first-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ---------- services ---------- */
/* compact section rhythm shared by Services, Process, About and Contact (matches Projects) */
.serve-sec, .services, .about { padding: clamp(40px, 5vw, 64px) 0 clamp(24px, 3vw, 48px); }
.services__intro { max-width: 520px; font-size: var(--t-lede); line-height: 1.6; color: var(--ink-2); margin: -16px 0 clamp(28px, 3.5vw, 44px); }
.svc { border-top: 1px solid var(--ink); }
.sec-head + .svc { border-top: 0; margin-top: -12px; }   /* the heading's rule already marks the top of the list */
/* compact rows; number, title, list and thumbnail all centred vertically in each row */
.svc__row {
  /* number, title, list and thumbnail packed close together and centred as a group in the row */
  display: grid; grid-template-columns: 48px clamp(240px, 26vw, 460px) clamp(260px, 24vw, 420px) auto; justify-content: center;
  gap: clamp(20px, 2.4vw, 40px); align-items: center;
  padding: clamp(14px, 1.6vw, 22px) 0; border-bottom: 1px solid var(--line);
  transition: background .4s var(--ease);
}
.svc__no { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.svc__title { font-size: clamp(22px, 2.2vw, 34px); letter-spacing: -0.04em; white-space: nowrap; }
.svc__list li { padding: 3px 0; font-size: 15px; color: var(--ink-2); border-bottom: 1px solid var(--line-soft); }
.svc__list li:last-child { border-bottom: 0; }
.svc__img { width: clamp(120px, 9vw, 220px); aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; filter: grayscale(1); opacity: .85; transition: filter .5s var(--ease), opacity .5s var(--ease); }
.svc__row:hover .svc__img { filter: none; opacity: 1; }

/* who we serve: its own § section — intro text above a full-width row of four line-icon sectors */
.audience { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 1.8vw, 26px); }
.audience__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; margin-top: -16px; text-align: left; }
.audience__title { font-size: clamp(22px, 2.2vw, 34px); letter-spacing: -0.04em; line-height: 1.1; }
/* left-aligned, matching the other § sections (same measure and size as the statement text) */
.audience__copy p { color: var(--ink-2); font-size: var(--t-lede); max-width: 560px; }
/* icons sit in a tight group aligned to the left edge instead of spreading across the full page width */
.audience__list { display: grid; grid-template-columns: repeat(4, clamp(110px, 12vw, 190px)); justify-content: start; }.audience__list li {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: clamp(8px, 1vw, 12px) 8px clamp(6px, .8vw, 10px);
  font-size: 15px; color: var(--ink);
}
.audience__list li + li { border-left: 1px solid var(--line); }
.audience__list svg {
  width: clamp(40px, 3.6vw, 60px); height: auto;
  /* same taupe as the Request consultation button; stroke thick enough that the colour reads true, not washed-out grey */
  fill: none; stroke: var(--oak); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 900px) {
  .audience { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .audience__list { grid-template-columns: repeat(2, 1fr); }
  .audience__list li:nth-child(3) { border-left: 0; }
  .audience__list li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .svc__row { grid-template-columns: 48px 1fr; }
  .svc__list { grid-column: 2; }
  .svc__img { display: none; }
}

/* ---------- process ---------- */
/* process now lives inside "What we do", under the service rows */
.process { margin-top: clamp(32px, 4vw, 56px); }
.process__title { font-size: clamp(22px, 2.2vw, 34px); letter-spacing: -0.04em; line-height: 1.1; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); }
.step { padding: 12px 24px 20px 0; }
.step + .step { padding-left: 24px; border-left: 1px solid var(--line); }
/* step number on the left, line icon on the right, same row */
.step__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.step__no { display: block; font-weight: 300; font-size: clamp(32px, 2.8vw, 44px); letter-spacing: -0.05em; line-height: 1; color: var(--muted); }
.step__icon {
  width: clamp(34px, 2.8vw, 46px); height: auto; flex-shrink: 0;
  fill: none; stroke: var(--oak); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;   /* button taupe, heavy enough to read true */
}
.step h3 { font-size: 20px; letter-spacing: -0.02em; margin-bottom: 6px; font-weight: 500; }
.step p { font-size: 15px; color: var(--ink-2); }
.process__note { margin-top: 20px; display: flex; gap: 16px; align-items: baseline; font-size: 15px; color: var(--ink-2); padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .step:nth-child(3) { padding-left: 0; border-left: 0; }
  .step:nth-child(n+3) { border-top: 1px solid var(--line); }
  .step__head { margin-bottom: 12px; }
  .step__no { font-size: 32px; }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; }
  .step, .step + .step { padding-left: 0; border-left: 0; }
  .step + .step { border-top: 1px solid var(--line); }
  .process__note { flex-direction: column; gap: 8px; }
}

/* ---------- about ---------- */
/* dimension-line divider separating About from the photo gallery above (same style as the section-heading rules) */
.about__divider { margin-bottom: clamp(24px, 3vw, 44px); }
.about__divider .rule { display: block; }
.about__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
/* transparent logo sits straight on the page background, no tile */
.about__logo { display: grid; place-items: center; padding: 4% 8%; }
.about__logo img { width: min(100%, 300px); height: auto; }
.about { padding-top: clamp(28px, 3.5vw, 48px); padding-bottom: clamp(16px, 2vw, 32px); }   /* a touch tighter than the other sections */
.about__copy { display: flex; flex-direction: column; gap: 14px; }
.about__title { font-size: var(--h-section); letter-spacing: -0.045em; color: var(--navy); margin-bottom: 6px; }
.about__copy p { color: var(--ink-2); font-size: var(--t-lede); max-width: 620px; }
@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__logo { padding: 0 24%; }
}

/* ---------- contact ---------- */
.contact { padding: clamp(40px, 5vw, 64px) 0 clamp(24px, 3vw, 48px); }
.contact__grid {
  display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 4vw, 64px);
  background: var(--white); border-radius: var(--radius); border: 1px solid var(--line-soft);
  padding: clamp(22px, 3.2vw, 48px);
}
.contact__copy { display: flex; flex-direction: column; gap: 14px; }
.contact__title { font-size: var(--h-section); letter-spacing: -0.045em; }
.contact__copy p { color: var(--ink-2); font-size: var(--t-lede); }
.contact__info { margin: 8px 0 0; border-top: 1px solid var(--line); }
.contact__info div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.contact__info dt { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.contact__info dd { margin: 0; }
.contact__info a { border-bottom: 1px solid var(--line); }
.contact__info a:hover { border-color: var(--ink); }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; align-content: start; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 500; color: var(--ink); display: flex; justify-content: space-between; }
.field label span { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid transparent; border-radius: 12px;
  padding: 11px 14px; width: 100%;
  transition: border-color .25s var(--ease), background .25s var(--ease);
  appearance: none; -webkit-appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%;
  background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); background: var(--white); }
.field.has-error input, .field.has-error textarea { border-color: #b3261e; }
.form__foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.form__status { font-size: 14px; color: var(--ink-2); }
.form__status.is-error { color: #b3261e; }
@media (max-width: 900px) {
  .contact__grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .form { grid-template-columns: 1fr; }
  .form__foot { justify-content: center; }
  .form__foot .btn { width: 100%; max-width: 280px; }   /* same narrower, centred width as the hero buttons on phones */
}

/* ---------- simple pages (privacy policy, 404) ---------- */
.nav--simple { background: rgba(247, 247, 245, 0.9); border-bottom-color: var(--line); }
.nav__back { flex-shrink: 0; }
@media (max-width: 720px) {
  .nav--simple .nav__inner { gap: 12px; }
  .nav__back { height: 38px; padding: 0 13px; font-size: 13px; }
  .nav--simple .nav__brand { gap: 10px; min-width: 0; }
  .nav--simple .nav__mark { width: 34px; height: 34px; }
  .nav--simple .nav__name { font-size: 13px; }
  .nav--simple .nav__name small { white-space: nowrap; font-size: 8px; letter-spacing: .12em; }
}
.legal { padding: clamp(40px, 6vw, 88px) 0 clamp(56px, 8vw, 112px); }
.legal__inner { max-width: 760px; }
.legal h1 { font-size: var(--h-section); margin: 12px 0 12px; }
.legal__meta { color: var(--muted); font-size: 14px; }
.legal__intro { margin-top: 24px; }
.legal h2 { font-size: 21px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; margin: 40px 0 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.legal p, .legal li { color: var(--ink-2); font-size: var(--t-lede); }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 10px 0 0; padding-left: 20px; list-style: disc; }
.legal li { margin: 6px 0; }
.legal a { color: var(--oak-deep); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--ink); }
.notfound { min-height: calc(100svh - 77px - 110px); display: grid; align-content: center; padding: 64px 0; }
.notfound h1 { font-size: clamp(40px, 6vw, 96px); margin: 12px 0 16px; }
.notfound p { color: var(--ink-2); max-width: 460px; margin-bottom: 28px; }
.footer--simple .footer__base { margin-top: 0; border-top: 0; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--ink); padding: 20px 0 14px; background: var(--paper); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 20px; align-items: center; }
.footer__brand img { width: 92px; height: auto; }
.footer__col { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.footer__col a:hover { color: var(--ink); }
.footer__base { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.footer__top:hover { color: var(--ink); }
/* tablets + phones: small logo on its own line, then Studio / Contact / Index side by side in one row */
@media (max-width: 900px) {
  .footer { padding: 16px 0 12px; }
  .footer__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr) minmax(0, .85fr); gap: 12px 12px; align-items: start; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__brand img { width: 64px; }
  .footer__col { font-size: 12px; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
  .footer__col .label { font-size: 9.5px; }
  .footer__base { margin-top: 12px; padding-top: 8px; flex-wrap: nowrap; }
  .footer__base .label { font-size: 9.5px; letter-spacing: .08em; }
  .footer__base > :nth-child(2) { display: none; }   /* "Est. 1998 — New York" already appears in the hero */
}

/* ---------- lightbox ---------- */
.lightbox {
  border: 0; padding: 0; margin: 0; max-width: none; max-height: none;
  width: 100vw; height: 100dvh;
  background: var(--paper);
  color: var(--ink);
}
.lightbox[open] { display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; }
.lightbox::backdrop { background: transparent; }
.lightbox figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 64px 0 32px; min-width: 0; }
.lightbox img { max-width: 100%; max-height: calc(100dvh - 160px); object-fit: contain; border-radius: 10px; }
.lightbox figcaption { display: flex; gap: 16px; align-items: baseline; font-size: 14px; color: var(--ink-2); }
.lightbox__close { position: absolute; top: 16px; right: 20px; width: 48px; height: 48px; font-size: 32px; font-weight: 300; line-height: 1; }
.lightbox__nav { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line); justify-self: center; font-size: 18px; transition: border-color .2s; }
.lightbox__nav:hover { border-color: var(--ink); }
@media (max-width: 720px) {
  .lightbox[open] { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .lightbox figure { grid-column: 1; grid-row: 1; padding: 64px 12px 8px; }
  .lightbox__prev, .lightbox__next { grid-row: 2; position: static; margin-bottom: 24px; }
  .lightbox__prev { justify-self: start; margin-left: 24px; grid-column: 1; }
  .lightbox__next { justify-self: end; margin-right: 24px; grid-column: 1; }
}

/* ---------- reveal on scroll ---------- */
/* content is always visible at rest; scrolling in only adds a gentle lift */
.reveal { transform: translateY(14px); transition: transform 1s var(--ease); }
.reveal.is-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .hero__img, .shot img { transition: none !important; transform: none !important; opacity: 1 !important; animation: none !important; }
  .tile.fade-in { animation: none; }
}