/* ============================================================================
   JDB v3 — DEEP CREAM + WOOD SATURATION + GLASSMORPHIC WOOD CARDS
   - Pulled back the white. Cream base is deeper now (#ECE0C4)
   - Wood textures live on the page as actual backgrounds (not suggestion)
   - Glass cards layer over the wood — backdrop-filter blur reveals it
   - All hero/material/portfolio imagery is AI-generated (Coastal-branded)
   - Headline ladder borrowed from coastalfljax.com (keyword-stacked)
   ============================================================================ */

:root {
  /* Deep cream base — no more washed-out white */
  /* v39: warmer + more saturated cream so it stops reading as "white" on monitors */
  --paper-deep:   #E5D2A8;
  --paper:        #EBDAB6;
  --paper-lt:     #F2E5C5;
  --paper-edge:   #DECCA0;

  /* Ink (deep navy text/nav) */
  --ink:          #1A2638;
  --ink-2:        #243349;
  --ink-3:        #2E3F58;       /* v27: darkened from #34465F for AAA contrast */
  --ink-mute:     #475568;       /* v27: darkened from #5E6B7E */
  --ink-quiet:    #6B7585;       /* v27: darkened from #8E97A6 */
  --ink-line:     rgba(26,38,56,0.10);
  --ink-line-2:   rgba(26,38,56,0.18);
  --ink-line-3:   rgba(26,38,56,0.28);

  /* Wood / cedar palette — deeper, more saturated */
  --walnut:       #4A2F18;
  --cedar-deep:   #6B4520;
  --cedar:        #8B5E32;
  --cedar-lt:     #B07A47;
  --cognac:       #C58953;
  --honey:        #D9A463;
  --amber:        #E8B873;
  --honey-bright: #F4C56F;   /* v7: brighter accent for dark-wood backgrounds — reads cleanly off cedar */
  --champagne:    #FAE2A8;   /* legacy — kept for compat */
  --headline-on-wood: #FFF7E0;  /* v49: high-contrast cream replaces yellow champagne for italic headlines on dark wood */
  --burnt:        #7E3F1A;

  /* Botanical */
  --sage:         #4F6E58;
  --sage-lt:      #6F8C77;
  --moss:         #36493B;

  /* Glass tokens — for cards layering over wood */
  --glass-paper:  rgba(241,230,205,0.78);
  --glass-paper-2: rgba(247,237,215,0.85);
  --glass-deep:   rgba(236,224,196,0.65);
  --glass-edge:   rgba(74,47,24,0.20);
  --glass-edge-2: rgba(74,47,24,0.32);

  /* Gradients */
  --grad-cedar:   linear-gradient(135deg, #D9A463 0%, #B07A47 50%, #7E3F1A 100%);
  --grad-cedar-rich: linear-gradient(135deg, #E8B873 0%, #C58953 40%, #8B5E32 100%);
  --grad-text:    linear-gradient(135deg, #C58953 0%, #8B5E32 60%, #4A2F18 100%);
  --grad-navy:    linear-gradient(180deg, #1A2638 0%, #0F1825 100%);

  /* Shadows */
  --shadow-card:  0 22px 50px rgba(74,47,24,0.16), 0 6px 16px rgba(74,47,24,0.10);
  --shadow-lift:  0 32px 70px rgba(74,47,24,0.22), 0 10px 24px rgba(74,47,24,0.14);
  --shadow-glass: 0 28px 60px rgba(26,38,56,0.18), inset 0 1px 0 rgba(247,237,215,0.55), 0 0 0 1px rgba(74,47,24,0.10);

  --section-pad: 80px;   /* v23: tightened from 120 → 80 to kill empty cream voids */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* v24: bg back to warm cream — walnut demoted to seam dividers only (next rule) */
html { background: var(--paper-deep); scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: transparent;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-weight: 400;
  min-height: 100vh;
  padding-top: 64px; /* v92.2: compensates for position:fixed nav */
}
::selection { background: var(--cedar); color: var(--paper-lt); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cedar-deep); text-decoration: none; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 5; }

/* HYBRID: subtle cream/honey wash over the wood so it doesn't feel raw */
.paper-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(247,237,215,0.16), transparent 70%),
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(74,47,24,0.18), transparent 60%);
}
/* HYBRID: paper-grain dialed way down since the bg is wood */
.paper-grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.20;
  background-image:
    /* Layer 1 — fine paper grain (warm brown noise) */
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.40  0 0 0 0 0.27  0 0 0 0 0.10  0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E"),
    /* Layer 2 — long-grain wood streaks (very subtle vertical lines like sanded plank) */
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 1.2' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.30  0 0 0 0 0.20  0 0 0 0 0.10  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='600' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 260px 260px, 600px 200px;
  mix-blend-mode: multiply;
}
.paper-grain::before {
  /* Layer 3 — warm corner vignette so the page feels lit from the center */
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 100% 70% at 50% 0%, transparent 40%, rgba(74,47,24,0.06) 100%),
    radial-gradient(ellipse 100% 70% at 50% 100%, transparent 40%, rgba(74,47,24,0.06) 100%);
  pointer-events: none;
}
.paper-grain::after {
  /* Layer 4 — barely-there scattered foliage shadow (subtle palmetto silhouettes on the edges) */
  content: ''; position: absolute; top: 8%; left: -40px; width: 320px; height: 50%;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 400' fill='%234a2f18' opacity='0.10'%3E%3Cpath d='M100 20 Q90 80 70 130 Q50 180 30 230 Q15 260 5 290 M100 20 Q110 80 130 130 Q150 180 170 230 Q185 260 195 290 M100 20 Q95 100 100 180 Q105 260 100 340'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: contain;
  opacity: 0.10; pointer-events: none;
}

/* === NAV === */
/* v60: nav now FULL-BLEED edge-to-edge — flush to the top of the viewport, no margins / no rounded pill (Karl: "fill the whole top") */
/* v92.2: nav — position:fixed (overflow-x:hidden on html/body was killing sticky). Saturated navy (no brown) + transparent + shine. */
nav.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  margin: 0; max-width: none; width: 100%;
  background:
    /* subtle top shine — cream only, no honey (was reading brown) */
    linear-gradient(180deg, rgba(247,237,215,0.08) 0%, transparent 35%),
    /* v92.3: pushed more saturated true blue per Karl */
    linear-gradient(180deg, rgba(26,46,92,0.78) 0%, rgba(18,34,72,0.82) 60%, rgba(10,22,52,0.86) 100%);
  backdrop-filter: blur(24px) saturate(1.75);
  -webkit-backdrop-filter: blur(24px) saturate(1.75);
  border-radius: 0;
  border: none;
  border-bottom: 1.5px solid rgba(176,122,71,0.55);
  padding: 10px clamp(20px, 4vw, 60px);
  display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center;
  box-shadow:
    /* shine: bright inner top highlight, cream tone */
    inset 0 1.5px 0 rgba(247,237,215,0.32),
    inset 0 -1px 0 rgba(6,14,30,0.55),
    inset 0 0 0 1px rgba(176,122,71,0.18),
    0 8px 22px rgba(0,0,0,0.40),
    0 22px 50px rgba(0,0,0,0.32);
  overflow: hidden;
}
/* Honey accent rule across the top — matches footer::before, full-bleed */
nav.top::before {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--honey-bright) 50%, transparent);
  pointer-events: none;
}
/* Honey accent rule across the bottom — full-bleed */
nav.top::after {
  content: ''; position: absolute; bottom: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--honey-bright) 50%, transparent);
  opacity: 0.55; pointer-events: none;
}

/* The wordmark is now the brand — no boxy mark */
/* v50: nav shop-sign — premium walnut wood plank + Playfair italic + animated sun */
.nav-shopsign {
  display: block; position: relative; padding-right: 32px; text-decoration: none;
}
.nav-shopsign::after {
  content: ''; position: absolute; right: 0; top: 4px; bottom: 4px; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(74,47,24,0.30) 20%, rgba(74,47,24,0.30) 80%, transparent);
}
.ss-board {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px 24px 8px;
  background:
    linear-gradient(180deg, rgba(247,237,215,0.22) 0%, transparent 8%, transparent 92%, rgba(0,0,0,0.40) 100%),
    url('../img/walnut-premium.jpg') center/cover;
  background-color: #6B4520;
  border-radius: 4px;
  border: 1px solid rgba(74,47,24,0.50);
  box-shadow:
    inset 0 1.5px 0 rgba(247,237,215,0.45),
    inset 0 -1.5px 0 rgba(0,0,0,0.45),
    0 6px 16px rgba(74,47,24,0.40);
  position: relative;
  transform: rotate(-1deg);
  transition: transform 0.4s cubic-bezier(.2,.9,.2,1), box-shadow 0.4s;
  overflow: hidden;
  white-space: nowrap;
}
.ss-stud {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #E8C778, #2A1A0A 80%);
  box-shadow: inset 0 -0.5px 0 rgba(0,0,0,0.40);
  z-index: 3;
}
.ss-stud.tl { top: 4px; left: 4px; }
.ss-stud.tr { top: 4px; right: 4px; }
.ss-stud.bl { bottom: 4px; left: 4px; }
.ss-stud.br { bottom: 4px; right: 4px; }
/* v51: sun removed — Karl killed it. Ruler element replaces it. */
.ss-ruler {
  position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 0; align-items: end;
  z-index: 2; opacity: 0.60;
}
.ss-ruler .tick { width: 1px; background: rgba(247,232,200,0.85); border-radius: 0.5px; }
.ss-ruler .t-sm { height: 4px; margin-right: 5px; }
.ss-ruler .t-md { height: 6px; margin-right: 5px; }
.ss-ruler .t-lg { height: 8px; margin-right: 5px; }
.ss-name {
  position: relative; z-index: 2;
  font-family: 'Playfair Display', serif; font-style: italic; font-weight: 700;
  font-size: 18px; letter-spacing: -0.005em; line-height: 1;
  color: #F2E5C5;
  text-shadow: 0 1px 0 rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.45);
  white-space: nowrap;
}
.ss-sub {
  position: relative; z-index: 2;
  font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 700;
  letter-spacing: 0.22em; color: rgba(247,232,200,0.85);
  margin-top: 4px; padding-top: 4px;
  border-top: 1px solid rgba(247,237,215,0.30);
  text-shadow: 0 1px 0 rgba(0,0,0,0.40);
  white-space: nowrap;
}
.nav-shopsign:hover .ss-board {
  transform: rotate(-0.2deg) translateY(-1px);
  box-shadow:
    inset 0 1.5px 0 rgba(247,237,215,0.55),
    inset 0 -1.5px 0 rgba(0,0,0,0.45),
    0 10px 22px rgba(74,47,24,0.50);
}
.nav-shopsign:hover .ss-ruler { opacity: 0.90; }

