/* ==========================================================================
   ROB ON THE JOB — SHARED STYLES
   1  Base            6  Sections + heads      11 Sheets + checklist
   2  Type            7  Home hero + heroes    12 Load / truck
   3  Layout          8  Plan drawings         13 Rate table
   4  Buttons + links 9  Services + process    14 FAQ
   5  Header + menu   10 Lists + tiles         15 Footer · 16 Motion · 17 Small
   ========================================================================== */

/* 1 · BASE ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
body {
  margin: 0;
  background: var(--forest);
  color: var(--forest);
  font-family: var(--font);
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }
h1, h2, h3, p, ul, ol, figure, dl, dd, fieldset { margin: 0; padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent, var(--forest)); outline-offset: 3px; }
::selection { background: var(--sage); color: var(--forest); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: .75rem; left: .75rem; z-index: 100; padding: .75rem 1rem;
  background: var(--ivory); color: var(--forest); transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* 2 · TYPE ---------------------------------------------------------------- */
.display, .h1, .h2 {
  font-weight: 300;
  font-stretch: var(--wide);
  letter-spacing: -.028em;
  line-height: 1.04;
  text-wrap: balance;
  margin: 0;
}
.display { font-size: clamp(2.65rem, 6.1vw, 6.5rem); }
.h1 { font-size: clamp(2.5rem, 5.2vw, 5.25rem); }
.h2 { font-size: clamp(2rem, 3.8vw, 3.75rem); line-height: 1.08; }
.h3 {
  font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem);
  font-weight: 400;
  font-stretch: var(--semi-wide);
  letter-spacing: -.012em;
  line-height: 1.2;
  margin: 0;
}
.lead {
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  line-height: 1.42;
  font-weight: 350;
  letter-spacing: -.005em;
  text-wrap: pretty;
}
.body { color: var(--muted); max-width: 34em; text-wrap: pretty; }
.label {
  display: block;
  font-size: .72rem;
  line-height: 1.4;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.muted { color: var(--muted); }

/* 3 · LAYOUT -------------------------------------------------------------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.stack { display: grid; gap: 1.5rem; align-content: start; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }

/* 4 · BUTTONS + LINKS ------------------------------------------------------
   The button's small square is the brand module. On hover it grows until it
   fills the whole button: clutter out, order in. */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 2.25rem;
  padding: 1.1rem 3.1rem 1.1rem 1.5rem;
  border: 1px solid var(--btn-bg);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-size: .98rem;
  font-weight: 500;
  font-stretch: var(--semi-wide);
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
  --btn-bg: var(--forest); --btn-ink: var(--ivory); --btn-sq: var(--sage); --btn-hover: var(--forest);
}
.btn::after {
  content: "";
  position: absolute; z-index: -1;
  right: 1.35rem; top: calc(50% - 4px);
  width: 8px; height: 8px;
  background: var(--btn-sq);
  transition: transform .5s var(--ease);
}
.btn:hover { color: var(--btn-hover); }
.btn:hover::after { transform: scale(46); }
.s-forest .btn, .s-deep .btn, .menu .btn { --btn-bg: var(--sage); --btn-ink: var(--forest); --btn-sq: var(--ivory); }
.s-sage .btn { --btn-bg: var(--forest); --btn-ink: var(--ivory); --btn-sq: var(--ivory); }
.btn--ghost { background: transparent; --btn-ink: var(--ink); border-color: var(--line); }
.s-forest .btn--ghost, .s-deep .btn--ghost { --btn-ink: var(--ivory); --btn-sq: var(--sage); border-color: var(--line); --btn-bg: transparent; }
.s-ivory .btn--ghost, .s-soft .btn--ghost { --btn-bg: transparent; --btn-ink: var(--forest); --btn-sq: var(--forest); --btn-hover: var(--ivory); border-color: var(--line); }
.btn--sm { padding: .78rem 2.3rem .78rem 1.05rem; font-size: .9rem; gap: 1rem; }
.btn--sm::after { right: 1rem; top: calc(50% - 3px); width: 6px; height: 6px; }
.btn--block { width: 100%; justify-content: center; }
.btn[disabled] { opacity: .6; cursor: progress; }

