/* =================================================================
   Premier Cabinets Innovations — Atelier
   Iteration 4: Black + Bright Gold + Ivory.
   Cool architectural luxury — Ralph Lauren / Hermès / Tom Ford register.
   ================================================================= */

:root {
  /* Iteration 20 — Felix's OFFICIAL brand standards (from his Drive folder) */
  /* Palette: Gold #F2C22E · Black #111111 · Ivory #F7F4EE · Warm Gray #A49A8C */
  --ink: #111111;
  --ink-deep: #050505;
  --paper: #F7F4EE;
  --paper-warm: #EFEAD7;
  --paper-warm-deep: #E5DFC8;
  --paper-gilt: #EFEAD7;
  --warm-gray: #A49A8C;       /* iter 20 — official brand neutral */
  --walnut: #6B4F2A;
  --walnut-deep: #4A361C;
  --gold: #F2C22E;            /* iter 20 — official brand gold, brighter + more saturated */
  --gold-deep: #C9A11E;
  --gold-soft: #F8D766;
  --gold-warm: #F8D766;
  /* Legacy aliases — all point to the official brand gold */
  --champagne: #F2C22E;
  --champagne-deep: #C9A11E;
  --champagne-soft: #F8D766;
  --stone: #A49A8C;
  --hairline: rgba(17, 17, 17, 0.12);
  --hairline-strong: rgba(17, 17, 17, 0.22);
  --hairline-gold: rgba(242, 194, 46, 0.55);

  /* Iteration 20 — Felix's OFFICIAL typefaces (Cinzel for Roman caps, Montserrat for body) */
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Cinzel', 'Trajan Pro', Georgia, 'Times New Roman', serif;
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;

  --tracking-wide: 0.18em;
  --tracking-loose: 0.32em;

  /* Iteration 6 typography tokens — tightened scale */
  --type-display: clamp(40px, 7vw, 96px);
  --type-h1: clamp(36px, 5.5vw, 80px);
  --type-h2: clamp(30px, 4vw, 60px);
  --type-h3: clamp(22px, 2.5vw, 36px);
  --type-eyebrow: 11px;
  --type-body: clamp(16px, 1.1vw, 19px);
  --type-meta: 13px;
  --track-display: -0.025em;
  --track-eyebrow: 0.22em;
  --track-meta: 0.14em;

  --container: 1440px;
  --gutter: clamp(1.5rem, 4vw, 4rem);

  --section-pad-y: clamp(5rem, 12vw, 10rem);
}

/* === Iteration 23 — Mobile-first breakpoint system === */
/* xs:  <=480px  — phones (portrait) */
/* sm:  <=640px  — phones (landscape) + small tablets */
/* md:  <=880px  — tablets */
/* lg:  <=1100px — small desktops */

/* Iteration 3 — editorial line-break balance on all headlines */
h1, h2, h3, .hero__headline, .page-hero__title, .contact-section__headline,
.featured-project__title, .case-study__title, .about-block__title,
.what-we-build__title, .testimonial-block__quote, .process-strip__title {
  text-wrap: balance;
}

/* ===== Antique gold word accent (one-word headline emphasis) ===== */
.gold-word,
h1 .gold-word,
h2 .gold-word,
h3 .gold-word {
  color: var(--gold);
  font-weight: 500;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Iteration 15 — use clip instead of hidden so position:sticky in children works reliably */
  overflow-x: clip;
  max-width: 100%;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.7;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  overflow-x: clip;
  max-width: 100%;
  position: relative;
}

img,
svg,
video,
iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease, opacity 0.3s ease;
}

a:hover {
  color: var(--champagne);
}

::selection {
  background: var(--champagne);
  color: var(--ink);
}

/* ===== Typography ===== */

.eyebrow,
.label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.4;
}

.eyebrow--walnut {
  color: var(--walnut);
}

.eyebrow--champagne {
  color: var(--champagne);
}

.display {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--type-h1);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.display--md {
  font-size: var(--type-h2);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 300;
}

.display--xl {
  font-size: var(--type-display);
  line-height: 1.0;
  letter-spacing: -0.03em;
  font-weight: 300;
}

h1, h2, h3, h4 {
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

h2 {
  font-size: var(--type-h2);
}

h3 {
  font-size: var(--type-h3);
  font-weight: 400;
}

h4 {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0;
}

p {
  max-width: 60ch;
}

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.6;
  font-weight: 300;
  color: var(--ink);
  max-width: 56ch;
}

/* ===== Layout ===== */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container--narrow {
  max-width: 1080px;
}

section {
  padding: var(--section-pad-y) 0;
  position: relative;
}

.hairline {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 0;
}

.hairline--walnut {
  border-top: 1px solid var(--walnut);
  width: 32px;
  margin-bottom: 1.5rem;
}

.hairline--champagne {
  border-top: 1px solid var(--champagne);
  width: 48px;
  margin-bottom: 1.5rem;
}

.hairline-reveal {
  display: block;
  height: 1px;
  background: var(--walnut);
  transform: scaleX(0);
  transform-origin: left;
  width: 100%;
}

/* ===== Header / Nav ===== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: clamp(1rem, 2vw, 1.5rem) 0;
  background: rgba(248, 244, 233, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background 0.35s cubic-bezier(0.16, 1, 0.3, 1), padding 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}

.site-header.is-scrolled {
  background: rgba(248, 244, 233, 0.98);
  border-bottom-color: rgba(218, 165, 32, 0.25);
  box-shadow: 0 4px 18px rgba(10, 10, 10, 0.05);
  padding: clamp(0.3rem, 0.6vw, 0.5rem) 0;
}

.site-header--solid {
  background: rgba(248, 244, 233, 0.98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex-shrink: 0;
  color: var(--ink);
  transition: color 0.3s ease;
}

/* Header is always ivory now; no transparent/dark variant override needed. */

