/* Ridgeline Excavation — demo site styles. Direction: Cut & Fill.
   Desktop first: base rules are the 1440 design. Then
     @media (max-width: 1099px)  tablet (designed at 834, checked at 1024)
     @media (max-width: 699px)   phone  (designed at 390, checked at 360)
   Tablet and phone rules sit at the end of each component's block. */

:root {
  /* Color: night ground, machine yellow, Ozark clay and limestone. */
  --ground: #15130F;        /* page background */
  --surface: #1F1C17;       /* cards, panels */
  --surface-2: #2A261F;     /* raised panels, inactive tabs */
  --deep: #0E0C09;          /* utility bar, footer */
  --ink: #F2EDE4;           /* main text on dark */
  --ink-soft: #B9AF9F;      /* secondary text on dark, 8.9:1 */
  --ink-mute: #968E81;      /* labels on dark, 5.7:1 (4.65:1 on surface-2) */
  --line: #3A352C;          /* rules on dark */
  --line-strong: #5A5244;
  --accent: #FFC20E;        /* machine yellow: buttons, numbers, the active thing */
  --on-accent: #15130F;
  --soft-on-accent: #3D372B;
  --clay: #C8643A;          /* Ozark red clay */
  --clay-deep: #9C4422;     /* clay text on limestone, 5.0:1 */
  --limestone: #E9E3D7;     /* light sections */
  --limestone-2: #DDD5C6;
  --line-light: #C9C0AF;
  --on-light: #1A1712;
  --soft-on-light: #5C5446; /* 5.8:1 on limestone */

  /* Type */
  --font-display: 'Anton', 'Impact', system-ui, sans-serif;
  --font-body: 'Barlow', system-ui, sans-serif;
  --font-label: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;

  /* Layout */
  --max: 1240px;
  --gutter: 40px;
  --section: 116px;
  --edge: max(var(--gutter), calc((100% - var(--max)) / 2));
  --cut: 16px;              /* the blade-cut corner */
}