/* Footer variant — no right divider, no decorative styling around it */
.footer-shopsign { padding-right: 0; }
.footer-shopsign::after { display: none; }
/* v47: new logo — wood plank with rising sun + JDB monogram */
.nav-logo-mark.new-logo {
  width: 64px; height: 44px; border-radius: 5px; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(247,237,215,0.18) 0%, transparent 8%, transparent 92%, rgba(0,0,0,0.30) 100%),
    linear-gradient(180deg, #C58953 0%, #8B5E32 50%, #6B4520 100%);
  box-shadow:
    inset 0 1px 0 rgba(247,237,215,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.40),
    0 4px 12px rgba(74,47,24,0.45);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transform: rotate(-1.5deg);
  transition: transform 0.4s cubic-bezier(.2,.9,.2,1);
}
.nav-logo-mark.new-logo .sun-disc {
  position: absolute; top: 28px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #F4C56F 0%, #D9A463 70%);
  box-shadow: 0 0 12px rgba(244,197,111,0.55);
  transition: top 0.5s ease-out;
  z-index: 1;
}
.nav-logo-mark.new-logo .jdb-mark {
  position: relative; z-index: 2;
  font-family: 'Fraunces', serif; font-weight: 800; font-style: italic;
  font-size: 22px; letter-spacing: -0.03em;
  color: #F2E5C5;
  text-shadow: 0 1px 0 rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.40);
  line-height: 1;
}
.nav-logo:hover .nav-logo-mark.new-logo { transform: rotate(-0.4deg) translateY(-1px); }
.nav-logo:hover .nav-logo-mark.new-logo .sun-disc { top: 14px; }
.nav-logo small {
  display: block; font-size: 10px; font-weight: 700; color: var(--cedar-deep);
  letter-spacing: 0.16em; text-transform: uppercase; margin-top: -2px; opacity: 0.85;
}
/* v51: menu items on dark nav — bright cream */
.nav-links { display: flex; gap: 20px; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; justify-content: center; white-space: nowrap; }
.nav-links a {
  color: rgba(247,237,215,0.85); transition: color 0.2s, background 0.2s;
  position: relative; padding: 8px 10px; white-space: nowrap;
  border-radius: 4px;
}
/* v82: nav menu hover/active — cream-on-cream, no more honey */
.nav-links a:hover { color: #FFF7E0; background: rgba(247,237,215,0.10); }
.nav-links a.active { color: #FFF7E0; background: rgba(247,237,215,0.14); }
.nav-links a.active::after {
  content: ''; position: absolute; bottom: -6px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(247,237,215,0.65) 50%, transparent);
  border-radius: 2px;
}
/* v52: nav-right — phone link + Free Quote button polished for dark nav */
.nav-right { display: flex; align-items: center; gap: 14px; position: relative; z-index: 2; }
.nav-phone {
  color: rgba(247,237,215,0.95); font-weight: 700; font-size: 14px;
  padding: 6px 10px; font-feature-settings: 'tnum';
  white-space: nowrap; text-decoration: none;
  transition: color 0.2s;
}
.nav-phone:hover { color: #FFF7E0; opacity: 1; }
/* v89: Nav CTA button — cedar gradient (Karl: kill the black) */
.nav-cta {
  padding: 9px 18px !important; font-size: 13px !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: 0.08em;
  white-space: nowrap;
  background: linear-gradient(180deg, #D4915F 0%, #B07A47 55%, #8A5A2F 100%) !important;
  color: #FFFDF6 !important;
  border: 1px solid rgba(74,47,24,0.45) !important;
  text-shadow: 0 1px 0 rgba(74,47,24,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.42),
    inset 0 -1px 0 rgba(74,47,24,0.45),
    0 3px 8px rgba(74,47,24,0.30),
    0 8px 18px rgba(176,122,71,0.40) !important;
}

/* === BUTTONS — v5: no more flat blue. Every CTA has 3D lift. === */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  padding: 16px 28px; border-radius: 13px; font-weight: 700; font-size: 14.5px;
  cursor: pointer; border: none; text-decoration: none; letter-spacing: -0.005em;
  font-family: inherit; overflow: hidden;
  transition: transform 0.35s cubic-bezier(.2,.9,.2,1), box-shadow 0.35s, filter 0.2s;
}
.btn::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,0.30), transparent);
  pointer-events: none;
}
.btn-grad {
  background: linear-gradient(180deg, #D4915F 0%, #B07A47 55%, #8A5A2F 100%);
  color: var(--paper-lt);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(74,47,24,0.55),
    0 4px 8px rgba(74,47,24,0.20),
    0 12px 24px rgba(176,122,71,0.45),
    0 22px 44px rgba(176,122,71,0.34);
  text-shadow: 0 1px 0 rgba(74,47,24,0.42);
}
.btn-grad:hover {
  transform: translateY(-3px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(74,47,24,0.55),
    0 6px 12px rgba(74,47,24,0.24),
    0 18px 36px rgba(176,122,71,0.55),
    0 32px 64px rgba(176,122,71,0.40);
}
.btn-navy {
  background: linear-gradient(180deg, #2B3D58 0%, #1A2638 55%, #0E1726 100%);
  color: var(--paper-lt); border: 1px solid rgba(247,237,215,0.10);
  box-shadow:
    inset 0 1px 0 rgba(247,237,215,0.16),
    inset 0 -1px 0 rgba(0,0,0,0.45),
    0 4px 8px rgba(15,24,37,0.30),
    0 14px 30px rgba(15,24,37,0.42),
    0 28px 56px rgba(15,24,37,0.32);
  text-shadow: 0 1px 0 rgba(0,0,0,0.40);
}
.btn-navy:hover {
  transform: translateY(-3px);
  background: linear-gradient(180deg, #3A4F6E 0%, #243349 55%, #14202E 100%);
  box-shadow:
    inset 0 1px 0 rgba(247,237,215,0.20),
    inset 0 -1px 0 rgba(0,0,0,0.45),
    0 6px 14px rgba(15,24,37,0.34),
    0 22px 44px rgba(15,24,37,0.48),
    0 40px 80px rgba(15,24,37,0.38);
}
.btn-ghost {
  background:
    linear-gradient(180deg, rgba(247,237,215,0.92) 0%, rgba(236,224,196,0.88) 100%);
  color: var(--ink);
  border: 1.5px solid var(--ink-line-2);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(74,47,24,0.10),
    0 4px 10px rgba(74,47,24,0.08),
    0 14px 28px rgba(74,47,24,0.12);
}
.btn-ghost:hover {
  background:
    linear-gradient(180deg, var(--paper-lt) 0%, var(--paper) 100%);
  border-color: var(--cedar); color: var(--burnt);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(74,47,24,0.10),
    0 6px 14px rgba(74,47,24,0.12),
    0 22px 44px rgba(74,47,24,0.20);
}
.btn-lg { padding: 19px 34px; font-size: 15.5px; }
.nav-cta { padding: 11px 20px; font-size: 13px; }

/* === HERO === */
section.hero { position: relative; padding: 72px 0 56px; overflow: hidden; }

/* v64: Karl: "I like the board better, no white fade". Back to image B (composite deck close-up) + cream scrim KILLED — image shows fully, only a minimal dark wash for text readability on the credentials slab. */
section.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(180deg, rgba(15,24,37,0.18) 0%, rgba(15,24,37,0.10) 50%, rgba(15,24,37,0.22) 100%),
    url('../img/hero-bg-B.jpg') center/cover no-repeat;
}
/* v64: cream scrim removed — Karl wants the board photo to show through, no white fade */
section.hero::after { display: none; }
section.hero .container { position: relative; z-index: 5; }
/* v54: consolidated credentials slab — 500+ + trust row merged */
/* v78: cred slab gets the same dark pill box treatment as the hero */
.cred-slab {
  margin: 28px auto 0;
  max-width: 960px;
  padding: 22px 36px;
  background: rgba(15,8,3,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(244,197,111,0.50);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(244,197,111,0.20),
    0 12px 28px rgba(0,0,0,0.30),
    0 28px 56px rgba(0,0,0,0.32);
  position: relative;
}
.cred-slab::before {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 3px;
  background: linear-gradient(90deg, transparent, var(--cedar-lt) 50%, transparent);
  border-radius: 0 0 4px 4px;
}
.cred-top {
  display: grid; grid-template-columns: auto auto 1fr; gap: 24px; align-items: center;
}
/* v80: cred slab — all cream */
.cred-num {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: clamp(64px, 7vw, 100px); line-height: 0.85;
  letter-spacing: -0.04em;
  color: #FFF7E0;
}
.cred-plus {
  font-family: 'Fraunces', serif; font-size: 0.50em; vertical-align: super; line-height: 0;
  color: #FFF7E0;
}
.cred-vrule {
  width: 1px; height: 80px; align-self: center;
  background: linear-gradient(180deg, transparent, rgba(247,237,215,0.40) 20%, rgba(247,237,215,0.40) 80%, transparent);
}
.cred-body {
  text-align: left; display: flex; flex-direction: column; gap: 10px;
  background: none; padding: 0; border: none; box-shadow: none;
}
.cred-headline {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 500;
  font-size: clamp(17px, 1.8vw, 22px); color: #FFF7E0; line-height: 1.3;
}
.cred-headline strong {
  color: #FFF7E0; font-weight: 700; font-style: normal;
}
.cred-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: #FFF7E0; opacity: 1;
  font-weight: 500;
}
.cred-meta .cm-item { display: inline-flex; align-items: center; gap: 6px; }
.cred-meta .cm-item strong { color: #FFF7E0; font-weight: 700; }
.cred-meta .cm-platinum {
  background: rgba(247,237,215,0.10) !important;
  border-color: rgba(247,237,215,0.40) !important;
  color: #FFF7E0 !important;
}
.cred-meta .cm-platinum strong { color: #FFF7E0 !important; }
.cred-meta .cm-stars { color: #FFF7E0; letter-spacing: 1px; font-size: 12px; }
.cred-meta .cm-ico { display: inline-flex; }
.cred-meta .cm-ico svg { width: 14px; height: 14px; stroke: #FFF7E0; stroke-width: 2.2; fill: none; stroke-linecap: round; }
.cred-meta .cm-sep { width: 3px; height: 3px; background: rgba(247,237,215,0.45); border-radius: 50%; }
.cred-meta .cm-platinum {
  padding: 4px 10px; border-radius: 999px;
}
@media (max-width: 700px) {
  .cred-top { grid-template-columns: 1fr; gap: 14px; }
  .cred-vrule { display: none; }
  .cred-num { text-align: center; }
  .cred-body { text-align: center; align-items: center; }
}

/* v54: stacked CENTERED hero — everything on the centerline, max-width 760 */
.hero-grid { display: grid; grid-template-columns: minmax(0, 760px); gap: 0; align-items: center; justify-content: center; margin: 0 auto; text-align: center; }
@media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }
.hero-text { text-align: center; }
.hero-text .hero-eyebrow,
.hero-text .hero-trust-row,
.hero-text .hero-cta-row { justify-content: center; }
.hero p.lede { margin-left: auto; margin-right: auto; }
.hero-text .cta-annotation { display: none !important; }

/* v78: dark pill box behind the hero sections — same style + color as the eyebrow pill (dark navy + honey border + blur) */
.hero-text {
  position: relative;
  padding: 44px 56px 40px;
  background: rgba(15,8,3,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(244,197,111,0.50);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(244,197,111,0.20),
    0 12px 28px rgba(0,0,0,0.32),
    0 32px 60px rgba(0,0,0,0.36);
  transform: none;
}
/* v89: hero eyebrow — cedar gradient pill, no more black (Karl's call) */
.hero-text .hero-eyebrow {
  background: linear-gradient(180deg, #D4915F 0%, #B07A47 55%, #8A5A2F 100%);
  color: #FFFDF6;
  border: 1px solid rgba(74,47,24,0.50);
  text-shadow: 0 1px 0 rgba(74,47,24,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(74,47,24,0.45),
    0 3px 8px rgba(74,47,24,0.30),
    0 8px 16px rgba(176,122,71,0.35);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.hero-text .hero-eyebrow .dot { background: #FFFDF6; box-shadow: 0 0 0 4px rgba(255,253,246,0.25); }
/* v80: H1 all cream, no honey. Italic stays for visual rhythm */
.hero-text h1.hero-h1 .ink-stamp {
  color: #FFF7E0; -webkit-text-fill-color: #FFF7E0;
  text-shadow: none;
}
.hero-text h1.hero-h1 .wood-fill {
  font-style: italic;
  background: none;
  color: #FFF7E0; -webkit-text-fill-color: #FFF7E0;
  text-shadow: none;
}
/* v79: lede on dark pill — clean cream + honey, no shadow */
.hero-text p.lede {
  color: #FFF7E0; opacity: 1; font-weight: 450;
  text-shadow: none;
  max-width: 620px;
  background: none; padding: 0; border: none; box-shadow: none;
  font-size: 18px; line-height: 1.55;
}
.hero-text p.lede strong {
  color: #FFF7E0; font-weight: 700;
  background: none; padding: 0; border: none;
}
.hero-text p.lede .kw {
  color: #FFF7E0; font-weight: 700;
  border-bottom: none;
}
/* Hide old plank decorations */
.hero-text::before { display: none; }
.hero-text::after { display: none; }
.hero-text-disabled-old-decoration {
  content: '';
  position: absolute; top: 14px; right: 14px; width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #B07A47 0%, #6B4520 60%, #4A2F18 100%);
  box-shadow:
    0 18px 0 -3px #6B4520,  /* second stud */
    -460px 0 0 -3px #6B4520,  /* upper-left stud — adjust if container width changes */
    -460px 18px 0 -3px #6B4520;
}
@media (max-width: 900px) {
  .hero-text { padding: 30px 28px; }
  .hero-text::after { display: none; }
}

/* ====================================================================
   v33: SKETCH/PENCIL BACKGROUND for plain cream sections.
   Subtle hand-drawn architectural sketch image applied at low opacity
   to USP, Process, Pricing, Reviews, FAQ sections.
   ==================================================================== */
/* v35: sketch is now ONE continuous drafting sheet behind the whole page (see .sketch-global below).
   .sketch-paper is now a no-op so existing class refs don't break. */
.sketch-paper { position: relative; }
.sketch-paper > .container { position: relative; z-index: 2; }

/* Global drafting-paper layer — fixed behind everything, scrolls with the page (background-attachment: fixed),
   sits ABOVE .paper-grain so it's not muddied. Low opacity so it reads as paper, not graphics. */
.sketch-global {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url('../img/sketch-bg2.jpg') center/cover no-repeat;
  background-attachment: fixed;
  opacity: 0.22;
  mix-blend-mode: multiply;
}

/* v39: TRUE TILED BLUEPRINT GRID — always visible across cream sections.
   Small graph-paper squares (cedar-tone lines on warm paper) — drafted feel without "slapped on." */
.grid-paper {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    /* Major grid lines every 80px */
    linear-gradient(rgba(139,94,50,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,94,50,0.16) 1px, transparent 1px),
    /* Minor grid lines every 16px */
    linear-gradient(rgba(139,94,50,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,94,50,0.06) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  background-position: 0 0;
}
section > .grid-paper { z-index: 0; }
section > .container { position: relative; z-index: 2; }

/* v39: drafted "construction note" — handwritten Caveat callout with arrow, fills cream voids intentionally */
.dr-note {
  position: absolute; pointer-events: none; z-index: 1;
  font-family: 'Caveat', cursive; font-size: 17px; font-weight: 500;
  color: var(--cedar-deep); opacity: 0.78;
  display: flex; align-items: center; gap: 6px;
  max-width: 180px; line-height: 1.15;
}
.dr-note svg { width: 36px; height: 22px; flex-shrink: 0; }
.dr-note.rot-l { transform: rotate(-4deg); }
.dr-note.rot-r { transform: rotate(3deg); }
@media (max-width: 1100px) { .dr-note { display: none; } }

/* v40: scattered architectural sketches — hand-drawn SVG, cedar pencil tone, fills cream voids */
.dr-sketch {
  position: absolute; pointer-events: none; z-index: 1;
  color: var(--cedar-deep); opacity: 0.45;
}
.dr-sketch svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dr-sketch.rot-l { transform: rotate(-3deg); }
.dr-sketch.rot-r { transform: rotate(4deg); }
@media (max-width: 1100px) { .dr-sketch { display: none; } }

/* v38: drafting marginalia — sheet numbers, scale bars, compass marks
   anchored to the corners of cream sections to fill empty cream zones with intentional details */
.dr-sheet, .dr-scale, .dr-compass, .dr-dim {
  position: absolute; pointer-events: none; z-index: 3;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cedar-deep); opacity: 0.50;
}
/* Sheet number — upper right */
.dr-sheet {
  top: 28px; right: 32px;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  border: 1px solid rgba(74,47,24,0.30);
  background: rgba(247,237,215,0.40);
  border-radius: 2px;
}
.dr-sheet .num { color: var(--cedar-deep); font-weight: 800; letter-spacing: 0.06em; }
/* Scale bar — lower left */
.dr-scale {
  bottom: 28px; left: 32px;
  display: flex; align-items: center; gap: 8px;
}
.dr-scale .bar {
  display: inline-flex; height: 8px; border: 1px solid var(--cedar-deep);
}
.dr-scale .bar .seg { width: 16px; height: 100%; border-right: 1px solid var(--cedar-deep); }
.dr-scale .bar .seg:last-child { border-right: none; }
.dr-scale .bar .seg.fill { background: var(--cedar-deep); }
/* Compass — lower right */
.dr-compass {
  bottom: 28px; right: 32px;
  width: 38px; height: 38px;
  border: 1px solid var(--cedar-deep); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.dr-compass::before, .dr-compass::after {
  content: ''; position: absolute; background: var(--cedar-deep); opacity: 0.7;
}
.dr-compass::before { top: 4px; bottom: 4px; left: 50%; width: 1px; transform: translateX(-50%); }
.dr-compass::after  { left: 4px; right: 4px; top: 50%; height: 1px; transform: translateY(-50%); }
.dr-compass .n {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-size: 9px; font-weight: 800; color: var(--cedar-deep);
}
/* Dimension line on the side */
.dr-dim {
  top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: 9px;
}
.dr-dim.left { left: 18px; }
.dr-dim.right { right: 18px; }
.dr-dim::before, .dr-dim::after {
  content: ''; display: block; width: 1px; height: 60px; background: var(--cedar-deep);
  margin: 6px auto; opacity: 0.55;
}
@media (max-width: 900px) {
  .dr-sheet, .dr-scale, .dr-compass, .dr-dim { display: none; }
}

/* Caveat handwritten typography moments — restrained, decorative only */
.handwritten {
  font-family: 'Caveat', 'Comic Neue', cursive;
  font-style: normal !important;
  font-weight: 600;
  letter-spacing: 0;
}

/* v37: handwritten "studio note" tagline below hero lede */
.studio-note {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: 'Caveat', cursive;
  font-size: 26px; font-weight: 500; line-height: 1.1;
  color: var(--cedar-deep);
  margin: -8px 0 28px 0;
  transform: rotate(-1deg);
}
.studio-note::before {
  content: ''; width: 36px; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--cedar-deep) 30%, var(--cedar-deep));
  opacity: 0.55;
}

/* v37: hand-drawn pencil scribble rule under H2s — replaces the straight architectural rule
   SVG is a hand-drawn squiggly pencil underline, embedded as data URI on ::after */
.section-h::after {
  content: ''; display: block; margin: 18px auto 0;
  width: 140px; height: 16px; opacity: 0.65;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 16' fill='none'%3E%3Cpath d='M2 9 Q12 4 22 8 T42 10 Q52 6 62 9 T82 11 Q92 5 102 8 T122 10 Q130 7 138 9' stroke='%238B5E32' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-size: 100% 100%; background-repeat: no-repeat;
}
section.ink-bg .section-h::after,
section.materials-wood .section-h::after,
section.cities-wood .section-h::after {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 16' fill='none'%3E%3Cpath d='M2 9 Q12 4 22 8 T42 10 Q52 6 62 9 T82 11 Q92 5 102 8 T122 10 Q130 7 138 9' stroke='%23F4C56F' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  opacity: 0.80;
}

/* v37: hand-drawn signature stamp in footer */
.studio-signature {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 10px 18px;
  border: 1.5px solid rgba(247,237,215,0.40);
  border-radius: 999px;
  background: rgba(247,237,215,0.06);
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(247,237,215,0.78);
  transform: rotate(-1.5deg);
  position: relative;
}
.studio-signature .sig-mark {
  font-family: 'Caveat', cursive; font-size: 26px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: rgba(247,237,215,0.90);
  line-height: 0.8;
}
.studio-signature::before, .studio-signature::after {
  content: ''; position: absolute;
  width: 8px; height: 8px; border: 1px solid rgba(247,237,215,0.40); border-radius: 50%;
}
.studio-signature::before { left: -16px; top: 50%; transform: translateY(-50%); }
.studio-signature::after  { right: -16px; top: 50%; transform: translateY(-50%); }

/* === v32: SKETCH-LANGUAGE DETAILS === */

/* v76: drafting corner crops restored */
.sketch-corner {
  position: absolute; width: 26px; height: 26px;
  pointer-events: none; z-index: 6;
}
.sketch-corner::before, .sketch-corner::after {
  content: ''; position: absolute; background: var(--cedar-deep); opacity: 0.65;
}
.sketch-corner.tl { top: -3px; left: -3px; }
.sketch-corner.tl::before { top: 0; left: 0; width: 22px; height: 1.5px; }
.sketch-corner.tl::after  { top: 0; left: 0; width: 1.5px; height: 22px; }
.sketch-corner.tr { top: -3px; right: -3px; }
.sketch-corner.tr::before { top: 0; right: 0; width: 22px; height: 1.5px; }
.sketch-corner.tr::after  { top: 0; right: 0; width: 1.5px; height: 22px; }
.sketch-corner.bl { bottom: -3px; left: -3px; }
.sketch-corner.bl::before { bottom: 0; left: 0; width: 22px; height: 1.5px; }
.sketch-corner.bl::after  { bottom: 0; left: 0; width: 1.5px; height: 22px; }
.sketch-corner.br { bottom: -3px; right: -3px; }
.sketch-corner.br::before { bottom: 0; right: 0; width: 22px; height: 1.5px; }
.sketch-corner.br::after  { bottom: 0; right: 0; width: 1.5px; height: 22px; }

/* (2) Architectural dimension brackets around the 500+ stat */
.bignum-block .num { position: relative; }
.bignum-block .num::before,
.bignum-block .num::after {
  content: ''; position: absolute; top: 12%; bottom: 12%; width: 12px;
  border: 1.5px solid var(--cedar-deep); opacity: 0.55;
  pointer-events: none;
}
.bignum-block .num::before {
  left: -22px;
  border-right: none;
}
.bignum-block .num::after {
  right: -22px;
  border-left: none;
}
/* Drafted "DECKS · JAX" annotation below 500+ */
.bignum-block .num-dim {
  position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700;
  letter-spacing: 0.20em; color: var(--cedar-deep); opacity: 0.65;
  white-space: nowrap;
}

/* (3) Hand-drawn sketched arrow + "Start here" annotation next to primary CTA */
.cta-annotation {
  position: absolute; right: -120px; top: 50%; transform: translateY(-50%) rotate(-6deg);
  display: flex; align-items: center; gap: 6px;
  font-family: 'Caveat', 'Comic Neue', cursive;
  font-size: 18px; color: var(--cedar-deep);
  pointer-events: none; opacity: 0.85;
}
.cta-annotation svg { width: 64px; height: 32px; }
@media (max-width: 700px) { .cta-annotation { display: none; } }
.hero-cta-row { position: relative; }
.hero-cta-row .btn-grad { position: relative; }
/* v90: hero CTA polish — subtle border, honey glow, top reflection */
.hero-cta-row .btn-grad {
  border: 1.5px solid rgba(244,197,111,0.65);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(74,47,24,0.55),
    0 0 0 1px rgba(244,197,111,0.30),
    0 4px 10px rgba(74,47,24,0.30),
    0 12px 28px rgba(176,122,71,0.50),
    0 22px 48px rgba(244,197,111,0.32);
}
.hero-cta-row .btn-grad:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -1px 0 rgba(74,47,24,0.55),
    0 0 0 1.5px rgba(244,197,111,0.45),
    0 6px 14px rgba(74,47,24,0.34),
    0 18px 38px rgba(176,122,71,0.60),
    0 32px 64px rgba(244,197,111,0.40);
}
.hero-cta-row .btn-navy {
  border: 1.5px solid rgba(244,197,111,0.45);
  box-shadow:
    inset 0 1px 0 rgba(247,237,215,0.20),
    inset 0 -1px 0 rgba(0,0,0,0.45),
    0 0 0 1px rgba(244,197,111,0.20),
    0 4px 10px rgba(15,24,37,0.32),
    0 14px 32px rgba(15,24,37,0.44),
    0 28px 56px rgba(15,24,37,0.34);
}
.hero-cta-row .btn-navy:hover {
  box-shadow:
    inset 0 1px 0 rgba(247,237,215,0.26),
    inset 0 -1px 0 rgba(0,0,0,0.45),
    0 0 0 1.5px rgba(244,197,111,0.38),
    0 6px 14px rgba(15,24,37,0.36),
    0 22px 44px rgba(15,24,37,0.50),
    0 40px 76px rgba(15,24,37,0.40);
}
.hero-cta-row .btn::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 80%);
  border-radius: 13px 13px 0 0; pointer-events: none;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(176,122,71,0.14);
  color: var(--burnt); padding: 8px 16px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; margin-bottom: 28px;
  border: 1px solid rgba(176,122,71,0.35);
  text-transform: uppercase;
}
.hero-eyebrow .dot { width: 7px; height: 7px; background: var(--cedar-lt); border-radius: 50%; box-shadow: 0 0 0 4px rgba(176,122,71,0.20); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.2); } }

h1.hero-h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(56px, 6.8vw, 100px);
  font-weight: 500;
  letter-spacing: -0.038em; line-height: 0.96;
  margin-bottom: 24px; color: var(--ink);
}
h1.hero-h1 .italic {
  font-style: italic; font-weight: 500;
  background: none;
  -webkit-background-clip: initial; background-clip: initial; color: #FFF7E0;
  -webkit-text-fill-color: #FFF7E0;
}
h1.hero-h1 .wood-fill {
  /* Embossed wood-fill — Karl wanted thicker + depth + subtle 3D */
  font-style: italic; font-weight: 600;
  background:
    linear-gradient(180deg, rgba(176,122,71,0.10) 0%, rgba(74,47,24,0.50) 60%, rgba(126,63,26,0.65) 100%),
    url('../img/wood-bg.jpg');
  background-size: cover, cover; background-position: center;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -0.040em;
  filter:
    drop-shadow(0 1px 0 rgba(247,237,215,0.95))     /* top highlight (embossed lift) */
    drop-shadow(0 2px 1px rgba(74,47,24,0.55))      /* tight under-shadow */
    drop-shadow(0 8px 18px rgba(74,47,24,0.32))     /* far drop shadow */
    drop-shadow(0 0 0.6px rgba(74,47,24,0.70));     /* edge definition */
  position: relative;
}
/* v7: "Jacksonville's" — SOLID, chiseled, BOLD. No faded noise.
   Pure deep ink with crisp drop-shadow stack — reads as confident + premium. */
h1.hero-h1 .ink-stamp {
  position: relative; display: inline-block;
  font-style: normal; font-weight: 700;
  letter-spacing: -0.040em;
  /* Solid deep ink with a tight top-to-bottom dimensional gradient — no noise, no speckle */
  color: #14202E;
  background: linear-gradient(180deg, #2A3A55 0%, #14202E 55%, #0A1320 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: none;
  /* Stamped/chiseled depth */
  filter:
    drop-shadow(0 1px 0 rgba(247,237,215,0.85))    /* top paper highlight */
    drop-shadow(0 2px 0 rgba(74,47,24,0.30))       /* tight rim */
    drop-shadow(0 4px 0 rgba(15,24,37,0.20))       /* second rim — adds chiseled depth */
    drop-shadow(0 10px 22px rgba(15,24,37,0.34));  /* far ambient */
}
/* v80: lede — all cream, no honey/underline */
.hero p.lede {
  font-size: 20px; color: #FFF7E0; opacity: 1; max-width: 600px;
  line-height: 1.52; margin-bottom: 34px; font-weight: 500;
}
.hero p.lede strong {
  color: #FFF7E0; opacity: 1; font-weight: 700;
  background: none; padding: 0;
}
.hero p.lede .kw { font-weight: 700; color: #FFF7E0; border-bottom: none; padding-bottom: 0; }

.hero-trust-row {
  display: flex; flex-wrap: wrap; gap: 22px 18px; align-items: center;
  font-size: 13px; color: var(--ink-mute); font-weight: 500; margin-bottom: 36px;
}
.hero-trust-row .item { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust-row .item .ico svg { width: 18px; height: 18px; stroke: var(--cedar-deep); stroke-width: 2; fill: none; }
.hero-trust-row .item strong { color: var(--ink); font-weight: 700; }
.hero-trust-row .stars { color: #E8A93C; letter-spacing: 1px; font-size: 14px; }
.hero-trust-row .sep { width: 4px; height: 4px; background: var(--ink-quiet); border-radius: 50%; }

.hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* HERO SHOWCASE — architectural print frame, slight tilt */
.hero-showcase {
  position: relative;
  background: var(--paper-lt);
  padding: 14px 14px 22px;
  border-radius: 6px;
  box-shadow: 0 50px 110px rgba(26,38,56,0.30), 0 0 0 1px var(--ink-line-2);
  transform: rotate(-0.6deg);
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.hero-showcase:hover { transform: rotate(0); }
.hero-showcase-img-wrap {
  position: relative; border-radius: 2px; overflow: hidden; aspect-ratio: 4/5;
  background: var(--ink);
}
.hero-showcase-img {
  position: absolute; inset: 0;
  /* v6: Karl's real Anastasia Island Preserve pool deck — replacing the AI render */
  background-image: url('https://Coastalfljax-cdn.b-cdn.net/wp-content/uploads/2026/04/Deck-Installation-at-the-Preserve-at-Anastasia-Island-scaled.jpg');
  background-size: cover; background-position: center;
}
.hero-showcase-meta {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(26,38,56,0.85); backdrop-filter: blur(10px);
  border: 1px solid rgba(247,237,215,0.25);
  padding: 6px 12px; border-radius: 6px;
  font-size: 11px; color: var(--paper-lt); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.hero-showcase-meta .pin { width: 6px; height: 6px; background: var(--honey); border-radius: 50%; box-shadow: 0 0 8px rgba(217,164,99,0.85); }
.hero-showcase-platebar {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 22px 24px;
  background: linear-gradient(180deg, transparent 0%, rgba(15,24,37,0.92) 100%);
  color: var(--paper-lt);
}
.hero-showcase-platebar .build { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.14em; color: var(--honey); text-transform: uppercase; margin-bottom: 4px; }
.hero-showcase-platebar h3 { font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(20px, 2vw, 26px); line-height: 1.2; letter-spacing: -0.015em; }
.hero-showcase-caption {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  padding: 16px 6px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; color: var(--ink-mute); letter-spacing: 0.10em; text-transform: uppercase;
}
.hero-showcase-caption .spec { color: var(--ink); font-weight: 700; }
/* v8: Karl wants the stamp clearly IN FRONT of the picture.
   Bumped z-index, slightly larger, positioned more inset so it overlaps the photo edge convincingly. */
.hero-showcase-stamp {
  position: absolute; top: -22px; right: -22px;
  width: 96px; height: 96px; border-radius: 50%;
  z-index: 10;
  background:
    radial-gradient(circle at 30% 25%, #E4A672, #B07A47 50%, #7E4A24 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #FFFDF6; font-weight: 800; text-align: center;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.40),
    inset 0 -2px 0 rgba(0,0,0,0.22),
    0 4px 10px rgba(74,47,24,0.35),
    0 18px 42px rgba(74,47,24,0.55),
    0 0 0 4px rgba(247,237,215,0.95),
    0 0 0 5px rgba(74,47,24,0.18);
  transform: rotate(8deg);
  font-family: 'Fraunces', serif;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 0 rgba(74,47,24,0.50);
}
.hero-showcase-stamp .v { font-size: 22px; line-height: 1; }
.hero-showcase-stamp .l { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin-top: 2px; font-family: 'Inter', sans-serif; }

/* Hero stat row — GLASS over WOOD */
.hero-stat-wood {
  margin-top: 64px; position: relative; max-width: 1180px; margin-left: auto; margin-right: auto;
  padding: 24px;
  background: url('../img/wood-bg.jpg') center/cover;
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 1px 2px rgba(74,47,24,0.30),
    0 18px 36px rgba(74,47,24,0.32),
    0 40px 80px rgba(15,24,37,0.30);
}
.hero-stat-wood::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(74,47,24,0.30), rgba(26,38,56,0.50)); border-radius: 22px; pointer-events: none; }
.hero-stat-row {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.hero-stat {
  position: relative;
  padding: 30px 22px 26px; text-align: center;
  background:
    linear-gradient(180deg, rgba(247,237,215,0.98) 0%, rgba(236,224,196,0.92) 100%);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid var(--glass-edge);
  border-radius: 16px;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(74,47,24,0.10),
    0 1px 2px rgba(0,0,0,0.06),
    0 6px 12px rgba(15,24,37,0.16),
    0 20px 38px rgba(15,24,37,0.26),
    0 36px 64px rgba(15,24,37,0.18);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(.2,.9,.2,1);
}
.hero-stat:hover { transform: translateY(-4px); }
.hero-stat::before {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 2.5px;
  background: linear-gradient(90deg, transparent, var(--cedar) 35%, var(--cedar) 65%, transparent);
  opacity: 0.75;
}
.hero-stat::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.20), transparent);
  border-radius: 16px 16px 0 0; pointer-events: none;
}
.hero-stat .v { font-family: 'Fraunces', serif; font-weight: 500; font-size: 40px; line-height: 1; color: var(--ink); letter-spacing: -0.028em; margin-bottom: 8px; font-feature-settings: 'tnum'; display: inline-flex; align-items: baseline; gap: 2px; }
.hero-stat .v .plus { font-size: 26px; font-weight: 500; color: var(--ink); opacity: 0.55; line-height: 1; position: relative; top: -8px; }
.hero-stat .v .star { color: #E8A93C; font-size: 24px; margin-left: 4px; filter: drop-shadow(0 1px 0 rgba(255,255,255,0.7)); }
.hero-stat .l { font-size: 11px; color: var(--ink); opacity: 0.72; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; line-height: 1.3; }
@media (max-width: 720px) { .hero-stat-row { grid-template-columns: 1fr 1fr; } }

/* === WHY US — 4-card USP grid (Coastal pattern) === */
.usp-strip { padding: 80px 0; position: relative; background: var(--paper-deep); border-top: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line); }
/* v89: kill sketch decorations interfering with USP headline (Karl: "lines interfere with quality") */
section.usp-strip .dr-note, section.usp-strip .dr-sketch, section.usp-strip .dr-compass { display: none !important; }
.usp-strip h2 { text-align: center; font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(28px, 3.6vw, 42px); letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 12px; color: var(--ink); }
.usp-strip h2 .italic { font-style: italic; background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--ink); -webkit-text-fill-color: var(--ink); }
.usp-strip .sub { text-align: center; color: var(--ink-3); font-size: 16px; margin-bottom: 48px; }
.usp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.usp-card {
  padding: 30px 26px; position: relative;
  background:
    linear-gradient(180deg, var(--paper-lt) 0%, var(--paper) 100%);
  border: 1px solid var(--ink-line);
  border-radius: 16px;
  transition: all 0.4s cubic-bezier(.2,.8,.2,1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 1px 2px rgba(74,47,24,0.04),
    0 4px 12px rgba(74,47,24,0.08),
    0 18px 36px rgba(74,47,24,0.08);
  overflow: hidden;
}
.usp-card::before {
  content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cedar-lt) 30%, var(--cedar-lt) 70%, transparent);
  opacity: 0.55;
}
.usp-card:hover {
  transform: translateY(-6px);
  border-color: var(--cedar-lt);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 1px 2px rgba(74,47,24,0.06),
    0 8px 18px rgba(74,47,24,0.12),
    0 28px 56px rgba(74,47,24,0.16);
}
.usp-card:hover::before { opacity: 1; }
.usp-card .ico {
  position: relative;
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--grad-cedar-rich);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 6px 14px rgba(176,122,71,0.40),
    0 0 0 3px rgba(176,122,71,0.08);
}
.usp-card .ico::before {
  content: ''; position: absolute; top: 1px; left: 1px; right: 1px; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.30), transparent);
  border-radius: 11px 11px 0 0; pointer-events: none;
}
.usp-card .ico svg { width: 22px; height: 22px; stroke: var(--paper-lt); stroke-width: 2.2; fill: none; filter: drop-shadow(0 1px 0 rgba(74,47,24,0.40)); position: relative; z-index: 2; }
.usp-card h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 19px; color: var(--ink); margin-bottom: 6px; letter-spacing: -0.01em; }
.usp-card p { font-size: 13.5px; color: var(--ink-3); line-height: 1.55; }
@media (max-width: 900px) { .usp-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .usp-grid { grid-template-columns: 1fr; } }

/* === NEAR-ME SEO STRIP — glass over wood === */
/* v90: cross-service section bg off wood (so wood container can pop). Sketch paper instead. */
.near-me-strip {
  position: relative; padding: 84px 0;
  background: linear-gradient(180deg, #F4E9D0 0%, #ECDFC0 100%);
  color: var(--ink);
  overflow: hidden;
}
.near-me-strip::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(26,38,56,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,38,56,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.7;
}
.near-me-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; gap: 40px; }
/* v93.1: Cross-service container — Tigerwood with lighter overlay so the stripes actually show */
.near-me-grid .lhs {
  text-align: center; max-width: 880px; margin: 0 auto;
  padding: 40px 48px 36px;
  background:
    linear-gradient(180deg, rgba(40,18,8,0.22) 0%, rgba(28,12,6,0.32) 60%, rgba(18,8,4,0.40) 100%),
    url('../img/deck-tigerwood.jpg') center/cover;
  border: 2.5px solid var(--cedar-deep);
  border-radius: 18px;
  box-shadow:
    inset 0 1.5px 0 rgba(247,237,215,0.18),
    inset 0 -1.5px 0 rgba(0,0,0,0.35),
    0 14px 32px rgba(74,47,24,0.30),
    0 36px 72px rgba(74,47,24,0.26);
  position: relative;
}
/* v86: Full Service Catalog header — cream kicker pill, bigger/bolder h2, NO honey */
.near-me-grid .lhs .lhs-kicker {
  display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  color: #FFF7E0; letter-spacing: 0.18em; text-transform: uppercase;
  background: rgba(247,237,215,0.14); border: 1px solid rgba(247,237,215,0.45);
  padding: 7px 16px; border-radius: 999px; margin-bottom: 22px;
}
.near-me-grid .lhs h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(38px, 4.4vw, 56px); letter-spacing: -0.025em; line-height: 1.04; color: #FFF7E0; text-shadow: 0 2px 14px rgba(0,0,0,0.45); }
.near-me-grid .lhs h2 .italic { font-style: italic; color: #FFF7E0; -webkit-text-fill-color: #FFF7E0; text-shadow: 0 2px 14px rgba(0,0,0,0.45); }
/* v93.3: dark glass scrim behind lede so it's clearly readable on tigerwood */
.near-me-grid .lhs p {
  color: #FFFDF6; font-size: 16.5px; line-height: 1.6;
  max-width: 700px; margin: 20px auto 0;
  font-weight: 500;
  padding: 18px 26px;
  background: linear-gradient(180deg, rgba(15,24,37,0.62) 0%, rgba(10,18,30,0.70) 100%);
  border: 1.5px solid rgba(244,197,111,0.40);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(247,237,215,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    0 6px 18px rgba(0,0,0,0.30);
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
.near-me-grid .lhs p strong { color: #FFF7E0; font-weight: 700; }
.near-me-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .near-me-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .near-me-cards { grid-template-columns: 1fr; } }
.near-me-card {
  display: flex; flex-direction: column;
  padding: 30px 26px 28px;
  background: linear-gradient(180deg, rgba(247,237,215,0.97) 0%, rgba(236,224,196,0.94) 100%);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 2px solid var(--cedar);
  border-radius: 14px;
  transition: all 0.4s cubic-bezier(.2,.9,.2,1); position: relative;
  color: var(--ink); overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 4px rgba(0,0,0,0.10),
    0 14px 30px rgba(15,24,37,0.36),
    0 32px 60px rgba(15,24,37,0.26);
}
.near-me-card::before { display: none; }
.near-me-card:hover {
  background: linear-gradient(180deg, var(--paper-lt) 0%, var(--paper) 100%);
  border-color: var(--cedar-deep);
  transform: translateY(-5px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 4px 8px rgba(0,0,0,0.12),
    0 24px 48px rgba(15,24,37,0.45),
    0 52px 86px rgba(15,24,37,0.35);
}
.near-me-icon {
  width: 58px; height: 58px; border-radius: 14px;
  background:
    radial-gradient(circle at 30% 25%, #E4A672, #B07A47 50%, #7E4A24 100%);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.45),
    inset 0 -1.5px 0 rgba(0,0,0,0.20),
    0 4px 12px rgba(74,47,24,0.32),
    0 12px 24px rgba(74,47,24,0.22),
    0 0 0 5px rgba(176,122,71,0.10);
  position: relative;
}
.near-me-icon::before {
  content: ''; position: absolute; top: 1.5px; left: 1.5px; right: 1.5px; height: 48%;
  background: linear-gradient(180deg, rgba(255,255,255,0.34), transparent);
  border-radius: 13px 13px 0 0;
}
.near-me-icon svg { width: 28px; height: 28px; stroke: #F5E8C8; stroke-width: 2.2; fill: none; position: relative; z-index: 2; filter: drop-shadow(0 1px 1px rgba(74,47,24,0.50)); stroke-linecap: round; stroke-linejoin: round; }
/* v6: cleaned up — no more blue+brown text mix. Kicker now muted-ink, heading + body stay ink. Only icon stays cedar. */
.near-me-card .kicker { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600; color: var(--ink); opacity: 0.55; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; }
.near-me-card h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 30px; line-height: 1.1; color: var(--ink); margin-bottom: 10px; letter-spacing: -0.024em; }
.near-me-card > span { font-size: 13.5px; color: var(--ink); opacity: 0.70; line-height: 1.5; }
.near-me-card .arrow {
  position: absolute; top: 22px; right: 22px; color: var(--ink-2);
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px;
  transition: transform 0.3s, color 0.3s;
  opacity: 0.55;
}
.near-me-card:hover .arrow { transform: translateX(4px); color: var(--ink); opacity: 1; }
@media (max-width: 900px) { .near-me-grid { grid-template-columns: 1fr; gap: 32px; } .near-me-cards { grid-template-columns: 1fr; } }

/* === SECTION GENERICS === */
/* HYBRID: cream sections sit as translucent panels on the wood */
section.s {
  padding: var(--section-pad) 0; position: relative;
  background: rgba(247,237,215,0.78);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
/* Hero stays bare (wood shows fully) */
section.hero {
  background: rgba(247,237,215,0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
/* USP strip gets the same cream wash */
section.usp-strip {
  background: rgba(247,237,215,0.78);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
/* Final CTA also gets a translucent cream */
section.final {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(176,122,71,0.22) 0%, transparent 60%),
    rgba(247,237,215,0.85);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
/* Narrow wood-only gaps between sections — visible as thin bands of wood */
section.s + section.s, section.usp-strip + section, section.s + section.usp-strip {
  margin-top: 0;
}
section.s.ink-bg { background: var(--ink); color: var(--paper-lt); }
section.s.ink-bg h2.section-h { color: var(--paper-lt); }
section.s.ink-bg h2.section-h .italic { color: var(--headline-on-wood); -webkit-text-fill-color: var(--headline-on-wood); background: none; text-shadow: 0 2px 14px rgba(15,24,37,0.60); }
section.s.ink-bg .section-lede { color: rgba(247,237,215,0.78); }
section.s.ink-bg .section-eyebrow { background: rgba(247,237,215,0.10); color: #FFF7E0; border-color: rgba(247,237,215,0.40); }
/* HYBRID: portfolio .lt-bg gets a translucent cream wash so the wood texture shows softly underneath */
section.s.lt-bg { background: rgba(247,237,215,0.78); border-top: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

.section-head { max-width: 880px; }
.section-head.center { margin: 0 auto; text-align: center; }
/* v85: section text — back to dark ink on cream sketch, clean editorial */
.section-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(26,38,56,0.08); color: var(--ink-2);
  padding: 7px 14px; border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; margin-bottom: 18px;
  border: 1px solid rgba(26,38,56,0.25); text-transform: uppercase;
}
.section-eyebrow .num { color: var(--ink-quiet); font-weight: 600; }
h2.section-h {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: clamp(40px, 5vw, 60px); letter-spacing: -0.025em; line-height: 1.05;
  margin-bottom: 16px; color: var(--ink);
}
h2.section-h .italic {
  font-style: italic;
  background: none;
  -webkit-background-clip: initial; background-clip: initial; color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}
.section-lede { font-size: 18px; color: var(--ink-3); max-width: 660px; line-height: 1.6; font-weight: 450; }
.section-head.center .section-lede { margin: 0 auto; }
.section-lede strong { color: var(--ink) !important; font-weight: 700; }

/* For sections on dark wood (Materials, Cities) — flip text to cream so it reads on dark */
section.materials-wood .section-eyebrow,
section.cities-wood .section-eyebrow {
  background: rgba(247,237,215,0.12); color: #FFF7E0;
  border-color: rgba(247,237,215,0.40);
}
section.materials-wood .section-eyebrow .num,
section.cities-wood .section-eyebrow .num { color: rgba(247,237,215,0.75); }
section.materials-wood h2.section-h,
section.cities-wood h2.section-h { color: #FFF7E0; }
section.materials-wood h2.section-h .italic,
section.cities-wood h2.section-h .italic { color: #FFF7E0; -webkit-text-fill-color: #FFF7E0; }
section.materials-wood .section-lede,
section.cities-wood .section-lede { color: rgba(247,237,215,0.90); }
section.materials-wood .section-lede strong,
section.cities-wood .section-lede strong { color: #FFF7E0 !important; }

/* v36 RULE (text-on-busy-bg always gets a backing):
   subtle cream "page header" card sits behind eyebrow+H2+lede so they have their own surface
   above the sketch bg. Matches hero plank vocabulary (dashed sketched border, drafting corners)
   but lighter weight — hero remains the lead, section heads are supporting. */
/* v85: STRIP the navy pill from section heads — back to plain transparent on cream sketch */
.section-head-card {
  position: relative;
  padding: 0 16px 12px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0 auto 32px;
  display: block;
  width: 100%;
  max-width: 880px;
  text-align: center;
  box-sizing: border-box;
}
.section-head-card .sk-c { display: none; }

/* v86: Process section gets a SOLID NAVY box behind the header — Karl: "well-thought-out color box". Same family as the hero pill but scoped only to process. */
/* v92.8: REVERT — back to walnut baseline per Karl */
section#process .section-head-card {
  padding: 38px 56px 32px;
  background:
    linear-gradient(180deg, rgba(74,47,24,0.38) 0%, rgba(58,38,18,0.50) 60%, rgba(40,24,12,0.58) 100%),
    url('../img/walnut-premium.jpg') center/cover;
  border: 2.5px solid var(--cedar-deep);
  border-radius: 16px;
  box-shadow:
    inset 0 1.5px 0 rgba(247,237,215,0.22),
    inset 0 -1.5px 0 rgba(0,0,0,0.35),
    0 10px 24px rgba(74,47,24,0.30),
    0 32px 64px rgba(74,47,24,0.28);
  display: block;
  width: auto;
  max-width: 720px;
  margin: 0 auto 64px;
  text-align: center;
  position: relative;
}
section#process .section-head-card::after {
  content: ''; position: absolute; left: 50%; bottom: -1.5px;
  transform: translateX(-50%);
  width: 38%; height: 2.5px;
  background: linear-gradient(90deg, transparent, var(--cedar) 30%, var(--cedar-lt) 50%, var(--cedar) 70%, transparent);
  border-radius: 2px;
}
section#process .section-head-card .section-eyebrow {
  background: rgba(247,237,215,0.14); color: #FFF7E0;
  border-color: rgba(247,237,215,0.45);
}
section#process .section-head-card .section-eyebrow .num { color: rgba(247,237,215,0.78); }
section#process .section-head-card h2.section-h { color: #FFF7E0; font-weight: 600; }
section#process .section-head-card h2.section-h .italic {
  color: #FFF7E0; -webkit-text-fill-color: #FFF7E0; background: none;
}
section#process .section-head-card .section-lede { color: rgba(247,237,215,0.92); font-weight: 500; }
section#process .section-head-card .section-lede strong { color: #FFF7E0 !important; }
.section-head-card.center { display: block; }
.section-head-card::before {
  content: ''; position: absolute; inset: 7px; pointer-events: none;
  border: 1px dashed rgba(74,47,24,0.22); border-radius: 3.5px;
}
/* Drafting corner crops — consistent with hero wood plank */
.section-head-card .sk-c {
  position: absolute; width: 18px; height: 18px; pointer-events: none;
}
.section-head-card .sk-c::before, .section-head-card .sk-c::after {
  content: ''; position: absolute; background: var(--cedar-deep); opacity: 0.55;
}
.section-head-card .sk-c.tl { top: -2px; left: -2px; }
.section-head-card .sk-c.tl::before { top: 0; left: 0; width: 16px; height: 1.3px; }
.section-head-card .sk-c.tl::after  { top: 0; left: 0; width: 1.3px; height: 16px; }
.section-head-card .sk-c.tr { top: -2px; right: -2px; }
.section-head-card .sk-c.tr::before { top: 0; right: 0; width: 16px; height: 1.3px; }
.section-head-card .sk-c.tr::after  { top: 0; right: 0; width: 1.3px; height: 16px; }
.section-head-card .sk-c.bl { bottom: -2px; left: -2px; }
.section-head-card .sk-c.bl::before { bottom: 0; left: 0; width: 16px; height: 1.3px; }
.section-head-card .sk-c.bl::after  { bottom: 0; left: 0; width: 1.3px; height: 16px; }
.section-head-card .sk-c.br { bottom: -2px; right: -2px; }
.section-head-card .sk-c.br::before { bottom: 0; right: 0; width: 16px; height: 1.3px; }
.section-head-card .sk-c.br::after  { bottom: 0; right: 0; width: 1.3px; height: 16px; }

.section-head-card.center .section-lede { margin: 0 auto; }

/* v89: Anatomy header — transparent (Karl killed the cream pill). Strong typography + cedar accent stripe only. */
section#anatomy .section-head-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 760px; margin: 0 auto 48px;
  position: relative;
}
section#anatomy .section-head-card::before,
section#anatomy .section-head-card .sk-c { display: none !important; }
section#anatomy .section-head-card::after {
  content: ''; position: absolute; left: 50%; bottom: -18px;
  transform: translateX(-50%);
  width: 120px; height: 3px;
  background: linear-gradient(90deg, transparent, var(--cedar) 30%, var(--cedar-deep) 50%, var(--cedar) 70%, transparent);
  border-radius: 2px;
}
section#anatomy h2.section-h { font-weight: 700; font-size: clamp(40px, 4.8vw, 58px); letter-spacing: -0.03em; }
section#anatomy .section-eyebrow { border-color: var(--cedar) !important; }
.section-head-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: end; margin-bottom: 64px; }
@media (max-width: 900px) { .section-head-grid { grid-template-columns: 1fr; gap: 24px; align-items: start; } }

/* === ANATOMY (v5: photoreal cutaway image + glass callouts) === */
.anatomy-grid { display: grid; grid-template-columns: 1.18fr 1fr; gap: 48px; align-items: stretch; }
.anatomy-photo {
  position: relative; border-radius: 18px; overflow: hidden;
  background: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 4px 12px rgba(74,47,24,0.10),
    0 32px 70px rgba(15,24,37,0.30);
  min-height: 460px;
}
.anatomy-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.anatomy-photo-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 50%, rgba(15,24,37,0.62) 100%),
    radial-gradient(ellipse at top right, transparent 60%, rgba(15,24,37,0.35) 100%);
  pointer-events: none;
}
.anatomy-photo-spec {
  position: absolute; left: 24px; bottom: 22px; right: 24px;
  z-index: 3; display: flex; flex-direction: column; gap: 6px;
}
.anatomy-photo-spec .kicker {
  align-self: flex-start;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600;
  color: var(--paper-lt); letter-spacing: 0.18em; text-transform: uppercase;
  background: rgba(15,24,37,0.55); backdrop-filter: blur(10px);
  padding: 6px 12px; border-radius: 6px;
  border: 1px solid rgba(247,237,215,0.32);
}
.anatomy-photo-spec .title {
  font-family: 'Fraunces', serif; font-weight: 600; font-style: italic;
  font-size: 21px; color: var(--paper-lt); letter-spacing: -0.015em; line-height: 1.2;
  max-width: 480px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}
/* v92.8: REVERT — back to walnut baseline */
.anatomy-callouts {
  background:
    linear-gradient(180deg, rgba(28,18,10,0.62) 0%, rgba(18,10,4,0.74) 60%, rgba(10,6,2,0.82) 100%),
    url('../img/walnut-premium.jpg') center/cover;
  border: 2.5px solid var(--cedar);
  border-radius: 18px;
  padding: 18px 22px;
  box-shadow:
    inset 0 1.5px 0 rgba(247,237,215,0.20),
    inset 0 -1.5px 0 rgba(0,0,0,0.45),
    0 4px 12px rgba(0,0,0,0.30),
    0 22px 44px rgba(0,0,0,0.36),
    0 44px 76px rgba(0,0,0,0.30);
  position: relative;
}
.anatomy-callouts::before { display: none; }
.anatomy-callout {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px dashed rgba(247,237,215,0.28);
  transition: all 0.3s;
  position: relative; z-index: 2;
}
.anatomy-callout:last-child { border-bottom: none; }
.anatomy-callout:hover .anatomy-callout-num { transform: scale(1.08); box-shadow: 0 6px 14px rgba(176,122,71,0.55); }
.anatomy-callout-num {
  position: relative;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--grad-cedar-rich);
  color: var(--paper-lt); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    0 3px 8px rgba(0,0,0,0.40);
  transition: all 0.3s;
}
.anatomy-callout strong { display: block; color: #FFFDF6; font-size: 14px; font-weight: 700; margin-bottom: 2px; letter-spacing: -0.005em; text-shadow: 0 1px 4px rgba(15,24,37,0.55); }
.anatomy-callout span { color: rgba(247,237,215,0.92); font-size: 12.5px; line-height: 1.5; text-shadow: 0 1px 3px rgba(15,24,37,0.55); }
@media (max-width: 900px) { .anatomy-grid { grid-template-columns: 1fr; gap: 24px; } }

/* === MATERIALS — GLASS CARDS over RICH DARK wood (v5: killed the cream fade) === */
section.materials-wood {
  position: relative; padding: var(--section-pad) 0;
  background: url('../img/wood-bg.jpg') center/cover;
  overflow: hidden;
}
/* Deep walnut vignette — no more washed cream. Text now reads crisp. */
section.materials-wood::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at top, rgba(74,47,24,0.55) 0%, rgba(15,24,37,0.82) 70%, rgba(11,20,33,0.92) 100%),
    linear-gradient(180deg, rgba(15,24,37,0.40) 0%, transparent 50%, rgba(15,24,37,0.55) 100%);
}
section.materials-wood::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--honey) 30%, var(--honey) 70%, transparent);
  opacity: 0.45; pointer-events: none; z-index: 3;
}
section.materials-wood .container { position: relative; z-index: 2; }
section.materials-wood h2.section-h { color: var(--paper-lt); }
section.materials-wood h2.section-h .italic {
  color: var(--headline-on-wood); background: none; -webkit-text-fill-color: var(--headline-on-wood);
  text-shadow: 0 2px 14px rgba(15,24,37,0.55);
}
section.materials-wood .section-lede { color: rgba(247,237,215,0.96); text-shadow: 0 1px 4px rgba(15,24,37,0.45); }
section.materials-wood .section-lede strong { color: #FFF7E0; font-weight: 700; }
section.materials-wood .section-eyebrow {
  background: rgba(247,237,215,0.16); color: #FFF7E0;
  border-color: rgba(247,237,215,0.50);
  backdrop-filter: blur(8px);
  font-weight: 800;
}

/* v7: 3-col on desktop, 2-col on tablet, 1-col on phone — supports 3 OR 5 cards cleanly */
.mat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 1100px) { .mat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .mat-grid { grid-template-columns: 1fr; } }
/* v93.2: mat-extras strip — Natural Slate texture per Karl (replaces solid navy) */
.mat-extras {
  margin-top: 40px; padding: 28px 36px;
  background:
    linear-gradient(180deg, rgba(20,28,40,0.52) 0%, rgba(14,20,32,0.62) 60%, rgba(8,14,24,0.70) 100%),
    url('../img/dir-slate.jpg') center/cover;
  border: 1.5px solid rgba(176,122,71,0.55); border-radius: 14px;
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center;
  box-shadow:
    inset 0 1px 0 rgba(247,237,215,0.20),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 8px 20px rgba(15,24,37,0.32),
    0 24px 48px rgba(15,24,37,0.40);
}
@media (max-width: 800px) { .mat-extras { grid-template-columns: 1fr; gap: 14px; text-align: center; } }
.mat-extras .left {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 800;
  color: #FFF7E0; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(247,237,215,0.12); border: 1px solid rgba(247,237,215,0.45);
  white-space: nowrap;
}
.mat-extras .right { color: #FFF7E0; font-size: 16px; line-height: 1.6; font-weight: 450; text-shadow: 0 1px 4px rgba(15,24,37,0.55); }
.mat-extras .right strong { color: #FFF7E0; font-weight: 700; }
.mat-card {
  position: relative; border-radius: 16px; overflow: hidden;
  background: var(--glass-paper-2);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-glass);
  transition: all 0.5s cubic-bezier(.2,.8,.2,1);
}
.mat-card:hover { transform: translateY(-8px); border-color: var(--cedar); box-shadow: var(--shadow-lift), inset 0 1px 0 rgba(255,255,255,0.55); }
.mat-card-img { height: 260px; position: relative; background-size: cover; background-position: center; }
.mat-card-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(74,47,24,0.35) 100%); }
.mat-card-num { position: absolute; top: 14px; left: 14px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; color: var(--ink); background: var(--paper-lt); padding: 5px 10px; border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,0.20); z-index: 2; letter-spacing: 0.10em; text-transform: uppercase; }
.mat-card-badge { position: absolute; top: 14px; right: 14px; font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 700; color: var(--paper-lt); background: var(--cedar-deep); padding: 5px 10px; border-radius: 6px; z-index: 2; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 4px 10px rgba(74,47,24,0.30); }
/* v49: card body uses flex column so CTAs align across all 6 cards */
.mat-card-body { padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1; }
.mat-card-tagline { min-height: 66px; }
.mat-card-specs { min-height: 168px; margin-top: 4px; }
.mat-card-cta { margin-top: auto !important; }
.trex-chips { margin-top: 14px !important; }
.mat-card { display: flex; flex-direction: column; }
.mat-card-img { flex-shrink: 0; }
.mat-card-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 26px; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.02em; line-height: 1.15; }
.mat-card-price { display: inline-block; font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; color: var(--ink); margin-bottom: 14px; letter-spacing: -0.01em; font-feature-settings: 'tnum'; }
.mat-card-price small { font-size: 12px; color: var(--ink-mute); margin-left: 4px; }
.mat-card-tagline { color: var(--ink-3); font-size: 14.5px; line-height: 1.55; margin-bottom: 22px; }
.mat-card-specs { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px dashed var(--ink-line-2); }
.mat-card-spec { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.mat-card-spec svg { width: 14px; height: 14px; stroke: var(--sage); stroke-width: 3; fill: none; flex-shrink: 0; }
.mat-card-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; color: var(--ink); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; }
.mat-card-cta svg { width: 14px; height: 14px; transition: transform 0.3s; }
.mat-card:hover .mat-card-cta svg { transform: translateX(6px); }
@media (max-width: 900px) { .mat-grid { grid-template-columns: 1fr; } }

