/* ============================================================
   Dutchman Tree Service, site CSS
   Punchy, editorial, equipment-forward redesign.
   Builds on dts-tokens.css.
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg-page); overflow-x: hidden; }

img { max-width: 100%; display: block; }

/* --- Layout primitives --- */
.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 720px) {
  .container { padding: 0 20px; }
}

.section {
  padding: clamp(64px, 9vw, 128px) 0;
}
.section-tight { padding: clamp(48px, 6vw, 80px) 0; }

.section-dark {
  background: var(--dts-forest-900);
  color: var(--fg-on-dark);
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 {
  color: var(--fg-on-dark);
}
.section-dark p { color: var(--dts-bark-200); }
.section-dark .eyebrow { color: var(--dts-rust-500); }

/* --- Typography helpers --- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  background: currentColor;
}

.display-xl {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(56px, 9vw, 144px);
  line-height: 0.88;
  letter-spacing: -0.005em;
  margin: 0;
}

.kicker {
  font-family: var(--font-accent);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-primary);
}

.lead {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 60ch;
}

.section-dark .lead { color: var(--dts-bark-200); }

/* --- Header --- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(250, 247, 240, 0.96);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------------------------
   DO NOT add `backdrop-filter` to .site-header. It breaks the mobile menu.

   Any backdrop-filter other than `none` makes the element a CONTAINING BLOCK
   for its `position: fixed` descendants. The core Navigation block's overlay is
   `position: fixed; inset: 0` and lives inside this header, so the blur made
   `inset: 0` resolve against the ~72px header box instead of the viewport: the
   menu opened as a 72px strip showing only its first link. Measured at 844px
   tall without the blur and 72px with it.

   It used to be `blur(8px)` here. It bought nothing: the background is 96%
   opaque, so only 4% of the backdrop was ever visible to blur. Not worth a
   broken menu.

   The guard below is insurance in case someone re-adds it. `:has()` is
   self-contained; `has-modal-open` is the class WordPress puts on the document
   while the overlay is open and covers engines without `:has()`.
   --------------------------------------------------------------------------- */
.site-header:has(.wp-block-navigation__responsive-container.is-menu-open),
html.has-modal-open .site-header,
body.has-modal-open .site-header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  transform: none !important;
}
.site-header.is-dark {
  background: linear-gradient(to bottom, rgba(16,42,28,0.85), rgba(16,42,28,0));
}
.site-header.is-dark.is-scrolled {
  background: rgba(16,42,28,0.96);
  border-color: rgba(255,255,255,0.08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 18px 32px;
  max-width: 1440px;
  margin: 0 auto;
}
.header-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
/* Oversized mark that hangs below the header band.
   `--logo-h` is the rendered height; `--logo-drop` is how far it overhangs.
   The drop is applied as a negative bottom margin, so the logo contributes
   (--logo-h minus --logo-drop) to the header's height and the remainder spills
   past the bottom edge. Tune these two numbers to resize or reseat the mark;
   nothing else needs touching. The header is position:fixed, so the mark stays
   put while the page scrolls. */
.site-header { --logo-h: 138px; --logo-drop: 78px; }
.header-logo img {
  height: var(--logo-h);
  width: auto;
  margin-bottom: calc(var(--logo-drop) * -1);
  position: relative;
  z-index: 2;              /* clear the header's bottom border */
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-1);
  text-decoration: none;
  padding: 8px 0;
  position: relative;
  transition: color var(--dur-fast);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--dts-rust-600);
  transition: width var(--dur-base) var(--ease-out);
}
.nav-link:hover::after,
.nav-link.is-active::after { width: 100%; }
.nav-link:hover { color: var(--brand-primary); }
.nav-link.is-active { color: var(--brand-primary); }

.is-dark .nav-link { color: var(--fg-on-dark); }
.is-dark .nav-link:hover { color: var(--dts-bone-50); }
.is-dark .nav-link.is-active { color: var(--dts-rust-500); }