.link {
  display: inline-flex; align-items: center; gap: .7rem;
  color: var(--ink);
  font-weight: 500; font-stretch: var(--semi-wide);
  text-decoration: none;
  padding-bottom: .3rem;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  transition: background-size .45s var(--ease);
}
.link svg { width: 1.05em; height: 1.05em; transition: transform .45s var(--ease); }
.link:hover { background-size: 30% 1px; }
.link:hover svg { transform: translateX(.3em); }

/* 5 · HEADER + MENU ------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  color: var(--forest);
  transition: transform .45s var(--ease), background-color .3s, color .3s;
}
.site-header.is-dark { color: var(--ivory); }
.site-header.is-solid { background: var(--ivory); box-shadow: 0 1px 0 rgba(41, 59, 50, .12); }
.site-header.is-solid.is-dark { background: var(--forest); box-shadow: 0 1px 0 rgba(241, 238, 230, .12); }
.site-header.is-hidden { transform: translateY(-100%); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: .95rem; }
.nav__brand { display: block; color: inherit; }
.nav__brand svg { width: 86px; height: 52.5px; }
.site-header { --mark-accent: var(--sage); }
.nav__right { display: flex; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.5rem); }
.nav__links { display: flex; gap: clamp(1.25rem, 2.4vw, 2.25rem); }
.nav__links a {
  position: relative;
  font-size: .94rem; font-weight: 450; text-decoration: none; padding-block: .3rem;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__cta .btn { --btn-bg: var(--forest); --btn-ink: var(--ivory); --btn-sq: var(--sage); --btn-hover: var(--forest); }
.is-dark .nav__cta .btn { --btn-bg: var(--sage); --btn-ink: var(--forest); --btn-sq: var(--ivory); }
.nav__toggle {
  display: none; align-items: center; gap: .7rem;
  background: none; border: 0; padding: .5rem 0; cursor: pointer;
  font-size: .94rem; font-weight: 500; color: inherit;
}
.nav__toggle-icon { width: 11px; height: 11px; background: var(--sage); transition: transform .4s var(--ease); }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon { transform: scale(.6) rotate(45deg); }

.menu {
  --bg: var(--forest); --ink: var(--ivory); --muted: var(--mist); --line: rgba(241, 238, 230, .2);
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2rem;
  padding: 6.5rem var(--gutter) 2rem;
  background: var(--forest) url("/assets/img/grain-light.png");
  color: var(--ivory);
  visibility: hidden; opacity: 0;
  transition: opacity .35s var(--ease), visibility 0s .35s;
  overflow: auto;
}
.menu.is-open { visibility: visible; opacity: 1; transition: opacity .35s var(--ease); }
.menu__links a {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-block: .8rem;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.7rem, 7.4vw, 2.5rem); font-weight: 300; font-stretch: var(--wide);
  letter-spacing: -.02em; text-decoration: none;
}
.menu__foot { display: grid; gap: .25rem; }
.menu__foot a { text-decoration: none; }

/* 6 · SECTIONS + HEADS ---------------------------------------------------- */
.section { position: relative; padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .6); }
.head { row-gap: 1.5rem; margin-bottom: clamp(3rem, 6vw, 6rem); align-items: start; }
.head__no { grid-column: 1 / span 2; padding-top: .55em; }
.head__title { grid-column: 3 / span 6; }
.head__text { grid-column: 9 / -1; padding-top: .5em; }
.head__text .link { margin-top: 1.25rem; }
.head--wide .head__title { grid-column: 3 / -1; }
.head--wide .head__text { grid-column: 3 / span 6; padding-top: 0; }

/* Notches: every dark block gives up one corner, the way the mark does. */
.notch { position: relative; }
.notch::after {
  content: ""; position: absolute; right: 0; bottom: 0; z-index: 2;
  width: var(--notch); height: var(--notch);
  background: var(--ivory) url("/assets/img/paper.png");
}
.notch::before {
  content: ""; position: absolute; z-index: 3;
  right: calc(var(--notch) + var(--notch) * .34); bottom: 0;
  width: calc(var(--notch) * .34); height: calc(var(--notch) * .34);
  background: var(--sage);
}
.notch--soft::after { background: var(--ivory-soft) url("/assets/img/paper.png"); }
.notch--forest::after { background: var(--forest) url("/assets/img/grain-light.png"); }
.notch--deep::after { background: var(--forest-deep) url("/assets/img/grain-light.png"); }
.notch--plain::before { display: none; }