/* === PROCESS — v5: dimensional cards with semantic icons === */
section#process { background: linear-gradient(180deg, #E8DCC0 0%, #DCCDA6 100%); position: relative; }
section#process::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cedar) 30%, var(--cedar) 70%, transparent);
  opacity: 0.40;
}
.process-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; }
.process-list::before { content: ''; position: absolute; top: 56px; left: 12%; right: 12%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--cedar) 0, var(--cedar) 8px, transparent 8px, transparent 16px);
  opacity: 0.40; z-index: 1;
}
/* v92.8: REVERT — back to walnut dark baseline */
.process-step {
  position: relative; z-index: 2; text-align: center;
  padding: 38px 26px 30px;
  background:
    linear-gradient(180deg, rgba(28,18,10,0.62) 0%, rgba(18,10,4,0.74) 60%, rgba(10,6,2,0.82) 100%),
    url('../img/walnut-premium.jpg') center/cover;
  border: 2.5px solid var(--cedar);
  border-radius: 18px;
  box-shadow:
    inset 0 1.5px 0 rgba(247,237,215,0.20),
    inset 0 -1.5px 0 rgba(0,0,0,0.45),
    0 4px 10px rgba(0,0,0,0.30),
    0 18px 36px rgba(0,0,0,0.36),
    0 38px 68px rgba(0,0,0,0.30);
  transition: all 0.4s cubic-bezier(.2,.9,.2,1);
}
.process-step::before { display: none; }
.process-step:hover {
  transform: translateY(-6px);
  border-color: var(--cedar);
  box-shadow:
    inset 0 1.5px 0 rgba(247,237,215,0.28),
    inset 0 -1.5px 0 rgba(0,0,0,0.32),
    0 6px 14px rgba(74,47,24,0.20),
    0 22px 44px rgba(74,47,24,0.30),
    0 48px 80px rgba(74,47,24,0.26);
}
.process-step-icon {
  position: relative;
  width: 64px; height: 64px; border-radius: 16px;
  background: linear-gradient(180deg, #D4915F 0%, #B07A47 50%, #8A5A2F 100%);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.42),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 4px 10px rgba(74,47,24,0.30),
    0 14px 28px rgba(176,122,71,0.45),
    0 0 0 6px var(--paper-deep);
}
.process-step-icon::before {
  content: ''; position: absolute; top: 1px; left: 1px; right: 1px; height: 48%;
  background: linear-gradient(180deg, rgba(255,255,255,0.32), transparent);
  border-radius: 15px 15px 0 0;
}
.process-step-icon svg { width: 28px; height: 28px; stroke: var(--paper-lt); stroke-width: 2; fill: none; position: relative; z-index: 2; filter: drop-shadow(0 1px 0 rgba(74,47,24,0.45)); stroke-linecap: round; stroke-linejoin: round; }
.process-step-num {
  position: absolute; top: 18px; right: 18px;
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; font-size: 28px;
  color: #FFFDF6; opacity: 0.70; letter-spacing: -0.02em;
  font-feature-settings: 'tnum'; line-height: 1;
  text-shadow: 0 1px 4px rgba(15,24,37,0.50);
  position: absolute; z-index: 3;
}
.process-step-title { font-family: 'Fraunces', serif; font-weight: 700; font-size: 21px; color: #FFFDF6; margin-bottom: 10px; letter-spacing: -0.015em; line-height: 1.2; text-shadow: 0 1px 4px rgba(15,24,37,0.55); position: relative; z-index: 2; }
.process-step-body { font-size: 14px; color: #FFFDF6; opacity: 0.92; line-height: 1.55; max-width: 240px; margin: 0 auto; text-shadow: 0 1px 4px rgba(15,24,37,0.55); position: relative; z-index: 2; }
.process-step-week { display: inline-block; margin-top: 16px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; color: #FFFDF6; padding: 5px 11px; border-radius: 6px; background: rgba(247,237,215,0.14); border: 1px dashed rgba(247,237,215,0.40); letter-spacing: 0.12em; text-transform: uppercase; text-shadow: 0 1px 3px rgba(15,24,37,0.55); position: relative; z-index: 2; }
@media (max-width: 900px) { .process-list { grid-template-columns: 1fr 1fr; gap: 22px; } .process-list::before { display: none; } }

/* === PORTFOLIO === */
.gallery-grid { display: grid; gap: 14px; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, 320px); grid-template-areas: "a b c" "a d e"; }
.gallery-card { position: relative; overflow: hidden; border-radius: 10px;
  background: var(--paper-lt); padding: 10px;
  box-shadow: var(--shadow-card); transition: all 0.5s cubic-bezier(.2,.8,.2,1);
  border: 1px solid var(--ink-line);
}
.gallery-card-inner { position: relative; height: 100%; overflow: hidden; border-radius: 4px; }
.gallery-card:hover { border-color: var(--cedar-lt); transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.gallery-card:hover .gallery-card-inner img { transform: scale(1.05); }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(.2,.8,.2,1); }
/* v7: stronger gradient scrim — text on photos was hard to read */
.gallery-card-cap { position: absolute; bottom: 0; left: 0; right: 0; padding: 26px 24px 22px;
  background: linear-gradient(180deg, transparent 0%, rgba(15,24,37,0.45) 35%, rgba(11,17,28,0.96) 100%);
  color: var(--paper-lt);
}
.gallery-card-cap .tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; color: var(--paper-lt); text-transform: uppercase;
  margin-bottom: 8px; padding: 4px 9px;
  background: rgba(15,24,37,0.65); border: 1px solid rgba(247,237,215,0.40);
  border-radius: 4px; backdrop-filter: blur(6px);
  text-shadow: 0 1px 4px rgba(0,0,0,0.50);
}
.gallery-card-cap .title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 19px; line-height: 1.18; letter-spacing: -0.012em; color: #FFFDF6; text-shadow: 0 2px 8px rgba(0,0,0,0.60), 0 0 16px rgba(0,0,0,0.40); }
.g-a { grid-area: a; } .g-b { grid-area: b; } .g-c { grid-area: c; } .g-d { grid-area: d; } .g-e { grid-area: e; }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: 1fr; grid-template-rows: repeat(5, 280px); grid-template-areas: "a" "b" "c" "d" "e"; } }

