/* ============================================================================
   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;

  /* v100: unified card surface — one cream family for every card/cell/panel.
     Inner cells use a warm cream (not stark white) so boxes BLEND, not clash. */
  --jdb-card:       linear-gradient(180deg, #FCF5E2 0%, #F7EDD2 100%);
  --jdb-cell:       #FAF2DC;
  --jdb-card-line:  rgba(74, 47, 24, 0.18);
  --jdb-card-dash:  rgba(74, 47, 24, 0.26);

  /* 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;
  /* v98: near-solid cream so body text stays crisp over the dark wood section
     (was rgba(...,0.85) glass → murky/low-contrast per Giovanni 2026-06-15). */
  background: #F7EDD7;
  border: 1px solid var(--glass-edge-2);
  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; }
/* v98: the featured card already carries the "Most Built" overhang ribbon
   (::before) — hide the duplicate in-card tag so it isn't doubled. */
.price-card.featured .price-card-tag { display: none; }
.price-card.featured .price-card-title { margin-top: 4px; }
.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) */
/* v98: 2-column gallery — bigger, higher-impact images (was 4 tiny thumbs).
   Caption overlays the bottom of the photo as a readable gradient strip so the
   build reads as a real project, not a stock thumbnail. */
.spinoff-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 1080px;
  margin: 0 auto;
}
.spinoff-gallery .gallery-card {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 14px rgba(15, 24, 37, 0.12);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.spinoff-gallery .gallery-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(15, 24, 37, 0.20);
}
.spinoff-gallery .gallery-img-wrap {
  aspect-ratio: 3 / 2;
  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; display: block;
  transition: transform 600ms cubic-bezier(.2,.9,.2,1);
}
.spinoff-gallery .gallery-card:hover img { transform: scale(1.04); }
.gallery-placeholder {
  width: 50%; height: 50%; color: var(--ink-mute); opacity: 0.4;
  display: flex; align-items: center; justify-content: center;
}
.gallery-placeholder svg { width: 100%; height: auto; }
/* Caption strip overlaid on the photo — material prominent, size below */
.spinoff-gallery .gallery-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 20px 16px;
  background: linear-gradient(180deg, transparent 0%, rgba(15,24,37,0.82) 100%);
}
.spinoff-gallery .gallery-loc {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  color: #FFFDF6;
  margin-bottom: 2px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.spinoff-gallery .gallery-size {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #E9DCC0;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
@media (max-width: 640px) { .spinoff-gallery { grid-template-columns: 1fr; } }

/* 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: var(--jdb-cell, #FAF2DC);
  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: var(--jdb-cell, #FAF2DC); }
@media (max-width: 700px) { .jdb-faq-card { padding: 22px 18px 24px; } }

/* ============================================================
 * v97: Location Local Details grid (strict 3x2 even layout)
 * Replaces inline-styled boxes that used undefined --card-bg.
 * ============================================================ */
.jdb-local-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}
.jdb-local-cell {
  background: var(--jdb-cell, #FAF2DC);
  border: 1px dashed rgba(107, 69, 32, 0.35);
  border-left: 3px solid var(--cedar, #8B5E32);
  padding: 18px 22px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(15, 24, 37, 0.06);
  font-family: 'Inter', sans-serif;
  position: relative;
}
.jdb-local-cell::before,
.jdb-local-cell::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--cedar-deep, #6B4520);
  opacity: 0.55;
}
.jdb-local-cell::before { top: 6px; right: 6px; border-bottom: 0; border-left: 0; }
.jdb-local-cell::after  { bottom: 6px; left: 6px;  border-top: 0;    border-right: 0; }
.jdb-local-cell dt {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cedar-deep, #6B4520);
  font-weight: 700;
  margin-bottom: 8px;
}
.jdb-local-cell dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
}
@media (max-width: 900px) { .jdb-local-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .jdb-local-grid { grid-template-columns: 1fr; } }

/* ============================================================
 * v100: Two-column section layout — prose left, facts panel right.
 * Equal-height, top + bottom aligned columns. The right panel shares
 * the SAME cream card shell as the left prose card, and its rows are
 * flat dividers (not nested white boxes) — so the section reads as one
 * cohesive cream treatment instead of white-box-on-cream-box clash.
 * ============================================================ */
.jdb-split {
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  gap: 24px;
  align-items: stretch;            /* equal-height columns, aligned top AND bottom */
  max-width: 1080px;
  margin: 0 auto;
}
.jdb-split.jdb-split-solo { grid-template-columns: 1fr; max-width: 820px; }
.jdb-split > .jdb-paper-card { max-width: none; margin: 0; height: 100%; padding: 32px 36px; }
.jdb-split > .jdb-paper-card .jdb-prose { max-width: none; margin: 0; text-align: left; }

/* Right column (facts on what-is/why-us, specs on why-florida) shares the
   prose card's cream shell so both columns read as one treatment. */
.jdb-facts,
ul.jdb-spec-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  margin: 0;
  padding: 24px 26px;
  list-style: none;
  background: var(--jdb-card);
  border: 1px solid var(--jdb-card-line);
  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-facts::before,
ul.jdb-spec-aside::before {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border: 1px dashed var(--jdb-card-dash);
  border-radius: 2px;
}

/* Rows inside the panel: flat, dashed-divider separated, distributed to fill
   the panel height evenly so the bottom edge aligns with the prose card. */
.jdb-facts .fact,
ul.jdb-spec-aside li {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 0;
  background: none;
  border: 0;
  border-bottom: 1px dashed var(--jdb-card-dash);
  border-radius: 0;
  box-shadow: none;
  padding: 14px 6px;
}
.jdb-facts .fact:last-child,
ul.jdb-spec-aside li:last-child { border-bottom: 0; }
/* neutralize the old mini-card sketch glyph + inner dashed border on aside specs */
ul.jdb-spec-aside li::before,
ul.jdb-spec-aside li::after { content: none; display: none; }

.jdb-facts .fact-k,
ul.jdb-spec-aside .jdb-spec-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cedar-deep, #6B4520);
  font-weight: 700;
  margin: 0 0 2px;
}
.jdb-facts .fact-v,
ul.jdb-spec-aside .jdb-spec-value {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

/* Stack to one column on tablet/mobile; let panels size to content again. */
@media (max-width: 880px) {
  .jdb-split { grid-template-columns: 1fr; }
  .jdb-facts,
  ul.jdb-spec-aside { height: auto; }
  .jdb-facts .fact,
  ul.jdb-spec-aside li { flex: 0 0 auto; }
}

/* ============================================================
 * v101 — composite revamp: hero lead form, distinct What-Is /
 * Why-Florida sections, gallery carousel, aligned process steps,
 * county areas directory.
 * ============================================================ */

/* ---- Hero with lead form ---- */
.hero-grid.hero-grid-form {
  grid-template-columns: minmax(0, 1fr) minmax(330px, 430px);
  gap: 38px; max-width: 1180px; align-items: start; text-align: left; justify-content: stretch;
}
.hero-grid-form .hero-text { text-align: left; display: flex; flex-direction: column; justify-content: flex-start; }
.hero-grid-form .hero-text .hero-eyebrow,
.hero-grid-form .hero-text .hero-cta-row { justify-content: flex-start; }
.hero-grid-form .hero-text p.lede { margin-left: 0; margin-right: 0; max-width: none; font-size: 17px; }
@media (max-width: 980px) {
  .hero-grid.hero-grid-form { grid-template-columns: 1fr; gap: 22px; }
  .hero-grid-form .hero-text { text-align: center; }
  .hero-grid-form .hero-text .hero-eyebrow,
  .hero-grid-form .hero-text .hero-cta-row { justify-content: center; }
  .hero-grid-form .hero-text p.lede { margin-left: auto; margin-right: auto; }
}
.hero-form-card {
  position: relative; align-self: start;
  background: var(--jdb-card, linear-gradient(180deg,#FCF5E2 0%,#F7EDD2 100%));
  border: 1px solid rgba(74,47,24,0.22); border-radius: 16px; padding: 26px 26px 22px;
  box-shadow: 0 1px 0 rgba(255,253,246,0.7) inset, 0 18px 44px rgba(0,0,0,0.34), 0 6px 16px rgba(0,0,0,0.22);
}
.hero-form-card .jdb-sk-c { position: absolute; width: 14px; height: 14px; pointer-events: none; z-index: 2; }
.hero-form-card .jdb-sk-c::before, .hero-form-card .jdb-sk-c::after { content: ""; position: absolute; background: var(--cedar-deep,#6B4520); opacity: 0.6; }
.hero-form-card .jdb-sk-c::before { left: 0; top: 0; width: 14px; height: 1.5px; }
.hero-form-card .jdb-sk-c::after { left: 0; top: 0; width: 1.5px; height: 14px; }
.hero-form-card .jdb-sk-c.tl { top: -1px; left: -1px; }
.hero-form-card .jdb-sk-c.tr { top: -1px; right: -1px; transform: rotate(90deg); transform-origin: top right; }
.hero-form-card .jdb-sk-c.bl { bottom: -1px; left: -1px; transform: rotate(-90deg); transform-origin: bottom left; }
.hero-form-card .jdb-sk-c.br { bottom: -1px; right: -1px; transform: rotate(180deg); transform-origin: bottom right; }
.hfc-head { text-align: center; margin-bottom: 16px; }
.hfc-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cedar-deep,#6B4520); font-weight: 700; }
.hfc-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 24px; line-height: 1.1; color: var(--ink); margin: 6px 0; letter-spacing: -0.02em; }
.hfc-sub { font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.45; color: var(--ink-mute); margin: 0; }
.hero-quote-form { display: flex; flex-direction: column; gap: 11px; }
.hfc-field { display: flex; flex-direction: column; gap: 5px; }
.hfc-field label { font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2,#243349); }
.hfc-field input, .hfc-field select {
  font-family: 'Inter', sans-serif; font-size: 15px; color: var(--ink); background: #FFFDF8;
  border: 1px solid rgba(74,47,24,0.28); border-radius: 9px; padding: 11px 13px; width: 100%;
  -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s;
}
.hfc-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B4520' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 36px;
}
.hfc-field input:focus, .hfc-field select:focus { outline: none; border-color: var(--cedar,#8B5E32); box-shadow: 0 0 0 3px rgba(139,94,50,0.18); }
.hfc-field input::placeholder { color: var(--ink-quiet,#6B7585); }
.hfc-submit { width: 100%; justify-content: center; margin-top: 4px; }
.hfc-note { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 11px; font-family: 'Inter', sans-serif; font-size: 11.5px; color: var(--ink-mute); }
.hfc-note span { white-space: nowrap; }
.hfc-success { text-align: center; padding: 26px 8px; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.hfc-success[hidden], .hfc-head[hidden], .hero-quote-form[hidden] { display: none !important; }
.hfc-success svg { width: 44px; height: 44px; color: #2E7D5B; }
.hfc-success strong { font-family: 'Fraunces', serif; font-size: 21px; color: var(--ink); }
.hfc-success span { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--ink-mute); line-height: 1.5; }
.hfc-success a { color: var(--cedar-deep,#6B4520); font-weight: 700; }

/* ---- What-Is: editorial intro + stat strip ---- */
.jdb-whatis-body { max-width: 720px; margin: 0 auto; font-family: 'Inter', sans-serif; font-size: 17.5px; line-height: 1.7; color: var(--ink); text-align: center; }
.jdb-whatis-body p { margin: 0 0 1em; }
.jdb-whatis-body p:last-child { margin-bottom: 0; }
.jdb-whatis-body strong { color: var(--ink); font-weight: 700; }
.jdb-stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1000px; margin: 36px auto 0; }
.jdb-stat { position: relative; background: var(--jdb-cell,#FAF2DC); border: 1px solid var(--jdb-card-line,rgba(74,47,24,0.18)); border-top: 3px solid var(--cedar,#8B5E32); border-radius: 10px; padding: 18px 18px 16px; text-align: left; }
.jdb-stat-k { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cedar-deep,#6B4520); font-weight: 700; margin-bottom: 7px; }
.jdb-stat-v { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.45; color: var(--ink); font-weight: 500; }
@media (max-width: 820px) { .jdb-stat-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .jdb-stat-strip { grid-template-columns: 1fr; } }

/* ---- Why-Florida: dark "Florida-proof" feature band ---- */
.jdb-whyfl { position: relative; }
.jdb-whyfl .section-eyebrow { background: rgba(247,237,215,0.10); color: #FFF7E0; border-color: rgba(247,237,215,0.34); }
.jdb-whyfl .section-h .italic { color: var(--honey-bright,#F4C56F); -webkit-text-fill-color: var(--honey-bright,#F4C56F); }
.dr-sheet-light .num, .dr-sheet-light span { color: rgba(247,237,215,0.60); }
.jdb-fl-elements { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 980px; margin: 0 auto 30px; }
.jdb-fl-el { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 22px 14px 18px; background: rgba(247,237,215,0.05); border: 1px solid rgba(247,237,215,0.16); border-radius: 14px; }
.jdb-fl-ico { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(244,197,111,0.12); border: 1px solid rgba(244,197,111,0.34); }
.jdb-fl-ico svg { width: 24px; height: 24px; color: var(--honey-bright,#F4C56F); }
.jdb-fl-label { font-family: 'Fraunces', serif; font-weight: 600; font-size: 16.5px; color: #FFF7E0; line-height: 1.1; }
.jdb-fl-note { font-family: 'Inter', sans-serif; font-size: 12.5px; color: rgba(247,237,215,0.80); line-height: 1.35; }
.jdb-whyfl-prose { max-width: 680px; margin: 0 auto 28px; text-align: center; font-family: 'Inter', sans-serif; font-size: 16.5px; line-height: 1.65; color: rgba(247,237,215,0.92); }
.jdb-whyfl-prose strong { color: #FFF7E0; font-weight: 700; }
.jdb-whyfl-prose p { margin: 0 0 0.9em; }
.jdb-whyfl-prose p:last-child { margin-bottom: 0; }
.jdb-whyfl-specs { list-style: none; padding: 0; margin: 0 auto; max-width: 1000px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.jdb-whyfl-specs li { background: rgba(247,237,215,0.06); border: 1px solid rgba(247,237,215,0.16); border-left: 3px solid var(--honey-bright,#F4C56F); border-radius: 8px; padding: 14px 16px; }
.jdb-whyfl-specs .jdb-spec-label { color: var(--honey-bright,#F4C56F); }
.jdb-whyfl-specs .jdb-spec-value { color: rgba(247,237,215,0.92); }
@media (max-width: 820px) { .jdb-fl-elements { grid-template-columns: 1fr 1fr; } .jdb-whyfl-specs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .jdb-whyfl-specs { grid-template-columns: 1fr; } }

/* ---- Gallery carousel (dependency-free scroll-snap) ---- */
.gallery-carousel { position: relative; }
.gallery-carousel .gc-track.spinoff-gallery {
  display: flex; gap: 18px; grid-template-columns: none; margin: 0; padding: 4px 4px 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(74,47,24,0.4) transparent;
}
.gallery-carousel .gc-track.spinoff-gallery::-webkit-scrollbar { height: 8px; }
.gallery-carousel .gc-track.spinoff-gallery::-webkit-scrollbar-thumb { background: rgba(74,47,24,0.35); border-radius: 999px; }
.gallery-carousel .gc-track .gallery-card { flex: 0 0 clamp(260px, 31%, 360px); scroll-snap-align: start; }
.gc-arrow {
  position: absolute; top: 42%; transform: translateY(-50%); z-index: 5; width: 46px; height: 46px;
  border-radius: 50%; cursor: pointer; background: var(--jdb-card,#FCF5E2); border: 1px solid rgba(74,47,24,0.28);
  color: var(--cedar-deep,#6B4520); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(74,47,24,0.22); transition: transform .15s, background .15s;
}
.gc-arrow svg { width: 22px; height: 22px; }
.gc-arrow:hover { background: #FFFDF8; transform: translateY(-50%) scale(1.06); }
.gc-prev { left: -10px; } .gc-next { right: -10px; }
.gc-arrow[disabled] { opacity: 0.3; cursor: default; transform: translateY(-50%); }
@media (max-width: 700px) { .gc-arrow { display: none; } .gallery-carousel .gc-track .gallery-card { flex: 0 0 82%; } }

/* ---- Process steps: equal height, week badge bottom-aligned ---- */
.process-list .process-step { display: flex; flex-direction: column; align-items: center; height: 100%; }
.process-list .process-step .process-step-week { margin-top: auto; }

/* ---- Areas: county directory (replaces orphan-prone card grid) ---- */
.areas-directory { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.area-county { background: rgba(247,237,215,0.07); border: 1px solid rgba(247,237,215,0.16); border-radius: 14px; padding: 20px 20px 16px; }
.area-county-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 12px; margin-bottom: 13px; border-bottom: 1px dashed rgba(247,237,215,0.22); }
.area-county-name { font-family: 'Fraunces', serif; font-weight: 600; font-size: 19px; color: #FFF7E0; letter-spacing: -0.01em; }
.area-county-count { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--honey-bright,#F4C56F); letter-spacing: 0.05em; white-space: nowrap; }
.area-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.area-link { display: inline-block; font-family: 'Inter', sans-serif; font-size: 13px; color: #F2E5C5; text-decoration: none; padding: 5px 11px; border-radius: 999px; background: rgba(247,237,215,0.08); border: 1px solid rgba(247,237,215,0.18); transition: background .15s, color .15s, border-color .15s; }
.area-link:hover { background: var(--cedar,#8B5E32); border-color: var(--cedar-lt,#B07A47); color: #FFF7E0; }
.area-link-soft { border-style: dashed; background: rgba(247,237,215,0.045); }
.areas-foot { position: relative; z-index: 2; text-align: center; margin-top: 26px; font-family: 'Inter', sans-serif; font-size: 14px; color: rgba(247,237,215,0.85); }
.areas-foot a { color: var(--honey-bright,#F4C56F); font-weight: 700; }
@media (max-width: 1000px) { .areas-directory { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .areas-directory { grid-template-columns: 1fr; } }

/* ---- v101 a11y: focus-visible rings on new controls + reduced-motion ---- */
.gc-arrow:focus-visible,
.gallery-carousel .gallery-card:focus-visible { outline: 2px solid var(--honey-bright,#F4C56F); outline-offset: 3px; }
.gc-track:focus-visible { outline: 2px solid var(--cedar,#8B5E32); outline-offset: 3px; }
.area-link:focus-visible,
.areas-foot a:focus-visible { outline: 2px solid #FFF7E0; outline-offset: 2px; border-radius: 4px; }
.hfc-submit:focus-visible { outline: 2px solid var(--ink,#1A2638); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gallery-carousel .gc-track.spinoff-gallery { scroll-behavior: auto; }
}

/* ============================================================
 * v102 — SPINOFF HERO, direction 3B (Modern Warm + Balanced 50/50).
 * Scoped to .hero-spinoff so the homepage hero is untouched. Text sits
 * on a warm directional scrim (NO box), form card is the cream focal
 * point, two balanced equal-weight columns. No blueprint decoration.
 * ============================================================ */
.hero-spinoff { padding: 0; }
.hero-spinoff::before {
  background:
    linear-gradient(108deg, rgba(17,10,4,0.90) 0%, rgba(24,16,9,0.74) 46%, rgba(26,18,10,0.40) 100%),
    url('../img/hero-bg-B.jpg') center/cover no-repeat;
}
.hero-spinoff .container { padding-top: 80px; padding-bottom: 36px; }
.hero-spinoff .hero-grid.hero-grid-form {
  grid-template-columns: 1.04fr 0.96fr; gap: 50px; align-items: center; max-width: 1240px;
}
/* grid items default to min-width:auto — without this, the long headline refuses to
   shrink and forces horizontal overflow (clips on mobile). */
.hero-spinoff .hero-text, .hero-spinoff .hero-form-card { min-width: 0; }
.hero-spinoff h1.hero-h1, .hero-spinoff h1.hero-h1 span { white-space: normal; }
/* left column: clean text on the scrim, no pill box, no sketch ticks */
.hero-spinoff .hero-text {
  background: none; border: none; box-shadow: none; padding: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none; text-align: left;
  display: flex; flex-direction: column; justify-content: center;
}
.hero-spinoff .hero-text .sketch-corner { display: none; }
.hero-spinoff .hero-eyebrow {
  background: none !important; border: none !important; box-shadow: none !important;
  padding: 0 !important; backdrop-filter: none !important;
  color: #FFF7E0; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em; gap: 10px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}
.hero-spinoff .hero-eyebrow .dot { width: 8px; height: 8px; background: var(--honey,#F4C56F); box-shadow: 0 0 0 4px rgba(244,197,111,0.22); }
.hero-spinoff h1.hero-h1 { font-size: clamp(36px, 3.7vw, 42px); font-weight: 600; line-height: 1.08; margin: 14px 0 20px; letter-spacing: -0.02em; overflow-wrap: break-word; }
.hero-spinoff h1.hero-h1 .ink-stamp { color: #FFF7E0; -webkit-text-fill-color: #FFF7E0; text-shadow: 0 2px 18px rgba(0,0,0,0.4); }
.hero-spinoff h1.hero-h1 .wood-fill { color: var(--honey,#F4C56F); -webkit-text-fill-color: var(--honey,#F4C56F); font-style: italic; background: none; text-shadow: 0 2px 18px rgba(0,0,0,0.4); }
.hero-spinoff p.lede {
  color: rgba(255,247,224,0.96); font-size: 18.5px; line-height: 1.58;
  max-width: 30em; margin: 0 0 26px; text-shadow: 0 1px 10px rgba(0,0,0,0.45);
  background: none; padding: 0; border: none; box-shadow: none;
}
.hero-spinoff p.lede strong { color: #FFF7E0; }
.hero-spinoff .hero-cta-row { justify-content: flex-start; }
.hero-spinoff .hero-cta-row .btn-navy {
  background: #FFF7E0; border: 1px solid #FFF7E0; color: var(--ink,#1A2638);
  font-weight: 700; box-shadow: 0 8px 20px rgba(0,0,0,0.34);
}
.hero-spinoff .hero-cta-row .btn-navy:hover { background: #fff; border-color: #fff; transform: translateY(-1px); }
/* right column: the cream form card is the focal element and FILLS its 50% column */
.hero-spinoff .hero-form-card {
  align-self: center; justify-self: stretch; width: 100%; max-width: none;
  padding: 36px 36px 30px;
  box-shadow: 0 1px 0 rgba(255,253,246,0.7) inset, 0 24px 54px rgba(0,0,0,0.44), 0 8px 18px rgba(0,0,0,0.3);
}
.hero-spinoff .hfc-head { margin-bottom: 18px; }
.hero-spinoff .hfc-title { font-size: 27px; }
.hero-spinoff .hero-quote-form { gap: 13px; }
.hero-spinoff .hfc-field input, .hero-spinoff .hfc-field select { padding: 13px 14px; font-size: 15.5px; }
.hero-spinoff .hfc-submit { padding: 15px; font-size: 16px; }
/* cred-slab keeps its dark pill, sits full-width under the two columns */
.hero-spinoff .cred-slab { margin-top: 30px; }
@media (max-width: 980px) {
  .hero-spinoff .hero-grid.hero-grid-form { grid-template-columns: 1fr; gap: 26px; }
  .hero-spinoff .hero-text { text-align: center; }
  .hero-spinoff .hero-text .hero-eyebrow, .hero-spinoff .hero-cta-row { justify-content: center; }
  .hero-spinoff h1.hero-h1 { font-size: clamp(30px, 8vw, 46px); }
  .hero-spinoff p.lede { margin-left: auto; margin-right: auto; }
  .hero-spinoff .hero-form-card { justify-self: stretch; max-width: 520px; margin: 0 auto; }
}
@media (max-width: 480px) {
  .hero-spinoff .hero-eyebrow { font-size: 11.5px; letter-spacing: 0.06em; }
  .hero-spinoff h1.hero-h1 { font-size: clamp(28px, 9vw, 38px); }
}

/* ---- v103: consolidated trust bar (replaces the 6 pale badge boxes + the hero 500+ slab) ---- */
.trust-bar-section { background: var(--paper-lt, #F2E5C5); border-bottom: 1px solid var(--ink-line, rgba(26,38,56,0.1)); padding: 34px 0 30px; }
.trust-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 0; max-width: 1060px; margin: 0 auto; }
.tb-item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 34px; }
.tb-num { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(30px, 3.2vw, 40px); line-height: 1; color: var(--ink, #1A2638); letter-spacing: -0.02em; }
.tb-label { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--ink-mute, #475568); margin-top: 9px; font-weight: 500; }
.tb-div { width: 1px; align-self: stretch; min-height: 50px; background: linear-gradient(180deg, transparent, rgba(74,47,24,0.22), transparent); }
.trust-bar-cap { text-align: center; margin: 22px 0 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cedar-deep, #6B4520); font-weight: 700; }
@media (max-width: 760px) {
  .trust-bar .tb-div { display: none; }
  .trust-bar { gap: 22px 0; }
  .tb-item { flex: 1 1 42%; min-width: 130px; padding: 0 10px; }
}

/* ============================================================
 * v105 — REUSABLE CLEAN 3B SECTION HEADER (.jdb-head) + real-photo
 * gallery caption polish. This replaces the dashed .section-head-card
 * box + sketch-corner ticks Giovanni rejected ("looks terrible").
 * Pattern for every rebuilt body section: clean eyebrow + headline +
 * one-line subhead, NO box. On LIGHT sections the warm accent is CEDAR
 * (honey/cream text stays on dark scrims only, per the hard-NO).
 * ============================================================ */
.jdb-head { max-width: 780px; }
.jdb-head .section-eyebrow.jdb-eyebrow {
  background: rgba(139,94,50,0.07);
  border: 1px solid rgba(139,94,50,0.30);
  color: var(--cedar-deep, #6B4520);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.13em;
  padding: 7px 15px; text-transform: uppercase; border-radius: 999px;
}
.jdb-head .section-eyebrow.jdb-eyebrow .num { color: var(--cedar-deep, #6B4520); font-weight: 700; }
.jdb-head h2.section-h { font-weight: 500; color: var(--ink, #1A2638); margin-bottom: 14px; }
.jdb-head h2.section-h .italic {
  font-style: italic; background: none;
  color: var(--cedar, #8B5E32) !important;
  -webkit-text-fill-color: var(--cedar, #8B5E32);
}
.jdb-head .section-lede { max-width: 620px; }

/* Real-photo gallery: neighborhood (cream Fraunces) over a near-solid
   scrim + material (honey mono) — echoes the hero's cream+honey pairing. */
.jdb-sec .spinoff-gallery .gallery-meta {
  padding: 42px 20px 17px;
  background: linear-gradient(180deg, rgba(10,17,28,0) 0%, rgba(10,17,28,0.50) 46%, rgba(10,17,28,0.92) 100%);
}
.jdb-sec .spinoff-gallery .gallery-loc {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 19px; line-height: 1.18;
  color: #FFF7E0; margin-bottom: 3px; text-shadow: 0 1px 8px rgba(0,0,0,0.62);
}
.jdb-sec .spinoff-gallery .gallery-size {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: 0.05em; text-transform: none;
  color: var(--honey, #F4C56F); font-weight: 600;
  text-shadow: 0 1px 6px rgba(0,0,0,0.62);
}

/* ============================================================
 * v106 — FULL-PAGE 3B SWEEP. Strips the leftover blueprint decoration
 * (dashed header boxes, grid-paper, dr-sheet/compass stamps, sketch-corner
 * ticks, dashed card frames) from every rebuilt service section and unifies
 * headers to the clean .jdb-head look — cedar accents on light sections,
 * cream + honey on dark. Scoped to .jdb-sec so the homepage stays untouched.
 * what-is prose now lives in the approved .jdb-split 2-col; why-florida prose
 * reflows (intro → tiles → specs-intro → specs) so it's no longer stranded.
 * ============================================================ */

/* 1 · kill leftover decoration inside rebuilt sections */
.jdb-sec .grid-paper,
.jdb-sec .dr-sheet,
.jdb-sec .dr-compass,
.jdb-sec .dr-scale,
.jdb-sec .dr-note,
.jdb-sec .dr-sketch { display: none !important; }
.jdb-sec .section-head-card::before,
.jdb-sec .section-head-card .sk-c,
.jdb-sec .jdb-paper-card::before,
.jdb-sec .jdb-paper-card .jdb-sk-c,
.jdb-sec .jdb-facts::before,
.jdb-sec .jdb-faq-card::before,
.jdb-sec .jdb-faq-card .jdb-sk-c { display: none !important; }
.jdb-sec .section-head-card {
  background: none !important; border: none !important;
  box-shadow: none !important; padding: 0 !important;
}

/* 2 · consistent warm backdrop for LIGHT rebuilt sections, so prose/cards
   never float on raw wood (matches the approved gallery/faq treatment) */
.jdb-sec:not(.ink-bg):not(.materials-wood):not(.cities-wood):not(.lt-bg) {
  background: rgba(247, 237, 215, 0.82);
}
.jdb-sec:not(.ink-bg):not(.materials-wood):not(.cities-wood) {
  border-top: 1px solid rgba(74, 47, 24, 0.10);
}

/* 3 · DARK sections: cream headline + honey accents on the clean header */
.jdb-sec.ink-bg .jdb-head h2.section-h,
.jdb-sec.materials-wood .jdb-head h2.section-h,
.jdb-sec.cities-wood .jdb-head h2.section-h { color: #FFF7E0; }
.jdb-sec.ink-bg .jdb-head h2.section-h .italic,
.jdb-sec.materials-wood .jdb-head h2.section-h .italic,
.jdb-sec.cities-wood .jdb-head h2.section-h .italic {
  color: var(--honey, #F4C56F) !important;
  -webkit-text-fill-color: var(--honey, #F4C56F);
}
.jdb-sec.ink-bg .section-eyebrow.jdb-eyebrow,
.jdb-sec.materials-wood .section-eyebrow.jdb-eyebrow,
.jdb-sec.cities-wood .section-eyebrow.jdb-eyebrow {
  background: rgba(247, 237, 215, 0.10) !important;
  border-color: rgba(247, 237, 215, 0.34) !important;
  color: #FFF7E0 !important;
}
.jdb-sec.ink-bg .section-eyebrow.jdb-eyebrow .num,
.jdb-sec.materials-wood .section-eyebrow.jdb-eyebrow .num,
.jdb-sec.cities-wood .section-eyebrow.jdb-eyebrow .num { color: var(--honey, #F4C56F) !important; }

/* 4 · WHAT-IS: prose card + facts panel (reuses approved v100 .jdb-split) */
.jdb-whatis .jdb-split { align-items: stretch; margin-top: 4px; }
.jdb-whatis .jdb-prose p { margin: 0 0 1.05em; font-size: 16.5px; line-height: 1.72; color: var(--ink); }
.jdb-whatis .jdb-prose p:last-child { margin-bottom: 0; }
.jdb-whatis .jdb-prose strong { color: var(--ink); font-weight: 700; }

/* 5 · WHY-FLORIDA: intro + specs-intro centered so prose isn't stranded */
.jdb-whyfl .jdb-whyfl-intro {
  max-width: 660px; margin: 0 auto 38px; text-align: center;
  font-size: 16.5px; line-height: 1.72; color: rgba(255, 247, 224, 0.85);
}
.jdb-whyfl .jdb-whyfl-intro strong { color: #FFF7E0; font-weight: 700; }
.jdb-whyfl .jdb-fl-elements { margin-bottom: 8px; }
.jdb-whyfl .jdb-whyfl-specs-block { margin-top: 44px; }
.jdb-whyfl .jdb-whyfl-specs-intro {
  max-width: 660px; margin: 0 auto 24px; text-align: center;
  font-size: 16.5px; line-height: 1.72; color: rgba(255, 247, 224, 0.85);
}
.jdb-whyfl .jdb-whyfl-specs-intro strong { color: #FFF7E0; font-weight: 700; }

/* 6 · focus-visible rings on the two controls the sweep missed (match the v101 ring) */
.mat-card-cta:focus-visible { outline: 2px solid var(--cedar, #8B5E32); outline-offset: 3px; border-radius: 3px; }
.faq-item summary:focus-visible { outline: 2px solid var(--cedar, #8B5E32); outline-offset: 2px; border-radius: 4px; }

/* ============================================================
 * v107 — Giovanni round 2: bigger hero + bigger/fuller quote form,
 * tighter gap between the two H1 lines; why-florida intro folded into
 * the header lede (one unit, not text-between-grids); service-areas
 * rebuilt as solid on-brand cream cards (no more see-through boxes).
 * ============================================================ */

/* --- HERO: bigger presence, bigger headline, tighter title gap --- */
.hero-spinoff .container { padding-top: 100px; padding-bottom: 76px; }
.hero-spinoff .hero-grid.hero-grid-form { grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.hero-spinoff h1.hero-h1 {
  font-size: clamp(44px, 5.5vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  margin: 18px 0 22px;
  font-weight: 600;
}
.hero-spinoff p.lede { font-size: 19px; line-height: 1.6; max-width: 33em; }
.hero-spinoff .hero-eyebrow { font-size: 13.5px; }
/* the unscoped 1fr/1fr grid above must NOT win over the mobile stack — restore
   single-column + a phone-sized headline below the tablet breakpoint. */
@media (max-width: 980px) {
  .hero-spinoff .hero-grid.hero-grid-form { grid-template-columns: 1fr; gap: 30px; }
  .hero-spinoff h1.hero-h1 { font-size: clamp(34px, 8.5vw, 52px); }
}

/* HERO FORM: larger card, larger inputs, 2-up field rows for the new fields */
.hero-spinoff .hero-form-card { padding: 38px 38px 32px; }
.hero-spinoff .hfc-title { font-size: 30px; }
.hero-spinoff .hfc-sub { font-size: 15px; }
.hero-spinoff .hero-quote-form { gap: 14px; }
.hero-quote-form .hfc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hero-quote-form .hfc-row .hfc-field { margin: 0; }
.hero-spinoff .hfc-field label { font-size: 12.5px; font-weight: 600; }
.hero-spinoff .hfc-field input, .hero-spinoff .hfc-field select { padding: 14px 14px; font-size: 16px; }
.hero-spinoff .hfc-submit { padding: 17px; font-size: 17px; margin-top: 4px; }
@media (max-width: 560px) {
  .hero-quote-form .hfc-row { grid-template-columns: 1fr; gap: 14px; }
}

/* --- WHY-FLORIDA: intro is now the header lede; specs sit closer to the flow --- */
.jdb-whyfl .jdb-whyfl-lede { margin: 18px auto 0; max-width: 640px; }
.jdb-whyfl .jdb-whyfl-lede p { margin: 0; }
/* the base `.section-lede strong{color:ink !important}` rule makes bold words
   invisible on the dark band — restore them to cream here. */
.jdb-whyfl .jdb-whyfl-lede strong { color: #FFF7E0 !important; -webkit-text-fill-color: #FFF7E0; font-weight: 700; }
.jdb-whyfl .jdb-fl-elements { margin-top: 4px; margin-bottom: 30px; }
.jdb-whyfl .jdb-whyfl-specs-block { margin-top: 28px; }
.jdb-whyfl .jdb-whyfl-specs-intro { max-width: 620px; margin: 0 auto 20px; font-size: 15.5px; }

/* --- SERVICE-AREAS: solid cream county cards, equal height, on-brand --- */
.jdb-areas .areas-directory { grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: stretch; }
.jdb-areas .area-county {
  height: 100%;
  background: var(--jdb-card, linear-gradient(180deg,#FCF5E2 0%,#F7EDD2 100%));
  border: 1px solid var(--jdb-card-line, rgba(74,47,24,0.18));
  border-radius: 14px;
  padding: 24px 26px 22px;
  box-shadow: 0 1px 0 rgba(255,253,246,0.7) inset, 0 2px 6px rgba(74,47,24,0.07), 0 14px 30px rgba(74,47,24,0.06);
}
.jdb-areas .area-county-head { border-bottom: 1px solid rgba(74,47,24,0.14); padding-bottom: 14px; margin-bottom: 15px; }
.jdb-areas .area-county-name { color: var(--ink, #1A2638); font-size: 21px; }
.jdb-areas .area-county-count { color: var(--cedar-deep, #6B4520); }
.jdb-areas .area-link {
  color: var(--cedar-deep, #6B4520);
  background: rgba(139,94,50,0.08);
  border: 1px solid rgba(139,94,50,0.22);
  font-weight: 600;
}
.jdb-areas .area-link:hover { background: var(--cedar, #8B5E32); border-color: var(--cedar, #8B5E32); color: #FFF7E0; }
.jdb-areas .area-link-soft { background: rgba(139,94,50,0.045); border-style: dashed; }
.jdb-areas .areas-foot { color: var(--ink-mute, #475568); }
.jdb-areas .areas-foot a { color: var(--cedar-deep, #6B4520); font-weight: 700; }
.jdb-areas .area-link:focus-visible,
.jdb-areas .areas-foot a:focus-visible { outline: 2px solid var(--cedar, #8B5E32); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 760px) { .jdb-areas .areas-directory { grid-template-columns: 1fr; } }

/* ============================================================
 * v108 — Giovanni round 3: tighter two-line headline gaps everywhere,
 * larger readable text across sections, bigger/taller gallery images,
 * fuller what-is, cleaner why-florida flow (lede → tiles → sub-heading →
 * specs), readable service-area subtext. Text bumps scoped to .jdb-sec
 * / service-only classes so the homepage is untouched.
 * ============================================================ */

/* 1 · headline line-gaps — tighten the two-line headlines (hero + sections) */
.hero-spinoff h1.hero-h1 { line-height: 1.0; }
.jdb-sec .jdb-head h2.section-h { line-height: 1.0; }

/* 2 · readability — raise the small text */
.jdb-sec .section-lede { font-size: 19.5px; line-height: 1.62; }
.jdb-whatis .jdb-prose p { font-size: 18px; line-height: 1.75; }
.jdb-whatis .jdb-facts .fact-k { font-size: 12px; }
.jdb-whatis .jdb-facts .fact-v { font-size: 15.5px; line-height: 1.45; }
.jdb-whyfl .jdb-fl-label { font-size: 18px; }
.jdb-whyfl .jdb-fl-note { font-size: 14px; line-height: 1.4; }
.jdb-whyfl .jdb-whyfl-specs .jdb-spec-label { font-size: 11.5px; }
.jdb-whyfl .jdb-whyfl-specs .jdb-spec-value { font-size: 15px; line-height: 1.42; }
.jdb-sec .mat-card-tagline { font-size: 15.5px; line-height: 1.6; }
.jdb-sec .mat-card-spec { font-size: 14.5px; }
.jdb-sec .process-step-body { font-size: 15.5px; line-height: 1.6; max-width: 262px; }
.jdb-sec .testi-card .quote { font-size: 18px; line-height: 1.6; }
.jdb-sec .faq-item summary { font-size: 18px; }
.jdb-sec .faq-item .faq-a { font-size: 16px; line-height: 1.68; opacity: 0.9; }
.jdb-sec .price-card-list li { font-size: 15px; }

/* 3 · gallery — bigger, taller images that stand out */
.jdb-sec .gallery-carousel .gc-track .gallery-card { flex: 0 0 clamp(300px, 40%, 450px); }
.jdb-sec .spinoff-gallery .gallery-img-wrap { aspect-ratio: 4 / 5; }
.jdb-sec .spinoff-gallery .gallery-loc { font-size: 22px; }
.jdb-sec .spinoff-gallery .gallery-size { font-size: 13px; }
@media (max-width: 700px) { .jdb-sec .gallery-carousel .gc-track .gallery-card { flex: 0 0 86%; } }

/* 4 · what-is — fuller, less empty space */
.jdb-whatis .jdb-split { gap: 30px; }
.jdb-whatis .jdb-paper-card { padding: 38px 42px; }
.jdb-whatis .jdb-facts { padding: 30px 30px; }

/* 5 · why-florida — short italic sub-heading + tight, connected flow */
.jdb-whyfl .jdb-whyfl-lede { max-width: 700px; }
.jdb-whyfl .jdb-whyfl-lede p { font-size: 19.5px; line-height: 1.6; }
.jdb-whyfl .jdb-fl-elements { margin-bottom: 36px; }
.jdb-whyfl .jdb-whyfl-specs-block { margin-top: 8px; }
.jdb-whyfl .jdb-whyfl-specs-intro {
  max-width: none; margin: 0 auto 22px; text-align: center;
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 600;
  font-size: clamp(21px, 2.3vw, 27px); line-height: 1.15;
  color: var(--honey, #F4C56F);
}

/* 6 · service-areas — readable subtext */
.jdb-areas .area-county-name { font-size: 22px; }
.jdb-areas .area-county-count { font-size: 13px; }
.jdb-areas .area-link { font-size: 15px; padding: 7px 13px; }
.jdb-areas .areas-foot { font-size: 15.5px; line-height: 1.55; }

/* ============================================================
 * v109 — SERP/AIO content: composite-vs-wood comparison table,
 * pricing cost-breakdown + cost-driver chips. On-brand cream card,
 * composite column highlighted, dark "verdict" accent, responsive.
 * ============================================================ */
.jdb-compare-card {
  max-width: 950px; margin: 0 auto; overflow: hidden;
  background: var(--jdb-card, linear-gradient(180deg,#FCF5E2 0%,#F7EDD2 100%));
  border: 1px solid var(--jdb-card-line, rgba(74,47,24,0.18));
  border-radius: 16px; padding: 8px 16px;
  box-shadow: 0 1px 0 rgba(255,253,246,0.7) inset, 0 2px 6px rgba(74,47,24,0.07), 0 16px 32px rgba(74,47,24,0.06);
}
.jdb-compare-table { width: 100%; border-collapse: collapse; font-family: 'Inter', sans-serif; }
.jdb-compare-table th, .jdb-compare-table td { padding: 15px 18px; text-align: left; vertical-align: middle; }
.jdb-compare-table thead th { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 600; color: var(--ink, #1A2638); border-bottom: 2px solid rgba(74,47,24,0.16); }
.jdb-compare-table tbody th { font-weight: 700; font-size: 15.5px; color: var(--ink, #1A2638); width: 32%; }
.jdb-compare-table tbody td { font-size: 15.5px; color: var(--ink-2, #3a4a5e); line-height: 1.4; }
.jdb-compare-table tbody tr th, .jdb-compare-table tbody tr td { border-top: 1px solid rgba(74,47,24,0.10); }
.jdb-compare-table .jc-comp { background: rgba(139,94,50,0.06); }
.jdb-compare-table thead th.jc-comp { color: var(--cedar-deep, #6B4520); background: rgba(139,94,50,0.10); }
.jdb-compare-table td.jc-comp { color: var(--ink, #1A2638); font-weight: 600; }
.jdb-compare-table td.jc-win { font-weight: 700; }
.jc-sronly { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.jdb-compare-verdict {
  max-width: 950px; margin: 22px auto 0; padding: 18px 26px;
  background: var(--ink, #1A2638); color: #FFF7E0; border-radius: 12px;
  font-size: 16px; line-height: 1.58;
}
.jdb-compare-verdict .jc-verdict-tag {
  display:inline-block; margin-right: 11px; font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--honey, #F4C56F);
}

/* cost extras under the pricing grid */
.jdb-cost-extra { max-width: 920px; margin: 32px auto 0; }
.jdb-cost-breakdown { text-align: center; font-size: 16px; color: var(--ink-2, #3a4a5e); line-height: 1.6; margin: 0 0 22px; }
.jdb-cost-breakdown strong { color: var(--ink, #1A2638); }
.jdb-cost-drivers { text-align: center; }
.jdb-cost-drivers-label { display:block; font-family:'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cedar-deep, #6B4520); margin-bottom: 13px; }
.jdb-cost-drivers ul { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.jdb-cost-drivers li { font-size: 14.5px; font-weight: 600; color: var(--cedar-deep, #6B4520); background: rgba(139,94,50,0.08); border:1px solid rgba(139,94,50,0.2); padding:8px 15px; border-radius:999px; }

@media (max-width: 680px) {
  .jdb-compare-card { padding: 8px 10px; }
  .jdb-compare-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .jdb-compare-table, .jdb-compare-table tbody, .jdb-compare-table tr { display:block; }
  .jdb-compare-table tr { padding: 12px 4px; border-top: 1px solid rgba(74,47,24,0.12); }
  .jdb-compare-table tbody th { display:block; width:auto; font-size: 16px; padding: 0 12px 9px; border: 0; }
  .jdb-compare-table td { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding: 5px 12px; border: 0; }
  .jdb-compare-table td::before { content: attr(data-th); font-weight: 700; color: var(--ink-mute, #475568); flex: 0 0 auto; }
  .jdb-compare-table td.jc-comp { background: transparent; }
  .jdb-compare-table td.jc-comp::before { color: var(--cedar-deep, #6B4520); }
}

/* ============================================================
 * v110 — Giovanni round 4: hero headline fits cleanly (wider text
 * column, balanced wrap, tighter eyebrow→H1 gap); why-florida rebuilt
 * as 4 "Florida threat → how we build for it" cards (one grid — no
 * stacked text-block / sub-heading / second grid).
 * ============================================================ */

/* HERO — keep the form column width; make the headline big enough to fill more
   vertical space (wraps to balanced lines), tighten the eyebrow→H1 gap. */
.hero-spinoff .hero-grid.hero-grid-form { grid-template-columns: 1.22fr 0.78fr; gap: 44px; align-items: center; }
.hero-spinoff .hero-eyebrow { margin-bottom: 2px; }
.hero-spinoff h1.hero-h1 {
  font-size: clamp(48px, 5.8vw, 74px);
  line-height: 1.04; letter-spacing: -0.026em;
  margin: 14px 0 22px; text-wrap: balance;
}
@media (max-width: 980px) {
  .hero-spinoff .hero-grid.hero-grid-form { grid-template-columns: 1fr; gap: 30px; }
  .hero-spinoff h1.hero-h1 { font-size: clamp(40px, 9vw, 60px); }
}

/* WHY-FLORIDA — threat → solution cards (equal height, fix pinned to bottom) */
.jdb-whyfl .jdb-fl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1100px; margin: 0 auto; }
.jdb-whyfl .jdb-fl-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 26px 24px 22px; border-radius: 16px;
  background: rgba(247,237,215,0.05); border: 1px solid rgba(247,237,215,0.16);
}
.jdb-whyfl .jdb-fl-card .jdb-fl-ico {
  display: inline-flex; width: 50px; height: 50px; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(244,197,111,0.12); border: 1px solid rgba(244,197,111,0.34); margin-bottom: 5px;
}
.jdb-whyfl .jdb-fl-card .jdb-fl-ico svg { width: 25px; height: 25px; color: var(--honey, #F4C56F); }
.jdb-whyfl .jdb-fl-card .jdb-fl-label { font-family: 'Fraunces', serif; font-weight: 600; font-size: 19.5px; color: #FFF7E0; line-height: 1.15; }
.jdb-whyfl .jdb-fl-card .jdb-fl-threat { font-family: 'Inter', sans-serif; font-size: 13.5px; color: rgba(247,237,215,0.6); line-height: 1.4; }
.jdb-whyfl .jdb-fl-card .jdb-fl-fix {
  font-family: 'Inter', sans-serif; font-size: 14.5px; font-weight: 600; color: #FFF7E0; line-height: 1.45;
  margin-top: auto; padding-top: 13px; width: 100%;
}
.jdb-whyfl .jdb-fl-card .jdb-fl-fix::before {
  content: ""; display: block; width: 22px; height: 2px; background: var(--honey, #F4C56F); opacity: 0.85;
  margin-bottom: 11px; border-radius: 2px;
}
@media (max-width: 880px) { .jdb-whyfl .jdb-fl-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .jdb-whyfl .jdb-fl-grid { grid-template-columns: 1fr; } }

/* ============================================================
 * v111 — Giovanni round 5: bigger + aligned hero form, headline wrap fix
 * (no orphan "Sun."), what-is gets a real composite photo (character),
 * why-florida cards line up, pricing "Most Built" card+ribbon made solid.
 * ============================================================ */

/* HERO — wider/bigger form; headline wraps cleanly via block spans + balance
   so "Sun." never lands alone; consistent eyebrow→H1→lede rhythm. */
.hero-spinoff .hero-grid.hero-grid-form { grid-template-columns: 1.04fr 0.96fr; gap: 46px; align-items: center; }
.hero-spinoff h1.hero-h1 .ink-stamp,
.hero-spinoff h1.hero-h1 .wood-fill { display: block; text-wrap: balance; }
.hero-spinoff h1.hero-h1 br { display: none; }
.hero-spinoff h1.hero-h1 { font-size: clamp(46px, 5.4vw, 70px); line-height: 1.04; margin: 12px 0 20px; }
.hero-spinoff .hero-eyebrow { margin-bottom: 4px; }
.hero-spinoff p.lede { margin-bottom: 28px; }
/* must re-state the mobile stack here: the unscoped 1.04fr/0.96fr grid above
   would otherwise win over the earlier breakpoint and keep 2 columns on phones. */
@media (max-width: 980px) {
  .hero-spinoff .hero-grid.hero-grid-form { grid-template-columns: 1fr; gap: 30px; }
  .hero-spinoff h1.hero-h1 { font-size: clamp(40px, 9vw, 58px); }
}

/* form: bigger card + inputs, fields bottom-aligned */
.hero-spinoff .hero-form-card { padding: 40px 40px 34px; }
.hero-spinoff .hfc-title { font-size: 32px; }
.hero-spinoff .hfc-sub { font-size: 15.5px; }
.hero-spinoff .hfc-head { margin-bottom: 22px; }
.hero-spinoff .hero-quote-form { gap: 16px; }
.hero-spinoff .hero-quote-form .hfc-row { align-items: end; gap: 16px; }
.hero-spinoff .hfc-field label { font-size: 12px; margin-bottom: 1px; white-space: nowrap; }
.hero-spinoff .hfc-field input, .hero-spinoff .hfc-field select { padding: 16px 15px; font-size: 16.5px; border-radius: 10px; }
.hero-spinoff .hfc-submit { padding: 18px; font-size: 17.5px; }
.hero-spinoff .hfc-note { font-size: 12px; margin-top: 14px; }

/* WHAT-IS — real composite photo (character) right of the prose; facts strip below */
.jdb-whatis .jdb-whatis-split { grid-template-columns: 1.05fr 0.95fr; align-items: stretch; }
.jdb-whatis-photo { margin: 0; border-radius: 16px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(74,47,24,0.12), 0 18px 40px rgba(74,47,24,0.13); }
.jdb-whatis-photo img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; display: block; }
.jdb-whatis-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 22px; }
.jdb-wf-item { background: var(--jdb-cell, #FAF2DC); border: 1px solid rgba(74,47,24,0.14); border-radius: 12px; padding: 18px 20px; }
.jdb-wf-k { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cedar-deep, #6B4520); margin-bottom: 7px; }
.jdb-wf-v { font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.45; color: var(--ink, #1A2638); }
@media (max-width: 880px) { .jdb-whatis .jdb-whatis-split { grid-template-columns: 1fr; } .jdb-whatis-photo img { min-height: 240px; } .jdb-whatis-facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .jdb-whatis-facts { grid-template-columns: 1fr; } }

/* WHY-FLORIDA — reserve the threat line height so the honey bar + fix line up */
.jdb-whyfl .jdb-fl-card .jdb-fl-threat { min-height: 3.1em; }

/* PRICING — solid "Most Built" featured card (was washed out) + bold ribbon */
.price-card.featured {
  background-color: #16223a !important;
  background-image:
    linear-gradient(180deg, rgba(18,26,40,0.86) 0%, rgba(12,18,30,0.93) 100%),
    url('../img/dir-slate.jpg') !important;
  background-size: cover !important; background-position: center !important;
}
.price-card.featured::before {
  background: linear-gradient(180deg, #CE8F55 0%, #A2682F 100%) !important;
  color: #FFF9EF !important; font-size: 11px !important; font-weight: 800 !important;
  padding: 8px 22px !important; border: 1.5px solid #6E4A24 !important;
  box-shadow: 0 6px 18px rgba(74,47,24,0.50), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}

/* v113 — Porches review fixes: pill geometry, dark-card readability, hero-stack guard */
/* The base .price-card::before sets height:4px + right:0 for a thin accent bar; the
   featured pill reuses ::before and was inheriting that geometry (squashed/stretched). */
.price-card.featured::before {
  height: auto !important; right: auto !important; width: auto !important;
  line-height: 1 !important; top: 0 !important; left: 50% !important;
  transform: translate(-50%, -55%) !important;
}
/* Cost-example line on the dark featured card was dark-on-dark (inline color:var(--ink-mute)). */
.price-card-example { color: var(--ink-mute); }
.price-card-example strong { color: var(--ink); }
.price-card.featured .price-card-example { color: rgba(247,237,215,0.92) !important; border-top-color: rgba(247,237,215,0.22) !important; }
.price-card.featured .price-card-example strong { color: var(--paper-lt) !important; }
/* Make the phone hero stack specificity-proof so an appended base hero-grid rule can't break it. */
@media (max-width: 980px) { .hero-spinoff .hero-grid.hero-grid-form { grid-template-columns: 1fr !important; } }

/* v114 — testimonial cards: pin the author block (avatar + name + area + job) to the
   bottom of each card so it lines up across all three regardless of quote length.
   (Cards already stretch to equal height in the .jdb-testi-3col grid.) */
.jdb-testi-3col { align-items: stretch; }
.testi-card { display: flex; flex-direction: column; height: 100%; }
.testi-card .testi-author { margin-top: auto; }

/* v115 — expanded hero quote form (full_name/phone/email/zip/address/service/
   timeline/sqft/budget/details). Adds textarea styling (was uncovered), full-
   width single fields, the optional-label hint, honeypot hide, error banner,
   and the busy-button state. Appended last so it wins the cascade. */
/* textarea inherits the exact input look (border/radius/padding/focus). */
.hfc-field textarea {
  font-family: 'Inter', sans-serif; font-size: 16px; color: var(--ink); background: #FFFDF8;
  border: 1px solid rgba(74,47,24,0.28); border-radius: 9px; padding: 13px 14px; width: 100%;
  -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s;
  resize: vertical; min-height: 84px; line-height: 1.45;
}
.hfc-field textarea:focus { outline: none; border-color: var(--cedar,#8B5E32); box-shadow: 0 0 0 3px rgba(139,94,50,0.18); }
.hfc-field textarea::placeholder { color: var(--ink-quiet,#6B7585); }
.hero-spinoff .hfc-field textarea { padding: 14px 15px; font-size: 16.5px; border-radius: 10px; }
/* full-width single field (address, details) — spans the whole form column. */
.hero-quote-form .hfc-field-full { width: 100%; }
/* "(optional)" hint sits inline with the label, lighter + not all-caps. */
.hfc-field label .hfc-opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-quiet,#6B7585); font-size: 0.92em; }
/* honeypot: visually + a11y hidden, still in the DOM for bots. */
.hfc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* inline error banner shown if the relay fails. */
.hfc-error { font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.4; color: #B3261E; background: rgba(179,38,30,0.08); border: 1px solid rgba(179,38,30,0.25); border-radius: 9px; padding: 10px 12px; margin: 8px 0 0; text-align: center; }
.hfc-error[hidden] { display: none !important; }
/* busy state while submitting. */
.hfc-submit[disabled] { opacity: 0.72; cursor: progress; }

/* ============================================================
 * v116 — NEW PAGE TYPES: blog index, blog post, FAQ page, legal page.
 * Appended last so it wins the cascade (main.css is filemtime cache-busted).
 * Reuses existing tokens (--cedar*, --ink*, --paper*) and existing classes
 * (.container, .jdb-head, .jdb-prose, .jdb-faq-card, .faq-item, .btn).
 * Warm / clean / centered / mobile-first (single column on phones).
 * ============================================================ */

/* ── Footer utility + legal links row ─────────────────────── */
.footer-utility {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px 10px; margin: 0 auto 14px; padding-bottom: 14px;
  font-family: 'Inter', sans-serif; font-size: 13px;
  border-bottom: 1px solid rgba(247,237,215,0.10);
}
.footer-utility a {
  color: rgba(247,237,215,0.74); font-weight: 500; letter-spacing: 0.01em;
  transition: color .15s;
}
.footer-utility a:hover { color: var(--paper-lt, #F2E5C5); }
.footer-utility .fu-sep { color: rgba(247,237,215,0.30); }

/* ── Blog index: hero band + post-card grid ───────────────── */
.jdb-blog-hero { padding-bottom: 8px; }
.jdb-blog-listing { padding-top: 40px; }
.jdb-blog-empty {
  text-align: center; font-family: 'Inter', sans-serif; font-size: 17px;
  color: var(--ink-mute, #475568); padding: 40px 0;
}
.jdb-blog-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.jdb-blog-card {
  display: flex; flex-direction: column; background: var(--paper-lt, #F2E5C5);
  border: 1px solid var(--ink-line-2, rgba(26,38,56,0.18)); border-radius: 12px;
  overflow: hidden; color: var(--ink, #1A2638);
  box-shadow: 0 2px 4px rgba(74,47,24,0.05), 0 12px 28px rgba(74,47,24,0.08);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s;
}
.jdb-blog-card:hover {
  transform: translateY(-4px); border-color: var(--cedar-lt, #B07A47);
  box-shadow: 0 8px 18px rgba(74,47,24,0.12), 0 26px 50px rgba(74,47,24,0.14);
}
.jdb-blog-card-img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper, #EBDAB6); }
.jdb-blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.jdb-blog-card:hover .jdb-blog-card-img img { transform: scale(1.05); }
.jdb-blog-chip {
  position: absolute; top: 12px; left: 12px;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper-lt, #F2E5C5); background: rgba(26,38,56,0.82);
  padding: 6px 11px; border-radius: 999px; backdrop-filter: blur(2px);
}
.jdb-blog-card-body { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; flex: 1; }
.jdb-blog-card-title {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 20px; line-height: 1.22;
  letter-spacing: -0.012em; color: var(--ink, #1A2638); margin: 0;
}
.jdb-blog-card-dek {
  font-family: 'Inter', sans-serif; font-size: 14.5px; line-height: 1.6;
  color: var(--ink-mute, #475568); margin: 0;
}
.jdb-blog-card-meta {
  display: flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 8px;
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 500;
  color: var(--ink-quiet, #6B7585);
}
.jdb-blog-dot { color: var(--ink-quiet, #6B7585); opacity: 0.6; }

/* ── Blog post: hero, body column, FAQ, related ───────────── */
.jdb-post-hero { padding-bottom: 8px; }
.jdb-post-head { max-width: 760px; margin: 0 auto; text-align: center; }
.jdb-post-chip { position: static; display: inline-block; margin-bottom: 16px; }
.jdb-post-title {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(30px, 5vw, 46px);
  line-height: 1.08; letter-spacing: -0.02em; color: var(--ink, #1A2638); margin: 0 0 16px;
}
.jdb-post-dek {
  font-family: 'Inter', sans-serif; font-size: 19px; line-height: 1.6;
  color: var(--ink-3, #2E3F58); margin: 0 0 18px; font-weight: 450;
}
.jdb-post-meta {
  font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--cedar-deep, #6B4520);
}
.jdb-post-meta .jdb-blog-dot { color: var(--ink-quiet, #6B7585); }
.jdb-post-herofig {
  max-width: 980px; margin: 36px auto 0; border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(26,38,56,0.18), 0 0 0 1px var(--ink-line-2, rgba(26,38,56,0.18));
}
.jdb-post-herofig img { display: block; width: 100%; height: auto; }
.jdb-post-bodywrap { padding-top: 44px; }

/* article column: readable centered measure, generous line-height. */
.jdb-article {
  max-width: 720px; margin: 0 auto; text-align: left;
  font-family: 'Inter', sans-serif; font-size: 18px; line-height: 1.78; color: var(--ink, #1A2638);
}
.jdb-article h2 {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 28px; line-height: 1.18;
  letter-spacing: -0.014em; color: var(--ink, #1A2638); margin: 1.8em 0 0.55em;
}
.jdb-article h3 {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 22px; line-height: 1.22;
  color: var(--ink, #1A2638); margin: 1.5em 0 0.5em;
}
.jdb-article h4 {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 17px;
  color: var(--ink, #1A2638); margin: 1.3em 0 0.4em;
}
.jdb-article p { margin: 0 0 1.15em; }
.jdb-article ul, .jdb-article ol { margin: 0 0 1.3em; padding-left: 1.4em; }
.jdb-article li { margin: 0 0 0.5em; padding-left: 0.2em; }
.jdb-article a { color: var(--cedar-deep, #6B4520); text-decoration: underline; text-underline-offset: 2px; }
.jdb-article a:hover { color: var(--cedar, #8B5E32); }
.jdb-article strong { color: var(--ink, #1A2638); font-weight: 700; }
.jdb-article blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--cedar-lt, #B07A47);
  font-family: 'Fraunces', serif; font-size: 20px; font-style: italic; line-height: 1.55;
  color: var(--ink-2, #243349);
}
.jdb-article figure { margin: 1.8em 0; }
.jdb-article figure img { display: block; width: 100%; height: auto; border-radius: 10px; }
.jdb-article figcaption {
  margin-top: 8px; font-size: 13px; color: var(--ink-quiet, #6B7585); text-align: center; font-style: italic;
}
.jdb-article hr { border: 0; border-top: 1px dashed var(--ink-line-2, rgba(26,38,56,0.18)); margin: 2em 0; }
.jdb-article table {
  width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 15.5px;
  border: 1px solid var(--ink-line-2, rgba(26,38,56,0.18)); border-radius: 8px; overflow: hidden;
}
.jdb-article th, .jdb-article td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--ink-line, rgba(26,38,56,0.10)); }
.jdb-article thead th { background: var(--paper, #EBDAB6); font-weight: 700; color: var(--ink, #1A2638); }
.jdb-article tbody tr:last-child td { border-bottom: 0; }

/* post FAQ + related */
.jdb-article-faq { max-width: 760px; margin: 48px auto 0; }
.jdb-article-faq-h, .jdb-related-h {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 24px; letter-spacing: -0.014em;
  color: var(--ink, #1A2638); margin: 0 0 18px; text-align: center;
}
.jdb-related { max-width: 720px; margin: 44px auto 0; }
.jdb-related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.jdb-related-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 20px; background: var(--paper-lt, #F2E5C5);
  border: 1px solid var(--ink-line-2, rgba(26,38,56,0.18)); border-radius: 10px;
  font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; color: var(--ink, #1A2638);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.jdb-related-list a:hover {
  transform: translateY(-1px); border-color: var(--cedar-lt, #B07A47);
  box-shadow: 0 6px 16px rgba(74,47,24,0.10);
}
.jdb-related-list svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--cedar-deep, #6B4520); }

/* ── FAQ page: tab row reuses .faq-tab-btn / .faq-panel ───── */
.jdb-faq-page .faq-tab-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 26px;
}

/* ── Legal page: centered readable column ─────────────────── */
.jdb-legal { padding-top: 56px; }
.jdb-legal-col { max-width: 760px; margin: 0 auto; }
.jdb-legal-head { text-align: center; margin-bottom: 36px; }
.jdb-legal-title {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(30px, 5vw, 44px);
  line-height: 1.1; letter-spacing: -0.02em; color: var(--ink, #1A2638); margin: 0 0 10px;
}
.jdb-legal-updated {
  font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 500;
  letter-spacing: 0.03em; color: var(--ink-quiet, #6B7585); margin: 0;
}
.jdb-legal-body { font-size: 16.5px; line-height: 1.74; }
.jdb-legal-body h2 { font-size: 24px; margin: 1.7em 0 0.5em; }
.jdb-legal-contact {
  margin: 40px auto 0; padding-top: 24px; max-width: 720px; text-align: center;
  border-top: 1px dashed var(--ink-line-2, rgba(26,38,56,0.18));
  font-family: 'Inter', sans-serif; font-size: 15px; color: var(--ink-mute, #475568);
}
.jdb-legal-contact a { color: var(--cedar-deep, #6B4520); font-weight: 700; }

/* ── Mobile: collapse all new grids to single column ──────── */
@media (max-width: 980px) {
  .jdb-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 680px) {
  .jdb-blog-grid { grid-template-columns: 1fr; gap: 20px; }
  .jdb-article { font-size: 17px; line-height: 1.74; }
  .jdb-article h2 { font-size: 24px; }
  .jdb-article h3 { font-size: 20px; }
  .jdb-post-dek { font-size: 17px; }
  .jdb-related-list a { font-size: 15px; padding: 14px 16px; }
}

/* ============================================================
   v117 — Homepage contact / free-quote section
   Form sits on the .hero deck-photo background (section.hero::before),
   so the LEFT-column text must be LIGHT to read on the dark photo.
   ============================================================ */
.jdb-home-contact { padding: 76px 0 84px !important; }   /* override section.hero padding */
.jdb-home-contact .hero-grid.hero-grid-form { align-items: center; }
.jdb-home-contact .jdb-contact-h {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -0.025em; line-height: 1.07;
  color: #FFF7E0; margin: 8px 0 14px; text-shadow: 0 2px 18px rgba(8,16,30,0.55);
}
.jdb-home-contact .jdb-contact-h .italic {
  font-style: italic; color: #FFF7E0; -webkit-text-fill-color: #FFF7E0; background: none;
}
.jdb-home-contact .lede { color: rgba(255,247,224,0.94); max-width: 520px; text-shadow: 0 1px 10px rgba(8,16,30,0.5); }
.jdb-home-contact .final-trust { color: rgba(255,247,224,0.82); font-size: 14px; }
/* "What happens next" list — fills the left column so the long form isn't lopsided */
.jdb-next { list-style: none; margin: 16px 0 22px; padding: 0; display: grid; gap: 11px; max-width: 470px; }
.jdb-next li { display: flex; align-items: center; gap: 12px; color: rgba(255,247,224,0.95); font-size: 15px; line-height: 1.35; text-shadow: 0 1px 8px rgba(8,16,30,0.5); }
.jdb-next .jn-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(180deg,#D4915F,#8A5A2F); color: #FFFDF6; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
/* Anchor offset so #quote / #contact land below the sticky nav, site-wide */
#quote, #contact { scroll-margin-top: 96px; }
@media (max-width: 980px) {
  .jdb-home-contact { padding: 48px 0 56px !important; }
  .jdb-home-contact .lede, .jdb-next { max-width: none; }
}

/* ============================================================
   v118 — Real top navigation: Services / Service Areas dropdowns,
   Blog / FAQ / Contact, + mobile hamburger drawer with accordions.
   ============================================================ */
nav.top { overflow: visible !important; }            /* let dropdowns/drawer escape the bar */
.nav-links .nav-item { display: flex; align-items: center; position: relative; }
.nav-links .nav-top { display: inline-flex; align-items: center; gap: 5px; }
.nav-caret { font-size: 9px; opacity: 0.8; transition: transform .2s; }
.nav-item.has-dropdown:hover .nav-caret { transform: translateY(1px); }

/* --- Desktop dropdown panels (light card) --- */
.nav-dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 230px; background: #FFFDF6; border: 1px solid rgba(176,122,71,0.30); border-radius: 12px;
  box-shadow: 0 20px 44px rgba(8,16,30,0.26); padding: 8px;
  display: flex; flex-direction: column; gap: 2px; z-index: 80;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.nav-dropdown::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }  /* hover bridge */
.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-links .nav-dropdown a {
  display: block; color: var(--ink, #1A2638); font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: 13px; letter-spacing: 0; text-transform: none; padding: 9px 14px; border-radius: 8px; white-space: nowrap;
}
.nav-links .nav-dropdown a:hover { background: var(--paper-lt, #F2E5C5); color: var(--ink, #1A2638); }
.nav-dropdown-wide { min-width: 460px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 4px; }

/* --- Hamburger button (hidden on desktop) --- */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; position: relative; z-index: 3; }
.nav-toggle-bars { display: block; width: 26px; height: 18px; position: relative; }
.nav-toggle-bars span { display: block; position: absolute; left: 0; right: 0; height: 2.5px; background: #F7EDD7; border-radius: 2px; transition: .25s ease; }
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-toggle-bars span:nth-child(3) { bottom: 0; }
nav.top.open .nav-toggle-bars span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
nav.top.open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
nav.top.open .nav-toggle-bars span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

/* hidden on desktop */
.nav-sub-toggle { display: none; }
.nav-mobile-cta { display: none; }

/* --- Mobile (<=900px): drawer + accordions --- */
@media (max-width: 900px) {
  nav.top { grid-template-columns: 1fr auto; }
  .nav-toggle { display: block; }
  .nav-right { display: none; }
  .nav-links { display: none; }                       /* closed */
  nav.top.open .nav-links {
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100vh - 60px); overflow-y: auto;
    background: linear-gradient(180deg, rgba(18,34,72,0.99), rgba(10,22,52,0.99));
    border-bottom: 1.5px solid rgba(176,122,71,0.55);
    padding: 8px clamp(18px,5vw,40px) 26px; gap: 0;
    box-shadow: 0 24px 44px rgba(0,0,0,0.45);
  }
  .nav-links .nav-item { flex-wrap: wrap; justify-content: space-between; width: 100%; border-bottom: 1px solid rgba(247,237,215,0.10); }
  .nav-links .nav-item .nav-top { flex: 1; padding: 15px 4px; font-size: 13px; }
  .nav-sub-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: none; color: #F7EDD7; font-size: 13px; cursor: pointer; transition: transform .2s; }
  .nav-item.has-dropdown.open .nav-sub-toggle { transform: rotate(180deg); }
  .nav-item .nav-dropdown {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    display: none; width: 100%; min-width: 0; box-shadow: none; border: none;
    background: rgba(0,0,0,0.20); border-radius: 8px; padding: 6px; margin: 0 0 10px;
    grid-template-columns: 1fr 1fr;
  }
  .nav-item.has-dropdown.open .nav-dropdown { display: grid; }
  .nav-links .nav-dropdown a { color: rgba(247,237,215,0.92); font-size: 13px; }
  .nav-links .nav-dropdown a:hover { background: rgba(247,237,215,0.10); color: #FFF7E0; }
  .nav-mobile-cta { display: flex; flex-direction: column; gap: 11px; padding: 18px 2px 4px; }
  .nav-phone-m { color: #FFF7E0; font-weight: 700; font-size: 19px; text-align: center; text-decoration: none; font-feature-settings: 'tnum'; }
  .nav-mobile-cta .btn { width: 100%; text-align: center; justify-content: center; }
  body.nav-locked { overflow: hidden; }
}
@media (max-width: 460px) {
  .nav-item .nav-dropdown { grid-template-columns: 1fr; }
}

/* ============================================================
   v119 — Dedicated /contact/ page (uses the contact section styles)
   ============================================================ */
.jdb-contact-page { padding-top: 124px !important; padding-bottom: 88px !important; }
.jdb-contact-page .jdb-contact-h { font-size: clamp(34px, 4.4vw, 54px); }
.jdb-contact-meta { display: flex; flex-wrap: wrap; gap: 16px 30px; margin-top: 18px; }
.jdb-contact-meta > div { display: flex; flex-direction: column; gap: 2px; }
.jdb-contact-meta span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,247,224,0.68); }
.jdb-contact-meta strong { color: #FFF7E0; font-size: 15px; text-shadow: 0 1px 8px rgba(8,16,30,0.5); }
@media (max-width: 900px) { .jdb-contact-page { padding-top: 96px !important; } }