/* Statement: one large thought, a lot of room around it */
.statement { grid-column: 3 / span 9; }
.statement__mark { grid-column: 1 / span 2; }
.statement__mark svg { width: clamp(2.5rem, 5vw, 4.5rem); height: auto; aspect-ratio: 1438 / 1259; color: var(--forest); }
.statement .h2 { font-size: clamp(1.8rem, 3.6vw, 3.5rem); line-height: 1.14; }
.statement .h2 em { font-style: normal; color: var(--muted); }

/* 7 · HEROES -------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero__field { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }
.hero__mark {
  position: absolute; z-index: 1;
  right: var(--gutter); top: 50%;
  height: min(78vh, 66vw); aspect-ratio: 1976 / 2948;
  transform: translateY(-50%);
  max-width: none;
}
.hero__mark svg { width: 100%; height: 100%; overflow: visible; }
.hero__mark .a { transform: translate(calc(var(--open, 0) * -7%), calc(var(--open, 0) * -7%)); }
.hero__mark .b { transform: translate(calc(var(--open, 0) * 7%), calc(var(--open, 0) * 7%)); }
.hero__inner {
  position: relative; z-index: 2;
  padding-block: 8rem clamp(2.5rem, 5vw, 4.5rem);
  display: grid; gap: 2rem;
}
.hero__title { max-width: 8.5em; }
.hero__copy { display: grid; gap: 2rem; max-width: 33rem; }
.hero__foot { position: relative; z-index: 2; border-top: 1px solid var(--line); }
.hero__foot ul { display: grid; grid-template-columns: repeat(3, 1fr) ; column-gap: var(--gap); }
.hero__foot li + li { border-left: 1px solid var(--line); padding-left: var(--gap); }
.hero__foot a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding-block: 1.2rem; padding-right: var(--gap);
  text-decoration: none; font-weight: 450;
}
.hero__foot svg { width: 1.2em; height: 1.2em; flex: none; transition: transform .45s var(--ease); }
.hero__foot a:hover svg { transform: translateX(.3em); }

.page-hero {
  position: relative; overflow: hidden;
  min-height: min(78vh, 760px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: 9rem clamp(3.5rem, 6vw, 6rem);
}
.page-hero__comp {
  position: absolute; z-index: 0; top: 5.5rem; right: 0; bottom: 0;
  width: 44%;
}
.page-hero__comp svg { width: 100%; height: 100%; }
.page-hero__body { position: relative; z-index: 1; display: grid; gap: 1.75rem; }
.page-hero__title { max-width: 11em; }
.page-hero__lead { max-width: 33rem; }
.crumbs { display: flex; gap: .6rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.comp-a { fill: var(--ivory); }
.comp-s { fill: var(--sage); }
.comp-t { fill: var(--forest-lift); }
.comp-h { fill: var(--forest-haze); }

/* 8 · PLAN DRAWINGS --------------------------------------------------------
   A small floor plan, the site's one illustration. Filled with modules it is
   the "before"; emptied, with the sage square set, it is the "after".
   Real job photos can sit alongside these later. */
.plan { --p-ink: var(--ink); --p-tint: var(--tint); --p-accent: var(--plan-accent, var(--sage)); width: 100%; height: auto; overflow: visible; }
.plan .wall { fill: none; stroke: var(--p-ink); stroke-width: 9; stroke-linecap: butt; stroke-linejoin: miter; }
.plan .thin { fill: none; stroke: var(--p-ink); stroke-width: 1.25; }
.plan .dim { fill: none; stroke: var(--p-ink); stroke-width: 1; opacity: .4; }
.plan .m { transition: transform .7s var(--ease), opacity .5s var(--ease); transition-delay: calc(var(--i) * 22ms); transform-box: fill-box; transform-origin: center; }
.plan .m1 { fill: var(--p-ink); }
.plan .m2 { fill: var(--p-tint); stroke: var(--p-ink); stroke-width: 1.25; }
.plan .m3 { fill: none; stroke: var(--p-ink); stroke-width: 1.25; }
.plan .m4 { fill: var(--p-accent); }
.plan .floor { fill: none; stroke: var(--p-ink); stroke-width: 1; opacity: 0; transition: opacity .8s var(--ease); }
.plan .cn { fill: none; stroke: var(--p-accent); stroke-width: 7; opacity: 0; transition: opacity .8s var(--ease) .15s; }
.plan .done { fill: var(--p-accent); transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .7s var(--ease) .3s; }
.plan .route { fill: none; stroke: var(--p-ink); stroke-width: 1.75; stroke-dasharray: 2 9; stroke-linecap: square; opacity: 0; transition: opacity .8s var(--ease); }
.plan .frame { fill: none; stroke: var(--p-accent); stroke-width: 1.75; opacity: 0; transition: opacity .6s var(--ease); }

