/* ============================================================
   NEXT LEVEL SERVICES — style.css
   Single stylesheet. Tokens → Reset → Utilities →
   Nav → Mobile Menu → Footer → Reveal → Home Sections
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');


/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* ---- Cool-gray family (black → white). Every gray in the site
     should trace back to one of these — no warm/beige/brown drift. ---- */
  --navy:       #0a0a0b;   /* Primary — headings, dark sections (near-black) */
  --navy-dark:  #050506;   /* Footer, deepest surfaces */
  --teal:       #9aa1a9;   /* Mid cool-gray — accents, dividers, CTA hover */
  --teal-light: #eceeef;   /* Bright cool-gray — CTA default, eyebrows on dark */
  --teal-deep:  #55585e;   /* Charcoal cool-gray — small text on light bg (AA-safe) */
  --steel:      #c9cbce;   /* Borders, dividers, secondary text */
  --ice:        #eef0f1;   /* Tinted surface — hover state for existing pillar/testimonial cards */
  --off-white:  #f4f5f6;   /* Base page background — strictly cool-neutral */
  --white:      #ffffff;

  /* Dedicated light cool-gray card system (What We Do, before/after frames) */
  --card-bg:        #f6f7f9;
  --card-bg-hover:  #e3e6ea;
  --card-border:    rgba(10,10,11,0.07);

  /* Polished silver — reserved for button fills. */
  --silver-gradient: linear-gradient(115deg, #35383d 0%, #8b929b 32%, #e7eaec 50%, #8b929b 68%, #35383d 100%);
  /* Metallic text signature (inside and out / property / different) —
     same idea, lighter outer stops so it stays legible on dark sections
     instead of dissolving into the navy background. */
  --metallic-gradient: linear-gradient(115deg, #8a8f96 0%, #c3c7cb 28%, #f5f6f7 50%, #c3c7cb 72%, #8a8f96 100%);
  /* Same metallic signature, darkened for use on light sections (e.g. Our
     Approach) so it doesn't wash out against an off-white background. */
  --metallic-gradient-dark: linear-gradient(115deg, #45484d 0%, #6e737a 28%, #9aa1a9 50%, #6e737a 72%, #45484d 100%);

  --font:      'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --ease:       cubic-bezier(0.25, 0, 0, 1);
  --duration:   600ms;
  --radius:     6px;   /* buttons, inputs, badges          */
  --radius-lg:  8px;   /* cards, photos, larger surfaces   */

  /* One consistent section rhythm sitewide — ~100px top/bottom on
     desktop, scaling down to ~56px on phones. */
  --section-y: clamp(56px, 8vw, 100px);
  --container:  1280px;
  --gutter:     clamp(24px, 5.5vw, 88px);
}


/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font);
  background: var(--off-white);
  color: var(--navy);
  overflow-x: hidden;
}

img    { display: block; max-width: 100%; }
a      { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { font-family: inherit; }


/* ============================================================
   UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
/* On navy sections the deep teal is too dark — use the bright brand teal */
.people .eyebrow,
.cta-section .eyebrow { color: var(--teal-light); }

/* Metallic silver signature — reserved for three specific phrases sitewide:
   "inside and out", "property", "different". Do not extend to other text. */
.metallic {
  background: var(--metallic-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  background: var(--teal-light);
  background-image: linear-gradient(115deg, #d8dbdd 0%, #f3f4f5 30%, #ffffff 50%, #f3f4f5 70%, #d8dbdd 100%);
  padding: 14px 28px;
  border-radius: var(--radius);
  letter-spacing: 0.03em;
  /* Keeps the button defined against light backgrounds, where the silver
     fill would otherwise blend in. box-sizing is border-box sitewide, so
     this doesn't change the button's outer size. */
  border: 1px solid rgba(10,10,11,0.28);
  cursor: pointer;
  transition: filter 280ms, transform 200ms var(--ease), gap 250ms var(--ease), box-shadow 280ms, border-color 280ms;
}
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-2px); gap: 14px; box-shadow: 0 10px 24px rgba(10,10,11,0.18); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.28);
  padding: 13px 24px;
  border-radius: var(--radius);
  letter-spacing: 0.03em;
  transition: color 280ms, border-color 280ms, transform 200ms var(--ease), gap 250ms var(--ease);
}
.btn-ghost:hover { color: var(--white); border-color: rgba(255,255,255,0.6); transform: translateY(-1px); gap: 12px; }

.arrow-icon { flex-shrink: 0; transition: transform 250ms var(--ease); }
.btn-primary:hover .arrow-icon,
.btn-ghost:hover   .arrow-icon { transform: translateX(3px); }


/* ============================================================
   SCROLL REVEAL — progressive enhancement only.
   [data-reveal] elements are fully visible by default. The
   opacity:0 starting state only ever applies once <html> carries
   a "js" class, added by a synchronous inline script in <head>
   (see top of each page). No JS, no class, nothing ever hides —
   headlines, copy, and buttons always render even if JS fails.
   ============================================================ */
[data-reveal] { opacity: 1; transform: none; }
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}
html.js [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal][data-delay="1"] { transition-delay: 100ms; }
[data-reveal][data-delay="2"] { transition-delay: 220ms; }
[data-reveal][data-delay="3"] { transition-delay: 340ms; }
[data-reveal][data-delay="4"] { transition-delay: 460ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: none; opacity: 1; transform: none; }
}