.brand-mark {
  height: 36px;
  width: 36px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

/* Iteration 11 — Horizontal PC logo lockup in header */
.site-header__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.site-header__logo {
  /* Iter 21: bigger initial size per Felix's preference, shrinks on scroll. */
  display: block;
  height: clamp(80px, 7.5vw, 120px);
  width: auto;
  max-width: 140px;
  object-fit: contain;
  transition: height 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.site-header.is-scrolled .site-header__logo {
  height: clamp(52px, 4.5vw, 68px);
}

.brand-lockup__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-lockup__name {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.brand-lockup__name strong {
  color: var(--champagne);
  font-weight: 500;
}

.brand-lockup__sub {
  font-size: 0.625rem;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 0.15rem;
}

.nav {
  display: flex;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.nav__link {
  font-size: 0.75rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  padding: 0.25rem 0;
  color: inherit;
  white-space: nowrap;
}

/* Header always ivory — nav links stay dark on paper. */

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--champagne);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.nav__link:hover::after,
.nav__link.is-active::after {
  transform: scaleX(1);
}

.nav__link.is-active {
  color: var(--champagne);
}

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Header always ivory — header-cta inherits dark ink border by default. */

.header-cta:hover {
  background: var(--champagne);
  color: var(--ink);
  border-color: var(--champagne);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  flex-direction: column;
  gap: 4px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--ink);
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
}

/* Header always ivory — nav-toggle bars stay dark. */

.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

@media (max-width: 880px) {
  /* Legacy slide-down (iter <23) — superseded by iter-23 full-screen drawer below.
     Kept the breakpoint open so any new rules align, but old conflicting transforms
     have been removed. The iter-23 block at end of file owns mobile nav now. */
  .nav-toggle {
    display: flex;
  }
}

/* ===== Floating Sticky CTA ===== */

/* Iteration 11 — floating sticky CTA. Same gold-gradient + shimmer treatment
   as .btn--gold, but slightly larger and with a heavier outer glow to read as
   the primary site CTA from any scroll position. */
.sticky-cta {
  position: fixed;
  right: clamp(1.25rem, 3vw, 2.25rem);
  bottom: clamp(1.25rem, 3vw, 2.25rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1.1rem 1.85rem;
  color: var(--ink);
  background: linear-gradient(135deg, #DAA520 0%, #F5C842 50%, #DAA520 100%);
  background-size: 200% 200%;
  background-position: 0% 0%;
  border: none;
  border-radius: 999px;
  font-size: 0.85rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 10px 28px rgba(218, 165, 32, 0.42),
    0 2px 8px rgba(10, 10, 10, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    inset 0 -1px 2px rgba(184, 134, 11, 0.3);
  transform: translateY(150%);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, background-position 0.6s ease;
  will-change: transform;
}

.sticky-cta::after {
  /* Same gold shimmer sweep as .btn--gold */
  content: '';
  position: absolute;
  top: 0;
  left: -55%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  transform: skewX(-22deg);
  pointer-events: none;
  z-index: 1;
  animation: btn-gold-shimmer 4.5s ease-in-out infinite;
}

.sticky-cta > * { position: relative; z-index: 2; }

.sticky-cta.is-ready {
  transform: translateY(0);
}

.sticky-cta:hover {
  background-position: 100% 100%;
  color: var(--ink);
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 16px 38px rgba(218, 165, 32, 0.58),
    0 4px 12px rgba(10, 10, 10, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    inset 0 -1px 2px rgba(184, 134, 11, 0.35);
}

.sticky-cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.sticky-cta__arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.sticky-cta:hover .sticky-cta__arrow {
  transform: translateX(3px);
}

.sticky-cta__short {
  display: none;
}

.sticky-cta.is-pulsing {
  animation: sticky-cta-pulse 0.9s ease-out 1;
}

@keyframes sticky-cta-pulse {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(0) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}

@media (max-width: 640px) {
  .sticky-cta {
    right: 20px;
    bottom: 20px;
    padding: 0.85rem 1.15rem;
    font-size: 0.72rem;
  }
  .sticky-cta__full {
    display: none;
  }
  .sticky-cta__short {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta {
    transform: translateY(0);
    transition: none;
    animation: none;
  }
  .sticky-cta::after { animation: none; opacity: 0; }
  .sticky-cta:hover { transform: translateY(0); }
}

/* ===== Hero ===== */

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  padding: 0;
  padding-top: 100px;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 5, 5,0.30) 0%, rgba(5, 5, 5,0.35) 50%, rgba(5, 5, 5,0.72) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-bottom: clamp(3.5rem, 9vw, 7rem);
  color: var(--paper);
}

.hero__eyebrow {
  color: var(--champagne-soft);
  margin-bottom: 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.hero__eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--champagne);
}

.hero__headline {
  color: var(--paper);
  max-width: 17ch;
  margin-bottom: 1.75rem;
}

.hero__sub {
  color: rgba(248, 244, 233, 0.85);
  max-width: 50ch;
  margin-bottom: 2.5rem;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
}

.hero__trust {
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: rgba(248, 244, 233, 0.7);
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hero__trust::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: rgba(248, 244, 233, 0.5);
}

/* ===== Buttons ===== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  padding: 1.05rem 1.85rem;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
  color: inherit;
}

.btn__arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

/* Iteration 11 — colorful CTA with gold gradient, animated shimmer,
   inner highlight rim, soft glow on hover. Applies to .btn--gold and
   (via shared rules below) the floating .sticky-cta. */
.btn--gold {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.85rem;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(135deg, #DAA520 0%, #F5C842 50%, #DAA520 100%);
  background-size: 200% 200%;
  background-position: 0% 0%;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 4px 14px rgba(218, 165, 32, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    inset 0 -1px 2px rgba(184, 134, 11, 0.3);
  transition: background-position 0.6s ease, box-shadow 0.4s ease, transform 0.3s ease, color 0.3s ease;
}

.btn--gold::after {
  /* Animated shimmer sweep */
  content: '';
  position: absolute;
  top: 0;
  left: -55%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  transform: skewX(-22deg);
  pointer-events: none;
  z-index: 1;
  animation: btn-gold-shimmer 4.5s ease-in-out infinite;
}

@keyframes btn-gold-shimmer {
  0%, 100% { left: -55%; }
  55%      { left: 120%; }
}

.btn--gold:hover {
  background-position: 100% 100%;
  transform: translateY(-2px);
  color: var(--ink);
  box-shadow:
    0 10px 26px rgba(218, 165, 32, 0.48),
    0 2px 6px rgba(10, 10, 10, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    inset 0 -1px 2px rgba(184, 134, 11, 0.35);
}

.btn--gold:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.btn--gold .btn__arrow {
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease;
}

.btn--gold:hover .btn__arrow {
  transform: translateX(5px);
}

.btn--gold > span:not(.btn__arrow) {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .btn--gold::after { animation: none; opacity: 0; }
  .btn--gold:hover { transform: none; }
}

.btn--primary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.btn--primary:hover {
  background: var(--champagne);
  color: var(--ink);
  border-color: var(--champagne);
}

.btn--ghost {
  color: var(--paper);
  border-color: rgba(248, 244, 233, 0.5);
}

.btn--ghost:hover {
  border-color: var(--paper);
  color: var(--paper);
  background: rgba(248, 244, 233, 0.06);
}

.btn--ink {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.btn--ink:hover {
  background: var(--champagne);
  border-color: var(--champagne);
  color: var(--ink);
}

.btn--outline {
  color: var(--ink);
  border-color: var(--ink);
}

.btn--outline:hover {
  background: var(--ink);
  color: var(--paper);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  padding: 0.5rem 0;
  border-bottom: 1px solid currentColor;
  width: fit-content;
}

.link-arrow:hover {
  color: var(--champagne);
}

/* ===== Section Heads ===== */

.section-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(2rem, 6vw, 6rem);
  margin-bottom: clamp(3rem, 6vw, 5rem);
  align-items: start;
}

.section-head__label {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.section-head__num {
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--champagne);
}

.section-head__title {
  max-width: 24ch;
}

.section-head__title + p {
  margin-top: 1.5rem;
}

@media (max-width: 720px) {
  .section-head {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ===== About / Workshop ===== */

.workshop {
  background: var(--paper-warm);
}

.workshop__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.workshop__copy h2 {
  margin-bottom: 2rem;
}

.workshop__copy p {
  margin-bottom: 1.25rem;
  max-width: 52ch;
}

.workshop__copy p:last-of-type {
  margin-bottom: 2.5rem;
}

.workshop__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.workshop__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

@media (max-width: 880px) {
  .workshop__grid {
    grid-template-columns: 1fr;
  }
  .workshop__photo {
    aspect-ratio: 3 / 4;
    order: -1;
  }
}

/* ===== Projects Grid (home featured) ===== */

.projects {
  background: var(--paper);
}

.projects__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
}

.projects__grid--three {
  grid-template-columns: repeat(3, 1fr);
}

.project-card {
  display: block;
  position: relative;
}

.project-card__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 1.25rem;
  background: var(--paper-warm);
}

.project-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.project-card:hover .project-card__photo img {
  transform: scale(1.03);
}

.project-card__meta {
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.5rem;
}

.project-card__title {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
}

.project-card__title strong {
  font-weight: 500;
  color: var(--ink);
  display: inline;
}

.project-card--tall .project-card__photo {
  aspect-ratio: 4 / 5;
}

.project-card--wide .project-card__photo {
  aspect-ratio: 3 / 2;
}

@media (max-width: 720px) {
  .projects__grid,
  .projects__grid--three {
    grid-template-columns: 1fr;
  }
}

.projects__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(3rem, 6vw, 5rem);
}

/* ===== Editorial Project Case Studies (projects page rebuild) ===== */

.case-study {
  padding: clamp(4rem, 9vw, 8rem) 0;
  border-bottom: 1px solid var(--hairline);
}

.case-study:first-of-type {
  padding-top: clamp(2rem, 5vw, 4rem);
}

.case-study:last-of-type {
  border-bottom: 0;
}

.case-study__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.case-study--reverse .case-study__grid {
  grid-template-columns: 5fr 7fr;
}

.case-study--reverse .case-study__photo {
  order: 2;
}

.case-study__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}

.case-study__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.case-study--tall .case-study__photo {
  aspect-ratio: 4 / 5;
}

.case-study__copy {
  max-width: 48ch;
}

.case-study__meta {
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 1.25rem;
  display: block;
}

.case-study__title {
  font-size: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 1.5rem;
}

.case-study__narrative {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(10, 10, 10, 0.82);
  margin-bottom: 1rem;
  max-width: 48ch;
}

.case-study__hairline {
  margin-top: 2rem;
  width: 64px;
  height: 1px;
  background: var(--walnut);
  display: block;
}

@media (max-width: 880px) {
  .case-study__grid,
  .case-study--reverse .case-study__grid {
    grid-template-columns: 1fr;
  }
  .case-study--reverse .case-study__photo {
    order: 0;
  }
}

/* ===== Services Grid (home) ===== */

.services {
  background: var(--paper-warm);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}

.service-card {
  display: block;
  background: var(--paper);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--hairline);
  transition: border-color 0.3s ease, transform 0.4s ease;
  position: relative;
}

.service-card:hover {
  border-color: var(--champagne);
}

.service-card__num {
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 1.5rem;
  display: block;
}

.service-card__photo {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.service-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s ease;
}

.service-card:hover .service-card__photo img {
  transform: scale(1.04);
}

.service-card h3 {
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
  font-weight: 300;
}

.service-card p {
  color: rgba(10, 10, 10, 0.7);
  font-size: 0.9375rem;
  max-width: 42ch;
}

@media (max-width: 720px) {
  .services__grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Process ===== */

.process {
  background: var(--ink);
  color: var(--paper);
}

.process .section-head__num,
.process .eyebrow {
  color: var(--champagne);
}

.process .section-head__title {
  color: var(--paper);
}

.process__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  list-style: none;
}

.process__step {
  border-top: 1px solid rgba(248, 244, 233, 0.18);
  padding-top: 1.5rem;
}

.process__num {
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-loose);
  color: var(--champagne);
  margin-bottom: 1.5rem;
  display: block;
}

.process__step h3 {
  color: var(--paper);
  font-size: 1.25rem;
  font-weight: 400;
  margin-bottom: 0.75rem;
}

.process__step p {
  color: rgba(248, 244, 233, 0.65);
  font-size: 0.9375rem;
  line-height: 1.6;
}

@media (max-width: 880px) {
  .process__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .process__list {
    grid-template-columns: 1fr;
  }
}

/* ===== Contact (home + contact page) =====
   Somerville-style two-column with massive headline */

.contact-section {
  background: var(--paper);
  padding: var(--section-pad-y) 0;
}

.contact-section--bordered {
  border-top: 1px solid var(--hairline);
}

.contact-section__inner {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
}

.contact-section__left {
  position: relative;
}

.contact-section__eyebrow {
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 1.5rem;
  display: block;
}

.contact-section__headline {
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 1.75rem;
  max-width: 22ch;
}

.contact-section__body {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(10, 10, 10, 0.82);
  max-width: 56ch;
  margin-bottom: 2.5rem;
}

.contact-section__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
}

.contact-section__meta-block h4 {
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.contact-section__meta-block a,
.contact-section__meta-block .value {
  font-size: 1.0625rem;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--ink);
  border-bottom: 1px solid var(--walnut);
  padding-bottom: 1px;
  display: inline-block;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.contact-section__meta-block a:hover {
  color: var(--champagne);
  border-bottom-color: var(--champagne);
}

@media (max-width: 880px) {
  .contact-section__inner {
    grid-template-columns: 1fr;
  }
  .contact-section__meta {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

@media (max-width: 540px) {
  .contact-section__meta {
    grid-template-columns: 1fr;
  }
}

/* ===== Enquiry Form (real Formsubmit) ===== */

.enquiry-form {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.enquiry-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
}

.enquiry-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}

.enquiry-form__field label {
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 500;
  transition: color 0.25s ease;
}

.enquiry-form__field input,
.enquiry-form__field select,
.enquiry-form__field textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline-strong);
  padding: 0.85rem 0;
  width: 100%;
  outline: none;
  transition: border-color 0.25s ease, border-width 0.25s ease;
  border-radius: 0;
}

.enquiry-form__field input::placeholder,
.enquiry-form__field textarea::placeholder {
  color: var(--stone);
  opacity: 0.65;
}

.enquiry-form__field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--walnut) 50%),
                    linear-gradient(135deg, var(--walnut) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 10px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2rem;
  cursor: pointer;
}

.enquiry-form__field input:focus,
.enquiry-form__field select:focus,
.enquiry-form__field textarea:focus {
  border-bottom: 2px solid var(--walnut);
}

.enquiry-form__field:focus-within label {
  color: var(--walnut);
}

.enquiry-form__field textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}

.enquiry-form__check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: rgba(10, 10, 10, 0.7);
  cursor: pointer;
  line-height: 1.5;
}

.enquiry-form__check input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--walnut);
  background: transparent;
  flex-shrink: 0;
  margin-top: 0.18rem;
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease;
}

.enquiry-form__check input:checked {
  background: var(--champagne);
  border-color: var(--champagne);
}

.enquiry-form__check input:checked::after {
  content: '';
  position: absolute;
  inset: 3px 4px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg) translate(-1px, -2px);
  width: 4px;
  height: 8px;
}

.enquiry-form__privacy {
  font-size: 0.8125rem;
  color: var(--stone);
  line-height: 1.6;
}

.enquiry-form__privacy a {
  color: var(--walnut);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.enquiry-form__submit-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.enquiry-form__submit {
  background: var(--champagne);
  color: var(--ink);
  border: 1px solid var(--champagne);
  border-radius: 999px;
  padding: 1.05rem 2rem;
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.enquiry-form__submit:hover {
  background: var(--champagne-deep);
  border-color: var(--champagne-deep);
  transform: translateY(-1px);
}

.enquiry-form__submit-note {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--stone);
  max-width: 28ch;
  line-height: 1.5;
}

.enquiry-form__honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

@media (max-width: 640px) {
  .enquiry-form__row {
    grid-template-columns: 1fr;
  }
}

/* ===== Contact Map (legacy compatibility) ===== */

.contact-map {
  margin-top: clamp(3rem, 6vw, 5rem);
  border: 1px solid var(--hairline);
  overflow: hidden;
  aspect-ratio: 21 / 9;
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(0.3) contrast(0.95);
}

/* ===== Legacy CTA strip (used on services/about) ===== */

.cta-strip {
  background: var(--paper);
  padding: var(--section-pad-y) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.cta-strip__inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.cta-strip__copy h2 {
  margin-bottom: 1.5rem;
}

.cta-strip__copy p {
  font-size: 1.0625rem;
  max-width: 50ch;
}

.cta-strip__contact {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cta-strip__line {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--hairline);
}

.cta-strip__line:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.cta-strip__line .label {
  color: var(--stone);
}

.cta-strip__line .value {
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: -0.01em;
}

.cta-strip__line .value a:hover {
  color: var(--champagne);
}

@media (max-width: 880px) {
  .cta-strip__inner {
    grid-template-columns: 1fr;
  }
}

/* ===== Footer ===== */

.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(4rem, 8vw, 6.5rem) 0 2.5rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 5fr 3fr 4fr;
  gap: clamp(2rem, 5vw, 4rem);
  margin-bottom: 4rem;
}

.site-footer h4 {
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: rgba(248, 244, 233, 0.5);
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.site-footer__brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}

.site-footer__brand-mark {
  width: 48px;
  height: 48px;
  filter: brightness(1.4);
}

/* Iter 22: Felix's official dark-bg logo (square) in footer.
   Constrained square sits cleanly on the ink-black footer bg. */
.site-footer__logo {
  display: block;
  height: clamp(96px, 9vw, 140px);
  width: auto;
  max-width: 160px;
  margin-bottom: 1.5rem;
}

.site-footer__brand-wordmark {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--paper);
}

.site-footer__brand-wordmark strong {
  color: var(--champagne);
  font-weight: 500;
}

.site-footer__brand p {
  /* Iter 22: bigger + more noticeable tagline per Felix preference */
  color: var(--gold);
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  max-width: 36ch;
  margin-bottom: 1.25rem;
  line-height: 1.45;
}

.site-footer__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.site-footer__list a,
.site-footer__list li {
  color: rgba(248, 244, 233, 0.75);
  font-size: 0.9375rem;
}

.site-footer__list a:hover {
  color: var(--champagne);
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  color: rgba(248, 244, 233, 0.75);
  font-size: 0.9375rem;
  font-style: normal;
  line-height: 1.65;
}

.site-footer__contact a:hover {
  color: var(--champagne);
}