.header-cta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.phone-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 2px solid var(--brand-primary);
  border-radius: var(--radius-md);
  color: var(--brand-primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-decoration: none;
  background: transparent;
  transition: all var(--dur-fast);
}
.phone-pill:hover {
  background: var(--brand-primary);
  color: var(--fg-on-dark);
}
.is-dark .phone-pill {
  border-color: var(--dts-bone-50);
  color: var(--dts-bone-50);
}
.is-dark .phone-pill:hover {
  background: var(--dts-rust-600);
  border-color: var(--dts-rust-600);
}

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  color: inherit;
  padding: 8px;
  cursor: pointer;
}
/* Mobile header.
   `.header-nav` is the className on the core **Navigation block**, and that
   block contains its own responsive hamburger. The previous rule here hid
   `.header-nav` outright below 960px and showed `.menu-toggle` instead, but
   `.menu-toggle` only ever existed in the React prototype, never in the
   WordPress markup. Net effect: no navigation at all from 0-960px.

   So: keep `.header-nav` visible and drive the core block's own overlay.
   Core only swaps to the hamburger below 600px, which leaves 601-960px
   rendering seven inline items in a space that cannot hold them, so the
   breakpoint is overridden here. !important is required because core's
   `.wp-block-navigation__responsive-container-open:not(.always-shown)` rule
   matches at equal specificity and stylesheet order is not guaranteed. */
@media (max-width: 960px) {
  .header-nav .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }
  .header-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
}
/* Keep tap-to-call on phones. This is an emergency-call business, so hiding the
   number on the smallest screens removes the fastest path to a booking. The
   logo is square (1080x1080), so at 44px it is only 44px wide, which leaves
   room for the number and the hamburger on a 360px screen. */
@media (max-width: 720px) {
  .header-inner { gap: 12px; padding: 12px 16px; }
  .site-header { --logo-h: 94px; --logo-drop: 44px; }
  .header-cta .phone-pill { padding: 8px 12px; font-size: 14px; letter-spacing: 0.02em; }
}
@media (max-width: 380px) {
  /* Last resort on very narrow devices: the hamburger reaches the same
     numbers, so the pill is what gives way rather than the navigation. */
  .header-cta { display: none; }
}

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  top: var(--header-h, 80px);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--dts-forest-900);
  color: var(--fg-on-dark);
  padding: 32px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: transform 240ms ease, opacity 200ms ease, visibility 0s linear 200ms;
  z-index: 90;
  overflow-y: auto;
}
.mobile-drawer.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform 280ms ease, opacity 220ms ease, visibility 0s;
}
.mobile-nav {
  display: flex;
  flex-direction: column;
}
.mobile-nav-link {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--fg-on-dark);
  text-decoration: none;
  padding: 18px 0;
  border-bottom: 1px solid rgba(250,247,240,0.1);
  transition: color 160ms ease;
}
.mobile-nav-link:hover { color: var(--dts-rust-500); }
.mobile-nav-link.is-active { color: var(--dts-rust-500); }
.mobile-drawer-cta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
}
.mobile-drawer-cta .btn { justify-content: center; }
.mobile-phone {
  justify-content: center;
  background: rgba(250,247,240,0.08);
  border: 1px solid rgba(250,247,240,0.18);
  color: var(--fg-on-dark);
  padding: 14px 20px;
  font-size: 16px;
}

/* Header height variable so drawer aligns under header */
.site-header { --header-h: 80px; }
@media (max-width: 720px) { .site-header { --header-h: 72px; } }

/* When drawer is open, force solid header bg even if overlay-dark */
.site-header.is-open {
  background: var(--dts-forest-900);
  box-shadow: none;
}
.site-header.is-open .menu-toggle,
.site-header.is-open .nav-link,
.site-header.is-open .header-logo { color: var(--fg-on-dark); }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 32px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast), background var(--dur-fast),
              border-color var(--dur-fast), color var(--dur-fast),
              box-shadow var(--dur-fast);
}
.btn-primary {
  background: var(--brand-primary);
  color: var(--fg-on-dark);
  box-shadow: var(--shadow-cta);
}
.btn-primary:hover {
  background: var(--brand-primary-hover);
  color: var(--fg-on-dark);
}
.btn-primary:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-inset);
}

