/* ══════════════════════════════════════════════════════════════
   ALIGN CABINETRY — SITE 3
   Interior Design Meets Precision Craft · Low Country SC
   Version 3.0 — The Editorial Standard
══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;0,900;1,400;1,700&family=Raleway:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ── DESIGN TOKENS ─────────────────────────────────────── */
:root {
  /* Palette — Align Brand: Navy + Sand + Copper */
  --bg:           #F8F5F0;  /* warm white page background */
  --bg-alt:       #EDE5D7;  /* deeper warm cream for cards */
  --sand:         #D4C5A9;  /* warm sand beige — section fill */
  --sand-light:   #E8DDD0;  /* lighter sand for subtle fills */
  --dark:         #1B3A4B;  /* BRAND NAVY — headers, nav, footer */
  --dark-panel:   #142D3C;  /* deeper navy for dark panels */
  --navy-deep:    #07131c;  /* deepest navy — platform page / digital surfaces */
  --slate:        #3A5268;  /* mid-navy / slate */
  --navy-mid:     #2C4F66;  /* lighter navy for hover/accents */
  --copper:       #B07D52;
  --copper-light: #C9965E;
  --copper-dim:   rgba(176,125,82,.35);
  --text:         #2C2C2C;  /* charcoal for body text */
  --text-muted:   #6B6B6B;  /* warm gray */
  --text-light:   rgba(248,245,240,.55);

  /* Type */
  --serif: 'Playfair Display', Georgia, serif;
  --sans:  'Raleway', sans-serif;
  --mono:  'Space Mono', 'Courier New', monospace;

  /* Motion */
  --ease:      cubic-bezier(.25,.46,.45,.94);
  --ease-out:  cubic-bezier(0,.55,.45,1);
  --spring:    cubic-bezier(.34,1.56,.64,1);
  --dur:       .6s;

  /* Layout */
  --max: 1380px;
  --gutter: 72px;
}

/* ── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.8;
  overflow-x: hidden;
  cursor: none;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { cursor: none; font-family: var(--sans); border: none; background: none; }

/* ── CROSSHAIR CURSOR ──────────────────────────────────── */
#cursor {
  position: fixed; top: 0; left: 0;
  width: 56px; height: 56px;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .35s var(--spring), height .35s var(--spring);
  /* Default: light glow so copper is visible on dark backgrounds */
  filter: drop-shadow(0 0 6px rgba(247,243,236,.35)) drop-shadow(0 0 3px rgba(247,243,236,.2));
}
#cursor svg { width: 100%; height: 100%; overflow: visible; }
.cur-line {
  stroke: var(--copper); stroke-width: 1;
  transition: all .3s var(--ease);
}
.cur-mark {
  fill: none; stroke: var(--copper); stroke-width: 1.5;
  stroke-linejoin: round; stroke-linecap: round;
  transition: all .3s var(--ease);
}
#cursor-label {
  position: fixed; top: 0; left: 0;
  font-family: var(--mono); font-size: .5rem;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--dark); background: var(--copper);
  padding: 3px 8px;
  pointer-events: none; z-index: 9999;
  transform: translate(12px, 12px);
  opacity: 0; transition: opacity .2s;
  white-space: nowrap;
}
body.cur-img #cursor  { width: 90px; height: 90px; }
body.cur-img .cur-line { stroke: var(--copper-light); }
body.cur-img #cursor-label { opacity: 1; }
body.cur-link #cursor { width: 28px; height: 28px; }
body.cur-link .cur-mark { fill: rgba(176,125,82,.15); }
/* Cursor adapts to light backgrounds — switches to dark navy stroke */
body.cur-light .cur-mark { stroke: var(--dark); }
body.cur-light .cur-line { stroke: var(--dark); }
/* On light: use a subtle dark shadow instead of light glow */
body.cur-light #cursor { filter: drop-shadow(0 0 4px rgba(26,31,30,.25)); }
body.cur-light.cur-link .cur-mark { fill: rgba(26,31,30,.08); }

/* ── SCROLL PROGRESS BAR ───────────────────────────────── */
#scroll-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; background: transparent; z-index: 600;
}
#scroll-bar-fill {
  height: 100%; width: 0%;
  background: var(--copper);
  transition: width .1s linear;
}

/* ── PRELOADER ─────────────────────────────────────────── */
#preloader {
  position: fixed; inset: 0;
  background: var(--dark);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
  transition: opacity 1.2s var(--ease), visibility 1.2s;
}
.pre-inner {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 1;
}

/* ── Animated SVG mark ── */
.pre-mark-svg {
  width: 72px; height: 72px;
  overflow: visible;
  margin-bottom: 20px;
}

/* Hexagon: draws in via stroke-dashoffset */
.pre-hex {
  fill: none;
  stroke: var(--copper);
  stroke-width: 1.8;
  stroke-linejoin: round;
  /* perimeter ≈ 216px */
  stroke-dasharray: 216;
  stroke-dashoffset: 216;
  animation: pre-draw-hex .38s var(--ease-out) .05s forwards;
}

/* Interior lines */
.pre-line {
  fill: none;
  stroke: rgba(212,197,169,.65);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.pre-l2 {
  stroke-dasharray: 52; stroke-dashoffset: 52;
  animation: pre-draw-line .24s var(--ease-out) .36s forwards;
}
.pre-l1, .pre-l3 {
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: pre-draw-line .2s var(--ease-out) .46s forwards;
}

@keyframes pre-draw-hex {
  to { stroke-dashoffset: 0; }
}
@keyframes pre-draw-line {
  to { stroke-dashoffset: 0; }
}

/* ALIGN — large display serif matching the brand mark */
.pre-wordmark {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: 0;
  animation: fadeUp .3s var(--ease) .62s forwards;
}
.pre-align {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(247,243,236,.92);
  line-height: 1;
}
.pre-cabinetry {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .55em;
  text-transform: uppercase;
  color: rgba(247,243,236,.5);
}
.pre-location {
  font-family: var(--mono);
  font-size: .56rem;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(247,243,236,.25);
  margin-top: 4px;
}
.pre-name {
  font-family: var(--serif); font-size: 2.6rem; font-weight: 700;
  color: var(--bg); letter-spacing: .1em; line-height: 1;
}
.pre-sub { display: none; }
.pre-bar { display: none; }

/* ── NAV ───────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 32px var(--gutter);
  transition: padding .5s var(--ease), background .5s, backdrop-filter .5s;
}
nav.over-dark { color: var(--bg); }
nav.scrolled {
  background: rgba(232,221,208,.97);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(176,125,82,.15);
  padding: 18px var(--gutter);
}
nav.scrolled .nav-logo { color: var(--dark); }
nav.scrolled .nav-links a { color: var(--text-muted); }
nav.scrolled .nav-links a:hover { color: var(--dark); }
/* ── LOGO IMAGE — two states ── */
.nav-logo {
  display: flex; align-items: center; gap: 0;
  transition: opacity .3s;
}
.nav-logo img.nav-logo-img {
  height: 44px; width: auto;
  filter: brightness(0) invert(1);  /* white logo on dark hero */
  transition: filter .4s var(--ease);
}
nav.scrolled .nav-logo img.nav-logo-img {
  filter: none;  /* original navy color on light scrolled nav */
}
.nav-logo-text {
  font-family: var(--sans);
  font-size: 0.55rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(248,245,240,.9);
  line-height: 1.5;
  transition: color .4s var(--ease);
}
nav.scrolled .nav-logo-text { color: var(--dark); }
.nav-links { display: flex; gap: 40px; list-style: none; }
.nav-links a {
  font-size: .62rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(247,243,236,.55);
  transition: color .25s; padding-bottom: 3px;
  position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 1px; background: var(--copper);
  transition: width .3s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--bg); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-cta {
  font-size: .58rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--dark);
  background: var(--copper); padding: 10px 24px;
  transition: background .3s, transform .2s;
}
.nav-cta:hover { background: var(--copper-light); }

/* ── NEXT-SERVICE BAND (services flow between sub-pages) ─────────
   Cream bg + copper hairlines + larger title — reads clearly at a
   glance. Sits at the foot of services.html / process.html, hands
   readers off to the next chapter. */
.next-svc {
  display: block;
  background: var(--bg-alt);
  padding: 72px var(--gutter);
  text-decoration: none;
  position: relative; overflow: hidden;
  border-top: 1px solid rgba(176,125,82,.45);
  border-bottom: 1px solid rgba(176,125,82,.45);
  transition: background .35s var(--ease);
}
.next-svc::before, .next-svc::after {
  /* Inner ghost hairlines — adds the "elegant border" double-line look */
  content: '';
  position: absolute; left: var(--gutter); right: var(--gutter);
  height: 1px;
  background: rgba(176,125,82,.18);
  pointer-events: none;
}
.next-svc::before { top: 18px; }
.next-svc::after  { bottom: 18px; }
.next-svc:hover {
  background: var(--bg);
}
.next-svc-inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 44px;
  position: relative;
}
.next-svc-step {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--copper);
  white-space: nowrap;
  font-weight: 500;
}
.next-svc-label { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.next-svc-eyebrow {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .26em;
  text-transform: uppercase; color: rgba(0,0,0,.45);
}
.next-svc-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  color: var(--text); line-height: 1.05; font-weight: 400;
  letter-spacing: -.01em;
}
.next-svc-title em { font-style: italic; color: var(--copper); }
.next-svc-arrow {
  font-family: var(--serif); font-size: 2.4rem; color: var(--copper);
  line-height: 1;
  transition: transform .35s var(--ease);
}
.next-svc:hover .next-svc-arrow { transform: translateX(10px); }
@media (max-width: 700px) {
  .next-svc { padding: 48px var(--gutter); }
  .next-svc::before, .next-svc::after { display: none; }
  .next-svc-inner { grid-template-columns: 1fr auto; gap: 18px; }
  .next-svc-step { display: none; }
  .next-svc-title { font-size: clamp(1.4rem, 5vw, 2rem); }
}
/* ── NAV DROPDOWN (Services menu) ──────────────────────── */
.nav-links li.has-dropdown { position: relative; }
.nav-links li.has-dropdown > a {
  display: inline-flex; align-items: center; gap: 6px;
}
.nav-caret {
  font-size: .55rem;
  transition: transform .25s var(--ease);
  display: inline-block;
}
.has-dropdown:hover .nav-caret,
.has-dropdown:focus-within .nav-caret { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute; top: 100%; left: -16px;
  min-width: 220px;
  background: rgba(248,245,240,.97);
  backdrop-filter: blur(20px);
  border-top: 2px solid var(--copper);
  border-bottom: 1px solid rgba(176,125,82,.2);
  padding: 8px 0;
  list-style: none;
  margin: 0;
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  z-index: 600;
  box-shadow: 0 16px 40px -10px rgba(7,18,26,.18);
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown li { display: block; }
.nav-dropdown li a {
  display: block;
  padding: 11px 22px;
  font-family: var(--mono);
  font-size: .55rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text);
  transition: color .2s, background .2s, padding .2s;
}
.nav-dropdown li a:hover {
  color: var(--copper);
  background: rgba(176,125,82,.06);
  padding-left: 28px;
}
/* Dark-nav variant — over-dark hero state */
nav.over-dark:not(.scrolled) .nav-dropdown {
  background: rgba(7,18,26,.88);
  border-top-color: var(--copper);
  border-bottom-color: rgba(176,125,82,.3);
}
nav.over-dark:not(.scrolled) .nav-dropdown li a {
  color: rgba(248,245,240,.85);
}
nav.over-dark:not(.scrolled) .nav-dropdown li a:hover {
  color: var(--copper-light);
  background: rgba(176,125,82,.12);
}

/* Mobile drawer — sub-menu under Services */
.mob-nav-links li.has-submenu > a { display: block; }
.mob-nav-sub {
  list-style: none;
  margin: 4px 0 10px 14px;
  padding-left: 16px;
  border-left: 1px solid rgba(176,125,82,.3);
}
.mob-nav-sub li a {
  display: block;
  padding: 8px 0;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(247,243,236,.6);
  transition: color .2s;
}
.mob-nav-sub li a:hover { color: var(--copper); }


/* ── HERO ──────────────────────────────────────────────── */
#hero {
  height: 100vh; min-height: 740px;
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  /* Dark base so the cursor's luminance check (which walks up the
     DOM looking for a non-transparent bg) finds the hero as DARK and
     keeps the cream-shine cursor instead of flipping to dark-mode. */
  background-color: var(--dark);
}
/* ── HERO SLIDESHOW ── */
.hero-slides {
  position: absolute; inset: 0; overflow: hidden;
}
.hero-slide {
  position: absolute; inset: -6%;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(.4,0,.2,1);
  will-change: opacity, transform;
  transform: scale(1.04);
  animation: heroZoom 9s ease-in-out forwards;
}
.hero-slide.active {
  opacity: 1;
}
@keyframes heroZoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1.0);  }
}
/* Dot indicators — right side, vertically centered */
.hero-dots {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 4px; z-index: 10;
}
/* Large invisible click target (28x28) with the actual dot rendered as
   an inner pseudo-element — visually still a small copper dot but with
   a forgiving touch area for both mouse and finger. */
.hero-dot {
  width: 28px; height: 28px; padding: 0;
  border: 0; background: transparent;
  cursor: none;
  display: flex; align-items: center; justify-content: center;
}
.hero-dot::before {
  content: '';
  display: block;
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(248,245,240,.32);
  border: 1px solid rgba(248,245,240,.45);
  transition: background .3s, border-color .3s, transform .3s;
}
.hero-dot:hover::before {
  background: rgba(248,245,240,.6);
  border-color: rgba(248,245,240,.7);
}
.hero-dot.active::before {
  background: var(--copper);
  border-color: var(--copper);
  transform: scale(1.4);
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(26,31,30,.85) 0%,
    rgba(26,31,30,.45) 45%,
    rgba(26,31,30,.1) 100%
  );
}
/* Ambient mouse-tracking glow */
.hero-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle 600px at var(--mx,50%) var(--my,60%), rgba(176,125,82,.08), transparent 70%);
  pointer-events: none; transition: background .2s;
}
.hero-content {
  position: relative; z-index: 2;
  padding: 0 var(--gutter) 80px;
  max-width: var(--max); width: 100%;
}

.hero-eyebrow {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(247,243,236,.72);
  display: flex; align-items: center; gap: 16px; margin-bottom: 28px;
  opacity: 0; animation: fadeUp .7s var(--ease) 2.2s forwards;
  text-shadow: 0 1px 10px rgba(0,0,0,.8), 0 0 24px rgba(0,0,0,.6);
}
.hero-eyebrow::before { content:''; display:block; width:28px; height:1px; background:var(--copper); box-shadow: 0 0 6px rgba(0,0,0,.6); }
/* Location callout — copper to stand out */
.eyebrow-loc {
  color: var(--copper-light);
  font-size: .68rem; letter-spacing: .26em;
  text-shadow: 0 1px 12px rgba(0,0,0,.95), 0 0 18px rgba(0,0,0,.65);
  font-style: normal;
  font-weight: 600;
}
.hero-h1 {
  font-family: var(--serif);
  font-size: clamp(3.5rem, 6.5vw, 7.2rem);
  font-weight: 400; line-height: 1.02; color: var(--bg);
  margin-bottom: 28px; letter-spacing: -.01em;
}
.hero-h1 .line { display: block; overflow: hidden; }
.hero-h1 .line span {
  display: block; transform: translateY(110%);
  animation: slideUp 1s var(--ease-out) forwards;
}
.hero-h1 em { font-style: italic; color: var(--copper-light); }
.hero-meta {
  display: flex; align-items: center; gap: 40px;
  opacity: 0; animation: fadeUp .7s var(--ease) 2.8s forwards;
}
.hero-sub {
  font-size: .88rem; font-weight: 300;
  color: rgba(247,243,236,.78); max-width: 380px; line-height: 2;
  text-shadow: 0 1px 12px rgba(0,0,0,.6);
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }
.hero-scroll {
  position: absolute; right: var(--gutter); bottom: 48px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  opacity: 0; animation: fadeUp .6s var(--ease) 3.2s forwards;
}
.hero-scroll-line {
  width: 1px; height: 0;
  background: linear-gradient(to bottom, var(--copper), transparent);
  animation: growBar .9s var(--ease) 3.4s forwards;
}
.hero-scroll span {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(247,243,236,.6);
  writing-mode: vertical-rl;
}

