/* Onitt Solutions — landing page
   Palette: drop-cloth spruce, primed-wall grey, chalk, masking-tape amber.
   Type: Archivo (display, wide), Public Sans (body), IBM Plex Mono (spec labels). */

:root {
  --spruce:      #103A31;
  --spruce-deep: #0A241E;
  --spruce-lift: #1B5548;
  --primer:      #EFEEE9;
  --chalk:       #FBFAF7;
  --tape:        #E5A83C;
  --tape-deep:   #C88A1E;
  --ink:         #14181A;
  --slate:       #5D6764;
  --hair:        #D8D6CE;

  --shell: 1220px;
  --pad: clamp(20px, 5vw, 56px);

  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--primer);
  color: var(--ink);
  font: 400 17px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 112%;
  line-height: .98;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

a { color: inherit; }

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

:focus-visible {
  outline: 3px solid var(--tape);
  outline-offset: 3px;
  border-radius: 2px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--chalk);
  padding: 12px 18px; border-radius: 4px;
  font: 500 14px var(--f-body); text-decoration: none;
  transition: top .18s var(--ease);
}
.skip:focus { top: 16px; }

/* ---- shared bits ------------------------------------------------------- */

.eyebrow {
  font: 500 12px/1 var(--f-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate);
  /* block + fit-content, not inline-block: an inline-block sits on a text
     baseline and drags half-leading in above it, which knocks the hero copy
     9px out of line with the docket beside it. */
  display: block;
  width: fit-content;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--tape);
  margin-bottom: 26px;
}
.eyebrow--light { color: rgba(251, 250, 247, .72); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 600 15px/1 var(--f-body);
  letter-spacing: -.005em;
  padding: 17px 26px;
  border: 1.5px solid transparent;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--solid { background: var(--spruce); color: var(--chalk); }
.btn--solid:hover { background: var(--spruce-lift); }

.btn--tape { background: var(--tape); color: var(--ink); }
.btn--tape:hover { background: var(--tape-deep); }

/* Past the hero the masthead action switches to amber. Spruce on primer is
   quiet enough to sit under the hero; over the rest of the page the button
   has to be the loudest thing in the bar. */
.masthead.is-past-hero .btn--solid { background: var(--tape); color: var(--ink); }
.masthead.is-past-hero .btn--solid:hover { background: var(--tape-deep); }

.btn--ghost { background: transparent; color: var(--chalk); border-color: rgba(251,250,247,.4); }
.btn--ghost:hover { border-color: var(--chalk); background: rgba(251,250,247,.08); }

.btn--wide { width: 100%; padding-block: 20px; font-size: 16px; }

.tape-rule {
  height: 5px;
  background: var(--tape);
  display: none;
}

/* ---- masthead ---------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(239, 238, 233, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hair);
}
.masthead__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 74px;
}

.mark { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
/* The emblem is lifted straight out of the company logo; the wordmark beside it
   is set in Archivo so the name stays readable at 40px. */
.mark__logo { height: 40px; width: auto; flex: none; display: block; }

.mark__text { display: flex; flex-direction: column; line-height: 1; }
.mark__text strong {
  font-family: var(--f-display);
  font-weight: 800; font-stretch: 118%;
  font-size: 20px; letter-spacing: -.02em;
}
.mark__text span {
  font: 500 10px var(--f-mono);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--slate); margin-top: 3px;
}

.masthead__nav { display: flex; gap: 28px; }
.masthead__nav a {
  font: 500 14.5px var(--f-body);
  text-decoration: none;
  color: var(--ink);
  padding-block: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color .2s var(--ease);
}
.masthead__nav a:hover { border-bottom-color: var(--tape); }

.masthead__actions { display: flex; align-items: center; gap: 20px; }
.tel { font: 500 15px var(--f-mono); text-decoration: none; white-space: nowrap; }
.tel:hover { color: var(--spruce); }

/* ---- mobile navigation -------------------------------------------------- */

/* The burger and the drawer are built by app.js, so they exist on every page
   without six copies of the same markup. */

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  margin-right: -10px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .28s var(--ease), opacity .18s var(--ease);
}

/* Three lines into a cross, using the two outer bars. */
.masthead.is-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.masthead.is-open .burger span:nth-child(2) { opacity: 0; }
.masthead.is-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--chalk);
  border-bottom: 3px solid var(--tape);
  box-shadow: 0 24px 40px -28px rgba(0, 0, 0, .5);
  padding: 8px var(--pad) 24px;
}

.drawer__nav { display: flex; flex-direction: column; }
.drawer__nav a {
  font: 600 19px var(--f-display);
  font-stretch: 108%;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--ink);
  padding-block: 16px;
  border-bottom: 1px solid var(--hair);
}