.site-footer__socials {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

.site-footer__socials a {
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-bottom: 1px solid rgba(248, 244, 233, 0.3);
  padding-bottom: 2px;
}

.site-footer__socials a:hover {
  border-color: var(--champagne);
  color: var(--champagne);
}

.site-footer__bottom {
  border-top: 1px solid rgba(248, 244, 233, 0.15);
  padding-top: 1.75rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.75rem;
  color: rgba(248, 244, 233, 0.5);
  letter-spacing: 0.03em;
}

.site-footer__bottom-links {
  display: flex;
  gap: 1.5rem;
}

.site-footer__bottom-links a:hover {
  color: var(--champagne);
}

@media (max-width: 880px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .site-footer__bottom {
    flex-direction: column;
  }
}

/* ===== Page Hero (non-home) ===== */

.page-hero {
  padding-top: clamp(8rem, 15vw, 12rem);
  padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}

.page-hero__inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
}

.page-hero__label {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.page-hero__num {
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--champagne);
}

/* Portfolio illustration slot inside page-hero left column */
.page-hero__art {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  width: 100%;
  max-width: 360px;
  aspect-ratio: 3/2;
  color: var(--gold);
  display: block;
}
.page-hero__art svg {
  width: 100%;
  height: 100%;
  display: block;
}
.page-hero--with-art .page-hero__inner {
  align-items: center;
}
@media (max-width: 720px) {
  .page-hero__art {
    max-width: 280px;
    margin: 0.5rem auto 0;
  }
}

.page-hero__title {
  font-size: clamp(2.75rem, 7vw, 6rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 0.98;
  max-width: 16ch;
}

.page-hero__sub {
  margin-top: 1.5rem;
  max-width: 56ch;
}

@media (max-width: 720px) {
  .page-hero__inner {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* ===== Filter Bar (projects page) ===== */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: clamp(3rem, 5vw, 4rem);
}

.filter-bar__btn {
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  font-weight: 500;
  background: none;
  border: 0;
  padding: 0.5rem 0;
  cursor: pointer;
  color: var(--stone);
  position: relative;
  transition: color 0.25s ease;
  font-family: inherit;
}

.filter-bar__btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--champagne);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.filter-bar__btn:hover,
.filter-bar__btn.is-active {
  color: var(--ink);
}

.filter-bar__btn.is-active::after {
  transform: scaleX(1);
}

/* ===== Service Detail Block (services page) ===== */

.service-detail {
  padding: clamp(5rem, 10vw, 9rem) 0;
  border-bottom: 1px solid var(--hairline);
}

.service-detail:last-of-type {
  border-bottom: 0;
}

.service-detail__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.service-detail--reverse .service-detail__grid {
  direction: rtl;
}

.service-detail--reverse .service-detail__grid > * {
  direction: ltr;
}

.service-detail__photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.service-detail__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-detail__num {
  font-size: clamp(3.5rem, 6vw, 5rem);
  font-weight: 200;
  letter-spacing: -0.02em;
  color: var(--walnut);
  margin-bottom: 1rem;
  display: block;
  line-height: 1;
}

.service-detail__eyebrow {
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 1.5rem;
  display: block;
}

.service-detail h2 {
  margin-bottom: 1.5rem;
  font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.service-detail p {
  margin-bottom: 1.1rem;
  max-width: 56ch;
  color: rgba(10, 10, 10, 0.8);
  line-height: 1.7;
}

.service-detail__specs {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}

.service-detail__spec h4 {
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.service-detail__spec p {
  font-size: 0.9375rem;
  margin-bottom: 0;
  max-width: none;
  color: var(--ink);
}

@media (max-width: 880px) {
  .service-detail__grid {
    grid-template-columns: 1fr;
  }
  .service-detail--reverse .service-detail__grid {
    direction: ltr;
  }
}

@media (max-width: 540px) {
  .service-detail__specs {
    grid-template-columns: 1fr;
  }
}

/* ===== About Page ===== */

.about-story {
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.about-story__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.about-story__copy h2 {
  margin-bottom: 1.5rem;
}

.about-story__copy p {
  margin-bottom: 1.25rem;
  font-size: 1.0625rem;
  max-width: 56ch;
  color: rgba(10, 10, 10, 0.82);
  line-height: 1.7;
}

.about-story__copy p:first-of-type {
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--ink);
}

.about-quote {
  border-left: 1px solid var(--champagne);
  padding: 0.5rem 0 0.5rem 1.5rem;
  margin: 2rem 0;
}

.about-quote p {
  font-size: 1.25rem;
  font-weight: 300;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 0.75rem;
}

.about-quote cite {
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--stone);
  font-style: normal;
}

.about-stats {
  background: var(--paper-warm);
  padding: var(--section-pad-y) 0;
}

.about-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
}

.about-stat {
  border-top: 1px solid var(--champagne);
  padding-top: 1.5rem;
}

.about-stat__num {
  font-size: clamp(2.75rem, 1.5rem + 3.5vw, 4.5rem);
  font-weight: 200;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.75rem;
}

.about-stat__label {
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--stone);
}

@media (max-width: 880px) {
  .about-story__grid {
    grid-template-columns: 1fr;
  }
  .about-stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== Thank You page ===== */

.thank-you {
  padding-top: clamp(8rem, 16vw, 14rem);
  padding-bottom: clamp(6rem, 12vw, 10rem);
  background: var(--paper);
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.thank-you__inner {
  max-width: 720px;
}

.thank-you__eyebrow {
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 1.5rem;
  display: block;
}

.thank-you__title {
  font-size: clamp(3.5rem, 11vw, 9rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin-bottom: 2rem;
}

.thank-you__body {
  font-size: 1.25rem;
  line-height: 1.6;
  font-weight: 300;
  color: rgba(10, 10, 10, 0.82);
  max-width: 48ch;
  margin-bottom: 2.5rem;
}

.thank-you__hairline {
  width: 64px;
  height: 1px;
  background: var(--walnut);
  margin-bottom: 2.5rem;
}

.thank-you__links {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

/* ===== Reveal animation ===== */

.reveal {
  opacity: 0.001;
  transform: translateY(30px);
  transition: opacity 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}

/* Iteration 17: once .is-visible is applied, FREEZE the visible state with
   !important so no competing GSAP `from` tween or safety net can drag the
   element back to opacity 0 mid-flight (the "fade in then back out" flicker). */
.reveal.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.reveal-hairline {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--walnut);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal-hairline.is-visible {
  transform: scaleX(1);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal,
  .reveal-hairline {
    opacity: 1;
    transform: none;
  }
  .sticky-cta {
    transform: translateY(0) !important;
    animation: none !important;
  }
}

/* Print-ish hidden helpers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* =================================================================
   Internal Reference Pages — Brand Bible + Business Cards
   ================================================================= */

.ref-page {
  padding-top: clamp(6rem, 12vw, 9rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
  background: var(--paper);
}

.ref-page__container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.ref-page__container--wide {
  max-width: 960px;
}

.ref-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 2.5rem;
  transition: color 0.3s ease;
}

.ref-back:hover {
  color: var(--walnut);
}

.ref-page__title {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  max-width: none;
}

.ref-page__meta {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.ref-page__meta span::after {
  content: "·";
  margin-left: 1.25rem;
  color: var(--hairline-strong);
}

.ref-page__meta span:last-child::after {
  content: "";
}

.ref-toc {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 1.75rem 0;
  margin-bottom: 4rem;
}

.ref-toc__label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 1rem;
}

.ref-toc__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem 2rem;
  padding: 0;
  margin: 0;
  counter-reset: toc;
}

@media (max-width: 720px) {
  .ref-toc__list {
    grid-template-columns: 1fr;
  }
}

.ref-toc__list li {
  counter-increment: toc;
  font-size: 0.95rem;
  font-weight: 400;
}

.ref-toc__list a {
  display: flex;
  gap: 0.75rem;
  color: var(--ink);
  padding: 0.15rem 0;
}

.ref-toc__list a::before {
  content: counter(toc, decimal-leading-zero);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--walnut);
  flex-shrink: 0;
  padding-top: 0.3rem;
}

.ref-prose {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink);
}

.ref-prose > * {
  max-width: none;
}

.ref-prose h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-top: 4.5rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--walnut);
  scroll-margin-top: 6rem;
}

.ref-prose h2:first-child {
  margin-top: 0;
}

.ref-prose h3 {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  margin-top: 2.75rem;
  margin-bottom: 0.75rem;
}

.ref-prose h4 {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--walnut);
  margin-top: 2.25rem;
  margin-bottom: 0.5rem;
}

.ref-prose p {
  margin: 0 0 1.25rem;
  max-width: none;
}

.ref-prose p strong {
  font-weight: 500;
}

.ref-prose ul,
.ref-prose ol {
  margin: 0 0 1.5rem 1.25rem;
  padding: 0;
}

.ref-prose li {
  margin-bottom: 0.5rem;
}

.ref-prose blockquote {
  border-left: 2px solid var(--walnut);
  padding: 0.5rem 0 0.5rem 1.5rem;
  margin: 1.75rem 0;
  font-style: normal;
  color: rgba(10, 10, 10, 0.78);
  font-size: 1.0625rem;
}

.ref-prose code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: rgba(123, 94, 60, 0.08);
  padding: 0.1em 0.4em;
  border-radius: 2px;
  color: var(--walnut-deep);
}

.ref-prose pre {
  background: rgba(10, 10, 10, 0.04);
  border-left: 2px solid var(--stone);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.55;
  overflow-x: auto;
  color: var(--ink);
}

.ref-prose pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}

.ref-prose hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 3rem 0;
}

.ref-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0 2.25rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.ref-prose thead th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--stone);
  padding: 0.6rem 0.85rem 0.65rem;
  border-bottom: 1px solid var(--walnut);
  vertical-align: bottom;
}

.ref-prose tbody td {
  padding: 0.7rem 0.85rem;
  border-top: 1px solid rgba(123, 94, 60, 0.18);
  vertical-align: top;
}

.ref-prose tbody tr:first-child td {
  border-top: 0;
}

.ref-prose tbody td code {
  font-size: 0.85em;
}

.ref-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0 2.5rem;
}

.ref-swatch {
  border: 1px solid var(--hairline);
  background: var(--paper);
}

.ref-swatch__chip {
  height: 110px;
  border-bottom: 1px solid var(--hairline);
}

.ref-swatch__meta {
  padding: 0.9rem 1rem 1rem;
}

.ref-swatch__name {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink);
  display: block;
  margin-bottom: 0.3rem;
}

.ref-swatch__hex {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--stone);
}

.ref-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0 2.5rem;
}

.ref-logo {
  border: 1px solid var(--hairline);
  background: var(--paper);
  display: flex;
  flex-direction: column;
}

.ref-logo__frame {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  min-height: 160px;
}

.ref-logo__frame--ink {
  background: var(--ink);
}

.ref-logo__frame img {
  max-width: 100%;
  max-height: 120px;
  width: auto;
  height: auto;
  display: block;
}

.ref-logo__meta {
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid var(--hairline);
}

.ref-logo__name {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink);
  display: block;
  margin-bottom: 0.25rem;
}

.ref-logo__note {
  font-size: 0.78rem;
  color: var(--stone);
  line-height: 1.4;
}

.ref-photo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 2rem 0 2.5rem;
}

.ref-photo-strip figure {
  margin: 0;
}

.ref-photo-strip img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

.ref-photo-strip figcaption {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 0.6rem;
}

/* ===== Business cards page ===== */

.bc-section {
  margin-top: 4.5rem;
}

.bc-section:first-of-type {
  margin-top: 0;
}

.bc-section__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--walnut);
}

.bc-section__num {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--walnut);
}

.bc-section__title {
  font-size: clamp(1.4rem, 1rem + 1.1vw, 1.875rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  margin: 0;
}

.bc-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--paper);
  background: var(--walnut);
  padding: 0.3rem 0.65rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}

.bc-card-frame {
  background: #E6E2DA;
  padding: clamp(1.5rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
}

.bc-card-frame img {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 8px 32px rgba(10, 10, 10, 0.12), 0 2px 8px rgba(10, 10, 10, 0.08);
}

.bc-card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}

