/* Iron Oak Excavation — bespoke landing styles (built on theme.css tokens) */

/* ---------- Header extras ---------- */

.site-header .container { max-width: 1400px; }

/* The landing lockups sit at a fixed 42/46px, close to the mark's native
   63x50 capture, so they use the alpha-keyed raster of the original artwork
   (gold gradient + canopy grain) instead of the flat-fill vector. */
.page-landing .brand-mark {
  width: 42px;
  height: 42px;
  background: url("../../assets/img/iron-oak/brand-mark-oak-texture.png") no-repeat center / contain;
}

/* The landing page spells the two-part lockup out as real markup, so the
   theme.css pseudo-element version is switched off here. */
.brand-name.is-lockup::before,
.brand-name.is-lockup::after { content: none; }

.brand-name.is-lockup {
  display: flex;
  flex-direction: column;
  gap: 0.28em;
}

.brand-name-1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-ink);
  line-height: 1;
}

.brand-name-2 {
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--color-brand);
  line-height: 1;
}

.io-footer .brand-mark { width: 46px; height: 46px; }
.io-footer .brand-name-1 { font-size: 1.5rem; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--color-ink);
  white-space: nowrap;
}

.header-phone svg {
  width: 30px;
  height: 30px;
  padding: 6px;
  border: 1px solid var(--color-brand);
  border-radius: 50%;
  fill: none;
  stroke: var(--color-brand);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.header-phone:hover { color: var(--color-accent); }

/* ---------- Mobile nav toggle ----------
   Hidden entirely above the drawer breakpoint; the inline .site-nav is the
   desktop navigation and is untouched there. */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-brand);
  cursor: pointer;
}

.nav-toggle:hover { border-color: var(--color-brand); }

.nav-toggle-bars {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}

.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 6px; }
.nav-toggle-bars span:nth-child(3) { top: 12px; }

.nav-toggle.is-open .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* The quote button only appears inside the open drawer; the header keeps its
   own copy at desktop widths. */
.nav-drawer-cta { display: none; }

/* ---------- Hero ---------- */

.io-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
  background-image:
    url("../../assets/img/iron-oak/hero.webp"),
    radial-gradient(90% 120% at 78% 18%, rgba(200, 140, 55, 0.5), rgba(120, 78, 32, 0.22) 40%, transparent 68%),
    radial-gradient(60% 80% at 100% 60%, rgba(224, 180, 95, 0.18), transparent 60%),
    linear-gradient(180deg, #221b12 0%, #191510 55%, #120f0b 100%);
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}

/* Scrim over the photo: heavy on the left so the display type stays
   readable, gentle top/bottom fades to seat it in the page. */
.io-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(16, 12, 8, 0.94) 0%, rgba(16, 12, 8, 0.78) 32%, rgba(16, 12, 8, 0.3) 56%, transparent 74%),
    linear-gradient(180deg, rgba(16, 12, 8, 0.4) 0%, transparent 26%, transparent 68%, rgba(16, 12, 8, 0.6) 100%);
}

.io-hero-inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(4rem, 9vw, 7.5rem);
  max-width: var(--container-max);
}

.io-hero-title {
  display: flex;
  flex-direction: column;
  margin: 0 0 1.1rem;
  line-height: 0.92;
}

.io-hero-line {
  display: block;
  font-weight: 800;
  letter-spacing: 0.015em;
}

.io-hero-line--ink {
  font-size: clamp(3.4rem, 8.5vw, 6.4rem);
  background: linear-gradient(180deg, #fbf6ec 8%, #ded3bd 55%, #a99b82 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.55));
}

.io-hero-line--gold {
  margin-top: 0.35rem;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  color: var(--color-brand);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Short gold rule under the gold headline — a tick mark, not a full-width
   border across the lede. */
.io-hero-lede {
  position: relative;
  max-width: 24rem;
  font-size: 1.1rem;
  color: var(--color-ink);
  padding-top: 1.1rem;
  margin-bottom: 1.8rem;
}

.io-hero-lede::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 62px;
  height: 3px;
  background: var(--color-brand);
}

.io-hero-ctas {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}

/* Excavator silhouette + earth mounds, painted.
   Hidden now that the real hero photo (which contains the machine)
   is layered in; the markup and styles stay as the no-photo fallback. */

.io-hero-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: none;
}

.io-hero-art span { position: absolute; }