.drawer__tel {
  display: block;
  font: 500 16px var(--f-mono);
  text-decoration: none;
  color: var(--spruce);
  padding-block: 18px 20px;
}

.drawer__cta { width: 100%; }

@media (max-width: 900px) {
  .masthead__nav, .tel { display: none; }
  /* No position override here — .masthead is already sticky, which is a
     positioned ancestor, so the drawer anchors to it correctly. Setting
     relative would kill the sticky header on mobile. */
  .burger { display: flex; }
  .masthead.is-open .drawer { display: block; }
}

/* The masthead CTA and the burger together are too much on a narrow phone;
   the drawer carries a full-width CTA of its own, so drop this one. */
@media (max-width: 460px) {
  .masthead__actions .btn { display: none; }
  .masthead__inner { gap: 16px; }
}

/* ---- hero -------------------------------------------------------------- */

@property --cut {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 58%;
}

.hero {
  --cut: 58%;
  position: relative;
  background: var(--spruce-deep);
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; overflow: hidden; }

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The footage is the UNPAINTED side of the line: flat, dull, unfinished. */
  filter: saturate(.42) contrast(.94) brightness(.6);
}

/* Settles the raw side down so the credentials panel stays legible on it. */
.hero__raw {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 100% at 100% 50%, transparent 30%, rgba(10,36,30,.5) 100%),
    linear-gradient(rgba(10,36,30,.28), rgba(10,36,30,.46));
}

/* ---- the cut line ------------------------------------------------------ */
/* The headline claims the edge is the whole job, so the hero is built out of
   one: everything left of the line is painted, everything right of it is not. */

.hero__paint {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--cut);
  background: var(--spruce);
  background-image:
    radial-gradient(90% 70% at 18% 6%, rgba(27,85,72,.85) 0%, transparent 62%),
    radial-gradient(70% 60% at 0% 100%, rgba(10,36,30,.7) 0%, transparent 58%);
}

.hero__edge {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--cut);
  width: 3px;
  margin-left: -3px;
  background: var(--tape);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, .8fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: stretch;
  padding-block: clamp(56px, 7.5vw, 96px) clamp(56px, 8vw, 92px);
  color: var(--chalk);
}

.hero h1 {
  font-size: clamp(38px, 5.2vw, 72px);
  font-weight: 900;
  font-stretch: 116%;
  letter-spacing: -.032em;
  line-height: .96;
  margin-bottom: 26px;
}
.hero h1 span { display: block; }
.hero h1 em {
  font-style: normal;
  color: var(--tape);
}

.hero__lede {
  max-width: 54ch;
  font-size: clamp(16.5px, 1.35vw, 19px);
  line-height: 1.62;
  color: rgba(251, 250, 247, .82);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

@media (prefers-reduced-motion: no-preference) {
  .hero__copy > * { animation: rise .8s var(--ease) both; }
  .hero__copy > .eyebrow    { animation-delay: .50s; }
  .hero__copy > h1          { animation-delay: .58s; }
  .hero__copy > .hero__lede { animation-delay: .68s; }
  .hero__copy > .hero__cta  { animation-delay: .76s; }
  .credentials { animation: rise .8s var(--ease) .84s both; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Credentials panel — reads as a job docket, not a colour card. */
.credentials {
  /* Sized to its content and centred against the copy column beside it. */
  align-self: center;
  background: var(--chalk);
  color: var(--ink);
  /* 3px to match the cut edge — the same amber line, turned on its side. */
  border-top: 3px solid var(--tape);
  overflow: hidden;
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .55);
}
.credentials__head {
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--hair);
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 96%;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -.012em;
}
.credentials__spec {
  padding: 0 20px;
}
.credentials__spec > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-block: 13px;
  border-bottom: 1px solid var(--hair);
}
.credentials__spec > div:last-child { border-bottom: 0; }