.btn-secondary {
  background: var(--brand-secondary);
  color: var(--fg-on-dark);
}
.btn-secondary:hover { background: var(--brand-secondary-hover); }

.btn-ghost {
  background: transparent;
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-ghost:hover {
  background: var(--brand-primary);
  color: var(--fg-on-dark);
}

.btn-ghost-light {
  background: transparent;
  color: var(--fg-on-dark);
  border-color: var(--fg-on-dark);
}
.btn-ghost-light:hover {
  background: var(--fg-on-dark);
  color: var(--dts-forest-900);
}

.btn-arrow::after {
  content: "→";
  font-size: 18px;
  display: inline-block;
  transition: transform var(--dur-fast);
}
.btn-arrow:hover::after { transform: translateX(4px); }

/* --- Hero --- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--fg-on-dark);
  overflow: hidden;
  padding-top: 120px;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* left-side scrim where the headline sits */
    linear-gradient(90deg, rgba(16,42,28,0.75) 0%, rgba(16,42,28,0.4) 35%, rgba(16,42,28,0) 60%),
    /* bottom-up scrim for the sub copy + CTA */
    linear-gradient(180deg, rgba(16,42,28,0.4) 0%, rgba(16,42,28,0.55) 50%, rgba(16,42,28,0.95) 100%);
}

.hero-grid {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  padding-bottom: 80px;
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 48px; }
}

.hero-headline {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(56px, 9vw, 140px);
  line-height: 0.88;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--fg-on-dark);
  text-shadow: 0 2px 24px rgba(16,42,28,0.6), 0 1px 2px rgba(16,42,28,0.5);
}
.hero-headline em {
  font-style: normal;
  color: var(--dts-rust-500);
  display: block;
}
.hero-eyebrow {
  font-family: var(--font-accent);
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dts-rust-500);
  font-weight: 700;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.hero-eyebrow::before {
  content: "";
  width: 32px;
  height: 2px;
  background: var(--dts-rust-500);
}
.hero-sub {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
  color: var(--dts-bone-50);
  margin: 0 0 32px;
  max-width: 50ch;
  text-shadow: 0 1px 8px rgba(16,42,28,0.55);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 56px;
  align-items: flex-start;
  border-top: 1px solid rgba(250,247,240,0.2);
  padding-top: 32px;
}
.hero-meta .stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-meta .stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  color: var(--dts-bone-50);
}
.hero-meta .stat-num em {
  font-style: normal;
  color: var(--dts-rust-500);
}
.hero-meta .stat-label {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250,247,240,0.7);
}

/* Rating + memberships variant of hero-meta */
.hero-rating {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero-rating-stars {
  display: flex;
  gap: 3px;
}
.hero-rating-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-rating-text strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--dts-bone-50);
  letter-spacing: 0.01em;
}
.hero-rating-sub {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250,247,240,0.7);
  font-weight: 700;
}