/* ── BUTTONS ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: .62rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  padding: 14px 32px; position: relative; overflow: hidden;
  transition: color .3s, transform .2s var(--ease);
}
.btn span { position: relative; z-index: 1; }
.btn-copper { background: var(--copper); color: var(--dark); }
.btn-copper::before {
  content: ''; position: absolute; inset: 0;
  background: var(--copper-light);
  transform: translateX(-100%); transition: transform .4s var(--ease);
}
.btn-copper:hover::before { transform: none; }
.btn-ghost-light { border: 1px solid rgba(247,243,236,.3); color: var(--bg); }
.btn-ghost-light:hover { border-color: var(--copper); color: var(--copper-light); }
.btn-ghost-dark { border: 1px solid rgba(26,31,30,.2); color: var(--text); }
.btn-ghost-dark:hover { border-color: var(--copper); color: var(--copper); }
.btn-text {
  color: var(--copper); padding: 0;
  font-size: .62rem; letter-spacing: .18em;
}
.btn-text::after { content: ' →'; transition: letter-spacing .2s; }
.btn-text:hover::after { letter-spacing: .3em; }

/* ── BEFORE / AFTER TOGGLE ─────────────────────────────── */
.ba-toggle {
  display: inline-flex; gap: 0; border-radius: 2px; overflow: hidden;
  margin-top: 28px; align-self: flex-start;
  border: 1px solid rgba(26,31,30,.15);
}
.ba-btn {
  font-family: var(--mono); font-size: .48rem; letter-spacing: .2em;
  text-transform: uppercase; padding: 9px 22px;
  background: transparent; color: var(--text-muted);
  border: none; cursor: pointer;
  transition: background .25s, color .25s;
}
.ba-btn + .ba-btn { border-left: 1px solid rgba(26,31,30,.15); }
.ba-btn.active { background: var(--dark); color: var(--bg); }
.ba-placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(20,45,60,.85); opacity: 0; transition: opacity .4s; pointer-events: none;
}
.ba-placeholder.visible { opacity: 1; }
.ba-placeholder span {
  font-family: var(--mono); font-size: .52rem; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(248,245,240,.45);
}

/* ── SERVICE TIERS ─────────────────────────────────────── */
.tiers-section { background: var(--bg); }
.tiers-header { text-align: center; max-width: 640px; margin: 0 auto 72px; }
.tiers-sub { margin-top: 20px; text-align: center; max-width: 520px; margin-left: auto; margin-right: auto; }
.tier-body { padding: 36px 32px 40px; text-align: left; display: flex; flex-direction: column; }
.tier-label { font-family: var(--mono); font-size: .5rem; letter-spacing: .25em; text-transform: uppercase; color: var(--copper); margin-bottom: 10px; text-align: left; }
.tiers-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  align-items: stretch;
}
.tier-card {
  border: 1px solid rgba(176,125,82,.2); border-radius: 2px;
  overflow: hidden; background: var(--bg);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease), border-color .4s;
  /* Flex column so .tier-body can fill remaining height; combined with
     .tier-features { flex: 1 } below, this pushes the CTA to a uniform
     bottom across all 3 cards. */
  display: flex;
  flex-direction: column;
}
.tier-body { flex: 1; }
.tier-card:hover {
  box-shadow: 0 16px 56px rgba(27,58,75,.1);
  transform: translateY(-4px);
  border-color: rgba(176,125,82,.45);
}
.tier-card--featured {
  position: relative;
}
/* Subtle "Most Popular" marker — doesn't dominate. Sits top-left so it
   doesn't collide with the "click to enlarge" hint (top-right). */
.tier-card--featured::before {
  content: 'Most Popular'; position: absolute; top: 14px; left: 14px;
  font-family: var(--mono); font-size: .44rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--copper);
  border: 1px solid var(--copper-dim);
  padding: 3px 8px; border-radius: 2px; z-index: 5;
  background: var(--bg);
}
.tier-img {
  height: clamp(240px, 28vw, 340px);
  background-size: cover; background-position: center;
  transition: transform .6s var(--ease), filter .35s var(--ease);
  cursor: pointer;
}
.tier-card:hover .tier-img { filter: brightness(1.04); }
.tier-card:hover .tier-img { transform: scale(1.03); }
.tier-title { font-family: var(--serif); font-size: 1.7rem; font-weight: 400; color: var(--dark); margin-bottom: 6px; line-height: 1.15; }
.tier-tag { font-family: var(--mono); font-size: .5rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 18px; }
.tier-desc { font-size: .84rem; line-height: 1.85; color: var(--text-muted); margin-bottom: 20px; }
.tier-features { list-style: none; margin-bottom: 28px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tier-features li { font-size: .78rem; color: var(--text); padding-left: 16px; position: relative; line-height: 1.5; }
.tier-features li::before { content: '—'; position: absolute; left: 0; color: var(--copper); }
.tier-cta { align-self: flex-start; }
.tiers-note {
  text-align: center; margin-top: 52px;
  font-size: .84rem; color: var(--text-muted); line-height: 1.8;
}
.tiers-note a { color: var(--copper); text-decoration: underline; text-underline-offset: 3px; }

/* ── CRAFT PILLARS ─────────────────────────────────────── */
.pillars-section { background: var(--bg-alt); }
.pillars-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(27,58,75,.1); }
/* Pillar reveal — self-contained so it can't conflict with base .reveal */
.pillar {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 1.1s var(--ease), transform 1.0s var(--ease);
}
.pillar.in {
  opacity: 1 !important;
  transform: none !important;
}
.pillar { background: var(--bg); padding: 60px 48px; position: relative; }
/* Copper top accent bar */
.pillar::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--copper), transparent 70%);
  opacity: .5;
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease);
}
.pillar.in::before { transform: scaleX(1); }
.pillar-mark { width: 36px; height: 42px; color: var(--copper); margin-bottom: 28px; opacity: .7; }
.pillar-mark svg { width: 100%; height: 100%; }
.pillar-title { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; color: var(--dark); margin-bottom: 16px; line-height: 1.25; }
.pillar-body { font-size: .84rem; line-height: 1.9; color: var(--text-muted); }
/* Mobile: collapse the 3-column pillars grid so it doesn't blow past
   the viewport (the pillar's 48px horizontal padding can't fit three
   columns under ~600px wide). */
@media (max-width: 720px) {
  .pillars-grid { grid-template-columns: 1fr; }
  .pillar { padding: 44px 28px; }
}

/* ── MARQUEE ───────────────────────────────────────────── */
.marquee-strip {
  background: var(--dark-panel);
  border-top: 1px solid rgba(176,125,82,.25);
  border-bottom: 1px solid rgba(176,125,82,.25);
  padding: 18px 0; overflow: hidden; white-space: nowrap;
  position: relative;
}
.marquee-strip::before,
.marquee-strip::after {
  content: ''; position: absolute; top: 0; width: 120px; height: 100%; z-index: 2;
  pointer-events: none;
}
.marquee-strip::before { left: 0; background: linear-gradient(to right, var(--dark-panel), transparent); }
.marquee-strip::after  { right: 0; background: linear-gradient(to left,  var(--dark-panel), transparent); }
.marquee-track {
  display: inline-flex; align-items: center;
  animation: marquee 55s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-item {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; padding: 0 28px;
  white-space: nowrap;
}
.marquee-item.m-service { color: rgba(248,245,240,.75); font-weight: 400; }
.marquee-item.m-place   { color: var(--copper); font-weight: 500; font-style: italic; letter-spacing: .12em; font-family: var(--serif); font-size: .7rem; text-transform: none; }
.marquee-item.m-tag     { color: rgba(248,245,240,.35); font-weight: 600; letter-spacing: .28em; font-size: .52rem; }
.m-sep {
  display: inline-flex; align-items: center; flex-shrink: 0;
  color: rgba(176,125,82,.45);
}
.m-sep svg { width: 12px; height: 14px; }
.m-dot { width: 3px; height: 3px; background: var(--copper); border-radius: 50%; flex-shrink: 0; }

/* ── SECTION COMMONS ───────────────────────────────────── */
.section-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section-pad    { padding-top: 120px; padding-bottom: 120px; }
.section-pad-lg { padding-top: 160px; padding-bottom: 160px; }
.section-pad-sm { padding-top: 72px;  padding-bottom: 72px; }
.copper-rule { width: 32px; height: 1px; background: var(--copper); margin-bottom: 18px; }
.eyebrow {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--copper); margin-bottom: 16px;
}
.section-h2 {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 4.5vw, 5rem);
  font-weight: 400; line-height: 1.08; color: var(--text);
  letter-spacing: -.01em;
}
.section-h2.light { color: var(--bg); }
.section-h2 em    { font-style: italic; color: var(--copper); }
.body-text { font-size: .9rem; color: var(--text-muted); line-height: 2; max-width: 500px; }
.body-text.light { color: var(--text-light); }

/* ── REVEAL ANIMATIONS ─────────────────────────────────── */
.reveal, .reveal-up, .reveal-left {
  opacity: 0; transform: translateY(36px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal-left { transform: translateX(-36px); }
.reveal.in, .reveal-up.in, .reveal-left.in { opacity: 1; transform: none; }
.d1 { transition-delay: .1s; } .d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; } .d4 { transition-delay: .4s; }
.d5 { transition-delay: .5s; } .d6 { transition-delay: .6s; }

/* ── FEATURED PROJECT STICKY STORY ─────────────────────── */
.sticky-story {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--bg-alt);
}
.story-photo-pin {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden;
}
.story-photo-pin img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform .8s var(--ease);
}
.story-text-col { padding: 80px 64px; }
.story-panel {
  min-height: 55vh; display: flex; flex-direction: column;
  justify-content: center; padding: 28px 0;
  border-bottom: 1px solid rgba(26,31,30,.08);
  opacity: .25; transform: translateX(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  position: relative; overflow: hidden;
}
.story-panel.active { opacity: 1; transform: none; }
.story-panel:last-child { border-bottom: none; }
.story-panel-num {
  font-family: var(--mono); font-size: .55rem; letter-spacing: .25em;
  color: var(--copper); margin-bottom: 20px;
}
.story-panel-title {
  font-family: var(--serif); font-size: clamp(1.8rem,2.8vw,3rem);
  font-weight: 400; color: var(--text); margin-bottom: 20px; line-height: 1.2;
}
.story-panel-body { font-size: .88rem; color: var(--text-muted); line-height: 2; max-width: 420px; }

/* ── STATS ─────────────────────────────────────────────── */
.stats-section { background: var(--dark); }
.stats-row {
  display: grid; grid-template-columns: repeat(4,1fr);
  border-top: 1px solid rgba(247,243,236,.05);
  border-left: 1px solid rgba(247,243,236,.05);
}
.stat-cell {
  border-right: 1px solid rgba(247,243,236,.05);
  border-bottom: 1px solid rgba(247,243,236,.05);
  padding: 64px 52px;
  transition: background .3s;
}
.stat-cell:hover { background: rgba(255,255,255,.025); }
.stat-n {
  font-family: var(--serif); font-size: clamp(3.5rem,5vw,6rem);
  font-weight: 700; font-style: italic; color: var(--copper);
  line-height: 1; display: block; margin-bottom: 12px;
}
.stat-l {
  font-family: var(--mono); font-size: .55rem; letter-spacing: .25em;
  text-transform: uppercase; color: rgba(247,243,236,.3);
}

/* ── PORTFOLIO TILT GRID ───────────────────────────────── */
.portfolio-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 14px; margin-top: 0;
  padding-top: 40px;
  border-top: 2px solid rgba(176,125,82,.22);
}
.p-card {
  position: relative; overflow: hidden; display: block;
  border-radius: 2px; cursor: none;
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow .5s var(--ease), transform .5s var(--ease);
}
.p-card:hover { box-shadow: 0 24px 56px rgba(27,58,75,.18); }
/* 12 cards, 4-col grid = 3 clean rows — rows 1&3 tall, row 2 shorter */
.p-card { height: 340px; }
.p-card:nth-child(n+5):nth-child(-n+8) { height: 220px; }
.p-card-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease), filter .7s;
  filter: brightness(.88);
  transform-origin: center;
}
.p-card:hover .p-card-img { filter: brightness(1); }
/* Light reflection overlay */
.p-card-shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 60%);
  opacity: 0; transition: opacity .4s, transform .4s;
}
.p-card:hover .p-card-shine { opacity: 1; }
/* Info overlay */
.p-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,31,30,.82) 0%, transparent 55%);
  opacity: 0; transition: opacity .4s var(--ease);
  display: flex; align-items: flex-end; padding: 28px;
}
.p-card:hover .p-card-overlay { opacity: 1; }
.p-card-info { transform: translateY(8px); transition: transform .4s var(--ease); }
.p-card:hover .p-card-info { transform: none; }
.p-tag {
  font-family: var(--mono); font-size: .5rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--copper-light); margin-bottom: 4px;
}
.p-title { font-family: var(--serif); font-size: 1.05rem; color: var(--bg); font-weight: 400; }
.p-location { font-size: .72rem; color: rgba(247,243,236,.5); margin-top: 2px; }

/* ── SERVICES DARK ─────────────────────────────────────── */
.services-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: rgba(255,255,255,.04);
  margin-top: 52px;
}
.svc {
  background: var(--dark); padding: 32px 28px;
  position: relative; overflow: hidden;
  transition: background .3s;
  cursor: none; /* keep custom cursor */
}
.svc *, .svc::before, .svc::after { cursor: none; }
.svc::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--copper); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.svc:hover { background: rgba(255,255,255,.03); }
.svc:hover::before { transform: scaleX(1); }
.svc-n { display: none; }
.svc-icon { width: 44px; height: 44px; border: 1px solid var(--copper-dim); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: border-color .3s, background .3s; }
.svc:hover .svc-icon { border-color: var(--copper); background: rgba(176,125,82,.06); }
.svc-icon svg { width: 20px; height: 20px; stroke: var(--copper); fill: none; stroke-width: 1.5; }
.svc-title { font-family: var(--serif); font-size: 1.15rem; font-weight: 400; color: var(--bg); margin-bottom: 10px; }
.svc-body { font-size: .78rem; color: rgba(247,243,236,.5); line-height: 1.75; }
.svc-cta-inline { color: var(--copper); text-decoration: none; transition: color .2s; }
.svc-cta-inline:hover { color: var(--copper-light); }
.svc-open { border: 1px dashed rgba(176,125,82,.18); }
/* Clickable service cards (Kitchen, Built-In, Bars, Bath, Laundry,
   Closets, Mantels) navigate to the portfolio with the matching
   filter pre-applied.  Hover reveals a copper "View Photos →" tag
   in the bottom-right; the cursor system handles the cursor state
   via the cur-link body class, applied in services.html JS. */
.svc-hover-cta {
  position: absolute;
  right: 18px; top: 16px;
  font-family: var(--mono); font-size: .56rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--copper);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  pointer-events: none;
}
.svc-clickable:hover .svc-hover-cta {
  opacity: 1; transform: translateX(0);
}

/* ── STORY PHOTO CLICK HINT ─────────────────────────────── */
.story-photo-pin { cursor: pointer; }
.story-img-click { display: block; }
.story-photo-hint {
  position: absolute; bottom: 20px; right: 20px;
  font-family: var(--mono); font-size: .44rem; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(247,243,236,.35);
  pointer-events: none;
}

/* ── LIGHTBOX PORTFOLIO LINK ─────────────────────────────── */
.lb-caption-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.lb-port-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  font-family: var(--mono); font-size: .56rem; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dark);
  background: var(--copper);
  border: 1px solid var(--copper);
  border-radius: 2px;
  text-decoration: none; white-space: nowrap;
  transition: background .2s, color .2s;
  margin-top: 4px;
}
.lb-port-link:hover {
  background: var(--copper-light);
  border-color: var(--copper-light);
}

/* ── SERVICES LIST (legacy — cleared) ───────────────────── */
/* svc-list, svc-row, svc-chip classes removed; tiles reinstated above */

/* ── PROCESS SECTION ───────────────────────────────────── */
.process-section { background: var(--bg); }
.process-items { margin-top: 80px; }
.proc-item {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(26,31,30,.1);
  opacity: 0; transform: translateY(32px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.proc-item.in { opacity: 1; transform: none; }
.proc-item:nth-child(even) > .proc-photo { order: -1; }
.proc-photo { position: relative; min-height: 440px; overflow: hidden; }
.proc-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.proc-item:hover .proc-photo img { transform: scale(1.03); }
.proc-text {
  padding: 80px 72px; display: flex; flex-direction: column; justify-content: center;
}
.proc-item:nth-child(even) .proc-text { background: var(--bg-alt); }
.proc-num {
  font-family: var(--serif); font-size: 5rem; font-weight: 700;
  font-style: italic; color: rgba(176,125,82,.1); line-height: 1; margin-bottom: 20px;
}
.proc-title {
  font-family: var(--serif); font-size: clamp(1.7rem,2.5vw,2.4rem);
  font-weight: 400; color: var(--text); margin-bottom: 16px;
}
.proc-body { font-size: .87rem; color: var(--text-muted); line-height: 2; max-width: 400px; }

/* ── PHASE 2 TEASER ────────────────────────────────────── */
.phase2-strip { background: var(--dark); overflow: hidden; }
.phase2-cards {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: rgba(255,255,255,.05); margin-top: 72px;
}
.ph-card {
  background: var(--dark); padding: 52px 44px;
  position: relative; overflow: hidden;
  transition: background .35s;
}
.ph-card:hover { background: var(--dark-panel); }
.ph-card-glow {
  position: absolute; top: -80px; right: -80px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(176,125,82,.12), transparent 70%);
  opacity: 0; transition: opacity .4s;
}
.ph-card:hover .ph-card-glow { opacity: 1; }
.ph-badge {
  display: inline-block; padding: 4px 12px;
  font-family: var(--mono); font-size: .5rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--copper);
  border: 1px solid var(--copper-dim); margin-bottom: 28px;
}
.ph-icon { font-size: 2.4rem; margin-bottom: 20px; line-height: 1; }
.ph-title { font-family: var(--serif); font-size: 1.4rem; color: var(--bg); margin-bottom: 12px; }
.ph-body { font-size: .8rem; color: rgba(247,243,236,.38); line-height: 1.9; margin-bottom: 24px; }
.ph-link {
  font-family: var(--mono); font-size: .55rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--copper);
}
.ph-link:hover { color: var(--copper-light); }