.credentials__foot {
  padding: 16px 20px 18px;
  border-top: 1px solid var(--hair);
  background: rgba(16, 58, 49, .04);
  font-size: 14px;
  color: var(--slate);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.credentials__foot a {
  font: 500 14.5px var(--f-mono);
  letter-spacing: .02em;
  color: var(--spruce);
  text-decoration: none;
  border-bottom: 2px solid var(--tape);
  padding-bottom: 1px;
}
.credentials__foot a:hover { color: var(--spruce-lift); }
.credentials__spec dt {
  font: 500 10.5px var(--f-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--slate);
}
.credentials__spec dd { font-size: 14.5px; font-weight: 500; text-align: right; }

@media (max-width: 940px) {
  .hero__inner { grid-template-columns: 1fr; align-items: start; }
  .credentials { max-width: 420px; }

  /* Not enough width for a vertical cut, so the paint takes the whole panel
     and the edge becomes the section boundary at the bottom. */
  .hero { --cut: 100%; }
  .hero__paint { background-color: rgba(16, 58, 49, .93); }
  .hero__edge { display: none; }
  .tape-rule { display: block; }

  @keyframes cut-in {
    from { --cut: 0%; }
    to   { --cut: 100%; }
  }
}

/* ---- surface rail ------------------------------------------------------ */

.work { background: var(--primer); padding-block: clamp(72px, 10vw, 124px) 0; }

.work__head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 56px); }
.work__head h2 { font-size: clamp(30px, 4.1vw, 52px); margin-bottom: 16px; }
.work__note {
  font: 500 13px var(--f-mono);
  color: var(--slate);
  letter-spacing: .01em;
}

.rail {
  display: flex;
  gap: 3px;
  padding-inline: var(--pad);
  max-width: var(--shell);
  margin-inline: auto;
  padding-bottom: clamp(72px, 10vw, 124px);
}

/* The photograph of the real work sits on the item; the button on top of it
   is a wash of the surface colour. Hovering thins the wash out of the way. */
.rail__item {
  flex: 1 1 0;
  min-width: 0;
  transition: flex-grow .55s var(--ease);
  border-radius: 2px;
  overflow: hidden;
  background-color: var(--surface);
  background-image: var(--photo);
  background-size: cover;
  background-position: center;
}
.rail__item:hover, .rail__item:focus-within { flex-grow: 2.6; }

.rail__btn {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: clamp(340px, 40vw, 440px);
  padding: 20px 18px;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  text-align: left;
  background-color: color-mix(in srgb, var(--surface) 82%, transparent);
  /* A scrim at the foot keeps the title readable once the wash thins out. */
  background-image: linear-gradient(
    to top,
    color-mix(in srgb, var(--surface) 82%, transparent) 0%,
    transparent 46%);
  transition: background-color .55s var(--ease);
  color: var(--surface-ink);
  font-family: var(--f-body);
  overflow: hidden;
}

/* Crew and duration, where a paint chip would carry a colour code. */
.rail__meta {
  position: relative;
  font: 500 10.5px/1.5 var(--f-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .72;
  padding-bottom: 10px;
  border-bottom: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 26%, transparent);
}

/* Each panel is drawn as the substrate it gets painted, not as a colour. */
.rail__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  transition: opacity .55s var(--ease);
}

.rail__item:hover .rail__btn,
.rail__item:focus-within .rail__btn {
  background-color: color-mix(in srgb, var(--surface) 24%, transparent);
}
.rail__item:hover .rail__btn::before,
.rail__item:focus-within .rail__btn::before { opacity: .16; }
/* drywall — taped seam and a corner joint */
.rail--drywall .rail__btn::before {
  background:
    linear-gradient(rgba(0,0,0,.055), rgba(0,0,0,.055)) no-repeat 62% 0 / 1px 100%,
    linear-gradient(rgba(0,0,0,.045), rgba(0,0,0,.045)) no-repeat 0 22% / 100% 1px;
}
/* clapboard siding — horizontal courses with a shadow under each lap */
.rail--siding .rail__btn::before {
  background: repeating-linear-gradient(
    180deg,
    transparent 0 20px,
    rgba(0,0,0,.16) 20px 21px,
    rgba(255,255,255,.05) 21px 24px);
}
/* shaker millwork — a stile-and-rail panel */
.rail--millwork .rail__btn::before {
  background:
    linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.05)) no-repeat 14% 12% / 72% 1px,
    linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.05)) no-repeat 14% 62% / 72% 1px,
    linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.05)) no-repeat 14% 12% / 1px 50%,
    linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.05)) no-repeat 86% 12% / 1px 50%;
}
/* deck boards — planks running away from the viewer, with grain */
.rail--decking .rail__btn::before {
  background:
    repeating-linear-gradient(90deg,
      transparent 0 34px,
      rgba(0,0,0,.22) 34px 36px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.03) 0 3px,
      transparent 3px 9px);
}
/* concrete block — running-bond courses */
.rail--block .rail__btn::before {
  background:
    repeating-linear-gradient(180deg,
      transparent 0 30px,
      rgba(255,255,255,.09) 30px 31px),
    repeating-linear-gradient(90deg,
      transparent 0 60px,
      rgba(255,255,255,.07) 60px 61px);
}