.io-hero-sun {
  right: 24%;
  top: 12%;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 205, 130, 0.85), rgba(224, 160, 70, 0.35) 55%, transparent 72%);
  filter: blur(2px);
}

/* one continuous excavator profile: bucket + arm + boom left, cab + tracks right */
.io-hero-cab {
  right: 5%;
  bottom: 44px;
  width: 520px;
  height: 290px;
  background: #0a0805;
  clip-path: polygon(
    4% 96%, 1% 80%, 9% 66%, 17% 26%, 25% 14%, 61% 28%, 64% 15%, 84% 15%,
    86% 42%, 96% 44%, 98% 62%, 94% 72%, 97% 78%, 98% 88%, 93% 98%, 48% 98%,
    43% 88%, 46% 78%, 52% 74%, 58% 44%, 24% 30%, 14% 62%, 4% 96%
  );
}

.io-hero-boom, .io-hero-arm, .io-hero-bucket { display: none; }

.io-hero-mound {
  bottom: -12%;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, #241b10, #120e09);
}

.io-hero-mound--a { right: -6%; width: 55%; height: 34%; }
.io-hero-mound--b { right: 30%; width: 45%; height: 24%; opacity: 0.9; }

/* ---------- Value band ---------- */

.io-values {
  background: #131009;
  border-bottom: 1px solid var(--color-border);
  padding-block: 1.9rem;
}

.io-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
}

.io-value {
  display: flex;
  align-items: center;
  gap: 0.95rem;
}

/* Bare icons beside the text, as in the mockup — no box around them. */
.io-value-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
}

/* Traced trust-badge artwork: outlines came through as filled shapes, so they
   paint with fill rather than stroke. */
.io-value-icon svg {
  width: 44px;
  height: 44px;
  fill: currentColor;
  stroke: none;
}

.io-value-title {
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  margin: 0 0 0.15rem;
}

.io-value-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-ink-muted);
  line-height: 1.45;
}

/* ---------- Section rows / view-all links ---------- */

/* The heading row owns the gap to its section; the head and the view-all
   link inside it sit flush so the title reads as attached to the grid. */
.io-section-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.io-section-row .section-head { margin-bottom: 0; }

.io-section-row .section-title { margin-bottom: 0; }

.io-section-row .eyebrow { margin-bottom: 0.3rem; }

.io-view-all {
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink);
  white-space: nowrap;
}

.io-view-all:hover { color: var(--color-accent); }

/* ---------- Services grid ---------- */

#services { padding-block: 3.4rem 2.4rem; }

.io-services-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

/* Icon and title share one centered row; the text drops to a full-width
   second row via flex-wrap. */
.io-service .card-body {
  padding: 1.1rem 1rem 1.25rem;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 0.55rem;
}

.io-service-icon {
  display: inline-flex;
  color: var(--color-brand);
}

/* Traced service artwork — filled shapes, same as the trust badges. */
.io-service-icon svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
  stroke: none;
}

.io-service .card-title {
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  margin-bottom: 0;
}

.io-service .card-text {
  font-size: 0.85rem;
  flex-basis: 100%;
  margin: 0.5rem 0 0;
  line-height: 1.5;
}

/* ---------- Projects grid ---------- */

.io-projects-section { padding-block: 0 3.4rem; }

.io-projects-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.io-project {
  background-color: var(--color-surface);
  background-image: var(--grain);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.io-project:hover {
  border-color: rgba(201, 154, 60, 0.55);
  transform: translateY(-2px);
}

.io-project .media-ph { aspect-ratio: 4 / 3; }

.io-project-caption { padding: 0.85rem 0.95rem 1rem; }

.io-project-title {
  font-size: 1rem;
  letter-spacing: 0.09em;
  margin: 0 0 0.3rem;
}

.io-project-loc {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-accent);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--color-ink-muted);
}

.io-project-loc svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--color-brand);
  stroke-width: 1.8;
}

/* ---------- Equipment / Why / Testimonial trio ---------- */

.io-trio {
  background: #100d0a;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.io-trio-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr 1.25fr;
}

.io-trio-panel {
  padding: 1.75rem 1.8rem 1.85rem;
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.io-trio-panel:first-child { border-left: 0; }

.io-trio-title {
  font-size: 1.55rem;
  margin-bottom: 0.7rem;
  position: relative;
  padding-top: 0.65rem;
}

.io-trio-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 3px;
  background: var(--color-brand);
}