/* ── CTA BAND ──────────────────────────────────────────── */
.cta-band {
  position: relative; overflow: hidden; min-height: 540px;
  display: flex; align-items: center;
}
.cta-bg {
  position: absolute; inset: -8%;
  background-image: url('assets/images/projects/proj-01-16.png');
  background-size: cover; background-position: center;
  filter: brightness(.28) saturate(.6);
  transition: transform 8s linear;
  will-change: transform;
}
.cta-band:hover .cta-bg { transform: scale(1.06); }
.cta-content { position: relative; z-index: 2; padding: 0 var(--gutter); max-width: 740px; }

/* ── PLATFORM PAGE ─────────────────────────────────────── */
.platform-hero { background: var(--dark); padding: 180px var(--gutter) 100px; }
.platform-hero-inner { max-width: var(--max); margin: 0 auto; }

/* Configurator */
.configurator { background: var(--bg-alt); }
.config-layout {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 80px; align-items: start;
}
.config-preview {
  position: sticky; top: 120px;
  background: var(--dark); overflow: hidden;
  height: 540px; border-radius: 0;
}
.config-preview img {
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.config-preview .config-label-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(26,31,30,.9), transparent);
  padding: 24px 28px;
}
.config-current {
  font-family: var(--mono); font-size: .55rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--copper); display: block; margin-bottom: 4px;
}
.config-desc { font-size: .82rem; color: rgba(247,243,236,.6); }
.config-steps { display: flex; flex-direction: column; gap: 48px; padding: 0 0 40px; }
.config-step {}
.config-step-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--text-muted);
}
.step-num-badge {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--copper); color: var(--dark);
  font-size: .55rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.config-options { display: flex; gap: 12px; flex-wrap: wrap; }
.config-opt {
  padding: 10px 20px;
  border: 1px solid rgba(26,31,30,.15);
  font-size: .72rem; font-weight: 600; letter-spacing: .05em;
  color: var(--text-muted); background: var(--bg);
  transition: all .25s; position: relative; overflow: hidden;
}
.config-opt.selected {
  border-color: var(--copper); color: var(--dark);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--copper);
}
.config-opt:hover { border-color: var(--slate); color: var(--text); }

/* Portal mockup */
.portal-mockup {
  background: var(--dark-panel); border: 1px solid rgba(247,243,236,.06);
  overflow: hidden; margin-top: 64px;
}
.portal-header {
  background: var(--dark); padding: 18px 28px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(247,243,236,.06);
}
.portal-header-logo {
  font-family: var(--serif); font-size: .9rem; color: var(--bg);
  display: flex; align-items: center; gap: 10px;
}
.portal-nav-items { display: flex; gap: 24px; }
.portal-nav-item {
  font-family: var(--mono); font-size: .52rem; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(247,243,236,.35);
  padding: 6px 0; border-bottom: 1px solid transparent; transition: all .2s;
}
.portal-nav-item.active { color: var(--copper); border-bottom-color: var(--copper); }
.portal-body { display: grid; grid-template-columns: 260px 1fr; min-height: 520px; }
.portal-sidebar {
  background: rgba(0,0,0,.25); padding: 32px 24px;
  border-right: 1px solid rgba(247,243,236,.05);
}
.portal-project-tag {
  font-family: var(--mono); font-size: .5rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--copper); margin-bottom: 8px;
}
.portal-project-name {
  font-family: var(--serif); font-size: 1.1rem; color: var(--bg); margin-bottom: 4px;
}
.portal-project-loc { font-size: .75rem; color: rgba(247,243,236,.35); margin-bottom: 28px; }
.portal-stage-list { display: flex; flex-direction: column; gap: 0; }
.portal-stage {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid rgba(247,243,236,.04);
}
.portal-stage-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: rgba(247,243,236,.15);
}
.portal-stage.done .portal-stage-dot { background: var(--copper); }
.portal-stage.current .portal-stage-dot { background: var(--copper-light); box-shadow: 0 0 0 4px rgba(176,125,82,.2); animation: pulse 2s infinite; }
.portal-stage-label {
  font-size: .75rem; color: rgba(247,243,236,.35);
}
.portal-stage.done .portal-stage-label { color: rgba(247,243,236,.6); }
.portal-stage.current .portal-stage-label { color: var(--copper-light); font-weight: 600; }
.portal-main { padding: 32px 40px; }
.portal-section-title {
  font-family: var(--mono); font-size: .55rem; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(247,243,236,.3); margin-bottom: 20px;
}
.portal-timeline {
  display: flex; gap: 0; margin-bottom: 40px;
  border: 1px solid rgba(247,243,236,.06);
}
.portal-phase {
  flex: 1; padding: 16px 20px;
  border-right: 1px solid rgba(247,243,236,.06);
  transition: background .2s;
}
.portal-phase:last-child { border-right: none; }
.portal-phase.done { background: rgba(176,125,82,.08); }
.portal-phase.current { background: rgba(176,125,82,.15); }
.portal-phase-name {
  font-family: var(--mono); font-size: .5rem; letter-spacing: .15em;
  text-transform: uppercase;
}
.portal-phase.done .portal-phase-name { color: var(--copper-light); }
.portal-phase.current .portal-phase-name { color: var(--copper-light); }
.portal-phase:not(.done):not(.current) .portal-phase-name { color: rgba(247,243,236,.2); }
.portal-phase-date { font-size: .7rem; color: rgba(247,243,236,.3); margin-top: 4px; }
.portal-docs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 32px;
}
.portal-doc {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: rgba(247,243,236,.04);
  border: 1px solid rgba(247,243,236,.06);
  transition: background .2s;
}
.portal-doc:hover { background: rgba(247,243,236,.07); }
.portal-doc-icon { font-size: .9rem; flex-shrink: 0; }
.portal-doc-name { font-size: .72rem; color: rgba(247,243,236,.55); flex: 1; }
.portal-doc-dl {
  font-family: var(--mono); font-size: .48rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--copper);
}
.portal-payments { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.payment-card {
  padding: 16px; background: rgba(247,243,236,.03);
  border: 1px solid rgba(247,243,236,.06);
}
.payment-stage {
  font-family: var(--mono); font-size: .48rem; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(247,243,236,.3); margin-bottom: 6px;
}
.payment-amount { font-family: var(--serif); font-size: 1.2rem; color: var(--bg); font-style: italic; }
.payment-status { font-size: .7rem; margin-top: 4px; }
.payment-status.paid { color: #6BAF7A; }
.payment-status.pending { color: var(--copper-light); }
.payment-status.upcoming { color: rgba(247,243,236,.25); }

/* Quote calculator */
.quote-calc { background: var(--bg-alt); }
.quote-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.quote-form { display: flex; flex-direction: column; gap: 36px; }
.q-label {
  font-family: var(--mono); font-size: .55rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--text-muted); display: block; margin-bottom: 12px;
}
.q-options { display: flex; gap: 10px; flex-wrap: wrap; }
.q-opt {
  padding: 10px 18px; border: 1px solid rgba(26,31,30,.15);
  font-size: .78rem; font-weight: 500; color: var(--text-muted);
  background: var(--bg); transition: all .25s;
}
.q-opt.selected { border-color: var(--copper); color: var(--dark); background: rgba(176,125,82,.08); }
.q-opt:hover { border-color: var(--slate); color: var(--text); }
.q-slider { width: 100%; }
.q-slider-wrap { display: flex; align-items: center; gap: 20px; }
.q-slider input[type=range] {
  flex: 1; -webkit-appearance: none;
  height: 2px; background: rgba(26,31,30,.15);
  outline: none;
}
.q-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--copper); cursor: none;
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--copper);
}
.q-slider-val {
  font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--copper);
  min-width: 60px; text-align: right;
}
.quote-result {
  position: sticky; top: 120px;
  background: var(--dark); padding: 52px 48px;
}
.quote-result-label {
  font-family: var(--mono); font-size: .55rem; letter-spacing: .25em;
  text-transform: uppercase; color: var(--copper); margin-bottom: 28px;
}
.quote-range {
  font-family: var(--serif); font-size: clamp(2.2rem,4vw,4rem);
  font-weight: 700; font-style: italic; color: var(--bg);
  margin-bottom: 8px; transition: opacity .3s;
}
.quote-range-note { font-size: .78rem; color: rgba(247,243,236,.3); margin-bottom: 36px; line-height: 1.7; }
.quote-breakdown { border-top: 1px solid rgba(247,243,236,.08); padding-top: 24px; }
.qb-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid rgba(247,243,236,.05);
}
.qb-label { font-size: .78rem; color: rgba(247,243,236,.35); }
.qb-val { font-size: .78rem; color: rgba(247,243,236,.6); font-family: var(--mono); }

/* ── PORTFOLIO PAGE ────────────────────────────────────── */
.port-filter {
  display: flex; gap: 0; margin-bottom: 56px;
  border-bottom: 1px solid rgba(26,31,30,.1);
}
.port-btn {
  padding: 12px 28px; background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-family: var(--mono); font-size: .55rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--text-muted);
  transition: color .25s, border-color .25s;
}
.port-btn.active { color: var(--copper); border-bottom-color: var(--copper); }
.port-btn:hover { color: var(--dark); }
.port-masonry { columns: 3; column-gap: 14px; }
.port-item { break-inside: avoid; margin-bottom: 14px; position: relative; overflow: hidden; }
.port-item:nth-child(3n+1) { height: 480px; }
.port-item:nth-child(3n+2) { height: 320px; }
.port-item:nth-child(3n)   { height: 400px; }
.port-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.port-item:hover img { transform: scale(1.04); }
.port-item-info {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,31,30,.82), transparent 55%);
  opacity: 0; transition: opacity .4s;
  display: flex; align-items: flex-end; padding: 24px;
}
.port-item:hover .port-item-info { opacity: 1; }
.port-item.hidden { display: none; }

/* ── CONTACT PAGE ──────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 100px; }
.contact-info {}
.contact-detail { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.contact-detail-icon {
  width: 36px; height: 36px; border: 1px solid var(--copper-dim); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;
}
.contact-detail-icon svg { width: 14px; height: 14px; stroke: var(--copper); fill: none; stroke-width: 1.5; }
.contact-detail-text { font-size: .88rem; color: var(--text-muted); line-height: 1.7; }
.contact-detail-label {
  font-family: var(--mono); font-size: .52rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--copper); margin-bottom: 4px; display: block;
}
/* Floating label form */
.form-field { position: relative; margin-bottom: 28px; }
.form-field label {
  position: absolute; left: 0; top: 14px;
  font-size: .8rem; color: var(--text-muted); transition: all .25s;
  pointer-events: none; font-weight: 400;
}
.form-field input, .form-field textarea, .form-field select {
  width: 100%; padding: 14px 0 10px;
  border: none; border-bottom: 1px solid rgba(26,31,30,.2);
  background: none; font-size: .9rem; color: var(--text);
  font-family: var(--sans); outline: none; transition: border-color .25s;
  -webkit-appearance: none;
}
.form-field input:focus, .form-field textarea:focus { border-bottom-color: var(--copper); }
.form-field input:focus ~ label,
.form-field input.has-val ~ label,
.form-field textarea:focus ~ label,
.form-field textarea.has-val ~ label {
  top: -4px; font-size: .6rem; color: var(--copper); letter-spacing: .1em;
}
.form-field textarea { resize: none; min-height: 120px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* ── FOOTER ────────────────────────────────────────────── */
/* ── FOOTER ─────────────────────────────────────────────
   Editorial close to the page — 2px copper bookend at the top, the
   same vocabulary as the rest of the site (diamond ornament, mono
   tag heads, italic-em copper accents, copper hover state). */
footer {
  background: var(--dark);
  border-top: 2px solid var(--copper);
  position: relative;
}
/* Centered diamond ornament at the top edge — a chapter close that
   matches the diamonds breaking the borders between process stages. */
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid var(--copper);
  background: var(--dark);
  z-index: 1;
}
footer::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 4px; height: 4px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--copper);
  z-index: 2;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 48px;
  padding: 60px var(--gutter) 40px;
  max-width: var(--max); margin: 0 auto;
}
.footer-brand-logo {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
  font-family: var(--serif); font-weight: 400;
  font-size: 1.15rem; letter-spacing: .04em; color: var(--bg);
}
.footer-brand-logo img { height: 24px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
.footer-tagline {
  font-family: var(--serif);
  font-size: .95rem;
  color: rgba(247, 243, 236, .55);
  line-height: 1.6;
  margin-bottom: 18px;
  max-width: 260px;
}
.footer-tagline em { font-style: italic; color: var(--copper); }
.footer-meta {
  font-family: var(--mono); font-size: .54rem;
  letter-spacing: .25em; text-transform: uppercase;
  color: rgba(176, 125, 82, .55);
  margin: 0 0 4px;
  line-height: 1.65;
}
.footer-cta {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 16px;
  padding: 10px 20px;
  border: 1px solid var(--copper);
  font-family: var(--mono); font-size: .56rem;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--copper);
  text-decoration: none;
  transition: background .3s var(--ease), color .3s var(--ease), gap .25s var(--ease);
}
.footer-cta:hover {
  background: var(--copper);
  color: var(--bg);
  gap: 18px;
}
.footer-cta-arrow { font-family: var(--mono); }

.footer-col-head {
  font-family: var(--mono); font-size: .54rem;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--copper); margin-bottom: 16px;
  position: relative;
  padding-left: 16px;
}
.footer-col-head::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 6px; height: 6px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--copper);
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 9px; }
.footer-links a {
  font-size: .85rem;
  color: rgba(247, 243, 236, .55);
  text-decoration: none;
  transition: color .25s var(--ease), padding-left .25s var(--ease);
  position: relative;
  display: inline-block;
}
.footer-links a:hover {
  color: var(--copper);
  padding-left: 6px;
}
.footer-bottom {
  border-top: 1px solid rgba(176, 125, 82, .22);
  padding: 16px var(--gutter); max-width: var(--max); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-copy {
  font-family: var(--mono); font-size: .56rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(247, 243, 236, .35);
}
.footer-copy a {
  color: rgba(176, 125, 82, .65);
  text-decoration: none;
  border-bottom: 1px solid rgba(176, 125, 82, .35);
  padding-bottom: 1px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.footer-copy a:hover {
  color: var(--copper);
  border-bottom-color: var(--copper);
}

/* ── PAGE HERO INNER PAGES ─────────────────────────────── */
.page-hero { background: var(--dark); padding: 200px var(--gutter) 120px; position: relative; overflow: hidden; }
.page-hero-inner { max-width: var(--max); margin: 0 auto; position: relative; z-index: 2; }
.page-hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #081824, var(--dark) 65%); }
.page-hero-title {
  font-family: var(--serif); font-size: clamp(4rem,8vw,9rem);
  font-weight: 400; color: var(--bg); line-height: .95; letter-spacing: -.02em;
}
.page-hero-sub { font-size: .92rem; color: rgba(247,243,236,.4); margin-top: 28px; max-width: 460px; line-height: 2; }
.page-hero-deco {
  position: absolute; right: var(--gutter); bottom: 24px;
  font-family: var(--serif); font-size: 18rem; font-weight: 700;
  color: rgba(255,255,255,.02); line-height: 1; pointer-events: none;
}

/* ── PORTFOLIO GRID CARD SIZING (responsive override) ── */
.portfolio-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 14px; margin-top: 56px;
}
.p-card {
  position: relative; overflow: hidden; display: block;
  transform-style: preserve-3d; will-change: transform;
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
  background: var(--dark);
}
.p-card-img { width: 100%; height: 100%; background-size: cover; background-position: center; transition: filter .7s; filter: brightness(.88); }
.p-card:hover .p-card-img { filter: brightness(1); }
.p-card-shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 60%); opacity: 0; transition: opacity .4s; }
.p-card:hover .p-card-shine { opacity: 1; }
.p-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,31,30,.82) 0%, transparent 55%); opacity: 0; transition: opacity .4s var(--ease); display: flex; align-items: flex-end; padding: 28px; }
.p-card:hover .p-card-overlay { opacity: 1; }
.p-card-info { transform: translateY(8px); transition: transform .4s var(--ease); }
.p-card:hover .p-card-info { transform: none; }
.p-tag { font-family: var(--mono); font-size: .5rem; letter-spacing: .22em; text-transform: uppercase; color: var(--copper-light); margin-bottom: 4px; }
.p-title { font-family: var(--serif); font-size: 1.05rem; color: var(--bg); font-weight: 400; }
.p-location { font-size: .72rem; color: rgba(247,243,236,.5); margin-top: 2px; }