/* === PRICING === */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.price-card {
  position: relative; padding: 36px 32px 30px;
  background: linear-gradient(180deg, var(--paper-lt) 0%, var(--paper) 100%);
  border: 1px solid var(--ink-line); border-radius: 18px;
  transition: all 0.4s cubic-bezier(.2,.8,.2,1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 4px rgba(74,47,24,0.05),
    0 10px 24px rgba(74,47,24,0.10),
    0 28px 56px rgba(74,47,24,0.10);
  overflow: hidden;
}
.price-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, transparent, var(--cedar-lt), transparent);
  opacity: 0.5;
}
.price-card:hover { transform: translateY(-6px); border-color: var(--cedar-lt); box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 4px 8px rgba(74,47,24,0.08), 0 18px 40px rgba(74,47,24,0.16), 0 40px 70px rgba(74,47,24,0.16); }
/* v93: Featured pricing card — Natural Slate texture (Karl's pick from directions page) */
.price-card.featured {
  background:
    linear-gradient(180deg, rgba(20,28,40,0.40) 0%, rgba(14,20,32,0.55) 60%, rgba(8,14,24,0.65) 100%),
    url('../img/dir-slate.jpg') center/cover;
  color: var(--paper-lt);
  border: 3px solid var(--cedar);
  overflow: visible;
  box-shadow:
    inset 0 1px 0 rgba(247,237,215,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 4px 10px rgba(26,38,56,0.24),
    0 22px 44px rgba(26,38,56,0.36),
    0 52px 102px rgba(26,38,56,0.38);
}
.price-card.featured::before {
  content: 'Most Built';
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -55%);
  padding: 7px 18px;
  background: linear-gradient(180deg, #D4915F 0%, #B07A47 55%, #8A5A2F 100%);
  color: #FFFDF6; font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  border-radius: 999px;
  border: 1.5px solid rgba(74,47,24,0.55);
  text-shadow: 0 1px 0 rgba(74,47,24,0.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(74,47,24,0.45),
    0 4px 12px rgba(74,47,24,0.40),
    0 8px 20px rgba(15,24,37,0.30);
  white-space: nowrap;
  z-index: 5;
}
.price-card-head { padding-bottom: 22px; border-bottom: 1px dashed var(--ink-line-2); margin-bottom: 24px; }
.price-card.featured .price-card-head { border-bottom-color: rgba(247,237,215,0.20); }
.price-card-tag { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; color: var(--ink); letter-spacing: 0.14em; margin-bottom: 8px; text-transform: uppercase; }
.price-card.featured .price-card-tag { color: var(--paper-lt); }
.price-card-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 26px; color: var(--ink); margin-bottom: 14px; letter-spacing: -0.015em; }
.price-card.featured .price-card-title { color: var(--paper-lt); }
.price-card-price { font-family: 'Fraunces', serif; font-weight: 500; font-size: 38px; letter-spacing: -0.025em; line-height: 1; color: var(--ink); font-feature-settings: 'tnum'; }
.price-card.featured .price-card-price { color: var(--paper-lt); }
.price-card-price small { font-size: 16px; color: var(--ink-mute); font-weight: 500; }
.price-card.featured .price-card-price small { color: rgba(247,237,215,0.65); }
.price-card-sub { color: var(--ink-mute); font-size: 12.5px; margin-top: 8px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; }
.price-card.featured .price-card-sub { color: rgba(247,237,215,0.65); }
.price-card-list { display: flex; flex-direction: column; gap: 12px; }
.price-card-list li { list-style: none; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.price-card.featured .price-card-list li { color: var(--paper-lt); }
.price-card-list svg { width: 14px; height: 14px; stroke: var(--sage); stroke-width: 3; fill: none; flex-shrink: 0; }
.price-card.featured .price-card-list svg { stroke: var(--honey); }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; } }