.io-trio-text {
  color: var(--color-ink-muted);
  font-size: 0.95rem;
  margin-bottom: 1.05rem;
}

/* The equipment photo is the panel's backdrop, not a block in its flow: copy
   sits on the left over a scrim, the machine shows through on the right. The
   scrim is a custom property so narrow layouts can widen it in one line. */
.io-trio-equipment {
  --equipment-scrim: linear-gradient(
    90deg,
    rgba(11, 9, 7, 0.95) 0%,
    rgba(11, 9, 7, 0.88) 38%,
    rgba(11, 9, 7, 0.52) 64%,
    rgba(11, 9, 7, 0.18) 100%
  );
  position: relative;
  overflow: hidden;
  min-height: 232px;
  justify-content: center;
}

.io-trio-equipment > :not(.io-trio-media) {
  position: relative;
  z-index: 1;
}

.io-trio-equipment .io-trio-title,
.io-trio-equipment .io-trio-text {
  max-width: 62%;
}

.io-trio-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  width: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
}

.io-checklist {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.io-checklist li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.98rem;
  color: var(--color-ink);
}

/* lucide:square-check, gold — a gold-outlined box with a gold check inside,
   matching the two-tone construction in the mockup. Masked so it takes the
   brand token rather than a baked-in color. */
.io-checklist li::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background-color: var(--color-brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20width='18'%20height='18'%20x='3'%20y='3'%20rx='2'/%3E%3Cpath%20d='m9%2012%202%202%204-4'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20width='18'%20height='18'%20x='3'%20y='3'%20rx='2'/%3E%3Cpath%20d='m9%2012%202%202%204-4'/%3E%3C/svg%3E") no-repeat center / contain;
}

.io-quote {
  margin: 0;
  padding: 1.15rem 1.3rem 1.25rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  position: relative;
}

.io-quote-mark {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.8rem;
  line-height: 0.5;
  color: var(--color-brand);
  margin-bottom: 0.55rem;
}

.io-quote p {
  font-size: 0.97rem;
  color: var(--color-ink);
  margin-bottom: 0.9rem;
}

.io-quote-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.io-quote-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.io-quote-loc {
  font-family: var(--font-accent);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--color-ink-muted);
}

/* Five lucide:star glyphs, filled gold. */
.io-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.16em;
  color: var(--color-brand);
}

.io-stars svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.2;
}

/* ---------- Service area + CTA band ---------- */

.io-area-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  min-height: 200px;
}

.io-area-map-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem clamp(1.5rem, 4vw, 3.2rem);
  background-image:
    url("../../assets/img/pack/texture-grunge.webp"),
    repeating-linear-gradient(115deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 8px),
    radial-gradient(90% 120% at 20% 0%, rgba(255, 244, 220, 0.35), transparent 55%),
    linear-gradient(160deg, #c2a56b, #a8874e 60%, #94743f);
  background-size: cover, auto, auto, auto;
  background-blend-mode: soft-light, normal, normal, normal;
  color: #241b0d;
}

.io-area-eyebrow {
  display: block;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #4a3717;
  margin-bottom: 0.25rem;
}

.io-area-title {
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  color: #201708;
  margin-bottom: 0.4rem;
}

.io-area-cities {
  font-size: 0.94rem;
  line-height: 1.6;
  color: #3a2c13;
  margin-bottom: 1rem;
}

.btn-dark {
  background: #1a1510;
  border-color: #1a1510;
  color: var(--color-accent);
}

.btn-dark:hover {
  background: #000;
  color: #f0c877;
}

.io-texas {
  position: relative;
  flex: 0 0 auto;
  width: clamp(130px, 15vw, 190px);
}

/* Public-domain state outline, drawn as the mockup's thin light border rather
   than a filled silhouette. */
.io-texas svg {
  display: block;
  width: 100%;
  height: auto;
  fill: none;
  stroke: rgba(255, 249, 235, 0.9);
  filter: drop-shadow(0 1px 1px rgba(48, 33, 12, 0.5));
}

/* Pin sits over Central Texas (Austin / Dripping Springs) in the outline,
   over the warm glow the mockup bakes into the map. */
.io-texas-pin {
  position: absolute;
  left: 68%;
  top: 58%;
  transform: translate(-50%, -100%);
  color: #fff6e8;
}