@media (max-width: 1099px) {
  :root { --gutter: 32px; --section: 96px; }
}
@media (max-width: 699px) {
  :root { --gutter: 20px; --section: 72px; --cut: 12px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-body); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { text-wrap: balance; font-weight: 400; }
p, li { text-wrap: pretty; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Photo treatment: warm, a little crushed, like late light on a job site. */
.ph img { filter: contrast(1.1) saturate(.95) sepia(.12) brightness(.94); }

/* Blade-cut corner, the one shape on the site. */
.btn--yellow, .btn--dark, .btn--ghost, .plate, .xp__tab, .xs, .howpay, .tag, .wiz, .tile, .unit, .track__n, .feature__photo, .job__photo, .crew__photo, .rv__item, .askbox, .rock__stat, .sent__mark {
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}

/* ---------------------------------------------------------------- shared type */
.eyebrow { display: flex; align-items: center; gap: 14px; font: 700 15px/1.2 var(--font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 22px; }
.eyebrow::before { content: ''; width: 32px; height: 4px; background: currentColor; flex: none; }
.eyebrow--dark { color: var(--on-accent); }
.eyebrow--clay { color: var(--clay-deep); }
.h2 { font: 400 92px/.92 var(--font-display); text-transform: uppercase; letter-spacing: .004em; }
.h2 > span { display: block; }
.h2 .hi { color: var(--accent); }
.h2--md { font-size: 72px; }
.h3 { font: 700 26px/1.1 var(--font-label); text-transform: uppercase; letter-spacing: .03em; }
.lead { font-size: 21px; line-height: 1.5; color: var(--ink-soft); }
.lbl { font: 700 14px/1.2 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.note { font-size: 15px; color: var(--ink-mute); }
.textlink { display: inline-flex; align-items: center; gap: 8px; padding-top: 13px; font: 700 18px/1 var(--font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 6px; }

.sec-head { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: end; margin-bottom: 64px; }
.sec-head__side .lead { max-width: 480px; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 26px; border: 0; font: 700 19px/1 var(--font-label); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.btn .icon { width: 20px; height: 20px; }
.btn--big { height: 64px; padding: 0 30px; font-size: 21px; }
.btn--wide { width: 100%; }
.btn--yellow { background: var(--accent); color: var(--on-accent); }
.btn--ghost { background: rgba(242, 237, 228, .1); color: var(--ink); }
.btn--line { height: 48px; padding: 0 20px; background: none; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line-strong); font-size: 17px; }
.btn--dark { background: var(--on-light); color: var(--accent); }
.btn.is-hover.btn--yellow, .btn--yellow:hover { background: #FFD24D; }
.btn.is-focus { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---------------------------------------------------------------- header */
.site-header { position: relative; z-index: 20; background: var(--ground); }
.utility { background: var(--deep); border-bottom: 1px solid var(--line); }
.utility__in { display: flex; justify-content: space-between; align-items: center; height: 38px; font: 600 14px/1 var(--font-label); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); }
.utility p { display: flex; align-items: center; gap: 8px; }
.utility .icon { width: 16px; height: 16px; color: var(--accent); }
.mainbar { display: flex; align-items: center; height: 84px; padding-left: var(--edge); border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: center; gap: 12px; min-height: 48px; text-decoration: none; margin-right: auto; }
.logo__mark { width: 46px; height: 46px; flex: none; }
.logo__word { display: flex; flex-direction: column; line-height: 1; }
.logo__word b { font: 400 29px/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.logo__word small { font: 700 12.5px/1 var(--font-label); letter-spacing: .42em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; }
.nav { display: flex; gap: 30px; margin-right: 30px; }
.nav a { font: 600 18px/1 var(--font-label); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.phone-block { align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 4px; margin-left: 24px; padding: 0 var(--edge) 0 52px; background: var(--accent); color: var(--on-accent); text-decoration: none; clip-path: polygon(28px 0, 100% 0, 100% 100%, 0 100%); }
.phone-block span { font: 700 13px/1 var(--font-label); letter-spacing: .16em; text-transform: uppercase; }
.phone-block strong { font: 400 28px/1 var(--font-display); letter-spacing: .02em; font-weight: 400; }
.hdr-call, .hdr-menu { display: none; }

@media (max-width: 1099px) {
  .utility__in p:nth-child(2) { display: none; }
  .mainbar { height: 76px; }
  .nav { display: none; }
  .mainbar__bid { height: 44px; margin-right: 20px; padding: 0 16px; }
  .phone-block { margin-left: 0; padding: 0 28px 0 50px; }
  .phone-block strong { font-size: 26px; }
  .hdr-menu { display: grid; place-items: center; align-self: stretch; width: 76px; border: 0; background: var(--surface-2); color: var(--ink); }
  .hdr-menu .icon { width: 30px; height: 30px; }
}

@media (max-width: 699px) {
  .utility { display: none; }
  .mainbar { height: 64px; padding-left: var(--gutter); }
  .logo { gap: 10px; }
  .logo__mark { width: 40px; height: 40px; }
  .logo__word b { font-size: 25px; }
  .logo__word small { font-size: 12px; letter-spacing: .34em; }
  .mainbar__bid, .phone-block { display: none; }
  .hdr-call { display: grid; place-items: center; align-self: stretch; width: 64px; background: var(--accent); color: var(--on-accent); }
  .hdr-call .icon { width: 28px; height: 28px; }
  .hdr-menu { width: 64px; }
  .hdr-menu .icon { width: 28px; height: 28px; }
}

/* ---------------------------------------------------------------- hero */
.hero { position: relative; display: flex; flex-direction: column; min-height: 778px; background: #0B0A08; isolation: isolate; overflow: hidden; }
.hero__photo { position: absolute; inset: 0; z-index: -1; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 31%; }
.hero__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 10, 8, .97) 0, rgba(11, 10, 8, .82) 20%, rgba(11, 10, 8, 0) 44%), linear-gradient(to bottom, rgba(11, 10, 8, .45), rgba(11, 10, 8, 0) 34%); }
.hero__in { position: relative; flex: 1; display: flex; flex-direction: column; padding-top: 56px; padding-bottom: 44px; }
.hero__eyebrow { color: var(--ink); }
.nw-short { display: none; }
.hero__eyebrow::before { background: var(--accent); }
.hero__title { font: 400 min(160px, calc((100vw - 80px) / 7.7))/.86 var(--font-display); text-transform: uppercase; letter-spacing: .005em; color: var(--ink); text-wrap: initial; }
.hero__title span { display: inline; }
.hero__title .hero__hi { display: block; color: var(--accent); }
.hero__foot { margin-top: auto; display: grid; grid-template-columns: minmax(0, 580px) auto; justify-content: space-between; align-items: end; gap: 48px; }
.hero__sub { font-size: 21px; line-height: 1.5; color: #E4DDD1; }
.hero__actions { display: flex; gap: 14px; }
.hero__actions .btn--ghost { background: rgba(242, 237, 228, .12); }
.proof { position: relative; display: flex; align-items: center; height: 68px; padding: 0 var(--edge); background: rgba(11, 10, 8, .8); border-top: 1px solid rgba(242, 237, 228, .14); font: 600 17px/1 var(--font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.proof li { padding: 0 28px; border-left: 1px solid var(--line-strong); white-space: nowrap; }
.proof li:first-child { padding-left: 0; border-left: 0; }
.proof b { color: var(--ink); font-weight: 700; }
.proof .icon { display: inline-block; vertical-align: -3px; margin-right: 4px; color: var(--accent); width: 18px; height: 18px; }

@media (max-width: 1099px) {
  .hero { min-height: calc(560px + 50vw); }
  .hero__photo img { object-position: 50% 0; }
  .hero__in { padding-top: 48px; padding-bottom: 36px; }
  .hero__foot { grid-template-columns: 1fr; gap: 28px; }
  .hero__sub { max-width: 620px; font-size: 20px; }
  .proof { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; row-gap: 14px; height: auto; padding: 20px var(--gutter); }
  .proof li:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
}

@media (max-width: 699px) {
  .hero { min-height: clamp(600px, calc(213.3vw - 132px), 760px); }
  .hero__photo img { object-position: 50% 0; }
  .hero__photo::after { background: linear-gradient(to top, rgba(11, 10, 8, .98) 0, rgba(11, 10, 8, .9) 34%, rgba(11, 10, 8, 0) 52%), linear-gradient(to bottom, rgba(11, 10, 8, .5), rgba(11, 10, 8, 0) 30%); }
  .hero__in { padding-top: 26px; padding-bottom: 22px; }
  .hero__eyebrow { margin-bottom: 14px; font-size: 15px; letter-spacing: .08em; gap: 10px; }
  .hero__eyebrow::before { width: 20px; }
  .hero__title { font-size: min(92px, calc((100vw - 40px) / 4.4)); line-height: .86; }
  .nw-long { display: none; }
  .nw-short { display: inline; }
  .hero__title span, .hero__title .hero__hi { display: block; }
  .hero__foot { gap: 20px; }
  .hero__sub { font-size: 17px; line-height: 1.5; }
  .hero__actions { display: grid; grid-template-columns: 1.15fr 1fr; gap: 8px; }
  .hero__actions .btn { height: 56px; padding: 0 12px; font-size: 17px; gap: 8px; }
  .proof { display: flex; gap: 0; height: 52px; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; font-size: 15px; }
  .proof li { flex: none; padding: 0 16px; }
  .proof li:nth-child(3n + 1) { padding-left: 16px; border-left: 1px solid var(--line-strong); }
  .proof li:first-child { padding-left: 0; border-left: 0; }
}

/* ---------------------------------------------------------------- work: recent jobs gallery */
.work { padding: var(--section) 0; background: var(--ground); }
.work__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px; }
.feature { display: grid; grid-template-columns: 7fr 5fr; }
.feature__photo { --cut: 0px; height: 580px; }
.feature__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.plate { --cut: 28px; display: flex; flex-direction: column; padding: 44px 44px 40px; background: var(--surface); border-top: 6px solid var(--accent); }
.plate__town { display: flex; align-items: center; gap: 8px; font: 700 15px/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.plate__town .icon { width: 18px; height: 18px; }
.plate__title { margin-top: 16px; font: 400 52px/.95 var(--font-display); text-transform: uppercase; }
.plate__lbl { margin-top: 30px; }
.plate__did { display: grid; gap: 10px; margin-top: 14px; }
.plate__did li { position: relative; padding-left: 26px; font-size: 17px; line-height: 1.45; color: var(--ink-soft); }
.plate__did li::before { content: ''; position: absolute; left: 0; top: 8px; width: 10px; height: 10px; background: var(--accent); }
.plate__nums { display: grid; grid-template-columns: auto 1fr; gap: 48px; margin-top: auto; padding-top: 26px; border-top: 1px solid var(--line); }
.plate__nums dt { font: 700 14px/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.plate__nums dd { margin-top: 10px; font: 400 40px/1 var(--font-display); text-transform: uppercase; white-space: nowrap; color: var(--accent); }
.plate__nums dd.plate__units { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

.jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px 24px; }
.job { display: flex; flex-direction: column; }
.job__photo { --cut: 20px; position: relative; height: 270px; }
.job__photo img { width: 100%; height: 100%; object-fit: cover; }
.job__type { position: absolute; left: 0; bottom: 0; padding: 9px 12px 8px; background: var(--accent); color: var(--on-accent); font: 700 15px/1 var(--font-label); letter-spacing: .1em; text-transform: uppercase; }
.job__town { display: flex; align-items: center; gap: 6px; margin-top: 20px; font: 700 15px/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.job__town .icon { width: 16px; height: 16px; color: var(--accent); }
.job__title { margin-top: 10px; font: 700 25px/1.1 var(--font-label); letter-spacing: .02em; text-transform: uppercase; }
.job__did { margin: 10px 0 18px; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.job__days { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font: 600 15px/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.job__days b { font-weight: 700; color: var(--accent); }
.jobs__hint { display: none; }

@media (max-width: 1099px) {
  .sec-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
  .h2 { font-size: 76px; }
  .work__grid { gap: 56px; }
  .feature { grid-template-columns: 1fr; }
  .feature__photo { height: 420px; }
  .plate { --cut: 24px; padding: 36px 36px 32px; }
  .plate__title { font-size: 46px; }
  .plate__did { grid-template-columns: 1fr 1fr; gap: 10px 32px; }
  .plate__nums { margin-top: 28px; }
  .jobs { grid-template-columns: 1fr 1fr; gap: 44px 20px; }
  .job__photo { height: 250px; }
}

@media (max-width: 699px) {
  .lbl { font-size: 15px; letter-spacing: .1em; }
  .sec-head { gap: 18px; margin-bottom: 36px; }
  .eyebrow { margin-bottom: 16px; gap: 10px; }
  .eyebrow::before { width: 22px; height: 3px; }
  .h2 { font-size: 56px; line-height: .9; }
  .lead { font-size: 18px; }
  .work__grid { gap: 40px; }
  .feature__photo { height: 280px; margin: 0 calc(-1 * var(--gutter)); }
  .plate { --cut: 18px; margin: -36px 0 0; position: relative; padding: 24px 22px 22px; }
  .plate__title { margin-top: 12px; font-size: 36px; }
  .plate__lbl { margin-top: 22px; }
  .plate__did { grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
  .plate__did li { font-size: 16px; padding-left: 22px; }
  .plate__did li::before { top: 7px; width: 9px; height: 9px; }
  .plate__nums { gap: 20px; margin-top: 22px; padding-top: 20px; }
  .plate__nums dd { font-size: 30px; }
  .plate__nums dd.plate__units { margin-top: 10px; }
  .jobs { display: flex; gap: 10px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
  .job { flex: 0 0 82%; scroll-snap-align: start; }
  .job__photo { --cut: 14px; height: 210px; }
  .job__town { margin-top: 16px; }
  .job__title { font-size: 21px; }
  .job__did { margin-bottom: 14px; font-size: 15px; }
  .jobs__hint { display: flex; align-items: center; gap: 8px; margin-top: -24px; font: 700 15px/1 var(--font-label); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
  .jobs__hint .icon { width: 20px; height: 20px; }
}

/* ---------------------------------------------------------------- job explorer (signature) */
.explorer { padding: var(--section) 0; background: var(--surface); }
.xp__tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.xp__tab { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 124px; padding: 20px 18px; border: 0; background: var(--surface-2); color: var(--ink); text-align: left; }
.xp__tab .icon { position: absolute; top: 22px; right: 18px; width: 28px; height: 28px; opacity: .75; }
.xp__num { font: 400 44px/1 var(--font-display); color: var(--accent); }
.xp__name { margin-top: auto; font: 700 19px/1 var(--font-label); letter-spacing: .04em; text-transform: uppercase; }
.xp__tab--pad, .explorer-pond .xp__tab--pond { background: var(--accent); color: var(--on-accent); }
.xp__tab--pad .xp__num, .explorer-pond .xp__tab--pond .xp__num { color: var(--on-accent); }
.explorer-pond .xp__tab--pad { background: var(--surface-2); color: var(--ink); }
.explorer-pond .xp__tab--pad .xp__num { color: var(--accent); }

.xp__panel { display: none; grid-template-columns: 7fr 5fr; gap: 56px; margin-top: 8px; padding: 44px 48px; background: var(--ground); border-top: 6px solid var(--accent); }
.xp__panel--pad, .explorer-pond .xp__panel--pond { display: grid; }
.explorer-pond .xp__panel--pad { display: none; }
.xp__h { font: 400 56px/.95 var(--font-display); text-transform: uppercase; }
.xp__line { margin-top: 12px; max-width: 600px; font-size: 19px; color: var(--ink-soft); }
.xs { --cut: 24px; margin-top: 32px; padding: 20px 24px 22px; background: var(--surface); }
.xs__cap { margin-bottom: 8px; }
.xs__svg { width: 100%; height: auto; }
.xs__hint { display: none; }
.xs--photo { padding: 0; }
.xs__ph { height: 380px; }
.xs__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.xs__note { padding: 14px 24px 16px; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.xs__svg text { font-family: var(--font-label); font-weight: 700; font-size: 15px; letter-spacing: .08em; fill: var(--ink); }
.xs__svg .small { font-size: 14px; }
.xs__svg .dark { fill: var(--on-light); }
.xs__svg .mute { fill: var(--ink-soft); }
.xs__svg .on-y { fill: var(--on-accent); font-size: 14px; letter-spacing: .05em; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; font: 600 14px/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.legend li { display: flex; align-items: center; gap: 8px; }
.sw { width: 16px; height: 16px; flex: none; }
.sw--grade { height: 4px; background: var(--accent); }
.sw--cut { background: repeating-linear-gradient(45deg, var(--clay) 0 3px, var(--surface-2) 3px 7px); }
.sw--fill { background: #B49A6E; }
.sw--rock { background: #9A9284; }
.sw--th { width: 6px; background: var(--on-accent); box-shadow: 0 0 0 2px var(--ink-mute); }
.sw--water { background: #2E6F7A; }
.sw--core { background: var(--clay-deep); }
.xp__days { margin-top: 36px; }
.days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 18px; border-top: 2px solid var(--line-strong); }
.days li { position: relative; padding-top: 22px; font-size: 16px; line-height: 1.45; color: var(--ink-soft); }
.days li::before { content: ''; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; background: var(--accent); }
.days b { display: block; margin-bottom: 6px; font: 700 18px/1 var(--font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.xp__inc { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; margin-top: 16px; }
.checks li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.checks li::before { content: ''; position: absolute; left: 2px; top: 5px; width: 13px; height: 7px; border-left: 3px solid var(--accent); border-bottom: 3px solid var(--accent); transform: rotate(-45deg); }
.xp__side { display: flex; flex-direction: column; }
.xp__photo { flex: 1 0 400px; }
.xp__photo img { width: 100%; height: 100%; object-fit: cover; }
.xp__facts { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.xp__facts dd { margin-top: 8px; white-space: nowrap; font: 400 min(34px, 2.5vw)/1 var(--font-display); color: var(--accent); letter-spacing: .01em; text-transform: uppercase; }
.xp__units { padding: 28px 0 32px; }
.units { display: grid; gap: 10px; margin-top: 16px; }
.units li { display: flex; align-items: center; gap: 14px; font: 600 18px/1.1 var(--font-label); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.unit { --cut: 8px; display: inline-block; min-width: 64px; padding: 6px 10px 5px; background: var(--accent); color: var(--on-accent); font: 400 19px/1 var(--font-display); letter-spacing: .04em; text-align: center; }
.xp__side .btn { margin-top: 4px; }
.xp__side .note { margin-top: 12px; text-align: center; }

@media (max-width: 1099px) {
  .xp { margin: 0 calc(-1 * var(--gutter)); }
  .xp__tabs { display: flex; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
  .xp__tab { flex: 0 0 152px; min-height: 100px; padding: 16px 16px; scroll-snap-align: start; }
  .xp__panel { margin-inline: var(--gutter); }
  .xp__tab .icon { top: 18px; right: 18px; width: 26px; height: 26px; }
  .xp__num { font-size: 36px; }
  .xp__panel { grid-template-columns: 1fr; gap: 40px; padding: 36px 32px; }
  .xp__h { font-size: 48px; }
  .xp__side { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto 1fr; column-gap: 32px; }
  .xp__photo { grid-row: 1 / -1; height: auto; min-height: 380px; }
  .xp__facts { padding-top: 0; }
  .xp__facts dd { font-size: 30px; }
  .xp__units { padding: 24px 0; }
  .xp__side .btn { align-self: end; }
}

@media (max-width: 699px) {
  .explorer { padding-bottom: 0; }
  .xp__tabs { gap: 6px; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
  .xp__tab { --cut: 12px; flex: 0 0 116px; min-height: 92px; padding: 12px 14px; scroll-snap-align: start; }
  .xp__tab .icon { top: 14px; right: 12px; width: 22px; height: 22px; }
  .xp__num { font-size: 30px; }
  .xp__name { font-size: 16px; }
  .xp__panel { grid-template-columns: minmax(0, 1fr); gap: 32px; margin: 6px 0 0; padding: 28px var(--gutter) 56px; }
  .xp__main, .xp__side { min-width: 0; }
  .xp__h { font-size: 40px; }
  .xp__line { font-size: 17px; }
  .xs { --cut: 0px; margin: 24px calc(-1 * var(--gutter)) 0; padding: 18px 0 18px; }
  .xs__cap, .legend { padding: 0 var(--gutter); }
  .xs__pan { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .xs__svg { width: 620px; max-width: none; direction: ltr; }
  .xs--photo { padding: 0 0 4px; }
  .xs__ph { height: 230px; }
  .xs__note { padding: 12px var(--gutter) 0; }
  .xs__hint { display: flex; align-items: center; gap: 8px; margin: 10px var(--gutter) 0; font: 700 15px/1 var(--font-label); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
  .xs__hint .icon { width: 20px; height: 20px; }
  .legend { gap: 10px 18px; font-size: 15px; }
  .xp__days { margin-top: 32px; }
  .days { grid-template-columns: 1fr; gap: 0; margin-top: 14px; border-top: 0; border-left: 2px solid var(--line-strong); margin-left: 6px; }
  .days li { padding: 0 0 20px 24px; }
  .days li::before { top: 2px; left: -8px; }
  .days b { margin-bottom: 4px; }
  .checks { grid-template-columns: 1fr; gap: 10px; }
  .xp__side { display: flex; }
  .xp__photo { flex: none; min-height: 0; height: 240px; margin: 0 calc(-1 * var(--gutter)); }
  .xp__facts { grid-template-columns: 1fr 1fr; padding-top: 22px; }
  .xp__facts dd { font-size: min(28px, 7.4vw); }
  .units li { font-size: 16px; }
}

/* ---------------------------------------------------------------- rock plan */
.rock { position: relative; background: var(--accent); color: var(--on-accent); overflow: hidden; }
.rock__stripe { height: 20px; background: repeating-linear-gradient(-45deg, var(--on-accent) 0 16px, var(--accent) 16px 32px); }
.rock__in { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; padding-top: 104px; padding-bottom: 104px; }
.rock__title { font: 400 112px/.88 var(--font-display); text-transform: uppercase; letter-spacing: .004em; }
.rock__title span { display: block; }
.rock__lead { max-width: 620px; margin: 28px 0 44px; font-size: 22px; line-height: 1.5; color: var(--soft-on-accent); }
.rules li { display: grid; grid-template-columns: 96px 1fr; align-items: center; padding: 22px 0; border-top: 2px solid var(--on-accent); }
.rules li:last-child { border-bottom: 2px solid var(--on-accent); }
.rules__n { font: 400 52px/1 var(--font-display); }
.rules p { font-size: 19px; line-height: 1.5; color: var(--soft-on-accent); }
.rules b { font-weight: 600; color: var(--on-accent); }
.rock__photo { position: relative; min-height: 640px; margin-right: calc(-1 * max(var(--gutter), (100vw - var(--max)) / 2)); clip-path: polygon(96px 0, 100% 0, 100% 100%, 0 100%); }
.rock__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.rock__stat { --cut: 18px; position: absolute; left: 64px; bottom: 48px; display: flex; flex-direction: column; gap: 6px; padding: 22px 26px 24px; background: var(--ground); color: var(--ink); }
.rock__stat b { font: 400 76px/.9 var(--font-display); color: var(--accent); }
.rock__stat span { max-width: 190px; font: 700 16px/1.2 var(--font-label); letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 1099px) {
  .rock__in { grid-template-columns: 1fr; gap: 48px; padding-top: 88px; padding-bottom: 0; }
  .rock__title { font-size: 96px; }
  .rock__photo { min-height: 500px; margin: 0 calc(-1 * var(--gutter)); clip-path: polygon(0 72px, 100% 0, 100% 100%, 0 100%); }
  .rock__photo img { object-position: 50% 58%; }
  .rock__stat { left: var(--gutter); bottom: 40px; }
}

@media (max-width: 699px) {
  .rock__stripe { height: 14px; }
  .rock__in { gap: 36px; padding-top: 64px; }
  .rock__title { font-size: 60px; line-height: .9; }
  .rock__lead { margin: 20px 0 28px; font-size: 18px; }
  .rules li { grid-template-columns: 56px 1fr; padding: 18px 0; }
  .rules__n { font-size: 38px; }
  .rules p { font-size: 16px; }
  .rock__photo { min-height: 360px; clip-path: polygon(0 48px, 100% 0, 100% 100%, 0 100%); }
  .rock__stat { --cut: 14px; bottom: 24px; padding: 16px 18px 18px; }
  .rock__stat b { font-size: 60px; }
  .rock__stat span { font-size: 14px; max-width: 160px; }
}

/* ---------------------------------------------------------------- prices */
.prices { padding: var(--section) 0; background: var(--limestone); color: var(--on-light); }
.prices .lead { color: var(--soft-on-light); }
.prices__grid { display: grid; gap: 40px; }
.ptable__head, .prow { display: grid; grid-template-columns: 320px 240px 210px minmax(0, 1fr); column-gap: 32px; }
.ptable__more { display: none; }
.ptable__head { padding-bottom: 14px; border-bottom: 3px solid var(--on-light); font: 700 14px/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--soft-on-light); }
.prow { padding: 14px 0; border-bottom: 1px solid var(--line-light); align-items: baseline; }
.prow__job { font: 700 20px/1.15 var(--font-label); letter-spacing: .03em; text-transform: uppercase; }
.prow__job small { display: block; margin-top: 5px; font: 400 14px/1.35 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--soft-on-light); }
.prow__price { font: 400 27px/1.1 var(--font-display); letter-spacing: .01em; }
.prow__time { font: 600 17px/1.3 var(--font-label); letter-spacing: .03em; text-transform: uppercase; color: var(--soft-on-light); }
.prow__inc { font-size: 16px; line-height: 1.45; color: var(--soft-on-light); }
.prices__side { display: grid; grid-template-columns: 8fr 4fr; gap: 8px; }
.howpay { --cut: 24px; padding: 34px 32px 32px; background: var(--ground); color: var(--ink); }
.howpay .h3 { color: var(--accent); }
.howpay__list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 36px; margin-top: 22px; }
.howpay__list li { display: flex; gap: 12px; font-size: 16px; line-height: 1.45; color: var(--ink-soft); }
.howpay__list .icon { margin-top: 2px; width: 18px; height: 18px; color: var(--accent); }
.howpay__list b { font-weight: 600; color: var(--ink); }
.nope { padding: 28px 32px; background: var(--limestone-2); }
.nope p { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--soft-on-light); }
.prices__more { display: flex; flex-direction: column; gap: 8px; }
.nope { flex: 1; }

@media (max-width: 1099px) {
  .ptable__head span:nth-child(4) { display: none; }
  .ptable__head, .prow { grid-template-columns: minmax(0, 1fr) 210px 150px; column-gap: 24px; }
  .prow { grid-template-areas: "job price time" "inc price time"; row-gap: 6px; }
  .prow__job { grid-area: job; }
  .prow__price { grid-area: price; font-size: 25px; }
  .prow__time { grid-area: time; }
  .prow__inc { grid-area: inc; font-size: 15px; }
  .prices__side { grid-template-columns: 1fr; }
  .prices__more { display: grid; grid-template-columns: 1fr auto; }
  .prices__more .btn { height: auto; padding: 0 32px; }
}

@media (max-width: 699px) {
  .ptable__head { display: none; }
  .prow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "job price" "inc inc" "time time"; column-gap: 16px; row-gap: 6px; padding: 16px 0; border-top: 0; }
  .ptable .prow:first-of-type { border-top: 3px solid var(--on-light); }
  .prow__job { font-size: 18px; }
  .prow__job small { font-size: 13px; }
  .prow__price { font-size: 22px; text-align: right; white-space: nowrap; }
  .prow__inc { font-size: 15px; }
  .prow__time { font-size: 15px; color: var(--clay-deep); }
  .prow--more { display: none; }
  .ptable__more { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; margin-top: 16px; border: 0; background: var(--limestone-2); color: var(--on-light); font: 700 16px/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase; }
  .ptable__more .icon { width: 18px; height: 18px; color: var(--clay-deep); }
  .prices__grid { gap: 28px; }
  .howpay { --cut: 16px; padding: 26px 22px; }
  .howpay__list { grid-template-columns: 1fr; gap: 14px; }
  .prices__more { grid-template-columns: 1fr; }
  .nope { padding: 22px; }
  .prices__more .btn { height: 56px; }
}

/* ---------------------------------------------------------------- process */
.process { padding-bottom: var(--section); background: var(--ground); }
.process__photo { position: relative; height: 440px; }
.process__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.process__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(21, 19, 15, .1) 30%, var(--ground) 100%); }
.process__in { position: relative; margin-top: -132px; }
.track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; margin-top: 72px; }
.track::before { content: ''; position: absolute; left: 0; right: 0; top: 63px; height: 6px; background: var(--accent); }
.track__time { height: 28px; font: 700 14px/1.2 var(--font-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.track__n { --cut: 12px; position: relative; display: grid; place-items: center; width: 52px; height: 52px; margin: 12px 0 26px; background: var(--accent); color: var(--on-accent); font: 400 28px/1 var(--font-display); }
.track__step .h3 { margin-bottom: 12px; font-size: 24px; }
.track__step p:last-child { font-size: 16px; line-height: 1.5; color: var(--ink-soft); }

@media (max-width: 1099px) {
  .process__photo { height: 360px; }
  .process__in { margin-top: -116px; }
  .track { grid-template-columns: 1fr; gap: 0; margin-top: 48px; }
  .track::before { left: 23px; right: auto; top: 8px; bottom: 72px; width: 6px; height: auto; }
  .track__step { display: grid; grid-template-columns: 52px 1fr; grid-template-areas: "n time" "n h" "n p"; column-gap: 28px; padding-bottom: 36px; }
  .track__n { grid-area: n; margin: 0; }
  .track__time { grid-area: time; height: auto; margin-bottom: 6px; color: var(--accent); }
  .track__step .h3 { grid-area: h; margin-bottom: 8px; }
  .track__step p:last-child { grid-area: p; max-width: 560px; }
}

@media (max-width: 699px) {
  .process__photo { height: 260px; }
  .process__in { margin-top: -84px; }
  .process__head .h2 { font-size: calc((100vw - 40px) / 8.3); }
  .track { margin-top: 36px; }
  .track::before { left: 21px; }
  .track__step { grid-template-columns: 48px 1fr; column-gap: 18px; padding-bottom: 28px; }
  .track__n { width: 48px; height: 48px; font-size: 24px; }
  .track__step .h3 { font-size: 20px; }
  .track__time { font-size: 15px; }
  .track__step p:last-child { font-size: 15px; }
}

/* ---------------------------------------------------------------- crew and fleet */
.crew { padding: var(--section) 0; background: var(--ground); }
.crew__top { display: grid; grid-template-columns: 6fr 6fr; gap: 72px; align-items: start; }
.crew__photo { --cut: 32px; position: relative; height: 700px; }
.crew__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 100%; }
.crew__tag { position: absolute; left: 0; bottom: 0; padding: 12px 16px; background: var(--accent); color: var(--on-accent); font: 700 15px/1 var(--font-label); letter-spacing: .1em; text-transform: uppercase; }
.crew__story { padding-top: 8px; }
.crew__p { margin-top: 36px; font-size: 19px; line-height: 1.6; color: var(--ink-soft); max-width: 640px; }
.crew__quote { margin-top: 40px; padding-left: 28px; border-left: 6px solid var(--accent); }
.crew__quote p { font: 400 42px/1.02 var(--font-display); text-transform: uppercase; color: var(--ink); }
.crew__quote footer { margin-top: 16px; font: 700 15px/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 40px; }
.chips li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: var(--surface); font-size: 16px; line-height: 1.4; color: var(--ink-soft); }
.chips .icon { color: var(--accent); width: 20px; height: 20px; }
.fleet { margin-top: 88px; padding-top: 48px; border-top: 3px solid var(--ink); }
.fleet__head { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: end; }
.fleet__title { font: 400 72px/.9 var(--font-display); text-transform: uppercase; }
.fleet__head p { max-width: 640px; font-size: 19px; color: var(--ink-soft); }
.fleet__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 44px; }
.tag { --cut: 20px; display: flex; flex-direction: column; gap: 6px; min-height: 172px; padding: 22px 22px 24px; background: var(--surface); border-top: 4px solid var(--accent); }
.tag__unit { margin-bottom: auto; font: 400 44px/1 var(--font-display); color: var(--accent); letter-spacing: .02em; }
.tag b { margin-top: 18px; font: 700 20px/1.1 var(--font-label); letter-spacing: .04em; text-transform: uppercase; }
.tag span:last-child { font-size: 15px; line-height: 1.35; color: var(--ink-mute); }

@media (max-width: 1099px) {
  .crew__top { grid-template-columns: 1fr; gap: 48px; }
  .crew__photo { height: 520px; }
  .crew__photo img { object-position: 40% 58%; }
  .crew__story { padding-top: 0; }
  .fleet { margin-top: 72px; }
  .fleet__head { grid-template-columns: 1fr; gap: 16px; }
  .fleet__title { font-size: 64px; }
  .fleet__grid { grid-template-columns: 1fr 1fr; }
  .tag { --cut: 16px; display: grid; grid-template-columns: 92px 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; min-height: 0; padding: 18px 20px; align-items: center; }
  .tag__unit { grid-row: 1 / 3; margin: 0; font-size: 40px; }
  .tag b { margin-top: 0; align-self: end; }
  .tag span:last-child { align-self: start; }
}

@media (max-width: 699px) {
  .crew__top { gap: 36px; }
  .crew__photo { --cut: 0px; height: 400px; margin: 0 calc(-1 * var(--gutter)); }
  .crew__photo img { object-position: 40% 88%; }
  .crew__p { margin-top: 24px; font-size: 17px; }
  .crew__quote { margin-top: 28px; padding-left: 18px; border-left-width: 5px; }
  .crew__quote p { font-size: 30px; }
  .chips { grid-template-columns: 1fr; margin-top: 28px; gap: 8px; }
  .chips li { font-size: 15px; padding: 14px 16px; }
  .fleet { margin-top: 56px; padding-top: 36px; }
  .fleet__title { font-size: 52px; }
  .fleet__head p { font-size: 16px; }
  .fleet__grid { display: flex; gap: 8px; margin: 28px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
  .tag { flex: 0 0 168px; display: flex; min-height: 168px; padding: 18px; scroll-snap-align: start; }
  .tag__unit { margin-bottom: auto; font-size: 40px; }
  .tag b { margin-top: 14px; font-size: 17px; }
  .tag span:last-child { font-size: 14px; }
}

/* ---------------------------------------------------------------- reviews */
.reviews { padding: var(--section) 0; background: var(--surface); }
.score { display: grid; grid-template-columns: auto auto 1fr; align-items: end; gap: 40px; padding-bottom: 44px; margin-bottom: 44px; border-bottom: 3px solid var(--ink); }
.score__num { font: 400 236px/.76 var(--font-display); color: var(--accent); letter-spacing: -.01em; }
.score__info { padding-bottom: 4px; }
.score__stars { display: flex; gap: 4px; color: var(--accent); }
.score__stars .icon { width: 28px; height: 28px; }
.score__meta { margin-top: 12px; font: 600 19px/1.35 var(--font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.score__head { padding-left: 40px; border-left: 1px solid var(--line-strong); }
.score__head .h2 { font-size: 80px; }
.score__link { margin-top: 24px; }
.rv { columns: 4; column-gap: 16px; }
.rv__item { --cut: 18px; break-inside: avoid; margin-bottom: 16px; padding: 26px 24px 24px; background: var(--ground); border-top: 4px solid var(--accent); }
.rv__item blockquote { font-size: 17px; line-height: 1.55; color: var(--ink); }
.rv__item:first-child blockquote { font: 400 30px/1.05 var(--font-display); text-transform: uppercase; }
.rv__item figcaption { display: grid; gap: 4px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.rv__item figcaption b { font: 700 18px/1.1 var(--font-label); letter-spacing: .05em; text-transform: uppercase; }
.rv__item figcaption span { font-size: 14px; line-height: 1.4; color: var(--ink-mute); }

@media (max-width: 1099px) {
  .score { grid-template-columns: auto 1fr; gap: 28px 36px; }
  .score__head { grid-column: 1 / -1; order: -1; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0 32px; padding-left: 0; border-left: 0; }
  .score__head .eyebrow { flex-basis: 100%; }
  .score__link { margin: 0 0 10px; }
  .score__head .h2 { font-size: 76px; }
  .score__num { font-size: 190px; }
  .rv { columns: 2; }
}

@media (max-width: 699px) {
  .score { grid-template-columns: auto 1fr; gap: 20px 20px; padding-bottom: 28px; margin-bottom: 28px; }
  .score__head { display: block; }
  .score__head .h2 { font-size: 56px; }
  .score__link { margin-top: 18px; }
  .score__num { font-size: 120px; }
  .score__stars .icon { width: 22px; height: 22px; }
  .score__meta { font-size: 15px; }
  .rv { display: flex; gap: 10px; columns: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; align-items: stretch; }
  .rv__item { flex: 0 0 82%; display: flex; flex-direction: column; margin: 0; scroll-snap-align: start; }
  .rv__item figcaption { margin-top: auto; padding-top: 14px; }
  .rv__item blockquote { margin-bottom: 20px; font-size: 16px; }
  .rv__item:first-child blockquote { font-size: 26px; }
}

/* ---------------------------------------------------------------- service area */
.area { padding: var(--section) 0; background: var(--ground); }
.area__head { margin-bottom: 56px; }
.area__in { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; }
.map__svg { width: 100%; height: auto; }
.map__region text { font: 700 13px var(--font-label); letter-spacing: .32em; fill: #6F685D; }
.map__road text { font: 700 13px var(--font-label); letter-spacing: .08em; fill: var(--ink-mute); }
.map__towns circle { fill: var(--ink); }
.map__towns .out { fill: var(--ground); stroke: var(--ink-soft); stroke-width: 2.5; }
.map__towns text { font: 600 15px var(--font-body); fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; }
.map__towns text.l { text-anchor: end; }
.map__towns text.m { text-anchor: middle; }
.map__yard text { font: 700 13px var(--font-label); letter-spacing: .14em; fill: var(--on-accent); }
.legend--map { margin-top: 18px; }
.sw--yard { background: var(--accent); }
.sw--free { background: rgba(255, 194, 14, .18); box-shadow: inset 0 0 0 3px var(--accent); }
.sw--svc { background: none; box-shadow: inset 0 0 0 2px var(--ink-soft); }
.area__p { font-size: 20px; line-height: 1.5; color: var(--ink-soft); }
.map__lake { opacity: .75; }
.states { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 32px; margin-top: 32px; }
.state--ar { grid-column: 1 / -1; }
.state__k { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); font: 400 30px/1 var(--font-display); letter-spacing: .01em; text-transform: uppercase; }
.state__k span { font: 700 14px/1 var(--font-label); letter-spacing: .12em; color: var(--accent); }
.state__towns { columns: 2; column-gap: 20px; }
.state--ar .state__towns { columns: 3; column-gap: 24px; }
.state__towns li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 17px; break-inside: avoid; }
.area__actions { display: flex; align-items: center; gap: 20px; margin-top: 28px; }
.area__actions .note { max-width: 260px; }

@media (max-width: 1099px) {
  .area__head { margin-bottom: 44px; }
  .area__in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 699px) {
  .area__head { margin-bottom: 28px; }
  .area__head .h2 { font-size: 46px; }
  .area__in { gap: 28px; }
  .map { min-width: 0; margin: 0 calc(-1 * var(--gutter)); }
  .map__pan { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .map__svg { width: 600px; max-width: none; }
  .legend--map { padding: 0 var(--gutter); }
  .area__p { font-size: 17px; }
  .states { gap: 24px 20px; margin-top: 24px; }
  .state__k { font-size: 26px; }
  .state__k span { font-size: 15px; letter-spacing: .08em; }
  .state__towns { columns: 1; }
  .state--ar .state__towns { columns: 2; column-gap: 20px; }
  .state__towns li { padding: 9px 0; font-size: 16px; }
  .area__actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .area__actions .btn { height: 52px; }
  .area__actions .note { max-width: none; }
}

/* ---------------------------------------------------------------- FAQ */
.faq { padding: var(--section) 0; background: var(--limestone); color: var(--on-light); }
.faq__in { display: grid; grid-template-columns: 4fr 8fr; gap: 72px; align-items: start; }
.faq .eyebrow { color: var(--clay-deep); }
.faq__groups { margin-top: 40px; border-top: 2px solid var(--on-light); }
.faq__groups li { padding: 12px 0; border-bottom: 1px solid var(--line-light); font: 700 18px/1.2 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--soft-on-light); }
.askbox { --cut: 20px; margin-top: 40px; padding: 28px 28px 26px; background: var(--on-light); color: var(--limestone); }
.askbox__k { font: 700 14px/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.askbox p { font-size: 17px; }
.askbox__k + p { margin-top: 10px; }
.askbox__tel { display: block; margin: 6px 0 6px; font: 400 40px/1.1 var(--font-display); color: var(--ink); text-decoration: none; letter-spacing: .01em; }
.askbox__h { font-size: 15px !important; color: var(--ink-mute); }
.qgroup + .qgroup { margin-top: 44px; }
.qgroup__k { padding-bottom: 12px; border-bottom: 3px solid var(--on-light); font: 400 30px/1 var(--font-display); text-transform: uppercase; color: var(--clay-deep); letter-spacing: .01em; }
.q { border-bottom: 1px solid var(--line-light); }
.q summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; list-style: none; cursor: pointer; font: 700 23px/1.2 var(--font-label); letter-spacing: .03em; text-transform: uppercase; }
.q summary::-webkit-details-marker { display: none; }
.q__ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; background: var(--on-light); color: var(--accent); }
.q__ic .icon { width: 20px; height: 20px; }
.q[open] .q__ic { background: var(--accent); color: var(--on-accent); }
.q[open] .q__ic .icon { transform: rotate(45deg); }
.q:not([open]) > p { display: none; }
.q p { max-width: 680px; padding: 0 0 24px; font-size: 18px; line-height: 1.6; color: var(--soft-on-light); }

@media (max-width: 1099px) {
  .faq__in { grid-template-columns: 1fr; gap: 48px; }
  .faq__side { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; align-items: end; }
  .faq__side .eyebrow, .faq__side .h2 { grid-column: 1; }
  .faq__groups { display: none; }
  .askbox { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
}

@media (max-width: 699px) {
  .faq__side { display: block; }
  .faq__in { gap: 32px; }
  .faq__side .h2 { font-size: 60px; }
  .askbox { margin-top: 32px; }
  .faq__list { display: flex; flex-direction: column; }
  .qgroup + .qgroup { margin-top: 32px; }
  .qgroup__k { font-size: 24px; }
  .q summary { padding: 16px 0; gap: 16px; font-size: 19px; }
  .q__ic { width: 36px; height: 36px; }
  .q p { padding-bottom: 20px; font-size: 16px; }
}

/* ---------------------------------------------------------------- quote flow and its states
   .quote-step-2 and .quote-sent are classes on .site; show the matching step, hide the others. */
.quote { padding: var(--section) 0; background: var(--ground); }
.quote__in { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }
.quote__side .lead { margin-top: 28px; }
.next { display: grid; gap: 14px; margin-top: 36px; }
.next li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: center; font-size: 18px; color: var(--ink); }
.next span { display: grid; place-items: center; width: 40px; height: 40px; background: var(--surface-2); color: var(--accent); font: 400 20px/1 var(--font-display); }
.quote__talk { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.quote__tel { display: block; margin: 10px 0 6px; font: 400 52px/1 var(--font-display); color: var(--ink); text-decoration: none; letter-spacing: .01em; }
.quote__talk p:last-child { font-size: 16px; color: var(--ink-mute); }

.wiz { --cut: 36px; position: relative; padding: 52px 48px 36px; background: var(--surface-2); }
.wiz__stripe { position: absolute; top: 0; left: 0; right: 0; height: 12px; background: repeating-linear-gradient(-45deg, var(--accent) 0 14px, var(--on-accent) 14px 28px); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 40px; }
.steps__s { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 4px solid var(--line-strong); font: 700 16px/1 var(--font-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.steps__s span { display: grid; place-items: center; width: 30px; height: 30px; background: var(--surface); color: var(--ink-mute); font: 400 16px/1 var(--font-display); }
.steps__s--1, .quote-step-2 .steps__s--2 { border-color: var(--accent); color: var(--ink); }
.steps__s--1 span, .quote-step-2 .steps__s--2 span { background: var(--accent); color: var(--on-accent); }
.quote-step-2 .steps__s--1 span { background: none; box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); }
.quote-sent .steps__s { border-color: var(--accent); color: var(--ink); }
.quote-sent .steps__s span { background: none; box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); }

.wiz__step { display: none; }
.wiz__step--1, .quote-step-2 .wiz__step--2 { display: block; }
.quote-step-2 .wiz__step--1, .quote-sent .wiz__step--1 { display: none; }
.wiz__step fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.wiz__step legend { padding: 0; }
.wiz__h { font: 400 46px/1 var(--font-display); text-transform: uppercase; }
.wiz__hint { margin-top: 8px; font-size: 16px; color: var(--ink-mute); }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 26px; }
.tile { --cut: 14px; position: relative; display: flex; flex-direction: column; gap: 16px; min-height: 132px; padding: 20px 18px 18px; background: var(--surface); cursor: pointer; font: 700 18px/1.1 var(--font-label); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.tile input { position: absolute; opacity: 0; pointer-events: none; }
.tile .icon { width: 34px; height: 34px; color: var(--accent); }
.tile span { margin-top: auto; }
.tile.is-selected { background: var(--accent); color: var(--on-accent); }
.tile.is-selected .icon { color: var(--on-accent); }
.tile.is-selected::after { content: ''; position: absolute; top: 22px; right: 22px; width: 14px; height: 8px; border-left: 3px solid var(--on-accent); border-bottom: 3px solid var(--on-accent); transform: rotate(-45deg); }
.tile.is-hover { box-shadow: inset 0 0 0 2px var(--accent); }
.wiz__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line-strong); }
.wiz__count { font: 700 14px/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.wiz__step--2 .wiz__h { margin-bottom: 26px; }
.seg { display: grid; grid-template-columns: 168px 1fr; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.seg__k { font: 700 16px/1.2 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.seg__opts { display: flex; flex-wrap: wrap; gap: 4px; }
.seg__opts label { position: relative; padding: 12px 13px; background: var(--surface); cursor: pointer; font: 600 15px/1 var(--font-body); color: var(--ink); white-space: nowrap; }
.seg__opts input { position: absolute; opacity: 0; pointer-events: none; }
.seg__opts .is-on { background: var(--accent); color: var(--on-accent); }
.field { margin-top: 20px; }
.field__k { display: block; margin-bottom: 8px; font: 700 16px/1.2 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.field__k span { margin-left: 6px; color: var(--ink-mute); font-weight: 600; letter-spacing: .04em; }
.input { display: block; width: 100%; height: 56px; padding: 0 16px; background: var(--ground); border: 2px solid var(--line-strong); border-radius: 0; color: var(--ink); font-size: 17px; }
.input::placeholder { color: var(--ink-mute); }
.input:focus, .input.is-focus { outline: none; border-color: var(--accent); }
.input.is-error { border-color: var(--clay); }
.input--area { height: auto; min-height: 84px; padding: 14px 16px; resize: vertical; line-height: 1.5; }
.field__err { margin-top: 6px; font-size: 15px; color: #E08A62; }
.wiz__foot .btn--ghost { height: 56px; padding: 0 20px; }

.wiz__sent { display: none; }
.quote-sent .wiz__sent { display: block; }
.sent__mark { --cut: 14px; display: grid; place-items: center; width: 76px; height: 76px; background: var(--accent); color: var(--on-accent); }
.sent__mark .icon { width: 40px; height: 40px; }
.wiz__sent .wiz__h { margin-top: 28px; }
.sent__p { margin-top: 12px; font-size: 20px; color: var(--ink-soft); }
.sent__steps { margin: 32px 0 24px; border-top: 2px solid var(--line-strong); }
.sent__steps li { display: grid; grid-template-columns: 240px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.sent__steps b { font: 700 17px/1.3 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.sent__steps span { font-size: 17px; color: var(--ink); }
.wiz__assure { display: flex; align-items: center; gap: 10px; margin-top: 24px; font-size: 15px; color: var(--ink-mute); }
.wiz__assure .icon { color: var(--accent); }
.quote-sent .wiz__assure { display: none; }

@media (max-width: 1099px) {
  .quote__in { grid-template-columns: 1fr; gap: 48px; }
  .quote__side { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; align-items: start; }
  .quote__side .eyebrow, .quote__side .h2, .quote__side .lead { grid-column: 1; }
  .next { grid-column: 2; grid-row: 1 / 4; margin-top: 0; align-self: end; }
  .quote__talk { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-top: 36px; }
  .quote__tel { margin: 0; font-size: 44px; }
  .wiz { --cut: 28px; padding: 44px 32px 32px; }
  .seg { grid-template-columns: 170px 1fr; }
}

@media (max-width: 699px) {
  .quote__in { gap: 32px; }
  .quote__side { display: block; }
  .quote__side .lead { margin-top: 18px; }
  .next { margin-top: 24px; gap: 10px; }
  .next li { grid-template-columns: 32px 1fr; gap: 12px; font-size: 16px; }
  .next span { width: 32px; height: 32px; font-size: 17px; }
  .quote__talk { display: block; margin-top: 28px; padding-top: 20px; }
  .quote__tel { margin: 4px 0 0; padding: 4px 0; font-size: 40px; }
  .wiz { --cut: 22px; margin: 0 calc(-1 * var(--gutter)); padding: 34px var(--gutter) 26px; }
  .wiz__stripe { height: 10px; }
  .steps { gap: 4px; margin-bottom: 28px; }
  .steps__s { flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 10px; font-size: 15px; letter-spacing: .04em; }
  .steps__s span { width: 26px; height: 26px; font-size: 14px; }
  .wiz__h { font-size: 36px; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
  .tile { --cut: 12px; min-height: 104px; padding: 16px 14px 14px; gap: 10px; font-size: 16px; }
  .tile .icon { width: 28px; height: 28px; }
  .tile.is-selected::after { top: 18px; right: 18px; }
  .wiz__foot { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 24px; padding-top: 20px; }
  .wiz__foot .btn--big { order: -1; width: 100%; }
  .wiz__count { text-align: center; font-size: 15px; }
  .wiz__step--2 .wiz__foot .btn--ghost { order: 2; }
  .seg { grid-template-columns: 1fr; gap: 10px; padding: 14px 0; }
  .seg__opts label { flex: 1 0 auto; text-align: center; padding: 15px 12px; font-size: 16px; }
  .seg--4 .seg__opts { display: grid; grid-template-columns: 1fr 1fr; }
  .input--area { min-height: 104px; }
  .input { height: 54px; font-size: 16px; }
  .sent__steps li { grid-template-columns: 1fr; gap: 4px; }
  .sent__p { font-size: 17px; }
  .wiz__assure { align-items: flex-start; font-size: 15px; }
}

/* ---------------------------------------------------------------- footer
   On phones, add bottom padding at least as tall as the sticky action bar. */
.site-footer { padding-bottom: 44px; background: var(--deep); color: var(--ink-soft); }
.strata { display: grid; grid-template-rows: repeat(4, 10px); }
.strata span:nth-child(1) { background: #4A3A2A; }
.strata span:nth-child(2) { background: var(--clay); }
.strata span:nth-child(3) { background: #8D8578; }
.strata span:nth-child(4) { background: #CFC6B4; }
.foot__word { padding-top: .08em; margin: 60px 0 64px; font: 400 min(326px, calc((100vw - 2 * var(--gutter)) / 3.84))/.8 var(--font-display); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; color: var(--clay); background: linear-gradient(to bottom, #4A3A2A 0 24%, var(--clay) 24% 54%, #8D8578 54% 78%, #CFC6B4 78%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.foot__grid { display: grid; grid-template-columns: 4fr 2.2fr 2.6fr 3.2fr; gap: 48px; }
.logo--foot { margin-bottom: 22px; color: var(--ink); }
.foot__col p { font-size: 16px; line-height: 1.55; }
.foot__col p + p { margin-top: 14px; }
.foot__k { margin-bottom: 16px; font: 700 14px/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.foot__col ul { font-size: 16px; line-height: 1.95; }
.foot__towns { columns: 2; column-gap: 24px; }
.foot__tel { display: block; padding: 4px 0; margin-top: 20px; font: 400 40px/1 var(--font-display); color: var(--ink); text-decoration: none; letter-spacing: .01em; }
.foot__small { margin-top: 10px !important; font-size: 15px !important; color: var(--ink-mute); }
.foot__small a { color: var(--ink-soft); }
.foot__base { display: grid; gap: 10px; margin-top: 72px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-mute); }
.foot__base p:first-child { color: var(--ink-soft); }
.foot__legal { display: flex; gap: 22px; }
.foot__legal a { display: inline-block; min-width: 44px; padding: 11px 0; color: var(--ink-soft); }
.demo-note { font-size: 13px; }

@media (max-width: 1099px) {
  .foot__word { margin: 56px 0 48px; }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
}

@media (max-width: 699px) {
  .site-footer { padding-bottom: 112px; }
  .strata { grid-template-rows: repeat(4, 7px); }
  .foot__word { margin: 32px 0 36px; font-size: calc((100vw - 2 * var(--gutter)) / 3.84); }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .foot__col--main, .foot__col:last-child { grid-column: 1 / -1; }
  .foot__towns { columns: 2; column-gap: 16px; }
  .foot__col ul { font-size: 15px; line-height: 1.9; }
  .foot__tel { font-size: 36px; }
  .foot__base { margin-top: 40px; font-size: 15px; }
  .demo-note { font-size: 15px; }
  .foot__legal { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------- fixed extras: sticky action bar, menu overlay
   The menu overlay shows when .site has .is-menu-open. */
.mobile-bar { display: none; }
.menu { display: none; position: fixed; }
.is-menu-open .menu { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; padding: 0 var(--gutter) 32px; background: var(--ground); overflow: auto; }
.menu__top { display: flex; justify-content: space-between; align-items: center; height: 76px; margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); border-bottom: 1px solid var(--line); }
.menu__close { display: grid; place-items: center; align-self: stretch; width: 76px; border: 0; background: var(--accent); color: var(--on-accent); }
.menu__close .icon { width: 30px; height: 30px; }
.menu__list { margin-top: 12px; }
.menu__list a { display: flex; align-items: baseline; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line); font: 400 40px/1 var(--font-display); text-transform: uppercase; text-decoration: none; letter-spacing: .01em; }
.menu__list span { width: 26px; font: 700 14px/1 var(--font-label); letter-spacing: .12em; color: var(--accent); }
.menu__actions { display: grid; gap: 10px; margin-top: 28px; }
.menu__foot { margin-top: auto; padding-top: 28px; font: 600 15px/1.5 var(--font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 699px) {
  .mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; padding: 10px 12px 14px; background: rgba(14, 12, 9, .96); border-top: 1px solid var(--line-strong); }
  .mobile-bar a { display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; font: 700 18px/1 var(--font-label); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
  .mobile-bar .icon { width: 22px; height: 22px; }
  .mobile-bar__call { background: var(--surface-2); color: var(--ink); }
  .mobile-bar__call .icon { color: var(--accent); }
  .mobile-bar__bid { background: var(--accent); color: var(--on-accent); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
  .is-menu-open .mobile-bar { display: none; }
}
@media (max-width: 1099px) {
  .is-menu-open .menu { left: auto; width: 460px; box-shadow: 0 0 0 100vmax rgba(11, 10, 8, .72); border-left: 6px solid var(--accent); }
}
@media (max-width: 699px) {
  .is-menu-open .menu { left: 0; width: auto; border-left: 0; box-shadow: none; padding-bottom: 24px; }
  .menu__top { height: 64px; }
  .menu__close { width: 64px; }
  .menu__list { margin-top: 4px; }
  .menu__list a { padding: 13px 0; font-size: 34px; }
  .menu__actions { margin-top: 22px; }
  .menu__actions .btn { height: 58px; }
}

/* ---------------------------------------------------------------- brand sheet only (brand.html) */
.btn.is-disabled { opacity: .4; pointer-events: none; }
.sheet .sh { padding: 88px 0; border-bottom: 1px solid var(--line); }
.sheet .sh--alt { background: var(--surface); }
.sh-faq { color: var(--on-light); }
.sh-faq .q summary { color: var(--on-light); }
.sh__head { max-width: 900px; margin-bottom: 56px; }
.sh__title { font: 400 120px/.88 var(--font-display); text-transform: uppercase; margin-bottom: 24px; }
.sh__h2 { margin-bottom: 40px; font: 400 64px/.9 var(--font-display); text-transform: uppercase; }
.sh-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sh-logo, .sh-marks { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 220px; padding: 36px 32px 24px; background: var(--surface); }
.sh-logo .logo { margin: 0; }
.sh-logo--yellow { background: var(--accent); }
.sh-logo--yellow .logo__word b, .sh-logo--yellow .logo__word small, .sh-logo--yellow .lbl { color: var(--on-accent); }
.sh-logo--light { background: var(--limestone); }
.sh-logo--light .logo__word b { color: var(--on-light); }
.sh-logo--light .logo__word small, .sh-logo--light .lbl { color: var(--soft-on-light); }
.sh-marks__row { display: flex; align-items: flex-end; gap: 24px; }
.sh-word { margin: 56px 0 16px; }
.sh-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 20px; }
.sh-swatches li { display: grid; gap: 4px; font-size: 15px; color: var(--ink-soft); }
.sh-swatches b { font: 700 17px/1.2 var(--font-label); letter-spacing: .04em; color: var(--ink); }
.sh-swatches code { font: 600 15px/1 var(--font-label); letter-spacing: .08em; color: var(--accent); }
.sh-sw { display: block; height: 88px; margin-bottom: 10px; }
.sh-sw--edge { box-shadow: inset 0 0 0 1px var(--line-strong); }
.sh-strata { margin-top: 48px; }
.sh-strata .note { margin-top: 14px; }
.sh-type { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 48px; }
.sh-type__fam { padding: 28px; background: var(--ground); }
.sh-type__big { margin-bottom: 12px; font-size: 64px; line-height: 1; }
.sh-type__big--anton { font-family: var(--font-display); text-transform: uppercase; }
.sh-type__big--barlow { font-family: var(--font-body); font-weight: 500; }
.sh-type__big--cond { font-family: var(--font-label); font-weight: 700; text-transform: uppercase; }
.sh-scale li { display: grid; grid-template-columns: 220px 1fr; align-items: baseline; gap: 32px; padding: 22px 0; border-top: 1px solid var(--line); }
.sh-h1 { font: 400 120px/.86 var(--font-display); text-transform: uppercase; }
.sh-num { font: 400 96px/1 var(--font-display); color: var(--accent); }
.sh-scale .eyebrow { margin: 0; }
.sh-grid { display: grid; gap: 28px 24px; margin-bottom: 48px; }
.sh-grid--btns { grid-template-columns: repeat(4, auto); justify-content: start; align-items: end; }
.sh-grid--btns .lbl { margin-bottom: 12px; }
.sh-light { padding: 20px; background: var(--limestone); }
.sh-light .lbl { color: var(--soft-on-light); }
.sh-grid--fields { grid-template-columns: repeat(4, 1fr); align-items: start; }
.sh-grid--fields .field { margin: 0; }
.sh-grid--choice { grid-template-columns: 1fr 1fr; align-items: start; }
.sh-grid--choice .seg { border-bottom: 0; }
.sh-tiles { margin-top: 0; }
.sh-comp { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; }
.sh-comp__col > .lbl { margin: 32px 0 14px; }
.sh-comp__col > .lbl:first-child { margin-top: 0; }
.sh-tabs { grid-template-columns: 1fr 1fr; }
.sh-jobs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sh-fleet { display: grid; grid-template-columns: 240px; }
.sh-stat { position: static; display: inline-flex; }
.sh-reviews { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sh-reviews .rv__item { margin: 0; }
.sh-reviews .q summary { font-size: 19px; }
.sh-bar { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; width: 390px; padding: 10px 12px 14px; background: var(--deep); border-top: 1px solid var(--line-strong); }
.sh-bar a { display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; font: 700 18px/1 var(--font-label); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.sh-bar .icon { width: 22px; height: 22px; }
.sh-bar .mobile-bar__call { background: var(--surface-2); color: var(--ink); }
.sh-bar .mobile-bar__call .icon { color: var(--accent); }
.sh-bar .mobile-bar__bid { background: var(--accent); color: var(--on-accent); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.sh-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sh-photo { height: 300px; overflow: hidden; }
.sh-photo img { width: 100%; height: 100%; object-fit: cover; }
.sh-photo--cut { clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%); }
.sh-photos figcaption { margin-top: 12px; }
.sh-icons { margin-top: 48px; }
.sh-icons ul { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 16px; }
.sh-icons li { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--ground); font: 600 15px/1 var(--font-label); letter-spacing: .04em; color: var(--ink-soft); }
.sh-icons .icon { width: 28px; height: 28px; color: var(--accent); }
.sh-motif { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; align-items: end; }
.sh-motif .lbl { margin-top: 12px; }
.sh-cut { height: 80px; background: var(--accent); clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
.sh-space { display: flex; align-items: flex-end; gap: 8px; height: 80px; }
.sh-space li { height: 100%; background: var(--accent); }


/* ---- build: states and polish not drawn in the design (demo-site-build) ---- */

/* Until Anton arrives, Impact stands in. It runs 5–9% wider, so "We get the ground" took a third line
   at 1440 and the hero jumped 160px when Anton swapped in (desktop layout shift was 0.061). Shrunk to
   Anton's width it wraps the same, and Anton's ascent and descent (1.18 and 0.33 em) keep every
   baseline where it will be. */
@font-face { font-family: "Anton Fallback"; src: local("Impact"); size-adjust: 93%; ascent-override: 127%; descent-override: 35.5%; line-gap-override: 0%; }
:root { --font-display: 'Anton', 'Anton Fallback', 'Impact', system-ui, sans-serif; }

/* The sticky header (production.md §4). The utility row (38px and its 1px rule) scrolls away and the
   main bar stays; phones hide the utility row, so the whole 64px bar stays. */
.site-header { position: sticky; top: -39px; z-index: 30; }
.is-stuck .site-header { box-shadow: 0 14px 24px -12px rgba(0, 0, 0, .75); }
@media (max-width: 699px) { .site-header { top: 0; } }
[id] { scroll-margin-top: var(--hdr-h, 85px); }
/* Tabbing to a control the sticky header covers brings it out from under the header; on phones the
   M1 bar covers the bottom 80px, so focus stops above it too. Only in main: the header's own controls
   and the menu's sit at the top of the screen, and a margin there scrolled the page up by it each
   time the menu moved focus. */
:where(.site main) :is(a[href], button, input, select, textarea, summary) { scroll-margin-top: calc(var(--hdr-h, 85px) + 16px); }
@media (max-width: 699px) { :where(.site main) :is(a[href], button, input, select, textarea, summary) { scroll-margin-bottom: 96px; } }
/* The hidden inputs cover their tile or option, so those margins are measured from the box people see. */
.tile input, .seg__opts input { inset: 0; width: 100%; height: 100%; margin: 0; }

/* Focus: the brand sheet's 3px bone outline with a 3px gap; ink on the limestone bands. Controls with
   the blade-cut corner clip anything drawn outside them (the brand sheet's "Primary · focus" button
   shows no ring), so on those the ring sits just inside the edge: dark on yellow, bone on dark. */
:where(.site) :is(a, button, summary):focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
:where(.prices, .faq) :is(a, button, summary):focus-visible { outline-color: var(--on-light); }
:where(.site) :is(.btn--yellow, .btn--ghost, .btn--dark, .xp__tab, .mobile-bar a, .phone-block, .hdr-call, .hdr-menu, .menu__close):focus-visible { outline-offset: -7px; }
:where(.site) :is(.btn--yellow, .phone-block, .hdr-call, .menu__close, .mobile-bar__bid):focus-visible { outline-color: var(--on-accent); }
.explorer-pond .xp__tab--pond:focus-visible, .xp__tab--pad:focus-visible, :is(.explorer-sub .xp__tab--sub, .explorer-drive .xp__tab--drive, .explorer-clear .xp__tab--clear, .explorer-septic .xp__tab--septic, .explorer-demo .xp__tab--demo):focus-visible { outline-color: var(--on-accent); }
:is(.explorer-sub, .explorer-drive, .explorer-clear, .explorer-pond, .explorer-septic, .explorer-demo) .xp__tab--pad:focus-visible { outline-color: var(--ink); }
.btn--dark:focus-visible { outline-color: var(--accent); }
.tile:has(input:focus-visible), .seg__opts label:has(input:focus-visible) { box-shadow: inset 0 0 0 3px var(--ink); }
/* On a picked (yellow) tile or option the dark ring sits a few pixels in, with yellow outside it, so
   it doesn't read as the dark card's edge. */
.tile.is-selected:has(input:focus-visible) { box-shadow: inset 0 0 0 5px var(--accent), inset 0 0 0 8px var(--on-accent); }
.seg__opts label.is-on:has(input:focus-visible) { box-shadow: inset 0 0 0 3px var(--accent), inset 0 0 0 6px var(--on-accent); }
/* Tiles, options and the checkbox show their own picked state; the browser's grey tap flash over the
   yellow read as olive. */
.tile, .seg__opts label, .optin { -webkit-tap-highlight-color: transparent; }
.optin:has(input:focus-visible) .optin__box { outline: 3px solid var(--ink); outline-offset: 3px; }
.input:focus-visible { outline: none; }
:where(.jobs, .rv, .fleet__grid, .proof, .xs__pan, .map__pan):focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
/* Headings the page moves focus to (form steps, the thanks) are reading points, not controls. */
:where(.site) [tabindex="-1"]:focus { outline: none; }

/* Hover, where the design didn't draw one. Each keeps its words and icon readable on its own ground. */
@media (hover: hover) {
  .nav a:hover, .menu__list a:hover { color: var(--accent); }
  .btn--line:hover { box-shadow: inset 0 0 0 2px var(--accent); }
  .btn--ghost:hover, .hero__actions .btn--ghost:hover { background: rgba(242, 237, 228, .2); }
  .btn--dark:hover { background: #3A352C; }
  .phone-block:hover, .hdr-call:hover, .menu__close:hover, .mobile-bar__bid:hover { background: #FFD24D; }
  .hdr-menu:hover, .mobile-bar__call:hover { background: #3A352C; }
  .xp__tab:not([aria-selected="true"]):hover { background: #3A352C; }
  .tile:not(.is-selected):hover { box-shadow: inset 0 0 0 2px var(--accent); }
  .seg__opts label:not(.is-on):hover { background: #3A352C; }
  .optin:hover .optin__box { box-shadow: inset 0 0 0 2px var(--accent); }
  .optin.is-on:hover .optin__box { box-shadow: none; background: #FFD24D; }
  .textlink:hover { color: #FFD24D; }
  .q summary:hover { color: var(--clay-deep); }
  .faq__groups a:hover { color: var(--on-light); }
  .ptable__more:hover { background: var(--line-light); }
  .askbox__tel:hover, .quote__tel:hover, .foot__tel:hover { color: var(--accent); }
  .foot__small a:hover, .foot__legal a:hover { color: var(--ink); }
}

/* Job explorer: any of the seven jobs can be picked (the design drew Foundations and Ponds). */
.explorer-sub .xp__tab--sub, .explorer-drive .xp__tab--drive, .explorer-clear .xp__tab--clear, .explorer-septic .xp__tab--septic, .explorer-demo .xp__tab--demo { background: var(--accent); color: var(--on-accent); }
.explorer-sub .xp__tab--sub .xp__num, .explorer-drive .xp__tab--drive .xp__num, .explorer-clear .xp__tab--clear .xp__num, .explorer-septic .xp__tab--septic .xp__num, .explorer-demo .xp__tab--demo .xp__num { color: var(--on-accent); }
:is(.explorer-sub, .explorer-drive, .explorer-clear, .explorer-septic, .explorer-demo) .xp__tab--pad { background: var(--surface-2); color: var(--ink); }
:is(.explorer-sub, .explorer-drive, .explorer-clear, .explorer-septic, .explorer-demo) .xp__tab--pad .xp__num { color: var(--accent); }
.explorer-sub .xp__panel--sub, .explorer-drive .xp__panel--drive, .explorer-clear .xp__panel--clear, .explorer-septic .xp__panel--septic, .explorer-demo .xp__panel--demo { display: grid; }
:is(.explorer-sub, .explorer-drive, .explorer-clear, .explorer-septic, .explorer-demo) .xp__panel--pad { display: none; }
@media (min-width: 700px) { .days--3 { grid-template-columns: repeat(3, 1fr); } }
/* A second line under a price or a time: the basis, or the second range. */
.xp__facts dd small { display: block; margin-top: 8px; font: 500 14px/1.35 var(--font-body); letter-spacing: 0; text-transform: none; white-space: normal; color: var(--ink-mute); }
/* Legend swatches for the four drawings the design didn't draw. */
.sw--top { background: #CFC6B4; }
.sw--fabric { height: 4px; background: repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 8px); }
.sw--pipe { border-radius: 50%; background: var(--on-accent); box-shadow: inset 0 0 0 3px var(--limestone); }
.sw--mulch { background: repeating-linear-gradient(45deg, #7E6A4A 0 3px, #B49A6E 3px 5px); }
.sw--flag { background: var(--accent); clip-path: polygon(0 0, 100% 0, 72% 50%, 100% 100%, 0 100%); }
.sw--stump { background: #7E6A4A; }
.sw--tank { background: #3A352C; box-shadow: inset 0 0 0 3px var(--limestone); }
.sw--out { border: 2px dashed var(--ink-soft); }
.sw--cap { width: 7px; background: var(--accent); }

/* Price guide on phones: "See all 14 prices" shows the rest (prices-all), then reads "Show fewer prices". */
.prices-all .prow--more { display: grid; }
.ptable__more .icon--less, .prices-all .ptable__more .icon:not(.icon--less) { display: none; }
.prices-all .ptable__more .icon--less { display: block; }

/* FAQ: the side column stays in view while the answers scroll (brief §4), when the window is tall
   enough for all of it; its group names jump to their groups and mark the one in view. */
.faq__groups li { padding: 0; }
.faq__groups a { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; color: inherit; text-decoration: none; }
.faq__groups a.is-current { color: var(--on-light); }
.faq__groups a.is-current::after { content: ''; width: 10px; height: 10px; background: var(--clay-deep); }
@media (min-width: 1100px) and (min-height: 760px) {
  .faq__side { position: sticky; top: calc(var(--hdr-h, 85px) + 32px); }
}

/* Bid form: steps 3 and 4 (not drawn), the step bar for them, errors, sending. */
.quote-step-3 .wiz__step--3, .quote-step-4 .wiz__step--4 { display: block; }
.quote-step-3 .wiz__step--1, .quote-step-4 .wiz__step--1 { display: none; }
.wiz__step--3 .wiz__h, .wiz__step--4 .wiz__h { margin-bottom: 26px; }
.wiz__step--3 .seg:has(+ .wiz__foot) { border-bottom: 0; }
.wiz h3.wiz__h { text-wrap: pretty; }
.quote-step-3 .steps__s--2, .quote-step-3 .steps__s--3, .quote-step-4 .steps__s--2, .quote-step-4 .steps__s--3, .quote-step-4 .steps__s--4 { border-color: var(--accent); color: var(--ink); }
.quote-step-3 .steps__s--3 span, .quote-step-4 .steps__s--4 span { background: var(--accent); color: var(--on-accent); }
.quote-step-3 .steps__s--1 span, .quote-step-3 .steps__s--2 span, .quote-step-4 .steps__s--1 span, .quote-step-4 .steps__s--2 span, .quote-step-4 .steps__s--3 span { background: none; box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); }
.wiz__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.optin { position: relative; display: inline-flex; align-items: center; gap: 14px; min-height: 44px; margin-top: 18px; cursor: pointer; font-size: 17px; font-weight: 500; color: var(--ink); }
.optin input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.optin__box { position: relative; flex: none; width: 28px; height: 28px; background: var(--ground); box-shadow: inset 0 0 0 2px var(--line-strong); }
.optin.is-on .optin__box { background: var(--accent); box-shadow: none; }
.optin.is-on .optin__box::after { content: ''; position: absolute; left: 7px; top: 7px; width: 13px; height: 7px; border-left: 3px solid var(--on-accent); border-bottom: 3px solid var(--on-accent); transform: rotate(-45deg); }
.field.is-error .input { border-color: var(--clay); }
.field__err[hidden] { display: none; }
.wiz__jobs.is-error .tile:not(.is-selected) { box-shadow: inset 0 0 0 2px var(--clay); }
.wiz__jobs .field__err { margin-top: 12px; }
.wiz__form [type="submit"] { position: relative; }
.wiz__form.is-sending [type="submit"] { cursor: progress; }
.wiz__form.is-sending [type="submit"] > * { visibility: hidden; }
.wiz__form.is-sending [type="submit"]::after { content: "Sending…"; position: absolute; inset: 0; display: grid; place-items: center; }
@media (max-width: 699px) {
  .wiz__pair { grid-template-columns: 1fr; }
  .wiz__step--3 .wiz__foot .btn--ghost, .wiz__step--4 .wiz__foot .btn--ghost { order: 2; }
  /* While a text field has focus (a phone keyboard is up), the M1 bar would sit on the field. */
  .site:has(.wiz__form :is(input[type="text"], input[type="tel"], input[type="email"], textarea):focus) .mobile-bar { display: none; }
}
/* "Read all 186 reviews" draws 43.5px tall: on phones half a pixel more padding, taken back from its
   margin, makes a full 44px tap target without moving anything. */
@media (max-width: 699px) { .score__link { padding-top: 13.5px; margin-top: 17.5px; } }
/* Subdivisions' side photo: the dozer sits at the right of the frame. */
.xp__panel--sub .xp__photo img { object-position: 85% 50%; }
/* Hero buttons on narrow phones: at 360 the pair needed 325px of a 320px row and the phone button ran
   10px into the gutter (a design bug). Less side padding fits them. The text column can't grow past
   the screen either, so a slow font load can't push the copy off the edge. */
@media (max-width: 1099px) { .hero__foot { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 379px) { .hero__actions .btn { padding: 0 9px; } }