/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  gap: 32px;
  transition: padding var(--duration) var(--ease), background-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.nav.is-scrolled {
  padding-top: 14px;
  padding-bottom: 14px;
  /* Less opaque than the resting state — page content shows through subtly,
     with enough blur + tint to keep nav text readable over any section. */
  background-color: rgba(8,8,9,0.7);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.07);
}

.nav-logo { display: flex; align-items: center; flex-shrink: 0; }

.nav-logo-img {
  /* Desktop: 75px tall resting, 56px once scrolled */
  height: 75px; width: auto; display: block;
  transition: height var(--duration) var(--ease);
}
.nav.is-scrolled .nav-logo-img { height: 56px; }

@media (max-width: 1200px) {
  .nav-logo-img { height: 66px; }
  .nav.is-scrolled .nav-logo-img { height: 52px; }
}
@media (max-width: 960px) {
  .nav-logo-img { height: 56px; }
  .nav.is-scrolled .nav-logo-img { height: 46px; }
}
@media (max-width: 540px) {
  .nav { padding-top: 16px; padding-bottom: 16px; }
  .nav-logo-img { height: 48px; }
  .nav.is-scrolled .nav-logo-img { height: 42px; }
}

.nav-links { display: flex; align-items: center; gap: 34px; margin-left: auto; }
.nav-links a {
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.02em;
  transition: color 280ms;
}
.nav-links a:hover,
.nav-links a.active { color: var(--white); }
.nav-links a.active  { font-weight: 700; }

.nav-cta {
  flex-shrink: 0;
  font-size: 13px; font-weight: 700;
  color: var(--navy); background: var(--teal-light);
  background-image: linear-gradient(115deg, #d8dbdd 0%, #f3f4f5 30%, #ffffff 50%, #f3f4f5 70%, #d8dbdd 100%);
  padding: 10px 22px; border-radius: var(--radius);
  border: 1px solid rgba(10,10,11,0.28);
  letter-spacing: 0.025em;
  transition: filter 280ms, transform 200ms var(--ease);
}
.nav-cta:hover { filter: brightness(1.05); transform: translateY(-1px); }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 6px 2px; margin-left: auto;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px;
  background: var(--white); border-radius: 2px;
  transition: transform 300ms var(--ease), opacity 300ms;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ============================================================
   MOBILE MENU
   ============================================================ */
.nav-mobile {
  position: fixed; inset: 0; z-index: 190;
  background: var(--navy);
  display: flex; flex-direction: column;
  justify-content: flex-start; align-items: flex-start;
  padding: 128px var(--gutter) 0; gap: 4px;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease),
              visibility 0s linear 300ms;   /* keeps it unfocusable until shown */
}
.nav-mobile.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.nav-mobile a {
  font-size: clamp(28px, 7vw, 52px); font-weight: 800;
  color: rgba(255,255,255,0.82);
  letter-spacing: -0.018em; line-height: 1.3;
  transition: color 200ms;
}
.nav-mobile a:hover,
.nav-mobile a[aria-current="page"] { color: var(--white); }
.nav-mobile-cta {
  margin-top: 28px;
  font-size: 15px !important; font-weight: 700 !important;
  color: var(--navy) !important; background: var(--teal-light);
  background-image: linear-gradient(115deg, #d8dbdd 0%, #f3f4f5 30%, #ffffff 50%, #f3f4f5 70%, #d8dbdd 100%);
  padding: 14px 28px; border-radius: var(--radius);
  border: 1px solid rgba(10,10,11,0.28);
  transition: filter 280ms;
}
.nav-mobile-cta:hover { filter: brightness(1.05); }


/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--navy-dark); padding: 72px var(--gutter) 0; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  padding-bottom: 56px;
}
.footer-logo { height: 40px; width: auto; display: block; }
.footer-blurb {
  font-size: 13.5px; font-weight: 400;
  color: rgba(255,255,255,0.45); line-height: 1.7;
  margin-top: 18px; max-width: 340px;
}
.footer-heading {
  font-size: 11px; font-weight: 700;
  color: var(--steel); letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 18px;
}
.footer-col { display: flex; flex-direction: column; gap: 11px; }
.footer-col a, .footer-col span {
  font-size: 13.5px; font-weight: 400;
  color: rgba(255,255,255,0.55); line-height: 1.5;
  transition: color 240ms;
}
.footer-col a:hover { color: var(--teal-light); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  padding: 22px 0 26px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-copy { font-size: 11.5px; color: rgba(255,255,255,0.3); letter-spacing: 0.02em; }
.footer-legal { display: flex; gap: 22px; }
.footer-legal a {
  font-size: 11.5px; font-weight: 500;
  color: rgba(255,255,255,0.3); letter-spacing: 0.04em;
  transition: color 240ms;
}
.footer-legal a:hover { color: rgba(255,255,255,0.7); }
.footer-meta { display: flex; align-items: center; gap: 22px; }
.footer-credit {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 500;
  color: rgba(255,255,255,0.3); letter-spacing: 0.04em;
  padding-left: 22px; border-left: 1px solid rgba(255,255,255,0.12);
  transition: color 240ms;
}
.footer-credit img {
  height: 25px; width: auto; display: block;
  opacity: 0.3; transition: opacity 240ms;
}
.footer-credit:hover { color: rgba(255,255,255,0.75); }
.footer-credit:hover img { opacity: 0.75; }


/* ============================================================
   HOME — HERO
   ============================================================ */
.hero {
  position: relative;
  height: 100svh; min-height: 600px;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.hero-photo {
  position: absolute; inset: 0;
  background-image: url('../images/hero-main.jpg');
  background-size: cover; background-position: center 25%;
  animation: hero-zoom 22s ease-out forwards;
  will-change: transform;
}
@keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.05); } }