@media (max-width: 640px) {
  .bc-card-meta {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.bc-card-meta p {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(10, 10, 10, 0.82);
  max-width: none;
  margin: 0;
}

.bc-specs {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bc-specs li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.85rem;
}

.bc-specs li:last-child {
  border-bottom: 0;
}

.bc-specs .label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--stone);
}

.bc-specs .value {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.82rem;
  color: var(--ink);
  text-align: right;
}

.bc-recommend {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(2rem, 5vw, 3rem);
  margin-top: 4.5rem;
}

.bc-recommend .bc-section__num {
  color: var(--champagne);
}

.bc-recommend h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin: 0.5rem 0 1rem;
  border: 0;
}

.bc-recommend p {
  color: rgba(248, 244, 233, 0.82);
  font-size: 1.0625rem;
  line-height: 1.65;
  max-width: 56ch;
  margin: 0;
}

/* =================================================================
   ITERATION 2 — additions
   Hero carousel, projects grid, services grid, mobile drawer,
   contact split-text, back-to-top, palette refinements.
   ================================================================= */

/* ===== Hero carousel (homepage) ===== */

.hero__carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-slide {
  /* Note: opacity + transform are GSAP-controlled (iteration 5). No CSS transition
     to avoid fighting GSAP tweens. The .is-active class is a CSS hook for the
     dark gradient overlay and any other classed selectors; GSAP owns opacity. */
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform-origin: center center;
  will-change: opacity, transform;
}

.hero-slide.is-active {
  /* Fallback for no-JS / no-GSAP environments. Inline opacity from GSAP wins. */
  opacity: 1;
}

.hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.20) 55%, rgba(10, 10, 10, 0.55) 100%);
  pointer-events: none;
}

.hero-carousel__dots {
  position: absolute;
  bottom: clamp(1.25rem, 3vw, 2rem);
  right: clamp(1.25rem, 4vw, 2.5rem);
  display: flex;
  gap: 0.75rem;
  z-index: 3;
}

.hero-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.hero-carousel__dot:hover {
  transform: scale(1.25);
}

.hero-carousel__dot.is-active {
  background: var(--gold);
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transform: none !important;
  }
}

/* ===== Featured editorial project (projects page top) ===== */

.featured-project {
  padding: clamp(4rem, 8vw, 7rem) 0;
  border-bottom: 1px solid var(--hairline);
  position: relative;
}

.featured-project__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  position: relative;
}

.featured-project__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.featured-project__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.featured-project__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 48ch;
}

.featured-project__eyebrow {
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
  display: block;
}

.featured-project__title {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 1.5rem;
}

.featured-project__title .gold-word {
  color: var(--gold);
  font-weight: 400;
}

.featured-project__narrative {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(10, 10, 10, 0.82);
  margin-bottom: 1rem;
  max-width: 48ch;
}

.featured-project__meta {
  border-top: 1px solid var(--hairline);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
}

.featured-project__meta-block h4 {
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.4rem;
  font-weight: 500;
}

.featured-project__meta-block p {
  font-size: 0.95rem;
  margin: 0;
  color: var(--ink);
}

@media (max-width: 880px) {
  .featured-project__grid {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 2.5rem);
  }
  .featured-project__photo {
    order: 1;
  }
  .featured-project__copy {
    order: 2;
  }
}

/* ===== Portfolio illustration (iter 19) ===== */

.portfolio-illustration {
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(2rem, 4vw, 3rem);
  background: var(--paper);
  border-top: 1px solid var(--hairline);
}
.portfolio-illustration__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.portfolio-illustration__eyebrow {
  display: inline-block;
  font-family: var(--font-mono, 'Courier New', monospace);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--gold);
}
.portfolio-illustration__art {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 3/2;
  color: var(--gold);
  display: block;
  margin: 0.5rem auto;
}
.portfolio-illustration__art svg {
  width: 100%;
  height: 100%;
  display: block;
}
.portfolio-illustration__caption {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.78;
  max-width: 58ch;
  margin: 0 auto;
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-illustration__art svg path,
  .portfolio-illustration__art svg line,
  .portfolio-illustration__art svg rect {
    stroke-dashoffset: 0 !important;
  }
  .portfolio-illustration__art svg circle,
  .portfolio-illustration__art svg ellipse {
    opacity: 1 !important;
  }
}

/* ===== Projects grid (3-col scannable) ===== */

.projects-grid-section {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--paper);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
}

.proj-card {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}

.proj-card.is-visible,
.no-anim .proj-card {
  opacity: 1;
  transform: translateY(0);
}

.proj-card__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 1rem;
  background: var(--paper-warm);
  border: 1px solid transparent;
  transition: border-color 0.35s ease;
}

.proj-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.proj-card:hover .proj-card__photo img {
  transform: scale(1.03);
}

.proj-card:hover .proj-card__photo {
  border-color: var(--gold);
}

.proj-card__meta {
  font-size: 0.65rem;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.45rem;
}

.proj-card__title {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 0.35rem;
  color: var(--ink);
}

.proj-card__desc {
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(10, 10, 10, 0.65);
  max-width: 38ch;
}

@media (max-width: 880px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
}

.projects-grid__note {
  margin-top: clamp(3rem, 5vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--hairline);
  max-width: 60ch;
}

.projects-grid__note p {
  font-size: 1rem;
  color: rgba(10, 10, 10, 0.72);
  line-height: 1.65;
}

/* ===== Services cards (3+2 grid on services page) ===== */

.services-cards-section {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--paper-warm);
  border-bottom: 1px solid var(--hairline);
}

.services-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
}

.svc-card {
  display: block;
  background: var(--paper);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: border-color 0.35s ease, transform 0.35s ease, opacity 0.35s ease;
  will-change: opacity, transform;
}

.svc-card.is-visible,
.no-anim .svc-card {
  opacity: 1;
  transform: translateY(0);
}

.svc-card:hover {
  border-color: var(--gold);
}

.svc-card__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.svc-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.svc-card:hover .svc-card__photo img {
  transform: scale(1.04);
}

.svc-card__num {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--gold);
  display: block;
  margin-bottom: 0.5rem;
}

.svc-card__title {
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: var(--ink);
}

.svc-card__desc {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(10, 10, 10, 0.7);
  max-width: 36ch;
  margin-bottom: 1rem;
}

.svc-card__link {
  font-size: 0.7rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  display: inline-flex;
  gap: 0.4rem;
  transition: gap 0.3s ease;
}

.svc-card:hover .svc-card__link {
  gap: 0.7rem;
}

.svc-card--center {
  /* the second row's two cards get centered */
}

.services-cards--3-2 {
  /* parent helper for 3-on-top, 2-on-bottom centered layout */
}

.services-cards__row-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  max-width: 66%;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
}

@media (max-width: 880px) {
  .services-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .services-cards__row-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }
}

@media (max-width: 540px) {
  .services-cards,
  .services-cards__row-2 {
    grid-template-columns: 1fr;
  }
}

/* ===== Service tightened bullets ===== */

.service-detail__bullets {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 2rem;
}

.service-detail__bullets li {
  font-size: 0.95rem;
  color: var(--ink);
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.55;
}

.service-detail__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 8px;
  height: 1px;
  background: var(--gold);
}

@media (max-width: 640px) {
  .service-detail__bullets {
    grid-template-columns: 1fr;
  }
}

/* ===== About page audited sections ===== */

.about-block {
  padding: clamp(4rem, 8vw, 7rem) 0;
  border-bottom: 1px solid var(--hairline);
}

.about-block:last-of-type {
  border-bottom: 0;
}

.about-block--cream {
  background: var(--paper-warm);
}

.about-block__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.about-block__label {
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 1rem;
}

.about-block__title {
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin-bottom: 1.25rem;
}

.about-block__title .gold-word {
  color: var(--gold);
  font-weight: 400;
}

.about-block__body p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(10, 10, 10, 0.82);
  margin-bottom: 1.1rem;
  max-width: 56ch;
}

.about-block__list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 2rem;
}

.about-block__list li {
  font-size: 0.95rem;
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.55;
  color: var(--ink);
}

.about-block__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 8px;
  height: 1px;
  background: var(--gold);
}

.about-block__placeholder {
  font-size: 0.875rem;
  color: var(--stone);
  font-style: normal;
  border-left: 1px solid var(--gold);
  padding: 0.25rem 0 0.25rem 1rem;
  margin-top: 1.5rem;
  max-width: 48ch;
}

@media (max-width: 880px) {
  .about-block__grid {
    grid-template-columns: 1fr;
  }
  .about-block__list {
    grid-template-columns: 1fr;
  }
}

/* Iteration 6 — merged about workshop+felix (photo + copy, stats inline) */
.about-block--merged {
  padding: clamp(4rem, 8vw, 7rem) 0;
}
.about-block__merged-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.about-block__photo {
  width: 100%;
}
.about-block__photo img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}
.about-stats-inline {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 2.5rem);
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  text-align: left;
}
.about-stats-inline .about-stat__num {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 200;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.4rem;
}
.about-stats-inline .about-stat__label {
  font-size: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--stone);
}
@media (max-width: 880px) {
  .about-block__merged-grid {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 2.5rem);
  }
  .about-stats-inline {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ===== Contact split-text reveal helper ===== */

.split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  will-change: opacity, transform;
}

.split-word.is-revealed,
.no-anim .split-word {
  opacity: 1;
  transform: translateY(0);
}

.contact-section__headline--xl {
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.05;
  max-width: 22ch;
}

.contact-section__headline--xl .gold-word {
  color: var(--gold);
}

/* ===== Back-to-top link (footer) ===== */

.site-footer__top {
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(248, 244, 233, 0.7);
  border-bottom: 1px solid rgba(248, 244, 233, 0.2);
  padding-bottom: 2px;
  cursor: pointer;
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  font-family: inherit;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.site-footer__top:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.site-footer__bottom-row-hairline {
  border-top: 1px solid var(--hairline-gold);
  padding-top: 1.75rem;
  margin-top: 1rem;
}

/* ===== Footer phone/email hover override ===== */

.site-footer__contact a {
  transition: color 0.25s ease;
}

.site-footer__contact a:hover {
  color: var(--gold);
}

/* ===== Mobile drawer (right slide-in) ===== */

.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(80vw, 360px);
  background: var(--paper);
  z-index: 110;
  padding: 6rem 2rem 2.5rem;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.7, 0, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border-left: 1px solid var(--hairline);
  box-shadow: -16px 0 48px rgba(10, 10, 10, 0.12);
}

.mobile-drawer.is-open {
  transform: translateX(0);
}

.mobile-drawer a {
  font-size: 1rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  padding: 0.5rem 0;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
}

.mobile-drawer a:last-child {
  border-bottom: 0;
}

.mobile-drawer__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem !important;
  background: var(--gold);
  color: var(--ink) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 999px;
  border-bottom: 1px solid var(--gold) !important;
}

.mobile-drawer__contact {
  font-size: 0.85rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--stone) !important;
}

.mobile-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  z-index: 105;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.mobile-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ===== Gold accent overrides on darker surfaces ===== */

.process .section-head__num,
.process .eyebrow,
.process .process__num {
  color: var(--gold-soft);
}

.bc-recommend .bc-section__num {
  color: var(--gold);
}

/* ===== Numeric counter target ===== */

.about-stat__num[data-count] {
  display: inline-block;
}

/* ===== Lenis smooth-scroll integration ===== */

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* Lenis disables native smooth-scroll, but we want to keep that fallback when
   Lenis is not active (e.g., reduced-motion or no JS) */
@media (prefers-reduced-motion: reduce) {
  html.lenis.lenis-smooth {
    scroll-behavior: smooth !important;
  }
}

/* =================================================================
   ITERATION 3 — Somerville editorial DNA additions
   - Numbered "What We Build" list (gold numerals)
   - Editorial testimonial blockquote
   - "Talk to us" hover label on sticky CTA
   - Link underline draw, photo gold-tint hover
   - 4-step Process strip
   - Workshop alternating bg
   - Recent Work editorial grid
   - About service-area lists
   ================================================================= */

/* Reusable gilt-paper section background */
.bg-gilt {
  background: var(--paper-gilt);
}

/* Editorial label (small caps, gold) */
.editorial-label {
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  display: inline-block;
}

/* ===== Hero eyebrow (iteration 3) — gold-warm small caps ===== */
.hero-eyebrow,
.hero__eyebrow--gilt {
  color: var(--gold-warm) !important;
  letter-spacing: 0.25em;
}

