/* ============================================================================
 * Soil Depot, sitewide S-tier design system.
 *
 * Purpose: bring the calculator's design language (Instrument Serif display,
 * warm layered surfaces, green/gold accents, real depth) to every page's
 * generic content, so editorial sections and tables stop reading as plain
 * defaults and the whole site feels considered and consistent.
 *
 * Scoping rule (important): everything here targets GENERIC Gutenberg block
 * classes (.wp-block-heading, .wp-block-table, .wp-block-button, top-level
 * .entry-content paragraphs/lists) and global chrome (focus, selection,
 * scrollbar, background depth). It deliberately does NOT touch the bespoke
 * marketing sections (.sdh-*, .sd-*, .sdp-*, .sdx-*, .sd3*), which live inside
 * raw-HTML blocks and already carry their own designs. That keeps the home,
 * city, and "What We Do" layouts exactly as they are while elevating the rest.
 * ========================================================================== */

/* --- iOS/Safari baseline -----------------------------------------------------
 * 1) Stop iOS Safari from auto-inflating body text (e.g. in landscape).
 * 2) Keep form text controls at 16px: iOS zooms the whole page in whenever a
 *    focused field is smaller than 16px. The double-class selector outweighs
 *    Fluent Forms' own single-class rule, so no !important is needed. The submit
 *    button is intentionally excluded (it is not a zoom trigger). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.frm-fluent-form .ff-el-form-control,
.frm-fluent-form input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.frm-fluent-form select,
.frm-fluent-form textarea { font-size: 16px; }

:root {
  --sds-cream:   #F5F1E6;
  --sds-cream-2: #EFE9D8;
  --sds-paper:   #FBF8F0;
  --sds-ink:     #241B0F;
  --sds-ink-80:  #3A3025;
  --sds-ink-65:  rgba(36, 27, 15, .66);
  --sds-ink-45:  rgba(36, 27, 15, .46);
  --sds-line:    rgba(36, 27, 15, .12);
  --sds-line-2:  rgba(36, 27, 15, .07);
  --sds-soil:    #8A6D4B;
  --sds-soil-d:  #5A4128;
  --sds-green:   #2E7D32;
  --sds-green-d: #23601F;
  --sds-green-l: #E4F0E2;
  --sds-gold:    #E0A94B;
  --sds-gold-l:  #F4D79A;

  --sds-r-sm: 10px;
  --sds-r-md: 16px;
  --sds-r-lg: 22px;

  /* layered shadows, the calculator's depth recipe */
  --sds-sh-sm: 0 1px 2px rgba(36,27,15,.06), 0 2px 6px rgba(36,27,15,.05);
  --sds-sh-md: 0 10px 30px rgba(36,27,15,.10), 0 2px 6px rgba(36,27,15,.05);
  --sds-sh-lg: 0 24px 60px rgba(36,27,15,.18), 0 4px 12px rgba(36,27,15,.07);

  --sds-disp: 'Instrument Serif', Georgia, serif;
  --sds-ease: cubic-bezier(.16, .84, .44, 1);
}


/* ============================================================================
 * 1. GLOBAL DEPTH + CHROME (sitewide, low-risk, never touches layout)
 * ========================================================================== */

/* Warm, dimensional base. A soft top sheen + warm corner glows replace the flat
 * cream fill so the page reads as a crafted surface, not a paint bucket.
 * Applied to the content surface so it sits behind every page's content. */
.ast-separate-container,
.ast-plain-container,
body.ast-separate-container {
  background-color: var(--sds-cream) !important;
  background-image:
    radial-gradient(140% 70% at 50% -8%, rgba(255,255,255,.7), transparent 62%),
    radial-gradient(70% 50% at 8% 2%, rgba(224,169,75,.07), transparent 55%),
    radial-gradient(70% 55% at 100% 6%, rgba(46,125,50,.06), transparent 55%),
    linear-gradient(180deg, var(--sds-paper) 0%, var(--sds-cream) 42%, var(--sds-cream-2) 100%) !important;
}

/* Fine film grain for tactile depth (desktop only; very low opacity; multiply so
 * it never lightens darks; pointer-events off; sits above content but below the
 * nav and any fixed widgets). This is the touch that reads as "expensive". */
@media (min-width: 922px) {
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    opacity: .03;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
  }
}

/* Premium text selection */
::selection      { background: rgba(46,125,50,.20); color: var(--sds-ink); }
::-moz-selection { background: rgba(46,125,50,.20); color: var(--sds-ink); }

/* Brand focus ring everywhere (a11y + polish) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible {
  /* Green core carries the contrast (WCAG 1.4.11, ~6.7:1 on cream); gold becomes the
     brand halo. The old gold-only ring was ~1.87:1 on light surfaces and failed. */
  outline: 2px solid var(--sds-green-d);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(224, 169, 75, .45);
  border-radius: 4px;
}

/* Refined scrollbar (Webkit) */
@media (min-width: 922px) {
  html { scrollbar-color: rgba(138,109,75,.5) transparent; }
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-thumb {
    background: rgba(138,109,75,.45);
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
  }
  ::-webkit-scrollbar-thumb:hover { background: rgba(90,65,40,.6); background-clip: content-box; }
}


/* ============================================================================
 * 2. EDITORIAL TYPOGRAPHY (generic Gutenberg content)
 *    Targets .wp-block-heading and top-level entry-content prose only, so the
 *    bespoke raw-HTML sections are untouched.
 * ========================================================================== */