.hero-memberships {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}
.hero-memberships img {
  height: 64px;
  width: auto;
  background: var(--dts-bone-50);
  padding: 6px 10px;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
@media (max-width: 720px) {
  .hero-memberships {
    margin-left: 0;
    width: 100%;
  }
  .hero-memberships img { height: 52px; }
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}

/* --- Marquee scroll bar (under hero) --- */
.marquee {
  background: var(--dts-rust-600);
  color: var(--fg-on-dark);
  padding: 16px 0;
  overflow: hidden;
  border-top: 4px solid var(--dts-forest-900);
  border-bottom: 4px solid var(--dts-forest-900);
}
.marquee-track {
  display: flex;
  gap: 64px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  animation: marquee 40s linear infinite;
}
.marquee-track > span { display: inline-flex; align-items: center; gap: 64px; }
.marquee-track > span::after {
  content: "✦";
  color: var(--dts-bone-50);
  opacity: 0.75;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- Editorial section: 3-up service cards --- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.service-card {
  position: relative;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--dts-forest-300);
}
.service-card .img-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}
.service-card .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.service-card:hover .img-wrap img { transform: scale(1.04); }
.service-card .num {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  color: var(--fg-on-dark);
  background: rgba(16,42,28,0.85);
  padding: 6px 12px;
  letter-spacing: 0.1em;
}
.service-card .body {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.service-card h3 {
  font-size: clamp(24px, 1.8vw, 30px);
  line-height: 1.05;
}
.service-card p {
  color: var(--fg-2);
  margin: 0;
  font-size: 15px;
}
.service-card .arrow {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  color: var(--brand-primary);
  text-decoration: none;
  padding-top: 8px;
}
.service-card .arrow::after {
  content: "→";
  transition: transform var(--dur-fast);
}
.service-card:hover .arrow::after { transform: translateX(4px); }

/* spans */
.span-12 { grid-column: span 12; }
.span-8  { grid-column: span 8; }
.span-7  { grid-column: span 7; }
.span-6  { grid-column: span 6; }
.span-5  { grid-column: span 5; }
.span-4  { grid-column: span 4; }
@media (max-width: 960px) {
  .services-grid { grid-template-columns: 1fr; }
  .service-card { grid-column: 1 / -1 !important; }
  [class*="span-"] { grid-column: 1 / -1 !important; }
}

/* --- Equipment / Gyrotrac showcase --- */
.equipment {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0 0;
  background: var(--dts-forest-900);
  color: var(--fg-on-dark);
  overflow: hidden;
}
.equipment h1, .equipment h2, .equipment h3, .equipment h4 {
  color: var(--fg-on-dark);
}
.equipment::before {
  content: "GT-200";
  position: absolute;
  top: -40px;
  right: -40px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(180px, 22vw, 360px);
  color: rgba(184, 74, 24, 0.08);
  letter-spacing: -0.02em;
  pointer-events: none;
  line-height: 1;
}

/* Variant B layout: header → full-bleed video w/ overlay specs → footer */
.equipment-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  position: relative;
  z-index: 1;
}
@media (max-width: 960px) {
  .equipment-header { grid-template-columns: 1fr; gap: 24px; }
}

.equipment-video-wrap {
  position: relative;
  width: 100%;
  margin-top: 0;
}
.equipment-spec-overlay,
.equipment-rating-overlay {
  position: absolute;
  bottom: -56px;
  right: clamp(16px, 4vw, 64px);
  width: min(460px, 42vw);
  background: var(--dts-bone-50);
  color: var(--dts-bark-900);
  padding: 28px 32px;
  box-shadow: var(--shadow-lg);
  z-index: 3;
}
.equipment-spec-overlay .kicker { margin-bottom: 16px; }

/* Rating card */
.rating-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}
.rating-score {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  color: var(--dts-bark-900);
}
.rating-score span {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-left: 6px;
}
.rating-divider {
  height: 1px;
  background: var(--dts-bark-100, rgba(20,17,13,0.12));
  margin: 20px 0;
}
.rating-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
}
.rating-meta-item {
  border-top: 2px solid var(--dts-rust-600);
  padding-top: 10px;
}
.rating-meta-item .v {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1;
  color: var(--dts-bark-900);
  letter-spacing: -0.01em;
}
.rating-meta-item .v small {
  font-size: 0.55em;
  color: var(--dts-rust-600);
  margin-left: 4px;
  letter-spacing: 0.06em;
}
.rating-meta-item .l {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 6px;
  font-weight: 700;
}
.spec-overlay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
}
.spec-overlay-item {
  border-top: 2px solid var(--dts-rust-600);
  padding-top: 10px;
}
.spec-overlay-item .v {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1;
  color: var(--dts-bark-900);
  letter-spacing: -0.01em;
}
.spec-overlay-item .l {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 6px;
  font-weight: 700;
}
@media (max-width: 720px) {
  .equipment-spec-overlay,
  .equipment-rating-overlay {
    position: static;
    width: auto;
    margin: 24px 24px 0;
  }
}

