/* ==========================================================================
   Halden & Co. — Design Tokens & Global Foundation
   ========================================================================== */

:root {
  /* Palette — warm editorial neutrals + single brass accent */
  --bg: #f5f2ec;
  --bg-alt: #ece5d8;
  --surface: #ffffff;
  --deep: #14120f;
  --ink: #1b1916;
  --ink-soft: #55504a;
  --ink-faint: #746e64; /* darkened from #8a8377 — meets 4.5:1 on --bg (WCAG AA) for small uppercase labels */
  --line: rgba(27, 25, 22, 0.12);
  --line-strong: rgba(27, 25, 22, 0.22);
  --accent: #9c7a42;
  --accent-deep: #7a5f32;
  --accent-tint: rgba(156, 122, 66, 0.12);
  --overlay-dark: rgba(15, 13, 10, 0.55);

  /* Type */
  --font-display: "Libre Caslon Display", "Times New Roman", serif;
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 9rem;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.3s;
  --dur-med: 0.6s;
  --dur-slow: 1s;

  /* Shadows — tinted to ink, never pure black */
  --shadow-sm: 0 1px 2px rgba(27, 25, 22, 0.06), 0 2px 8px rgba(27, 25, 22, 0.05);
  --shadow-md: 0 8px 24px rgba(27, 25, 22, 0.10), 0 2px 6px rgba(27, 25, 22, 0.06);
  --shadow-lg: 0 24px 56px rgba(27, 25, 22, 0.16), 0 6px 16px rgba(27, 25, 22, 0.08);
  --shadow-accent: 0 14px 32px rgba(122, 95, 50, 0.24);

  --container: 1360px;
  --nav-h: 84px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: inherit; }
h1, h2, h3, h4, p, figure { margin: 0; }

::selection { background: var(--accent); color: var(--surface); }

/* ---- Grain texture (fixed, pointer-events-none — never on scrolling containers) ---- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Visible focus states for keyboard nav */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--bg);
  padding: 0.9rem 1.4rem;
  z-index: 999;
  font-size: 0.9rem;
}
.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
}

/* ---- Typography ---- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: 600;
  display: inline-block;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 5.4vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 3.6vw, 3.2rem);
  line-height: 1.1;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  line-height: 1.25;
}
.lede {
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 46ch;
  line-height: 1.65;
}
p.body, .body-text {
  color: var(--ink-soft);
  max-width: 62ch;
  line-height: 1.75;
}
em, i { font-style: italic; line-height: 1.15; padding-bottom: 0.15em; display: inline-block; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-3);
}
@media (max-width: 768px) {
  .container { padding-inline: var(--space-2); }
}

section { position: relative; }
.section-pad { padding-block: var(--space-6); }
.section-pad + .section-pad { padding-top: 0; }
@media (max-width: 768px) {
  .section-pad { padding-block: var(--space-5); }
}

.split-text .word { display: inline-block; overflow: hidden; vertical-align: top; }
.split-text .word > span { display: inline-block; will-change: transform; }

/* ==========================================================================
   Page Transition Curtain
   ========================================================================== */
.curtain {
  position: fixed;
  inset: 0;
  background: var(--accent-deep);
  z-index: 10000;
  transform: translateY(101%);
  pointer-events: none;
}
.curtain.is-covering { transition: transform 0.6s var(--ease-in-out); transform: translateY(0%); }
.curtain.is-revealing { transition: transform 0.7s var(--ease-in-out) 0.05s; transform: translateY(-101%); }
.curtain.is-reset { transition: none; transform: translateY(101%); }

/* ==========================================================================
   Scroll progress bar (used sitewide, thin brand line)
   ========================================================================== */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  background: var(--accent);
  z-index: 9998;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.08s linear;
}

/* ==========================================================================
   Nav
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  padding-inline: var(--space-3);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  /* Frosted/etched glass: warm off-white at the brand's own --bg hue,
     never dark, never tinted. Nav text stays charcoal (untouched below). */
  background: rgba(245, 242, 236, 0.76);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid rgba(27, 25, 22, 0.08);
  box-shadow: var(--shadow-sm);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* No backdrop-filter support: fall back to a solid warm surface so the
     nav still reads clearly over photography instead of going flat/transparent. */
  .site-header.is-scrolled { background: var(--bg); }
}
.nav-inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.brand {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), text-shadow var(--dur-fast) var(--ease-out);
}
.brand strong { color: var(--accent-deep); font-style: italic; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.nav-links a {
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  position: relative;
  padding-block: 0.3rem;
  transition: color var(--dur-fast) var(--ease-out), text-shadow var(--dur-fast) var(--ease-out);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--accent-deep);
  transition: right var(--dur-fast) var(--ease-out);
}
.nav-links a:hover::after, .nav-links a.is-active::after { right: 0; }
.nav-links a.is-active { color: var(--ink); }

.nav-cta-wrap { display: flex; align-items: center; gap: var(--space-3); }

/* The homepage header floats bare over the hero photo (see .explore
   section) with no background of its own until scrolled, so on that page
   only, nav text uses white + a dark halo (same treatment as
   .explore-intro) for legibility over arbitrary photo brightness. Every
   other page keeps the normal ink-on-light colors from the rules above. */