.rail__body { position: relative; margin-top: auto; }

.rail__title {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 106%;
  font-size: 21px;
  line-height: 1.06;
  letter-spacing: -.02em;
}

.rail__detail {
  display: block;
  font-size: 15px;
  line-height: 1.55;
  max-width: 40ch;
  opacity: 0;
  max-height: 0;
  transform: translateY(8px);
  transition: opacity .35s var(--ease), transform .45s var(--ease), max-height .55s var(--ease);
}
.rail__item:hover .rail__detail,
.rail__item:focus-within .rail__detail {
  opacity: .88;
  max-height: 200px;
  transform: none;
  margin-top: 12px;
}

/* a masking-tape tab that peels down on hover — the "selected chip" cue */
.rail__btn::after {
  content: "Use this →";
  position: absolute;
  top: 0; right: 18px;
  background: var(--tape);
  color: var(--ink);
  font: 500 10.5px/1 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 8px 10px 9px;
  transform: translateY(-100%);
  transition: transform .3s var(--ease);
}
.rail__item:hover .rail__btn::after,
.rail__item:focus-within .rail__btn::after { transform: none; }

.rail__item.is-picked .rail__btn::after { content: "Added ✓"; transform: none; }

/* Between 861 and 1180 the collapsed chips get narrow enough that a long
   single-word title like "Commercial" would clip. */
@media (min-width: 861px) and (max-width: 1180px) {
  .rail__btn { padding: 18px 14px; }
  .rail__title { font-size: 17px; }
  .rail__detail { font-size: 14px; }
  .rail__btn::after { right: 14px; }
}

@media (max-width: 860px) {
  .rail { flex-wrap: wrap; gap: 8px; }
  .rail__item { flex: 1 1 100%; }
  .rail__btn { height: auto; min-height: 0; }
  .rail__body { margin-top: 30px; }
  .rail__detail { opacity: .88; max-height: none; transform: none; margin-top: 10px; }
  .rail__btn::after { transform: none; }
}

/* ---- sectors ----------------------------------------------------------- */

.sectors { background: var(--chalk); padding-block: clamp(72px, 10vw, 124px); }
.sectors h2 { font-size: clamp(30px, 4.1vw, 52px); max-width: 18ch; }

.sectors__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 3px;
  margin-top: clamp(36px, 5vw, 56px);
}

.sector {
  background: var(--primer);
  padding: clamp(30px, 3.6vw, 46px);
  border-radius: 2px;
  border-top: 6px solid var(--spruce);
}
.sector h3 {
  font-size: clamp(24px, 2.6vw, 32px);
  margin-bottom: 14px;
}
.sector > p { color: var(--slate); max-width: 46ch; }
.sector--dark {
  background: var(--spruce);
  color: var(--chalk);
  border-top-color: var(--tape);
}
.sector--dark > p { color: rgba(251,250,247,.78); }

.specs { margin-top: 28px; }
.specs > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-block: 12px;
  border-top: 1px solid var(--hair);
}
.sector--dark .specs > div { border-top-color: rgba(251,250,247,.16); }
.specs dt {
  font: 500 10.5px var(--f-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: .62;
  padding-top: 3px;
}
.specs dd { font-size: 15.5px; font-weight: 500; text-align: right; }

/* ---- process ----------------------------------------------------------- */

.process {
  background: var(--spruce-deep);
  color: var(--chalk);
  padding-block: clamp(72px, 10vw, 124px);
}
.process h2 {
  font-size: clamp(30px, 4.1vw, 52px);
  max-width: 20ch;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: rgba(251,250,247,.14);
  border-block: 1px solid rgba(251,250,247,.14);
}
.step { background: var(--spruce-deep); padding: 32px 26px 38px; }
.step__n {
  display: block;
  font: 500 12px var(--f-mono);
  letter-spacing: .16em;
  color: var(--tape);
  margin-bottom: 22px;
}
.step h3 { font-size: 22px; font-stretch: 100%; margin-bottom: 10px; }
.step p { color: rgba(251,250,247,.72); font-size: 15.5px; line-height: 1.6; }

/* ---- proof ------------------------------------------------------------- */

.proof { background: var(--chalk); padding-block: clamp(64px, 8vw, 96px); }
.proof__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--hair);
  border: 1px solid var(--hair);
}
.stats li {
  background: var(--chalk);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stats strong {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 118%;
  font-size: clamp(34px, 4.4vw, 50px);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--spruce);
}
.stats span {
  font: 500 11px var(--f-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--slate);
}