.equipment-footer {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: start;
  padding-bottom: clamp(80px, 10vw, 140px);
  position: relative;
  z-index: 1;
}
@media (max-width: 960px) {
  .equipment-footer { grid-template-columns: 1fr; gap: 32px; }
}
.equipment-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
  /* `.equipment` sets top padding only; its bottom padding lives on
     `.equipment-footer`, which belongs to the other equipment layout. This
     grid layout has no footer, so without this the feature list runs flush
     into the bottom edge of the dark section. Scoped here rather than on
     `.equipment` so the footer layout does not end up double-padded. */
  padding-bottom: clamp(80px, 10vw, 140px);
}
@media (max-width: 960px) {
  .equipment-grid { grid-template-columns: 1fr; }
}
.equipment-image {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: var(--dts-forest-800);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.equipment-image iframe,
.equipment-image > div,
.equipment-image > div > div {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.equipment-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.equipment-image .badge {
  position: absolute;
  top: 24px;
  left: 24px;
  background: var(--dts-rust-600);
  color: var(--fg-on-dark);
  padding: 10px 16px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.spec-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 32px 0;
}
.spec {
  border-top: 2px solid var(--dts-rust-600);
  padding-top: 16px;
}
.spec .v {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 3vw, 44px);
  line-height: 1;
  color: var(--dts-bone-50);
}
.spec .v small {
  font-size: 0.4em;
  color: rgba(250,247,240,0.6);
  font-weight: 700;
  margin-left: 4px;
}
.spec .l {
  font-family: var(--font-accent);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250,247,240,0.65);
  margin-top: 6px;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}
.feature-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: rgba(250,247,240,0.85);
  line-height: 1.45;
}
.feature-list li::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-top: 5px;
  flex-shrink: 0;
  background: var(--dts-rust-600);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* --- Process steps --- */
.process {
  background: var(--dts-bone-50);
}
.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 2px solid var(--dts-bark-900);
}
@media (max-width: 960px) {
  .process-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .process-steps { grid-template-columns: 1fr; }
}
.step {
  border-right: 1px solid var(--border-subtle);
  padding: 32px 28px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  background: transparent;
  transition: background var(--dur-base);
}
.step:last-child { border-right: none; }
.step:hover { background: var(--dts-forest-100); }
.step .num {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 900;
  color: var(--dts-rust-600);
  line-height: 1;
}
.step h4 {
  font-size: 22px;
  margin: 0;
}
.step p {
  font-size: 14px;
  color: var(--fg-2);
  margin: 0;
}

/* --- Asymmetric editorial section --- */
.editorial {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 960px) { .editorial { grid-template-columns: 1fr; gap: 32px; } }

.editorial-image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
}
.editorial-image img {
  width: 100%; height: 100%; object-fit: cover;
}
.editorial-image .tag {
  position: absolute;
  bottom: 24px;
  left: 24px;
  background: var(--dts-bone-50);
  color: var(--dts-bark-900);
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 8px 14px;
}

.editorial-body h2 {
  font-size: clamp(40px, 5vw, 76px);
  line-height: 0.95;
  margin: 16px 0 24px;
}
.editorial-body p { font-size: 17px; line-height: 1.6; color: var(--fg-2); margin-bottom: 16px; max-width: 56ch; }

/* --- Stats band --- */
.stats-band {
  background: var(--dts-rust-600);
  color: var(--fg-on-dark);
  padding: 64px 0;
}
.stats-band .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 720px) { .stats-band .grid { grid-template-columns: 1fr 1fr; } }

.stats-band .stat-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1;
}
.stats-band .stat-label {
  font-family: var(--font-accent);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 8px;
  color: rgba(250,247,240,0.85);
}