.io-texas-pin::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 62%;
  width: 58px;
  height: 58px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 233, 190, 0.7), rgba(228, 184, 110, 0.28) 45%, transparent 72%);
}

.io-texas-pin svg {
  position: relative;
  display: block;
  width: 26px;
  height: 34px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2;
  filter: drop-shadow(0 2px 3px rgba(45, 30, 10, 0.5));
}

/* The pin's round hole reads as the map showing through. */
.io-texas-pin svg circle {
  fill: #a2803f;
  stroke: none;
}

/* CTA panel: dusk truck photo bled across the panel with a left-to-right
   scrim so the headline and the gold button stay the focal point. */
.io-area-cta-panel {
  position: relative;
  display: flex;
  align-items: center;
  padding: 2rem clamp(1.5rem, 4vw, 3.2rem);
  overflow: hidden;
  background-color: #15100b;
  background-image:
    url("../../assets/img/iron-oak/cta-truck.webp"),
    radial-gradient(80% 130% at 85% 0%, rgba(200, 140, 55, 0.35), transparent 60%),
    linear-gradient(160deg, #241c12, #15100b 70%);
  background-size: cover, auto, auto;
  background-position: 52% center, center, center;
  background-repeat: no-repeat;
}

.io-area-cta-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(15, 11, 7, 0.94) 0%, rgba(15, 11, 7, 0.86) 42%, rgba(15, 11, 7, 0.45) 68%, rgba(15, 11, 7, 0.08) 100%),
    linear-gradient(180deg, rgba(201, 154, 60, 0.08), transparent 45%);
}

.io-area-cta-copy {
  position: relative;
  z-index: 1;
  max-width: 30rem;
}

.io-area-cta-title {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  margin-bottom: 0.35rem;
}

.io-area-cta-text {
  color: var(--color-ink-muted);
  font-size: 1.02rem;
  margin-bottom: 1.1rem;
}

.io-area-cta-actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.io-area-cta-btn {
  font-size: 1.02rem;
  padding: 0.85rem 1.7rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.io-area-cta-phone {
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink-muted);
}

.io-area-cta-phone:hover { color: var(--color-accent); }

/* ---------- Delivery imagery: landing photo slots ----------
   Photos layer over the painted --media-fallback gradient from theme.css;
   the ::before overlay becomes a warm grade + bottom vignette so every
   shot reads in the same amber dusk palette. */

.io-service .media-ph,
.io-project .media-ph {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.io-service .media-ph::before,
.io-project .media-ph::before {
  background:
    linear-gradient(180deg, rgba(201, 154, 60, 0.12), rgba(201, 154, 60, 0.03) 40%, transparent 58%),
    radial-gradient(130% 75% at 50% 112%, rgba(12, 9, 5, 0.45), transparent 72%),
    linear-gradient(180deg, rgba(22, 19, 16, 0.14), rgba(22, 19, 16, 0.14));
}

.io-services-grid .io-service:nth-child(1) .media-ph {
  background-image: url("../../assets/img/iron-oak/svc-excavation.webp"), var(--media-fallback);
}

.io-services-grid .io-service:nth-child(2) .media-ph {
  background-image: url("../../assets/img/iron-oak/svc-clearing.webp"), var(--media-fallback);
}

.io-services-grid .io-service:nth-child(3) .media-ph {
  background-image: url("../../assets/img/iron-oak/svc-grading.webp"), var(--media-fallback);
}

.io-services-grid .io-service:nth-child(4) .media-ph {
  background-image: url("../../assets/img/iron-oak/svc-rockwork.webp"), var(--media-fallback);
}

.io-services-grid .io-service:nth-child(5) .media-ph {
  background-image: url("../../assets/img/iron-oak/svc-hauling.webp"), var(--media-fallback);
}

.io-services-grid .io-service:nth-child(6) .media-ph {
  background-image: url("../../assets/img/iron-oak/svc-driveway.webp"), var(--media-fallback);
}

.io-projects-grid .io-project:nth-child(1) .media-ph {
  background-image: url("../../assets/img/iron-oak/proj-ranch.webp"), var(--media-fallback);
}

.io-projects-grid .io-project:nth-child(2) .media-ph {
  background-image: url("../../assets/img/iron-oak/proj-pond.webp"), var(--media-fallback);
}

.io-projects-grid .io-project:nth-child(3) .media-ph {
  background-image: url("../../assets/img/iron-oak/svc-rockwork.webp"), var(--media-fallback);
}

.io-projects-grid .io-project:nth-child(4) .media-ph {
  background-image: url("../../assets/img/iron-oak/svc-driveway.webp"), var(--media-fallback);
}

.io-projects-grid .io-project:nth-child(5) .media-ph {
  background-image: url("../../assets/img/iron-oak/svc-clearing.webp"), var(--media-fallback);
}

/* Section backdrop rather than a card photo slot: framed to keep the machine in
   the open right half, with the scrim carrying legibility over the copy. */
.io-trio-media.media-ph {
  background-image: url("../../assets/img/iron-oak/equipment.webp"), var(--media-fallback);
  background-size: cover;
  background-position: 12% center;
  background-repeat: no-repeat;
}

.io-trio-media.media-ph::before {
  background:
    var(--equipment-scrim),
    linear-gradient(180deg, rgba(201, 154, 60, 0.1), transparent 50%);
}

/* ---------- Footer extras ---------- */

.io-footer { margin-top: 0; }

.io-footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.5rem;
}