/* Readable measure for plain content pages (FAQ, Privacy, calculator prose). */
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
  max-width: 72ch;
}

/* Body prose: warmer, higher-contrast ink than the WCAG fallback, better rhythm */
.entry-content > p {
  color: var(--sds-ink-80);
  font-size: 1.0625rem;
  line-height: 1.72;
  margin: 0 0 1.15em;
}

.entry-content > ul,
.entry-content > ol { color: var(--sds-ink-80); line-height: 1.7; }
.entry-content > ul li,
.entry-content > ol li { margin: .35em 0; }

/* Display headings, the serif voice from the calculator */
.entry-content .wp-block-heading {
  font-family: var(--sds-disp);
  font-weight: 400;
  color: var(--sds-ink);
  letter-spacing: -.012em;
  text-wrap: balance;
}

/* h2: section opener with a green/gold accent rule above it */
.entry-content h2.wp-block-heading {
  position: relative;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.06;
  margin: 2.4em 0 .5em;
  padding-top: 22px;
}
.entry-content h2.wp-block-heading::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 54px; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--sds-green), var(--sds-gold));
}
.entry-content > h2.wp-block-heading:first-child { margin-top: .2em; }

/* h3: subsection */
.entry-content h3.wp-block-heading {
  font-size: clamp(22px, 2.6vw, 29px);
  line-height: 1.12;
  margin: 1.9em 0 .4em;
  color: var(--sds-soil-d);
}

/* Content links: refined underline that animates on hover */
.entry-content > p a,
.entry-content > ul a,
.entry-content > ol a {
  color: var(--sds-green-d);
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(var(--sds-gold), var(--sds-gold));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1.5px;
  transition: background-size .2s var(--sds-ease), color .2s var(--sds-ease);
}
.entry-content > p a:hover,
.entry-content > ul a:hover,
.entry-content > ol a:hover { color: var(--sds-ink); background-size: 100% 100%; background-image: linear-gradient(rgba(224,169,75,.28), rgba(224,169,75,.28)); }

/* Blockquote + hr, for completeness on editorial pages */
.entry-content blockquote {
  margin: 1.6em 0;
  padding: 6px 0 6px 22px;
  border-left: 3px solid var(--sds-green);
  font-family: var(--sds-disp);
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--sds-ink);
}
.entry-content hr.wp-block-separator {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sds-line), transparent);
  margin: 2.4em auto;
}


/* ============================================================================
 * 3. TABLES (the biggest single upgrade, fixes the default-HTML look)
 * ========================================================================== */

.entry-content .wp-block-table { margin: 1.6em 0 2em; }

.entry-content .wp-block-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
  color: var(--sds-ink-80);
  background: var(--sds-paper);
  border: 1px solid var(--sds-line);
  border-radius: var(--sds-r-md);
  overflow: hidden;
  box-shadow: var(--sds-sh-md);
  font-variant-numeric: tabular-nums;
}

/* Header band: deep soil-to-green gradient, cream type */
.entry-content .wp-block-table thead th,
.entry-content .wp-block-table thead td {
  background: linear-gradient(135deg, #3B2C1A, #23601F);
  color: #FBF8F0;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: left;
  padding: 15px 18px;
  border: 0;
}

.entry-content .wp-block-table tbody td,
.entry-content .wp-block-table tbody th {
  padding: 14px 18px;
  border: 0;
  border-top: 1px solid var(--sds-line-2);
  vertical-align: top;
}

/* Zebra + hover for scannability */
.entry-content .wp-block-table tbody tr:nth-child(odd) td { background: rgba(255,255,255,.45); }
.entry-content .wp-block-table tbody tr:hover td { background: var(--sds-green-l); }

/* Emphasise the first column (the row's subject) */
.entry-content .wp-block-table tbody tr td:first-child {
  font-weight: 700;
  color: var(--sds-ink);
}

/* Tables that are mostly numbers read better aligned; keep left for prose tables.
   The data tables here lead with a label column, so leave default left-align. */
.entry-content .wp-block-table figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--sds-ink-65); /* was ink-45 (2.85:1); ink-65 = ~5.18:1, passes 1.4.3 */
  text-align: center;
}

/* Small screens: let wide tables scroll instead of squashing */
@media (max-width: 680px) {
  .entry-content .wp-block-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--sds-r-md);
  }
  .entry-content .wp-block-table table { min-width: 520px; }
}


/* ============================================================================
 * 4. BUTTONS (premium pill, matches the calculator + nav CTA)
 * ========================================================================== */

.entry-content .wp-block-button__link,
.entry-content .wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 700;
  letter-spacing: .01em;
  background: linear-gradient(180deg, #37973B, var(--sds-green-d));
  color: #fff;
  border: 0;
  box-shadow: 0 8px 22px rgba(46,125,50,.28);
  transition: transform .18s var(--sds-ease), box-shadow .18s var(--sds-ease), filter .18s var(--sds-ease);
}
.entry-content .wp-block-button__link:hover,
.entry-content .wp-element-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(46,125,50,.34);
  filter: brightness(1.04);
  color: #fff;
}
.entry-content .wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent;
  color: var(--sds-green-d);
  border: 1.5px solid var(--sds-green-d);
  box-shadow: none;
}
.entry-content .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: var(--sds-green-l);
  color: var(--sds-green-d);
  transform: translateY(-2px);
  box-shadow: var(--sds-sh-sm);
}


