/* =========================================================
   Supreme Deck Builders — design system
   Brand colors sampled directly from the real logo (see plan doc):
   Forest Green #0F452B / Brick Maroon #591A15 / White / Black.
   Mobile-first throughout — this is the #1 fix over the old theme.
   ========================================================= */

:root{
  --green: #0F452B;
  --green-dark: #0A3320;
  --green-light: #E7EFE9;
  --maroon: #591A15;
  --maroon-dark: #3E110D;
  --maroon-light: #F3E7E5;
  --ink: #1A1A1A;
  --ink-soft: #55564F;
  --paper: #FFFFFF;
  --paper-alt: #F7F5F0;
  --line: #E2DFD5;
  --warn: #B9862F;

  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --radius: 14px;
  --shadow: 0 4px 18px rgba(0,0,0,.10);
  --shadow-lift: 0 18px 40px rgba(10,30,20,.16);
  --container: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; height: auto; display: block; }
[hidden]{ display: none !important; }
a{ color: var(--green); text-decoration: none; }
a:hover{ text-decoration: underline; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .5em; color: var(--ink); }
h1{ font-size: clamp(32px, 6vw, 50px); }
h2{ font-size: clamp(25px, 4.5vw, 36px); }
h3{ font-size: clamp(19px, 3.5vw, 23px); font-weight: 700; letter-spacing: 0; }
p{ margin: 0 0 1em; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; }