.io-footer-links > div {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.io-footer-contact {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.io-footer-contact svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 0.2em;
  fill: none;
  stroke: var(--color-brand);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.io-social { display: flex; gap: 0.7rem; }

.io-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-ink-muted);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.io-social-link:hover {
  color: var(--color-accent);
  border-color: var(--color-brand);
}

/* Official brand marks (simple-icons) are solid glyphs, so they fill. */
.io-social-link svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  stroke: none;
}

/* ---------- Responsive ---------- */

/* Two width breakpoints only: 1024px (tablet, judged at 820) and 640px
   (phone, judged at 390). */

@media (max-width: 1024px) {
  /* Drawer breakpoint: below this the seven inline links, the lockup and the
     header actions no longer share one row, so the links move behind the
     toggle and overlay the page when opened instead of wrapping the header
     onto a second row. */
  .site-header-inner {
    justify-content: space-between;
    text-align: left;
    flex-wrap: nowrap;
    gap: 0.75rem;
  }

  .header-actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
    width: auto;
    gap: 0.75rem;
  }

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

  .nav-toggle { display: inline-flex; }

  /* Overlay panel anchored to the bottom edge of the header, which is
     position: relative — opening it never moves page content. */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0.35rem 1.5rem 1.35rem;
    background-color: #0d0b09;
    background-image: var(--grain);
    border-bottom: 2px solid var(--color-brand);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  }

  .site-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .site-nav .nav-link {
    display: block;
    padding: 0.85rem 0.2rem;
    border-bottom: 1px solid var(--color-border);
  }

  .site-nav .nav-link.is-active {
    color: var(--color-ink);
    border-bottom-color: var(--color-brand);
  }

  .site-nav .nav-drawer-cta {
    display: block;
    width: 100%;
    max-width: 22rem;
    margin: 1.1rem auto 0;
    text-align: center;
  }

  /* Six services drop from one row to two rows of three. */
  .io-services-grid { grid-template-columns: repeat(3, 1fr); }

  /* Five projects in a plain three-across grid leave the second row a card
     short and a whole empty cell on the right. The grid runs on six tracks
     instead: the first three cards take two tracks each, and the last two
     split the second row in half so both rows fill edge to edge. The wider
     pair crops to 16 / 9 so the two rows stay close in height. */
  .io-projects-grid { grid-template-columns: repeat(6, 1fr); }

  .io-projects-grid > .io-project { grid-column: span 2; }

  .io-projects-grid > .io-project:nth-child(4),
  .io-projects-grid > .io-project:nth-child(5) { grid-column: span 3; }

  .io-projects-grid > .io-project:nth-child(4) .media-ph,
  .io-projects-grid > .io-project:nth-child(5) .media-ph { aspect-ratio: 16 / 9; }

  .io-values-grid { grid-template-columns: repeat(2, 1fr); }

  .io-hero-art { opacity: 0.55; }

  /* The full-bleed bands give up horizontal space here: the equipment panel
     spans the trio and the checklist and quote share the row under it, and the
     service area and CTA panels stack. */
  .io-trio-grid { grid-template-columns: 1fr 1fr; }

  .io-trio-equipment {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--color-border);
    min-height: 270px;
  }

  .io-trio-equipment .io-trio-title,
  .io-trio-equipment .io-trio-text { max-width: 26rem; }

  .io-trio-why { border-left: 0; }

  .io-area-grid { grid-template-columns: 1fr; }

  .io-area-cta-panel { border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav,
  .nav-toggle-bars span { transition: none; }
}