/* === TESTIMONIALS — v6: dimensional cards === */
.testi-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* v92.8: REVERT — back to oak baseline */
.testi-card {
  position: relative; padding: 36px 30px 28px;
  background:
    linear-gradient(180deg, rgba(74,47,24,0.32) 0%, rgba(58,38,18,0.46) 60%, rgba(40,24,12,0.55) 100%),
    url('../img/oak-premium.jpg') center/cover;
  border: 2.5px solid var(--cedar-deep);
  border-radius: 18px;
  box-shadow:
    inset 0 1.5px 0 rgba(247,237,215,0.20),
    inset 0 -1.5px 0 rgba(0,0,0,0.35),
    0 6px 14px rgba(74,47,24,0.22),
    0 22px 44px rgba(74,47,24,0.26),
    0 44px 80px rgba(74,47,24,0.22);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(.2,.9,.2,1);
}
.testi-card::before { display: none; }
.testi-card::after {
  content: '"'; position: absolute; top: 14px; right: 26px;
  font-family: 'Fraunces', serif; font-size: 96px; font-weight: 500;
  color: var(--paper-lt);
  opacity: 0.22; line-height: 0.7;
  text-shadow: 0 2px 8px rgba(0,0,0,0.40);
}
.testi-card:hover {
  transform: translateY(-4px); border-color: var(--cedar);
  box-shadow:
    inset 0 1.5px 0 rgba(247,237,215,0.24),
    inset 0 -1.5px 0 rgba(0,0,0,0.35),
    0 8px 18px rgba(74,47,24,0.28),
    0 30px 56px rgba(74,47,24,0.32),
    0 56px 96px rgba(74,47,24,0.26);
}
.testi-card .stars { color: #F4C56F; letter-spacing: 3px; font-size: 15px; margin-bottom: 16px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.50)); position: relative; z-index: 2; }
.testi-card .quote { font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; font-size: 16.5px; color: #FFFDF6; line-height: 1.55; margin-bottom: 24px; position: relative; z-index: 2; text-shadow: 0 1px 4px rgba(15,24,37,0.50); }
.testi-author { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px dashed var(--ink-line); position: relative; z-index: 2; }
.testi-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(180deg, #D4915F 0%, #B07A47 50%, #8A5A2F 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 600; color: var(--paper-lt); font-size: 17px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 4px 10px rgba(176,122,71,0.40);
  text-shadow: 0 1px 0 rgba(74,47,24,0.40);
}
.testi-name { font-weight: 700; color: #FFFDF6; font-size: 14px; text-shadow: 0 1px 3px rgba(15,24,37,0.55); position: relative; z-index: 2; }
.testi-loc { font-size: 11.5px; color: #FFFDF6; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; font-weight: 600; text-shadow: 0 1px 5px rgba(15,24,37,0.85), 0 1px 2px rgba(0,0,0,0.50); position: relative; z-index: 2; }
@media (max-width: 900px) { .testi-wrap { grid-template-columns: 1fr; } }

/* === TRUST STRIP — v7: much more substantial badges with cedar-gradient icon discs === */
.trust-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
/* v90: trust badges — simpler box design per Karl (less heavy shadow, lighter border, cleaner) */
.trust-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 14px 22px;
  background: var(--paper-lt);
  border: 1.5px solid var(--ink-line);
  border-radius: 12px;
  text-align: center; gap: 10px;
  transition: all 0.25s ease;
  position: relative;
  box-shadow: 0 1px 2px rgba(74,47,24,0.06);
}
.trust-badge::before { display: none; }
.trust-badge .ico-disc {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--cedar);
  display: flex; align-items: center; justify-content: center;
  box-shadow: none;
}
.trust-badge .ico-disc svg { width: 22px; height: 22px; stroke: var(--cedar-deep); stroke-width: 1.8; fill: none; filter: none; }
.trust-badge:hover {
  border-color: var(--cedar); transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(74,47,24,0.12);
}
.trust-badge:hover .ico-disc { transform: scale(1.05); }
.trust-badge .label { font-size: 12.5px; color: var(--ink); font-weight: 700; letter-spacing: 0.04em; line-height: 1.2; font-family: 'Inter', sans-serif; margin-top: 4px; }
.trust-badge .sublabel { font-size: 9.5px; color: var(--ink); opacity: 0.55; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.08em; }
@media (max-width: 900px) { .trust-strip { grid-template-columns: repeat(3, 1fr); } }

/* === CITIES — glass over wood === */
.cities-wood {
  position: relative; padding: var(--section-pad) 0;
  background: url('../img/wood-bg.jpg') center/cover;
}
.cities-wood::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,24,37,0.78) 0%, rgba(74,47,24,0.65) 100%); pointer-events: none; }
.cities-wood h2.section-h, .cities-wood .section-eyebrow, .cities-wood .section-lede { position: relative; z-index: 2; }
.cities-wood h2.section-h { color: #FFFDF6; font-weight: 800; letter-spacing: -0.035em; font-size: clamp(42px, 5vw, 64px); text-shadow: 0 2px 14px rgba(15,24,37,0.60); }
.cities-wood h2.section-h .italic { color: #FFFDF6; background: none; -webkit-text-fill-color: #FFFDF6; font-weight: 700; text-shadow: 0 2px 14px rgba(15,24,37,0.60); }
.cities-wood .section-lede { color: #FFFDF6; font-weight: 500; text-shadow: 0 1px 6px rgba(15,24,37,0.55); }
.cities-wood .section-eyebrow { background: rgba(247,237,215,0.08); color: var(--paper-lt); border-color: rgba(247,237,215,0.32); }
.cities-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.city-card { display: block; padding: 22px;
  background: var(--glass-paper);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid var(--glass-edge);
  border-radius: 12px;
  transition: all 0.3s; color: var(--ink); position: relative;
  box-shadow: 0 8px 22px rgba(15,24,37,0.18);
}
.city-card:hover { border-color: var(--cedar); background: var(--glass-paper-2); transform: translateY(-3px); box-shadow: 0 14px 32px rgba(15,24,37,0.30); }
.city-card .pin { display: inline-flex; width: 8px; height: 8px; background: var(--cedar); border-radius: 50%; margin-right: 8px; vertical-align: middle; box-shadow: 0 0 0 3px rgba(176,122,71,0.22); }
.city-card .name { font-family: 'Fraunces', serif; font-weight: 600; font-size: 17px; color: var(--ink); letter-spacing: -0.01em; }
.city-card .meta { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--ink-mute); letter-spacing: 0.06em; margin-top: 4px; }
.city-card .arrow { position: absolute; top: 22px; right: 22px; color: var(--burnt); opacity: 0; transition: opacity 0.3s, transform 0.3s; }
.city-card:hover .arrow { opacity: 1; transform: translateX(4px); }
@media (max-width: 1000px) { .cities-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .cities-grid { grid-template-columns: 1fr; } }

/* === FAQ === */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
/* v89: FAQ tabs — Karl wants compact tabbed UI instead of long vertical list */
.faq-tabs { max-width: 860px; margin: 0 auto; }
.faq-tab-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 26px; }
.faq-tab-btn {
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 12px 22px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, var(--paper-lt) 0%, var(--paper) 100%);
  color: var(--ink); border: 2px solid var(--cedar);
  transition: all 0.25s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 2px 6px rgba(74,47,24,0.08);
}
.faq-tab-btn:hover { border-color: var(--cedar-deep); transform: translateY(-1px); }
.faq-tab-btn.active {
  background: linear-gradient(180deg, #D4915F 0%, #B07A47 55%, #8A5A2F 100%);
  color: #FFFDF6; border-color: var(--cedar-deep);
  text-shadow: 0 1px 0 rgba(74,47,24,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.42),
    inset 0 -1px 0 rgba(74,47,24,0.45),
    0 4px 10px rgba(74,47,24,0.30),
    0 10px 22px rgba(176,122,71,0.36);
}
.faq-panel { display: none; flex-direction: column; gap: 10px; }
.faq-panel.active { display: flex; }
/* === FAQ — v6: dimensional items === */
/* v85: FAQ items get clean cream cards back (transparent + divider was too plain) */
.faq-item {
  position: relative;
  background: linear-gradient(180deg, rgba(253,248,234,0.97) 0%, rgba(247,237,215,0.99) 100%);
  border: 2px solid var(--cedar);
  border-radius: 12px; overflow: hidden;
  transition: all 0.4s cubic-bezier(.2,.9,.2,1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 6px rgba(74,47,24,0.08),
    0 12px 26px rgba(74,47,24,0.10);
}
.faq-item:hover {
  transform: translateY(-1px);
  border-color: var(--cedar-deep);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 4px 10px rgba(74,47,24,0.10),
    0 18px 34px rgba(74,47,24,0.14);
}
.faq-item::before { display: none; }
.faq-item[open] { border-color: var(--cedar-deep); box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), 0 4px 10px rgba(74,47,24,0.12), 0 20px 40px rgba(74,47,24,0.16); }
.faq-item:hover:not([open]) { transform: translateY(-1px); box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), 0 2px 4px rgba(74,47,24,0.06), 0 8px 16px rgba(74,47,24,0.10), 0 22px 40px rgba(74,47,24,0.08); }
.faq-item summary { list-style: none; padding: 24px 28px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: 'Fraunces', serif; font-weight: 600; font-size: 17px; color: var(--ink); letter-spacing: -0.01em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(180deg, #D4915F 0%, #B07A47 50%, #8A5A2F 100%);
  color: var(--paper-lt);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 4px 10px rgba(176,122,71,0.35);
  text-shadow: 0 1px 0 rgba(74,47,24,0.40);
  transition: transform 0.4s cubic-bezier(.2,.9,.2,1);
}
.faq-item[open] summary::after { transform: rotate(135deg); }
.faq-item .faq-a { padding: 0 28px 26px; font-size: 14.5px; color: var(--ink); opacity: 0.78; line-height: 1.65; }

/* === FINAL CTA === */
/* v23: padding 140 → 100 to kill empty space */
section.final {
  position: relative; padding: 110px 0; overflow: hidden; text-align: center;
  border-top: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line);
}
/* v88: Final CTA bg swapped from wood deck photo → blueprint sketch (Karl: "old header with the sketch") */
section.final::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: url('../img/hero-bg-A.jpg') center/cover no-repeat;
}
section.final::after {
  /* v88: light cream wash to keep the blueprint readable + slight vignette */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(247,237,215,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, rgba(15,24,37,0.18) 100%);
}
/* v88: Final CTA gets a "black shadow glass box" behind text per Karl —
   dark navy translucent scrim with cedar accent, like the process steps + testi cards */
