/* ==========================================================================
   Red Dirt Leveling — design system
   ==========================================================================
   Ported from the v2 design container. Same typography, palette, spacing and
   components — running on real static pages with real URLs, titles and schema.

   TYPE
     Archivo         display / headings. Practical, engineered, slightly wide —
                     which is what brand/logo-direction.md actually asked for.
     IBM Plex Sans   body.
     IBM Plex Mono   every number, label, soil reading and eyebrow. The mono
                     carrying the data is the whole point of the positioning:
                     this is a company that measures things.
   ========================================================================== */

:root {
  /* Ink & neutrals — v2's deep navy-black, not a flat grey */
  --ink:        #12172A;
  --slate:      #525A6B;
  --mute:       #7B8291;
  --line:       #E2DCCE;
  --line-soft:  #ECE6D9;

  /* Clay */
  --red:        #9C2F21;
  --red-light:  #AE3A28;
  --red-deep:   #7E2617;
  --red-dark:   #601A10;
  --red-wash:   #F8EFEB;
  --clay-tint:  #F0E4DE;

  /* Grounds */
  --bone:       #F4F0E7;
  --paper:      #FAF7F0;
  --white:      #FFFFFF;

  --ok:         #2F5233;

  --display: Archivo, "Helvetica Neue", sans-serif;
  --sans:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1180px;
  --narrow: 760px;
  --radius: 4px;
  --pad: 80px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  color: #3A4250;
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--red); text-underline-offset: 3px; }
a:hover { color: var(--red-dark); }

h1, h2, h3 { font-family: var(--display); color: var(--ink); margin: 0 0 .5em; }
h1 { font-weight: 800; font-size: clamp(34px, 4.2vw, 54px); line-height: 1.05; letter-spacing: -.022em; }
h2 { font-weight: 700; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.12; letter-spacing: -.015em; }
h3 { font-weight: 700; font-size: clamp(19px, 2.2vw, 24px); line-height: 1.2; letter-spacing: -.01em; }
h4 { font-family: var(--sans); font-weight: 600; font-size: 1.02rem; margin: 0 0 .5em; color: var(--ink); }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 600; }