.hero-overlay {
  position: absolute; inset: 0;
  /* Feathered from the left, where the text sits, fading out toward the
     right so the photo itself stays bright and unobstructed. A soft
     bottom fade keeps the scroll cue legible without darkening the shot. */
  background:
    linear-gradient(100deg, rgba(6,6,7,0.44) 0%, rgba(6,6,7,0.26) 28%, rgba(6,6,7,0.08) 52%, rgba(6,6,7,0) 68%),
    linear-gradient(to top, rgba(6,6,7,0.22) 0%, rgba(6,6,7,0) 32%);
}
.hero-content {
  position: relative; z-index: 2; width: 100%;
  padding: 0 var(--gutter) clamp(64px, 9vw, 110px);
  transform: translateY(20px);
}
.hero-rule {
  width: 0; height: 2px; background: var(--teal); margin-bottom: 26px;
  animation: rule-expand 900ms var(--ease) 500ms forwards;
}
@keyframes rule-expand { to { width: 52px; } }

.hero-headline {
  font-size: clamp(38px, 5.8vw, 84px); font-weight: 800;
  color: var(--white); line-height: 1.04; letter-spacing: -0.025em;
  max-width: 820px; opacity: 0; transform: translateY(22px);
  animation: fade-up 900ms var(--ease) 350ms forwards;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 4px 18px rgba(0,0,0,0.3);
}
.hero-sub {
  margin-top: 22px; font-size: clamp(16px, 1.3vw, 19px); font-weight: 500;
  color: rgba(255,255,255,0.92); max-width: 460px; line-height: 1.7;
  opacity: 0; animation: fade-up 900ms var(--ease) 580ms forwards;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 4px 16px rgba(0,0,0,0.3);
}
.hero-actions {
  margin-top: 40px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  opacity: 0; animation: fade-up 900ms var(--ease) 760ms forwards;
}
.hero-scroll {
  position: absolute; right: var(--gutter); bottom: 40px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: 0; animation: fade-up 600ms var(--ease) 1.4s forwards;
}
.hero-scroll span {
  font-size: 9.5px; font-weight: 600;
  color: rgba(255,255,255,0.35); letter-spacing: 0.16em; text-transform: uppercase;
  writing-mode: vertical-rl;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.hero-scroll-line {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.3));
}
@keyframes fade-up { to { opacity: 1; transform: translateY(0); } }

/* On short/landscape viewports and on phones, ease off the shift (or
   drop it) so the hero copy never crowds the bottom edge. */
@media (max-height: 650px) {
  .hero-content { transform: translateY(8px); }
}

/* Common wide-but-short desktop/laptop windows (e.g. ~1366×768) render
   the headline near its max size while there isn't much vertical room
   to spare, crowding the accent line up against the nav logo. Trim the
   headline's ceiling here so the rule keeps the same breathing room
   above it that it has below it (~55px to the "W"), matching every
   other breakpoint. Scoped to the desktop nav range + limited height
   so the full-size hero on tall/4K screens is untouched. */