/* v93.5: Final CTA scrim — REVERTED to original dark navy gradient per Karl */
.final-content {
  position: relative; z-index: 5;
  max-width: 620px; margin: 0 auto;
  padding: 44px 40px 38px;
  background: linear-gradient(180deg, rgba(31,45,68,0.86) 0%, rgba(20,32,46,0.90) 60%, rgba(15,26,40,0.92) 100%);
  border: 1.5px solid rgba(176,122,71,0.55);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(247,237,215,0.20),
    inset 0 0 0 1px rgba(176,122,71,0.18),
    0 10px 28px rgba(15,24,37,0.42),
    0 32px 68px rgba(15,24,37,0.46);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* v88: Final CTA text on dark navy glass scrim — pure cream, light shadow for crispness */
.final-content h2 {
  color: #FFFDF6; -webkit-text-fill-color: #FFFDF6;
  background: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.final-content h2 .italic {
  font-style: italic;
  background: none;
  color: #FFFDF6; -webkit-text-fill-color: #FFFDF6;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.final-content p {
  color: rgba(247,237,215,0.95); opacity: 1; font-weight: 500; font-size: 17px;
  background: none; padding: 0; border: none; box-shadow: none;
  max-width: 460px; margin: 0 auto 24px;
  text-shadow: none;
}
.final-content .section-eyebrow {
  background: rgba(15,8,3,0.55); color: #FFF7E0;
  border-color: rgba(247,237,215,0.40);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.final-content .final-trust {
  color: #FFFDF6; font-weight: 500;
  text-shadow: 0 1px 4px rgba(15,24,37,0.55);
}
.final-content::before {
  /* v88: top cedar accent strip matching process header + dark-glass cards */
  content: ''; position: absolute; top: -1.5px; left: 22%; right: 22%; height: 2.5px;
  background: linear-gradient(90deg, transparent, var(--cedar) 30%, var(--cedar-lt) 50%, var(--cedar) 70%, transparent);
  border-radius: 2px;
}
/* v88: corner crops killed — dark glass treatment doesn't need them */
.final-content::after { display: none; }

/* === v12: DIMENSIONAL OVERLAPPING IVY ===
   Karl: "should look like I can grab the ivy off of the section."
   Photoreal alpha ivy with:
   - Massive drop-shadows (looks lifted off the page surface)
   - Dramatic edge overlap (-120 to -200px past section bounds)
   - Multiple z-index layers (some behind cards, some in front)
   - Long strands that drape FROM one section INTO the next.
   The .ivy-ink class is repurposed as a wrapper that takes the real PNG via background-image
   and renders it with heavy 3D shadowing. Tinting goes away — real leaves stay green. */

.ivy-ink {
  position: absolute; pointer-events: none; z-index: 5;
  background-position: center; background-repeat: no-repeat; background-size: contain;
  /* THE shadow stack — this is what makes it feel attached/grabbable.
     Multi-layer cast shadows simulate ivy elevated above the page surface. */
  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,0.30))    /* tight contact shadow */
    drop-shadow(0 14px 28px rgba(0,0,0,0.35))  /* mid drop */
    drop-shadow(0 38px 60px rgba(0,0,0,0.30))  /* wide soft cast */
    contrast(1.06) saturate(1.12);
}
.ivy-ink.strand   { background-image: url('../img/ivy-left-alpha.png'); }
.ivy-ink.strand-r { background-image: url('../img/ivy-right-alpha.png'); }
.ivy-ink.garland  { background-image: url('../img/ivy-garland-alpha.png'); background-size: cover; background-position: top center; }
.ivy-ink.corner   { background-image: url('../img/ivy-corner-alpha.png'); }

/* Corner ivy — drapes INTO the section from its top-corner anchor (no negative left/right that escapes page bounds) */
.ivy-ink.tl, .ivy-ink.tr, .ivy-ink.bl, .ivy-ink.br {
  width: 340px; height: 420px;
}
.ivy-ink.tl { top: -100px; left: 0; }
.ivy-ink.tr { top: -100px; right: 0; transform: scaleX(-1); }
.ivy-ink.bl { bottom: -100px; left: 0; transform: scaleY(-1); }
.ivy-ink.br { bottom: -100px; right: 0; transform: scale(-1, -1); }

/* === v14: THE BACKYARD — multi-layer intertwined strands === */
/* Single-strand curtain (legacy, kept) — INSIDE page bounds */
.ivy-ink.curtain-l { width: 240px; height: 820px; left: 0; top: -160px; }
.ivy-ink.curtain-r { width: 240px; height: 820px; right: 0; top: -160px; transform: scaleX(-1); }

/* Multi-strand variations for the "backyard" feel.
   Different positions + rotations + opacities + z-indexes make strands feel intertwined. */

/* Front layers — sharp, in front of cards */
.ivy-ink.strand-1 {
  width: 210px; height: 720px;
  left: -8px; top: -120px;
  z-index: 8;
  opacity: 0.95;
}
.ivy-ink.strand-2 {
  width: 160px; height: 540px;
  left: 180px; top: -80px;
  transform: rotate(-4deg);
  z-index: 8;
  opacity: 0.78;
}
.ivy-ink.strand-3 {
  width: 280px; height: 880px;
  right: -10px; top: -200px;
  transform: scaleX(-1) rotate(2deg);
  z-index: 8;
  opacity: 0.92;
}
.ivy-ink.strand-4 {
  width: 170px; height: 580px;
  right: 200px; top: -100px;
  transform: scaleX(-1) rotate(-3deg);
  z-index: 8;
  opacity: 0.72;
}

/* Background layers — softer, peek from behind cards. Tinted slightly sage for atmospheric depth. */
.ivy-ink.bg-1 {
  width: 320px; height: 920px;
  left: 4%; top: -180px;
  z-index: 1;
  opacity: 0.62;
  filter:
    drop-shadow(0 6px 14px rgba(0,0,0,0.20))
    contrast(0.92) saturate(0.85) hue-rotate(-6deg) brightness(0.95);
}
.ivy-ink.bg-2 {
  width: 280px; height: 820px;
  right: 6%; top: -160px;
  transform: scaleX(-1) rotate(1deg);
  z-index: 1;
  opacity: 0.55;
  filter:
    drop-shadow(0 6px 14px rgba(0,0,0,0.20))
    contrast(0.92) saturate(0.85) hue-rotate(-6deg) brightness(0.95);
}
.ivy-ink.bg-3 {
  width: 240px; height: 680px;
  left: 38%; top: -100px;
  transform: rotate(3deg);
  z-index: 1;
  opacity: 0.45;
  filter:
    drop-shadow(0 6px 14px rgba(0,0,0,0.20))
    contrast(0.88) saturate(0.75) hue-rotate(-8deg) brightness(0.92);
}

/* Small accent sprigs that peek from behind cards */
.ivy-ink.sprig-1 {
  width: 140px; height: 280px;
  left: 22%; top: 60px;
  transform: rotate(-12deg);
  z-index: 1;
  opacity: 0.72;
}
.ivy-ink.sprig-2 {
  width: 130px; height: 260px;
  right: 18%; top: 240px;
  transform: scaleX(-1) rotate(15deg);
  z-index: 1;
  opacity: 0.68;
}
.ivy-ink.sprig-3 {
  width: 120px; height: 240px;
  left: 64%; bottom: 80px;
  transform: rotate(-20deg);
  z-index: 1;
  opacity: 0.65;
}

/* Garland — overlapping the section seam, draping into BOTH adjacent sections */
.ivy-ink.h-divider {
  position: relative; width: 100%; left: 0;
  height: 200px; margin: -90px 0 -90px 0;
  z-index: 8;
}

/* Layer variants for the woven look — some ivy behind cards, some in front */
.ivy-ink.behind { z-index: 1; }
.ivy-ink.front  { z-index: 12; }

@media (max-width: 800px) {
  .ivy-ink.tl, .ivy-ink.tr, .ivy-ink.bl, .ivy-ink.br { width: 200px; height: 260px; top: -60px; }
  .ivy-ink.tl { left: -60px; } .ivy-ink.tr { right: -60px; }
  .ivy-ink.curtain-l, .ivy-ink.curtain-r { width: 130px; height: 600px; }
  .ivy-ink.h-divider { height: 130px; margin: -60px 0 -60px 0; }
}

/* Legacy photoreal vine — kept ONLY for hero showcase photo frame */
.vine {
  position: absolute; pointer-events: none; z-index: 2;
  overflow: visible;
}
.vine img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.18)) contrast(1.04) saturate(1.10);
}
.vine.tl { top: -36px; left: -56px; }
.vine.tr { top: -36px; right: -56px; transform: scaleX(-1); }
.vine.bl { bottom: -36px; left: -56px; transform: scaleY(-1); }
.vine.br { bottom: -36px; right: -56px; transform: scale(-1, -1); }
.vine.sm { width: 140px; height: 200px; }
.vine.md { width: 220px; height: 320px; }
.vine.lg { width: 320px; height: 440px; }
.vine.wide { width: 100%; height: 110px; }
.vine.wide img { object-position: center; }
.vine.behind { z-index: 1; }   /* drops behind nearby cards/elements */
.vine.front  { z-index: 6; }   /* floats above */
/* Photo-frame anchored ivy on hero showcase */
.vine.vine-photo-tl {
  width: 180px; height: 240px; top: -50px; left: -60px; z-index: 6;
}
.vine.vine-photo-br {
  width: 140px; height: 200px; bottom: -50px; right: -60px;
  transform: scale(-1, -1); z-index: 6;
}
@media (max-width: 800px) { .vine.lg { width: 200px; height: 280px; } .vine.md { width: 140px; height: 200px; } }