.quote-card { margin: 0; padding-left: 26px; border-left: 6px solid var(--tape); }
.quote-card blockquote {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 500;
  font-stretch: 94%;
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.32;
  letter-spacing: -.018em;
}
.quote-card figcaption {
  margin-top: 18px;
  font: 500 11.5px var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
}

@media (max-width: 860px) {
  .proof__inner { grid-template-columns: 1fr; }
}

/* ---- quote form -------------------------------------------------------- */

.quote { background: var(--primer); padding-block: clamp(72px, 10vw, 124px); }
.quote__inner {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: start;
}
.quote__intro { position: sticky; top: 106px; }
.quote__intro h2 { font-size: clamp(34px, 4.6vw, 60px); margin-bottom: 18px; }
.quote__intro p { color: var(--slate); max-width: 40ch; }
.quote__alt { margin-top: 20px !important; font-size: 15px; }
.quote__alt a { color: var(--spruce); font-weight: 600; }

@media (max-width: 940px) {
  .quote__inner { grid-template-columns: 1fr; }
  .quote__intro { position: static; }
}

.form {
  background: var(--chalk);
  border: 1px solid var(--hair);
  border-radius: 2px;
  padding: clamp(24px, 3.4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.field label, .field .label {
  font: 500 11px var(--f-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
}
.opt { color: var(--slate); text-transform: none; letter-spacing: .04em; }

.field input, .field select, .field textarea {
  font: 400 16px var(--f-body);
  color: var(--ink);
  background: var(--chalk);
  border: 1.5px solid var(--hair);
  border-radius: 2px;
  padding: 13px 14px;
  width: 100%;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 108px; line-height: 1.55; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235D6764' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--spruce);
  box-shadow: 0 0 0 3px rgba(16,58,49,.13);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color: #B23A2B;
  box-shadow: 0 0 0 3px rgba(178,58,43,.12);
}

.err { font-size: 13.5px; color: #B23A2B; display: none; }
.err.is-shown { display: block; }

/* dropzone */
.drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 34px 20px;
  text-align: center;
  border: 1.5px dashed var(--hair);
  border-radius: 2px;
  background: var(--primer);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.drop:hover { border-color: var(--spruce); }
.drop.is-over { border-color: var(--tape); background: rgba(229,168,60,.12); }

.drop__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.drop__input:focus-visible { outline-offset: -4px; }

.drop__icon {
  width: 42px; height: 34px;
  margin-bottom: 8px;
  fill: none;
  stroke: var(--spruce);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.drop__icon circle { fill: var(--tape); stroke: none; }
.drop__text { font-size: 15.5px; }
.drop__text strong { color: var(--spruce); }
.drop__hint { font: 400 12.5px var(--f-mono); color: var(--slate); }

.thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
.thumbs:empty { display: none; }
.thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--hair);
  background: var(--primer);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb__x {
  position: absolute;
  top: 5px; right: 5px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(20,24,26,.74);
  color: #fff;
  font: 500 14px/1 var(--f-body);
  cursor: pointer;
}
.thumb__x:hover { background: var(--ink); }
.thumb__size {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 4px 6px;
  font: 400 10px var(--f-mono);
  color: #fff;
  background: linear-gradient(transparent, rgba(20,24,26,.8));
}

.form__status { font: 500 14px var(--f-body); min-height: 0; }
.form__status.is-ok { color: var(--spruce); }
.form__status.is-bad { color: #B23A2B; }

.form__fine { font-size: 12.5px; color: var(--slate); }

#submit[disabled] { opacity: .6; cursor: progress; transform: none; }

/* ---- footer ------------------------------------------------------------ */

.foot {
  background: var(--spruce);
  color: var(--chalk);
  padding-block: clamp(48px, 6vw, 72px) 32px;
}
.foot__inner { display: grid; gap: 36px; }
.foot__brand { display: flex; align-items: center; gap: 16px; }
.foot__logo { height: 60px; width: auto; flex: none; display: block; }
.foot__brand p { font-size: 15px; line-height: 1.4; color: rgba(251,250,247,.72); }
.foot__brand strong { color: var(--chalk); font-size: 17px; }

.foot__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid rgba(251,250,247,.18);
}
.foot__cols dt {
  font: 500 10.5px var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(251,250,247,.55);
  margin-bottom: 7px;
}
.foot__cols dd { font-size: 15.5px; }
.foot__cols a { text-decoration: none; border-bottom: 1px solid rgba(251,250,247,.3); }
.foot__cols a:hover { border-bottom-color: var(--tape); color: var(--tape); }

.foot__legal { font-size: 13px; color: rgba(251,250,247,.5); }

/* ======================================================================
   SERVICE PAGES
   A service page has a different job from the homepage. The homepage sells
   the company; a service page answers the two questions someone actually
   arrives with — what exactly do I get, and what will move the price. So:
   no video, a quieter H1, and the page's weight in two reference blocks.
   ====================================================================== */

.crumbs { background: var(--spruce-deep); padding-block: 13px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.crumbs li {
  font: 500 11.5px/1 var(--f-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(251, 250, 247, .55);
}
.crumbs a { color: rgba(251, 250, 247, .82); text-decoration: none; border-bottom: 1px solid transparent; }
.crumbs a:hover { border-bottom-color: var(--tape); }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: rgba(251, 250, 247, .3); }

/* ---- service hero ------------------------------------------------------ */
/* Deliberately NOT the homepage cut line. That motif belongs to the landing
   page; repeating it on every service page makes five pages read as one page
   with the nouns swapped. Each service page instead gets a device drawn from
   its own trade, over a full-bleed still of the work.
   Interior: paint test patches along the baseboard, the way anyone actually
   picks a colour. */

.svc-hero {
  position: relative;
  background: var(--spruce-deep);
  overflow: hidden;
}

.svc-hero__media { position: absolute; inset: 0; overflow: hidden; }

.svc-hero__photo {
  position: absolute;
  inset: 0;
  background-image: var(--photo);
  background-size: cover;
  background-position: center;
  filter: saturate(.55) contrast(.95) brightness(.52);
}

.svc-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(10, 36, 30, .95) 0%,
      rgba(10, 36, 30, .88) 36%,
      rgba(10, 36, 30, .44) 70%,
      rgba(10, 36, 30, .62) 100%),
    radial-gradient(80% 70% at 8% 8%, rgba(27, 85, 72, .5), transparent 62%);
}

/* Room for the sample patches to sit under the copy. */
.svc-hero .hero__inner { padding-block-end: clamp(104px, 13vw, 150px); }

/* One step down from the homepage h1 — the landing page is still the loudest
   thing on the site. */
.svc-hero h1 {
  font-size: clamp(34px, 4.3vw, 58px);
  font-weight: 900;
  font-stretch: 114%;
  letter-spacing: -.03em;
  line-height: .98;
  margin-bottom: 22px;
}
.svc-hero h1 em { font-style: normal; color: var(--tape); }

.svc-hero__lede {
  max-width: 52ch;
  font-size: clamp(16px, 1.3vw, 18.5px);
  line-height: 1.62;
  color: rgba(251, 250, 247, .82);
}

/* ---- interior device: test patches ------------------------------------- */

.hero-samples {
  position: absolute;
  left: 0; right: 0;
  bottom: -38px;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 9px;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
  pointer-events: none;
}

.hero-samples span {
  flex: 1 1 0;
  height: 108px;
  background: var(--c);
  border-radius: 1px;
  box-shadow: 0 -12px 28px -18px rgba(0, 0, 0, .85);
  transform-origin: bottom center;
}

/* A soft highlight so the patches read as paint rather than swatches. */
.hero-samples span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(162deg, rgba(255, 255, 255, .2), transparent 56%);
}
.hero-samples span { position: relative; overflow: hidden; }

/* Brushed on by hand, so none of them are square to the wall or to each other. */
.hero-samples span:nth-child(1) { flex-grow: 1.15; transform: rotate(-.5deg); height: 116px; }
.hero-samples span:nth-child(2) { flex-grow: .92; transform: rotate(.35deg);  height: 100px; }
.hero-samples span:nth-child(3) { flex-grow: 1.28; transform: rotate(-.2deg); height: 122px; }
.hero-samples span:nth-child(4) { flex-grow: .86; transform: rotate(.55deg);  height: 96px; }
.hero-samples span:nth-child(5) { flex-grow: 1.05; transform: rotate(-.4deg); height: 110px; }

@media (max-width: 940px) {
  .hero-samples { bottom: -30px; gap: 7px; }
  .hero-samples span { height: 76px !important; }
}

/* ---- the ledger — this page's signature -------------------------------- */
/* Painters are famous for the surprise line item. Setting what is in the
   number beside what is not, and dividing them with the same amber line the
   whole brand is built on, is the most useful thing this page can do. */

.ledger { background: var(--chalk); padding-block: clamp(72px, 10vw, 124px); }
.ledger__head { max-width: 720px; margin-bottom: clamp(32px, 4.5vw, 52px); }
.ledger__head h2 { font-size: clamp(30px, 4.1vw, 52px); margin-bottom: 16px; }
.ledger__head p { color: var(--slate); max-width: 58ch; }

.ledger__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
}

.ledger__col--out {
  border-left: 3px solid var(--tape);
  padding-left: clamp(28px, 4vw, 56px);
}

.ledger__tag {
  display: inline-block;
  font: 500 11px/1 var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 7px 10px;
  border-radius: 2px;
  margin-bottom: 18px;
}
.ledger__col--in .ledger__tag { background: var(--spruce); color: var(--chalk); }
.ledger__col--out .ledger__tag { background: var(--hair); color: var(--slate); }

.ledger__list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-block: 13px;
  border-bottom: 1px solid var(--hair);
  font-size: 15.5px;
  line-height: 1.5;
}
.ledger__list li:last-child { border-bottom: 0; }
.ledger__list li::before { content: ""; flex: none; }