/* ── STATS STRIP (index page) ──────────────────────────── */
.stats-section { background: var(--dark); }
.stats-row { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(247,243,236,.05); border-left: 1px solid rgba(247,243,236,.05); }
.stat-cell { border-right: 1px solid rgba(247,243,236,.05); border-bottom: 1px solid rgba(247,243,236,.05); padding: 64px 52px; transition: background .3s; }
.stat-cell:hover { background: rgba(255,255,255,.025); }
.stat-n { font-family: var(--serif); font-size: clamp(3.5rem,5vw,6rem); font-weight: 700; font-style: italic; color: var(--copper); line-height: 1; display: block; margin-bottom: 12px; }
.stat-l { font-family: var(--mono); font-size: .55rem; letter-spacing: .25em; text-transform: uppercase; color: rgba(247,243,236,.3); }

/* ── SERVICES SECTION bg (dark) ─────────────────────────── */
.services-section { background: var(--dark); }
/* Override generic .section-pad on services rooms grid for tighter */
.services-section.section-pad { padding-top: 56px; padding-bottom: 64px; }
.services-section .services-grid { margin-top: 32px; }
.services-section .svc { padding: 22px 22px 24px; }
.services-section .svc-icon { width: 36px; height: 36px; margin-bottom: 14px; }
.services-section .svc-icon svg { width: 16px; height: 16px; }
.services-section .svc-title { font-size: 1rem; margin-bottom: 8px; }
.services-section .svc-body { font-size: .74rem; line-height: 1.65; }
.services-section .section-split-header { gap: 40px !important; }
.services-section .section-h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem) !important; }

/* ── PROCESS (cream bg) ────────────────────────────────── */
.process-section { background: var(--bg); }
.process-items { margin-top: 0; }
.proc-item { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(26,31,30,.1); opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.proc-item.in { opacity: 1; transform: none; }
.proc-item:nth-child(even) > .proc-photo { order: -1; }
.proc-photo { position: relative; min-height: 440px; overflow: hidden; }
.proc-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.proc-item:hover .proc-photo img { transform: scale(1.03); }
.proc-text { padding: 80px 72px; display: flex; flex-direction: column; justify-content: center; }
.proc-item:nth-child(even) .proc-text { background: var(--bg-alt); }
.proc-num { font-family: var(--serif); font-size: 5rem; font-weight: 700; font-style: italic; color: rgba(176,125,82,.1); line-height: 1; margin-bottom: 20px; }
.proc-title { font-family: var(--serif); font-size: clamp(1.7rem,2.5vw,2.4rem); font-weight: 400; color: var(--text); margin-bottom: 16px; }
.proc-body { font-size: .87rem; color: var(--text-muted); line-height: 2; max-width: 400px; }

/* ── PHASE 2 STRIP (dark) ──────────────────────────────── */
.phase2-strip { background: var(--dark); overflow: hidden; }
.phase2-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(255,255,255,.05); margin-top: 72px; }
.ph-card { background: var(--dark); padding: 52px 44px; position: relative; overflow: hidden; transition: background .35s; display: flex; flex-direction: column; }
.ph-card:hover { background: var(--dark-panel); }
.ph-card-glow { position: absolute; top: -80px; right: -80px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(176,125,82,.12), transparent 70%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.ph-card:hover .ph-card-glow { opacity: 1; }
.ph-badge { display: inline-block; padding: 4px 12px; font-family: var(--mono); font-size: .5rem; letter-spacing: .15em; text-transform: uppercase; color: var(--copper); border: 1px solid var(--copper-dim); margin-bottom: 28px; align-self: flex-start; }
.ph-badge-progress { color: rgba(212,197,169,.7); border-color: rgba(212,197,169,.25); }
.ph-icon { font-size: 2.4rem; margin-bottom: 20px; line-height: 1; color: var(--copper-dim); }
.ph-title { font-family: var(--serif); font-size: 1.4rem; color: var(--bg); margin-bottom: 12px; }
.ph-body { font-size: .8rem; color: rgba(247,243,236,.38); line-height: 1.9; margin-bottom: 24px; flex: 1; }
.ph-link { font-family: var(--mono); font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; color: var(--copper); align-self: flex-start; }
.ph-link:hover { color: var(--copper-light); }

/* ── CTA BAND ──────────────────────────────────────────── */
.cta-band { position: relative; overflow: hidden; min-height: 540px; display: flex; align-items: center; }
.cta-bg { position: absolute; inset: -8%; background-image: url('assets/images/projects/proj-01-14.jpg'); background-size: cover; background-position: center; filter: brightness(.22) saturate(.5); transition: transform 8s linear; will-change: transform; }
.cta-band:hover .cta-bg { transform: scale(1.06); }
.cta-content { position: relative; z-index: 2; padding: 80px var(--gutter); max-width: 740px; }

/* ── SECTION COMMONS ────────────────────────────────────── */
.section-eyebrow { font-family: var(--mono); font-size: .58rem; letter-spacing: .3em; text-transform: uppercase; color: var(--copper); margin-bottom: 16px; }

/* ── SAND SECTION — warm beige background ───────────────── */
.section-sand {
  background: var(--sand);
}
.section-sand-light {
  background: var(--sand-light);
}
/* Use sand for process section for warmth */
.process-section { background: var(--sand-light); }

/* ── GRAIN OVERLAY UTILITY ──────────────────────────────── */
/* Add class "grain" to any positioned section for subtle film texture */
.grain { position: relative; isolation: isolate; }
.grain::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat; background-size: 200px 200px;
}
/* Dark sections get more visible grain */
.grain.grain-dark::before { opacity: .05; mix-blend-mode: soft-light; }

/* ── SECTION OVERLAYS — decorative ─────────────────────── */
/* Diagonal copper accent line */
.section-accent-line {
  position: relative;
}
.section-accent-line::after {
  content: ''; position: absolute; bottom: 0; left: var(--gutter); right: var(--gutter);
  height: 1px; background: linear-gradient(90deg, transparent, var(--copper-dim), transparent);
}
/* Sand section header rule */
.sand-rule {
  width: 48px; height: 2px; background: var(--copper); margin-bottom: 28px; display: block;
}

/* ── DESIGNERS & BUILDERS COLLAB ───────────────────────── */
.collab-section { background: var(--sand-light); padding-top: 100px !important; padding-bottom: 100px !important; }

.collab-header { max-width: 620px; margin-bottom: 72px; text-align: center; margin-left: auto; margin-right: auto; }
.collab-header .section-eyebrow { margin-bottom: 20px; }
.collab-header h2 { font-family: var(--serif); font-size: clamp(2rem,3.2vw,3rem); font-weight: 400; color: var(--text); line-height: 1.18; margin-bottom: 18px; }
.collab-header p { font-size: .88rem; color: var(--text-muted); line-height: 2; max-width: 480px; margin: 0 auto; }

.collab-split {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
  border: 1px solid rgba(176,125,82,.2);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color .4s;
}
.collab-split:hover {
  border-color: rgba(176,125,82,.38);
}

.collab-divider {
  background: linear-gradient(180deg, transparent, rgba(176,125,82,.35) 20%, rgba(176,125,82,.35) 80%, transparent);
  align-self: stretch;
}

.collab-panel {
  padding: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background .4s;
}

/* Photo strip at top of each panel */
.collab-panel-photo {
  height: 280px;
  overflow: hidden;
  flex-shrink: 0;
}
.collab-panel-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
  filter: brightness(.88);
}
.collab-panel:hover .collab-panel-photo img {
  transform: scale(1.03);
  filter: brightness(.95);
}

/* Text content below the photo */
.collab-panel-content {
  padding: 52px 52px 56px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.collab-panel-content::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.collab-panel-content { position: relative; }
.collab-panel:hover .collab-panel-content::before { transform: scaleX(1); }

.collab-panel-icon {
  width: 52px; height: 52px;
  border: 1px solid var(--copper-dim);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 32px;
  transition: border-color .3s, background .3s;
}
.collab-panel:hover .collab-panel-icon {
  border-color: var(--copper);
  background: rgba(176,125,82,.06);
}
.collab-panel-icon svg {
  width: 20px; height: 20px;
  stroke: var(--copper); fill: none; stroke-width: 1.5;
}

/* Make every panel's inner column flex so title/body/list share the same
   horizontal landmarks across the row. List grows to fill, CTA stays
   pinned to the bottom regardless of body or list length. */
.collab-panel-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.collab-panel-label {
  font-family: var(--mono);
  font-size: .55rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 12px;
  display: block;
}
.collab-panel-title {
  font-family: var(--serif);
  font-size: clamp(1.5rem,2vw,2rem);
  font-weight: 400;
  color: var(--text);
  margin-bottom: 20px;
  line-height: 1.2;
  /* Reserve space for two title lines so the body always starts at the
     same Y across all three panels. */
  min-height: 2.4em;
}
.collab-panel-body {
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.85;
  margin-bottom: 16px;
  max-width: 380px;
}

.collab-list {
  list-style: none;
  margin-bottom: 0;
}
/* Push CTA further from the list — explicit gap, replaces the
   previous flex:1 dead-space behavior. */
/* Push the CTA to the bottom of the panel content area so all 3
   "Work With Us" CTAs line up at the same Y across the row regardless
   of how long each panel's body / list is. */
.collab-list + .collab-cta {
  margin-top: auto;
  padding-top: 36px;
}
.collab-list li {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.7;
  padding: 10px 0;
  border-bottom: 1px solid rgba(26,31,30,.07);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.collab-list li::before {
  content: '';
  display: inline-block;
  width: 20px; height: 1px;
  background: var(--copper);
  margin-top: 11px;
  flex-shrink: 0;
}

.collab-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text);
  transition: color .3s;
}
.collab-cta::after {
  content: '';
  display: block;
  width: 28px; height: 1px;
  background: var(--copper);
  transition: width .35s var(--ease);
}
.collab-cta:hover { color: var(--copper); }
.collab-cta:hover::after { width: 48px; }

/* Responsive */
@media (max-width: 900px) {
  .collab-split { grid-template-columns: 1fr; }
  .collab-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(176,125,82,.35) 20%, rgba(176,125,82,.35) 80%, transparent); }
  .collab-panel-photo { height: 220px; }
  .collab-panel-content { padding: 40px 32px 44px; }
  .collab-panel-body { max-width: 100%; }
  .collab-list li { padding: 9px 0; }
}

/* ── BTN OUTLINE COPPER ─────────────────────────────── */
.btn-outline-copper {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 28px;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--copper);
  border: 1px solid var(--copper-dim);
  border-radius: 2px;
  background: transparent;
  text-decoration: none;
  transition: background .25s, border-color .25s, color .25s;
  cursor: pointer;
}
.btn-outline-copper:hover {
  background: rgba(179,134,80,.08);
  border-color: var(--copper);
  color: var(--copper);
}

/* ── LIGHTBOX ───────────────────────────────────────── */
#lb-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(8,8,8,.97);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .38s var(--ease), visibility .38s;
}
#lb-overlay.lb-open { opacity: 1; visibility: visible; }

.lb-stage {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  max-width: min(88vw, 1200px);
  width: 100%;
  padding: 0 80px;
  box-sizing: border-box;
}

.lb-img {
  width: 100%;
  max-height: 75vh;
  object-fit: contain;
  display: block;
  border-radius: 2px;
  transition: opacity .22s var(--ease);
}
.lb-img.lb-fade { opacity: 0; }

.lb-caption {
  width: 100%;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 0 0;
  border-top: 1px solid rgba(247,243,236,.1);
  margin-top: 16px;
  gap: 20px;
}
.lb-caption-left { display: flex; flex-direction: column; gap: 5px; }
.lb-tag {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--copper);
}
.lb-title {
  font-family: var(--serif); font-size: 1.45rem;
  color: rgba(247,243,236,.92); line-height: 1.2;
}
.lb-loc {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .14em;
  color: rgba(247,243,236,.42); margin-top: 2px;
}
.lb-counter {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .14em;
  color: rgba(247,243,236,.3); white-space: nowrap;
}

.lb-close {
  position: fixed; top: 22px; right: 26px;
  background: rgba(179,134,80,.12);
  border: 1px solid rgba(179,134,80,.4);
  color: var(--copper);
  width: 44px; height: 44px; border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s, color .2s;
  z-index: 9010;
}
.lb-close:hover {
  background: rgba(179,134,80,.25);
  border-color: var(--copper);
  color: var(--cream);
}

.lb-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  background: rgba(179,134,80,.12);
  border: 1px solid rgba(179,134,80,.4);
  color: var(--copper);
  width: 54px; height: 54px; border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s, color .2s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9010;
}
.lb-nav:hover {
  background: rgba(179,134,80,.28);
  border-color: var(--copper);
  color: var(--cream);
}
.lb-prev { left: 22px; }
.lb-next { right: 22px; }