.sdb-container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 18px;
}
.sdb-section{ padding: 56px 0; }
.sdb-section--alt{ background: var(--paper-alt); }
.sdb-section--green{ background: var(--green); color: #fff; }
.sdb-section--green h2, .sdb-section--green h3{ color: #fff; }
.sdb-section--green .sdb-lede{ color: rgba(255,255,255,.85); }
.sdb-eyebrow{
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--maroon);
  font-weight: 700;
  margin-bottom: 10px;
  padding-left: 22px;
  position: relative;
  display: block;
}
.sdb-eyebrow::before{
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 14px; height: 2px;
  background: var(--maroon);
  transform: translateY(-50%);
}
.sdb-lede{ color: var(--ink-soft); font-size: 17px; max-width: 62ch; }

/* Buttons */
.sdb-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  font-family: var(--font-display);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.sdb-btn:hover{ text-decoration: none; transform: translateY(-2px); }
.sdb-btn--primary{ background: var(--maroon); color: #fff; box-shadow: 0 10px 24px rgba(89,26,21,.28); }
.sdb-btn--primary:hover{ background: var(--maroon-dark); box-shadow: 0 14px 30px rgba(89,26,21,.36); }
.sdb-btn--outline{ background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.sdb-btn--outline:hover{ background: rgba(255,255,255,.14); }
.sdb-btn--ghost{ background: transparent; color: var(--green); border-color: var(--green); }
.sdb-btn--ghost:hover{ background: var(--green-light); }
.sdb-btn-row{ display: flex; flex-wrap: wrap; gap: 12px; }

/* =========================================================
   Header / mobile-first navigation
   ========================================================= */
.sdb-header{
  position: sticky;
  top: 0;
  /* Must outrank .sdb-nav-scrim's z-index (55): .sdb-header is a sticky
     positioned element, which makes it its own stacking context, so
     #sdbNav's z-index:60 (meant to sit above the scrim) was only ever
     being compared against other things *inside* the header - against
     the header's own z-index of 50 it lost to the scrim's 55 every time.
     In practice this meant every link and submenu toggle inside the open
     mobile menu was covered by the invisible scrim and could not be
     tapped at all - only closing the menu worked. Raising the header
     above the scrim fixes every dropdown's tap targets, not just this
     page's, without needing to change the DOM structure. */
  z-index: 56;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.sdb-trust-ribbon{
  background: linear-gradient(90deg, var(--green-dark), var(--green) 55%, var(--green-dark));
  overflow: hidden;
}
.sdb-trust-ribbon-inner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 26px;
  padding: 5px 18px;
}
.sdb-hdr-badge{
  display: none;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.sdb-hdr-badge svg{ width: 13px; height: 13px; flex: none; fill: #E9C46A; }
.sdb-hdr-badge:nth-child(1){ display: flex; }
@media (min-width: 560px){
  .sdb-hdr-badge:nth-child(2){ display: flex; }
}
@media (min-width: 780px){
  .sdb-hdr-badge{ display: flex; }
  .sdb-trust-ribbon-inner{ justify-content: center; }
}
.sdb-header-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 16px;
}
/* Plain, ordinary centering: the logo image and the name/tagline text
   block sit side by side as one flex row, vertically centered together
   as a unit - no absolute positioning, nothing bleeding outside the bar.
   A bigger logo just means a taller (but still evenly padded) bar. */
.sdb-logo{
  display: flex;
  align-items: center;
  gap: 14px;
}
.sdb-logo img{ height: 76px; width: auto; display: block; }
.sdb-logo-text{ display: flex; flex-direction: column; gap: 3px; line-height: 1.2; }
.sdb-logo-name{ font-family: var(--font-display); font-weight: 800; color: var(--green); font-size: 18px; letter-spacing: -.005em; }
.sdb-logo-tagline{ font-weight: 600; color: var(--maroon); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.sdb-header-badges{ display: none; }
.sdb-header-badges img{ max-height: 40px; width: auto; }
.sdb-header-cta{ display: none; }
.sdb-header-cta a{ font-size: 17px; }
.sdb-header-phone{
  font-weight: 700;
  color: var(--maroon);
  white-space: nowrap;
}
/* Fills the wide, empty stretch of white between the logo and the
   TrexPro badge/phone on desktop with an actual conversion button
   instead of leaving it bare. Hidden until there's real room for it
   (mobile/tablet already have the logo, hamburger and nothing else in
   this row - no space to add a button without crowding it). */
.sdb-header-estimate-btn{ display: none; }
@media (min-width: 640px){
  .sdb-logo img{ height: 96px; }
  .sdb-logo-name{ font-size: 21px; }
  .sdb-logo-tagline{ font-size: 11px; }
}
@media (min-width: 960px){
  .sdb-header-estimate-btn{
    display: inline-flex;
    padding: 12px 22px;
    font-size: 13.5px;
    white-space: nowrap;
  }
}

.sdb-menu-toggle{
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 8px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sdb-menu-toggle span,
.sdb-menu-toggle span::before,
.sdb-menu-toggle span::after{
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  position: relative;
}
.sdb-menu-toggle span::before{ position: absolute; top: -6px; }
.sdb-menu-toggle span::after{ position: absolute; top: 6px; }

.sdb-nav{
  position: fixed;
  inset: 0 0 0 auto;
  width: min(86vw, 360px);
  background: #fff;
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 60;
  overflow-y: auto;
  box-shadow: var(--shadow);
  padding: 18px;
}
.sdb-nav.is-open{ transform: translateX(0); }
.sdb-nav-scrim{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.sdb-nav-scrim.is-open{ opacity: 1; pointer-events: auto; }
.sdb-nav-close{
  background: none; border: none; font-size: 26px; line-height: 1;
  margin-bottom: 12px; cursor: pointer; color: var(--ink);
}
.sdb-nav-list, .sdb-sub-menu{ display: flex; flex-direction: column; }
.sdb-menu-item{ border-bottom: 1px solid var(--line); }
.sdb-menu-link{
  display: block;
  padding: 13px 4px;
  color: var(--ink);
  font-weight: 600;
}
.sdb-menu-link:hover{ text-decoration: none; color: var(--green); }
.sdb-submenu-toggle{
  position: absolute;
  right: 0; top: 4px;
  background: none; border: none; width: 40px; height: 40px;
  cursor: pointer; font-size: 16px;
}
.sdb-menu-item.has-children{ position: relative; }
.sdb-sub-menu{ display: none; padding-left: 14px; }
.sdb-sub-menu[data-depth="1"]{ border-top: 1px solid var(--line); }
.sdb-menu-item.is-expanded > .sdb-sub-menu{ display: flex; }
.sdb-submenu-toggle[aria-expanded="true"] span{ transform: rotate(180deg); display: inline-block; }

/* Grouped dropdown (e.g. "Decking Options" combining Decking Colors / Deck
   Railings / Privacy Screens into one menu) - on mobile this is just the
   same stacked slide-out list with a bolder heading above each group of
   real links, so it needs no extra tap/hover step beyond the normal
   dropdown toggle. */
.sdb-menu-group{ padding: 10px 0 6px; }
.sdb-menu-group + .sdb-menu-group{ border-top: 1px solid var(--line); margin-top: 4px; }
.sdb-menu-group-label{
  display: block;
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 800; color: var(--green); padding: 6px 4px 4px;
  cursor: default;
}
.sdb-menu-group-list{ display: flex; flex-direction: column; padding-left: 10px; }
.sdb-menu-group-list .sdb-menu-link{ padding: 10px 4px; font-weight: 500; }

.sdb-header-cta{
  display: none;
}

@media (min-width: 960px){
  .sdb-menu-toggle{ display: none; }
  .sdb-nav-scrim{ display: none; }
  .sdb-nav{
    position: static;
    width: auto;
    transform: none;
    box-shadow: none;
    padding: 0;
    /* Reset the mobile slide-out panel's overflow-y:auto - left in place
       here it silently clips any dropdown submenu (a real bug found while
       adding the "Decking Colors" dropdown: taller submenus like this one
       were cut off, showing only their first item, behind the hero photo
       below). Desktop submenus are position:absolute overlays, not an
       in-flow scroll area, so they need to be allowed to escape this box. */
    overflow: visible;
  }
  .sdb-nav-close{ display: none; }
  .sdb-nav-list{ flex-direction: row; gap: 0; font-size: 13.5px; }
  /* The link is display:block for the mobile full-width tap target; at
     desktop width it must not fill the <li>, or the caret button below
     gets pushed onto its own line. Make the <li> a flex row instead. */
  .sdb-menu-item{ border-bottom: none; position: relative; display: flex; align-items: center; }
  .sdb-menu-link{ display: inline-flex; align-items: center; padding: 8px 8px; border-radius: 8px; white-space: nowrap; }
  .sdb-menu-link:hover{ background: var(--green-light); }
  .sdb-submenu-toggle{ position: static; width: 14px; height: 14px; margin-left: 0; flex: none; }
  .sdb-sub-menu{
    position: absolute; top: 100%; left: 0;
    background: #fff; border: 1px solid var(--line); border-radius: 8px;
    min-width: 240px; padding: 6px; box-shadow: var(--shadow);
    display: none; z-index: 20;
    font-size: 15px;
  }
  .sdb-menu-item.is-expanded > .sdb-sub-menu{ display: flex; }
  .sdb-sub-menu .sdb-sub-menu{ top: 0; left: 100%; }

  /* Desktop: the grouped dropdown becomes a clean 3-column mega-panel
     instead of one long single-column list, so all 10 real links under
     Decking Options are visible and scannable at a glance. Layout-only
     properties here - NOT display - because .sdb-sub-menu and
     .sdb-sub-menu--grouped are both single-class selectors of equal
     specificity; an unconditional "display: grid" here used to come
     later in the cascade than ".sdb-sub-menu{ display:none }" above and
     so always won, making this dropdown appear permanently open
     regardless of hover/tap state. Only the .is-expanded rule below may
     set display now. */
  .sdb-sub-menu--grouped{
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 4px 28px; width: max-content; max-width: 92vw; min-width: 560px; padding: 18px 20px;
    left: 50%; transform: translateX(-50%);
  }
  .sdb-menu-item.is-expanded > .sdb-sub-menu--grouped{ display: grid; }
  .sdb-menu-group{ padding: 0; }
  .sdb-menu-group + .sdb-menu-group{ border-top: none; margin-top: 0; }
  .sdb-menu-group-label{
    display: block; padding: 2px 0 8px; margin-bottom: 8px;
    border-bottom: 1px solid var(--line); white-space: normal;
  }
  .sdb-menu-group-list{ padding-left: 0; gap: 2px; }
  .sdb-menu-group-list .sdb-menu-link{ padding: 7px 4px; white-space: normal; line-height: 1.3; }

  .sdb-header-cta{ display: flex; align-items: center; gap: 16px; }
  .sdb-header-badges{ display: flex; align-items: center; gap: 10px; }
  .sdb-nav-row{ border-top: 1px solid var(--line); }
  .sdb-nav-list{ justify-content: center; flex-wrap: wrap; }
}
/* On wide desktop screens, let the nav row itself spread past the shared
   1180px content container (header/logo and page content stay at 1180px)
   so the full set of top-level categories has a realistic shot at fitting
   on one line instead of wrapping - just widening the row, not the type. */
@media (min-width: 1180px){
  .sdb-nav-row{ max-width: 1400px; }
  .sdb-nav-list{ font-size: 13px; }
  .sdb-menu-link{ padding: 8px 7px; }
}
@media (min-width: 1440px){
  .sdb-nav-row{ max-width: 1560px; }
  .sdb-nav-list{ font-size: 14px; }
  .sdb-menu-link{ padding: 8px 7px; }
}
@media (min-width: 1600px){
  .sdb-menu-link{ padding: 8px 9px; }
}
@media (min-width: 1700px){
  .sdb-nav-row{ max-width: 1760px; }
  .sdb-menu-link{ padding: 8px 12px; }
  .sdb-nav-list{ font-size: 15px; }
}

/* =========================================================
   Hero
   ========================================================= */
.sdb-hero{
  position: relative;
  color: #fff;
  min-height: 560px;
  display: flex;
  align-items: center;
  background-color: var(--green-dark);
  background-size: cover;
  background-position: center 35%;
  text-align: left;
  /* The left offset that lines the hero copy up with the header/nav
     content lives on the outer flex container, not on .sdb-hero-inner -
     that way it never eats into the fixed-width text column below on
     wide screens (border-box would otherwise shrink the readable width
     as this offset grows with viewport size). */
  padding-left: max(18px, calc((100% - 1180px) / 2 + 18px));
}
/* Real photo stays fully visible underneath, at its normal size (no
   artificial zoom) - the wash is weighted to the left, where the copy
   sits, and fades out by roughly two-thirds across so the right side of
   the deck photo is left completely uncovered. */
.sdb-hero::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(4,18,12,.72) 0%, rgba(4,18,12,.6) 30%, rgba(4,18,12,.32) 52%, rgba(4,18,12,0) 68%);
}
/* Left edge lines up with the same left edge the header/nav content
   uses (not the page-centered container) so the copy sits at the true
   left of the full-bleed photo, never drifting toward the middle of a
   wide screen - see the padding-left on .sdb-hero above. This box's
   own padding stays fixed so the 480px text column never shrinks. */
.sdb-hero-inner{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 48px 18px;
  max-width: 480px;
}
.sdb-hero-inner h1, .sdb-hero-inner p, .sdb-hero-inner .sdb-eyebrow{ text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.sdb-hero-inner h1{ color: #fff; font-weight: 700; margin-bottom: .3em; }
.sdb-hero-inner .sdb-lede{ max-width: 54ch; }
.sdb-hero-trust{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.sdb-hero-trust-badge{
  background: #fff;
  border-radius: 6px;
  padding: 5px 9px;
  height: 32px;
  width: auto;
}
.sdb-hero-trust-text{
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.sdb-hero-badges{ display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; margin-top: 22px; }
.sdb-badge{
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.sdb-badge--header{
  background: var(--green-light);
  border-color: transparent;
  color: var(--green-dark);
  font-size: 13px;
  white-space: nowrap;
}
.sdb-hero p.sdb-lede{ color: rgba(255,255,255,.92); }
.sdb-hero h1, .sdb-hero h2, .sdb-hero h3{ color: #fff; }
.sdb-hero .sdb-eyebrow{ color: #fff; opacity: .85; }

@media (min-width: 860px){
  .sdb-hero{ min-height: 680px; }
  .sdb-hero-inner{ padding-top: 56px; padding-bottom: 56px; }
}

/* Phones: the crop is close to portrait here, so "cover" alone leaves no
   quiet strip for the text - shift/zoom modestly (not the wall-to-wall
   zoom from before) just enough to clear the couch/stairs on the right. */
@media (max-width: 599px){
  .sdb-hero{ background-position: 32% center; }
}

/* =========================================================
   Before / after slider
   ========================================================= */
.sdb-ba{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  touch-action: pan-y;
  user-select: none;
  max-width: 100%;
}
.sdb-ba img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.sdb-ba-after{ position: absolute; inset: 0; }
.sdb-ba-before-wrap{
  position: absolute; inset: 0;
  overflow: hidden;
  width: 50%;
}
.sdb-ba-before-wrap img{ width: var(--sdb-ba-img-w, 100%); max-width: none; }
.sdb-ba-handle{
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 44px;
  margin-left: -22px;
  display: flex; align-items: center; justify-content: center;
  cursor: ew-resize;
}
.sdb-ba-handle::before{
  content:'';
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 3px; margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.sdb-ba-grip{
  position: relative;
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--green); font-weight: 700;
}
.sdb-ba-label{
  position: absolute; top: 12px;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.sdb-ba-label--before{ left: 12px; }
.sdb-ba-label--after{ right: 12px; }

/* =========================================================
   Service cards
   ========================================================= */
.sdb-grid{ display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px){ .sdb-grid--2{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px){
  .sdb-grid--3{ grid-template-columns: repeat(3, 1fr); }
  .sdb-grid--5{ grid-template-columns: repeat(5, 1fr); }
}
.sdb-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.sdb-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: transparent; }
.sdb-card h3{ margin-bottom: 6px; }
.sdb-card p{ color: var(--ink-soft); font-size: 14.5px; margin-bottom: 10px; }
.sdb-card a.sdb-card-link{ font-weight: 700; font-size: 14px; }
.sdb-card-link--standalone{ display: inline-block; margin-top: 6px; font-weight: 700; font-size: 14px; color: var(--green); }

/* Trust row */
.sdb-trust-row{
  display: flex; flex-wrap: wrap; gap: 20px 30px;
  align-items: center; justify-content: space-between;
}
.sdb-trust-item{ display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14.5px; }
.sdb-trust-item img{ max-height: 46px; width: auto; }

/* Reviews section */
.sdb-reviews-section{ background: var(--paper-alt); }
.sdb-reviews-grid{
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin-top: 28px;
}
@media (min-width: 780px){
  .sdb-reviews-grid{ grid-template-columns: repeat(3, 1fr); }
}
.sdb-review-card{
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--ink);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
a.sdb-review-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: transparent; text-decoration: none; }
.sdb-review-card--static{ background: var(--green); color: #fff; border-color: var(--green); }
.sdb-review-card--static .sdb-review-source{ color: #fff; }
.sdb-review-card--static .sdb-review-count{ color: rgba(255,255,255,.9); margin: 0; }
.sdb-review-top{ display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sdb-review-logo{ width: 28px; height: 28px; flex: none; }
.sdb-review-logo--trex{ width: 60px; height: auto; }
.sdb-review-source{ font-weight: 700; font-size: 14.5px; color: var(--ink); }
.sdb-review-score{ display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.sdb-review-num{ font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; color: var(--ink); }
.sdb-review-stars{ color: #E9C46A; font-size: 18px; letter-spacing: 2px; }
.sdb-review-count{ color: var(--ink-soft); font-size: 14px; margin: 0 0 12px; }
.sdb-review-cta{ font-weight: 700; font-size: 14px; color: var(--green); }

/* =========================================================
   Gallery (homepage preview + category landing pages)
   ========================================================= */
.sdb-cat-nav{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.sdb-cat-pill{
  background: var(--green-light); color: var(--green);
  border-radius: 999px; padding: 8px 16px; font-size: 13.5px; font-weight: 700;
}
.sdb-cat-pill:hover{ background: var(--green); color: #fff; text-decoration: none; }
.sdb-cat-pill.is-active{ background: var(--green); color: #fff; }

.sdb-featured-row{ margin-bottom: 40px; }
.sdb-featured-row .sdb-grid{ grid-template-columns: 1fr; }
@media (min-width: 720px){ .sdb-featured-row .sdb-grid{ grid-template-columns: repeat(2, 1fr); } }

.sdb-photo-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 640px){ .sdb-photo-grid{ grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 960px){ .sdb-photo-grid{ grid-template-columns: repeat(4, 1fr); } }

.sdb-photo{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--paper-alt);
  box-shadow: var(--shadow);
  transition: box-shadow .22s ease, transform .22s ease;
}
.sdb-photo:hover{ box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.sdb-photo img{ width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.sdb-photo:hover img{ transform: scale(1.06); }
.sdb-photo-zoom{
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(10,30,20,.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease;
}
.sdb-photo:hover .sdb-photo-zoom, .sdb-photo:focus-within .sdb-photo-zoom{ opacity: 1; transform: translateY(0); }
@media (hover: none){ .sdb-photo-zoom{ opacity: 1; transform: none; } }
.sdb-photo-cap{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 12px;
  background: linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,0));
  color: #fff;
  font-size: 12.5px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
}
.sdb-photo:hover .sdb-photo-cap,
.sdb-photo:focus-within .sdb-photo-cap{ opacity: 1; transform: translateY(0); }
.sdb-photo-cap b{ display: block; font-size: 13px; }
.sdb-photo-featured-tag{
  position: absolute; top: 10px; left: 10px; z-index: 3;
  background: var(--maroon); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
}
/* Featured before/after tiles in the category grid: the before/after
   labels already own the top-left and top-right corners, so the
   "Featured" tag moves to top-center instead. These tiles are a static
   50/50 preview (not draggable) and link through to the full project. */
.sdb-ba--tile{ display: block; }
.sdb-ba--tile .sdb-photo-featured-tag{ left: 50%; top: 10px; transform: translateX(-50%); }
.sdb-ba--tile .sdb-ba-handle{ pointer-events: none; }
.sdb-ba--tile .sdb-photo-cap{ opacity: 0; }
.sdb-ba--tile:hover .sdb-photo-cap,
.sdb-ba--tile:focus-within .sdb-photo-cap{ opacity: 1; }
@media (hover: none){ .sdb-ba--tile .sdb-photo-cap{ opacity: 1; padding: 8px 10px; font-size: 11.5px; } }
/* Touch devices: always show a thin caption strip, since there's no hover */
@media (hover: none){
  .sdb-photo-cap{ opacity: 1; transform: none; padding: 8px 10px; font-size: 11.5px; }
}

/* =========================================================
   FAQ accordion
   ========================================================= */
.sdb-faq-item{ border-bottom: 1px solid var(--line); }
.sdb-faq-q{
  width: 100%;
  text-align: left;
  background: none; border: none;
  padding: 16px 0;
  font-weight: 700; font-size: 16px;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; color: var(--ink);
}
.sdb-faq-q .sdb-faq-icon{ transition: transform .2s ease; flex: none; margin-left: 12px; }
.sdb-faq-item.is-open .sdb-faq-icon{ transform: rotate(45deg); }
.sdb-faq-a{
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  color: var(--ink-soft);
}
.sdb-faq-a-inner{ padding-bottom: 16px; }
.sdb-faq-item.is-open .sdb-faq-a{ max-height: 600px; }

.sdb-story-content{ max-width: 760px; margin-top: 14px; }
.sdb-story-content p{ margin: 0 0 1em; }

/* =========================================================
   Service-area list
   ========================================================= */
.sdb-areas{ display: grid; grid-template-columns: repeat(2,1fr); gap: 8px 20px; }
@media (min-width: 640px){ .sdb-areas{ grid-template-columns: repeat(3,1fr); } }
.sdb-areas li{ padding: 4px 0; font-size: 14.5px; }
.sdb-county{ font-weight: 700; color: var(--maroon); margin: 16px 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }

/* =========================================================
   Budget calculator
   ========================================================= */
.sdb-calc{
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
  max-width: 560px;
}
.sdb-calc-row{ margin-bottom: 18px; }
.sdb-calc-row label{ display: block; font-weight: 700; margin-bottom: 6px; font-size: 14.5px; }
.sdb-calc-row select,
.sdb-calc-row input[type=range]{ width: 100%; }
.sdb-calc-row select{
  padding: 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; background: #fff;
}
.sdb-calc-size-value{ font-weight: 700; color: var(--green); }
.sdb-calc-result{
  background: var(--green-light);
  border-radius: 8px;
  padding: 18px;
  margin-top: 6px;
}
.sdb-calc-result .amount{ font-family: var(--font-display); font-size: 30px; color: var(--green); }
.sdb-calc-disclaimer{ font-size: 12px; color: var(--ink-soft); margin-top: 10px; }

/* =========================================================
   Final CTA + footer
   ========================================================= */
.sdb-final-cta{ text-align: center; }
.sdb-final-cta .sdb-btn-row{ justify-content: center; margin-top: 18px; }

.sdb-footer{ background: var(--paper); color: var(--ink); padding: 48px 0 24px; border-top: 1px solid var(--line); }
.sdb-footer h4{ color: var(--ink); font-family: var(--font-body); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.sdb-footer a{ color: var(--ink); }
.sdb-footer a:hover{ color: var(--maroon); }
.sdb-footer-grid{ display: grid; gap: 30px; grid-template-columns: 1fr; margin-bottom: 30px; }
@media (min-width: 780px){ .sdb-footer-grid{ grid-template-columns: 2fr 1fr 1fr 1fr; } }
.sdb-footer-grid li{ padding: 4px 0; font-size: 14px; }
.sdb-footer-bottom{
  border-top: 1px solid var(--line);
  padding-top: 18px;
  font-size: 12.5px;
  color: var(--ink-soft);
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
}
.sdb-footer-bottom a{ color: var(--ink-soft); }

/* =========================================================
   Generic page / post content (existing WP content, untouched text)
   ========================================================= */
.sdb-page-header{
  position: relative;
  min-height: 240px;
  display: flex;
  align-items: flex-end;
  padding: 30px 0;
  color: #fff;
  background-color: var(--green-dark);
  background-size: cover;
  background-position: center;
}
.sdb-page-header::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,18,12,.35) 0%, rgba(4,18,12,.55) 55%, rgba(4,18,12,.88) 100%);
}
.sdb-page-header .sdb-container{ position: relative; z-index: 1; }
.sdb-page-header h1{ color: #fff; margin: 0; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.sdb-content{ padding: 44px 0; }
/* Widened (Sept 2026, per Mike) from the original 820px article width to
   match the site's main --container width (1180px) - the page-header
   banner above this content already renders at the full 1180px width, so
   the narrower 820px column made ordinary interior pages feel cramped by
   comparison. The homepage is untouched here since it renders with
   bare=True and never passes through .sdb-content at all. */
.sdb-content .sdb-container{ max-width: 1180px; }
.sdb-content h1, .sdb-content h2, .sdb-content h3{ margin-top: 1.2em; }
.sdb-content img{ border-radius: var(--radius); }
.sdb-content ul{ list-style: disc; padding-left: 22px; margin-bottom: 1em; }
.sdb-content ul li{ margin-bottom: .35em; }
.sdb-content h1{ font-size: clamp(26px, 5vw, 36px); }

/* Numbered lists in old WP content ("Why choose us" style breakdowns) get a
   card treatment instead of reading as a bare browser-default <ol>. */
.sdb-content ol{ list-style: none; padding-left: 0; margin: 1.4em 0; counter-reset: sdb-ol; }
.sdb-content ol > li{
  counter-increment: sdb-ol;
  position: relative;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--radius);
  padding: 16px 20px 16px 56px;
  margin-bottom: 14px;
}
.sdb-content ol > li::before{
  content: counter(sdb-ol);
  position: absolute;
  left: 16px; top: 16px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.sdb-content ol > li > strong:first-child{ display: block; margin-bottom: 4px; color: var(--green-dark); font-size: 17px; }

.sdb-cta-band{ margin-top: 8px; }
.sdb-breadcrumbs{ font-size: 13px; color: var(--ink-soft); margin-bottom: 14px; }
.sdb-breadcrumbs a{ color: var(--ink-soft); }

/* Old-content <table> layout wrappers that weren't safe to unwrap (more
   than one real cell) still get a modern, responsive treatment instead of
   a fixed-width 980px table. */
.sdb-table-wrap{ overflow-x: auto; margin: 1.4em 0; -webkit-overflow-scrolling: touch; }
.sdb-table-wrap table{ width: 100%; border-collapse: collapse; font-size: 14.5px; }
.sdb-table-wrap td, .sdb-table-wrap th{ padding: 9px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }

.sdb-cat-hero{ background: var(--green-light); padding: 36px 0 30px; }
.sdb-cat-hero h1{ margin: 0; }
.sdb-cat-hero-desc{ max-width: 760px; margin-top: 10px; color: var(--ink-soft); }
.sdb-cat-hero-desc p{ margin: 0 0 0.6em; }

.sdb-pagination{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 32px 0 8px; }
.sdb-pagination-item span,
.sdb-pagination-item a,
.sdb-pagination-item button{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 14px;
  border-radius: 8px; border: 1px solid var(--line);
  font-size: 14px; color: var(--ink);
  background: var(--paper); font-family: var(--font-body); cursor: pointer;
}
.sdb-pagination-item a:hover,
.sdb-pagination-item button:not(:disabled):hover{ background: var(--green); border-color: var(--green); color: #fff; }
.sdb-pagination-item span.current{ background: var(--green); border-color: var(--green); color: #fff; font-weight: 700; white-space: nowrap; padding: 0 16px; }
.sdb-pagination-item button:disabled{ opacity: .4; cursor: default; }
.sdb-cg-pager{ justify-content: center; }

/* Skip link for accessibility */
.sdb-skip-link{
  position: absolute; left: -999px; top: auto;
  background: var(--green); color: #fff; padding: 10px 16px; z-index: 999;
}
.sdb-skip-link:focus{ left: 12px; top: 12px; }

/* =========================================================
   Blog post listing (index.php) + single post meta
   ========================================================= */
.sdb-post-list{ display: grid; gap: 28px; margin-top: 24px; }
.sdb-post-card-thumb{ display: block; border-radius: var(--radius); overflow: hidden; margin-bottom: 10px; aspect-ratio: 16/9; }
.sdb-post-card-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.sdb-post-card h2{ margin: 0 0 6px; font-size: 22px; }
.sdb-post-meta{ color: var(--ink-soft); font-size: 13px; margin: -6px 0 16px; }
.sdb-page-thumb{ border-radius: var(--radius); overflow: hidden; margin: 18px 0; }
.sdb-page-thumb img{ width: 100%; height: auto; display: block; }
.sdb-page-links{ margin-top: 24px; font-weight: 700; }

/* =========================================================
   Single gallery-photo page
   ========================================================= */
.sdb-project{
  display: grid; gap: 32px; padding: 28px 0 8px;
}
@media (min-width: 860px){ .sdb-project{ grid-template-columns: 1.3fr 1fr; align-items: start; } }
.sdb-project-photo{ border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; background: var(--paper-alt); }
.sdb-project-photo img{ width: 100%; height: 100%; object-fit: cover; }
.sdb-project .sdb-ba{ border-radius: var(--radius); }
.sdb-project-tags{ display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.sdb-tag{
  display: inline-block; background: var(--paper-alt); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
}
.sdb-tag--city{ background: var(--green-light); border-color: transparent; color: var(--green-dark); }

/* Minor wrapper polish */
.sdb-story{ max-width: 900px; }
.sdb-post-card-excerpt{ color: var(--ink-soft); font-size: 15px; }
.sdb-faq{ max-width: 780px; }

/* =========================================================
   Caption figures (from repaired [caption] shortcodes - real Trex
   product-swatch photos and other inline captioned images). A run of
   consecutive figures is grouped into a flex-wrap row by build.py so a
   run of color swatches reads as a clean card strip.
   ========================================================= */
.sdb-caption-row{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 20px 0 28px;
}
.sdb-caption-figure{
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  width: 150px;
  flex: 0 0 auto;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sdb-caption-row .sdb-caption-figure:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.sdb-caption-figure img{ width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0; cursor: zoom-in; }
/* A hotlinked product photo that fails to load (main.js flags it via
   onerror) collapses to a plain swatch-colored placeholder instead of a
   broken-image icon - still honest (no fake photo), just not ugly. */
.sdb-caption-figure.sdb-img-broken img{ display: none; }
.sdb-caption-figure.sdb-img-broken{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  aspect-ratio: auto;
}
.sdb-caption-figure.sdb-img-broken::before{
  content: '';
  width: 100%; aspect-ratio: 1/1;
  background: var(--paper-alt);
  border-bottom: 1px solid var(--line);
}
.sdb-caption-figure figcaption{
  padding: 10px 12px 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
}
.sdb-caption-text{ color: var(--ink-soft); font-size: 14.5px; }
/* A lone figure outside a swatch row (a single inline product photo) reads
   better a bit larger and left-aligned with the surrounding copy. */
.sdb-content > .sdb-caption-figure{ width: 220px; float: left; margin: 4px 20px 16px 0; }

/* =========================================================
   Gallery-index tile grid (rebuilt from an old editor layout table -
   the "which gallery do you want to see" hub pages)
   ========================================================= */
.sdb-gallery-tile-grid{ margin: 22px 0 30px; }
.sdb-gallery-tile{
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  color: var(--ink);
  transition: transform .22s ease, box-shadow .22s ease;
}
.sdb-gallery-tile:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lift); text-decoration: none; }
.sdb-gallery-tile-img{
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--paper-alt);
  overflow: hidden;
}
.sdb-gallery-tile-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.sdb-gallery-tile:hover .sdb-gallery-tile-img img{ transform: scale(1.06); }
.sdb-gallery-tile-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  padding: 16px 18px 4px;
  color: var(--ink);
}
.sdb-gallery-tile-title:last-child{ padding-bottom: 18px; }
.sdb-gallery-tile--noimg .sdb-gallery-tile-title{ padding-top: 20px; }
.sdb-gallery-tile-cta{
  font-size: 13.5px;
  font-weight: 700;
  color: var(--green);
  padding: 6px 18px 18px;
  margin-top: auto;
}

/* =========================================================
   Lightbox (click any gallery/swatch photo to view full size)
   ========================================================= */
.sdb-lightbox-link{ display: block; position: relative; }
.sdb-lightbox{
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6,14,10,.92);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.sdb-lightbox.is-open{ opacity: 1; pointer-events: auto; }
.sdb-lightbox img{
  max-width: min(1100px, 92vw); max-height: 86vh;
  width: auto; height: auto;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.sdb-lightbox-close{
  position: absolute; top: 18px; right: 22px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3);
  color: #fff; font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}

/* =========================================================
   3D Deck Visualizer - live, orbitable 3D model (Three.js) with
   independently recolorable decking field / picture-frame border /
   fascia (real Trex colors, sampled live off Trex's own swatch photos)
   plus rail style/colors, baluster color and house siding/brick color.
   Replaced the earlier real-photo canvas-recolor visualizer Sept 2026.
   ========================================================= */
.sdb3d-wrap{
  display: grid; grid-template-columns: minmax(0,1.65fr) minmax(0,1fr);
  margin-top: 28px; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); background: var(--paper);
}
@media (max-width: 880px){
  .sdb3d-wrap{ grid-template-columns: 1fr; }
}

.sdb3d-viewport{
  position: relative; height: 620px;
  background: linear-gradient(#bcdcf2,#eaf4fa 65%,#eaf4fa);
}
@media (max-width: 880px){
  .sdb3d-viewport{ height: 380px; }
}
.sdb3d-canvas-wrap{ position: absolute; inset: 0; }
.sdb3d-canvas-wrap canvas{ display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.sdb3d-canvas-wrap canvas:active{ cursor: grabbing; }
.sdb3d-hint{
  position: absolute; left: 14px; bottom: 14px; background: rgba(10,51,32,.78); color: #fff;
  font-size: 11.5px; padding: 7px 12px; border-radius: 8px; pointer-events: none;
  font-weight: 600; letter-spacing: .01em;
}
.sdb3d-loading{
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  flex-direction: column; background: linear-gradient(#bcdcf2,#eaf4fa 65%,#eaf4fa);
  z-index: 4; gap: 10px; transition: opacity .3s ease;
}
.sdb3d-loading .sdb3d-spin{
  width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(15,69,43,.18);
  border-top-color: var(--green); animation: sdb3dspin .85s linear infinite;
}
@keyframes sdb3dspin{ to{ transform: rotate(360deg); } }
.sdb3d-loading span{ font-size: 13px; font-weight: 700; color: var(--green-dark); }

.sdb3d-panel{
  background: var(--paper); border-left: 1px solid var(--line);
  overflow-y: auto; max-height: 620px; padding: 20px;
}
@media (max-width: 880px){
  .sdb3d-panel{ border-left: none; border-top: 1px solid var(--line); max-height: none; }
}
.sdb3d-panel h3{
  font-family: var(--font-display); font-size: 12.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--green-dark); margin: 20px 0 8px; font-weight: 800;
}
.sdb3d-panel h3:first-of-type{ margin-top: 0; }
.sdb3d-cur{ font-size: 11.5px; color: var(--ink-soft); margin: -4px 0 9px; min-height: 14px; }

.sdb3d-swrow{ display: flex; flex-wrap: wrap; gap: 8px; }
.sdb3d-sw{
  width: 38px; height: 38px; border-radius: 8px; border: 2px solid rgba(0,0,0,.12); cursor: pointer;
  background: #d8d4c8; position: relative; flex: none; transition: transform .12s ease, border-color .12s ease;
}
.sdb3d-sw:hover{ transform: translateY(-2px); }
.sdb3d-sw.is-selected{ border-color: var(--green); box-shadow: 0 0 0 2px var(--green-light); }
.sdb3d-sw.pending{
  background-image: linear-gradient(45deg,#e4e0d4 25%,transparent 25%,transparent 50%,#e4e0d4 50%,#e4e0d4 75%,transparent 75%,transparent);
  background-size: 8px 8px;
}

.sdb3d-stylebtns, .sdb3d-railcolors{ display: flex; flex-wrap: wrap; gap: 7px; }
.sdb3d-railcolors[hidden]{ display: none; }
.sdb3d-stylebtn{
  flex: 1 1 calc(50% - 4px); min-width: 118px; border: 1.5px solid var(--line); background: var(--paper);
  border-radius: 9px; padding: 9px 8px; font-size: 11.5px; font-weight: 700; cursor: pointer;
  color: var(--ink); text-align: center; line-height: 1.25; font-family: var(--font-body);
}
.sdb3d-stylebtn.is-selected{ border-color: var(--green); background: var(--green-light); color: var(--green-dark); }

.sdb3d-rc{ width: 54px; height: 36px; border-radius: 8px; border: 2px solid rgba(0,0,0,.12); cursor: pointer; position: relative; }
.sdb3d-rc.is-selected{ border-color: var(--green); box-shadow: 0 0 0 2px var(--green-light); }
.sdb3d-rc-label{ font-size: 10.5px; text-align: center; margin-top: 3px; color: var(--ink-soft); font-weight: 600; }
.sdb3d-rc-wrap{ display: flex; flex-direction: column; align-items: center; gap: 2px; }

.sdb3d-note{
  font-size: 11px; color: var(--ink-soft); line-height: 1.5; margin-top: 8px;
  background: var(--paper-alt); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
}
.sdb3d-dimrow{ display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.sdb3d-dimrow label{ font-size: 11.5px; font-weight: 700; width: 64px; flex: none; color: var(--ink); }
.sdb3d-dimrow input[type=range]{ flex: 1; accent-color: var(--green); }
.sdb3d-dimval{ font-size: 11.5px; font-weight: 800; color: var(--green-dark); width: 44px; text-align: right; flex: none; }

.sdb3d-cta{ margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.sdb3d-cta .sdb-btn{ width: 100%; }

#sdb3dTooltip{
  position: fixed; pointer-events: none; background: rgba(10,51,32,.94); color: #fff;
  font-size: 11.5px; font-weight: 700; padding: 5px 9px; border-radius: 6px; z-index: 200;
  opacity: 0; transition: opacity .08s ease; white-space: nowrap; transform: translateY(-4px);
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.sdb-lightbox-close:hover{ background: rgba(255,255,255,.22); }

/* =========================================================
   Estimate / contact form — self-hosted, no third-party embed.
   ========================================================= */
.sdb-form{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
  max-width: 720px;
}
.sdb-form-hp{
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}
.sdb-form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
}
.sdb-form-field{ display: flex; flex-direction: column; gap: 6px; }
.sdb-form-field--full{ grid-column: 1 / -1; }
.sdb-form-field label{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
}
.sdb-form-field .sdb-form-optional{
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 12.5px;
}
.sdb-form input[type="text"],
.sdb-form input[type="tel"],
.sdb-form input[type="email"],
.sdb-form textarea{
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 13px;
  width: 100%;
}
.sdb-form input:focus,
.sdb-form textarea:focus{
  outline: 2px solid var(--green);
  outline-offset: 1px;
  background: var(--paper);
}
.sdb-form textarea{ resize: vertical; min-height: 110px; }
.sdb-form-checks{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
}
.sdb-form-check{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14.5px;
  color: var(--ink);
  font-weight: 500;
}
.sdb-form-check input{ margin-top: 3px; accent-color: var(--green); width: 16px; height: 16px; flex-shrink: 0; }
.sdb-form-file{
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 12px 13px;
  background: var(--paper-alt);
  font-size: 14px;
  color: var(--ink-soft);
}
.sdb-form-file input{ font-family: var(--font-body); font-size: 14px; width: 100%; }
.sdb-form-actions{
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.sdb-form-note{ font-size: 13px; color: var(--ink-soft); margin: 0; }
.sdb-form-alert{
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 14.5px;
  font-weight: 600;
  margin: 0 0 16px;
}
.sdb-form-alert--success{ background: var(--green-light); color: var(--green-dark); }
.sdb-form-alert--error{ background: var(--maroon-light); color: var(--maroon-dark); }
.sdb-form button[type="submit"]:disabled{ opacity: .6; cursor: default; transform: none !important; }
@media (max-width: 640px){
  .sdb-form{ padding: 20px; }
  .sdb-form-grid{ grid-template-columns: 1fr; }
  .sdb-form-checks{ grid-template-columns: 1fr; }
}

/* =========================================================
   Real project photos dropped inline into WP-style page content
   (composite-deck-builders/, deck-builders-near-me/, etc.) — a
   larger, full-bleed-in-column photo card, not the small swatch-chip
   look of .sdb-caption-figure.
   ========================================================= */
.sdb-content-photo-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 22px 0 28px;
}
@media (min-width: 640px){
  .sdb-content-photo-row--2{ grid-template-columns: 1fr 1fr; }
  .sdb-content-photo-row--3{ grid-template-columns: repeat(3, 1fr); }
}
.sdb-content-photo{
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--paper-alt);
}
.sdb-content-photo img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform .3s ease;
}
.sdb-content-photo:hover img{ transform: scale(1.04); }
.sdb-content-photo figcaption{
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--paper);
}
.sdb-content-photo--sm{ max-width: 460px; }

/* ---------------------------------------------------------------------
   Deck Galleries by Color (/deck-galleries/) - filterable real-project
   gallery: color chips + area pins + masonry tile grid + save/favorite.
--------------------------------------------------------------------- */
.sdb-cg-intro{ text-align: center; max-width: 720px; margin: 0 auto 28px; }
.sdb-cg-intro p{ color: var(--ink-soft); font-size: 16px; line-height: 1.55; }
.sdb-cg-controls{ margin-bottom: 10px; }
.sdb-cg-label{ font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin: 18px 0 8px; font-weight: 700; }
.sdb-cg-select{ display: inline-block; border: 1px solid var(--line); background-color: var(--paper); color: var(--ink); padding: 9px 38px 9px 16px; border-radius: 999px; font-size: 13.5px; font-family: var(--font-body); cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2355564F' stroke-width='2'><path d='M5 8l5 5 5-5'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; min-width: 220px; max-width: 100%; }
.sdb-cg-select:hover{ border-color: var(--maroon); }
.sdb-cg-select:focus{ outline: none; border-color: var(--maroon); box-shadow: 0 0 0 3px rgba(89,26,21,.12); }

.sdb-cg-grid{ margin: 22px 0 10px; column-count: 3; column-gap: 16px; }
@media (min-width: 780px) and (max-width: 1023px){ .sdb-cg-grid{ column-count: 2; } }
@media (max-width: 779px){ .sdb-cg-grid{ column-count: 1; } }
.sdb-cg-tile{ break-inside: avoid; margin: 0 0 16px; position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--paper-alt); display: block; }
.sdb-cg-tile img{ width: 100%; display: block; transition: transform .35s ease; }
.sdb-cg-tile:hover img{ transform: scale(1.045); }
.sdb-cg-tile-cap{ position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; background: linear-gradient(to top, rgba(0,0,0,.74), rgba(0,0,0,0)); color: #fff; opacity: 0; transform: translateY(6px); transition: .2s; pointer-events: none; }
.sdb-cg-tile:hover .sdb-cg-tile-cap{ opacity: 1; transform: translateY(0); }
.sdb-cg-tile-color{ display: block; font-weight: 700; font-size: 14.5px; font-family: var(--font-display); }
.sdb-cg-tile-meta{ display: block; font-size: 11.5px; opacity: .88; margin-top: 2px; line-height: 1.4; }
.sdb-cg-heart{ position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.25); z-index: 2; }
.sdb-cg-heart svg{ width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 2; }
.sdb-cg-heart.is-saved svg{ fill: var(--maroon); stroke: var(--maroon); }
.sdb-cg-tile.is-hidden{ display: none; }
.sdb-cg-empty{ text-align: center; color: var(--ink-soft); padding: 40px 0; display: none; }
.sdb-cg-empty.is-visible{ display: block; }

.sdb-cg-fav-pill{ position: fixed; right: 20px; bottom: 20px; background: var(--ink); color: #fff; padding: 13px 20px; border-radius: 999px; font-size: 14px; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-lift); cursor: pointer; opacity: 0; transform: translateY(12px); transition: .25s; z-index: 40; border: none; font-family: var(--font-body); }
.sdb-cg-fav-pill.is-visible{ opacity: 1; transform: translateY(0); }
.sdb-cg-fav-pill b{ background: var(--maroon); border-radius: 999px; padding: 2px 9px; font-size: 12.5px; font-weight: 700; }

.sdb-cg-secondary{ margin-top: 50px; padding-top: 40px; border-top: 1px solid var(--line); }
.sdb-cg-secondary h2{ margin-bottom: 6px; }
.sdb-cg-secondary-sub{ color: var(--ink-soft); margin: 0 0 22px; }
.sdb-cg-cat-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 640px){ .sdb-cg-cat-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px){ .sdb-cg-cat-grid{ grid-template-columns: repeat(4, 1fr); } }
.sdb-cg-cat-card{ display: block; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--paper-alt); transition: transform .2s, box-shadow .2s; }
.sdb-cg-cat-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lift); text-decoration: none; }
.sdb-cg-cat-card img{ width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.sdb-cg-cat-card span{ display: block; padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--ink); }