/* === v10: PAGE-EDGE IVY CURTAINS ===
   Long ivy strands threading the LEFT and RIGHT edges of major page regions.
   Each curtain spans multiple sections so the ivy reads as continuous growth
   weaving down the page, not separate corner stickers. */
.ivy-curtain {
  position: absolute; pointer-events: none; z-index: 1;
  width: 280px; overflow: visible;
}
.ivy-curtain img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.15)) contrast(1.04) saturate(1.10);
  opacity: 0.94;
}
.ivy-curtain.left  { left:  -110px; }
.ivy-curtain.right { right: -110px; transform: scaleX(-1); }
@media (max-width: 1100px) { .ivy-curtain { width: 200px; } .ivy-curtain.left { left: -80px; } .ivy-curtain.right { right: -80px; } }
@media (max-width: 800px)  { .ivy-curtain { display: none; } }

/* === v9: WOOD-PLANK DIVIDER STRIP ===
   Thin horizontal wood-grain ribbon between cream sections.
   Reads like a real deck board running across — gives the eye
   a textural anchor between otherwise flat cream zones. */
.plank-divider {
  position: relative;
  height: 56px;
  background:
    /* top-edge inset highlight */
    linear-gradient(180deg, rgba(247,237,215,0.40) 0%, transparent 6%),
    /* deep grain shading */
    linear-gradient(180deg, rgba(74,47,24,0.20) 0%, transparent 18%, transparent 82%, rgba(74,47,24,0.28) 100%),
    /* the wood image itself */
    url('../img/wood-bg.jpg') center/cover;
  border-top: 1px solid rgba(74,47,24,0.30);
  border-bottom: 1px solid rgba(74,47,24,0.36);
  box-shadow:
    inset 0 2px 0 rgba(247,237,215,0.32),
    inset 0 -2px 0 rgba(0,0,0,0.18),
    0 6px 18px rgba(74,47,24,0.14);
}
.plank-divider::before, .plank-divider::after {
  /* subtle plank-seam lines */
  content: ''; position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(74,47,24,0.32);
}
.plank-divider::before { left: 33%; box-shadow: 1px 0 0 rgba(247,237,215,0.15); }
.plank-divider::after  { left: 67%; box-shadow: 1px 0 0 rgba(247,237,215,0.15); }
.plank-divider .mark {
  /* centered cedar emblem stamped into the wood */
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #E4A672, #B07A47 50%, #7E4A24 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.40),
    inset 0 -1.5px 0 rgba(0,0,0,0.22),
    0 4px 10px rgba(74,47,24,0.40),
    0 0 0 4px rgba(247,237,215,0.94),
    0 0 0 5px rgba(74,47,24,0.20);
}
.plank-divider .mark svg { width: 22px; height: 22px; stroke: #F5E8C8; stroke-width: 2; fill: none; }

/* === v9: BLUEPRINT GRID OVERLAY ===
   Subtle architectural grid behind specific sections — gives "engineered" feel
   without competing with content. Use on Anatomy + Process. */
.blueprint-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.20;
  background-image:
    linear-gradient(rgba(26,38,56,0.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,38,56,0.20) 1px, transparent 1px),
    linear-gradient(rgba(26,38,56,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,38,56,0.08) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 0%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 0%, transparent 90%);
}

/* === v9: ORNAMENT MARK ===
   Cedar emblem with thin hairlines extending left/right — a section divider element. */
.ornament {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; margin: 0 auto 36px; max-width: 540px;
}
.ornament .line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--cedar) 50%, transparent); }
.ornament .disc {
  width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #E4A672, #B07A47 50%, #7E4A24 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    0 4px 10px rgba(74,47,24,0.35),
    0 0 0 3px rgba(247,237,215,0.92),
    0 0 0 4px rgba(74,47,24,0.18);
}
.ornament .disc svg { width: 16px; height: 16px; stroke: #F5E8C8; stroke-width: 2; fill: none; }

/* ====================================================================
   v26 MOTION + DEPTH LAYER
   ==================================================================== */

/* 1. Reveal-on-scroll fade-up (default off, JS toggles .revealed) */
.r-up { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(.2,.9,.2,1), transform 0.8s cubic-bezier(.2,.9,.2,1); will-change: transform, opacity; }
.r-up.revealed { opacity: 1; transform: translateY(0); }
.r-fade { opacity: 0; transition: opacity 0.8s ease-out; }
.r-fade.revealed { opacity: 1; }

/* Stagger children */
.r-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 0.65s cubic-bezier(.2,.9,.2,1), transform 0.65s cubic-bezier(.2,.9,.2,1); }
.r-stagger > *:nth-child(1) { transition-delay: 0.04s; }
.r-stagger > *:nth-child(2) { transition-delay: 0.14s; }
.r-stagger > *:nth-child(3) { transition-delay: 0.24s; }
.r-stagger > *:nth-child(4) { transition-delay: 0.34s; }
.r-stagger > *:nth-child(5) { transition-delay: 0.44s; }
.r-stagger > *:nth-child(6) { transition-delay: 0.54s; }
.r-stagger.revealed > * { opacity: 1; transform: translateY(0); }

/* 2. Number count-up just uses JS, no extra CSS needed */

/* 3. 3D mouse-tilt — base styles. JS adds transform inline. */
.tilt { transform-style: preserve-3d; transition: transform 0.45s cubic-bezier(.2,.9,.2,1), box-shadow 0.4s; will-change: transform; }
.tilt > * { transform: translateZ(0); }

/* 4. Material card photo zoom on hover (replaces flat hover) */
.mat-card-img { transition: transform 0.7s cubic-bezier(.2,.9,.2,1); transform-origin: center; }
.mat-card:hover .mat-card-img { transform: scale(1.12); }

/* v48: VISIBLE hover effects on all cards — lift, gold glow ring, accent border */
.mat-card, .price-card, .testi-card, .near-me-card, .city-card, .usp-card, .process-step, .trust-badge, .faq-item, .gallery-card {
  transition: transform 0.35s cubic-bezier(.2,.9,.2,1), box-shadow 0.4s cubic-bezier(.2,.9,.2,1), border-color 0.3s;
}
.mat-card:hover, .price-card:hover, .testi-card:hover, .near-me-card:hover, .city-card:hover, .usp-card:hover, .process-step:hover, .trust-badge:hover, .faq-item:hover:not([open]), .gallery-card:hover {
  transform: translateY(-8px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    0 0 0 2px rgba(217,164,99,0.45),
    0 8px 16px rgba(74,47,24,0.10),
    0 24px 48px rgba(74,47,24,0.22),
    0 56px 90px rgba(74,47,24,0.16);
  border-color: var(--cedar) !important;
}
/* Slight scale boost on the card content itself for depth illusion */
.mat-card, .price-card, .testi-card, .usp-card, .process-step, .near-me-card { will-change: transform, box-shadow; }
/* CTA hover bigger lift */
.mat-card-cta { transition: transform 0.3s, gap 0.3s, color 0.2s; }
.mat-card:hover .mat-card-cta { transform: translateX(4px); }
.mat-card-cta svg { transition: transform 0.3s; }
.mat-card:hover .mat-card-cta svg { transform: translateX(4px); }

/* 5. CTA button shimmer */
.btn-grad { background-size: 200% 100%; background-position: 0 0; transition: background-position 0.6s cubic-bezier(.2,.9,.2,1), transform 0.3s, box-shadow 0.4s; position: relative; overflow: hidden; }
.btn-grad::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.30) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform 0.7s cubic-bezier(.4,0,.2,1);
}
.btn-grad:hover { background-position: 100% 0; }
.btn-grad:hover::after { transform: translateX(100%); }

/* 6. Trex Pro Platinum gentle pulse */
@keyframes badgePulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 0 0 0 rgba(217,164,99,0.55), 0 4px 10px rgba(176,122,71,0.30); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 0 0 10px rgba(217,164,99,0),    0 4px 10px rgba(176,122,71,0.30); }
}
.badge-pulse { animation: badgePulse 3s ease-out infinite; }

/* Hero showcase: idle gentle float */
@keyframes heroFloat {
  0%, 100% { transform: rotate(-0.6deg) translateY(0); }
  50%      { transform: rotate(-0.6deg) translateY(-6px); }
}
.hero-showcase { animation: heroFloat 8s ease-in-out infinite; }
.hero-showcase:hover { animation-play-state: paused; transform: rotate(0deg) translateY(0); }

/* Process step icon — subtle ride on hover */
.process-step:hover .process-step-icon { transform: translateY(-3px) rotate(-3deg); }
.process-step-icon { transition: transform 0.4s cubic-bezier(.2,.9,.2,1); }

/* Anatomy callouts stagger */
.anatomy-callouts.r-stagger > .anatomy-callout:nth-child(1) { transition-delay: 0.1s; }
.anatomy-callouts.r-stagger > .anatomy-callout:nth-child(2) { transition-delay: 0.22s; }
.anatomy-callouts.r-stagger > .anatomy-callout:nth-child(3) { transition-delay: 0.34s; }
.anatomy-callouts.r-stagger > .anatomy-callout:nth-child(4) { transition-delay: 0.46s; }
.anatomy-callouts.r-stagger > .anatomy-callout:nth-child(5) { transition-delay: 0.58s; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .r-up, .r-fade, .r-stagger > * { opacity: 1; transform: none; transition: none; }
  .tilt { transition: none; transform: none !important; }
  .mat-card:hover .mat-card-img { transform: none; }
  .badge-pulse { animation: none; }
  .hero-showcase { animation: none; }
  .btn-grad::after { display: none; }
}

/* ====================================================================
   v24 PIZZAZ LAYER — architectural rule lines, JDB monogram seal,
   walnut strip-divider (wood as accent not canvas), Trex color chips
   ==================================================================== */

/* Walnut strip-divider — wood promoted to seam accent, demoted from canvas */
.walnut-seam {
  position: relative;
  height: 64px;
  background: #4A2F18 url('../img/walnut-premium.jpg') center/cover;
  box-shadow:
    inset 0 8px 16px rgba(0,0,0,0.35),
    inset 0 -8px 16px rgba(0,0,0,0.35);
  overflow: hidden;
}
.walnut-seam::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,20,33,0.25), transparent 30%, transparent 70%, rgba(11,20,33,0.25));
  pointer-events: none;
}
.walnut-seam .seal {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 14px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 0.30em; text-transform: uppercase; color: rgba(247,237,215,0.65);
  z-index: 2;
}
.walnut-seam .seal::before,
.walnut-seam .seal::after {
  content: ''; width: 50px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217,164,99,0.65), transparent);
}
.walnut-seam .mono-mark {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(180deg, #D9A463 0%, #8B5E32 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; font-size: 18px;
  color: #14202E; box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 6px 14px rgba(0,0,0,0.40);
}

/* Architectural rule lines under section H2s */
.section-h::after {
  content: ''; display: block; margin: 14px auto 0;
  width: 80px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cedar) 30%, var(--cedar) 70%, transparent);
}
section.ink-bg .section-h::after,
section.materials-wood .section-h::after,
section.cities-wood .section-h::after {
  background: linear-gradient(90deg, transparent, var(--honey-bright) 30%, var(--honey-bright) 70%, transparent);
}

/* JDB monogram seal — subtle repeating mark at section corners */
.jdb-seal {
  position: absolute; width: 60px; height: 60px;
  border: 1.5px solid var(--cedar-deep);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; font-size: 22px;
  color: var(--cedar-deep); opacity: 0.40;
  pointer-events: none; z-index: 1;
}
.jdb-seal::before {
  content: ''; position: absolute; inset: 4px; border-radius: 50%;
  border: 1px dashed var(--cedar-deep); opacity: 0.55;
}

/* Trex color chips inside Trex material card */
.trex-chips {
  display: flex; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--ink-line);
}
.trex-chips .chip {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 600;
  color: var(--ink); opacity: 0.65; letter-spacing: 0.06em; text-transform: uppercase;
}
.trex-chips .chip .swatch {
  width: 22px; height: 22px; border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.40), inset 0 -1px 0 rgba(0,0,0,0.25), 0 2px 4px rgba(74,47,24,0.25);
}