body.has-photo-hero .site-header:not(.is-scrolled) .brand { color: #fff; text-shadow: 0 2px 14px rgba(10, 9, 7, 0.55), 0 1px 3px rgba(10, 9, 7, 0.5); }
body.has-photo-hero .site-header:not(.is-scrolled) .brand strong { color: var(--accent); }
body.has-photo-hero .site-header:not(.is-scrolled) .nav-links a { color: rgba(255, 255, 255, 0.92); text-shadow: 0 2px 14px rgba(10, 9, 7, 0.55), 0 1px 3px rgba(10, 9, 7, 0.5); }
body.has-photo-hero .site-header:not(.is-scrolled) .nav-links a.is-active { color: #fff; }
body.has-photo-hero .site-header:not(.is-scrolled) .nav-cta-wrap .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 6px rgba(10, 9, 7, 0.5);
}
body.has-photo-hero .site-header:not(.is-scrolled) .nav-cta-wrap .btn-ghost .btn-arrow { background: rgba(255, 255, 255, 0.18); }
body.has-photo-hero .site-header:not(.is-scrolled) .nav-cta-wrap .btn-ghost:hover,
body.has-photo-hero .site-header:not(.is-scrolled) .nav-cta-wrap .btn-ghost.is-magnet-hover { background: #fff; color: var(--ink); border-color: #fff; text-shadow: none; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.85rem 1.4rem;
  border-radius: 2px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.98) translateY(0) !important; box-shadow: var(--shadow-sm) !important; }
.btn-primary {
  background: var(--ink);
  color: var(--bg);
}
.btn-primary:hover, .btn-primary.is-magnet-hover { background: var(--accent-deep); box-shadow: var(--shadow-accent); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover, .btn-ghost.is-magnet-hover { border-color: var(--ink); background: var(--ink); color: var(--bg); box-shadow: var(--shadow-md); }
.btn-on-dark {
  background: var(--bg);
  color: var(--ink);
}
.btn-on-dark:hover, .btn-on-dark.is-magnet-hover { background: var(--accent-deep); color: var(--bg); box-shadow: var(--shadow-accent); }
.btn-hero-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
}
.btn-hero-ghost:hover, .btn-hero-ghost.is-magnet-hover { background: #fff; color: var(--ink); border-color: #fff; box-shadow: var(--shadow-lg); }
.btn:not([data-magnetic]):hover { transform: translateY(-2px); }
.btn-arrow {
  width: 1.6em; height: 1.6em;
  border-radius: 50%;
  background: rgba(27,25,22,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.btn-arrow svg { display: block; width: 0.85em; height: 0.85em; }
.btn-primary .btn-arrow, .btn-on-dark .btn-arrow { background: rgba(27,25,22,0.08); }
.btn-ghost .btn-arrow { background: var(--accent-tint); }
.btn-hero-ghost .btn-arrow { background: rgba(255,255,255,0.16); }
.btn-hero-ghost:hover .btn-arrow { background: rgba(27,25,22,0.08); }
.btn:hover .btn-arrow { transform: translate(2px, -2px); }

.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: transparent;
  position: relative;
  align-items: center;
  justify-content: center;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
  content: "";
  position: absolute;
  width: 18px; height: 1px;
  background: var(--ink);
  transition: transform var(--dur-fast) var(--ease-in-out), opacity var(--dur-fast);
}
.menu-toggle span::before { transform: translateY(-6px); }
.menu-toggle span::after { transform: translateY(6px); }
.menu-toggle.is-open span { background: transparent; }
.menu-toggle.is-open span::before { transform: translateY(0) rotate(45deg); }
.menu-toggle.is-open span::after { transform: translateY(0) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-links {
    position: fixed;
    inset: 0;
    top: var(--nav-h);
    background: var(--bg);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: var(--space-5) var(--space-3);
    gap: var(--space-3);
    transform: translateY(-8px);
    visibility: hidden;
    /* Background is opaque the instant the panel becomes visible (no
       opacity transition on the panel itself) — fading a solid-colour
       background makes it translucent mid-transition, showing the page
       behind it and making the nav text unreadable while it animates.
       Only the slide (transform) animates; visibility switches instantly
       on open and is deferred to transition-end on close. */
    transition: transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
  }
  .nav-links.is-open { transform: translateY(0); visibility: visible; }
  .nav-links a {
    font-size: 1.6rem;
    font-family: var(--font-display);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
  }
  .nav-links.is-open a { opacity: 1; transform: translateY(0); }
  .nav-links.is-open a:nth-child(1) { transition-delay: 0.05s; }
  .nav-links.is-open a:nth-child(2) { transition-delay: 0.1s; }
  .nav-links.is-open a:nth-child(3) { transition-delay: 0.15s; }
  .nav-links.is-open a:nth-child(4) { transition-delay: 0.2s; }
  .nav-links.is-open a:nth-child(5) { transition-delay: 0.25s; }
  .nav-cta-wrap .btn-ghost { display: none; }
  .menu-toggle { display: inline-flex; }

  /* The open mobile menu is always a solid --bg panel, even on the
     has-photo-hero homepage, so it needs the normal ink-on-light nav
     colors — not the white-on-photo treatment meant for the bare header
     floating over the hero image. Same specificity as the photo-hero
     rules above, so source order (this comes later) wins. */
  .site-header:has(.nav-links.is-open) {
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  body.has-photo-hero .site-header:has(.nav-links.is-open) .brand { color: var(--ink); text-shadow: none; }
  body.has-photo-hero .site-header:has(.nav-links.is-open) .brand strong { color: var(--accent-deep); }
  body.has-photo-hero .site-header:not(.is-scrolled) .nav-links a,
  body.has-photo-hero .site-header:has(.nav-links.is-open) .nav-links a {
    color: var(--ink-soft);
    text-shadow: none;
  }
  body.has-photo-hero .site-header:not(.is-scrolled) .nav-links a.is-active,
  body.has-photo-hero .site-header:has(.nav-links.is-open) .nav-links a.is-active {
    color: var(--ink);
  }
}

/* ==========================================================================
   Explore — pinned, scroll-scrubbed cinematic tour through the home.
   A tall track (.explore-track) supplies the scroll distance; the pin
   (position: sticky) holds one viewport in place while JS reads scroll
   progress and crossfades/zooms the frame images 1:1 with the scrollbar,
   the same "scrub, don't play" technique used for scroll-driven video.
   No <video> element: see js/main.js "explore tour" for the frame math.
   ========================================================================== */
.explore { position: relative; background: var(--deep); }
.explore-track { height: 500vh; position: relative; }
.explore-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  color: #fff;
}
.explore-frames { position: absolute; inset: 0; }
.explore-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity;
}
.explore-frame img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  will-change: transform;
}
.explore-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* bottom fade for the HUD/cue legibility, plus a left-side wash so the
     intro copy sits on calm ground instead of fighting the busiest part
     of the photo (the furniture grouping sits centre-frame). */
  background:
    linear-gradient(90deg, rgba(10,9,7,0.66) 0%, rgba(10,9,7,0.48) 32%, rgba(10,9,7,0) 62%),
    linear-gradient(180deg, rgba(15,13,10,0.3) 0%, rgba(15,13,10,0.05) 26%, rgba(15,13,10,0.22) 52%, rgba(15,13,10,0.82) 100%);
}
.explore-intro {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  padding-block: 0 var(--space-6);
}
/* keep the copy block to a true side column — at the old 16ch/46ch widths
   the heading and paragraph stretched into the frame's centre, where the
   dining table and armchairs sit, reading as clutter behind the text. */