@media (min-width: 961px) and (max-height: 860px) {
  .hero-headline { font-size: clamp(34px, 5vw, 72px); }
}
@media (max-width: 640px) {
  .hero-content {
    padding-bottom: clamp(48px, 8vw, 72px);
    transform: translateY(0);
  }
  /* Body copy on photo heroes gets lost against bright areas of the
     source image on phones (no left-fade room like desktop has once
     text runs near full width). Heavier weight + a stronger, tighter
     shadow keeps it legible without touching the desktop styling. */
  .hero-sub,
  .page-hero--photo .page-hero-sub {
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 2px 6px rgba(0,0,0,0.55), 0 10px 22px rgba(0,0,0,0.4);
  }
  /* Extra scrim, bottom-weighted to match where the copy actually sits
     (hero content is bottom-anchored), so the photo itself stays bright
     up top while the reading area gets real contrast underneath it. */
  .hero-overlay,
  .page-hero-overlay {
    background:
      linear-gradient(180deg, rgba(6,6,7,0.16) 0%, rgba(6,6,7,0.10) 24%, rgba(6,6,7,0.42) 58%, rgba(6,6,7,0.66) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo { animation: none; }
  .hero-rule, .hero-headline, .hero-sub, .hero-actions, .hero-scroll {
    animation: none; opacity: 1; transform: none;
  }
  .hero-rule { width: 52px; }
}


/* ============================================================
   HOME — THE STANDARD
   ============================================================ */
.standard {
  /* Matches the Featured Work section below — keeps the page from reading
     like it's ending here, since navy sections read as closing statements. */
  background: var(--off-white);
  padding: var(--section-y) var(--gutter);
  text-align: center;
}
.standard-quote {
  font-size: clamp(30px, 4.2vw, 60px); font-weight: 800;
  color: var(--navy); line-height: 1.14; letter-spacing: -0.022em;
  max-width: 780px; margin: 0 auto;
}
.standard-quote em { font-style: normal; }
/* Metallic signature needs the darkened variant on this light background.
   (background-image only, so the text-clip set by .metallic isn't reset.) */
.standard .metallic { background-image: var(--metallic-gradient-dark); }
.standard-rule {
  width: 36px; height: 2px; background: rgba(10,10,11,0.15);
  margin: 48px auto 0; border-radius: 2px;
}


/* ============================================================
   HOME — THE WORK
   ============================================================ */
.work { background: var(--off-white); padding: var(--section-y) var(--gutter); }
/* About page — Project Photos now sits right after the Word of Mouth
   section, which took over the off-white tint, so this one moves to
   white to keep the two from reading as one long block. */
.work--white { background: var(--white); }
.work-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 56px;
}
.work-title {
  font-size: clamp(30px, 3.6vw, 50px); font-weight: 800;
  color: var(--navy); letter-spacing: -0.022em; line-height: 1.1; margin-top: 12px;
}
.work-label {
  font-size: 11px; font-weight: 600; color: rgba(10,10,11,0.35);
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; padding-bottom: 6px;
}
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.work-card { display: block; }
.work-photo {
  position: relative; width: 100%; aspect-ratio: 3 / 4;
  overflow: hidden; background: var(--navy-dark);
  border-radius: var(--radius-lg);
}
.work-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 750ms var(--ease);
}
.work-card:hover .work-photo img { transform: scale(1.04); }
.work-badge {
  display: inline-flex; align-items: center; gap: 7px;
  position: absolute; bottom: 16px; left: 16px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--white); background: rgba(10,10,11,0.7);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 6px 11px; border-radius: var(--radius);
}
.work-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.work-caption { padding: 15px 0 0; }
.work-caption-title { font-size: 13px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.work-caption-desc { font-size: 14px; font-weight: 400; color: rgba(10,10,11,0.5); margin-top: 4px; line-height: 1.5; }
.work-cta { margin-top: 44px; display: flex; justify-content: center; }


/* ============================================================
   FEATURED WORK — BEFORE / AFTER REVEAL
   A clean, straight wipe: the "before" photo slides in from the left
   edge via inset(), no angle, no skew, no scaling. Browsers animate
   each inset() edge independently, which is what a real comparison-
   slider component uses — smooth and dependable. Both photos are
   loaded eagerly (see markup) so the very first interaction has no
   decode delay before it can animate. Fully keyboard + touch operable
   via a native <button>; state is user-triggered only, never autoplays.
   ============================================================ */
.reveal-card { display: block; }
.reveal-frame {
  position: relative;
  width: 100%; aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--navy-dark);
}
.reveal-trigger {
  display: block; width: 100%; height: 100%;
  padding: 0; border: none; background: none; cursor: pointer;
  border-radius: inherit;
}
.reveal-trigger:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}
.reveal-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.reveal-img--before {
  clip-path: inset(0 100% 0 0);   /* fully hidden */
  transition: clip-path 800ms cubic-bezier(0.65, 0, 0.35, 1);
}
.reveal-card[data-state="before"] .reveal-img--before {
  clip-path: inset(0 0 0 0);   /* fully revealed */
}
.reveal-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--white); background: rgba(10,10,11,0.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 6px 11px; border-radius: var(--radius);
  transition: background 250ms;
  pointer-events: none;
}
.reveal-card[data-state="before"] .reveal-badge { background: rgba(85,88,94,0.85); }
.reveal-hint {
  position: absolute; bottom: 14px; right: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  /* Inverted from the old dark/translucent chip — a bright chip pops
     against the photos instead of blending into the dark areas. */
  color: var(--navy); background: rgba(244,245,246,0.94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 6px 10px; border-radius: var(--radius);
  pointer-events: none;
}
.reveal-trigger:hover ~ .reveal-hint,
.reveal-trigger:focus-visible ~ .reveal-hint { background: var(--white); }

/* Subtle attention pulse — plays a few times once the card has scrolled
   into view (piggybacks on the existing [data-reveal] "is-visible" cue),
   staggered per card so all three don't beat in unison. Stops for good
   the moment someone hovers, focuses, or taps — its job is just to get
   a first-time visitor to notice the chip is interactive. */
@keyframes hint-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(10,10,11,0); }
  50% { transform: scale(1.07); box-shadow: 0 6px 16px rgba(10,10,11,0.16); }
}
.reveal-card.is-visible .reveal-hint {
  animation: hint-pulse 1.6s ease-in-out 3;
  animation-delay: 700ms;
}
.reveal-card.is-visible:nth-child(2) .reveal-hint { animation-delay: 950ms; }
.reveal-card.is-visible:nth-child(3) .reveal-hint { animation-delay: 1200ms; }
/* Same specificity as the rule above (3 classes) — placed after it, so
   the cascade's source-order tie-break lets any of these stop the pulse. */
.reveal-trigger:hover ~ .reveal-hint,
.reveal-trigger:focus-visible ~ .reveal-hint,
.reveal-card[data-state="before"] .reveal-hint,
.reveal-card.is-discovered .reveal-hint {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-img--before { transition: none; }
  .reveal-hint { animation: none; }
}


/* ============================================================
   HOME — OUR STANDARD
   Photo is full-bleed on the left, edge to edge, no frame — the crew
   photo carries the section rather than sitting inside a card.
   ============================================================ */