.plan.is-clear .m { opacity: 0; transform: scale(.2); }
.plan.is-clear .floor { opacity: .16; }
.plan.is-clear .cn { opacity: 1; }
.plan.is-clear .done { transform: none; }
.plan.is-framed .frame { opacity: 1; }
.plan.is-walked .route { opacity: .9; }

/* 9 · SERVICES + PROCESS -------------------------------------------------- */
.svc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.svc__panel {
  display: grid; gap: 2rem; align-content: start;
  padding: clamp(1.5rem, 3vw, 3rem);
  text-decoration: none;
  background-color: var(--bg);
}
.svc__panel--a { grid-column: 1 / span 6; }
.svc__panel--b { grid-column: 7 / -1; margin-top: var(--notch); }
.svc__art { aspect-ratio: 4 / 3; }
.svc__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.svc__title { font-size: clamp(2rem, 3.4vw, 3.25rem); font-weight: 300; font-stretch: var(--wide); letter-spacing: -.025em; line-height: 1.05; margin: 0; }
.svc__list { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem var(--gap); font-size: .95rem; }
.svc__foot svg { width: 1.05em; height: 1.05em; }
.svc__panel:hover .plan--hover .m { opacity: 0; transform: scale(.2); }
.svc__panel:hover .plan--hover .done { transform: none; }
.svc__panel:hover .plan--hover .cn { opacity: 1; }
.svc__panel:hover .link { background-size: 30% 1px; }
.svc__panel:hover .link svg { transform: translateX(.3em); }

.process { align-items: start; }
.process__stage { grid-column: 1 / span 7; position: sticky; top: 12vh; padding-right: clamp(0rem, 4vw, 4rem); }
.process__steps { grid-column: 8 / -1; }
.step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; gap: 1rem; opacity: .32; transition: opacity .5s var(--ease); }
.step:first-child { min-height: 56vh; justify-content: flex-start; padding-top: 1rem; }
.step:last-child { min-height: 60vh; }
.step.is-on { opacity: 1; }
.step .body { color: var(--muted); }
html:not(.js) .step { opacity: 1; }

/* Promise rows and generic index rows */
.index { border-top: 1px solid var(--line); }
.index__row {
  position: relative;
  display: grid; grid-template-columns: 2fr 4fr 6fr; column-gap: var(--gap); align-items: baseline;
  padding-block: clamp(1.2rem, 2.2vw, 2rem);
  border-bottom: 1px solid var(--line);
}
.index__row p { color: var(--muted); max-width: 36em; }
.index__row::before {
  content: ""; position: absolute; left: 0; top: calc(50% - 5px);
  width: 10px; height: 10px; background: var(--sage);
  transform: scale(0); transition: transform .4s var(--ease);
}
.index__row .label { transition: transform .4s var(--ease); }
.index__row:hover::before { transform: scale(1); }
.index__row:hover .label { transform: translateX(1.5rem); }

.s-sage .index__row::before { background: var(--forest); }

/* 10 · LISTS + TILES ------------------------------------------------------ */
.tiles {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 3rem;
  min-height: 19rem; padding: clamp(1.1rem, 1.8vw, 1.75rem);
  background-color: var(--bg);
  text-decoration: none;
  transition: background-color .35s var(--ease);
}
.tile p { color: var(--muted); font-size: .96rem; margin-top: .6rem; }
.tile:hover { background-color: var(--panel); }
.tile--cta { background-color: var(--forest); color: var(--ivory); --muted: var(--mist); --ink: var(--ivory); }
.tile--cta:hover { background-color: var(--forest-lift); }

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
.trio__col { border-top: 1px solid var(--line); padding-top: 1.1rem; display: grid; gap: .8rem; align-content: start; }
.trio__col p { color: var(--muted); }
.trio--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trio__glyph { display: flex; gap: 5px; height: 12px; margin-bottom: clamp(1.5rem, 4vw, 3.5rem); }
.trio__glyph i { width: 12px; height: 12px; background: var(--sage); }
.s-ivory .trio__glyph i:not(:first-child), .s-soft .trio__glyph i:not(:first-child) { background: var(--forest); }