.ledger__col--in .ledger__list li::before {
  width: 8px; height: 14px;
  margin-top: 3px;
  border-right: 3px solid var(--tape);
  border-bottom: 3px solid var(--tape);
  transform: rotate(42deg);
}
.ledger__col--out .ledger__list li::before {
  width: 14px; height: 3px;
  margin-top: 10px;
  background: var(--hair);
}
.ledger__col--out .ledger__list li { color: var(--slate); }

.ledger__foot {
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--hair);
  font-size: 15px;
  color: var(--slate);
  max-width: 68ch;
}
.ledger__foot strong { color: var(--ink); }

@media (max-width: 860px) {
  .ledger__grid { grid-template-columns: 1fr; }
  .ledger__col--out {
    border-left: 0;
    padding-left: 0;
    border-top: 3px solid var(--tape);
    padding-top: 32px;
  }
}

/* ---- what moves the price ---------------------------------------------- */
/* Not a sequence, so no step numbers — these are independent factors and
   numbering them would imply an order that isn't there. */

.drivers { background: var(--primer); padding-block: clamp(72px, 10vw, 124px); }
.drivers__head { max-width: 720px; margin-bottom: clamp(32px, 4.5vw, 52px); }
.drivers__head h2 { font-size: clamp(30px, 4.1vw, 52px); margin-bottom: 16px; }
.drivers__head p { color: var(--slate); max-width: 58ch; }