.people { display: grid; grid-template-columns: 1fr 1fr; background: var(--navy); }
.people-photo { overflow: hidden; background: var(--navy-dark); min-height: 520px; }
.people-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 900ms var(--ease);
}
.people:hover .people-photo img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .people:hover .people-photo img { transform: none; }
}
.people-content {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--section-y) clamp(40px, 6vw, 80px);
}
.people-headline {
  font-size: clamp(26px, 3vw, 42px); font-weight: 800;
  color: var(--off-white); line-height: 1.18; letter-spacing: -0.02em; margin-top: 16px;
}
.people-copy {
  font-size: 15px; font-weight: 400;
  color: rgba(255,255,255,0.6); line-height: 1.75; margin-top: 22px; max-width: 440px;
}
.people-rule { width: 40px; height: 1px; background: rgba(154,161,169,0.5); margin-top: 36px; }


/* ============================================================
   HOME — WHAT WE DO (service cards)
   ============================================================ */
.services { background: var(--white); padding: var(--section-y) var(--gutter); }
.services-header { margin-bottom: 56px; }
.services-title {
  font-size: clamp(30px, 3.6vw, 50px); font-weight: 800;
  color: var(--navy); letter-spacing: -0.022em; line-height: 1.1; margin-top: 12px;
}
.services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 28px);
  align-items: stretch;
}
.service {
  display: flex; flex-direction: column; height: 100%;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-top: 3px solid var(--teal);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  box-shadow: 0 2px 10px rgba(10,10,11,0.035);
  transition: background 280ms, transform 250ms var(--ease), box-shadow 280ms, border-color 280ms;
}
.service:hover {
  background: var(--ice);
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(10,10,11,0.10);
}
@media (hover: none) {
  .service:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .service:hover { transform: none; }
}
.service-icon {
  width: 44px; height: 44px;
  background: rgba(10,10,11,0.06);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--navy); flex-shrink: 0; margin-bottom: 20px;
}
.service-name {
  font-size: clamp(19px, 1.9vw, 24px); font-weight: 800;
  color: var(--navy); letter-spacing: -0.015em; line-height: 1.15;
}
.service-desc {
  font-size: 14.5px; font-weight: 400;
  color: rgba(10,10,11,0.58); line-height: 1.6; margin-top: 10px;
}
.service-list { margin-top: 20px; display: flex; flex-direction: column; gap: 9px; }
.service-list li {
  font-size: 14px; font-weight: 400;
  color: rgba(10,10,11,0.55); padding-left: 16px; position: relative; line-height: 1.4;
}
.service-list li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 5px; height: 1px; background: rgba(10,10,11,0.3);
}
.service-link {
  margin-top: auto; padding-top: 24px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; color: var(--navy);
  letter-spacing: 0.04em; text-transform: uppercase;
  transition: gap 250ms var(--ease), opacity 250ms;
}
.service-link:hover { gap: 13px; opacity: 0.7; }
.service-link svg { flex-shrink: 0; transition: transform 250ms var(--ease); }
.service-link:hover svg { transform: translateX(3px); }


/* ============================================================
   HOME — FINAL CTA
   ============================================================ */
.cta-section {
  background: var(--navy);
  padding: var(--section-y) var(--gutter);
  text-align: center;
}
.cta-headline {
  font-size: clamp(30px, 4.8vw, 68px); font-weight: 800;
  color: var(--off-white); line-height: 1.09; letter-spacing: -0.025em;
  max-width: 700px; margin: 12px auto 0;
}
.cta-sub {
  font-size: 16px; font-weight: 400;
  color: rgba(255,255,255,0.48); margin-top: 18px; line-height: 1.6;
  max-width: 560px; margin-left: auto; margin-right: auto;
}
.cta-rule {
  width: 36px; height: 2px; background: rgba(154,161,169,0.45);
  margin: 32px auto 0; border-radius: 2px;
}
.cta-actions {
  margin-top: 40px; display: flex; align-items: center;
  justify-content: center; gap: 16px; flex-wrap: wrap;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .nav-mobile { transition: none; transform: none; }
}

@media (max-width: 960px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; padding: 10px 8px; }
  .work-header { flex-direction: column; align-items: flex-start; }
  .work-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .work-card:last-child { grid-column: 1 / -1; }
  .work-card:last-child .work-photo { aspect-ratio: 16 / 9; }
  /* Featured Work's 3-up before/after grid reads better stacked than
     forced into an uneven 2-column split on tablet. */
  .work-grid--reveal { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; gap: 32px; }
  .people { grid-template-columns: 1fr; }
  .people-photo { min-height: 340px; }
  .services-grid { grid-template-columns: 1fr; gap: 20px; }
  .filter-btn { padding: 11px 18px; }
}

@media (max-width: 540px) {
  .work-grid { grid-template-columns: 1fr; }
  .work-card:last-child { grid-column: auto; }
  .work-card:last-child .work-photo { aspect-ratio: 3 / 4; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}


/* ============================================================
   ABOUT SECTION
   ============================================================ */
.about {
  background: var(--white);
  padding: var(--section-y) var(--gutter);
}

.about-intro {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 64px;
}

.about-title {
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-top: 14px;
}

.about-body {
  font-size: 16px;
  font-weight: 400;
  color: rgba(10,10,11,0.62);
  line-height: 1.78;
  margin-top: 18px;
}

.about-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  border-top: 1px solid rgba(10,10,11,0.08);
  padding-top: 48px;
  max-width: 960px;
  margin: 0 auto;
}