.explore-intro .eyebrow { color: rgba(255,255,255,0.88); text-shadow: 0 2px 20px rgba(10,9,7,0.5); }
.explore-intro h1 { color: #fff; max-width: 16ch; font-size: clamp(2.6rem, 4.6vw, 4.3rem); text-shadow: 0 4px 32px rgba(10,9,7,0.4); }
.explore-intro .lede { color: rgba(255,255,255,0.88); margin-top: var(--space-2); text-shadow: 0 2px 20px rgba(10,9,7,0.45); max-width: 36ch; }
.explore-intro .hero-actions { margin-top: var(--space-4); }
.hero-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.explore-hud {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; top: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  padding: calc(var(--nav-h) + var(--space-3)) var(--space-3) 0;
}
.explore-hud-label { max-width: 32ch; }
.explore-hud-index { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); display: block; font-variant-numeric: tabular-nums; }
.explore-hud-name { font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.7rem); display: block; margin-top: 0.3rem; transition: opacity 0.25s var(--ease-out); }
.explore-hud-caption { font-size: 0.86rem; color: rgba(255,255,255,0.72); display: block; margin-top: 0.35rem; }
.explore-hud-dots { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-end; }
.explore-hud-dots li {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.72rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.45);
  transition: color var(--dur-fast) var(--ease-out);
  font-variant-numeric: tabular-nums;
}
.explore-hud-dots li span { width: 18px; height: 1px; background: rgba(255,255,255,0.35); display: inline-block; transition: background var(--dur-fast), width var(--dur-fast); }
.explore-hud-dots li.is-active { color: #fff; }
.explore-hud-dots li.is-active span { background: var(--accent); width: 30px; }

.explore-cue {
  position: absolute; z-index: 2; left: 50%; bottom: var(--space-3);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  color: rgba(255,255,255,0.75);
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.explore-cue svg { width: 14px; height: 22px; animation: explore-cue-bob 1.8s var(--ease-in-out) infinite; }
@keyframes explore-cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

@media (max-width: 768px) {
  /* the top-pinned HUD (index/name/caption/dots) collides with the
     bottom-pinned intro text once the hero is short and the copy wraps
     to several lines, so it's dropped on mobile rather than repositioned. */
  .explore-hud { display: none; }
  /* the left-side wash reads as a clean side column on wide frames, but
     on a narrow phone viewport the intro text already spans full-width,
     so the same horizontal gradient just patches half of it darker than
     the other — drop it and keep the bottom fade only. */
  /* the phone frame crops to the bright centre of the photo, so the old
     0.05-0.22 mid-band left the eyebrow/heading with almost no scrim
     behind them. Darken the lower two thirds where the copy actually sits. */
  .explore-scrim { background: linear-gradient(180deg, rgba(15,13,10,0.34) 0%, rgba(15,13,10,0.14) 20%, rgba(15,13,10,0.52) 50%, rgba(15,13,10,0.78) 72%, rgba(15,13,10,0.92) 100%); }
  /* Lift the whole intro block off the bottom edge (instead of padding
     under it) so it uses the empty space above rather than crowding the
     "Scroll to explore" cue, which sits fixed at the very bottom. */
  .explore-intro { bottom: var(--space-6); padding-block: 0; }
  /* on mobile the eyebrow/heading/paragraph/buttons stack tight against
     each other with no breathing room; give each block explicit space. */
  .explore-intro .eyebrow { margin-bottom: var(--space-2); display: block; }
  .explore-intro h1 { margin-bottom: var(--space-2); }
  .explore-intro .lede { margin-top: 0; }
  /* full-width, equal-size hero buttons instead of two ragged auto widths */
  .explore-intro .hero-actions { flex-direction: column; align-items: stretch; }
  .explore-intro .hero-actions > .btn,
  .explore-intro .hero-actions > a { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Reveal utility (JS toggles .is-visible via IntersectionObserver)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.03s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.13s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.18s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.23s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.28s; }

.reveal-clip {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s var(--ease-out);
}
.reveal-clip.is-visible { clip-path: inset(0 0 0% 0); }

/* ==========================================================================
   Brand Statement
   ========================================================================== */
.statement {
  padding-block: var(--space-6);
  text-align: center;
}
.statement .h2 {
  max-width: 20ch;
  margin-inline: auto;
}
.statement .h2 em { color: var(--accent-deep); }

/* ==========================================================================
   Stats
   ========================================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: var(--space-5);
}
.stat { text-align: left; }
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  color: var(--accent-deep);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0.15em;
}
.stat-label { margin-top: 0.6rem; font-size: 0.86rem; color: var(--ink-soft); max-width: 20ch; }
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-4); }
}

/* ==========================================================================
   Before / After Slider
   ========================================================================== */
.ba-slider {
  --pos: 50;
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: 3px;
  user-select: none;
  touch-action: pan-y;
  box-shadow: var(--shadow-md);
  cursor: ew-resize;
}
.ba-slider img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ba-slider .ba-before-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 calc(100% - var(--pos) * 1%) 0 0);
  will-change: clip-path;
}
.ba-slider .ba-before-wrap img { width: 100%; max-width: none; }
.ba-tag {
  position: absolute;
  top: var(--space-2);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(15,13,10,0.55);
  padding: 0.4rem 0.8rem;
  z-index: 3;
}
.ba-tag.before { left: var(--space-2); }
.ba-tag.after { right: var(--space-2); }
.ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--pos) * 1%);
  width: 2px;
  background: #fff;
  transform: translateX(-50%);
  cursor: ew-resize;
  touch-action: none;
  z-index: 4;
}
.ba-handle::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 48px; height: 48px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}
.ba-handle::after {
  content: "⟷";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  font-size: 1.1rem;
  color: var(--ink);
  z-index: 1;
}