/* ============================================================================
 * 5. CALCULATOR-PAGE FIELD GUIDE (the knowledge region beneath the tool)
 *    The prose + data tables on /soil-calculator/ are plain Gutenberg blocks.
 *    This lifts them from a flat wall of grey text into a designed field guide:
 *    a commanding section opener, chaptered subsections with hairline dividers,
 *    lead-in paragraphs for rhythm, floating spec-sheet tables, and a centred
 *    closing call to action. Scoped to the calculator page body class and to the
 *    bare wp-block-* children of .entry-content, so the tool (.sd3) and the
 *    earthwork guide (.sde) are untouched, and other pages keep the lighter
 *    global editorial styles in section 2.
 * ========================================================================== */

/* Shared reading measure for the whole region. */
body.sd-calc-page .entry-content > h2.wp-block-heading,
body.sd-calc-page .entry-content > h3.wp-block-heading,
body.sd-calc-page .entry-content > p,
body.sd-calc-page .entry-content > .wp-block-table,
body.sd-calc-page .entry-content > .wp-block-buttons {
  width: min(100%, 880px);
  margin-left: auto;
  margin-right: auto;
}

/* --- Section opener: a commanding serif headline that breaks from the tool --- */
body.sd-calc-page .entry-content > h2.wp-block-heading:first-of-type {
  margin-top: 1.9em;
  padding-top: 30px;
  font-size: clamp(34px, 4.6vw, 52px);
}
/* widen + brighten the accent rule so the section reads as a deliberate break */
body.sd-calc-page .entry-content > h2.wp-block-heading:first-of-type::before {
  width: 76px;
  height: 4px;
  background: linear-gradient(90deg, var(--sds-green), var(--sds-gold) 70%, var(--sds-gold-l));
  box-shadow: 0 2px 10px rgba(46,125,50,.28);
}

/* --- Subsections become chapters: hairline divider above + stronger heading --- */
body.sd-calc-page .entry-content > h3.wp-block-heading {
  position: relative;
  margin-top: 2.6em;
  padding-top: 1.5em;
  font-size: clamp(23px, 2.8vw, 30px);
  color: var(--sds-ink);
}
body.sd-calc-page .entry-content > h3.wp-block-heading::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--sds-green) 0, var(--sds-line) 22%, transparent 70%);
}
/* the first chapter sits right under the opener, so it needs no divider */
body.sd-calc-page .entry-content > h2.wp-block-heading + h3.wp-block-heading {
  margin-top: 1.1em;
  padding-top: 0;
}
body.sd-calc-page .entry-content > h2.wp-block-heading + h3.wp-block-heading::before { display: none; }

/* --- Typographic rhythm: the first paragraph of each block leads, larger + darker --- */
body.sd-calc-page .entry-content > h3.wp-block-heading + p,
body.sd-calc-page .entry-content > h2.wp-block-heading + p {
  color: var(--sds-ink);
  font-size: 1.2rem;
  line-height: 1.62;
}
/* numbers inside the prose read as data, not running text */
body.sd-calc-page .entry-content > p { font-variant-numeric: tabular-nums; }

/* --- Spec-sheet tables: lift them off the page and sharpen the data --- */
body.sd-calc-page .entry-content > .wp-block-table { margin: 1.4em auto 2.2em; }
body.sd-calc-page .entry-content > .wp-block-table table {
  border-radius: var(--sds-r-lg);
  box-shadow: var(--sds-sh-lg);
  background: #fff;
}
body.sd-calc-page .entry-content > .wp-block-table thead th {
  padding: 17px 22px;
  font-size: 13px;
  letter-spacing: .06em;
}
body.sd-calc-page .entry-content > .wp-block-table tbody td {
  padding: 15px 22px;
  font-variant-numeric: tabular-nums;
}
/* continuous green accent down the label column + emphasised subject */
body.sd-calc-page .entry-content > .wp-block-table tbody td:first-child {
  box-shadow: inset 3px 0 0 var(--sds-green);
}
body.sd-calc-page .entry-content > .wp-block-table tbody tr:nth-child(even) td {
  background: var(--sds-paper);
}
body.sd-calc-page .entry-content > .wp-block-table tbody tr { transition: background .15s var(--sds-ease); }
body.sd-calc-page .entry-content > .wp-block-table tbody tr:hover td { background: var(--sds-green-l); }