/* ===== "What We Build" 01-10 numbered list ===== */

.what-we-build {
  padding: var(--section-pad-y) 0;
  background: var(--paper);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.what-we-build--gilt {
  background: var(--paper-gilt);
}

.what-we-build__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  align-items: end;
}

.what-we-build__label {
  font-size: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
  display: block;
}

.what-we-build__title {
  font-size: var(--type-h2);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1;
  max-width: 14ch;
}

.what-we-build__lede {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(10, 10, 10, 0.82);
  max-width: 48ch;
  margin-bottom: 0;
}

@media (max-width: 880px) {
  .what-we-build__head {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Iteration 6 — merged what-we-build (intro + list, two-column) */
.what-we-build--merged {
  padding: clamp(4rem, 8vw, 7rem) 0;
}
.what-we-build__merged-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.what-we-build__intro p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(10, 10, 10, 0.82);
  max-width: 52ch;
  margin-bottom: 1rem;
}
.what-we-build__intro .link-arrow {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
.what-we-build__intro .link-arrow:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.what-we-build__gallery {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.what-we-build__gallery img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}
@media (max-width: 880px) {
  .what-we-build__merged-grid {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
  }
}

/* Inline testimonial (folded into Recent Work dark section) */
.testimonial-block--inline {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(212, 175, 55, 0.35);
  text-align: center;
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}

.numbered-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

.numbered-list__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--hairline);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.numbered-list__item.is-revealed,
.no-anim .numbered-list__item {
  opacity: 1;
  transform: translateX(0);
}

.numbered-list__item:nth-child(odd) {
  padding-right: clamp(1rem, 3vw, 3rem);
  border-right: 1px solid var(--hairline);
}

.numbered-list__item:nth-child(even) {
  padding-left: clamp(1rem, 3vw, 3rem);
}

.numbered-list__num {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300;
  color: var(--gold);
  font-variant-numeric: lining-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  display: inline-block;
  min-width: 2.2em;
}

.numbered-list__label {
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.375rem);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.3;
}

.numbered-list__cta-row {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.numbered-list__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  transition: gap 0.3s ease, color 0.25s ease;
}

.numbered-list__cta:hover {
  color: var(--gold-warm);
  gap: 0.85rem;
}

@media (max-width: 720px) {
  .numbered-list {
    grid-template-columns: 1fr;
  }
  .numbered-list__item:nth-child(odd),
  .numbered-list__item:nth-child(even) {
    padding-right: 0;
    padding-left: 0;
    border-right: 0;
  }
}

/* ===== Editorial testimonial (H2-scale quote) ===== */

.testimonial-block {
  padding: var(--section-pad-y) 0;
  background: var(--paper-gilt);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.testimonial-block__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.testimonial-block__label {
  font-size: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2rem;
  display: block;
}

.testimonial-block__quote {
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 300;
  letter-spacing: -0.018em;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 2.5rem;
  max-width: 24ch;
  position: relative;
}

.testimonial-block__quote::after {
  content: '\201D';
  color: var(--gold);
  font-weight: 300;
  margin-left: 0.05em;
}

.testimonial-block__attribution {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.testimonial-block__name {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
}

.testimonial-block__role {
  font-size: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--stone);
}

/* ===== Recent Work editorial grid (home) ===== */

.recent-work {
  padding: var(--section-pad-y) 0;
  background: var(--paper);
}

.recent-work__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  align-items: end;
}

.recent-work__title {
  font-size: var(--type-h2);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1;
  max-width: 14ch;
}

.recent-work__title .gold-word {
  color: var(--gold);
  font-weight: 400;
}

.recent-work__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
}

.recent-work__cta-row {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

@media (max-width: 880px) {
  .recent-work__head,
  .recent-work__grid {
    grid-template-columns: 1fr;
  }
}

.editorial-card {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
}

.editorial-card__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: var(--paper-warm);
  position: relative;
}

.editorial-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.6s ease;
}

.editorial-card__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(212, 175, 55, 0.06);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.editorial-card:hover .editorial-card__photo img {
  transform: scale(1.025);
  filter: saturate(0.94);
}

.editorial-card:hover .editorial-card__photo::after {
  opacity: 1;
}

.editorial-card__title {
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 0.85rem;
  max-width: 28ch;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

.editorial-card__meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.editorial-card__meta li {
  font-size: 0.875rem;
  color: rgba(10, 10, 10, 0.7);
  line-height: 1.55;
  position: relative;
  padding-left: 1rem;
}

.editorial-card__meta li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-size: 0.9em;
}

/* ===== 4-step Process strip ===== */

.process-strip {
  padding: var(--section-pad-y) 0;
  background: var(--ink);
  color: var(--paper);
}

.process-strip__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  align-items: end;
}

.process-strip__label {
  font-size: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 1rem;
}

.process-strip__title {
  font-size: var(--type-h2);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--paper);
  max-width: 14ch;
}

.process-strip__title .gold-word {
  color: var(--gold);
  font-weight: 400;
}

.process-strip__lede {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(248, 244, 233, 0.7);
  max-width: 48ch;
}

.process-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.process-strip__step {
  border-top: 1px solid var(--gold);
  padding-top: 1.5rem;
}

.process-strip__num {
  display: block;
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 300;
  color: var(--gold);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 1.25rem;
  font-variant-numeric: lining-nums;
}

.process-strip__step h3 {
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--paper);
  margin-bottom: 0.75rem;
  letter-spacing: -0.005em;
}

.process-strip__step p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(248, 244, 233, 0.7);
  margin: 0;
  max-width: 36ch;
}

@media (max-width: 880px) {
  .process-strip__head {
    grid-template-columns: 1fr;
  }
  .process-strip__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .process-strip__grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Workshop intro section (home) — alternating gilt bg ===== */

.workshop-intro {
  padding: var(--section-pad-y) 0;
  background: var(--paper-gilt);
}

.workshop-intro__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.workshop-intro__label {
  font-size: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
  display: block;
}

.workshop-intro__title {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.5rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 1.5rem;
  max-width: 18ch;
}

.workshop-intro__title .gold-word {
  color: var(--gold);
  font-weight: 400;
}

.workshop-intro__body p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(10, 10, 10, 0.82);
  margin: 0 0 1.25rem;
  max-width: 56ch;
}

.workshop-intro__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2.25rem;
}

.workshop-intro__gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

@media (max-width: 880px) {
  .workshop-intro__grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Service-area list (about page) ===== */

.service-area-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.service-area-list li {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 1.25rem;
  align-items: baseline;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--hairline);
}

.service-area-list li:last-child {
  border-bottom: 0;
}

.service-area-list__label {
  font-size: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold);
  white-space: nowrap;
}

.service-area-list__cities {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(10, 10, 10, 0.82);
  margin: 0;
}

@media (max-width: 720px) {
  .service-area-list li {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

/* ===== Footer "Built with care" tagline ===== */

.site-footer__care {
  font-size: 0.6875rem;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.85rem;
  display: block;
}

/* ===== "Talk to us" hover label on sticky CTA ===== */

.sticky-cta__label {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: transparent;
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.sticky-cta:hover .sticky-cta__label,
.sticky-cta:focus-visible .sticky-cta__label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@media (max-width: 640px) {
  .sticky-cta__label {
    display: none;
  }
}

/* ===== Editorial-card meta override on dark sections ===== */
.process-strip .editorial-card__meta li {
  color: rgba(248, 244, 233, 0.7);
}

/* ===== Link underline draw on hover (anchors inside prose/main) ===== */
.prose-link,
.body-prose a,
.contact-section__body a,
.workshop-intro__body a {
  position: relative;
  color: var(--gold);
  display: inline-block;
}

.prose-link::after,
.body-prose a::after,
.contact-section__body a::after,
.workshop-intro__body a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.prose-link:hover::after,
.body-prose a:hover::after,
.contact-section__body a:hover::after,
.workshop-intro__body a:hover::after {
  transform: scaleX(1);
}

/* ===== Hero accent gold word — punchier ===== */
.gold-accent {
  color: var(--gold);
  font-weight: 500;
}

/* ===== Felix note in contact form (italic small note) ===== */
.felix-note {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--stone);
  margin-top: 1rem;
  line-height: 1.55;
}

/* ===== Material spec list (services page) ===== */
.material-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

.material-list__label {
  font-size: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
  display: block;
  font-weight: 500;
}

.material-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 2rem;
}

.material-list li {
  font-size: 0.9375rem;
  color: var(--ink);
  padding-left: 1rem;
  position: relative;
  line-height: 1.55;
}

.material-list li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
}

@media (max-width: 640px) {
  .material-list ul {
    grid-template-columns: 1fr;
  }
}

/* ===== About stats restyle (iteration 3) — gold numbers ===== */
.about-stat__num {
  color: var(--gold);
  font-weight: 200;
}

/* ===== Reveal helper for numbered list (handled by JS) ===== */
.numbered-list__item {
  opacity: 0;
}

/* =====================================================
   Iteration 6 — Dark luxury sections
   Use `.section--dark` modifier on any <section> to invert
   the palette: ink bg + ivory text + gold accents.
   ===================================================== */
.section--dark {
  background: var(--ink);
  color: var(--paper);
}
.section--dark .eyebrow,
.section--dark .section-head__eyebrow,
.section--dark .gold-word,
.section--dark .gold-accent {
  color: var(--gold-warm);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark p,
.section--dark li,
.section--dark blockquote {
  color: var(--paper);
}
.section--dark a {
  color: var(--gold-warm);
}
.section--dark a:hover {
  color: var(--gold);
}
.section--dark .hairline,
.section--dark .reveal-hairline,
.section--dark hr {
  background: var(--gold);
  border-color: var(--gold);
}
/* Iteration 11 — let .btn--gold gradient + shimmer flow through on dark sections too.
   No background override here — the gradient and shimmer give it presence on
   dark bg without needing a separate treatment. */
.section--dark .btn--ghost {
  color: var(--paper);
  border-color: var(--paper);
}
.section--dark .btn--ghost:hover {
  background: var(--paper);
  color: var(--ink);
}
/* Numbered list lift on dark */
.section--dark .numbered-list__item {
  border-color: rgba(212, 175, 55, 0.25);
}
.section--dark .numbered-list__num {
  color: var(--gold-warm);
}
.section--dark .numbered-list__title,
.section--dark .numbered-list__body {
  color: var(--paper);
}
/* Editorial card lift on dark */
.section--dark .editorial-card,
.section--dark .editorial-card * {
  color: var(--paper);
}
.section--dark .editorial-card__meta,
.section--dark .editorial-card__eyebrow {
  color: var(--gold-warm);
}
/* Testimonial lift on dark */
.section--dark .testimonial-block__quote,
.section--dark blockquote {
  color: var(--paper);
}
.section--dark .testimonial-block__attribution {
  color: var(--gold-warm);
}
/* Stat lift on dark */
.section--dark .about-stat__num {
  color: var(--gold-warm);
}
.section--dark .about-stat__label {
  color: rgba(248, 244, 233, 0.7);
}
/* Borders / dividers on dark */
.section--dark [class*="__divider"],
.section--dark [class*="__rule"] {
  border-color: rgba(248, 244, 233, 0.2);
}

/* Iteration 6 — Service-details accordion (services.html) */
.service-details-collapse {
  margin-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--hairline);
  padding-top: clamp(2rem, 4vw, 3rem);
}
.service-details-toggle {
  margin: 0 auto;
  max-width: 80ch;
}
.service-details-toggle > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
}
.service-details-toggle > summary::-webkit-details-marker {
  display: none;
}
.service-details-toggle__caret {
  font-size: 1.25rem;
  font-weight: 300;
  transition: transform 0.3s ease;
}
.service-details-toggle[open] .service-details-toggle__caret {
  transform: rotate(45deg);
}
.service-details-collapse__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
}
.service-detail-card {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  background: var(--paper-warm);
  border-top: 2px solid var(--gold);
}
.service-detail-card__num {
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-loose);
  color: var(--stone);
  font-weight: 500;
  display: block;
  margin-bottom: 0.4rem;
}
.service-detail-card__eyebrow {
  font-size: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  display: block;
  margin-bottom: 1rem;
}
.service-detail-card h3 {
  font-size: clamp(1.125rem, 1.4vw, 1.4rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 0.85rem;
}
.service-detail-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(10, 10, 10, 0.8);
  margin-bottom: 1rem;
}
.service-detail-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--hairline);
  padding-top: 0.85rem;
}
.service-detail-card__list li {
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(10, 10, 10, 0.7);
  padding: 0.25rem 0;
}