/* ==========================================================================
   Featured project (home)
   ========================================================================== */
.featured {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: var(--space-5);
  align-items: center;
}
.featured-copy .h2 { margin-top: var(--space-2); will-change: transform; }
.featured-copy .body-text { margin-top: var(--space-3); }

/* ---- Featured card: scroll-driven 3D tilt-in (see js/scroll-reveal.js) ---- */
.featured-card-perspective {
  perspective: 1600px;
  /* The scroll-driven 3D lean projects the card a little wider than its own
     box. Clip (not hidden) stops that projection from ever creating
     horizontal page scroll, while overflow-clip-margin still lets the tilted
     card + its soft shadow paint outside the box. clip creates no scroll
     container, so the page's other sticky elements are unaffected. */
  overflow: clip;
  /* 24px == the container's side padding: with the card flush to the
     container edge, this is the largest bleed that still guarantees the
     projected corner never crosses the viewport edge (no page scroll) at
     any width, while showing as much of the lean as possible. */
  overflow-clip-margin: 24px;
}
.featured-card-frame {
  transform-style: preserve-3d;
  transform-origin: center top;
  will-change: transform;
  border-radius: 22px;
  padding: 10px;
  background: var(--deep);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 24px 48px rgba(15,13,10,0.22),
    0 60px 100px rgba(15,13,10,0.28);
}
.featured-card-frame .ba-slider {
  border-radius: 14px;
  box-shadow: none;
}
.featured-meta {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.featured-meta div span { display: block; }
.featured-meta .label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.featured-meta .value { font-family: var(--font-display); font-size: 1.3rem; margin-top: 0.3rem; }
@media (max-width: 900px) {
  .featured { grid-template-columns: 1fr; gap: var(--space-4); }
  .featured-meta { flex-wrap: wrap; row-gap: var(--space-3); }
}

/* ==========================================================================
   Service overview (home) — asymmetric bento, NOT equal 3-col cards
   ========================================================================== */
.service-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap: var(--space-2);
}
.service-tile {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  color: #fff;
  display: flex;
  align-items: flex-end;
  min-height: 260px;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.service-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.service-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.service-tile:hover img { transform: scale(1.06); }
.service-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,13,10,0) 40%, rgba(15,13,10,0.72) 100%);
}
.service-tile-copy { position: relative; z-index: 2; padding: var(--space-3); }
.service-tile-copy .tag { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.75); }
.service-tile-copy h3 { color: #fff; margin-top: 0.4rem; }
.service-tile.tall { grid-column: span 3; grid-row: span 2; min-height: 460px; }
.service-tile.wide { grid-column: span 3; }
.service-tile.mid { grid-column: span 3; }

/* 4-up offset variant (home service overview) — asymmetric rhythm, no empty cells */
.service-bento.four-up {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  align-items: start;
}
.service-bento.four-up .service-tile { grid-column: span 1; min-height: 430px; }
.service-bento.four-up .service-tile:nth-child(2n) { margin-top: var(--space-4); }

/* Tablet: the 4-up row becomes a calm 2×2 (the .four-up class is more
   specific than the plain .service-bento mobile rule, so it must be
   overridden explicitly or it stays 4 cramped columns). */
@media (max-width: 900px) {
  .service-bento { grid-template-columns: 1fr; }
  .service-tile, .service-tile.tall, .service-tile.wide, .service-tile.mid { grid-column: span 1; min-height: 320px; }
  .service-bento.four-up { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .service-bento.four-up .service-tile { min-height: 340px; }
  .service-bento.four-up .service-tile:nth-child(2n) { margin-top: 0; }
}
/* Phone: one tile per row, full-width, with real breathing room between them. */
@media (max-width: 600px) {
  .service-bento.four-up { grid-template-columns: 1fr; gap: var(--space-3); }
  .service-bento.four-up .service-tile { min-height: 300px; }
}

/* ==========================================================================
   Testimonial
   ========================================================================== */
.testimonial {
  padding-block: var(--space-6);
  background: var(--deep);
  color: var(--bg);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.testimonial-media {
  position: absolute; inset: 0;
  z-index: 0;
}
.testimonial-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.28; }
.testimonial-media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,18,15,0.55), rgba(20,18,15,0.92)); }
.testimonial-inner { position: relative; z-index: 2; max-width: 760px; margin-inline: auto; }
.testimonial blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.4;
}
.testimonial blockquote em { color: var(--accent); }
.testimonial cite {
  display: block;
  margin-top: var(--space-3);
  font-style: normal;
  font-size: 0.86rem;
  color: rgba(245,242,236,0.65);
  letter-spacing: 0.03em;
}