/* --- Closing call to action ("Ready to order?"): a centred finale --- */
body.sd-calc-page .entry-content > h2.wp-block-heading:has(+ p + .wp-block-buttons) {
  text-align: center;
  margin-top: 2.8em;
  padding-top: 34px;
}
body.sd-calc-page .entry-content > h2.wp-block-heading:has(+ p + .wp-block-buttons)::before {
  left: 50%;
  transform: translateX(-50%);
}
body.sd-calc-page .entry-content > h2.wp-block-heading:has(+ p + .wp-block-buttons) + p {
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
body.sd-calc-page .entry-content > .wp-block-buttons {
  display: flex;
  justify-content: center;
  margin-top: 1.4em;
}
body.sd-calc-page .entry-content > .wp-block-buttons .wp-block-button__link {
  padding: 16px 40px;
  font-size: 16.5px;
}

/* --- Small screens: tighten the rhythm --- */
@media (max-width: 600px) {
  body.sd-calc-page .entry-content > h3.wp-block-heading + p,
  body.sd-calc-page .entry-content > h2.wp-block-heading + p { font-size: 1.1rem; }
  body.sd-calc-page .entry-content > .wp-block-table thead th { padding: 13px 14px; }
  body.sd-calc-page .entry-content > .wp-block-table tbody td { padding: 13px 14px; }
}


/* ============================================================================
 * 6. MOTION PREFERENCES
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .entry-content > p a,
  .entry-content .wp-block-button__link,
  .entry-content .wp-element-button { transition: none !important; }
}

/* =====================================================================
   FLUENT FORMS FACELIFT  (premium inputs + brand focus + CTA button)
   Scoped to .frm-fluent-form so only the site forms are affected.
   ===================================================================== */
.frm-fluent-form .ff-el-group { margin-bottom: 18px; }
.frm-fluent-form .ff-el-input--label label,
.frm-fluent-form .ff-el-input--label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2px;
  color: #3a352e;
  margin-bottom: 7px;
}
.frm-fluent-form .ff-el-form-control,
.frm-fluent-form input[type=text].ff-el-form-control,
.frm-fluent-form input[type=email].ff-el-form-control,
.frm-fluent-form textarea.ff-el-form-control {
  width: 100% !important;
  font-family: inherit !important;
  font-size: 15px !important;
  color: #1c1c1c !important;
  background: #fff !important;
  border: 1.5px solid rgba(18,18,18,.16) !important;
  border-radius: 12px !important;
  padding: 13px 15px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.03) !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}