/* --- Hero H3, verified pull-quote --- */
.hero-meta-quote {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.hero-rating-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero-rating-row .hero-rating-stars {
  display: flex;
  gap: 3px;
}
.hero-rating-meta {
  font-family: var(--font-accent);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250,247,240,0.85);
  font-weight: 700;
}
.hero-quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.4;
  color: var(--dts-bone-50);
  margin: 0;
  max-width: 48ch;
  letter-spacing: -0.005em;
  text-shadow: 0 2px 16px rgba(16,42,28,0.6);
}
.hero-quote::before { content: "\201C"; }
.hero-quote::after { content: "\201D"; }
.hero-quote-attr {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250,247,240,0.7);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* --- Stats band T2, editorial credentials --- */
.stats-band-editorial {
  padding: clamp(64px, 7vw, 96px) 0;
}
.stats-band-editorial .stats-band-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 64px;
  align-items: center;
}
.stats-band-editorial .stats-band-lead .kicker {
  margin-bottom: 12px;
}
.stats-band-editorial .stats-band-lead h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1;
  color: var(--dts-bone-50);
  letter-spacing: -0.01em;
  margin: 0;
}
.stats-band-editorial .stats-band-lead p {
  color: rgba(250,247,240,0.85);
  font-size: 14px;
  line-height: 1.55;
  max-width: 32ch;
  margin: 16px 0 0;
}
.memberships {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.membership {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
}
.membership-logo {
  width: 160px;
  height: 160px;
  flex: 0 0 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.membership-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.membership-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--dts-bone-50);
  line-height: 1.15;
}
.membership-body {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(250,247,240,0.85);
  margin: 8px 0 0;
}
@media (max-width: 960px) {
  .stats-band-editorial .stats-band-grid { grid-template-columns: 1fr; gap: 32px; }
  .memberships { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .membership { grid-template-columns: 1fr; }
  .membership-logo { width: 120px; height: 120px; flex-basis: 120px; }
}

/* --- Projects grid --- */
.projects {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.proj-card {
  position: relative;
  overflow: hidden;
  background: var(--dts-forest-900);
  cursor: pointer;
}
.proj-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
  aspect-ratio: 4/3;
}
.proj-card:hover img { transform: scale(1.04); }
.proj-card .meta {
  position: absolute;
  inset: auto 0 0 0;
  /* 22px more at the top than the other three sides. The gradient only reached
     full strength over the bottom third of this box, so the small service line
     sat in the faded part and was effectively printed onto the photo itself.
     The extra top padding lifts the band above that line and gives the fade
     somewhere to happen that is not behind text.
     Note the tolerance left here: the fade below is 40px measured from the box
     edge and the text starts at the padding edge, so this leaves 6px of solid
     band above the text. Trimming much further pulls the service line into the
     fade and the measured contrast starts dropping. */
  padding: 46px 24px 24px;
  /* Solid until 40px from the top, then out. Previously `0.95 30%` measured
     from the bottom, which ran the fade across the text rather than above it. */
  background: linear-gradient(to top, rgba(16,42,28,0.97) calc(100% - 40px), transparent);
  color: var(--fg-on-dark);
}
.proj-card .meta .l {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* rust-400, not rust-500. At 11px this counts as small text, so WCAG AA wants
     4.5:1, and rust-500 measures 3.58:1 against this band. Widening the band
     cannot fix that: even on fully opaque forest-900 rust-500 only reaches
     3.88:1. rust-400 is the next step up the same ramp and measures 5.13:1, so
     the fix stays inside the existing palette. */
  color: var(--dts-rust-400);
}
.proj-card .meta h4 {
  font-size: 22px;
  color: var(--fg-on-dark);
  margin-top: 6px;
}

/* --- Testimonials --- */
.quote {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: none;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--fg-on-dark);
  max-width: 22ch;
  margin: 0;
}
.quote::before {
  content: "“";
  display: block;
  font-size: 1.6em;
  line-height: 0.8;
  color: var(--dts-rust-500);
  margin-bottom: 8px;
}
.quote-by {
  font-family: var(--font-accent);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250,247,240,0.6);
  margin-top: 32px;
}