.about-pillar {
  /* A touch lighter than the general off-white so the hover shift into
     --ice reads as a clearer, more deliberate change. */
  background: #f9fafb;
  border-top: 3px solid var(--teal);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: background 280ms, transform 250ms var(--ease), box-shadow 280ms;
}
.about-pillar:hover {
  background: var(--ice);
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(10,10,11,0.10);
}
@media (prefers-reduced-motion: reduce) {
  .about-pillar:hover { transform: none; }
}

.about-pillar-icon {
  width: 44px;
  height: 44px;
  background: rgba(10,10,11,0.06);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  flex-shrink: 0;
  margin-bottom: 20px;
}

.about-pillar-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
}

.about-pillar-desc {
  font-size: 14px;
  font-weight: 400;
  color: rgba(10,10,11,0.55);
  line-height: 1.65;
  margin-top: 10px;
}

/* Responsive */
@media (max-width: 820px) {
  .about-intro {
    margin-bottom: 48px;
  }
  .about-pillars {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}


/* ============================================================
   THE STANDARD — why paragraph + revised layout
   ============================================================ */
.standard-inner {
  max-width: 820px;
  margin: 0 auto;
}

.standard-why {
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 400;
  color: rgba(10,10,11,0.62);
  line-height: 1.78;
  margin-top: 32px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}


/* ============================================================
   DIVISION DESCRIPTIONS
   ============================================================ */
.service-desc {
  font-size: 14.5px;
  font-weight: 400;
  color: rgba(10,10,11,0.55);
  line-height: 1.6;
  margin-top: 10px;
  margin-bottom: 4px;
}


/* ============================================================
   INTERIOR PAGES — PAGE HERO
   ============================================================ */
.page-hero {
  background: var(--navy);
  /* Top padding clears the fixed nav; bottom uses the standard section
     rhythm so the hero hands off consistently into the next section. */
  padding: clamp(150px, 18vw, 216px) var(--gutter) var(--section-y);
}
.page-hero-title {
  font-size: clamp(34px, 5vw, 66px); font-weight: 800;
  color: var(--off-white); line-height: 1.08; letter-spacing: -0.025em;
  margin-top: 14px; max-width: 720px;
}
.page-hero-sub {
  font-size: clamp(15px, 1.2vw, 18px); font-weight: 400;
  color: rgba(255,255,255,0.62); line-height: 1.7;
  margin-top: 20px; max-width: 560px;
}
.page-hero .eyebrow { color: var(--teal-light); }

/* Photo variant — About + Services. Connected to the homepage hero
   language (full-bleed photo, same gradient recipe) but shorter and
   quieter, so it reads as a related-but-distinct page opener. */
.page-hero--photo {
  position: relative;
  height: 100svh; min-height: 600px;
  display: flex; align-items: flex-end;
  overflow: hidden; padding: 0;
}
.page-hero-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.page-hero-overlay {
  position: absolute; inset: 0;
  /* Same feathered treatment as the homepage hero — dark enough on the
     left for the copy to sit on, fading out so the photo stays bright. */
  background:
    linear-gradient(100deg, rgba(6,6,7,0.44) 0%, rgba(6,6,7,0.26) 28%, rgba(6,6,7,0.08) 52%, rgba(6,6,7,0) 68%),
    linear-gradient(to top, rgba(6,6,7,0.22) 0%, rgba(6,6,7,0) 32%);
}
.page-hero--photo .page-hero-inner {
  position: relative; z-index: 2;
  width: 100%;
  padding: clamp(140px, 16vw, 190px) var(--gutter) clamp(48px, 6vw, 72px);
}
.page-hero--photo .page-hero-sub {
  color: rgba(255,255,255,0.94);
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 500;
}
/* Photo hero sits directly on a photo (unlike the plain navy page-hero),
   so its text needs the same shadow treatment as the homepage hero. */
.page-hero--photo .page-hero-title,
.page-hero--photo .page-hero-sub {
  text-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 4px 18px rgba(0,0,0,0.3);
}
.page-hero--photo .eyebrow {
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}


/* ============================================================
   ABOUT & SERVICES — SERVICE BLOCKS
   ============================================================ */
.svc { background: var(--white); padding: var(--section-y) var(--gutter); }
.svc-header { max-width: 720px; margin: 0 auto 24px; text-align: center; }
.svc-title {
  font-size: clamp(30px, 3.6vw, 50px); font-weight: 800;
  color: var(--navy); letter-spacing: -0.022em; line-height: 1.1; margin-top: 12px;
}
.svc-block {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(32px, 5vw, 88px); align-items: start;
  padding: clamp(48px, 6vw, 76px) 0;
  border-top: 1px solid rgba(180,182,186,0.45);
  scroll-margin-top: 96px;   /* fixed nav clearance for #anchor jumps */
}
.svc-block:first-of-type { border-top: none; }
.svc-block:last-of-type { padding-bottom: 0; }
.svc-name {
  font-size: clamp(24px, 2.5vw, 38px); font-weight: 800;
  color: var(--navy); letter-spacing: -0.018em; line-height: 1.12;
}
.svc-tag {
  font-size: 13px; font-weight: 700;
  color: var(--teal-deep); letter-spacing: 0.06em; text-transform: uppercase;
  display: block; margin-bottom: 12px;
}
.svc-desc {
  font-size: 16px; font-weight: 400;
  color: rgba(10,10,11,0.62); line-height: 1.78; margin-top: 16px;
}
.svc-list {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px 24px; margin-top: 8px;
}
.svc-list li {
  font-size: 14.5px; font-weight: 400;
  color: rgba(10,10,11,0.62); padding-left: 18px; position: relative; line-height: 1.5;
}
.svc-list li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 7px; height: 2px; background: var(--teal); border-radius: 1px;
}
.svc-block .service-link { margin-top: 30px; }