.split { align-items: start; row-gap: 3rem; }
.split__side { grid-column: 1 / span 5; position: sticky; top: 7.5rem; display: grid; gap: 1.5rem; }
.split__main { grid-column: 7 / -1; }

.terms { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); row-gap: 3rem; }
.terms__list li { display: grid; grid-template-columns: 1fr 2fr; column-gap: var(--gap); padding-block: 1.05rem; border-bottom: 1px solid var(--line); }
.terms__list strong { font-weight: 500; }
.terms__list span { color: var(--muted); }

.steps-line { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.steps-line > div { padding: 1.5rem clamp(1rem, 2vw, 1.75rem) 2.25rem; display: grid; gap: 2.5rem; }
.steps-line > div + div { border-left: 1px solid var(--line); }
.steps-line > div:last-child { background: var(--sage); --muted: #3A4E42; color: var(--forest); }

.log { border-top: 1px solid var(--line); }
.log li { display: grid; grid-template-columns: 7rem 1fr; gap: var(--gap); padding-block: 1.2rem; border-bottom: 1px solid var(--line); }

/* Before / after compare */
.compare {
  --pos: 50%;
  position: relative; overflow: hidden; touch-action: pan-y; cursor: ew-resize;
  aspect-ratio: 16 / 9.5;
  border: 1px solid var(--line);
  user-select: none;
  background: var(--panel);
}
.compare__layer { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(.75rem, 3vw, 2.5rem) 0; background: var(--panel); }
.compare__layer .plan { position: absolute; inset: 6%; width: 88%; height: 88%; }
.compare__layer img { width: 100%; height: 100%; object-fit: cover; }
.compare__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); z-index: 1; background: var(--tint); }
.compare__tag { position: absolute; top: 1rem; padding: .3rem .55rem; background: var(--bg); color: var(--ink); }
.compare__tag--l { left: 1rem; }
.compare__tag--r { right: 1rem; }
.compare__handle { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--pos); width: 1px; background: var(--ink); }
.compare__knob {
  position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%);
  width: 3.25rem; height: 3.25rem; border: 0; padding: 0; cursor: ew-resize;
  background: var(--forest); color: var(--ivory);
  font-size: .68rem; font-weight: 600; font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase;
}

/* Identity block: selective deboss on paper, like the business card */
.card-stock {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 4 / 5;
  background: var(--ivory) url("/assets/img/paper.png");
  box-shadow: 0 1px 1px rgba(31, 45, 38, .08), 0 28px 60px -32px rgba(31, 45, 38, .35);
}
.card-stock figcaption { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.1rem; display: flex; justify-content: space-between; gap: 1rem; color: var(--moss); }
.deboss {
  width: 46%; aspect-ratio: 1976 / 2948; height: auto;
  color: var(--ivory-deep); --mark-accent: var(--ivory-deep);
  filter: drop-shadow(0 1.5px 0 rgba(255, 255, 255, .9)) drop-shadow(0 -1px 0 rgba(41, 59, 50, .3));
}
.legend { display: grid; }
.legend__row { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--gap); padding-block: 1.5rem; border-top: 1px solid var(--line); align-items: start; }
.legend__row:last-child { border-bottom: 1px solid var(--line); }
.legend__row svg { width: 3rem; height: 3rem; }
.legend__row p { color: var(--muted); margin-top: .35rem; }
.palette { display: grid; grid-template-columns: 2fr 1fr 1fr; margin-top: 2.5rem; }
.palette span { display: flex; align-items: flex-end; height: 6rem; padding: .7rem .8rem; }

/* 11 · SHEETS + CHECKLIST ------------------------------------------------- */
.sheet { background-color: var(--panel); border: 1px solid var(--line); }
.sheet__head { display: flex; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.5rem; border-bottom: 1px solid var(--line); }
.sheet__row { display: flex; justify-content: space-between; gap: 1.5rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--line); }
.sheet__row:last-child { border-bottom: 0; }
.sheet__row > :last-child { color: var(--muted); text-align: right; }
.sheet__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 1.5rem; background: var(--sage); color: var(--forest); }
.sheet__foot .label { color: inherit; }
.check-group { padding: 1.25rem 1.5rem 1.5rem; border-bottom: 1px solid var(--line); }
.check-group:last-child { border-bottom: 0; }
.check-group h3 { display: flex; justify-content: space-between; margin: 0 0 .8rem; }
.check-group ul { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem var(--gap); }
.check-group li { display: flex; align-items: baseline; gap: .7rem; font-size: .96rem; }
.check-group li::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--sage); transform: translateY(-.05em); }