/* ── KEYFRAMES ─────────────────────────────────────────── */
@keyframes slideUp    { to { transform: translateY(0); } }
@keyframes fadeUp     { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes growBar    { to { height: 48px; } }
@keyframes drawStroke { to { stroke-dashoffset: 0; } }
@keyframes marquee    { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
@keyframes pulse      { 0%,100% { box-shadow: 0 0 0 4px rgba(176,125,82,.2); } 50% { box-shadow: 0 0 0 8px rgba(176,125,82,.08); } }

/* ── SECTION DIVIDERS ──────────────────────────────────── */
.sec-rule {
  height: 40px;
  background: var(--bg);
  display: flex; align-items: center;
  padding: 0 var(--gutter);
}
.sec-rule::after {
  content: ''; display: block; flex: 1; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(176,125,82,.35) 15%, rgba(176,125,82,.35) 85%, transparent);
}
/* Background variants — match adjacent section */
.sec-rule--alt  { background: var(--bg-alt); }
.sec-rule--sand { background: var(--sand-light); }
.sec-rule--dark {
  background: var(--dark);
}
.sec-rule--dark::after {
  background: linear-gradient(90deg, transparent, rgba(247,243,236,.18) 15%, rgba(247,243,236,.18) 85%, transparent);
}
/* Navy-tinted line variant for light sections */
.sec-rule--navy::after {
  background: linear-gradient(90deg, transparent, rgba(27,58,75,.2) 15%, rgba(27,58,75,.2) 85%, transparent);
}
/* Eyebrow accent line — small copper mark before each section eyebrow */
.eyebrow::before {
  content: '';
  display: block;
  width: 28px; height: 1px;
  background: var(--copper);
  margin-bottom: 12px;
  opacity: .6;
}
.tiers-header .eyebrow::before,
.collab-header .eyebrow::before,
.shop-merged-head .eyebrow::before,
.showroom-head .eyebrow::before,
.area-head .eyebrow::before,
.team-head .eyebrow::before,
.cab-types-head .eyebrow::before,
.species-head .eyebrow::before,
.hardware-head .eyebrow::before,
.about-story-head .eyebrow::before,
.finish-head.text-center .eyebrow::before {
  margin-left: auto; margin-right: auto;
}

/* ── MOBILE NAV ────────────────────────────────────────── */
.nav-mob-btn {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 6px;
  width: 40px; height: 40px;
  background: none; border: none;
  cursor: pointer; padding: 4px; z-index: 600;
}
.nav-mob-bar {
  display: block; width: 22px; height: 1px;
  background: rgba(247,243,236,.82);
  transition: transform .3s var(--ease), opacity .3s;
  transform-origin: center;
}
nav.mob-open .nav-mob-bar:first-child { transform: translateY(3.5px) rotate(45deg); }
nav.mob-open .nav-mob-bar:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

/* Full-screen drawer
   Translucent dark wash so the page underneath still reads through;
   the menu links live inside a bordered card in the center.
   NOTE: any `transition` on opacity here was getting stuck in
   Chromium — the .open rule never won even with !important. Killed
   the transition; the drawer snap-opens/closes. */
.mob-nav {
  position: fixed; inset: 0; z-index: 550;
  background: rgba(7, 18, 26, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
}
.mob-nav.open { opacity: 1 !important; visibility: visible !important; }

.mob-nav-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 0; text-align: center;
}
.mob-nav-links {
  list-style: none; margin-bottom: 44px;
}
.mob-nav-links li { border-bottom: 1px solid rgba(247,243,236,.06); }
.mob-nav-links li:first-child { border-top: 1px solid rgba(247,243,236,.06); }
.mob-nav-links a {
  display: block;
  font-family: var(--serif); font-size: 2rem; font-weight: 400;
  color: rgba(247,243,236,.85); letter-spacing: .04em;
  padding: 18px 0;
  text-decoration: none;
  transition: color .2s;
}
.mob-nav-links a:hover { color: var(--copper); }
.mob-nav-cta { margin-bottom: 32px; }
.mob-nav-loc {
  font-family: var(--mono); font-size: .48rem; letter-spacing: .3em;
  text-transform: uppercase; color: rgba(247,243,236,.2);
}

/* ── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 1100px) {
  :root { --gutter: 40px; }
  .portfolio-grid { grid-template-columns: 1fr 1fr; }
  .p-card { height: 280px; }
  .sticky-story { grid-template-columns: 1fr; }
  .story-photo-pin { position: relative; height: 55vw; }
  .story-text-col { padding: 48px 32px; }
  .story-panel { min-height: auto; padding: 36px 0; }
  .config-layout, .quote-layout { grid-template-columns: 1fr; }
  .config-preview { position: relative; top: 0; }
  .quote-result { position: relative; top: 0; }
  /* svc-list is single-column by default — no override needed */
  .phase2-cards { grid-template-columns: 1fr 1fr; }
  .collab-panel-photo { height: 240px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .proc-item { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  :root { --gutter: 24px; }
  .nav-links, .nav-cta { display: none; }
  .nav-mob-btn { display: flex; }
  .hero-h1 { font-size: clamp(2.8rem, 10vw, 4rem); }
  .hero-dots { display: none; }
  .hero-scroll { display: none; }
  /* Tiers — stack to single column */
  .tiers-grid { grid-template-columns: 1fr; }
  /* Services — 2-col at tablet, stacks further at 480 */
  .services-grid { grid-template-columns: 1fr 1fr; }
  /* Split section headers — stack text + body vertically */
  .section-split-header { grid-template-columns: 1fr !important; gap: 20px !important; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .phase2-cards { grid-template-columns: 1fr; }
  .port-masonry { columns: 1; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 8px; }
  .portal-body { grid-template-columns: 1fr; }
  .portal-sidebar { border-right: none; border-bottom: 1px solid rgba(247,243,236,.05); }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  /* The services-section grid is the dense compact icon+title grid;
     keep it at 2 cols even on small phones (overrides the legacy
     1-col fallback below). Other pages still fall to 1-col here. */
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .lb-caption { flex-direction: column; gap: 14px; }
  .lb-stage { padding: 0 52px; }
}


/* ════════════════════════════════════════════════════════════════════
   SHOWCASE TRIO — horizontal pin-scroll, replaces .sticky-story
   Premium "museum-wall" feel: section pins on screen, 3 chapters
   translate horizontally as you scroll. No photo swapping.
   ──────────────────────────────────────────────────────────────────── */
.trio-section {
  position: relative;
  background: var(--bg-alt);
  /* Total scroll length = 3 × 100vh + buffer. Track moves through 200vw. */
  height: 320vh;
}
.trio-pin {
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.trio-track {
  display: flex;
  flex: 1;
  width: 300vw;            /* 3 panels × 100vw */
  will-change: transform;
}
.trio-panel {
  flex: 0 0 100vw;
  height: 100%;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
  padding: 90px clamp(48px, 6vw, 110px) 90px;
  max-width: none;
}
.trio-panel:nth-child(even) { grid-template-columns: 1fr 1.05fr; }
.trio-panel:nth-child(even) .trio-photo  { order: 2; }
.trio-panel:nth-child(even) .trio-copy   { order: 1; }

.trio-photo {
  position: relative;
  aspect-ratio: 4/5;
  max-height: 78vh;
  overflow: hidden;
  border: 1px solid rgba(176,125,82,.18);
  background: var(--dark);
  align-self: center;
  justify-self: stretch;
}
.trio-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.04);
  transition: transform 1.6s var(--ease);
}
.trio-panel.is-active .trio-photo img { transform: scale(1); }
.trio-photo-tag {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--mono); font-size: .5rem; letter-spacing: .25em;
  text-transform: uppercase; color: rgba(248,245,240,.85);
  padding: 6px 10px; background: rgba(7,18,26,.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(176,125,82,.35);
}

.trio-copy { display: flex; flex-direction: column; max-width: 540px; }
.trio-num {
  font-family: var(--mono); font-size: .56rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--copper);
  margin-bottom: 22px;
}
.trio-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.3rem, 4.6vw, 3.8rem);
  line-height: 1.02; letter-spacing: -.012em;
  color: var(--text); margin-bottom: 22px;
}
.trio-title em { font-style: italic; color: var(--copper); }
.trio-body {
  font-size: .92rem; color: var(--text-muted); line-height: 1.95;
  margin-bottom: 28px;
}
.trio-cta { align-self: flex-start; }

/* Progress strip at bottom of pin */
.trio-progress {
  position: absolute; bottom: 28px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 10px;
  z-index: 5;
}
.trio-progress span {
  display: block; width: 36px; height: 2px;
  background: rgba(26,31,30,.18);
  transition: background .35s var(--ease), width .35s var(--ease);
}
.trio-progress span.active {
  background: var(--copper); width: 56px;
}

/* Mobile fallback — stack panels vertically, drop the pin */
@media (max-width: 900px) {
  .trio-section { height: auto; }
  .trio-pin { position: relative; height: auto; overflow: visible; display: block; }
  .trio-track { display: block; width: 100%; transform: none !important; }
  .trio-panel {
    grid-template-columns: 1fr !important;
    gap: 28px;
    padding: 64px var(--gutter);
    height: auto;
  }
  .trio-panel:nth-child(even) .trio-photo  { order: 0; }
  .trio-panel:nth-child(even) .trio-copy   { order: 1; }
  .trio-photo { aspect-ratio: 16/11; max-height: none; }
  .trio-photo img { transform: scale(1); }
  .trio-progress { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   AREA CARDS — used on About page "Where We Work"
   ──────────────────────────────────────────────────────────────────── */
.area-band {
  background: var(--bg);
  padding: clamp(80px, 10vw, 130px) var(--gutter);
}
.area-inner { max-width: var(--max); margin: 0 auto; }
.area-head {
  text-align: center; max-width: 720px; margin: 0 auto 64px;
}
.area-head .eyebrow { color: var(--copper); margin-bottom: 14px; display: block; }
.area-head h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05;
  color: var(--text); letter-spacing: -.01em;
}
.area-head h2 em { font-style: italic; color: var(--copper); }
.area-head p {
  font-size: .92rem; color: var(--text-muted); line-height: 1.95;
  margin-top: 16px; max-width: 580px; margin-left: auto; margin-right: auto;
}

.area-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.area-card {
  background: var(--bg);
  border: 1px solid rgba(26,31,30,.08);
  overflow: hidden;
  transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.area-card:hover {
  border-color: rgba(176,125,82,.45);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -20px rgba(7,18,26,.18);
}

.area-media {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--dark);
}
.area-media video,
.area-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.area-media .placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 0 18px; text-align: center;
  background:
    linear-gradient(180deg, rgba(7,18,26,.55), rgba(7,18,26,.92)),
    var(--dark-panel);
  color: rgba(247,243,236,.85);
}
.area-media .placeholder svg {
  width: 38px; height: 38px; color: var(--copper);
}
.area-media .placeholder-tag {
  font-family: var(--mono); font-size: .5rem; letter-spacing: .25em;
  text-transform: uppercase; color: var(--copper);
  padding: 5px 10px; border: 1px solid var(--copper-dim);
}
.area-media .placeholder-line {
  font-size: .72rem; color: rgba(247,243,236,.55); line-height: 1.6;
}

.area-body { padding: 26px 24px 30px; }
.area-loc {
  font-family: var(--mono); font-size: .52rem; letter-spacing: .25em;
  text-transform: uppercase; color: var(--copper); margin-bottom: 10px;
}
.area-name {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 400;
  color: var(--text); line-height: 1.18; margin-bottom: 8px;
}
.area-name em { font-style: italic; color: var(--copper); }
.area-spec {
  font-family: var(--mono); font-size: .54rem; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(0,0,0,.5);
  margin: 14px 0 12px;
  padding-top: 12px; border-top: 1px solid rgba(176,125,82,.25);
}
.area-body p {
  font-size: .85rem; color: var(--text-muted); line-height: 1.95;
}

@media (max-width: 980px) {
  .area-grid { grid-template-columns: 1fr; gap: 20px; }
  .area-media { aspect-ratio: 16/10; }
}

/* ════════════════════════════════════════════════════════════════════
   BACK-TO-TOP — floating, copper-on-navy, scrolls page or open overlay
   ──────────────────────────────────────────────────────────────────── */
#backToTop {
  position: fixed;
  right: 28px; bottom: 28px;
  z-index: 800;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7,18,26,.86);
  color: var(--copper);
  border: 1px solid var(--copper-dim);
  backdrop-filter: blur(8px);
  cursor: none !important;
  opacity: 0; pointer-events: none;
  transform: translateY(8px);
  transition: opacity .3s var(--ease),
              transform .3s var(--ease),
              border-color .3s var(--ease),
              background-color .3s var(--ease);
}
#backToTop[data-show="true"] {
  opacity: 1; pointer-events: auto;
  transform: translateY(0);
}
#backToTop:hover {
  border-color: var(--copper);
  background: rgba(176,125,82,.18);
  color: var(--bg);
  transform: translateY(-3px);
}
#backToTop svg {
  width: 20px; height: 20px;
  stroke: currentColor; fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 700px) {
  #backToTop { right: 18px; bottom: 18px; width: 46px; height: 46px; }
  #backToTop svg { width: 18px; height: 18px; }
}



/* ════════════════════════════════════════════════════════════════════
   SHOWCASE STACK — calm vertical editorial chapters
   Static photos, alternating photo-text on desktop, stacked on mobile.
   Before/after toggle on each chapter; click photo to open lightbox.
   ──────────────────────────────────────────────────────────────────── */
.show-stack { background: var(--bg-alt); }
.show-chapter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(40px, 6vw, 100px);
  padding: clamp(56px, 7.5vw, 96px) clamp(48px, 6vw, 110px);
  max-width: 1620px;
  margin: 0 auto;
  position: relative;
}
/* Double-hairline divider between chapters — outer copper line + inner ghost */
.show-chapter + .show-chapter {
  border-top: 1px solid rgba(176,125,82,.45);
}
.show-chapter + .show-chapter::before {
  content: '';
  position: absolute; left: clamp(48px, 6vw, 110px); right: clamp(48px, 6vw, 110px);
  top: 9px; height: 1px;
  background: rgba(176,125,82,.18);
  pointer-events: none;
}
/* Small copper diamond accent dead-center on the divider */
.show-chapter + .show-chapter::after {
  content: '';
  position: absolute;
  left: 50%; top: 0;
  width: 11px; height: 11px;
  background: var(--bg-alt);
  border: 1px solid rgba(176,125,82,.55);
  transform: translate(-50%, -50%) rotate(45deg);
  pointer-events: none;
}

.show-chapter:nth-child(even) .show-photo { order: 2; }
.show-chapter:nth-child(even) .show-copy  { order: 1; }

.show-photo {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border: 1px solid rgba(176,125,82,.18);
  background: var(--dark);
  cursor: pointer;
}
.show-photo .show-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity .35s var(--ease), transform 1.6s var(--ease);
}
.show-chapter:hover .show-photo .show-img { transform: scale(1.03); }
.show-photo-tag {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--mono); font-size: .5rem; letter-spacing: .25em;
  text-transform: uppercase; color: rgba(248,245,240,.85);
  padding: 6px 10px; background: rgba(7,18,26,.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(176,125,82,.35);
  z-index: 2;
}
.show-photo-hint {
  position: absolute; bottom: 14px; right: 14px;
  font-family: var(--mono); font-size: .48rem; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(248,245,240,.6);
  padding: 5px 9px;
  background: rgba(7,18,26,.45);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(176,125,82,.3);
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s var(--ease);
  z-index: 2;
}
.show-photo:hover .show-photo-hint { opacity: 1; }

/* Before/after toggle pill — bottom-left of photo */
.show-ba-toggle {
  position: absolute; bottom: 14px; left: 14px;
  display: inline-flex; gap: 0;
  background: rgba(7,18,26,.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(176,125,82,.35);
  z-index: 3;
  padding: 0;
}
.show-ba-btn {
  font-family: var(--mono); font-size: .52rem; letter-spacing: .26em;
  text-transform: uppercase; font-weight: 500;
  color: rgba(248,245,240,.55);
  background: transparent;
  border: none;
  padding: 7px 14px;
  cursor: pointer;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.show-ba-btn:hover { color: var(--bg); }
.show-ba-btn.is-active {
  color: var(--bg);
  background: rgba(176,125,82,.32);
}

.show-copy { display: flex; flex-direction: column; max-width: 540px; }
.show-num {
  font-family: var(--mono); font-size: .56rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--copper);
  margin-bottom: 22px;
}
.show-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.04; letter-spacing: -.01em;
  color: var(--text); margin-bottom: 22px;
}
.show-title em { font-style: italic; color: var(--copper); }
.show-body {
  font-size: .92rem; color: var(--text-muted); line-height: 1.95;
  margin-bottom: 28px;
}
.show-cta { align-self: flex-start; }

@media (max-width: 900px) {
  .show-chapter {
    grid-template-columns: 1fr !important;
    padding: 48px var(--gutter);
    gap: 24px;
  }
  .show-chapter + .show-chapter::before {
    left: var(--gutter); right: var(--gutter);
  }
  .show-chapter:nth-child(even) .show-photo { order: 0; }
  .show-chapter:nth-child(even) .show-copy  { order: 1; }
  .show-photo { aspect-ratio: 16/11; }
  .show-photo-hint { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   CTA TITLE BUMP — used by every .cta-band site-wide
   Slightly larger overall, copper <em> ~10% larger again so the
   italic line reads at a glance.
   ──────────────────────────────────────────────────────────────────── */
.cta-band .section-h2 {
  font-size: clamp(3rem, 5.2vw, 5.8rem);
  letter-spacing: -.012em;
}
.cta-band .section-h2 em {
  font-size: 1.08em;
  display: inline-block;
  line-height: 1;
}

/* ════════════════════════════════════════════════════════════════════
   SERVICES-FLOW EDITORIAL HEADER — used by services.html, process.html,
   how-we-build.html. Dark navy so the existing over-dark nav stays
   readable & consistent across all pages. Editorial typography &
   integrated 3-step nav give it a "get-down-to-business" feel that
   distinguishes it from the dark image headers on portfolio/about.
   ──────────────────────────────────────────────────────────────────── */
.svc-header {
  background: var(--dark);
  padding: 150px var(--gutter) 70px;
  position: relative;
  border-bottom: 1px solid rgba(176,125,82,.32);
  overflow: hidden;
}
.svc-header::before {
  /* Subtle copper top hairline — reads as its own stratum, not part of nav */
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(to right,
              transparent 0%,
              rgba(176,125,82,.4) 30%,
              rgba(176,125,82,.4) 70%,
              transparent 100%);
}
.svc-header-inner { max-width: var(--max); margin: 0 auto; position: relative; }

/* All editorial-header child rules below are scoped to .svc-header so they
   don't collide with the existing .svc-title / .svc-tag / .svc-body classes
   used by the "What We Build" room cards on services.html. */
.svc-header .svc-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: end;
}
.svc-header .svc-tag {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--copper);
  margin-bottom: 16px;
}
.svc-header .svc-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: 1.02; letter-spacing: -.018em;
  color: var(--bg);
  margin: 0;
}
.svc-header .svc-title em { font-style: italic; color: var(--copper); }
.svc-header .svc-lede {
  font-size: .98rem; color: rgba(247,243,236,.6); line-height: 1.85;
  border-left: 1px solid rgba(176,125,82,.4);
  padding-left: 24px;
  max-width: 460px;
  margin: 0 0 6px;
}

/* Built-in step nav — shows all 3 services-flow pages, current highlighted */
.svc-stepper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 60px;
  border-top: 1px solid rgba(176,125,82,.22);
  padding-top: 24px;
}
.svc-stepper a {
  display: flex; flex-direction: column; gap: 6px;
  text-decoration: none;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .26em;
  text-transform: uppercase; color: rgba(247,243,236,.45);
  padding: 0 22px 0 0;
  border-right: 1px solid rgba(176,125,82,.16);
  transition: color .25s var(--ease);
}
.svc-stepper a:last-child { border-right: none; }
.svc-stepper a:hover { color: var(--copper); }
.svc-stepper a .svc-step-num {
  font-size: .68rem; letter-spacing: .18em; font-weight: 500;
  color: rgba(247,243,236,.65);
  transition: color .25s var(--ease);
}
.svc-stepper a:hover .svc-step-num { color: var(--copper); }
.svc-stepper a.is-current,
.svc-stepper a.is-current .svc-step-num {
  color: var(--copper);
}