/* fallback: when JS isn't running, reveal everything */
.no-anim .numbered-list__item,
html:not(.has-js) .numbered-list__item {
  opacity: 1;
  transform: none;
}

/* =================================================================
   ITERATION 8 — additions
   1. CSS safety net for animated cards
   2. Hero split layout
   3. About story page bits
   ================================================================= */

/* Final safety net — any element accidentally left at opacity 0 by JS becomes visible.
   GSAP set() inline-styles will override during animation; this is the default. */
.editorial-card,
.process-strip__step {
  opacity: 1;
}

/* ===== Hero — split layout (iteration 8) ===== */
.hero--split {
  background: var(--paper);
  min-height: auto;
  padding: clamp(7rem, 12vw, 10rem) 0 clamp(4rem, 7vw, 6rem);
  display: block;
  align-items: initial;
  overflow: visible;
}

.hero--split__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

@media (min-width: 960px) {
  .hero--split__container {
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 5vw, 5rem);
    align-items: stretch;
  }
}

.hero--split__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  color: var(--ink);
}

.hero--split__copy .hero__eyebrow {
  color: var(--gold-deep);
  margin-bottom: 0.5rem;
}

.hero--split__copy .hero__eyebrow::before {
  background: var(--gold);
}

.hero--split__copy .hero__headline {
  color: var(--ink);
  margin: 0.25rem 0 1rem;
  max-width: 16ch;
}

.hero--split__copy .hero__sub {
  color: rgba(10, 10, 10, 0.78);
  max-width: 38ch;
  margin-bottom: 1.75rem;
}

.hero--split__copy .hero__ctas {
  margin-bottom: 1.5rem;
}

.hero--split__copy .btn--ghost {
  color: var(--ink);
  border-color: var(--hairline-strong);
}

.hero--split__copy .btn--ghost:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.hero--split__copy .hero__trust {
  color: rgba(10, 10, 10, 0.55);
  margin-top: 0.5rem;
}

.hero--split__copy .hero__trust::before {
  background: rgba(10, 10, 10, 0.3);
}

.hero--split__media {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 720px;
  width: 100%;
  overflow: hidden;
  background: var(--ink);
}

@media (max-width: 960px) {
  .hero--split__media {
    aspect-ratio: 4 / 3;
  }
}

.hero--split__media .hero-slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
}

.hero--split__media .hero-slide.is-active {
  opacity: 1;
}

.hero--split__media .hero-carousel__dots {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 3;
}

/* ===== About story page (iteration 8) ===== */
.about-hero {
  padding: clamp(6rem, 11vw, 9rem) 0 clamp(2.5rem, 5vw, 4rem);
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}

.about-hero .eyebrow {
  color: var(--gold-deep);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  display: inline-block;
}

.about-hero h1 {
  font-size: var(--type-h1);
  font-weight: 300;
  letter-spacing: var(--track-display);
  line-height: 1.05;
  margin-bottom: 1.5rem;
  max-width: 22ch;
}

.about-hero .lede {
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.375rem);
  line-height: 1.55;
  color: rgba(10, 10, 10, 0.78);
  max-width: 56ch;
}

.about-story {
  padding: clamp(3rem, 7vw, 6rem) 0;
  background: var(--paper);
}

.about-story__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (min-width: 880px) {
  .about-story__grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 6vw, 5rem);
  }
}

.about-story__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 780px;
  overflow: hidden;
  background: var(--ink);
}

.about-story__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-story__copy {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.about-story__copy p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(10, 10, 10, 0.82);
  max-width: 52ch;
}

.about-story__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(3rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--hairline);
}

@media (max-width: 720px) {
  .about-story__stats {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.about-story__stat-num {
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 300;
  color: var(--gold);
  letter-spacing: -0.03em;
  line-height: 1;
  display: block;
  margin-bottom: 0.5rem;
}

.about-story__stat-label {
  font-size: 0.75rem;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.6);
  line-height: 1.3;
}

.about-cta {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--paper-gilt);
  border-top: 1px solid var(--hairline);
  text-align: center;
}

.about-cta h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

.about-cta p {
  font-size: 1.0625rem;
  color: rgba(10, 10, 10, 0.7);
  max-width: 44ch;
  margin: 0 auto 2rem;
}

.about-cta__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  justify-content: center;
  margin-bottom: 1rem;
}

.about-cta__links a {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  transition: color 0.25s ease;
}

.about-cta__links a:hover {
  color: var(--gold-deep);
}

/* Iteration 8 — small footnote under numbered list */
.numbered-list__footnote {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  font-style: italic;
  color: rgba(10, 10, 10, 0.6);
  letter-spacing: -0.005em;
}

.section--dark .numbered-list__footnote {
  color: rgba(248, 244, 233, 0.6);
}

/* ============================================================
   Iteration 9 — Elegance pass
   ============================================================ */

/* ===== Ornament frame (corners OUTSIDE the photo, GSAP draw-in) ===== */
.ornament-frame {
  position: relative;
  padding: clamp(20px, 3vw, 36px);
  margin: clamp(-20px, -3vw, -36px); /* compensate so layout doesn't shift visibly */
  display: block;
  --ornament-color: #DAA520;
}
.ornament-frame__corner {
  position: absolute;
  width: clamp(50px, 6vw, 80px);
  height: clamp(50px, 6vw, 80px);
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}
.ornament-frame__corner svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ornament-frame__corner--tl { top: 0; left: 0; }
.ornament-frame__corner--tr { top: 0; right: 0; transform: scaleX(-1); }
.ornament-frame__corner--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.ornament-frame__corner--br { bottom: 0; right: 0; transform: scale(-1, -1); }

.ornament-frame__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden; /* clip the photo, but corners sit OUTSIDE this */
}

/* Smaller variant for cards */
.ornament-frame--sm {
  padding: clamp(12px, 2vw, 22px);
  margin: clamp(-12px, -2vw, -22px);
}
.ornament-frame--sm .ornament-frame__corner {
  width: clamp(30px, 3.5vw, 50px);
  height: clamp(30px, 3.5vw, 50px);
}

/* Section variant — for full-bleed <section> blocks: no negative margin,
   corners sit inside the section's natural padding. */
.ornament-frame--section {
  padding: 0;
  margin: 0;
}
.ornament-frame--section .ornament-frame__corner {
  width: clamp(40px, 5vw, 70px);
  height: clamp(40px, 5vw, 70px);
}

/* Dark-section override: warmer gold for contrast */
.section--dark .ornament-frame,
.ornament-frame.is-on-dark {
  --ornament-color: #F5C842;
}

/* SVG stroke + fill color via CSS variable */
.ornament-frame__corner svg path,
.ornament-frame__corner svg line {
  stroke: var(--ornament-color);
  fill: none;
}
.ornament-frame__corner svg circle {
  stroke: var(--ornament-color);
  fill: none;
}
.ornament-frame__corner svg circle.ornament-dot,
.ornament-frame__corner svg path.ornament-leaf {
  fill: var(--ornament-color);
  stroke: none;
}

/* Hero carousel: inner takes the aspect-ratio + slide positioning context */
.hero--split__media.ornament-frame {
  /* clear the old aspect-ratio so it lives on the inner */
  aspect-ratio: auto;
  max-height: none;
  overflow: visible;
  background: transparent;
}
.hero--split__media .ornament-frame__inner {
  aspect-ratio: 4 / 5;
  max-height: 720px;
  background: var(--ink);
}
@media (max-width: 960px) {
  .hero--split__media .ornament-frame__inner {
    aspect-ratio: 4 / 3;
  }
}

/* ===== Iteration 9: numbered list with descriptions ===== */
/* Override iteration 6/8 numbered-list to a single-column editorial table */
.numbered-list {
  list-style: none;
  display: block;
  grid-template-columns: none;
  margin: 0;
  padding: 0;
  border-top: none;
}

.numbered-list .numbered-list__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: baseline;
  padding: clamp(1.25rem, 2.5vw, 2rem) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: none;
  border-right: none !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.numbered-list .numbered-list__item:first-child {
  border-top: none;
}

.numbered-list__detail {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.numbered-list__desc {
  display: block;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  color: var(--ink);
  opacity: 0.75;
  line-height: 1.6;
  max-width: 60ch;
}

.section--dark .numbered-list__desc {
  color: var(--paper);
  opacity: 0.85;
}

.section--dark .numbered-list .numbered-list__item {
  border-top-color: rgba(245, 200, 66, 0.18);
}

/* ===== Iteration 9: editorial card category labels ===== */
.editorial-card__category {
  display: block;
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0.75rem 0 0.5rem;
}
.section--dark .editorial-card__category {
  color: var(--gold-warm);
}

/* ===== Iteration 9: extravagant editorial-card hover ===== */
.editorial-card {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.editorial-card:hover {
  transform: translateY(-4px);
}
.editorial-card .editorial-card__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: var(--paper-warm);
  position: relative;
  border: 1px solid transparent;
  transition: border-color 0.5s ease;
}
.editorial-card:hover .editorial-card__photo {
  border-color: rgba(218, 165, 32, 0.45);
}
.editorial-card .editorial-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.6s ease;
}
.editorial-card:hover .editorial-card__photo img {
  transform: scale(1.04);
  filter: saturate(1.05);
}

/* ===== Iteration 9: 3-card reviews strip =====
   Iteration 11: now lives inside the ivory unified WWB section,
   so the strip itself carries its own dark backdrop to read as
   a self-contained accent. */
.reviews-strip {
  margin-top: clamp(4rem, 7vw, 6rem);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
  background: var(--ink);
  color: var(--paper);
  border: 1px solid rgba(245, 200, 66, 0.22);
  position: relative;
}
/* When reviews-strip also carries .ornament-frame, keep its own padding
   (ornament corners are positioned relative to the strip box, not pushed out). */