.drivers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 1px;
  background: var(--hair);
  border-top: 3px solid var(--tape);
}
.driver { background: var(--primer); padding: 30px 26px 34px; }
.driver h3 { font-size: 19px; font-stretch: 100%; margin-bottom: 10px; }
.driver p { color: var(--slate); font-size: 15.5px; }

/* ---- FAQ ---------------------------------------------------------------- */

.faq { background: var(--chalk); padding-block: clamp(72px, 10vw, 124px); }
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(28px, 4vw, 64px);
}
.faq__head { position: sticky; top: 106px; align-self: start; }
.faq__head h2 { font-size: clamp(28px, 3.6vw, 44px); margin-bottom: 16px; }
.faq__head p { color: var(--slate); font-size: 15.5px; }

.faq__list { border-top: 1px solid var(--hair); }
.faq__item { border-bottom: 1px solid var(--hair); padding-block: 24px; }
.faq__item h3 { font-size: 18px; font-stretch: 100%; margin-bottom: 10px; }
.faq__item p { color: var(--slate); font-size: 15.5px; max-width: 64ch; }
.faq__item p + p { margin-top: 10px; }

@media (max-width: 860px) {
  .faq__grid { grid-template-columns: 1fr; }
  .faq__head { position: static; }
}

/* ---- closing CTA band --------------------------------------------------- */