/* ==========================================================================
   Final CTA band
   ========================================================================== */
.cta-band {
  padding-block: var(--space-6);
  text-align: center;
}
.cta-band .eyebrow { margin-bottom: var(--space-3); display: block; }
.cta-band .h2 { max-width: 18ch; margin-inline: auto; }
.cta-band .hero-actions { justify-content: center; margin-top: var(--space-3); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--deep);
  color: var(--bg);
  padding-block: var(--space-5) var(--space-3);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(245,242,236,0.14);
}
.footer-brand .brand { color: var(--bg); font-size: 1.6rem; }
.footer-brand .brand strong { color: var(--accent); }
.footer-brand p { margin-top: var(--space-2); color: rgba(245,242,236,0.6); max-width: 32ch; font-size: 0.92rem; }
.footer-col h4 { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,242,236,0.5); margin-bottom: var(--space-2); }
.footer-col a, .footer-col p { display: block; color: rgba(245,242,236,0.82); font-size: 0.94rem; margin-bottom: 0.65rem; }
.footer-col a { position: relative; width: fit-content; }
.footer-col a::after { content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background: var(--accent); transition: right var(--dur-fast) var(--ease-out); }
.footer-col a:hover::after { right: 0; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-3);
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 0.8rem;
  color: rgba(245,242,236,0.5);
}
.footer-bottom a { color: rgba(245,242,236,0.7); }
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Page header (interior pages)
   ========================================================================== */
.page-header {
  padding-block: calc(var(--nav-h) + var(--space-5)) var(--space-5);
}
.page-header .eyebrow { margin-bottom: var(--space-2); display: block; }
.page-header .h1 { max-width: 22ch; }
.page-header .lede { margin-top: var(--space-3); }

.page-header-media {
  position: relative;
  height: 60vh;
  min-height: 420px;
  margin-top: var(--space-5);
  overflow: hidden;
  border-radius: 3px;
  box-shadow: var(--shadow-md);
}
.page-header-media img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Projects / Portfolio grid + filters
   ========================================================================== */