@media (max-width: 900px) {
  .svc-header { padding: 130px var(--gutter) 56px; }
  .svc-header .svc-grid { grid-template-columns: 1fr; gap: 24px; }
  .svc-header .svc-lede {
    border-left: none;
    border-top: 1px solid rgba(176,125,82,.32);
    padding-left: 0; padding-top: 18px;
  }
  .svc-stepper {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-top: 18px;
  }
  .svc-stepper a {
    border-right: none;
    border-bottom: 1px solid rgba(176,125,82,.12);
    padding: 0 0 12px;
  }
  .svc-stepper a:last-child { border-bottom: none; padding-bottom: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   BRAND MARQUEE — used on services.html under the new editorial header
   Mixes brand names with wood species and hardware features.
   Single line, slow scroll, cream-on-navy, copper hairlines top+bottom.
   ──────────────────────────────────────────────────────────────────── */
.brand-marquee {
  background: var(--dark);
  border-top: 1px solid rgba(176,125,82,.22);
  border-bottom: 1px solid rgba(176,125,82,.22);
  padding: 18px 0;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}
.brand-marquee::before, .brand-marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 80px;
  pointer-events: none; z-index: 2;
}
.brand-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--dark), transparent);
}
.brand-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--dark), transparent);
}
.brand-track {
  display: inline-flex; gap: 48px; align-items: center;
  animation: brand-scroll 64s linear infinite;
  will-change: transform;
}
.brand-marquee:hover .brand-track { animation-play-state: paused; }
.brand-item {
  font-family: var(--serif); font-size: 1rem;
  color: rgba(247,243,236,.78);
  letter-spacing: .01em;
  white-space: nowrap;
  flex-shrink: 0;
}
.brand-item.is-spec {
  font-family: var(--mono); font-size: .58rem;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--copper);
}
.brand-item.is-wood {
  font-family: var(--serif); font-style: italic;
  color: rgba(247,243,236,.55);
}
.brand-sep {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--copper-dim);
  flex-shrink: 0;
}
@keyframes brand-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-track { animation: none; }
}



/* ════════════════════════════════════════════════════════════════════
   PRELOADER VARIANTS — per-page splash animations
   The base preloader (#preloader > .pre-inner > .pre-mark-svg + .pre-wordmark)
   ships with a default hex-draw + line-draw + wordmark-fade sequence.
   Each variant below overrides that flow without touching the markup.
   ──────────────────────────────────────────────────────────────────── */

/* ── PLATFORM splash — futurish, one-shot
   Deep navy + dot-grid backdrop + a copper radial glow that fades in once.
   Hex draws normally. No infinite loops — splash completes cleanly.
   IMPORTANT: do NOT override position here — the base #preloader is
   `position: fixed; inset: 0; z-index: 10000` and that's what makes the
   splash a full-viewport overlay. Pseudo-elements below use `position:
   absolute` and resolve correctly against the fixed parent. */
#preloader.pre-platform {
  background: #07131c;
  overflow: hidden;
}
#preloader.pre-platform::before {
  /* Dot-grid backdrop (same motif as the platform page hero) — static */
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(176,125,82,.18) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .4;
  pointer-events: none;
}
#preloader.pre-platform::after {
  /* Copper radial glow — fades in once, then stays */
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 640px; height: 640px;
  transform: translate(-50%, -50%) scale(.85);
  background: radial-gradient(ellipse at center,
              rgba(176,125,82,.28) 0%,
              rgba(176,125,82,.08) 38%,
              transparent 65%);
  pointer-events: none;
  opacity: 0;
  animation: pre-platform-glow-in .9s ease-out .05s forwards;
}
@keyframes pre-platform-glow-in {
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
#preloader.pre-platform .pre-inner { position: relative; z-index: 2; }
#preloader.pre-platform .pre-mark-svg {
  filter: drop-shadow(0 0 12px rgba(176,125,82,.5));
}
/* Hex uses the default draw — no infinite pulse */
#preloader.pre-platform .pre-wordmark {
  animation: fadeUp .35s var(--ease) .58s forwards;
}
#preloader.pre-platform .pre-align {
  letter-spacing: .26em;
  color: rgba(247,243,236,.96);
}
#preloader.pre-platform .pre-cabinetry {
  letter-spacing: .68em;
  color: rgba(247,243,236,.55);
}
#preloader.pre-platform .pre-location {
  color: var(--copper);
  letter-spacing: .42em;
  margin-top: 8px;
  text-shadow: 0 0 8px rgba(176,125,82,.4);
}

/* ── SERVICES-FLOW splash — iris-zoom:
   the whole hex appears at once but rotated 60° and scaled up, then
   irises in to its final position (rotation + scale settle together).
   Interior lines GROW from center (scaleY 0→1) instead of drawing
   from the bottom. Copper sweep-bar slides under the wordmark to read
   as a calibration scan. Visually distinct from the default stroke-draw. */
#preloader.pre-services .pre-hex {
  stroke-dasharray: unset;
  stroke-dashoffset: 0;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: pre-services-hex-iris .95s cubic-bezier(.22,.68,0,1.18) .15s forwards;
}
@keyframes pre-services-hex-iris {
  from { opacity: 0; transform: rotate(60deg) scale(1.45); stroke-width: .6; }
  55%  { opacity: 1; }
  to   { opacity: 1; transform: rotate(0deg)  scale(1);    stroke-width: 1.8; }
}
#preloader.pre-services .pre-line {
  stroke-dasharray: unset;
  stroke-dashoffset: 0;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
#preloader.pre-services .pre-l2 {
  animation: pre-services-line-grow .42s cubic-bezier(.22,.68,0,1.15) .82s forwards;
}
#preloader.pre-services .pre-l1 {
  animation: pre-services-line-grow .42s cubic-bezier(.22,.68,0,1.15) .98s forwards;
}
#preloader.pre-services .pre-l3 {
  animation: pre-services-line-grow .42s cubic-bezier(.22,.68,0,1.15) .98s forwards;
}
@keyframes pre-services-line-grow {
  from { opacity: 0; transform: scaleY(0); }
  to   { opacity: 1; transform: scaleY(1); }
}
#preloader.pre-services .pre-wordmark {
  animation: fadeUp .38s var(--ease) 1.4s forwards;
  position: relative;
}
/* Copper sweep-bar under the wordmark — the calibration bar */
#preloader.pre-services .pre-wordmark::after {
  content: '';
  position: absolute;
  bottom: -18px; left: 0; right: 0;
  height: 1px; margin: 0 auto;
  width: 0;
  background: linear-gradient(to right,
              transparent 0%,
              var(--copper) 35%,
              var(--copper) 65%,
              transparent 100%);
  animation: pre-services-sweep 1.2s ease-out 1.65s forwards;
}
@keyframes pre-services-sweep {
  from { width: 0; opacity: 0; }
  to   { width: 220px; opacity: 1; }
}
#preloader.pre-services .pre-location {
  color: var(--copper);
  letter-spacing: .38em;
  margin-top: 10px;
}

/* ── ABOUT splash — assembly-reverse, sped up:
   the three vertical interior lines RISE UP FIRST (translateY in),
   then the hex draws around them. Inverted sequence from default,
   tightened so the splash completes in ~1s. */
#preloader.pre-about .pre-hex {
  /* Lines first — hex draws AFTER */
  stroke-dasharray: 216;
  stroke-dashoffset: 216;
  animation: pre-draw-hex .38s var(--ease-out) .42s forwards;
}
#preloader.pre-about .pre-line {
  stroke-dasharray: unset;
  stroke-dashoffset: 0;
  transform-box: fill-box; transform-origin: center bottom;
  opacity: 0;
}
#preloader.pre-about .pre-l1 {
  animation: pre-about-line-rise .3s cubic-bezier(.22,.68,0,1.18) 0s forwards;
}
#preloader.pre-about .pre-l2 {
  animation: pre-about-line-rise .3s cubic-bezier(.22,.68,0,1.18) .09s forwards;
}
#preloader.pre-about .pre-l3 {
  animation: pre-about-line-rise .3s cubic-bezier(.22,.68,0,1.18) .18s forwards;
}
@keyframes pre-about-line-rise {
  from { opacity: 0; transform: translateY(14px) scaleY(.3); }
  to   { opacity: 1; transform: translateY(0)   scaleY(1); }
}
#preloader.pre-about .pre-wordmark {
  animation: fadeUp .3s var(--ease) .85s forwards;
}
#preloader.pre-about .pre-location {
  color: var(--copper);
  letter-spacing: .38em;
  margin-top: 6px;
  font-style: italic;
}

/* ── Contact preloader: "drafted" — the three uprights are drawn first
   (left→center→right, like a measured layout), the hex frames around
   them, and the wordmark warms in last with a copper "Let's Talk."
   On theme: architectural pacing, copper restraint, no bounce. */
#preloader.pre-contact { background: var(--dark); }

#preloader.pre-contact .pre-hex {
  fill: rgba(176, 125, 82, .06);
  stroke: var(--copper);
  stroke-width: 1.8;
  stroke-dasharray: 216;
  stroke-dashoffset: 216;
  animation: pre-contact-hex-draw .65s cubic-bezier(.4, .1, .25, 1) .58s forwards;
}
@keyframes pre-contact-hex-draw {
  to { stroke-dashoffset: 0; }
}

/* Override base line draws — staggered left-center-right, slow + measured */
#preloader.pre-contact .pre-line {
  stroke: var(--copper-light, rgba(212,197,169,.85));
  stroke-width: 1.6;
  stroke-linecap: round;
}
#preloader.pre-contact .pre-l1 {
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: pre-contact-line-draw .32s cubic-bezier(.4, .1, .25, 1) .1s forwards;
}
#preloader.pre-contact .pre-l2 {
  stroke-dasharray: 52; stroke-dashoffset: 52;
  animation: pre-contact-line-draw .36s cubic-bezier(.4, .1, .25, 1) .26s forwards;
}
#preloader.pre-contact .pre-l3 {
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: pre-contact-line-draw .32s cubic-bezier(.4, .1, .25, 1) .42s forwards;
}
@keyframes pre-contact-line-draw {
  to { stroke-dashoffset: 0; }
}

/* Wordmark settles in after the mark frames up */
#preloader.pre-contact .pre-wordmark {
  opacity: 0;
  animation: pre-contact-wordmark-in .55s ease-out 1.32s forwards;
}
@keyframes pre-contact-wordmark-in {
  from { opacity: 0; transform: translateY(8px); letter-spacing: .26em; }
  to   { opacity: 1; transform: translateY(0); letter-spacing: normal; }
}

/* "Let's Talk" location — copper-toned, italic, lightly traced */
#preloader.pre-contact .pre-location {
  color: var(--copper);
  letter-spacing: .42em;
  font-style: italic;
  margin-top: 6px;
  opacity: 0;
  animation: pre-contact-location-in .5s ease-out 1.62s forwards;
}
@keyframes pre-contact-location-in {
  to { opacity: 1; }
}

/* Soft outward "ping" ring beneath the mark — single warm pulse that
   echoes the contact theme without stealing focus from the draw. */
#preloader.pre-contact .pre-inner { position: relative; }
#preloader.pre-contact .pre-inner::before {
  content: '';
  position: absolute;
  top: 36px; /* center on hex */
  left: 50%;
  width: 72px; height: 72px;
  transform: translate(-50%, -50%) scale(.4);
  border: 1px solid var(--copper);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: pre-contact-ping 1.8s ease-out 1.0s forwards;
}
@keyframes pre-contact-ping {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  18%  { opacity: .55; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); }
}


/* ── FOOTER META LINES — quiet locations + credentials beneath the slogan */
.footer-tagline em {
  font-style: italic;
  color: var(--copper);
}
.footer-meta {
  font-family: var(--mono);
  font-size: .54rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(176,125,82,.55);
  margin: 12px 0 0;
  line-height: 1.7;
}
.footer-meta + .footer-meta { margin-top: 4px; }

/* ── CONTACT credential line — sits under the location block */
.contact-info-creds {
  font-family: var(--mono);
  font-size: .54rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--copper);
  margin-top: -28px;
  margin-bottom: 36px;
  padding-top: 8px;
  border-top: 1px solid rgba(176,125,82,.18);
  display: block;
}


/* ── BRAND LOGOS MARQUEE (how-we-build closing strip) ─────────────────
   Slow-drifting partner-logos band. All logos forced to white silhouettes
   so the strip reads as a quiet credibility line, not a sponsorship row. */
.brand-logos-strip {
  background: var(--dark);
  padding: 36px 0;
  overflow: hidden;
  position: relative;
  border-top: 1px solid rgba(176,125,82,.22);
  border-bottom: 1px solid rgba(176,125,82,.22);
  white-space: nowrap;
}
.brand-logos-strip::before, .brand-logos-strip::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 140px;
  pointer-events: none; z-index: 2;
}
.brand-logos-strip::before {
  left: 0;
  background: linear-gradient(to right, var(--dark), transparent);
}
.brand-logos-strip::after {
  right: 0;
  background: linear-gradient(to left, var(--dark), transparent);
}
.brand-logos-track {
  display: inline-flex;
  align-items: center;
  gap: 84px;
  animation: brand-logos-scroll 90s linear infinite;
  will-change: transform;
}
.brand-logos-strip:hover .brand-logos-track {
  animation-play-state: paused;
}
.brand-logo {
  height: 90px; width: auto;
  flex-shrink: 0;
  /* invert flips dark-on-white logos to white-on-black; mix-blend-mode
     lighten drops the inverted-black background against the navy strip
     so JPG logos (with solid white backgrounds) read the same as the
     transparent PNGs. */
  filter: invert(1) grayscale(.85) brightness(1.05);
  mix-blend-mode: lighten;
  opacity: .68;
  transition: opacity .35s var(--ease);
}
.brand-logo:hover { opacity: .95; }
@keyframes brand-logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-logos-track { animation: none; }
}
@media (max-width: 700px) {
  .brand-logos-strip { padding: 26px 0; }
  .brand-logos-track { gap: 56px; }
  .brand-logo { height: 64px; }
}

/* ── COMPACT CTA — closing-line variant of .cta-band ───────────────── */
.cta-band--compact { min-height: 0; }
.cta-band--compact .cta-content {
  padding: 56px var(--gutter);
  max-width: 760px;
}
.cta-band--compact .section-h2 {
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1.04;
}
.cta-band--compact .section-h2 em {
  font-size: 1.05em;
}
.cta-band--compact p {
  margin: 14px 0 22px !important;
  font-size: .85rem !important;
  max-width: 460px !important;
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE-ONLY POLISH (≤768px)
   Desktop behavior is unchanged — every rule below is scoped to the
   mobile breakpoint, applied AFTER all other styles so it consistently
   wins specificity battles.
   ══════════════════════════════════════════════════════════════════════ */

/* Hide custom cursor on touch devices AND in narrow viewports (so
   Chrome DevTools mobile emulation matches real-phone behavior). */
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
  body, button, a, .svc, .svc *, .svc::before, .svc::after {
    cursor: auto !important;
  }
  #cursor, #cursor-label { display: none !important; }
}