/* --- CTA banner --- */
.cta-band {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0;
  color: var(--fg-on-dark);
  overflow: hidden;
}
.cta-band-media {
  position: absolute;
  inset: 0;
}
.cta-band-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-band-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(16,42,28,0.9) 30%, rgba(16,42,28,0.5));
}
.cta-band-inner {
  position: relative;
  z-index: 1;
  max-width: 740px;
}
.cta-band h2 { font-size: clamp(40px, 6vw, 88px); line-height: 0.95; margin-bottom: 24px; color: var(--fg-on-dark); }

/* --- Footer --- */
.site-footer {
  background: var(--dts-forest-900);
  color: var(--fg-on-dark);
  padding: 72px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.footer-grid h5 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.14em;
  margin: 0 0 20px;
  color: var(--dts-rust-500);
}
.footer-grid a {
  display: block;
  color: var(--dts-bone-50);
  text-decoration: none;
  font-size: 14px;
  padding: 6px 0;
  transition: color var(--dur-fast);
}
.footer-grid a:hover { color: var(--dts-rust-500); }
.footer-bottom {
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--font-accent);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(250,247,240,0.5);
}
.footer-logo img { height: 64px; }

/* --- Page hero (non-home pages) --- */
.page-hero {
  position: relative;
  padding: 200px 0 96px;
  color: var(--fg-on-dark);
  overflow: hidden;
}
.page-hero-media {
  position: absolute; inset: 0; z-index: 0;
}
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,42,28,0.6), rgba(16,42,28,0.85));
}
.page-hero-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 48px;
  align-items: end;
}
@media (max-width: 760px) { .page-hero-inner { grid-template-columns: 1fr; } }
.page-hero h1 {
  font-size: clamp(48px, 7vw, 112px);
  line-height: 0.9;
  color: var(--fg-on-dark);
}
.breadcrumb {
  font-family: var(--font-accent);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250,247,240,0.7);
  margin-bottom: 24px;
}
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--dts-rust-500); }
.breadcrumb span { margin: 0 12px; opacity: 0.5; }

/* --- Forms --- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 700;
}
.field input, .field textarea, .field select {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 14px 16px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--fg-1);
  transition: border-color var(--dur-fast);
  /* Load-bearing on mobile. An <input> defaults to size="20", an intrinsic
     width of roughly 177px, plus 32px padding and 3px border. Inside a grid
     track sized with `fr` (which means minmax(auto, Nfr)) the `auto` minimum
     is that intrinsic width, so the three-column .addr-row demanded ~660px and
     spilled off a 390px screen. width:100% + min-width:0 lets the tracks
     actually shrink. */
  width: 100%;
  min-width: 0;
}
/* Same reason: grid children default to min-width:auto and refuse to shrink
   below their content. */
.form-grid > *, .addr-row > * { min-width: 0; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-color: var(--brand-primary);
}
.field textarea { resize: vertical; min-height: 120px; }

/* --- Reveal-on-scroll utility --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Density modifiers --- */
.density-tight .section { padding: clamp(48px, 6vw, 80px) 0; }
.density-tight .hero { padding-top: 100px; }
.density-tight .hero-grid { padding-bottom: 56px; }

/* --- Color emphasis modes --- */
.emphasis-rust .btn-primary {
  background: var(--brand-secondary);
  box-shadow: 0 6px 18px rgba(184,74,24,0.35);
}
.emphasis-rust .btn-primary:hover { background: var(--brand-secondary-hover); }
.emphasis-rust .nav-link.is-active { color: var(--brand-secondary); }
.emphasis-rust .nav-link::after { background: var(--brand-secondary); }

/* --- Trust strip --- */
.trust-strip {
  background: var(--dts-bone-100);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 28px 0;
}
.trust-strip .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-accent);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 700;
}
.trust-item svg { color: var(--brand-primary); flex-shrink: 0; }
.trust-item img { height: 36px; width: auto; opacity: 0.85; }