.filter-bar {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-4);
}
.filter-btn {
  background: transparent;
  border: 1px solid var(--line-strong);
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  font-size: 0.84rem;
  color: var(--ink-soft);
  transition: all var(--dur-fast) var(--ease-out);
}
.filter-btn:hover { border-color: var(--ink); color: var(--ink); }
.filter-btn.is-active { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.project-card {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  aspect-ratio: 4/5;
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), box-shadow 0.25s var(--ease-out);
  perspective: 900px;
}
.project-card:hover { box-shadow: var(--shadow-lg); }
.project-card.is-filtered-out {
  opacity: 0;
  transform: scale(0.94) translateY(14px);
  pointer-events: none;
  position: absolute;
}
.project-card-inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
}
.project-card-inner.is-settling { transition: transform 0.35s var(--ease-out); }
.project-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.project-card:hover img { transform: scale(1.08); }
.project-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(180deg, rgba(15,13,10,0) 45%, rgba(15,13,10,0.78) 100%);
}
.project-card-copy {
  padding: var(--space-3);
  color: #fff;
  transform: translateY(14px);
  opacity: 0.92;
  transition: transform var(--dur-fast) var(--ease-out);
}
.project-card:hover .project-card-copy { transform: translateY(0); }
.project-card-copy .tag { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.72); }
.project-card-copy h3 { color: #fff; margin-top: 0.35rem; font-size: 1.35rem; }
@media (max-width: 900px) {
  .project-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .project-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Case study
   ========================================================================== */
.cs-hero {
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  position: relative;
  color: #fff;
  overflow: hidden;
}
.cs-hero .ba-slider { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.cs-hero .ba-tag { top: calc(var(--nav-h) + var(--space-2)); }
.cs-hero-copy {
  position: relative;
  z-index: 5;
  width: 100%;
  padding: var(--space-5) var(--space-3) var(--space-5);
  background: linear-gradient(0deg, rgba(15,13,10,0.7), transparent);
}
.cs-hero-copy .container { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.cs-hero-copy h1 { color: #fff; max-width: 18ch; }

.cs-meta-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
}
/* both are spans, so without display:block the pair ran together on one line
   ("Scope Full Kitchen Gut") and the value's margin-top was ignored — on a
   phone the value then wrapped mid-phrase underneath its own label. */
.cs-meta-strip .label { display: block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.cs-meta-strip .value { display: block; font-family: var(--font-display); font-size: 1.5rem; margin-top: 0.4rem; }
@media (max-width: 700px) {
  .cs-meta-strip { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-3); }
}

.cs-story {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-5);
}
.cs-story .body-text + .body-text { margin-top: var(--space-2); }
@media (max-width: 900px) {
  .cs-story { grid-template-columns: 1fr; }
}

.cs-gallery-track {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-2);
  scrollbar-width: thin;
}
.cs-gallery-track figure {
  flex: 0 0 auto;
  width: min(72vw, 640px);
  scroll-snap-align: start;
}
.cs-gallery-track img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 3px;
}
.cs-gallery-track figcaption { margin-top: 0.7rem; font-size: 0.86rem; color: var(--ink-faint); }

.cs-quote {
  padding-block: var(--space-6);
  text-align: center;
}
.cs-quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  max-width: 26ch;
  margin-inline: auto;
  line-height: 1.35;
}
.cs-quote cite { display: block; margin-top: var(--space-3); font-style: normal; color: var(--ink-faint); font-size: 0.9rem; }

.cs-nav-next {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-4);
  border-top: 1px solid var(--line);
  gap: var(--space-2);
}
.cs-nav-next a { font-family: var(--font-display); font-size: 1.4rem; }
.cs-nav-next .label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); display:block; margin-bottom: 0.4rem; }

/* ==========================================================================
   Services page — accordion
   ========================================================================== */
.service-accordion { border-top: 1px solid var(--line); }
.service-item { border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + var(--space-3)); }
.service-item-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
  background: transparent;
  border: none;
  text-align: left;
}
.service-item-head .num { font-size: 0.86rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.service-item-head h3 { flex: 1; }
.service-item-head .plus {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  position: relative;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.service-item-head .plus::before, .service-item-head .plus::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 1px;
  background: var(--ink);
  transform: translate(-50%, -50%);
}
.service-item-head .plus::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform var(--dur-fast) var(--ease-out); }
.service-item.is-open .plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.service-item.is-open .plus { background: var(--ink); border-color: var(--ink); }
.service-item.is-open .plus::before, .service-item.is-open .plus::after { background: var(--bg); }