@media (max-width: 768px) {

  /* ── MOBILE NAV DRAWER ────────────────────────────────────────────────
     Tighter text, copper hairline accents, and a subtle hex-mark
     watermark behind the link stack. */
  .mob-nav-inner {
    position: relative;
    padding: 0 24px;
  }
  .mob-nav-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('assets/logo/mark.png') center center / 280px auto no-repeat;
    opacity: .035;
    pointer-events: none;
    z-index: 0;
  }
  .mob-nav-links { position: relative; z-index: 1; margin-bottom: 28px; }
  .mob-nav-links a {
    font-size: 1.15rem;
    padding: 14px 0;
    letter-spacing: .02em;
  }
  .mob-nav-links li { border-bottom-color: rgba(247,243,236,.04); }
  .mob-nav-links li:first-child { border-top-color: rgba(247,243,236,.04); }
  .mob-nav-cta { position: relative; z-index: 1; margin-bottom: 24px; padding: 12px 28px; font-size: .58rem; }
  .mob-nav-loc { position: relative; z-index: 1; font-size: .44rem; letter-spacing: .28em; }
  /* Mobile drawer sub-menu (Services children) — shrink to match. */
  .mob-nav-sub li a { font-size: .9rem; padding: 8px 0; }

  /* ── FOOTER — compact mobile version ─────────────────────────────────
     The desktop footer is 4-col with big copy + CTA; on mobile we
     collapse to a tight, single-column footer with just the essentials. */
  .footer-inner {
    padding: 36px var(--gutter) 24px;
    gap: 24px;
  }
  .footer-brand-logo { font-size: 1rem; margin-bottom: 10px; }
  .footer-brand-logo img { height: 20px; width: auto; }
  .footer-tagline { font-size: .82rem; line-height: 1.5; margin-bottom: 12px; max-width: 100%; }
  .footer-meta { font-size: .48rem; letter-spacing: .22em; line-height: 1.5; }
  .footer-cta { margin-top: 10px; padding: 8px 16px; font-size: .5rem; letter-spacing: .22em; }
  .footer-col-head { font-size: .48rem; letter-spacing: .24em; margin-bottom: 10px; padding-left: 14px; }
  .footer-col-head::before { width: 5px; height: 5px; }
  .footer-links li { margin-bottom: 6px; }
  .footer-links a { font-size: .78rem; }
  .footer-bottom { padding: 12px var(--gutter); gap: 6px; }
  .footer-copy { font-size: .5rem; letter-spacing: .18em; line-height: 1.65; text-align: center; }
  /* Center the brand column on mobile (no awkward left-alignment when
     it's the only column wide). */
  .footer-brand-logo { justify-content: flex-start; }

  /* ── COLLAB SECTION (services.html) — tighter on mobile ─────────────
     Photo shrinks, content padding drops, title min-height removed
     so panels don't pad themselves into long blocks. */
  .collab-section { padding-top: 56px !important; padding-bottom: 56px !important; }
  .collab-header { margin-bottom: 36px; }
  .collab-header h2 { font-size: clamp(1.7rem, 6vw, 2.2rem); margin-bottom: 12px; }
  .collab-header p { font-size: .8rem; line-height: 1.7; }
  .collab-panel-photo { height: 200px; }
  .collab-panel-content { padding: 28px 24px 32px; }
  .collab-panel-label { font-size: .5rem; letter-spacing: .24em; margin-bottom: 10px; }
  .collab-panel-title { font-size: 1.3rem; margin-bottom: 14px; min-height: 0; line-height: 1.15; }
  .collab-panel-body { font-size: .82rem; line-height: 1.7; margin-bottom: 12px; max-width: 100%; }
  .collab-list li { font-size: .78rem; padding: 8px 0; }
  .collab-list + .collab-cta { padding-top: 22px; }
  .collab-divider { margin: 24px 0; }

  /* ── PORTFOLIO PROJECT OVERLAY — title sticky, description fades ────
     When the user scrolls down inside the project gallery on mobile,
     the description collapses to give photos more real estate. The
     scroll handler in portfolio.html adds .is-scrolled to .proj-ov-panel
     past 30px.
     NOTE: desktop made the header non-sticky and uses a separate slide-in
     minibar instead. Mobile keeps the sticky-header + collapse pattern
     because the screen is narrow enough that the desc fade alone is
     enough to reclaim space, and a slide-in overlay would feel busy. */
  .proj-ov-header {
    position: sticky; top: 0; z-index: 10;
    padding: 12px 16px; gap: 12px; flex-wrap: wrap;
  }
  .proj-ov-header > div:first-child { max-width: 100%; flex: 1 1 100%; }
  .proj-ov-eyebrow { font-size: .54rem; letter-spacing: .2em; margin-bottom: 4px; }
  .proj-ov-title { font-size: 1.35rem; line-height: 1.1; }
  .proj-ov-title em { font-size: .8em; }
  /* Round-1 .proj-ov-desc rules removed — duplicated and superseded by
     the round-5 rules below (full description visible by default,
     collapses on scroll). Keeping the .is-scrolled .proj-ov-eyebrow
     opacity hint here only. */
  .proj-ov-panel.is-scrolled .proj-ov-eyebrow {
    opacity: .6;
  }
  .proj-ov-nav-btn { padding: 8px 12px; font-size: .56rem; letter-spacing: .14em; }
  .proj-ov-nav-btn svg { width: 12px; height: 12px; }
  .proj-ov-nav-sep { height: 22px; }
  .proj-ov-close { padding: 8px 16px; font-size: .85rem; gap: 8px; }
  .proj-ov-close .ov-x { font-size: 1rem; }
  .proj-ov-body { padding: 16px 12px 40px; }
  .proj-ov-grid { grid-template-columns: 1fr 1fr; gap: 6px; }

  /* ── LIGHTBOX THUMB STRIP — let it scroll from the left so the
     strip can actually slide past its first thumb on a small screen. */
  .lb-thumbs { justify-content: flex-start; padding: 10px 16px 12px; gap: 6px; }
  .lb-thumb, .lb-thumb-vid-wrap { flex: 0 0 52px; height: 40px; }

}

/* Stricter mobile (≤480px) — phones in portrait */
@media (max-width: 480px) {
  .mob-nav-links a { font-size: 1.05rem; padding: 12px 0; }
  .collab-panel-photo { height: 170px; }
  .collab-panel-content { padding: 24px 20px 28px; }
  .proj-ov-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE POLISH ROUND 2 — targeted refinements
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── HERO SLIDESHOW (home) — fit more of the image on portrait phones ─
     Desktop uses inset:-6% + a slow zoom animation to give the hero a
     subtle parallax. On a 375-wide portrait phone that crop is brutal —
     you only see the middle band of a landscape photo. We pin the
     slide flush, recenter slightly higher so cabinetry detail is the
     anchor, and kill the over-zoom. */
  .hero-slide {
    inset: 0;
    background-position: center 35%;
    animation: none;
    transform: none;
  }
  /* Tighter hero copy proportions */
  .hero-content { padding: 0 var(--gutter) 56px; }
  .hero-eyebrow { font-size: .52rem; letter-spacing: .2em; margin-bottom: 18px; gap: 12px; }
  .hero-eyebrow::before { width: 20px; }
  .eyebrow-loc { font-size: .58rem; letter-spacing: .22em; }
  .hero-h1 { font-size: clamp(2.2rem, 9vw, 3rem); margin-bottom: 18px; line-height: 1.05; }
  .hero-meta { gap: 22px; flex-wrap: wrap; }
  .hero-sub { font-size: .78rem; line-height: 1.7; max-width: 100%; }
  .hero-ctas { gap: 10px; margin-top: 22px; }

  /* ── MOBILE DRAWER — translucent backdrop + bordered card ────────
     Drawer backdrop is a faded dark wash over the underlying page
     (handled in the base .mob-nav rule above). The menu links live
     inside a bordered card with a darker semi-opaque fill so they
     read cleanly over the blurred page beneath. */
  .mob-nav { position: fixed; }
  /* Drawer-level watermark removed — it sat behind the opaque card
     and was never visible. The watermark now lives INSIDE the card
     (see .mob-nav-inner::before below) so it shows behind the menu
     buttons. */
  .mob-nav::before { display: none; }
  .mob-nav-inner {
    position: relative;
    z-index: 1;
    overflow: hidden;          /* clip the watermark to the card */
    /* Bordered card containing the menu links */
    background: rgba(7, 18, 26, .82);
    border: 1px solid rgba(176, 125, 82, .45);
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .55);
    padding: 28px 32px 24px !important;
    width: min(78vw, 320px);
    max-width: 320px;
  }
  /* Faded hex-mark watermark behind the menu buttons. The card's
     dark fill is the bg layer; this ::before lays the mark on top
     of it at low opacity; the buttons (.mob-nav-links, .mob-nav-cta,
     .mob-nav-loc) are then stacked above via z-index. */
  .mob-nav-inner::before {
    content: '' !important;
    position: absolute !important;
    /* Top edge sits at the Home button (top of links). Bottom edge
       just above the "Start a Project" CTA. Mark scales to fill that
       vertical band via background-size: contain. */
    top: 30px !important;
    bottom: 100px !important;
    left: 0 !important;
    right: 0 !important;
    background: url('assets/logo/mark.png') center / contain no-repeat !important;
    opacity: .12 !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }
  .mob-nav-inner > * { position: relative; z-index: 1; }
  .mob-nav-links li.has-submenu > a {
    position: relative;
  }
  .mob-nav-sub {
    border-left: none !important;
    padding-left: 0 !important;
    margin: 2px 0 8px !important;
    text-align: center;
  }
  .mob-nav-sub li {
    border: 0;
  }
  .mob-nav-sub li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 6px 0;
    font-size: .54rem;
    letter-spacing: .26em;
  }
  .mob-nav-sub li a::before,
  .mob-nav-sub li a::after {
    content: '';
    width: 4px; height: 4px;
    background: var(--copper);
    transform: rotate(45deg);
    opacity: .55;
    flex-shrink: 0;
  }

  /* ── FOOTER — halve the vertical real estate ─────────────────────
     Stack ONE row: brand block at top (compact), then the three link
     columns sit side-by-side in a single horizontal strip via
     inline-block. Drops the 4-col vertical stack from ~540px to
     ~270px without losing any links. */
  .footer-inner {
    display: block !important;
    padding: 22px var(--gutter) 14px;
  }
  .footer-inner > div:first-child {
    display: block;
    margin-bottom: 16px;
  }
  .footer-inner > div:nth-child(n+2) {
    display: inline-block;
    width: 32%;
    vertical-align: top;
    box-sizing: border-box;
    margin: 0;
    padding-right: 4px;
  }
  .footer-brand-logo { font-size: .9rem; margin-bottom: 6px; gap: 8px; }
  .footer-brand-logo img { height: 16px; width: auto; }
  .footer-tagline { font-size: .72rem; line-height: 1.4; margin-bottom: 6px; max-width: 100%; }
  .footer-meta { font-size: .42rem; letter-spacing: .2em; line-height: 1.4; }
  .footer-cta { margin-top: 6px; padding: 6px 12px; font-size: .44rem; letter-spacing: .2em; gap: 6px; }
  .footer-col-head { font-size: .42rem; letter-spacing: .22em; margin-bottom: 6px; padding-left: 10px; }
  .footer-col-head::before { width: 4px; height: 4px; }
  .footer-links li { margin-bottom: 3px; }
  .footer-links a { font-size: .66rem; line-height: 1.4; }
  .footer-bottom { padding: 8px var(--gutter); gap: 4px; }
  .footer-copy { font-size: .42rem; letter-spacing: .16em; line-height: 1.5; }

  /* ── PORTFOLIO PROJECT OVERLAY HEADER — surface the nav buttons ──
     Previously the title block claimed 100% width and the nav row
     wrapped beneath it, eating dead space at the top. Now the title
     and the nav share one tight row: title left, compact icon-only
     prev/next + close right. When .is-scrolled fires, the description
     collapses but everything else stays put. */
  .proj-ov-header {
    flex-wrap: nowrap !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  .proj-ov-header > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0;
    max-width: none !important;
  }
  .proj-ov-eyebrow { font-size: .5rem; letter-spacing: .18em; margin-bottom: 2px; }
  .proj-ov-title {
    font-size: 1.05rem !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .proj-ov-title em { display: none; }
  .proj-ov-desc {
    font-size: .72rem !important;
    line-height: 1.45 !important;
    margin-top: 4px !important;
    /* Show the full description on first render; on scroll-down JS
       drops max-height/opacity inline (with !important) to collapse it.
       Transition is on OPACITY only — animating max-height was getting
       stuck in some engines; the collapse snaps tall→0 but the fade
       on opacity reads as the dominant visual change anyway. */
    max-height: 400px !important;
    overflow: hidden !important;
    transition: opacity .25s var(--ease);
  }
  .proj-ov-panel.is-scrolled .proj-ov-desc {
    max-height: 0 !important;
    opacity: 0 !important;
    margin-top: 0 !important;
  }
  .proj-ov-nav {
    flex: 0 0 auto;
    gap: 4px;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
  }
  .proj-ov-nav-btn {
    padding: 6px 8px !important;
    font-size: 0 !important;          /* hide text label */
    letter-spacing: 0 !important;
    border: 1px solid rgba(245,240,235,.18) !important;
    min-width: 32px !important;
    min-height: 32px !important;
    justify-content: center !important;
    gap: 0 !important;
  }
  .proj-ov-nav-btn svg { width: 14px !important; height: 14px !important; margin: 0 !important; }
  .proj-ov-nav-sep { display: none !important; }
  .proj-ov-close {
    padding: 6px 10px !important;
    font-size: .58rem !important;
    letter-spacing: .14em !important;
    gap: 6px !important;
  }
  .proj-ov-close .ov-x { font-size: .9rem !important; }
  .proj-ov-body { padding: 10px 8px 32px; }

  /* ── PLATFORM PREVIEW STRIP (home) — denser cards ────────────────
     Each card stacks: top row = Module## (left) + tag (right) side-by-
     side instead of two stacked rows. Padding tightened, body trimmed,
     icon shrunk, title size dropped. */
  .plat-strip { padding: 56px var(--gutter) !important; }
  .plat-strip-head h2 { font-size: clamp(1.6rem, 6vw, 2rem) !important; }
  .plat-strip-head-right p { font-size: .8rem !important; line-height: 1.65 !important; }
  .plat-strip-cards { gap: 12px !important; }
  .plat-card { padding: 18px 18px 20px !important; }
  .plat-card-num,
  .plat-card-tag {
    /* Pull num + tag into a single side-by-side row */
    margin-bottom: 10px !important;
  }
  .plat-card-num {
    display: inline-block; font-size: .5rem;
    float: left;
  }
  .plat-card-tag {
    float: right;
    padding: 3px 8px; font-size: .42rem;
    margin-bottom: 14px !important;
  }
  /* clear floats before the icon */
  .plat-card-icon { clear: both; margin-bottom: 12px !important; width: 22px; height: 22px; }
  .plat-card-title { font-size: 1.15rem !important; margin-bottom: 8px !important; }
  .plat-card-body { font-size: .76rem !important; line-height: 1.6 !important; }
  .plat-card-arrow { margin-top: 14px !important; font-size: .48rem !important; }
}