/* v27: body-text contrast sweep — all body opacities lifted to ≥0.85, kickers to ≥0.70 */
.section-lede { color: var(--ink); opacity: 0.88; }
.hero-trust-row { color: var(--ink); opacity: 0.86; }
.testi-loc { color: #FFFDF6; opacity: 1; }
.hero-stat .l { opacity: 0.85; }
.hero-stat .v .plus { opacity: 0.72; }
.near-me-card .kicker { opacity: 0.72; }
.near-me-card > span { opacity: 0.88; }
.process-step-body { color: #FFFDF6; opacity: 0.92; }
.process-step-num { opacity: 0.72; color: #FFFDF6; }
.mat-card-tagline { color: var(--ink); opacity: 0.86; }
.usp-card p { color: var(--ink); opacity: 0.86; }
.anatomy-callout span { color: rgba(247,237,215,0.92); opacity: 1; }
.section-eyebrow .num { color: var(--cedar-deep); opacity: 0.85; font-weight: 700; }
.faq-item .faq-a { color: var(--ink); opacity: 0.86; }
.trex-chips .chip { opacity: 0.85; }

/* v24: "500+" reborn as a horizontal STAT BAND — kills empty cream space.
   500+ flush left, vertical divider, italic label center, secondary stats column right. */
/* v51: 500+ block — shrink to content width via inline-grid, no stretched empty space */
.bignum-block {
  margin: 48px auto 0; padding: 28px 40px;
  max-width: max-content;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(217,164,99,0.10), transparent 65%),
    linear-gradient(180deg, rgba(247,237,215,0.98) 0%, rgba(241,230,205,0.98) 100%);
  border: 1px solid var(--ink-line); border-radius: 16px;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    0 18px 40px rgba(74,47,24,0.16),
    0 4px 12px rgba(74,47,24,0.08);
  display: inline-grid; grid-template-columns: auto auto auto auto;
  gap: 28px; align-items: center; justify-items: start;
  position: relative;
}
.bignum-block .label { max-width: 240px; }
.bignum-block .stats-col { text-align: left; }
.bignum-block::before {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 3px;
  background: linear-gradient(90deg, transparent, var(--cedar-lt) 50%, transparent);
  border-radius: 0 0 4px 4px;
}
@media (max-width: 900px) {
  .bignum-block { gap: 18px; padding: 22px 22px; }
  .bignum-block .vrule { display: none; }
}
.bignum-block .num {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: clamp(64px, 7vw, 100px); line-height: 0.85;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #243349 0%, #14202E 70%, #0A1320 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(247,237,215,0.85))
    drop-shadow(0 2px 0 rgba(74,47,24,0.28))
    drop-shadow(0 6px 16px rgba(15,24,37,0.18));
}
.bignum-block .num .plus {
  font-family: 'Fraunces', serif; font-size: 0.50em; vertical-align: super; line-height: 0;
  background: linear-gradient(180deg, #D9A463 0%, #B07A47 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: none;
}
.bignum-block .vrule { width: 1px; align-self: stretch; background: linear-gradient(180deg, transparent, var(--ink-line) 20%, var(--ink-line) 80%, transparent); }
.bignum-block .label {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 500;
  font-size: clamp(18px, 1.9vw, 22px); color: var(--ink);
  line-height: 1.25; letter-spacing: -0.015em; max-width: 280px;
}
.bignum-block .label strong { color: var(--cedar-deep); font-weight: 700; font-style: normal; }
.bignum-block .stats-col {
  display: flex; flex-direction: column; gap: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
  color: var(--ink); opacity: 0.85; letter-spacing: 0.10em; text-transform: uppercase;
  line-height: 1.5; text-align: right;
}
.bignum-block .stats-col .row { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.bignum-block .stats-col .row .v { color: var(--cedar-deep); font-weight: 800; opacity: 1; font-family: 'Fraunces', serif; font-style: italic; font-size: 16px; letter-spacing: -0.01em; }

/* === v10: IVY GARLAND DIVIDER (alpha, no blend) ===
   Real ivy strand hangs naturally because the PNG is now true alpha. */
.ivy-divider {
  position: relative; width: 100%; height: 170px;
  overflow: visible; margin: -60px 0 -60px 0;   /* overlap into both adjacent sections */
  pointer-events: none; z-index: 3;
}
.ivy-divider img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.22)) contrast(1.04) saturate(1.10);
}

/* === v9: SMALL IVY SPRIG ORNAMENT ===
   Tiny accent — sits beside section eyebrow chips, or in corners as decorative leaf. */
.ivy-sprig {
  display: inline-block;
  width: 64px; height: 64px;
  vertical-align: middle;
  pointer-events: none;
}
.ivy-sprig img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 65% 80% at 50% 50%, #000 0%, #000 50%, transparent 95%);
          mask-image: radial-gradient(ellipse 65% 80% at 50% 50%, #000 0%, #000 50%, transparent 95%);
  filter: contrast(1.05) saturate(1.10);
  opacity: 0.88;
}
.ink-bg .ivy-sprig img, .materials-wood .ivy-sprig img, .cities-wood .ivy-sprig img,
.near-me-strip .ivy-sprig img {
  mix-blend-mode: screen;
}
.final h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(42px, 5.5vw, 72px); letter-spacing: -0.03em; line-height: 1.0; margin-bottom: 22px; color: var(--ink); }
.final h2 .italic { font-style: italic; background: none; -webkit-background-clip: initial; background-clip: initial; color: #FFF7E0; -webkit-text-fill-color: #FFF7E0; }
.final p { font-size: 19px; color: #FFFDF6; line-height: 1.55; margin-bottom: 36px; text-shadow: 0 1px 4px rgba(15,24,37,0.55); font-weight: 500; }
.final-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.final-trust { margin-top: 32px; font-size: 13px; color: var(--ink-mute); letter-spacing: 0.06em; font-family: 'JetBrains Mono', monospace; }

/* v86: footer — solid cream paper, dark ink text for full readability */
footer {
  padding: 32px 0 28px;
  background: linear-gradient(180deg, #F7EDD7 0%, #F1E6CD 100%);
  color: var(--ink); font-weight: 500;
  text-align: center; font-size: 13px; letter-spacing: 0.04em;
  border-top: 1px solid rgba(74,47,24,0.22);
  position: relative;
}
footer::before { display: none; }
footer span { color: var(--ink-2); font-weight: 500; }

/* v58: the OLD sketch header brought into the footer — section-head-card pattern (cream panel + dashed sketch border + drafting corner crops) sitting on dark navy */
/* v85: footer titleblock killed entirely — Karl: "footer is terrible, hate the box" */
.footer-titleblock { display: none; }
.footer-titleblock::before {
  content: ''; position: absolute; inset: 8px; pointer-events: none;
  border: 1px dashed rgba(74,47,24,0.26); border-radius: 3.5px;
}
/* Drafting corner crops — match section-head-card vocabulary */
.footer-titleblock .sk-c {
  position: absolute; width: 20px; height: 20px; pointer-events: none;
}
.footer-titleblock .sk-c::before, .footer-titleblock .sk-c::after {
  content: ''; position: absolute; background: var(--cedar-deep); opacity: 0.6;
}
.footer-titleblock .sk-c.tl { top: -2px; left: -2px; }
.footer-titleblock .sk-c.tl::before { top: 0; left: 0; width: 18px; height: 1.4px; }
.footer-titleblock .sk-c.tl::after  { top: 0; left: 0; width: 1.4px; height: 18px; }
.footer-titleblock .sk-c.tr { top: -2px; right: -2px; }
.footer-titleblock .sk-c.tr::before { top: 0; right: 0; width: 18px; height: 1.4px; }
.footer-titleblock .sk-c.tr::after  { top: 0; right: 0; width: 1.4px; height: 18px; }
.footer-titleblock .sk-c.bl { bottom: -2px; left: -2px; }
.footer-titleblock .sk-c.bl::before { bottom: 0; left: 0; width: 18px; height: 1.4px; }
.footer-titleblock .sk-c.bl::after  { bottom: 0; left: 0; width: 1.4px; height: 18px; }
.footer-titleblock .sk-c.br { bottom: -2px; right: -2px; }
.footer-titleblock .sk-c.br::before { bottom: 0; right: 0; width: 18px; height: 1.4px; }
.footer-titleblock .sk-c.br::after  { bottom: 0; right: 0; width: 1.4px; height: 18px; }

/* v80: footer titleblock — all cream, no honey */
.footer-titleblock .ftb-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(247,237,215,0.10); color: #FFF7E0;
  padding: 7px 14px; border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; margin-bottom: 18px;
  border: 1px solid rgba(247,237,215,0.40); text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
}
.footer-titleblock .ftb-eyebrow .num { color: rgba(247,237,215,0.70); font-weight: 600; }
.footer-titleblock .ftb-h {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.025em; line-height: 1.08;
  margin-bottom: 14px; color: #FFF7E0;
}
.footer-titleblock .ftb-h .italic {
  font-style: italic;
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  color: #FFF7E0; -webkit-text-fill-color: #FFF7E0;
}
.footer-titleblock .ftb-lede {
  font-size: 16px; color: rgba(247,237,215,0.85); line-height: 1.6; max-width: 540px; margin: 0 auto 24px;
  font-weight: 450;
}
.footer-titleblock .ftb-cta-row {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.footer-titleblock .ftb-cta-row .btn { font-size: 14px; padding: 12px 22px; }

/* v80: footer title-block meta strip — all cream */
.footer-titleblock .ftb-meta {
  margin-top: 24px; padding-top: 18px;
  border-top: 1px dashed rgba(247,237,215,0.30);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: rgba(247,237,215,0.65);
  letter-spacing: 0.10em; text-transform: uppercase;
}
.footer-titleblock .ftb-meta div { display: flex; flex-direction: column; gap: 4px; }
.footer-titleblock .ftb-meta strong { color: #FFF7E0; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; }
.footer-titleblock .sk-c::before, .footer-titleblock .sk-c::after { background: #FFF7E0; opacity: 0.55; }
.footer-titleblock::before { display: none; }

.footer-bottom-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px;
  padding-top: 8px;
}
@media (max-width: 700px) {
  .footer-titleblock { padding: 28px 22px 22px; }
  .footer-titleblock .ftb-meta { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-phone { display: none; }
  .nav-cta { padding: 10px 14px; font-size: 12px; }
  .hero-grid { gap: 32px; }
  .hero-showcase { transform: none; }
  .container { padding: 0 18px; }
  h1.hero-h1 { font-size: clamp(38px, 8.5vw, 60px); }
  section.s, section.hero { padding: 70px 0; }
  .hero-cta-row { flex-direction: column; align-items: stretch; }
  .hero-cta-row .btn { justify-content: center; }
}
/* ============================================================
 * SPINOFF PAGE CHROME — v94: per-page service + location templates
 * ============================================================ */

/* Visible breadcrumb trail — sits between top nav and hero on all spinoff pages */
.jdb-breadcrumbs {
  position: relative;
  z-index: 2;
  padding: 14px 0 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--ink-line);
  background: rgba(251, 245, 228, 0.55);
}
.jdb-breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.jdb-breadcrumbs li { margin: 0; padding: 0; }
.jdb-breadcrumbs li.sep { color: var(--cedar, #A77B53); opacity: 0.7; user-select: none; }
.jdb-breadcrumbs a {
  color: var(--ink-mute);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.jdb-breadcrumbs a:hover { color: var(--ink); border-bottom-color: var(--cedar, #A77B53); }
.jdb-breadcrumbs li[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

/* Spinoff gallery — responsive 3-col grid (homepage uses a separate fixed-area layout) */
.spinoff-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
}
.spinoff-gallery .gallery-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg, #FFFDF6);
  border: 1px solid var(--ink-line);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 6px rgba(15, 24, 37, 0.06);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.spinoff-gallery .gallery-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(15, 24, 37, 0.12);
}
.spinoff-gallery .gallery-img-wrap {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #E5D2A8 0%, #DECCA0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.spinoff-gallery .gallery-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.gallery-placeholder {
  width: 60%;
  height: 60%;
  color: var(--ink-mute);
  opacity: 0.45;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-placeholder svg { width: 100%; height: auto; }
.spinoff-gallery .gallery-meta { padding: 14px 16px; }
.spinoff-gallery .gallery-loc {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cedar, #A77B53);
  font-weight: 700;
  margin-bottom: 4px;
}
.spinoff-gallery .gallery-size {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}

/* Process grid — 4-step service-specific process */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
}
.process-grid .process-step {
  background: var(--card-bg, #FFFDF6);
  border-left: 4px solid var(--cedar, #A77B53);
  padding: 26px 24px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(15, 24, 37, 0.06);
  position: relative;
}
.process-grid .process-num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 42px;
  font-weight: 700;
  color: var(--cedar, #A77B53);
  line-height: 1;
  margin-bottom: 10px;
}
.process-grid .process-h {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 10px;
}
.process-grid .process-body {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-mute);
  margin: 0;
}

/* Mobile breadcrumb tightening */
@media (max-width: 700px) {
  .jdb-breadcrumbs { padding: 10px 0 6px; font-size: 11px; }
  .jdb-breadcrumbs ol { gap: 6px; }
  .spinoff-gallery { grid-template-columns: 1fr; }
}

/* ============================================================
 * v95: Centered prose sections + spec-list cards
 * (replaces inline-style hacks that referenced undefined --card-bg)
 * ============================================================ */

.jdb-centered-section .section-head { margin-left: auto; margin-right: auto; }

.jdb-prose {
  max-width: 760px;
  margin: 0 auto;
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink);
  text-align: left;
}
.jdb-prose p { margin: 0 0 1.1em; }
.jdb-prose p:last-child { margin-bottom: 0; }
.jdb-prose strong { color: var(--ink); font-weight: 700; }
.jdb-prose em { font-style: italic; color: var(--ink); }

.jdb-spec-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 40px auto 0;
  max-width: 960px;
}
.jdb-spec-list li {
  background: #FFFDF6;
  border-left: 3px solid var(--cedar, #8B5E32);
  padding: 18px 20px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(15, 24, 37, 0.08);
}
.jdb-spec-label {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cedar-deep, #6B4520);
  font-weight: 700;
  margin-bottom: 6px;
}
.jdb-spec-value {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
}
@media (max-width: 900px) { .jdb-spec-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .jdb-spec-list { grid-template-columns: 1fr; } }

/* v95: 3-col testimonial grid (replaces 4-col `.testi-wrap` for spinoff pages
   where we only render 3 reviews per Giovanni's preference). */
.jdb-testi-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
}
@media (max-width: 900px) { .jdb-testi-3col { grid-template-columns: 1fr; } }

/* ============================================================
 * v96: WP admin-bar compatibility (Karl/Giovanni view logged-in)
 * Without this, nav.top clips under WP's fixed admin bar and a
 * sliver of .sketch-global bleeds between admin bar and hero.
 * ============================================================ */
body.admin-bar nav.top { top: 32px; }
body.admin-bar section.hero { margin-top: -32px; padding-top: 104px; }
@media screen and (max-width: 782px) {
  body.admin-bar nav.top { top: 46px; }
  body.admin-bar section.hero { margin-top: -46px; padding-top: 118px; }
}
@media screen and (max-width: 600px) {
  body.admin-bar nav.top { top: 0; }
}

/* ============================================================
 * v96: Themed paper-card wrappers for prose sections + spec list
 * Replaces the "text floating on cream" problem on what-is /
 * why-florida / FAQ. Drafted aesthetic with sketch corners,
 * dashed inner border, cedar accents — matches brand language.
 * ============================================================ */

.jdb-paper-card {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: 36px 42px;
  background: linear-gradient(180deg, #FCF5E2 0%, #F7EDD2 100%);
  border: 1px solid rgba(74, 47, 24, 0.18);
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255, 253, 246, 0.7) inset,
    0 2px 6px rgba(74, 47, 24, 0.08),
    0 14px 32px rgba(74, 47, 24, 0.06);
}
.jdb-paper-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border: 1px dashed rgba(74, 47, 24, 0.28);
  border-radius: 2px;
}
.jdb-paper-card .jdb-sk-c {
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
  z-index: 2;
}
.jdb-paper-card .jdb-sk-c::before,
.jdb-paper-card .jdb-sk-c::after {
  content: "";
  position: absolute;
  background: var(--cedar-deep, #6B4520);
  opacity: 0.65;
}
.jdb-paper-card .jdb-sk-c::before { left: 0;  top: 0; width: 16px; height: 1.5px; }
.jdb-paper-card .jdb-sk-c::after  { left: 0;  top: 0; width: 1.5px; height: 16px; }
.jdb-paper-card .jdb-sk-c.tl { top: -1px;    left: -1px; }
.jdb-paper-card .jdb-sk-c.tr { top: -1px;    right: -1px; transform: rotate(90deg); transform-origin: top right; }
.jdb-paper-card .jdb-sk-c.bl { bottom: -1px; left: -1px; transform: rotate(-90deg); transform-origin: bottom left; }
.jdb-paper-card .jdb-sk-c.br { bottom: -1px; right: -1px; transform: rotate(180deg); transform-origin: bottom right; }
.jdb-paper-card .jdb-prose { max-width: 100%; }
@media (max-width: 700px) {
  .jdb-paper-card { padding: 26px 22px; }
}

/* Spec-list redesign — drafted-blueprint cards, no solid accent bar */
.jdb-spec-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 32px auto 0;
  max-width: 980px;
}
.jdb-spec-list li {
  position: relative;
  background: rgba(255, 253, 246, 0.78);
  padding: 22px 22px 20px;
  border: 1px solid rgba(74, 47, 24, 0.18);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(74, 47, 24, 0.05);
}
.jdb-spec-list li::before {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  border: 1px dashed rgba(74, 47, 24, 0.22);
  border-radius: 1.5px;
}
/* sketch-corner glyphs on each spec card */
.jdb-spec-list li::after {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 12px; height: 12px;
  border-top: 1.5px solid var(--cedar-deep, #6B4520);
  border-left: 1.5px solid var(--cedar-deep, #6B4520);
  opacity: 0.6;
}
.jdb-spec-label {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cedar-deep, #6B4520);
  font-weight: 700;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}
.jdb-spec-value {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink, #1A2638);
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) { .jdb-spec-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .jdb-spec-list { grid-template-columns: 1fr; } }

/* FAQ container — wrap items in a paper-card for visual grouping */
.jdb-faq-card {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  padding: 28px 34px 32px;
  background: linear-gradient(180deg, #FCF5E2 0%, #F7EDD2 100%);
  border: 1px solid rgba(74, 47, 24, 0.18);
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255, 253, 246, 0.7) inset,
    0 2px 6px rgba(74, 47, 24, 0.08),
    0 14px 32px rgba(74, 47, 24, 0.06);
}
.jdb-faq-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border: 1px dashed rgba(74, 47, 24, 0.28);
  border-radius: 2px;
}
.jdb-faq-card .jdb-sk-c { /* inherit sketch-corner styles from paper-card */
  position: absolute; width: 16px; height: 16px; pointer-events: none; z-index: 2;
}
.jdb-faq-card .jdb-sk-c::before,
.jdb-faq-card .jdb-sk-c::after {
  content: ""; position: absolute; background: var(--cedar-deep, #6B4520); opacity: 0.65;
}
.jdb-faq-card .jdb-sk-c::before { left: 0; top: 0; width: 16px; height: 1.5px; }
.jdb-faq-card .jdb-sk-c::after  { left: 0; top: 0; width: 1.5px; height: 16px; }
.jdb-faq-card .jdb-sk-c.tl { top: -1px;    left: -1px; }
.jdb-faq-card .jdb-sk-c.tr { top: -1px;    right: -1px; transform: rotate(90deg);   transform-origin: top right; }
.jdb-faq-card .jdb-sk-c.bl { bottom: -1px; left: -1px;  transform: rotate(-90deg);  transform-origin: bottom left; }
.jdb-faq-card .jdb-sk-c.br { bottom: -1px; right: -1px; transform: rotate(180deg);  transform-origin: bottom right; }
.jdb-faq-card .faq-item { background: rgba(255,253,246,0.72); }
@media (max-width: 700px) { .jdb-faq-card { padding: 22px 18px 24px; } }