.cta-band { background: var(--spruce-deep); color: var(--chalk); padding-block: clamp(56px, 7vw, 88px); }
.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.cta-band h2 { font-size: clamp(28px, 3.4vw, 44px); max-width: 18ch; }
.cta-band p { margin-top: 14px; max-width: 44ch; font-size: 16px; color: rgba(251, 250, 247, .72); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---- panels that have a service page ----------------------------------- */
/* The panel itself becomes the link to the page, so the whole surface is the
   click target people expect. The quote-form preset keeps the masking-tape
   tab it always had, promoted from a pseudo-element to a real button so it
   can sit beside a link instead of inside one. */

.rail__item { position: relative; }

.rail__btn--link { text-decoration: none; display: flex; }

/* The tape tab belongs to .rail__use on a linked panel. */
.rail__btn--link::after { content: none; }

.rail__use {
  position: absolute;
  top: 0;
  right: 18px;
  z-index: 2;
  border: 0;
  cursor: pointer;
  background: var(--tape);
  color: var(--ink);
  font: 500 10.5px/1 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 8px 10px 9px;
  transform: translateY(-100%);
  transition: transform .3s var(--ease), background-color .2s var(--ease);
}
.rail__item:hover .rail__use,
.rail__item:focus-within .rail__use { transform: none; }
.rail__use:hover { background: var(--tape-deep); }
.rail__item.is-picked .rail__use { transform: none; }
.rail__item.is-picked .rail__use::after { content: " ✓"; }

/* Bottom-right cue that the panel opens a page, so the two actions read as
   two actions rather than one ambiguous surface. */
.rail__go {
  position: absolute;
  right: 18px;
  bottom: 18px;
  font: 500 10.5px/1 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}
.rail__item:hover .rail__go,
.rail__item:focus-within .rail__go { opacity: .95; transform: none; }

.rail__btn--link .rail__detail { padding-right: 92px; }

@media (min-width: 861px) and (max-width: 1180px) {
  .rail__use { right: 14px; }
  .rail__go { right: 14px; bottom: 14px; }
}

@media (max-width: 860px) {
  /* No hover on touch, so both affordances are simply present. */
  .rail__use { transform: none; }
  .rail__go { opacity: .95; transform: none; }
  .rail__btn--link { padding-bottom: 58px; }
  .rail__btn--link .rail__detail { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rail__use, .rail__go { transition: opacity .01s, background-color .2s; }
}

/* ---- exterior device: courses part-coated ------------------------------ */
/* Lap siding, painted course by course from the left. The fresh overlay on
   each course is a different width, which is what a wall genuinely looks like
   halfway through a day. */

.hero-courses {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.hero-courses span {
  position: relative;
  display: block;
  height: 21px;
  background: var(--c);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .3);
}
.hero-courses span::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  background: var(--fresh);
  box-shadow: 1px 0 0 rgba(0, 0, 0, .16);
}

/* ---- cabinets device: the spray rack ----------------------------------- */
/* Door fronts laid out flat and horizontal, which is the argument the page is
   making. The inset rings draw a shaker rail and stile. */

.hero-rack {
  position: absolute;
  left: 0; right: 0;
  bottom: -34px;
  z-index: 1;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 14px;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
  pointer-events: none;
}
.hero-rack span {
  flex: 0 1 96px;
  height: 148px;
  background: var(--c);
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 13px var(--c),
    inset 0 0 0 14px rgba(0, 0, 0, .16),
    0 -12px 30px -18px rgba(0, 0, 0, .85);
}
.hero-rack span:nth-child(even) { height: 132px; }

/* ---- decks device: boards, half stripped ------------------------------- */
/* Runs from weathered grey on the left to fresh stain on the right, which is
   the before and after of the same deck in one strip. */

.hero-boards {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  display: flex;
  gap: 5px;
  height: 116px;
  pointer-events: none;
}
.hero-boards span {
  flex: 1 1 0;
  background: var(--c);
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, .07) 0 2px,
    transparent 2px 7px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* ---- commercial device: the phase bar ---------------------------------- */
/* Areas handed back, one in progress, the rest to come — the thing a facilities
   manager actually wants to see. */

.hero-phases {
  position: absolute;
  left: 0; right: 0;
  bottom: 26px;
  z-index: 1;
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
  pointer-events: none;
}
.hero-phases span {
  flex: 1 1 0;
  height: 8px;
  border-radius: 1px;
  background: rgba(251, 250, 247, .16);
  position: relative;
}
.hero-phases span::after {
  content: attr(data-n);
  position: absolute;
  top: 15px;
  left: 0;
  font: 500 10px/1 var(--f-mono);
  letter-spacing: .12em;
  color: rgba(251, 250, 247, .38);
}
.hero-phases .is-done { background: var(--tape); }
.hero-phases .is-done::after { color: rgba(251, 250, 247, .72); }
.hero-phases .is-live {
  background: rgba(229, 168, 60, .28);
  box-shadow: inset 0 0 0 1.5px var(--tape);
}
.hero-phases .is-live::after { color: var(--tape); }

@media (max-width: 940px) {
  .hero-courses span { height: 15px; }
  .hero-rack { bottom: -28px; gap: 9px; }
  .hero-rack span { flex-basis: 62px; height: 96px !important; box-shadow:
    inset 0 0 0 9px var(--c), inset 0 0 0 10px rgba(0, 0, 0, .16),
    0 -12px 30px -18px rgba(0, 0, 0, .85); }
  .hero-boards { height: 78px; gap: 4px; }
  .hero-phases { bottom: 20px; gap: 5px; }
}

/* Turnstile injects its own iframe; this is only the slot it lands in. */
.turnstile { min-height: 0; }
.turnstile:not(:empty) { margin-bottom: 4px; }