.frm-fluent-form textarea.ff-el-form-control { min-height: 130px !important; resize: vertical; line-height: 1.6; }
.frm-fluent-form .ff-el-form-control::placeholder { color: rgba(18,18,18,.4) !important; }
.frm-fluent-form .ff-el-form-control:hover { border-color: rgba(18,18,18,.28) !important; }
.frm-fluent-form .ff-el-form-control:focus {
  outline: none !important;
  border-color: #1F7A3A !important;
  box-shadow: 0 0 0 4px rgba(31,122,58,.15) !important;
}
.frm-fluent-form .ff-el-is-required .ff-el-input--label label:after,
.frm-fluent-form .ff-el-input--label .text-danger { color: #c0492b !important; }

.frm-fluent-form .ff-btn-submit,
.frm-fluent-form button.ff-btn-submit {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: .02em !important;
  color: #fff !important;
  background: linear-gradient(180deg, #2aa050, #17672f) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 15px 34px !important;
  min-height: 54px !important;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(31,122,58,.28) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
.frm-fluent-form .ff-btn-submit:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: 0 18px 38px rgba(31,122,58,.34) !important;
}
.frm-fluent-form .ff-btn-submit:active { transform: translateY(0); }

/* ---------------------------------------------------------------------------
 * Service (city) pages: manager-card spacing on mobile.
 * The city-page block CSS (inline in page content) zeroes the manager section's
 * vertical padding at <=768px (`.sdp-city-mgr-sec{padding:0 16px}`), which left
 * the regional-manager card flush against the hero above it. Desktop keeps a
 * clamp(40px,6vw,60px) top gap. Restore comfortable vertical spacing on mobile
 * so the card breathes the way it does on desktop. !important beats the inline
 * block rule (same selector, later source). Applies to every city page.
 * ------------------------------------------------------------------------- */
@media (max-width:768px){
  .sdp-city-mgr-sec{padding-top:34px !important;padding-bottom:38px !important}
}

/* Texas flag card: the waving-flag video's cover-crop was centered too low,
   which hid the white Lone Star in the blue field (you saw only the lower
   stripes). Bias the crop upward so the star stays in frame. Scoped to the
   flag card so the city-skyline videos (same .sdp-city-vid class) are
   unaffected. Applies in every location the flag card appears. */
.sdp-map-flag video,
.sdp-map-flag .sdp-city-vid{object-position:center 26% !important}

/* ---------------------------------------------------------------------------
 * Service-area intro prose. The opening paragraphs read like a dense bulletin
 * ("national park website"). Give the .sdp-city-* template (shared by all four
 * city pages) editorial structure: the prose column becomes a soft content
 * card to balance the facts card beside it, the first paragraph is a lead with
 * a green accent rule + drop cap, and the rhythm is opened up. Pure CSS, so it
 * applies to every city page at once with no per-page content edits.
 * ------------------------------------------------------------------------- */
.sdp-city-cols .sdp-city-p{font-size:16.5px;line-height:1.72;color:#3a3025;margin:0 0 17px}
.sdp-city-cols > div:first-child{
  background:linear-gradient(180deg,#ffffff,#FBF8F0);
  border:1px solid rgba(36,27,15,.08);border-radius:18px;
  padding:32px 36px;box-shadow:0 10px 30px rgba(36,27,15,.05)}
.sdp-city-cols > div:first-child .sdp-city-h2{margin-top:0}
/* lead paragraph: first .sdp-city-p right after the section heading */
.sdp-city-cols > div:first-child > .sdp-city-h2 + .sdp-city-p{
  font-size:19px;line-height:1.62;color:#241B0F;font-weight:500;
  padding-left:20px;border-left:3px solid #2E7D32;margin-bottom:20px}
.sdp-city-cols > div:first-child > .sdp-city-h2 + .sdp-city-p::first-letter{
  font-family:"Instrument Serif",Georgia,serif;font-size:3em;line-height:.78;
  float:left;margin:6px 12px 0 0;color:#2E7D32;font-weight:600}
@media (max-width:768px){
  .sdp-city-cols > div:first-child{padding:22px 20px}
  .sdp-city-cols > div:first-child > .sdp-city-h2 + .sdp-city-p{font-size:17.5px}
}

/* ============ MATERIAL PAGES (sdp-mat) - added 2026-06-15 P2-A ============ */
.sdp-mat{font-family:'DM Sans',system-ui,sans-serif;color:#1C1C1C;-webkit-font-smoothing:antialiased}
.sdp-mat *,.sdp-mat *::before,.sdp-mat *::after{box-sizing:border-box}
.entry-content .sdp-mat a,.entry-content .sdp-mat a:visited,.entry-content .sdp-mat a:hover{text-decoration:none;color:inherit}
.sdp-mat-sec{padding:72px 20px}.sdp-mat-shell{max-width:1080px;margin:0 auto}
.sdp-mat-bg-c{background:#F5F2E6}.sdp-mat-bg-w{background:#FFF}
.sdp-mat-hero{background:#F5F2E6;padding:clamp(56px,8vw,92px) 20px clamp(40px,6vw,64px);border-bottom:1px solid #E2D9C8}
.sdp-mat-hero .sdp-mat-shell{max-width:840px}
.sdp-mat-badge{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#1F7A3A;margin-bottom:14px}
.sdp-mat-h1{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(34px,5vw,50px);font-weight:400;line-height:1.13;margin:0 0 18px;color:#1C1C1C}
.sdp-mat-intro{font-size:17px;line-height:1.7;color:#4A4A4A;max-width:720px;margin:0}
.sdp-mat-h2{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(26px,3.5vw,34px);font-weight:400;margin:0 0 18px}
.sdp-mat-h3{font-size:18px;font-weight:700;margin:0 0 12px}
.sdp-mat-p{font-size:16px;line-height:1.7;color:#4A4A4A;margin:0 0 18px}.sdp-mat-p:last-child{margin-bottom:0}
.sdp-mat-cols{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:start}
.sdp-mat-sidebar{background:#FFF;border:1px solid rgba(18,18,18,.08);border-radius:20px;padding:26px}
.sdp-mat-bg-w .sdp-mat-sidebar{background:#F5F2E6}
.sdp-mat-facts{list-style:none;margin:0;padding:0}
.sdp-mat-facts li{padding:11px 0;border-bottom:1px solid rgba(18,18,18,.06);font-size:14.5px;display:flex;justify-content:space-between;gap:12px}
.sdp-mat-facts li:last-child{border-bottom:none}.sdp-mat-facts-l{color:#585858}.sdp-mat-facts-v{font-weight:700;text-align:right}
.sdp-mat-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px}
.sdp-mat-chip{display:inline-block;padding:8px 16px;background:#FFF;border-radius:20px;font-size:13px;font-weight:600;color:#1C1C1C}
.sdp-mat-bg-w .sdp-mat-chip{background:#F5F2E6}
.sdp-mat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.sdp-mat-card{background:#FFF;border:1px solid rgba(18,18,18,.1);border-radius:18px;padding:24px;display:block;transition:box-shadow .2s,transform .2s}
.sdp-mat-bg-c .sdp-mat-card{background:#fff}
.sdp-mat-card:hover{box-shadow:0 8px 28px rgba(0,0,0,.07);transform:translateY(-2px)}
.sdp-mat-card h3{font-size:17px;font-weight:700;margin:0 0 8px;color:#1C1C1C}
.sdp-mat-card p{font-size:13.5px;line-height:1.6;color:#4f4f4f;margin:0 0 12px}
.sdp-mat-card .sdp-mat-card-go{font-size:13px;font-weight:700;color:#1F7A3A;transition:color .2s}.sdp-mat-card:hover .sdp-mat-card-go{color:#176B30}
.sdp-mat-spec{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:6px}
.sdp-mat-spec-item{background:#FFF;border:1px solid rgba(18,18,18,.09);border-radius:14px;padding:18px 20px}
.sdp-mat-bg-w .sdp-mat-spec-item{background:#F5F2E6}
.sdp-mat-spec-item h4{font-size:14.5px;font-weight:700;margin:0 0 5px}
.sdp-mat-spec-item p{font-size:13.5px;line-height:1.6;color:#4f4f4f;margin:0}
.sdp-mat-spec-item a{color:#1F7A3A;font-weight:600}
.sdp-mat-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.sdp-mat-link{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;background:#FFF;border:1px solid rgba(18,18,18,.12);border-radius:999px;font-size:14px;font-weight:600;color:#1C1C1C;transition:border-color .2s,color .2s}
.sdp-mat-bg-c .sdp-mat-link{background:#fff}
.sdp-mat-link:hover{border-color:#1F7A3A;color:#1F7A3A}
.sdp-mat-note{font-size:13px;line-height:1.65;color:#5d5d5d;background:rgba(31,122,58,.06);border-left:3px solid #1F7A3A;border-radius:0 10px 10px 0;padding:13px 16px;margin-top:16px}
.sdp-mat-note a{color:#1F7A3A;text-decoration:underline}
.sdp-mat-faq{max-width:840px}
.sdp-mat-faq-item{border-bottom:1px solid rgba(18,18,18,.1);padding:20px 0}.sdp-mat-faq-item:first-child{border-top:1px solid rgba(18,18,18,.1)}
.sdp-mat-faq-q{font-size:17px;font-weight:700;margin-bottom:7px}
.sdp-mat-faq-a{font-size:15px;line-height:1.7;color:#4A4A4A}.sdp-mat-faq-a a{color:#1F7A3A;font-weight:600;text-decoration:underline}
.sdp-mat-refs{list-style:none;margin:8px 0 0;padding:0;columns:2;column-gap:32px}
.sdp-mat-refs li{font-size:12.5px;line-height:1.5;padding:6px 0;break-inside:avoid;color:#585858}
.sdp-mat-refs a{color:#1F7A3A;font-weight:600}
.sdp-mat-cta-sec{padding:72px 20px;background:#F5F2E6;border-top:1px solid #E2D9C8;text-align:center}
.sdp-mat-cta-h2{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(26px,4vw,36px);font-weight:400;font-style:italic;margin:0 0 14px}
.sdp-mat-cta-p{font-size:16px;color:#4A4A4A;margin:0 auto 26px;max-width:520px;line-height:1.6}
.sdp-mat-cta-row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.sdp-mat-btn-g{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:#1F7A3A;color:#FFF;border-radius:10px;font-size:15px;font-weight:700}
.sdp-mat-btn-g:hover{background:#176B30}
.sdp-mat-btn-o{display:inline-flex;align-items:center;padding:12px 28px;border:1.5px solid rgba(18,18,18,.2);color:#1C1C1C;border-radius:10px;font-size:15px;font-weight:600}
.sdp-mat-btn-o:hover{border-color:#1C1C1C}
@media(max-width:860px){.sdp-mat-cols{grid-template-columns:1fr;gap:32px}.sdp-mat-grid{grid-template-columns:1fr}.sdp-mat-spec{grid-template-columns:1fr}.sdp-mat-refs{columns:1}.sdp-mat-sec{padding:52px 16px}}

.sdp-city-mat h3 a{color:inherit}.sdp-city-mat h3 a:hover{color:#1F7A3A}

/* ── GUIDE / ARTICLE (P3 /resources/ cluster) ── */
.sdp-art-shell{max-width:760px;margin:0 auto;padding:0 20px}
.sdp-art-key{background:#F5F2E6;border:1px solid #E2D9C8;border-radius:16px;padding:24px 28px;margin:0 0 36px}
.sdp-art-key h2{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1.1px;color:#1F7A3A;margin:0 0 12px}
.sdp-art-key ul{margin:0;padding-left:20px}
.sdp-art-key li{font-size:15px;line-height:1.65;color:#3a3a3a;margin-bottom:8px}
.sdp-art-key li:last-child{margin-bottom:0}
.sdp-art-h2{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(24px,3vw,32px);font-weight:400;line-height:1.15;margin:34px 0 14px;color:#1C1C1C}
.sdp-art-h3{font-size:18px;font-weight:700;margin:26px 0 10px;color:#1C1C1C}
.sdp-art-p{font-size:16.5px;line-height:1.75;color:#3a3a3a;margin:0 0 18px}
.sdp-art-p a,.sdp-art-ul a{color:#1F7A3A;font-weight:600;text-decoration:underline}
.sdp-art-ul{margin:0 0 18px;padding-left:22px}
.sdp-art-ul li{font-size:16px;line-height:1.7;color:#3a3a3a;margin-bottom:8px}
.sdp-art-table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:14.5px}
.sdp-art-table th,.sdp-art-table td{text-align:left;padding:11px 14px;border-bottom:1px solid rgba(18,18,18,.1);vertical-align:top}
.sdp-art-table th{background:#F5F2E6;font-weight:700;color:#1C1C1C}
.sdp-art-related{margin:36px 0 0;padding:22px 0 0;border-top:1px solid rgba(18,18,18,.12)}
.sdp-art-rl{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#1F7A3A;margin:0 0 12px}
@media(max-width:640px){.sdp-art-table{display:block;overflow-x:auto;white-space:nowrap}}

/* ── PHOTO HERO (material pages) ── */
.sdp-mat-hero--photo{position:relative;background-size:cover;background-position:center;border-bottom:none}
.sdp-mat-hero--photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,16,15,.56) 0%,rgba(14,16,15,.72) 100%)}
.sdp-mat-hero--photo .sdp-mat-shell{position:relative;z-index:1}
.sdp-mat-hero--photo .sdp-mat-badge{color:#fff;background:rgba(255,255,255,.16);padding:6px 14px;border-radius:999px}
.sdp-mat-hero--photo .sdp-mat-h1{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.sdp-mat-hero--photo .sdp-mat-intro{color:rgba(255,255,255,.93)}

/* ===================================================================
   2026-06-15i  Material photo system: /materials/ hero carousel,
   photo-backed hub grid cards, and editorial hero w/ upper-right inset
   =================================================================== */

/* --- /materials/ photo marquee strip (interactive: drag/swipe + ambient drift) ---
   Auto-drift, pause-on-interaction, drag-vs-click and the seamless loop are driven
   by assets/js/marquee.js writing scrollLeft; this just makes the viewport a
   scrollable, scrollbar-less, grabbable rail. */
.sdp-mstrip{width:min(1240px,calc(100% - 40px));margin:clamp(22px,4vw,40px) auto clamp(6px,2vw,16px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;scroll-behavior:auto;cursor:grab;-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.sdp-mstrip::-webkit-scrollbar{display:none}
.sdp-mstrip.is-grabbing{cursor:grabbing}
.sdp-mstrip-track{display:flex;gap:14px;width:max-content}
.sdp-mstrip-card{position:relative;flex:0 0 clamp(220px,26vw,272px);height:clamp(118px,15vw,150px);border-radius:14px;overflow:hidden;display:block;background:#241a0e;box-shadow:0 10px 26px -14px rgba(40,28,12,.55);text-decoration:none}
.sdp-mstrip-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.sdp-mstrip-card:hover img{transform:scale(1.06)}
.sdp-mstrip-card::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(12,8,4,.04) 30%,rgba(12,8,4,.66) 100%)}
.sdp-mstrip-name{position:absolute;left:14px;bottom:11px;z-index:2;font-family:'DM Sans',system-ui,sans-serif;font-weight:800;font-size:15.5px;letter-spacing:.3px;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.7),0 1px 2px rgba(0,0,0,.6)}
/* Reduced motion: no ambient drift (handled in JS), but the strip stays a
   single, manually-scrollable row. */
@media(prefers-reduced-motion:reduce){.sdp-mstrip-track{flex-wrap:nowrap;width:max-content}}

/* --- /materials/ grid: photo-backed cards --- */
.sdp-mat-grid .sdp-mat-card{position:relative;overflow:hidden;border:0;color:#fff;min-height:210px;background:#241a0e;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end}
.sdp-mat-grid .sdp-mat-card .sdp-mat-cimg{position:absolute;inset:0;z-index:-2;background-position:center;background-size:cover;background-repeat:no-repeat;transition:transform .55s ease}
.sdp-mat-grid .sdp-mat-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(163deg,rgba(20,14,7,.26) 0%,rgba(18,12,6,.6) 50%,rgba(12,8,4,.88) 100%)}
.sdp-mat-grid .sdp-mat-card:hover{box-shadow:0 14px 34px rgba(30,20,8,.28);transform:translateY(-3px)}
.sdp-mat-grid .sdp-mat-card:hover .sdp-mat-cimg{transform:scale(1.06)}
.sdp-mat-grid .sdp-mat-card h3{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.sdp-mat-grid .sdp-mat-card p{color:rgba(255,255,255,.93);text-shadow:0 1px 5px rgba(0,0,0,.45)}
.sdp-mat-grid .sdp-mat-card .sdp-mat-card-go{color:#9bdcae}
.sdp-mat-grid .sdp-mat-card:hover .sdp-mat-card-go{color:#bfeccb}

/* --- material page hero: editorial + upper-right photo inset --- */
.sdp-mat-hero--inset .sdp-mat-shell{max-width:1140px;display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(26px,4vw,56px);align-items:start}
.sdp-mat-hero--inset .sdp-mat-hero-txt{min-width:0}
.sdp-mat-hero--inset .sdp-mat-intro{max-width:none}
.sdp-mat-hero-fig{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:4/3;border:1px solid rgba(120,92,52,.22);box-shadow:0 22px 46px -22px rgba(58,40,18,.5);background:#e8e1d2}
.sdp-mat-hero-fig img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:820px){.sdp-mat-hero--inset .sdp-mat-shell{grid-template-columns:1fr;gap:24px}.sdp-mat-hero-fig{max-width:480px;aspect-ratio:16/10}}

/* === Home hero materials ribbon: same interactive rail as /materials/ ===
   The ribbon's own styles are inline in the home page content; these
   higher-specificity rules win the cascade without touching that block or
   using !important. Behaviour (drift/drag/loop) is driven by marquee.js. */
.sdh-ribbon--materials .sdh-mat-vp{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;scroll-behavior:auto;cursor:grab}
.sdh-ribbon--materials .sdh-mat-vp::-webkit-scrollbar{display:none}
.sdh-ribbon--materials .sdh-mat-vp.is-grabbing{cursor:grabbing}
.sdh-ribbon--materials .sdh-mat-track{animation:none;will-change:auto}
@media(prefers-reduced-motion:reduce){.sdh-ribbon--materials .sdh-mat-track{flex-wrap:nowrap;width:max-content;justify-content:flex-start}}

/* --- Pure-touch auto-loop (mobile) ---------------------------------------------
   On pure-touch devices marquee.js drives the loop with a compositor-only CSS
   transform instead of per-frame scrollLeft writes (those fought native momentum
   and shook on iOS). It adds .sd-marquee-css to the viewport (kills native scroll
   so the two can't fight) and .sd-marquee-css-run to the track, and sets
   --sdm-shift (one card-set's width) + --sdm-dur (to hold ~26px/s). The animation
   travels exactly one set, which wraps seamlessly since every set is identical. */
.sdp-mstrip.sd-marquee-css,
.sdh-ribbon--materials .sdh-mat-vp.sd-marquee-css{overflow-x:hidden;cursor:default;touch-action:pan-y}
.sd-marquee-css .sdp-mstrip-track.sd-marquee-css-run,
.sd-marquee-css .sdh-mat-track.sd-marquee-css-run{animation:sdmDrift var(--sdm-dur,20s) linear infinite;will-change:transform}
.sd-marquee-css .sd-marquee-css-run.is-paused{animation-play-state:paused}
@keyframes sdmDrift{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--sdm-shift,50%)))}}
@media(prefers-reduced-motion:reduce){.sd-marquee-css .sd-marquee-css-run{animation:none}}

/* === Resources hub + guide pages: cinematic video hero (city-hero treatment) ===
   Full-bleed video bg + layered scrim + white text, mirroring .sdp-city-hero so
   the Resources family matches the service-area pages. Added 2026-06-15. */
.sdp-mat-hero--video{position:relative;overflow:hidden;background:#0c0e0d;border-bottom:none;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);min-height:clamp(360px,46vw,540px);display:flex;align-items:center;padding:clamp(76px,10vw,120px) 0 clamp(56px,8vw,96px)}
.sdp-mat-hero--video .sdp-mat-hvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.sdp-mat-hero--video::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,10,9,.66) 0%,rgba(8,10,9,.5) 45%,rgba(8,10,9,.7) 100%),radial-gradient(ellipse 86% 84% at 32% 50%,rgba(0,0,0,.3),transparent 75%)}
.sdp-mat-hero--video .sdp-mat-shell{position:relative;z-index:2;width:100%;max-width:864px;padding-left:24px;padding-right:24px}
.sdp-mat-hero--video .sdp-mat-badge{color:#fff;background:rgba(255,255,255,.15);padding:6px 14px;border-radius:999px}
.sdp-mat-hero--video .sdp-mat-h1{color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5),0 1px 18px rgba(0,0,0,.32)}
.sdp-mat-hero--video .sdp-mat-intro{color:rgba(255,255,255,.95);text-shadow:0 1px 8px rgba(0,0,0,.5)}

/* Guide cards (Resources hub): looping video background under the existing scrim.
   The brown card bg stays as the load/fallback color. */
.sdp-mat-grid .sdp-mat-card .sdp-mat-cvid{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}

/* === City CTA buttons: restore intended text colors (added 2026-06-15) ===
   The base reset `.sdp-city a{color:inherit}` (specificity 0,1,1) was overriding
   the single-class button color rules (0,1,0), so solid buttons inherited their
   parent's text color instead of their own - most visibly the export pill, which
   rendered white-on-white (invisible). !important matches this sheet's existing
   override pattern and wins in every state regardless of source order. */
.sdp-city a.sdp-city-export-cta,.sdp-city-export-cta{color:#155f2b!important}
.sdp-city a.sdp-city-btn-g,.sdp-city-btn-g{color:#fff!important}
.sdp-city a.sdp-city-mgr-cta,.sdp-city-mgr-cta{color:#fff!important}
.sdp-city a.sdp-city-btn-o,.sdp-city-btn-o{color:#1C1C1C!important}

/* === Search-intent hub + FAQ (seo-intent.php) =================================
   Appended to city / material / haul-off pages: real, indexable copy that finally
   carries the trade's search vocabulary (dirt hauling, haul-off, dirt removal, for
   sale, near me, cost, by the truckload, flex base). Styled to the --sds system. */
.sdp-intent-hub{max-width:1140px;margin:clamp(34px,6vw,68px) auto 0;padding:clamp(28px,5vw,52px) clamp(20px,4vw,40px) 0;border-top:1px solid var(--sds-line);font-family:'DM Sans',system-ui,sans-serif;color:var(--sds-ink-80,#3A3025)}
.sdp-intent-hub--compact{padding-top:clamp(20px,3vw,32px)}
.sdp-intent-kicker{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--sds-green-d);font-weight:700;margin:0 0 clamp(18px,3vw,26px)}
.sdp-intent-block{margin:0 0 clamp(22px,3.4vw,34px)}
.sdp-intent-block h2,.sdp-faq>h2{font-family:var(--sds-disp,'Instrument Serif',Georgia,serif);font-weight:400;color:var(--sds-ink,#241B0F);font-size:clamp(22px,3vw,30px);line-height:1.12;letter-spacing:-.01em;margin:0 0 .5em}
.sdp-intent-block p{font-size:clamp(15px,1.6vw,16.5px);line-height:1.72;margin:0 0 .7em;max-width:74ch}
.sdp-intent-block a{color:var(--sds-green-d);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;font-weight:600}
.sdp-intent-block a:hover{color:var(--sds-green)}
a.sdp-intent-cta{display:inline-block;margin-top:.3em;background:var(--sds-green);color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:12px 22px;border-radius:var(--sds-r-sm,10px);box-shadow:var(--sds-sh-sm);transition:background .2s var(--sds-ease,ease),transform .2s var(--sds-ease,ease)}
a.sdp-intent-cta:hover{background:var(--sds-green-d);color:#fff;transform:translateY(-1px)}
/* FAQ accordion */
.sdp-faq{margin:clamp(10px,2vw,20px) 0 0}
.sdp-faq-list{margin-top:clamp(14px,2vw,20px);border-top:1px solid var(--sds-line)}
.sdp-faq-item{border-bottom:1px solid var(--sds-line)}
.sdp-faq-item>summary{list-style:none;cursor:pointer;padding:clamp(14px,2vw,18px) 40px clamp(14px,2vw,18px) 2px;font-weight:700;font-size:clamp(15px,1.7vw,17px);color:var(--sds-ink,#241B0F);position:relative;transition:color .15s ease}
.sdp-faq-item>summary::-webkit-details-marker{display:none}
.sdp-faq-item>summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:400;line-height:1;color:var(--sds-green);transition:transform .2s var(--sds-ease,ease)}
.sdp-faq-item[open]>summary::after{content:"\002D"}
.sdp-faq-item>summary:hover{color:var(--sds-green-d)}
.sdp-faq-a{padding:0 40px clamp(16px,2vw,20px) 2px}
.sdp-faq-a p{margin:0;font-size:clamp(14.5px,1.6vw,16px);line-height:1.7;color:var(--sds-ink-80,#3A3025);max-width:74ch}
@media(prefers-reduced-motion:reduce){a.sdp-intent-cta,.sdp-faq-item>summary::after{transition:none}}