.service-item-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease-out);
}
.service-item-body-inner { overflow: hidden; }
.service-item.is-open .service-item-body { grid-template-rows: 1fr; }
.service-item-content {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  align-items: center;
}
.service-item-content img { border-radius: 3px; aspect-ratio: 5/4; object-fit: cover; width: 100%; }
.service-process-list { margin-top: var(--space-3); display: grid; gap: 0.5rem; }
.service-process-list li { font-size: 0.92rem; color: var(--ink-soft); padding-left: 1.2rem; position: relative; }
.service-process-list li::before { content: "―"; position: absolute; left: 0; color: var(--accent-deep); }
@media (max-width: 760px) {
  .service-item-content { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Process page — stepped narrative + SVG line
   ========================================================================== */
.process-rail {
  position: relative;
  padding-left: 80px;
}
.process-line-svg {
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 4px;
  height: 100%;
}
.process-line-svg path {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 2;
}
.process-line-svg .line-fill {
  stroke: var(--accent-deep);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.1s linear;
}
@media (prefers-reduced-motion: reduce) {
  .process-line-svg .line-fill { stroke-dashoffset: 0; }
}
.process-step {
  position: relative;
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--line);
}
.process-step:last-child { border-bottom: none; }
.process-step-marker {
  position: absolute;
  left: -80px;
  top: var(--space-5);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-family: var(--font-display);
  font-size: 1.1rem;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.process-step.is-active .process-step-marker {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: var(--bg);
}
.process-step-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: center;
}
.process-step:nth-child(even) .process-step-grid { direction: rtl; }
.process-step:nth-child(even) .process-step-grid > * { direction: ltr; }
.process-step-media img { border-radius: 3px; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.process-step-copy .eyebrow { margin-bottom: var(--space-1); }
.process-step-copy .h3 { margin-top: 0.6rem; }
.process-step-copy p { margin-top: var(--space-2); }
.process-step-copy ul { margin-top: var(--space-3); display: grid; gap: 0.5rem; }
.process-step-copy li { font-size: 0.92rem; color: var(--ink-soft); padding-left: 1.1rem; position: relative; }
.process-step-copy li::before { content:""; position:absolute; left:0; top:0.55em; width:5px; height:5px; border-radius:50%; background: var(--accent-deep); }

@media (max-width: 860px) {
  .process-rail { padding-left: 56px; }
  .process-line-svg { left: 16px; }
  .process-step-marker { left: -56px; width: 36px; height: 36px; font-size: 0.95rem; }
  .process-step-grid, .process-step:nth-child(even) .process-step-grid { grid-template-columns: 1fr; direction: ltr; }
}

/* ==========================================================================
   About page
   ========================================================================== */
.about-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.about-hero-grid img { border-radius: 3px; width: 100%; height: 100%; object-fit: cover; }
.about-hero-grid .tall { aspect-ratio: 3/4; }
@media (max-width: 760px) {
  .about-hero-grid { grid-template-columns: 1fr; }
}

.philosophy-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.philosophy-item .num { font-family: var(--font-display); font-size: 2.2rem; color: var(--accent-deep); }
.philosophy-item h3 { margin-top: var(--space-2); }
.philosophy-item p { margin-top: 0.7rem; color: var(--ink-soft); font-size: 0.95rem; }
@media (max-width: 760px) {
  .philosophy-list { grid-template-columns: 1fr; }
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.team-card { border-top: 1px solid var(--line); padding-top: var(--space-3); }
.team-monogram {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-bottom: var(--space-2);
}
.team-card h3 { font-size: 1.15rem; }
.team-card .role { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); margin-top: 0.3rem; }
.team-card p.bio { margin-top: 0.7rem; font-size: 0.9rem; color: var(--ink-soft); }
@media (max-width: 900px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

.field {
  position: relative;
  margin-bottom: var(--space-3);
}
.field label {
  position: absolute;
  left: 0;
  top: 1rem;
  font-size: 1rem;
  color: var(--ink-faint);
  transition: transform var(--dur-fast) var(--ease-out), font-size var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  pointer-events: none;
  transform-origin: left top;
}
.field input, .field textarea, .field select {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  background: transparent;
  padding: 1rem 0 0.7rem;
  color: var(--ink);
  transition: border-color var(--dur-fast);
}
.field select { appearance: none; -webkit-appearance: none; border-radius: 0; }
.field textarea { resize: vertical; min-height: 100px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent-deep); box-shadow: 0 1px 0 var(--accent-deep); }
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field.has-value label {
  transform: translateY(-1.1rem) scale(0.78);
  color: var(--accent-deep);
}
.field:has(select) label {
  transform: translateY(-1.1rem) scale(0.78);
  color: var(--ink-faint);
  transition: color var(--dur-fast);
}
.field:has(select:focus) label,
.field.has-value:has(select) label { color: var(--accent-deep); }
.field-hint { font-size: 0.78rem; color: var(--ink-faint); margin-top: 0.4rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.submit-btn {
  position: relative;
  overflow: hidden;
  min-width: 210px;
  justify-content: center;
}
.submit-btn .label-default, .submit-btn .label-loading, .submit-btn .label-success {
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.submit-btn .label-loading, .submit-btn .label-success {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(6px);
}
.submit-btn.is-loading .label-default { opacity: 0; }
.submit-btn.is-loading .label-loading { opacity: 1; transform: translateY(0); }
.submit-btn.is-success .label-default, .submit-btn.is-success .label-loading { opacity: 0; }
.submit-btn.is-success .label-success { opacity: 1; transform: translateY(0); }
.submit-btn.is-success { background: var(--accent-deep); }
.spinner {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(245,242,236,0.35);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.contact-info-list { margin-top: var(--space-4); display: grid; gap: var(--space-3); }
.contact-info-list .label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.contact-info-list .value { font-family: var(--font-display); font-size: 1.3rem; margin-top: 0.3rem; }
.service-area-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-2); }
.service-area-tags span { border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.82rem; color: var(--ink-soft); }

.form-status {
  margin-top: var(--space-2);
  font-size: 0.88rem;
  color: var(--accent-deep);
}

/* ==========================================================================
   Reduced motion — sitewide static fallback
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-stagger > *, .reveal-clip { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  .curtain { display: none; }
  .explore-track { height: 100vh !important; }
  .explore-pin { position: relative !important; }
  .explore-frame { display: none; }
  .explore-frame:first-child { display: block; opacity: 1 !important; }
  .explore-frame img { transform: none !important; }
  .explore-hud, .explore-cue { display: none; }
  .explore-intro { opacity: 1 !important; transform: none !important; }
}

/* Respect no-JS: reveal targets must still show content */
.no-js .reveal, .no-js .reveal-stagger > *, .no-js .reveal-clip {
  opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important;
}
.no-js .curtain, .no-js .scroll-progress { display: none !important; }
.no-js .explore-track { height: 100vh !important; }
.no-js .explore-pin { position: relative !important; }
.no-js .explore-frame { display: none; }
.no-js .explore-frame:first-child { display: block; opacity: 1 !important; }
.no-js .explore-hud, .no-js .explore-cue { display: none; }
.no-js .explore-intro { opacity: 1 !important; transform: none !important; }

/* No-JS: keep every interactive disclosure readable without JS */
.no-js .nav-links {
  position: static; opacity: 1; visibility: visible; transform: none;
  flex-direction: row; padding: 0;
}
.no-js .menu-toggle { display: none; }
.no-js .service-item-body { grid-template-rows: 1fr !important; }
.no-js .service-item-content { padding-bottom: var(--space-4); }
@media (max-width: 900px) {
  .no-js .nav-links { flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: var(--space-2) 0; }
}

/* ==========================================================================
   Responsive polish — safe areas, comfortable tap targets, small-phone type
   ========================================================================== */
/* keep the fixed header + hero content clear of notches / rounded corners */
.site-header { padding-inline: max(var(--space-3), env(safe-area-inset-left)); }
@media (max-width: 900px) {
  .nav-links { padding-inline: max(var(--space-3), env(safe-area-inset-left)); }
  /* generous hit areas on the full-screen mobile nav overlay */
  .nav-links a { padding-block: 0.5rem; }
}

@media (max-width: 640px) {
  .container { padding-inline: max(var(--space-2), env(safe-area-inset-left)); }
  /* comfortable, thumb-sized links in the footer + contact details */
  .footer-col a { padding-block: 0.35rem; }
  .contact-info-list a.value { display: inline-flex; align-items: center; min-height: 40px; }
  /* flex (not inline-flex): these must stay on their own line in the
     footer's stacked link list, just taller for a thumb-sized tap area. */
  .footer-col a[href^="tel:"],
  .footer-col a[href^="mailto:"] { display: flex; align-items: center; min-height: 40px; }
  /* legal/gallery scrollers already clip; nothing should reach the page edge */
  .cs-hero-copy .container { gap: var(--space-2); }
}

/* very small phones: stop the case-study meta values overflowing their cell */
@media (max-width: 420px) {
  .cs-meta-strip { grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3); }
  .cs-meta-strip .value { font-size: 1.2rem; overflow-wrap: anywhere; }
  .featured-meta .value,
  .contact-info-list .value { overflow-wrap: anywhere; }
}

/* ==========================================================================
   Mobile spacing — the home page reads cramped on a phone once sections
   collapse to one column; restore a generous, editorial vertical rhythm and
   give each block room to breathe rather than stacking wall-to-wall.
   ========================================================================== */
@media (max-width: 600px) {
  /* wider side gutters so full-bleed copy isn't jammed against the edge */
  .container { padding-inline: max(1.35rem, env(safe-area-inset-left)); }

  /* full 6rem rhythm between sections instead of the tighter 4rem default */
  .section-pad { padding-block: var(--space-6); }
  .statement { padding-block: var(--space-6); }

  /* the opening statement gets extra air and a slightly calmer measure */
  .statement .h2 { max-width: 18ch; }

  /* stats: more vertical separation between the two rows */
  .stats { padding-block: var(--space-5); gap: var(--space-3); row-gap: var(--space-5); }
  .stat-label { margin-top: 0.5rem; }

  /* featured: real distance between the copy block and the before/after card */
  .featured { gap: var(--space-5); }
  .featured-meta { margin-top: var(--space-4); gap: var(--space-4) var(--space-5); }

  /* service tiles: space between stacked tiles + a touch more between the
     section heading and the grid */
  .service-bento.four-up { row-gap: var(--space-4); }

  /* testimonial + closing CTA: give the quote and the ask room to land */
  .testimonial { padding-block: var(--space-6); }
  .cta-band { padding-block: var(--space-6); }
  .cta-band .hero-actions { margin-top: var(--space-4); }
}

/* ===== Demo badge =====================================================
   This site is shown in the Textum Media portfolio, so every page carries a
   small badge back to the studio — the same as the other four demos, which
   this one was missing. Styled from this site's own palette rather than the
   studio's, so it belongs to the page it sits on. Dismissable.
   ===================================================================== */
.demo-pill {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 250;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background-color: var(--deep);
  color: var(--bg);
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 12px 30px rgba(15, 13, 10, 0.28);
}

.demo-pill a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
}

.demo-pill .x {
  border: 0;
  background: none;
  color: var(--ink-faint);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

.demo-pill .x:hover {
  color: var(--bg);
}

.demo-pill.hide {
  display: none;
}

@media (max-width: 560px) {
  .demo-pill {
    right: 10px;
    bottom: 10px;
    padding: 7px 10px 7px 13px;
    font-size: 11px;
  }
}