/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact { background: var(--white); padding: var(--section-y) var(--gutter); }
.contact-grid {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 96px); align-items: start;
}
.form-field { margin-bottom: 22px; }
.form-field label {
  display: block; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--navy); margin-bottom: 8px;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%; font-family: var(--font); font-size: 15px;
  color: var(--navy); background: var(--white);
  padding: 13px 15px; border: 1px solid var(--steel);
  border-radius: var(--radius);
  transition: border-color 200ms, box-shadow 200ms;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(154,161,169,0.16);
}
.form-field textarea { min-height: 150px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-note { font-size: 13px; color: rgba(10,10,11,0.5); margin-top: 14px; line-height: 1.6; }
.hp-field { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.notice { padding: 16px 18px; border-radius: var(--radius); margin-bottom: 28px; font-size: 14.5px; line-height: 1.6; }
.notice-ok  { background: var(--ice); border: 1px solid rgba(154,161,169,0.45); color: var(--navy); }
.notice-err { background: #fdf1ef; border: 1px solid #e5b8b1; color: #7a2e24; }

/* Contact form success state — replaces the form entirely so there's
   nothing left half-visible under the confirmation to cause confusion.
   Framed like the .service cards elsewhere on the site: full border,
   soft shadow, teal top accent — not just the flat aside-block look. */
.thanks-panel {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-top: 3px solid var(--teal);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 10px rgba(10,10,11,0.035);
  padding: 56px 44px; min-height: 420px; justify-content: center;
}
.thanks-icon {
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,10,11,0.06); border-radius: 50%;
  color: var(--teal); flex-shrink: 0; margin-bottom: 36px;
}
.thanks-title {
  font-size: clamp(24px, 2.6vw, 30px); font-weight: 800; line-height: 1.3;
  color: var(--navy); margin-bottom: 20px; max-width: 22ch;
}
.thanks-sub { font-size: 16px; line-height: 1.7; color: var(--teal-deep); max-width: 40ch; }

.contact-aside-block {
  background: var(--off-white);
  border-top: 3px solid var(--teal);
  border-radius: var(--radius-lg);
  padding: 24px 26px; margin-bottom: 18px;
}
.contact-aside-label {
  font-size: 11px; font-weight: 700;
  color: var(--teal-deep); letter-spacing: 0.12em; text-transform: uppercase;
}
.contact-aside-value {
  font-size: 15.5px; font-weight: 600;
  color: var(--navy); margin-top: 7px; line-height: 1.55;
}
.contact-aside-value a { color: var(--navy); text-decoration: underline; text-decoration-color: rgba(154,161,169,0.5); text-underline-offset: 3px; }
.contact-aside-value a:hover { text-decoration-color: var(--teal); }


/* ============================================================
   LEGAL PAGES (PRIVACY / TERMS)
   ============================================================ */
.legal { background: var(--white); padding: var(--section-y) var(--gutter); }
.legal-body { max-width: 720px; margin: 0 auto; }
.legal-updated { font-size: 13px; color: rgba(10,10,11,0.45); margin-bottom: 36px; }
.legal-body h2 {
  font-size: 19px; font-weight: 800; color: var(--navy);
  letter-spacing: -0.01em; margin: 42px 0 12px;
}
.legal-body p, .legal-body li {
  font-size: 15px; font-weight: 400;
  color: rgba(10,10,11,0.62); line-height: 1.78; margin-bottom: 14px;
}
.legal-body ul { padding-left: 22px; }
.legal-body li { margin-bottom: 8px; }


/* ============================================================
   INTERIOR PAGES — RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .svc-block, .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .svc-list { grid-template-columns: 1fr; }
}


/* ============================================================
   ABOUT PAGE — TINTED STORY, PHOTO PLACEHOLDER, SERVICE CARDS
   ============================================================ */
.about--tint { background: var(--off-white); }

.story-photo {
  /* No trailing margin — it's the last element in the section, so the
     section's own bottom padding is the only source of trailing space.
     (Previously this stacked an extra 56px on top of that padding,
     which is what made Our Story's bottom margin feel oversized.) */
  display: block; width: 100%; max-width: 960px;
  margin: 0 auto; border-radius: var(--radius-lg);
  height: auto; object-fit: cover;
}

.svc-card {
  background: var(--off-white);
  border-top: 3px solid var(--teal);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
}
.svc-card-label {
  display: block;
  font-size: 11px; font-weight: 700;
  color: var(--teal-deep); letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 16px;
}
.svc-card .svc-list { margin-top: 0; }


/* ============================================================
   TESTIMONIALS — WORD OF MOUTH
   ============================================================ */
.testimonials { background: var(--white); padding: var(--section-y) var(--gutter); scroll-margin-top: 96px; }
/* About page — Word of Mouth takes on the Project Photos section's old
   off-white tint (so it no longer matches What We Do right above it).
   The cards need to move to white to stay visible against it — on the
   white version of this section they stay off-white as before. */
.testimonials--tint { background: var(--off-white); }
.testimonials--tint .testimonial { background: var(--white); }
.testimonials--tint .testimonial:hover { background: var(--card-bg); }
.testimonials-header { text-align: center; margin-bottom: 56px; }
.testimonials-title {
  font-size: clamp(30px, 3.6vw, 50px); font-weight: 800;
  color: var(--navy); letter-spacing: -0.022em; line-height: 1.1; margin-top: 12px;
}
.testimonials-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.testimonial {
  margin: 0;
  background: var(--off-white);
  border-top: 3px solid var(--teal);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  display: flex; flex-direction: column;
  transition: background 280ms, transform 250ms var(--ease), box-shadow 280ms;
}
.testimonial:hover {
  background: var(--ice);
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(10,10,11,0.10);
}
.testimonial-mark { color: var(--teal); margin-bottom: 14px; }
.testimonial blockquote {
  font-size: 15px; font-weight: 400;
  color: rgba(10,10,11,0.68); line-height: 1.75;
}
.testimonial figcaption {
  margin-top: auto; padding-top: 20px;
  font-size: 14px; font-weight: 700; color: var(--navy);
}
.testimonial figcaption span {
  display: block; margin-top: 3px;
  font-size: 12.5px; font-weight: 400; color: rgba(10,10,11,0.5);
}
@media (max-width: 900px) {
  .testimonials-grid { grid-template-columns: 1fr; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .testimonial:hover { transform: none; }
}


/* ============================================================
   TESTIMONIALS — MORE REVIEWS CAROUSEL
   Reuses the .testimonial card look (same border, quote mark,
   type) so the carousel reads as one family with the 3 featured
   cards above it — just laid out as a horizontal, snapping track
   instead of a grid. Native scroll drives touch/trackpad; the
   buttons and pointer-drag handle mouse.
   ============================================================ */
.reviews-more { margin-top: 56px; }
.reviews-more-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-bottom: 22px;
}
.reviews-more-label {
  font-size: 11px; font-weight: 600; color: rgba(10,10,11,0.35);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.carousel-controls { display: flex; align-items: center; gap: 10px; }
.carousel-btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: var(--white);
  border: 1px solid rgba(10,10,11,0.14);
  border-radius: 50%;
  color: var(--navy);
  cursor: pointer;
  transition: background 220ms, border-color 220ms, transform 220ms var(--ease);
}
.carousel-btn:hover:not(:disabled) {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  transform: translateY(-2px);
}
.carousel-btn:disabled { opacity: 0.32; cursor: default; }
.carousel-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.reviews-carousel {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  cursor: grab;
  /* Hide the scrollbar — the buttons + drag/swipe are the affordance. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 0 10px;
}
.reviews-carousel::-webkit-scrollbar { display: none; }
.reviews-carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.reviews-track {
  display: flex;
  gap: 20px;
  /* No explicit width: with flex-shrink:0 on every card (below), the
     track's total content naturally exceeds the scroller's box and
     overflows it — that overflow is what .reviews-carousel scrolls.
     (width:max-content used to sit here too, but once a card's
     flex-basis becomes a percentage at the mobile breakpoint, that
     creates a circular size dependency that some browsers resolve by
     blowing the card up to an enormous width — removing it avoids
     the circularity entirely and the scroll behavior doesn't need it.) */
}
.review-card {
  scroll-snap-align: start;
  flex: 0 0 clamp(260px, 32vw, 340px);
  /* .testimonial already sets the card chrome; this just adds the
     width/snap behavior a track item needs that a grid item doesn't. */
  user-select: none;
}
.review-card blockquote { user-select: text; }
@media (max-width: 640px) {
  /* 82vw was sized off the raw viewport width, which ignores the
     container's own left/right gutter the card actually sits inside —
     on narrower phones that pushed the card past the visible edge and
     cut it off. 100% fills exactly what's available inside the gutter,
     so the whole card is always on screen with no overflow. */
  .review-card { flex-basis: 100%; }
}


/* ============================================================
   ABOUT — PROJECT FILTERS
   ============================================================ */
.project-filters {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 28px 0 44px;
}
.filter-btn {
  font-family: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(10,10,11,0.5);
  background: var(--white); border: 1px solid rgba(10,10,11,0.12);
  border-radius: 999px; padding: 9px 18px; cursor: pointer;
  transition: background 220ms, color 220ms, border-color 220ms;
}
.filter-btn:hover { color: var(--navy); border-color: rgba(10,10,11,0.28); }
.filter-btn.is-active {
  background: var(--navy); border-color: var(--navy); color: var(--white);
}
.work-card[hidden] { display: none; }


/* ============================================================
   MOBILE READABILITY — body copy floor
   Keeps every piece of reading content in the 15-16px neighborhood on
   phones so nothing requires pinch-zooming. Labels, eyebrows, badges,
   and footer/legal meta text are left at their smaller, intentional
   sizes — this targets actual sentences and list copy only. Form
   fields go to 16px, which also stops iOS Safari's auto-zoom on focus.
   ============================================================ */
@media (max-width: 600px) {
  .people-copy,
  .testimonial blockquote,
  .legal-body p, .legal-body li {
    font-size: 16px;
    line-height: 1.7;
  }
  .service-desc,
  .service-list li,
  .svc-list li,
  .about-pillar-desc,
  .work-caption-desc,
  .notice {
    font-size: 15.5px;
    line-height: 1.6;
  }
  .form-note { font-size: 14px; }
  .form-field input,
  .form-field select,
  .form-field textarea {
    font-size: 16px;
  }
  .thanks-panel { min-height: 0; padding: 36px 28px; }
}