/* 12 · LOAD / TRUCK ------------------------------------------------------- */
.load { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 2.5rem; align-items: stretch; }
.load__stage { grid-column: 1 / span 8; display: grid; gap: 2rem; align-content: space-between; }
.load__panel { grid-column: 9 / -1; display: flex; flex-direction: column; gap: 1rem; border-left: 1px solid var(--line); padding-left: var(--gap); }
.load__size { font-size: clamp(2rem, 3.4vw, 3.25rem); font-weight: 300; font-stretch: var(--wide); letter-spacing: -.025em; line-height: 1.05; }
.load__panel .sheet { margin-top: auto; }
.truck { width: 100%; height: auto; }
.truck .ln { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.truck .hv { fill: none; stroke: var(--ink); stroke-width: 5; }
.truck .dm { fill: none; stroke: var(--ink); stroke-width: 1; opacity: .4; }
.truck .ce { fill: var(--tint); opacity: .55; }
.truck .ce.is-on { fill: var(--forest); opacity: 1; }
.s-forest .truck .ce.is-on, .s-deep .truck .ce.is-on { fill: var(--sage); }
.truck .ce:nth-child(7n).is-on { fill: var(--sage); }
.s-forest .truck .ce:nth-child(7n).is-on { fill: var(--ivory); }
.truck .ce { transition: fill .3s var(--ease), opacity .3s var(--ease); }
.truck .wh circle { fill: var(--bg); stroke: var(--ink); stroke-width: 1.5; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 2rem; background: transparent; cursor: pointer; margin: 0; }
.range::-webkit-slider-runnable-track { height: 1px; background: var(--ink); }
.range::-moz-range-track { height: 1px; background: var(--ink); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -11px; background: var(--forest); border: 0; border-radius: 0; }
.range::-moz-range-thumb { width: 22px; height: 22px; background: var(--forest); border: 0; border-radius: 0; }
.s-forest .range::-webkit-slider-thumb { background: var(--sage); }
.s-forest .range::-moz-range-thumb { background: var(--sage); }
.load__ticks { display: flex; justify-content: space-between; }
.load__ticks button {
  background: none; border: 0; padding: .4rem .5rem; margin-inline: -.5rem; cursor: pointer; color: var(--muted);
  font-size: .9rem; font-weight: 450;
}
.load__ticks button.is-on { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }

/* 13 · RATE TABLE ---------------------------------------------------------- */
.rate { width: 100%; border-collapse: collapse; margin-top: clamp(3rem, 6vw, 5rem); }
.rate caption { display: table-caption; caption-side: top; text-align: left; padding-bottom: 1rem; }
.rate th, .rate td { text-align: left; padding: 1.15rem var(--gap) 1.15rem 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.rate thead th { display: table-cell; padding-block: .8rem; border-top: 1px solid var(--ink); }
.rate tbody th { font-weight: 400; font-stretch: var(--semi-wide); font-size: 1.15rem; white-space: nowrap; }
.rate td { color: var(--muted); }
.rate td:last-child, .rate th:last-child { text-align: right; padding-right: 0; white-space: nowrap; color: var(--ink); }
.rate__note { margin-top: 1.1rem; }

/* 14 · FAQ ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding-block: 1.35rem; cursor: pointer; list-style: none;
  font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem); font-weight: 400; font-stretch: var(--semi-wide); letter-spacing: -.008em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 1.3rem; height: 1.3rem; transition: transform .4s var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq__a { padding: 0 3rem 1.6rem 0; color: var(--muted); max-width: 44em; }
.faq__a a { color: var(--ink); }

/* 15 · FOOTER --------------------------------------------------------------- */
.site-footer { position: relative; padding-top: var(--section); }
.footer__cta { row-gap: 2rem; align-items: end; padding-bottom: var(--section); }
.footer__cta .display { grid-column: 1 / span 8; }
.footer__cta > div { grid-column: 9 / -1; justify-self: end; display: grid; gap: 1rem; justify-items: start; }
.footer__grid { row-gap: 2.5rem; padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); }
.footer__logo { grid-column: 1 / span 4; }
.footer__logo svg { width: min(100%, 300px); aspect-ratio: 1812 / 840; height: auto; }
.footer__col { grid-column: span 2; display: grid; gap: .9rem; align-content: start; }
.footer__col li { padding-block: .12rem; font-size: .96rem; }
.footer__col a { text-decoration: none; }
.footer__col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__base { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1.5rem; border-top: 1px solid var(--line); }
.footer__base .label:last-child { display: flex; gap: 1.5rem; }
.footer__base a { text-decoration: none; }

/* 16 · MOTION ---------------------------------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* 17 · SMALLER SCREENS ------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
  .head__no { grid-column: 1 / -1; padding-top: 0; }
  .head__title, .head--wide .head__title { grid-column: 1 / -1; }
  .head__text, .head--wide .head__text { grid-column: 1 / span 9; padding-top: 0; }
  .statement__mark { grid-column: 1 / -1; margin-bottom: 2rem; }
  .statement { grid-column: 1 / -1; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trio--four { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .steps-line { grid-template-columns: 1fr 1fr; }
  .steps-line > div:nth-child(3) { border-left: 0; }
  .steps-line > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .load__stage, .load__panel { grid-column: 1 / -1; }
  .load__panel { border-left: 0; padding-left: 0; }
  .split__side, .split__main { grid-column: 1 / -1; position: static; }
  .footer__logo { grid-column: 1 / -1; }
  .footer__col { grid-column: span 3; }
  .footer__cta .display, .footer__cta > div { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 820px) {
  .hero__mark { top: 5.75rem; right: var(--gutter); height: 29vh; height: 29svh; transform: none; }
  .hero__foot ul { grid-template-columns: 1fr; }
  .hero__foot li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .hero__foot a { padding-block: .85rem; padding-right: 0; }
  .hero__inner { padding-top: calc(5.75rem + 29svh + 1.25rem); gap: 1rem; padding-bottom: 1.5rem; }
  .hero__copy { gap: 1.25rem; }
  .hero .btn { padding-block: .95rem; }
  .svc__panel--a, .svc__panel--b { grid-column: 1 / -1; margin-top: 0; }
  .svc__panel--b { margin-top: var(--gap); }
  .process__stage {
    grid-column: 1 / -1; top: 4.6rem; z-index: 3; padding: .75rem 0; margin-bottom: 1.5rem;
    background-color: var(--bg);
  }
  .process__stage .plan { max-height: 34vh; }
  .process__steps { grid-column: 1 / -1; }
  .step, .step:first-child, .step:last-child { min-height: 46vh; justify-content: flex-start; padding-top: 1rem; }
  .trio { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .trio__glyph { margin-bottom: 1rem; }
  .terms { grid-template-columns: 1fr; }
  .index__row { grid-template-columns: 3rem 1fr; }
  .index__row p { grid-column: 2; margin-top: .4rem; }
  .page-hero { min-height: 0; padding-top: 18rem; }
  .page-hero__comp { width: 100%; top: 5rem; bottom: auto; height: 12.5rem; }
  .compare { aspect-ratio: 4 / 3; }
  .load__ticks button { font-size: .82rem; }
}
@media (max-width: 560px) {
  .tiles { grid-template-columns: 1fr; }
  .tile { min-height: 0; gap: 1.5rem; }
  .trio--four { grid-template-columns: 1fr; }
  .steps-line { grid-template-columns: 1fr; }
  .steps-line > div { border-left: 0 !important; gap: 1.25rem; }
  .steps-line > div + div { border-top: 1px solid var(--line); }
  .check-group ul, .svc__list { grid-template-columns: 1fr; }
  .terms__list li { grid-template-columns: 1fr; }
  .rate thead { display: none; }
  .rate, .rate tbody, .rate tr, .rate td, .rate tbody th { display: block; width: 100%; }
  .rate tr { padding-block: 1rem; border-bottom: 1px solid var(--line); }
  .rate tbody th, .rate td { border: 0; padding: .1rem 0; white-space: normal; text-align: left !important; }
  .footer__col { grid-column: span 6; }
  .btn:not(.btn--sm) { width: 100%; justify-content: flex-start; }
  .sheet__row { flex-direction: column; gap: .1rem; }
  .sheet__row > :last-child { text-align: left; }
  .faq__a { padding-right: 0; }
  .log li { grid-template-columns: 5.25rem 1fr; }
}