@media (max-width: 640px) {
  :root { --section-pad: 2.75rem; }

  /* Every card grid is a single column at phone width, so the tablet span
     tracks are released as well as the column count. */
  .io-values-grid { grid-template-columns: 1fr; }
  .io-services-grid { grid-template-columns: 1fr; }
  .io-projects-grid { grid-template-columns: 1fr; }

  .io-projects-grid > .io-project,
  .io-projects-grid > .io-project:nth-child(4),
  .io-projects-grid > .io-project:nth-child(5) { grid-column: auto; }

  .io-projects-grid > .io-project:nth-child(4) .media-ph,
  .io-projects-grid > .io-project:nth-child(5) .media-ph { aspect-ratio: 4 / 3; }

  .io-hero-lede { max-width: 100%; }

  #services { padding-block: 2.4rem 1.8rem; }

  /* One column: the copy now covers the photo, so the scrim spans the panel,
     and the desktop min-height would only push the checklist further down. */
  .io-trio-grid { grid-template-columns: 1fr; }
  .io-trio-panel { border-left: 0; }
  .io-trio-testimonial { border-top: 1px solid var(--color-border); }

  .io-trio-equipment {
    min-height: 200px;
    --equipment-scrim: linear-gradient(
      90deg,
      rgba(11, 9, 7, 0.94) 0%,
      rgba(11, 9, 7, 0.87) 62%,
      rgba(11, 9, 7, 0.68) 100%
    );
  }

  .io-trio-equipment .io-trio-title,
  .io-trio-equipment .io-trio-text { max-width: 100%; }

  /* One column is too narrow to seat the outline beside the copy, and stacking
     it underneath adds a whole row of height. It becomes a faded backdrop
     behind the copy instead: pinned to the right edge, vertically centred, and
     out of the flow so the panel is only as tall as its text. */
  .io-area-map-panel { display: block; overflow: hidden; }

  .io-area-copy {
    position: relative;
    z-index: 1;
  }

  .io-texas {
    position: absolute;
    z-index: 0;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    width: clamp(150px, 45vw, 240px);
    opacity: 0.32;
    pointer-events: none;
  }

  .io-area-cta-panel {
    min-height: 260px;
    justify-content: center;
  }

  /* The copy is a shrink-to-fit flex item, so centring the panel's main axis
     is what pulls it off the left edge; text-align handles the lines inside. */
  .io-area-cta-copy { text-align: center; }
  .io-area-cta-actions { justify-content: center; }

  /* The header keeps the call target but drops the number text so the lockup,
     the call button and the menu toggle share one row. */
  .header-phone-label { display: none; }

  .header-phone {
    width: 44px;
    height: 44px;
    justify-content: center;
    gap: 0;
  }

  /* Action rows centre themselves and stretch to the column so the two button
     groups stack the same way instead of hugging the left edge. */
  .io-hero-ctas,
  .io-area-cta-actions {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
  }

  .io-hero-ctas .btn,
  .io-area-cta-actions .btn {
    display: block;
    width: 100%;
    text-align: center;
  }

  .io-area-cta-phone {
    display: inline-block;
    padding-block: 0.6rem;
    text-align: center;
  }

  /* Section headers put "View All" under the title, with a real tap target. */
  .io-section-row { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
  .io-view-all { display: inline-block; padding-block: 0.65rem; }

  /* Quick Links stacks like every other footer column instead of squeezing
     into two max-content columns inside a shrink-to-fit footer cell. */
  .io-footer-links { grid-template-columns: 1fr; gap: 0; }

  /* Footer links become ~44px tall; the column gaps tighten to absorb it. */
  .footer-col { gap: 0.1rem; }
  .io-footer-links > div { gap: 0; }

  .footer-col .footer-link { padding-block: 0.6rem; }
  .footer-col a.footer-link:not(.io-footer-contact) { display: inline-block; }

  .footer-bottom { gap: 0.25rem; }

  .footer-bottom .footer-link {
    display: inline-block;
    padding-block: 0.8rem;
  }
}