/* Stricter mobile (≤480px) — keep the horizontal link-row layout */
@media (max-width: 480px) {
  /* Footer keeps its compact horizontal link-row layout from the
     768px breakpoint above — no further changes needed here. */
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE POLISH ROUND 3 — general tightening pass
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── HERO (home) round 2 ─────────────────────────────────────────
     Slides go BACK to background-size: cover (filling the full hero)
     per user note — they prefer fill over fit. Images that crop badly
     can be manually re-cropped at the source. Background position
     anchors upper-center where cabinetry detail usually lives. */
  #hero { min-height: 540px; height: 70vh; }
  .hero-h1 { font-size: clamp(1.7rem, 6.5vw, 2.2rem) !important; margin-bottom: 14px !important; }
  .hero-sub { font-size: .72rem !important; line-height: 1.6 !important; }
  .hero-meta { gap: 16px; }
  .hero-slide {
    background-size: cover !important;
    background-position: center 30% !important;
  }
  /* Mobile-only slideshow rearrangement:
       - Slide 1 (the active-by-default position) shows slide-6.jpg
         (the desktop picture 6) so it's the first image users see
         on mobile.
       - Slide 2 uses a portrait kitchen variant from the Otoole
         project (mobile_pic_2.jpg).
       - Slide 6's slot is hidden (its image was promoted to slot 1)
         and its dot is hidden so the indicator row stays in sync.
       The slideshow JS in main.js filters display:none slides + dots
       so cycling skips the hidden 6th slot cleanly. */
  #hero .hero-slides .hero-slide:nth-child(1) {
    background-image: url('assets/images/slideshow/slide-6.jpg') !important;
  }
  #hero .hero-slides .hero-slide:nth-child(2) {
    background-image: url('assets/images/slideshow/mobile_pic_2.jpg') !important;
  }
  #hero .hero-slides .hero-slide:nth-child(6) { display: none !important; }
  #hero .hero-dots .hero-dot:nth-child(6) { display: none !important; }

  /* ── HERO DOTS — horizontal row, centered, below the CTAs ─────────
     Desktop has the dots column on the right edge of the hero. On
     mobile we re-flow into a horizontal row anchored bottom-center
     so it reads as a slide indicator under the copy block. */
  .hero-dots {
    display: flex !important;
    position: absolute !important;
    bottom: 14px !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    flex-direction: row !important;
    gap: 4px !important;
    z-index: 10;
  }
  .hero-dot { width: 16px; height: 16px; }
  .hero-dot::before { width: 5px; height: 5px; }

  /* ── HOME SHOWCASE STACK (3 story chapters) — smaller copy ───────  */
  .show-chapter { padding: 32px var(--gutter) !important; gap: 16px !important; }
  .show-num {
    font-size: .44rem !important;
    letter-spacing: .22em !important;
    margin-bottom: 12px !important;
  }
  .show-title {
    font-size: clamp(1.4rem, 5.5vw, 1.8rem) !important;
    line-height: 1.08 !important;
    margin-bottom: 12px !important;
  }
  .show-body {
    font-size: .78rem !important;
    line-height: 1.65 !important;
    margin-bottom: 18px !important;
  }
  .show-photo-tag { font-size: .44rem !important; letter-spacing: .22em !important; }
  /* Eyebrow sits back in normal flex flow, LEFT-aligned, directly
     above the H1. The H1 + sub + CTAs are still bottom-aligned via
     #hero's flex-end. */
  #hero { position: relative; }
  .hero-eyebrow {
    position: static !important;
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    justify-content: flex-start !important;
    font-size: .44rem !important;
    letter-spacing: .22em;
    gap: 0;
    text-shadow: 0 1px 8px rgba(0,0,0,.7), 0 0 14px rgba(0,0,0,.5);
  }
  /* Hide the leading copper bar + the "Low Country Craftsmanship"
     prefix on mobile — only the Est line shows, right-aligned. */
  .hero-eyebrow::before { display: none !important; }
  .hero-eyebrow .eyebrow-prefix { display: none !important; }
  .eyebrow-loc {
    font-size: .48rem !important;
    letter-spacing: .22em !important;
    color: var(--copper-light) !important;
  }

  /* ── BUTTONS — sitewide CTA shrink ───────────────────────────────
     Buttons used inside hero, CTA bands, contact, services tiles —
     all of them lean smaller on mobile. */
  .btn {
    padding: 10px 20px !important;
    font-size: .52rem !important;
    letter-spacing: .18em !important;
    gap: 7px !important;
  }
  .btn-text { font-size: .52rem !important; letter-spacing: .16em !important; }

  /* ── CTA BAND — shorter band, tighter copy on every page ─────────  */
  .cta-band { min-height: 0 !important; }
  .cta-content { padding: 48px var(--gutter) !important; max-width: 100% !important; }
  .cta-band .section-h2 { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; }
  .cta-band p {
    font-size: .82rem !important;
    line-height: 1.65 !important;
    margin: 12px 0 18px !important;
    max-width: 100% !important;
  }
  /* The compact closing-line CTA used on inner pages */
  .cta-band--compact .cta-content { padding: 40px var(--gutter) !important; }

  /* ── BUILT FOR COLLABORATION — horizontal scroller on mobile ─────
     Stacking 3 tall cards vertically is the heaviest section on the
     services page. We flip it to a swipe-scroll row so each card
     reads horizontally without losing any content. */
  .collab-section .collab-split {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    gap: 12px !important;
    scroll-snap-type: x mandatory;
    padding: 0 8px 12px !important;
    border: 0 !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(176,125,82,.3) transparent;
  }
  .collab-section .collab-divider { display: none !important; }
  .collab-section .collab-panel {
    flex: 0 0 78vw;
    max-width: 320px;
    scroll-snap-align: start;
    border: 1px solid rgba(26,31,30,.08);
    background: var(--bg);
  }
  .collab-panel-photo { height: 140px !important; }
  .collab-panel-content { padding: 18px 18px 22px !important; }
  .collab-panel-title { font-size: 1.1rem !important; margin-bottom: 10px !important; }
  .collab-panel-body {
    font-size: .76rem !important;
    line-height: 1.6 !important;
    margin-bottom: 10px !important;
    max-width: 100% !important;
    /* Cap body to 3 lines so card heights are uniform across the row */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .collab-list li { font-size: .72rem !important; padding: 6px 0 !important; }
  .collab-list + .collab-cta { padding-top: 16px !important; }

  /* ── SERVICES "Every Space" — span Something Else card to full width  */
  .services-section .services-grid .svc-open {
    grid-column: 1 / -1;
  }
  .services-section .services-grid .svc-open .svc-icon { margin: 0 auto 6px !important; }

  /* ── PLATFORM PREVIEW (home) round 2 — drop the tag pills entirely,
       trim title sizes further, and tighten section header. */
  .plat-strip { padding: 40px var(--gutter) !important; }
  .plat-strip-status,
  .plat-strip-head .eyebrow { font-size: .42rem !important; letter-spacing: .22em !important; }
  .plat-strip-head { gap: 16px !important; }
  .plat-strip-head h2 { font-size: clamp(1.4rem, 6vw, 1.8rem) !important; margin-bottom: 6px; }
  .plat-strip-head-right p { font-size: .74rem !important; line-height: 1.55 !important; margin-bottom: 12px; }
  .plat-card { padding: 14px 14px 16px !important; }
  .plat-card-tag {
    /* Drop the boxed tag pill on mobile — the title + module# is
       enough to convey what the card is about. */
    display: none !important;
  }
  .plat-card-num { font-size: .46rem !important; margin-bottom: 6px !important; float: none !important; }
  .plat-card-icon { width: 20px !important; height: 20px !important; margin-bottom: 8px !important; }
  .plat-card-title { font-size: 1rem !important; margin-bottom: 6px !important; line-height: 1.2 !important; }
  .plat-card-body {
    font-size: .7rem !important;
    line-height: 1.55 !important;
    /* Clamp to 3 lines for uniform card heights */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .plat-card-arrow { margin-top: 10px !important; font-size: .44rem !important; letter-spacing: .22em !important; }

  /* ── SITEWIDE SECTION HEADLINE shrink ────────────────────────────
     Quiet down the chapter-h2 across about/services/process/home
     sections — they're all bigger than they need to be on phones. */
  .section-h2 { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; }
  .body-text { font-size: .82rem !important; line-height: 1.65 !important; }
  .section-eyebrow { font-size: .46rem !important; letter-spacing: .24em !important; }

  /* ── CONTACT PAGE — tighten form + sidebar ───────────────────────  */
  .contact-form-head {
    font-size: clamp(1.4rem, 6vw, 1.9rem) !important;
    margin-bottom: 8px !important;
  }
  .contact-form-sub {
    font-size: .82rem !important;
    line-height: 1.65 !important;
    margin-bottom: 28px !important;
  }
  .contact-aside { padding: 22px 20px !important; }
  .contact-aside-head { font-size: clamp(1.2rem, 5vw, 1.5rem) !important; margin-bottom: 18px !important; }
  .contact-aside-divider { margin: 20px 0 !important; }
  .contact-info-label { font-size: .48rem !important; letter-spacing: .22em !important; margin-bottom: 6px !important; }
  .contact-info-value { font-size: .88rem !important; line-height: 1.5 !important; margin-bottom: 22px !important; }
  .lead-time-note { padding: 16px 18px !important; }
  .lead-time-label { font-size: .48rem !important; letter-spacing: .22em !important; margin-bottom: 8px !important; }
  .lead-time-note p { font-size: .78rem !important; line-height: 1.65 !important; }
  .form-group { padding-top: 18px !important; margin-bottom: 22px !important; }
  .form-group-label { font-size: .48rem !important; letter-spacing: .22em !important; margin-bottom: 16px !important; }
  .form-field { margin-bottom: 18px !important; }
  /* When form-field is inside a stacked form-row, the parent grid's
     gap handles spacing — kill the duplicate margin-bottom so the
     vertical rhythm matches the standalone fields below. The row
     itself gets a margin-bottom so two consecutive form-rows don't
     touch each other. */
  .form-row { gap: 18px !important; margin-bottom: 18px !important; }
  .form-row .form-field { margin-bottom: 0 !important; }
  .form-field label { font-size: .8rem !important; top: 12px !important; left: 0 !important; }
  .form-field input,
  .form-field textarea,
  .form-field select { font-size: .88rem !important; padding: 12px 0 10px !important; }
  .form-field input:focus ~ label,
  .form-field input.has-val ~ label,
  .form-field textarea:focus ~ label,
  .form-field textarea.has-val ~ label { font-size: .52rem !important; top: -4px !important; }
  .form-field textarea { min-height: 100px !important; }
  .q-label, .form-block-label { font-size: .78rem !important; margin-bottom: 8px !important; }
  .service-check-label { font-size: .72rem !important; }
  .service-checks { gap: 6px !important; }
  .service-check-box { width: 16px; height: 16px; }
  .form-submit {
    padding: 12px 28px !important;
    font-size: .54rem !important;
    letter-spacing: .18em !important;
    margin-top: 4px !important;
  }
  .form-action { gap: 14px !important; padding-top: 8px !important; }
  .form-action-note { font-size: .72rem !important; }

  /* ── PAGE HERO (inner pages: contact, about, portfolio, etc.) ────
     The dark page-hero block at the top of every inner page was
     padding 200/120 with a clamp(4-9)rem title — that lands ~64-80px
     on phones, an enormous header. Drop the padding ~60% and bring
     the title in line with section h2s elsewhere. */
  .page-hero {
    padding: 110px var(--gutter) 40px !important;
  }
  .page-hero-title {
    font-size: clamp(1.8rem, 7vw, 2.6rem) !important;
    line-height: 1.05 !important;
  }
  .page-hero-sub {
    font-size: .82rem !important;
    line-height: 1.7 !important;
    margin-top: 14px !important;
  }
  .page-hero-deco {
    font-size: 10rem !important;
    bottom: 8px;
  }

  /* ── HOME "BUILT IN BEAUFORT" PILLARS — shrink the whole band ────
     Cards stay 1-col stacked but each is much shorter: smaller mark,
     smaller title, tighter body line-height. The section had way more
     vertical real estate than its content needed on a phone. */
  .pillars-section { padding-top: 48px !important; padding-bottom: 48px !important; }
  .pillar { padding: 26px 22px !important; }
  .pillar-mark { width: 22px !important; height: 26px !important; margin-bottom: 14px !important; opacity: .6; }
  .pillar-title { font-size: 1rem !important; margin-bottom: 8px !important; line-height: 1.2 !important; }
  .pillar-body { font-size: .76rem !important; line-height: 1.65 !important; }

  /* ── MOBILE NAV — bordered burger button + scroll-state burger color
     Button gets a copper border with transparent fill so it reads as a
     contained menu trigger over the dark hero. When nav.scrolled fires
     (light bg behind nav), border + bars switch to dark navy. */
  .nav-mob-btn {
    align-self: center;
    width: 42px; height: 42px;
    border: 1px solid rgba(176,125,82,.55) !important;
    background: transparent !important;
    transition: border-color .35s var(--ease), background .35s var(--ease);
  }
  .nav-mob-btn:active,
  .nav-mob-btn[aria-expanded="true"] {
    background: rgba(176,125,82,.12) !important;
  }
  nav.scrolled .nav-mob-bar { background: var(--dark) !important; }
  nav.scrolled .nav-mob-btn {
    border-color: rgba(26,31,30,.55) !important;
    height: 36px;
  }
  /* Make sure menu button + logo align center on scroll (smaller nav)  */
  .nav-logo { align-self: center; }
  nav.scrolled .nav-logo img.nav-logo-img { height: 32px; }

  /* ── PORTFOLIO GALLERY HEADER — bigger + touch-friendly ──────────
     The description now lives in a modal triggered by the "Read Full
     Description" button, so the locked header just shows eyebrow +
     title + a single CTA + nav buttons. Sized larger than rounds 3-5
     so it reads cleanly on a phone. */
  .proj-ov-eyebrow {
    font-size: .44rem !important;
    letter-spacing: .22em !important;
    margin-bottom: 4px !important;
  }
  /* Override the round-3 nowrap-flex layout so we can give the nav
     buttons their own row below the title — that's the only way the
     bigger touch targets fit comfortably on a 375 viewport. */
  .proj-ov-header {
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    padding: 10px 14px !important;
    gap: 7px !important;
  }
  .proj-ov-header > div:first-child {
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }
  .proj-ov-title {
    font-size: 1.1rem !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    margin: 0 !important;
  }
  .proj-ov-title em { display: inline !important; font-size: .78em; }
  /* Description hidden in the header — surfaced in the modal instead. */
  .proj-ov-desc { display: none !important; }
  /* "Read Full Description" CTA, sits below the title. Serif italic
     instead of mono caps so it reads naturally — the previous mono
     uppercase + tight tracking + tiny size was a wall of letters. */
  .proj-ov-readmore {
    display: inline-flex !important;
    align-self: flex-start;
    margin-top: 8px;
    padding: 8px 16px;
    font-family: var(--serif);
    font-style: italic;
    font-size: .82rem;
    letter-spacing: .005em;
    text-transform: none;
    color: var(--copper-light);
    background: none;
    border: 1px solid rgba(176,125,82,.45);
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
  }
  .proj-ov-readmore:hover { color: var(--bg); background: rgba(176,125,82,.18); border-color: rgba(176,125,82,.7); }
  .proj-ov-readmore:active { background: rgba(176,125,82,.12); }
  .proj-ov-readmore:hover { color: var(--copper-light); border-color: rgba(176,125,82,.7); }
  /* Nav buttons row sits BELOW the title block, full-width pills. */
  .proj-ov-nav {
    flex: 0 0 auto !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    justify-content: stretch !important;
    margin-top: 4px;
  }
  .proj-ov-nav-btn {
    padding: 10px 0 !important;
    font-size: .54rem !important;
    letter-spacing: .18em !important;
    border: 1px solid rgba(245,240,235,.22) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 1 1 0;
    justify-content: center !important;
    gap: 6px !important;
  }
  .proj-ov-nav-btn svg { width: 14px !important; height: 14px !important; margin: 0 !important; }
  .proj-ov-nav-sep { display: none !important; }
  .proj-ov-close {
    padding: 14px 22px !important;
    font-size: 1rem !important;
    letter-spacing: .04em !important;
    gap: 10px !important;
    flex: 1.4 1 0;
    justify-content: center;
  }
  .proj-ov-close .ov-x { font-size: 1.5rem !important; }

  /* ── TIER CARDS (Three Starting Points) — tighter copy ────────────  */
  .tier-card { padding: 0 !important; }
  .tier-card .tier-body { padding: 18px 18px 22px !important; }
  .tier-label { font-size: .42rem !important; letter-spacing: .2em !important; margin-bottom: 8px !important; }
  .tier-title { font-size: 1.15rem !important; margin-bottom: 4px !important; }
  .tier-tag { font-size: .42rem !important; letter-spacing: .14em !important; margin-bottom: 12px !important; }
  .tier-desc { font-size: .76rem !important; line-height: 1.6 !important; margin-bottom: 14px !important; }
  .tier-features { margin-bottom: 16px !important; gap: 4px !important; }
  .tier-features li { font-size: .7rem !important; line-height: 1.45 !important; padding-left: 12px !important; }

  /* ── SERVICE PAGE HEADERS — services / process / how-we-build / contact
     Editorial chapter header on top of each services-flow page (also
     used by contact). Pulled tighter — title sized below the inner
     section headlines so the page hierarchy reads cleanly. */
  .svc-header {
    padding: 90px var(--gutter) 26px !important;
  }
  .svc-header .svc-grid { gap: 12px !important; }
  .svc-header .svc-tag {
    font-size: .44rem !important;
    letter-spacing: .2em !important;
    margin-bottom: 8px !important;
  }
  .svc-header .svc-title {
    font-size: clamp(1.4rem, 5.5vw, 1.85rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -.012em;
  }
  .svc-header .svc-lede {
    font-size: .76rem !important;
    line-height: 1.55 !important;
    border-left: 0 !important;
    padding-left: 0 !important;
    max-width: 100% !important;
    margin-top: 4px !important;
  }
  .svc-stepper {
    margin-top: 28px !important;
    padding-top: 16px !important;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .svc-stepper a { padding: 0 10px 0 0 !important; font-size: .42rem !important; }
  .svc-stepper a .svc-step-num { font-size: .54rem !important; }
}



/* ══════════════════════════════════════════════════════════════════════
   "Every Space. Made Yours." section — mobile compact icon grid
   On mobile, the 9-tile vertical-scroll list of full cards eats
   massive screen real estate. We collapse each tile to icon + title
   only in a 2-col grid and hide the body copy + hover CTA. The
   user can tap any tile to deep-link into the corresponding filter.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .services-section .services-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
    margin-top: 24px;
  }
  .services-section .svc {
    padding: 16px 12px 18px !important;
    text-align: center;
    align-items: center;
  }
  .services-section .svc-icon {
    width: 32px !important; height: 32px !important;
    margin: 0 auto 8px !important;
  }
  .services-section .svc-icon svg { width: 14px !important; height: 14px !important; }
  .services-section .svc-title {
    font-size: .78rem !important;
    margin-bottom: 0 !important;
    line-height: 1.25;
  }
  /* Hide body copy + hover CTA in compact mode */
  .services-section .svc-body,
  .services-section .svc-hover-cta {
    display: none !important;
  }
  /* "Something Else?" tile keeps a single inline link so users still
     see the deep CTA option. */
  .services-section .svc.svc-open .svc-body {
    display: block !important;
    font-size: .68rem !important;
    line-height: 1.45;
    margin-top: 6px;
  }
  .services-section .svc-cta-inline { display: inline-block; margin-top: 4px; }
  /* Tighter section header */
  .services-section .section-split-header {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .services-section .section-h2 { font-size: clamp(1.6rem, 6vw, 2.1rem); }
  .services-section .body-text { font-size: .8rem; line-height: 1.6; }
}
@media (max-width: 360px) {
  .services-section .services-grid { grid-template-columns: 1fr; }
}