.reviews-strip.ornament-frame {
  padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
  margin: clamp(4rem, 7vw, 6rem) 0 0;
  --ornament-color: #F5C842;
}
.reviews-strip__label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-warm);
  margin-bottom: 2rem;
  text-align: center;
}
.reviews-strip__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 768px) {
  .reviews-strip__grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
}
.review-card__quote {
  margin: 0 0 1.25rem;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  font-style: italic;
  color: var(--paper);
  padding: 0;
  border: none;
  position: relative;
}
.review-card__quote::before {
  content: '\201C';
  font-size: 2.5rem;
  line-height: 0;
  color: var(--gold-warm);
  font-family: Georgia, serif;
  margin-right: 0.25rem;
  vertical-align: -0.45em;
}
.review-card__attr {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
}
.review-card__name {
  font-weight: 500;
  color: var(--gold-warm);
  letter-spacing: 0.04em;
}
.review-card__role {
  color: var(--paper);
  opacity: 0.7;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.reviews-strip__more {
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
}
.reviews-strip__more a {
  color: var(--gold-warm);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* ============================================================
   Iteration 10 — Merged "Built & Recent Work" section
   ============================================================ */
.built-and-work {
  background: var(--paper);
  padding: clamp(4rem, 8vw, 7rem) 0 0;
  position: relative;
}
.built-and-work__head {
  max-width: 64rem;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  text-align: left;
}
.built-and-work__title {
  font-size: var(--type-h2);
  font-weight: 300;
  letter-spacing: -0.02em;
  margin: 1rem 0;
  text-wrap: balance;
}
.built-and-work__lede {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.78;
  max-width: 60ch;
}
.built-and-work__caveat {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--ink);
  opacity: 0.6;
  text-align: center;
}

/* Iteration 11 — Unified ivory WWB section.
   Client feedback: "I don't want to have two sections." The Recent Work
   examples now share the same ivory background as the rest of the block,
   so the entire merged section reads as one. The dark visual moment is
   preserved only in the small .reviews-strip callout that follows. */
.built-and-work__examples {
  background: var(--paper);
  color: var(--ink);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-top: 1px solid var(--hairline);
  position: relative;
}
.built-and-work__sub-head {
  max-width: 64rem;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.built-and-work__sub-title {
  font-size: var(--type-h2);
  font-weight: 300;
  letter-spacing: -0.02em;
  margin: 1rem 0 0;
  color: var(--ink);
  text-wrap: balance;
}
.built-and-work__examples .editorial-label {
  color: var(--gold);
}
.built-and-work__examples .editorial-card__title { color: var(--ink); }
.built-and-work__examples .editorial-card__meta { color: var(--ink); opacity: 0.7; }
.built-and-work__examples .ornament-frame { --ornament-color: var(--gold); }

/* ============================================================
   Iteration 14 — Service grid (replaces numbered list)
   ============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  margin: clamp(3rem, 6vw, 4.5rem) 0;
}
@media (min-width: 720px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(2rem, 3.5vw, 3rem);
  }
}
@media (min-width: 1100px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(2rem, 3vw, 2.75rem);
  background: rgba(218, 165, 32, 0.025);
  border: 1px solid rgba(218, 165, 32, 0.18);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.4s ease, background 0.4s ease, box-shadow 0.5s ease;
  opacity: 0;
  transform: translateY(20px);
  color: inherit;
  isolation: isolate;
}
.service-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  background: rgba(218, 165, 32, 0.05);
  box-shadow: 0 12px 30px rgba(10, 10, 10, 0.06);
}

.service-card__icon {
  width: clamp(72px, 7.5vw, 96px);
  height: clamp(72px, 7.5vw, 96px);
  color: var(--gold);
  display: block;
  margin-bottom: 0.75rem;
}
.service-card__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.service-card__num {
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(3rem, 5vw, 4rem);
  font-weight: 500;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.02em;
  display: block;
}

.service-card__name {
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(1.75rem, 2.6vw, 2.3rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
}

.service-card__desc {
  font-size: clamp(0.92rem, 1.05vw, 1rem);
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.78;
  margin: 0;
}

/* Reduced motion: skip transform entrance, just show visible state */
@media (prefers-reduced-motion: reduce) {
  .service-card {
    opacity: 1;
    transform: none;
  }
  .service-card__icon svg path,
  .service-card__icon svg line,
  .service-card__icon svg rect {
    stroke-dashoffset: 0 !important;
  }
  .service-card__icon svg circle,
  .service-card__icon svg ellipse {
    opacity: 1 !important;
  }
}

/* Dark-section variant of the service grid */
.section--dark .services-grid .service-card {
  background: rgba(245, 200, 66, 0.04);
  border-color: rgba(245, 200, 66, 0.22);
  color: var(--paper);
}
.section--dark .services-grid .service-card:hover {
  background: rgba(245, 200, 66, 0.08);
  border-color: var(--gold-warm);
}
.section--dark .service-card__icon { color: var(--gold-warm); }
.section--dark .service-card__num { color: var(--gold-warm); }
.section--dark .service-card__name { color: var(--paper); }
.section--dark .service-card__desc { color: var(--paper); opacity: 0.78; }

/* ============================================================
   ITERATION 15 — Project detail pages
   ============================================================ */
.project-detail__hero {
  padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(2rem, 4vw, 3rem);
}
.project-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  opacity: 0.7;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.project-detail__back:hover { opacity: 1; color: var(--gold); }

.project-detail__eyebrow {
  font-family: var(--font-mono, 'Courier New', monospace);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

.project-detail__title {
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  max-width: 22ch;
  text-wrap: balance;
}

.project-detail__photo {
  margin: 0 auto;
  max-width: 1200px;
  width: 90%;
}
.project-detail__photo .ornament-frame__inner {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}
.project-detail__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-detail__body {
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.project-detail__body-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 4rem);
}
@media (min-width: 880px) {
  .project-detail__body-grid {
    grid-template-columns: 1.3fr 1fr;
  }
}
.project-detail__narrative p {
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  line-height: 1.75;
  margin: 0 0 1.5rem;
  color: var(--ink);
  opacity: 0.85;
}

.project-detail__sidebar {
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  background: rgba(218, 165, 32, 0.04);
  border: 1px solid rgba(218, 165, 32, 0.18);
  align-self: start;
  position: sticky;
  top: 100px;
}
.project-detail__sidebar-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0 0 1rem;
  color: var(--ink);
}
.project-detail__materials {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.project-detail__materials li {
  padding-left: 1.25rem;
  position: relative;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.85;
}
.project-detail__materials li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}

.project-nav {
  padding: clamp(3rem, 5vw, 4rem) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.project-nav__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2rem);
}
@media (min-width: 720px) {
  .project-nav__grid { grid-template-columns: 1fr 1fr; }
}
.project-nav__link {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  text-decoration: none;
  color: var(--ink);
  border: 1px solid rgba(218, 165, 32, 0.18);
  background: rgba(218, 165, 32, 0.02);
  transition: all 0.3s ease;
}
.project-nav__link:hover {
  background: rgba(218, 165, 32, 0.06);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.project-nav__link--next { text-align: right; }
.project-nav__direction {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.project-nav__title {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}

/* =================================================================
   ITERATION 16 — Google Business Profile review screenshots
   ================================================================= */
.gbp-reviews {
  padding: clamp(4rem, 7vw, 6rem) 0;
  background: var(--paper);
  border-top: 1px solid var(--hairline);
}
.gbp-reviews__head {
  max-width: 64rem;
  margin: 0 auto clamp(3rem, 5vw, 4rem);
  text-align: center;
}
.gbp-reviews__title {
  font-family: var(--font-serif);
  font-size: var(--type-h2);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 1rem 0;
  text-wrap: balance;
}
.gbp-reviews__lede {
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  color: var(--ink);
  opacity: 0.75;
  max-width: 56ch;
  margin: 0 auto;
}
.gbp-reviews__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 3.5vw, 3rem);
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
@media (min-width: 720px) {
  .gbp-reviews__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .gbp-reviews__grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}
.gbp-review-card {
  display: block;
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gbp-review-card:hover {
  transform: translateY(-4px);
}
.gbp-review-card .ornament-frame__inner {
  /* Iter 22: removed forced aspect-ratio + object-fit cover. Reviews are
     Google screenshots with varying aspect — let them render natural to
     preserve full reviewer name + star rating + body text. */
  position: relative;
  overflow: hidden;
  background: var(--paper-gilt);
  padding: clamp(0.75rem, 1.5vw, 1rem);
}
.gbp-review-card img {
  width: 100%;
  height: auto;
  display: block;
}
.gbp-reviews__more {
  text-align: center;
  margin: 0;
}
.gbp-reviews__more a {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}
.gbp-reviews__more a:hover { color: var(--gold-warm); }

/* =================================================================
   ITERATION 16 — Big project see-more CTA
   ================================================================= */
.project-see-more {
  padding: clamp(5rem, 9vw, 8rem) 0;
  background: var(--paper-gilt);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  text-align: center;
}
.project-see-more__inner {
  max-width: 760px;
  margin: 0 auto;
}
.project-see-more__title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}
.project-see-more__lede {
  font-size: clamp(1.1rem, 1.3vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.78;
  max-width: 52ch;
  margin: 0 auto 2.5rem;
}
.project-see-more__btn {
  padding: 1.2rem 2.5rem;
  font-size: 1rem;
  letter-spacing: 0.18em;
}

/* Project card that the user just came from — highlight subtly */
.editorial-card.is-from-referrer {
  position: relative;
}
.editorial-card.is-from-referrer::before {
  content: 'You just viewed';
  position: absolute;
  top: -12px;
  left: 12px;
  background: var(--gold);
  color: var(--ink);
  padding: 4px 12px;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  z-index: 2;
}

/* =================================================================
   ITERATION 16 — Language toggle button (EN/ES)
   Iteration 17: upgraded to a gold-bordered pill (more visually distinct
   from nav links per client request)
   ================================================================= */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  background: rgba(218, 165, 32, 0.06);
  border: 1px solid rgba(218, 165, 32, 0.35);
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink);
  white-space: nowrap;
  margin: 0 0.5rem;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}
.lang-toggle:hover {
  background: rgba(218, 165, 32, 0.14);
  border-color: var(--gold);
  transform: translateY(-1px);
}
.lang-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.lang-toggle__en,
.lang-toggle__es {
  opacity: 0.45;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.lang-toggle__en.is-active,
.lang-toggle__es.is-active {
  opacity: 1;
  color: var(--gold);
  font-weight: 700;
}
.lang-toggle__sep {
  opacity: 0.4;
  font-weight: 400;
}


/* =====================================================================
   ITERATION 23 — COMPREHENSIVE MOBILE OPTIMIZATION
   Placed at end of file so these rules win cascade where needed.
   ===================================================================== */

/* ---------- Header / logo / nav-toggle ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: clamp(0.4rem, 0.9vw, 0.7rem) 0;
  background: rgba(247, 244, 238, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, padding 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

@media (max-width: 880px) {
  .site-header {
    padding: clamp(0.5rem, 2vw, 0.8rem) 0;
  }
}
@media (max-width: 640px) {
  .site-header {
    padding: 0.5rem 0;
  }
}

/* Logo scales nicely on mobile, no scroll-shrink (already small) */
@media (max-width: 880px) {
  .site-header__logo {
    height: 64px;
    max-width: 80px;
  }
  .site-header.is-scrolled .site-header__logo {
    height: 56px;
  }
}
@media (max-width: 480px) {
  .site-header__logo {
    height: 52px;
    max-width: 64px;
  }
  .site-header.is-scrolled .site-header__logo {
    height: 48px;
  }
}

/* Hamburger — 48px tap target, 24px lines */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.75rem;
  width: 48px;
  height: 48px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  z-index: 101;
  position: relative;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav-toggle {
    display: flex;
  }
}

/* Full-screen slide-in nav drawer — replaces legacy slide-down */
@media (max-width: 880px) {
  .nav {
    position: fixed;
    inset: 0;
    background: var(--paper);
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    padding: 5rem 2rem 3rem;
    z-index: 99;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease, visibility 0.3s ease;
    overflow-y: auto;
    pointer-events: none;
    border-bottom: none;
    flex-wrap: nowrap;
    white-space: normal;
    top: 0;
  }
  .nav.is-open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav__link {
    font-size: clamp(1.5rem, 5vw, 2.25rem);
    font-family: var(--font-serif, 'Cinzel', Georgia, serif);
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 0.75rem 0;
    color: var(--ink) !important;
    text-transform: none;
  }
  .nav__link::after {
    height: 2px;
  }
  .header-cta {
    display: inline-flex !important;
    margin-top: 1rem;
    padding: 1rem 2.25rem;
    font-size: 0.9rem;
    background: var(--gold);
    color: var(--ink);
    border-color: var(--gold);
  }
  .lang-toggle {
    margin: 0.5rem 0;
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
  }
}

/* Lock body scroll when drawer is open */
body.nav-open {
  overflow: hidden;
}

/* Hide the legacy .mobile-drawer aside — iter 23 uses .nav as the drawer */
.mobile-drawer,
.mobile-drawer-backdrop {
  display: none !important;
}

/* ---------- Hero stacking on mobile ---------- */
@media (max-width: 960px) {
  .hero--split__container {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 2.5rem);
  }
  .hero--split__copy {
    order: 0;
    text-align: left;
  }
  .hero--split__media {
    order: 1;
    aspect-ratio: 4/3;
  }
}

@media (max-width: 640px) {
  .hero--split {
    padding: clamp(5rem, 14vw, 7rem) 0 clamp(2.5rem, 6vw, 4rem);
  }
  .hero--split__copy .hero__headline,
  .hero__headline {
    font-size: clamp(2.25rem, 9vw, 3.5rem);
    line-height: 1.1;
  }
  .hero--split__copy .hero__sub,
  .hero__sub {
    font-size: clamp(1rem, 4vw, 1.15rem);
  }
  .hero__ctas {
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
  }
  .hero__ctas .btn {
    width: 100%;
    justify-content: center;
    padding: 1rem 1.5rem;
  }
  .hero__trust {
    font-size: 0.7rem;
  }
}

/* ---------- Service card grid stacking ---------- */
@media (max-width: 720px) {
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
  }
  .service-card {
    padding: 1.5rem;
  }
  .service-card__icon {
    width: 64px !important;
    height: 64px !important;
  }
  .service-card__num {
    font-size: 2.25rem !important;
  }
  .service-card__name {
    font-size: 1.4rem !important;
  }
  .service-card__desc {
    font-size: 0.95rem;
  }
}