/* ---------- layout ---------- */
.wrap   { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.narrow { max-width: var(--narrow); }
section { padding: var(--pad) 0; }
section.tight { padding: 56px 0; }

.bg-bone  { background: var(--bone); }
.bg-dark  { background: var(--ink); color: #C8CDDA; }
.bg-dark h2, .bg-dark h3 { color: #fff; }
.bg-red   { background: var(--red); color: #F6E7E2; }
.bg-red h2, .bg-red h3 { color: #fff; }

.grid { display: grid; gap: 24px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

/* ---------- mono voice: eyebrows, labels, every number ---------- */
.eyebrow {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--red); margin-bottom: 16px;
}
.bg-dark .eyebrow { color: #D99A7A; }
.bg-red .eyebrow, .bg-clay .eyebrow { color: #F0C4B4; }

.lede { font-size: 1.16rem; line-height: 1.55; color: var(--slate); }
.bg-dark .lede { color: #AEB6C6; }
.small { font-size: .88rem; color: var(--mute); }
.mono  { font-family: var(--mono); }
.num, td.num, .card-price, .stat { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- the vial ---------- */
.vial {
  position: relative; width: 108px; height: 21px;
  border: 2px solid var(--ink); border-radius: 10.5px;
  background: var(--red); margin: 0 0 26px;
}
.vial::before, .vial::after {
  content: ""; position: absolute; top: -2px; bottom: -2px;
  width: 2px; background: var(--ink); z-index: 1;
}
.vial::before { left: 36%; }
.vial::after  { left: 62%; }
.vial i {
  position: absolute; top: 50%; left: 50%; z-index: 2;
  width: 10px; height: 10px; border-radius: 50%; background: #fff;
  transform: translate(-50%, -50%);
  transition: left .9s cubic-bezier(.22,1,.36,1);
}
/* Off-centre until the section scrolls into view, then it settles.
   script.js adds .is-level via IntersectionObserver. */
.vial.will-settle i { left: 17%; }
.vial.will-settle.is-level i { left: 50%; }
.vial.is-off i { left: 17%; }
.vial-center { margin-left: auto; margin-right: auto; }

.bg-dark .vial, .bg-red .vial, .bg-clay .vial { border-color: var(--bone); background: var(--red-light); }
.bg-dark .vial::before, .bg-dark .vial::after,
.bg-red .vial::before,  .bg-red .vial::after,
.bg-clay .vial::before, .bg-clay .vial::after { background: var(--bone); }

@media (prefers-reduced-motion: reduce) {
  .vial i { transition: none; }
  .vial.will-settle i { left: 50%; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  padding: 14px 24px; border-radius: 3px;
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .14s, border-color .14s, color .14s;
}
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.bg-dark .btn-ghost, .bg-red .btn-ghost, .bg-clay .btn-ghost { color: #fff; border-color: rgba(255,255,255,.38); }
.bg-dark .btn-ghost:hover, .bg-red .btn-ghost:hover, .bg-clay .btn-ghost:hover { border-color: #fff; }
.btn-lg { font-size: 16px; padding: 17px 30px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250,247,240,.94);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 24px; height: 76px; }
.logo { display: flex; flex-direction: column; text-decoration: none; flex-shrink: 0; line-height: 1; gap: 5px; }
.logo-name { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: .02em; color: var(--ink); }
.logo-vial {
  position: relative; display: block; width: 100%; height: 9px;
  border: 1.5px solid var(--ink); border-radius: 5px; background: var(--red);
}
.logo-vial::before, .logo-vial::after {
  content: ""; position: absolute; top: -1.5px; bottom: -1.5px; width: 1.5px; background: var(--ink);
}
.logo-vial::before { left: 36%; }
.logo-vial::after  { left: 62%; }
.logo-vial i {
  position: absolute; top: 50%; left: 50%; width: 5px; height: 5px;
  border-radius: 50%; background: #fff; transform: translate(-50%,-50%);
}
.logo-sub {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase; color: var(--red);
  text-align: center; display: block;
}
.site-footer .logo-name { color: #fff; }
.site-footer .logo-vial { border-color: var(--bone); background: var(--red-light); }
.site-footer .logo-vial::before, .site-footer .logo-vial::after { background: var(--bone); }
.site-footer .logo-sub { color: #D99A7A; }

.header-spacer { flex: 1 1 auto; min-width: 0; }
.nav { display: flex; gap: 26px; align-items: center; }
.nav a { font-size: 14px; font-weight: 600; color: #3A4250; text-decoration: none; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--red); }
.header-cta { display: flex; gap: 14px; align-items: center; flex-shrink: 0; }
.header-phone { font-family: var(--mono); font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; white-space: nowrap; }
@media (max-width: 1150px) { .nav { display: none; } }
@media (max-width: 620px) { .header-cta .btn, .header-phone { display: none; } }

/* ---------- hero ---------- */
.hero { padding: 56px 0 104px; }
.hero h1 { max-width: 18ch; }
.hero .lede { max-width: 54ch; margin-bottom: 30px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 34px; } }
.hero-meta {
  margin-top: 26px; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--clay-tint);
  display: flex; flex-wrap: wrap; gap: 6px 16px;
}

/* ---------- cards ---------- */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.card h3 { margin-bottom: .4em; }
.card-link { display: block; text-decoration: none; color: inherit; transition: border-color .14s, transform .14s; }
.card-link:hover { border-color: var(--ink); transform: translateY(-2px); }
.card-link h3 { color: var(--ink); }
.card-price { color: var(--red); font-size: .92rem; font-weight: 500; margin-top: 12px; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 520px; }
th, td { text-align: left; padding: 13px 15px; border-bottom: 1px solid var(--line); vertical-align: top; }
th {
  font-family: var(--mono); font-weight: 500; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--slate);
}
.num { text-align: right; white-space: nowrap; }
.col-us { background: var(--red-wash); }
th.col-us { color: var(--red); }
.delta { color: var(--ok); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 21px 44px 21px 0;
  font-weight: 600; font-size: 1.04rem; color: var(--ink); position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 8px; top: 17px;
  font-family: var(--mono); font-size: 1.4rem; font-weight: 400; color: var(--red); line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 44px 22px 0; color: var(--slate); }

/* ---------- steps ---------- */
.steps { counter-reset: step; }
.step { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.step:last-child { border-bottom: 0; }
.step-num {
  counter-increment: step; font-family: var(--mono); font-size: 1.15rem;
  font-weight: 600; color: var(--red); line-height: 1.5; letter-spacing: .04em;
}
.step-num::before { content: counter(step, decimal-leading-zero); }

/* ---------- callout ---------- */
.callout {
  border-left: 3px solid var(--red); border-radius: 0;
  padding: 4px 0 4px 22px; margin: 26px 0; color: var(--slate);
}
.bg-dark .callout { border-color: #D99A7A; color: #AEB6C6; }

/* ---------- before / after slider ---------- */
.ba-slider {
  position: relative; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--bone);
  user-select: none; touch-action: pan-y; cursor: ew-resize;
}
.ba-slider img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover; }
.ba-after { position: absolute; inset: 0; width: 100%; }
.ba-after img { height: 100%; }
.ba-handle {
  position: absolute; top: 0; bottom: 0; width: 3px; background: var(--red);
  transform: translateX(-50%); pointer-events: none;
}
.ba-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; background: var(--red);
  box-shadow: 0 2px 10px rgba(18,23,42,.3);
}
.ba-tag {
  position: absolute; top: 12px; font-family: var(--mono); font-size: 10.5px;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  background: var(--ink); color: #fff; padding: 5px 10px; border-radius: 2px; z-index: 3;
}
.ba-tag.before { right: 12px; }
.ba-tag.after  { left: 12px; }

/* ---------- figures ---------- */
figure { margin: 0; }
figure img { border-radius: var(--radius); border: 1px solid var(--line); }
figcaption { font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mute); margin-top: 10px; }

/* ---------- metro map ---------- */
.metro { position: relative; background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.metro svg { width: 100%; height: auto; }
.metro .city { fill: var(--red); }
.metro .city-hub { fill: var(--ink); }
.metro .city-label { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; fill: var(--slate); text-transform: uppercase; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #8A91A0; padding: 64px 0 120px; font-size: .92rem; }
.site-footer h4 { font-family: var(--mono); color: #fff; font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer a { color: #C8CDDA; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: 8px; }
.footer-legal { margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.13);
  font-size: .82rem; color: #6E7688; }
.footer-areas { margin-top: 8px; line-height: 1.9; font-family: var(--mono); font-size: .78rem; }

/* ---------- sticky mobile bar ---------- */
.action-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
  display: none; grid-template-columns: 1fr 1fr 1.3fr;
  background: var(--ink); border-top: 1px solid rgba(255,255,255,.14);
  padding-bottom: env(safe-area-inset-bottom);
}
.action-bar a {
  display: flex; align-items: center; justify-content: center;
  padding: 15px 8px; color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 600; border-right: 1px solid rgba(255,255,255,.14);
}
.action-bar a:last-child { border-right: 0; background: var(--red); }
@media (max-width: 900px) { .action-bar { display: grid; } }

/* ---------- strata ---------- */
.strata { position: relative; height: 130px; overflow: hidden; background: var(--red-deep); line-height: 0; }
.strata svg { width: 100%; height: 100%; display: block; }
.bg-clay { background: var(--speckle), var(--red-deep); background-size: var(--speckle-size); background-repeat: repeat; color: #EFD3CA; }
.bg-clay h2, .bg-clay h3 { color: #fff; }
.bg-clay .lede { color: #EBC7BC; }

/* ---------- utility ---------- */
.mt0{margin-top:0}.mb0{margin-bottom:0}.mt24{margin-top:24px}.mt40{margin-top:40px}
.center { text-align: center; }
.tag {
  display: inline-block; background: var(--red); color: #fff; font-family: var(--mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 2px; margin-bottom: 12px;
}
.pill {
  display: inline-block; background: var(--bone); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 13px; font-family: var(--mono); font-size: .76rem;
  color: var(--slate); margin: 0 6px 8px 0;
}
.skip { position: absolute; left: -9999px; top: 0; background: #fff; padding: 12px 20px; z-index: 100; }
.skip:focus { left: 12px; top: 12px; }
:focus-visible { outline: 3px solid var(--red-light); outline-offset: 2px; }

/* placeholder — only where a real photo doesn't exist yet */
.ph {
  aspect-ratio: 4/3; background: repeating-linear-gradient(45deg, #EFEAE0 0 12px, #E7E1D6 12px 24px);
  display: flex; align-items: center; justify-content: center; border-radius: var(--radius);
  color: var(--mute); font-family: var(--mono); font-size: .74rem; text-align: center; padding: 20px;
}

/* ---------- pre-launch banner — delete before launch ---------- */
.todo-banner {
  background: var(--ink); color: #C8CDDA; font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
  padding: 9px 28px; text-align: center; border-bottom: 1px solid #2C3346;
}

/* ==========================================================================
   THE RED DIRT — v3's signature treatment.
   Six layered radial-gradients at different tile sizes make a speckled clay
   surface that never visibly repeats. Used on the header, behind the hero,
   and on every clay section. This is the thing that makes the brand feel like
   red dirt rather than "a website that is red".
   ========================================================================== */
:root {
  --speckle: radial-gradient(circle at 12% 22%,rgba(0,0,0,.17) 0 2px,transparent 2.5px),radial-gradient(circle at 68% 41%,rgba(0,0,0,.14) 0 3px,transparent 3.5px),radial-gradient(circle at 34% 73%,rgba(0,0,0,.15) 0 2px,transparent 2.5px),radial-gradient(circle at 86% 85%,rgba(0,0,0,.12) 0 2.5px,transparent 3px),radial-gradient(circle at 53% 11%,rgba(255,255,255,.055) 0 1.5px,transparent 2px),radial-gradient(circle at 22% 58%,rgba(255,255,255,.045) 0 1.5px,transparent 2px);
  --speckle-size: 88px 88px,132px 132px,108px 108px,152px 152px,68px 68px,96px 96px;
}

.dirt {
  background: var(--speckle), var(--red);
  background-size: var(--speckle-size);
  background-repeat: repeat;
}
.dirt-deep { background: var(--speckle), var(--red-deep); background-size: var(--speckle-size); background-repeat: repeat; }
.dirt-dark { background: var(--speckle), var(--red-dark); background-size: var(--speckle-size); background-repeat: repeat; }
/* speckle only — sits over the wave svg so the texture reads across the seam */
.dirt-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--speckle); background-size: var(--speckle-size); background-repeat: repeat;
}

/* --- header on clay ------------------------------------------------------ */
.site-header {
  background: var(--speckle), var(--red);
  background-size: var(--speckle-size);
  background-repeat: repeat;
  backdrop-filter: none;
  border-bottom: 1px solid var(--red-dark);
}
.site-header .logo-name { color: #fff; }
.site-header .logo-vial { border-color: var(--bone); background: var(--red-dark); }
.site-header .logo-vial::before, .site-header .logo-vial::after { background: var(--bone); }
.site-header .logo-sub { color: #F0E4DE; }
.nav a { color: #F0E4DE; }
.nav a:hover, .nav a[aria-current="page"] { color: #fff; }
.header-phone { color: var(--bone); }
.site-header .btn-primary { background: var(--bone); color: var(--red-dark); }
.site-header .btn-primary:hover { background: #fff; color: var(--red-dark); }

/* --- the dirt rising behind the hero -------------------------------------- */
.hero { position: relative; overflow: hidden; padding: 56px 0 104px;
        background: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%); }
.hero > * { position: relative; z-index: 2; }
.hero-dirt {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  height: 46%; min-height: 250px; max-height: 440px;
  background: var(--speckle), var(--red-deep);
  background-size: var(--speckle-size);
  background-repeat: repeat;
}
.hero-dirt .waves { position: absolute; left: 0; right: 0; top: -1px; width: 100%; height: 150px; }
.hero-dirt .waves svg { width: 100%; height: 100%; display: block; }

/* Content that lands on the dirt needs light type. */
.on-dirt, .on-dirt p, .on-dirt .lede { color: #F3DDD5; }
.on-dirt h2, .on-dirt h3 { color: #fff; }
.on-dirt .small { color: #E0BFB4; }