/* ---------- Recent Work + Projects + Editorial grids ---------- */
@media (max-width: 880px) {
  .recent-work__grid,
  .projects-grid,
  [data-editorial-grid] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }
  .editorial-card__photo {
    aspect-ratio: 4/3;
  }
  .editorial-card__title {
    font-size: clamp(1.1rem, 4vw, 1.3rem);
  }
}

/* ---------- Reviews + GBP reviews ---------- */
@media (max-width: 720px) {
  .reviews-strip__grid {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
  .review-card__quote {
    font-size: 1.05rem;
  }
  .gbp-reviews__grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
    max-width: 100%;
  }
  .gbp-review-card .ornament-frame__inner {
    padding: 0.75rem;
  }
}

/* ---------- Process strip ---------- */
@media (max-width: 720px) {
  .process-strip__grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
  }
  .process-strip__step {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
  }
  .process-strip__num {
    font-size: 2rem !important;
    flex-shrink: 0;
  }
}

/* ---------- Contact section + form ---------- */
@media (max-width: 880px) {
  .contact-section__inner {
    grid-template-columns: 1fr !important;
    gap: 2.5rem;
  }
  .contact-section__headline {
    font-size: clamp(2rem, 8vw, 3.5rem) !important;
  }
  .contact-section__meta {
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
  }
}
@media (max-width: 640px) {
  .enquiry-form {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  .enquiry-form input,
  .enquiry-form select,
  .enquiry-form textarea,
  .enquiry-form__field input,
  .enquiry-form__field select,
  .enquiry-form__field textarea {
    font-size: 16px !important; /* iOS won't zoom on focus if >=16px */
    padding: 0.85rem 0.5rem !important;
    min-height: 48px;
  }
  .enquiry-form textarea,
  .enquiry-form__field textarea {
    min-height: 120px;
  }
  .enquiry-form button[type="submit"],
  .enquiry-form__submit {
    width: 100%;
    min-height: 52px;
    font-size: 1rem;
  }
}

/* ---------- Project detail page ---------- */
@media (max-width: 880px) {
  .project-detail__body-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
  .project-detail__sidebar {
    position: static !important;
    top: auto !important;
  }
  .project-detail__title {
    font-size: clamp(2rem, 8vw, 3rem) !important;
    max-width: 100%;
  }
  .project-nav__grid {
    grid-template-columns: 1fr !important;
  }
  .project-nav__link--next {
    text-align: left !important;
  }
}

/* ---------- Footer ---------- */
@media (max-width: 880px) {
  .site-footer__grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem;
  }
  .site-footer__logo {
    height: 100px !important;
  }
  .site-footer__brand p {
    font-size: 1.1rem !important;
  }
}
@media (max-width: 640px) {
  .site-footer {
    padding: 3rem 0 1.5rem;
  }
  .site-footer__brand-mark {
    width: 40px;
    height: 40px;
  }
  .site-footer__socials {
    flex-wrap: wrap;
  }
  .site-footer__bottom {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }
}

/* ---------- Sticky CTA (mobile positioning) ---------- */
@media (max-width: 640px) {
  .sticky-cta {
    bottom: 1rem;
    right: 1rem;
    padding: 0.75rem 1.1rem;
    font-size: 0.8rem;
  }
  .sticky-cta__label {
    display: none; /* hide hover label on mobile */
  }
}

/* ---------- Touch targets (Apple HIG 44px min) ---------- */
@media (pointer: coarse) {
  .nav__link,
  .header-cta,
  .lang-toggle,
  .btn,
  .editorial-card,
  .gbp-review-card,
  .gbp-reviews__more a,
  .reviews-strip__more a,
  .sticky-cta__pill,
  .sticky-cta,
  .project-nav__link,
  .footer-nav a,
  .nav-toggle {
    min-height: 44px;
  }
  .enquiry-form a,
  .contact-section a {
    padding-block: 0.25rem;
  }
}

/* ---------- Typography mobile scaling ---------- */
@media (max-width: 640px) {
  :root {
    --type-display: clamp(2.25rem, 9vw, 3.5rem);
    --type-h1: clamp(2rem, 8vw, 3rem);
    --type-h2: clamp(1.75rem, 6.5vw, 2.5rem);
    --type-h3: clamp(1.25rem, 4.5vw, 1.6rem);
    --type-body: clamp(1rem, 4vw, 1.0625rem);
  }
  body {
    font-size: 16px;
  }
}

/* ---------- Portfolio illustration mobile ---------- */
@media (max-width: 720px) {
  .page-hero--with-art .page-hero__inner {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
    align-items: start;
  }
  .page-hero__art {
    max-width: 220px;
    margin: 0 auto;
  }
}

/* =====================================================
   ITERATION 24 — MOBILE REFINEMENT PASS
   Per Enrique feedback: drawer items too big, sections
   bleed together, service grid wasting scroll, contact
   form not clearly a form on phones.
   ===================================================== */

/* ---------- Mobile drawer: smaller, denser nav items ---------- */
@media (max-width: 880px) {
  .nav {
    gap: 0.25rem;
    padding: 4.5rem 1.5rem 2rem;
  }
  .nav__link {
    font-family: var(--font-sans, 'Montserrat', sans-serif) !important;
    font-size: 1.15rem !important;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.7rem 0;
    color: var(--ink) !important;
  }
  .header-cta {
    margin-top: 1rem;
    padding: 0.85rem 1.75rem;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    background: var(--gold) !important;
    color: var(--ink) !important;
    border-color: var(--gold) !important;
  }
  .lang-toggle {
    margin: 0.25rem 0 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.78rem;
  }
}

/* ---------- Section separators + tighter padding on phone ---------- */
@media (max-width: 880px) {
  section {
    padding-top: clamp(2.25rem, 7vw, 3.5rem);
    padding-bottom: clamp(2.25rem, 7vw, 3.5rem);
  }
  /* Visible hairline between sections so users feel the section change */
  section + section:not(.hero):not(.section--dark) {
    border-top: 1px solid rgba(242, 194, 46, 0.18);
  }
  /* Dark sections get gold hairline above for clear hand-off */
  section.section--dark {
    border-top: 1px solid rgba(242, 194, 46, 0.35);
  }
}

/* ---------- Service grid: 3-col compact on phone ---------- */
@media (max-width: 640px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
  }
  .service-card {
    padding: 0.85rem 0.5rem !important;
    text-align: center;
    border-width: 1px;
  }
  .service-card__icon {
    width: 38px !important;
    height: 38px !important;
    margin: 0 auto 0.5rem !important;
  }
  .service-card__num {
    font-size: 1.1rem !important;
    margin-bottom: 0.15rem;
  }
  .service-card__name {
    font-size: 0.72rem !important;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
  }
  .service-card__desc {
    display: none !important; /* hide on phone, keep cards tappable + scannable */
  }
}

/* ---------- Recent Work: more prominence on phone ---------- */
@media (max-width: 880px) {
  .recent-work__head {
    margin-bottom: 1.75rem;
  }
  .recent-work__title {
    font-size: clamp(2rem, 8vw, 2.75rem) !important;
    line-height: 1.05 !important;
  }
  .editorial-card {
    margin-bottom: 0.5rem;
  }
  .editorial-card__photo {
    aspect-ratio: 4/3;
    margin-bottom: 0.9rem;
  }
  .editorial-card__category {
    font-size: 0.65rem !important;
    margin-bottom: 0.3rem;
  }
  .editorial-card__title {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    line-height: 1.3;
  }
  .editorial-card__meta {
    font-size: 0.75rem;
  }
}

/* ---------- Contact meta blocks: 2-col side-by-side on phone ---------- */
@media (max-width: 880px) {
  .contact-section__meta {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
    margin-bottom: 2rem;
  }
  .contact-section__meta-block {
    padding: 0.9rem 0.85rem;
    background: rgba(242, 194, 46, 0.05);
    border: 1px solid rgba(242, 194, 46, 0.18);
    border-radius: 6px;
  }
  .contact-section__meta-block h4 {
    font-size: 0.65rem !important;
    letter-spacing: 0.12em;
    margin-bottom: 0.25rem !important;
    color: var(--gold);
  }
  .contact-section__meta-block a,
  .contact-section__meta-block .value {
    font-size: 0.85rem !important;
    line-height: 1.35;
    color: var(--ink);
    word-break: break-word;
  }
}

/* ---------- Contact form: card treatment, clear form vibe on phone ---------- */
@media (max-width: 880px) {
  /* Wrap the form to look like a card with clear borders */
  .enquiry-form {
    background: var(--paper);
    border: 1px solid rgba(242, 194, 46, 0.35);
    padding: 1.5rem 1.25rem !important;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(17, 17, 17, 0.04);
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  /* Form headline above the inputs */
  .enquiry-form::before {
    content: "Tell us about your project";
    display: block;
    font-family: var(--font-serif, 'Cinzel', Georgia, serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.25rem;
  }
  /* Each field gets clear vertical room */
  .enquiry-form__row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }
  .enquiry-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }
  /* Field labels: small caps gold, very visible */
  .enquiry-form label {
    display: block;
    font-size: 0.68rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--gold) !important;
    font-weight: 600;
    margin-bottom: 0.1rem;
  }
  /* Inputs: clear borders + white bg, distinctly clickable */
  .enquiry-form input,
  .enquiry-form select,
  .enquiry-form textarea {
    background: #FFFFFF !important;
    border: 1px solid rgba(17, 17, 17, 0.22) !important;
    border-bottom: 1px solid rgba(17, 17, 17, 0.22) !important;
    border-radius: 6px !important;
    padding: 0.85rem 0.85rem !important;
    font-size: 16px !important;
    min-height: 48px;
    color: var(--ink);
    font-family: var(--font-sans, 'Montserrat', sans-serif);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .enquiry-form input:focus,
  .enquiry-form select:focus,
  .enquiry-form textarea:focus {
    outline: none;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(242, 194, 46, 0.18);
  }
  .enquiry-form textarea {
    min-height: 110px;
    resize: vertical;
  }
  /* Send Message button: bold gold pill, full-width, very clearly the CTA */
  .enquiry-form button[type="submit"],
  .enquiry-form .btn--gold {
    background: var(--gold) !important;
    color: var(--ink) !important;
    border: none !important;
    width: 100% !important;
    padding: 1.15rem !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 6px !important;
    margin-top: 0.5rem;
    box-shadow: 0 4px 14px rgba(242, 194, 46, 0.4);
    cursor: pointer;
    min-height: 56px;
    text-align: center;
  }
  .enquiry-form button[type="submit"]:hover,
  .enquiry-form button[type="submit"]:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(242, 194, 46, 0.5);
  }
  /* Privacy + subscribe line */
  .enquiry-form__privacy,
  .enquiry-form__subscribe {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--ink);
    opacity: 0.7;
  }
}

/* ---------- Contact section spacing on phone ---------- */
@media (max-width: 880px) {
  .contact-section {
    padding: clamp(2.5rem, 8vw, 4rem) 0 !important;
  }
  .contact-section__inner {
    gap: 1.75rem !important;
  }
  .contact-section__headline {
    font-size: clamp(1.85rem, 8vw, 2.75rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 1rem !important;
  }
  .contact-section__body {
    font-size: 0.95rem !important;
    margin-bottom: 1.25rem !important;
  }
  .contact-section__eyebrow {
    font-size: 0.65rem !important;
    margin-bottom: 0.5rem;
  }
}

/* ---------- Footer breathing room on phone ---------- */
@media (max-width: 880px) {
  .site-footer {
    padding: 2.5rem 0 1.5rem;
  }
  .site-footer__grid {
    gap: 1.75rem !important;
  }
}

/* =====================================================
   ITERATION 25 — Reviews-strip with Google screenshots
   GBP screenshots now live INSIDE the dark Recent Work
   section. Standalone gbp-reviews section removed.
   ===================================================== */

.reviews-strip__grid--screenshots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
}

.reviews-strip__screenshot {
  display: block;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(242, 194, 46, 0.18);
  border-radius: 6px;
  padding: 0.5rem;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.4s ease;
}

.reviews-strip__screenshot:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
}

.reviews-strip__screenshot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}

@media (max-width: 960px) {
  .reviews-strip__grid--screenshots {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}