/* ============================================================
   Junk Bros Solutions
   Warm-editorial system. Palette pulled from the client's own
   logo (desert cream, ink, rust) but held back hard: one accent,
   hairline rules, and space doing the work instead of borders.
   ============================================================ */

:root {
  /* surfaces */
  --bone:        #FAF7F0;
  --bone-2:      #F2EDE2;
  --ink:         #131210;
  --ink-2:       #1D1B18;

  /* text */
  --fg:          #131210;
  --fg-mute:     #5C554B;
  /* Darkened from #8A8175, which failed WCAG AA (3.58:1) everywhere it was
     used for small text: quote sources, the form note and the hero stats.
     This passes on both the bone and the tinted ground. */
  --fg-faint:    #726960;
  --on-dark:     #F5F1E8;
  --on-dark-mute:#A79E90;

  /* accent — a single, disciplined desert rust */
  --rust:        #9C3B22;
  --rust-2:      #B8492C;
  --sand:        #C9A227;

  /* lines & shadow */
  --hair:        rgba(19, 18, 16, .13);
  --hair-2:      rgba(19, 18, 16, .07);
  --hair-dark:   rgba(245, 241, 232, .16);
  --sh-1: 0 1px 2px rgba(19,18,16,.05), 0 4px 14px rgba(19,18,16,.05);
  --sh-2: 0 2px 4px rgba(19,18,16,.05), 0 14px 40px rgba(19,18,16,.10);
  --sh-3: 0 30px 70px rgba(19,18,16,.16);

  --wrap: 1200px;
  --gut: clamp(1.25rem, 5vw, 3rem);
  --r: 4px;

  --display: "Sora", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

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

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--fg);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.033em;
  margin: 0;
  text-wrap: balance;
}

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

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

.skip {
  position: absolute; left: -9999px; z-index: 200;
  background: var(--ink); color: var(--on-dark); padding: .9rem 1.4rem; font-size: .9rem;
}
.skip:focus { left: 0; top: 0; }

/* ---------- micro type ---------- */
.kicker {
  display: block;
  font-family: var(--body);
  font-size: .688rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 1.15rem;
}
.band-dark .kicker { color: var(--sand); }

/* ---------- buttons ---------- */
.btn {
  --bg: var(--ink); --fg-btn: var(--on-dark); --bd: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--body); font-size: .94rem; font-weight: 600; letter-spacing: -.005em;
  padding: 1.05rem 1.9rem;
  background: var(--bg); color: var(--fg-btn);
  border: 1px solid var(--bd); border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.btn:active { transform: translateY(0); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn-primary { --bg: var(--rust); --bd: var(--rust); --fg-btn: #fff; }
.btn-primary:hover { --bg: var(--rust-2); --bd: var(--rust-2); }
.btn-ghost { --bg: transparent; --fg-btn: var(--fg); --bd: var(--hair); }
.btn-ghost:hover { --bg: var(--ink); --fg-btn: var(--on-dark); --bd: var(--ink); }
.band-dark .btn-ghost { --fg-btn: var(--on-dark); --bd: var(--hair-dark); }
.band-dark .btn-ghost:hover { --bg: var(--on-dark); --fg-btn: var(--ink); --bd: var(--on-dark); }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250, 247, 240, .82);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
.site-head.is-stuck { border-bottom-color: var(--hair); }
.head-inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(1rem, 2vw, 1.75rem); height: 76px; }

.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.brand img { width: 42px; height: 42px; object-fit: contain; border-radius: 50%; }
.brand-name { font-family: var(--display); font-weight: 600; font-size: 1.02rem; letter-spacing: -.02em; line-height: 1.1; }
.brand-name span {
  display: block; font-family: var(--body); font-weight: 500;
  font-size: .625rem; letter-spacing: .19em; text-transform: uppercase;
  color: var(--fg-faint); margin-top: .28rem;
}

.head-nav { display: none; align-items: center; gap: clamp(1.05rem, 1.9vw, 1.9rem); white-space: nowrap; }
.head-nav a {
  position: relative; font-size: .89rem; font-weight: 500; color: var(--fg-mute);
  text-decoration: none; transition: color .3s var(--ease); padding: .25rem 0;
}
.head-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--rust); transition: right .4s var(--ease);
}
.head-nav a:hover { color: var(--fg); }
.head-nav a:hover::after { right: 0; }

.head-cta { display: none; padding: .78rem 1.35rem; font-size: .875rem; white-space: nowrap; }

@media (min-width: 940px) {
  .head-nav { display: flex; }
  .head-cta { display: inline-flex; }
}

/* ---------- hero ---------- */
.hero { padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(3.5rem, 8vw, 7rem); }
.hero-grid { display: grid; gap: clamp(2.75rem, 6vw, 5rem); align-items: center; }

.hero h1 {
  font-size: clamp(2.35rem, 6.4vw, 4.35rem);
  letter-spacing: -0.042em;
}
.hero h1 .thin { font-weight: 300; color: var(--fg-mute); display: block; }

.lead {
  font-size: clamp(1rem, 1.6vw, 1.14rem);
  color: var(--fg-mute);
  max-width: 33rem;
  margin: 1.6rem 0 0;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.4rem; }

.hero-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(2.25rem, 4vw, 3rem) 0 0;
  padding: 1.6rem 0 0;
  border-top: 1px solid var(--hair);
  list-style: none;
}
.hero-meta li { padding-right: 1rem; min-width: 0; }
.hero-meta li + li { padding-left: clamp(1rem, 3vw, 2.25rem); border-left: 1px solid var(--hair); }
.hero-meta b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(.95rem, 2vw, 1.02rem); letter-spacing: -.02em; }
.hero-meta span { display: block; font-size: clamp(.7rem, 1.5vw, .78rem); color: var(--fg-faint); margin-top: .25rem; line-height: 1.4; }

.hero-media { position: relative; }
.hero-media .ba { box-shadow: var(--sh-3); }
.hero-media::before {
  /* soft warm halo, drawn in CSS — no image weight */
  content: ""; position: absolute; inset: -12% -8%;
  background: radial-gradient(60% 55% at 60% 40%, rgba(156, 59, 34, .13), transparent 70%);
  filter: blur(20px); z-index: -1;
}

@media (min-width: 940px) {
  .hero-grid { grid-template-columns: 1.02fr .98fr; }
}

/* ---------- sections ---------- */
section { padding: clamp(3.75rem, 9vw, 7.5rem) 0; }

.band-dark { background: var(--ink); color: var(--on-dark); }
.band-dark .lead, .band-dark .sec-head p { color: var(--on-dark-mute); }
.band-tint { background: var(--bone-2); }
.rule { border: 0; border-top: 1px solid var(--hair); margin: 0; }

.sec-head { max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-head h2 { font-size: clamp(1.85rem, 4.1vw, 3rem); }
.sec-head p { color: var(--fg-mute); margin: 1.1rem 0 0; font-size: clamp(1rem, 1.5vw, 1.09rem); max-width: 38rem; }

.sec-head.split { display: grid; gap: 1.5rem; max-width: none; }
@media (min-width: 900px) {
  .sec-head.split { grid-template-columns: 1fr auto; align-items: end; }
}

/* ---------- services ---------- */
.svc-grid { display: grid; gap: 1px; background: var(--hair); border-block: 1px solid var(--hair); }
@media (min-width: 620px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }

.svc {
  background: var(--bone);
  padding: clamp(2rem, 3.5vw, 2.9rem) clamp(1.5rem, 2.5vw, 2.2rem);
  display: flex; flex-direction: column;
  transition: background-color .45s var(--ease);
}
.band-tint .svc { background: var(--bone-2); }
.svc:hover { background: #fff; }
.band-tint .svc:hover { background: var(--bone); }

.svc-n {
  font-family: var(--body); font-size: .688rem; font-weight: 600;
  letter-spacing: .2em; color: var(--fg-faint); margin-bottom: 1.6rem;
}
.svc-ico { width: 26px; height: 26px; color: var(--rust); margin-bottom: 1.3rem; }
.svc-ico svg { width: 100%; height: 100%; }
.svc h3 { font-size: 1.24rem; letter-spacing: -.028em; }
.svc > p { color: var(--fg-mute); margin: .8rem 0 0; font-size: .95rem; }
.svc ul { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.svc li {
  font-size: .89rem; color: var(--fg-mute);
  padding: .5rem 0 .5rem 1.1rem; position: relative;
  border-top: 1px solid var(--hair-2);
}
.svc li::before { content: ""; position: absolute; left: 0; top: 1.02rem; width: 4px; height: 1px; background: var(--rust); }
.svc .price { margin-top: auto; padding-top: 1.8rem; }
.svc .price b { font-family: var(--display); font-weight: 600; font-size: 1.06rem; letter-spacing: -.02em; display: block; }
.svc .price small { color: var(--fg-faint); font-size: .8rem; display: block; margin-top: .25rem; }

/* ---------- before / after ---------- */
.ba {
  position: relative; overflow: hidden; border-radius: var(--r);
  background: var(--ink-2); aspect-ratio: 4 / 5; touch-action: pan-y;
  isolation: isolate;
}
.ba picture { display: block; width: 100%; height: 100%; }
.ba img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.ba .after-layer { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos, 50%)); }

.ba .lbl {
  position: absolute; top: 1rem; z-index: 2;
  font-size: .625rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  padding: .42rem .85rem; border-radius: 999px;
  background: rgba(19, 18, 16, .62); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}
.ba .lbl-b { left: 1rem; }
.ba .lbl-a { right: 1rem; background: rgba(156, 59, 34, .85); }

.ba .handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 1px; background: rgba(255,255,255,.9); transform: translateX(-.5px);
  z-index: 3; pointer-events: none;
}
.ba .handle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
  background: rgba(255,255,255,.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131210' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m10 7-5 5 5 5M14 7l5 5-5 5'/%3E%3C/svg%3E") center / 20px no-repeat;
  border-radius: 50%;
  box-shadow: 0 2px 14px rgba(0,0,0,.32);
  transition: transform .3s var(--ease);
}
.ba:hover .handle::after { transform: translate(-50%, -50%) scale(1.07); }
.ba input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize; z-index: 4;
}

/* ---------- gallery ---------- */
.gal-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 680px) { .gal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .gal-grid { grid-template-columns: repeat(3, 1fr); } }

.gal { margin: 0; }
.gal figcaption { margin-top: 1.05rem; padding-top: .9rem; border-top: 1px solid var(--hair-dark); }
.gal figcaption b { font-family: var(--display); font-weight: 500; font-size: .96rem; letter-spacing: -.02em; display: block; }
.gal figcaption span { display: block; font-size: .82rem; color: var(--on-dark-mute); margin-top: .25rem; }

.hint {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .82rem; color: var(--on-dark-mute); margin-top: clamp(2rem, 4vw, 3rem);
}
.hint svg { width: 15px; height: 15px; }

/* ---------- bins / feature ---------- */
.feature { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) { .feature { grid-template-columns: 1.05fr .95fr; } }

.price-panel { border: 1px solid var(--hair); border-radius: var(--r); background: var(--bone); overflow: hidden; box-shadow: var(--sh-1); }
.band-tint .price-panel { background: #fff; }
.price-row { display: flex; align-items: baseline; gap: 1rem; padding: 1.65rem clamp(1.5rem, 3vw, 2.2rem); }
.price-row + .price-row { border-top: 1px solid var(--hair); }
.price-row b { font-family: var(--display); font-weight: 300; font-size: clamp(2.4rem, 5vw, 3.1rem); letter-spacing: -.045em; line-height: 1; color: var(--rust); }
.price-row span { font-size: .95rem; color: var(--fg-mute); }
.price-foot { padding: 1.2rem clamp(1.5rem, 3vw, 2.2rem); border-top: 1px solid var(--hair); background: var(--bone-2); font-size: .85rem; color: var(--fg-mute); }
.band-tint .price-foot { background: var(--bone-2); }

/* ---------- area ---------- */
.area-list { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--hair); }
.area-list li {
  display: flex; align-items: baseline; gap: 1.25rem;
  padding: 1.35rem 0; border-bottom: 1px solid var(--hair);
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.25rem, 3.2vw, 1.85rem); letter-spacing: -.03em;
}
.area-list em {
  font-style: normal; font-family: var(--body); font-weight: 600;
  font-size: .688rem; letter-spacing: .18em; color: var(--fg-faint); min-width: 2.2rem;
}

/* ---------- contact ---------- */
.contact-grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 940px) { .contact-grid { grid-template-columns: .88fr 1.12fr; } }

.c-lines { list-style: none; padding: 0; margin: 2.5rem 0 0; }
.c-lines li { padding: 1.15rem 0; border-top: 1px solid var(--hair-dark); }
.c-lines .k { display: block; font-size: .656rem; font-weight: 600; letter-spacing: .19em; text-transform: uppercase; color: var(--on-dark-mute); margin-bottom: .4rem; }
.c-lines a, .c-lines .v {
  font-family: var(--display); font-weight: 500; font-size: clamp(1.05rem, 2.2vw, 1.28rem);
  letter-spacing: -.025em; color: var(--on-dark); text-decoration: none;
  transition: color .3s var(--ease);
}
.c-lines a:hover { color: var(--sand); }

form { background: #fff; border-radius: var(--r); padding: clamp(1.6rem, 3.5vw, 2.4rem); box-shadow: var(--sh-2); }
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .02em; margin-bottom: .5rem; color: var(--fg); }
.field input, .field textarea, .field select {
  width: 100%; padding: .92rem 1.05rem; font: inherit; font-size: 1rem; color: var(--fg);
  background: var(--bone); border: 1px solid var(--hair); border-radius: var(--r);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C554B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 16px;
  padding-right: 2.6rem;
}
.field textarea { min-height: 118px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; background: #fff; border-color: var(--rust); box-shadow: 0 0 0 3px rgba(156,59,34,.12);
}
.form-note { font-size: .8rem; color: var(--fg-faint); margin: 1.1rem 0 0; text-align: center; }
.form-note a { color: var(--rust); }
.hp { position: absolute; left: -9999px; }

/* ---------- footer ---------- */
.site-foot { background: var(--ink); color: var(--on-dark-mute); padding: clamp(2.5rem,5vw,3.5rem) 0 calc(clamp(2.5rem,5vw,3.5rem) + 76px); font-size: .85rem; border-top: 1px solid var(--hair-dark); }
.foot-inner { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; }
.site-foot a { color: var(--on-dark); text-decoration: none; }
.site-foot a:hover { color: var(--sand); }
.foot-inner p { margin: 0; }

/* ---------- mobile call bar ---------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.8fr) minmax(0,1.1fr); gap: .45rem;
  padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(250, 247, 240, .9);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--hair);
}
.callbar .btn { width: 100%; padding: .88rem .75rem; font-size: .875rem; }
.callbar .btn:hover { transform: none; box-shadow: none; }
@media (min-width: 940px) { .callbar { display: none; } .site-foot { padding-bottom: clamp(2.5rem,5vw,3.5rem); } }

/* ---------- entrance motion ---------- */
.js .rise { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .rise.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rise { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ---------- headline sizing outside .sec-head ---------- */
.feature-h,
.contact-grid h2 { font-size: clamp(1.85rem, 4.1vw, 3rem); }
.feature .lead, .contact-grid .lead { margin-top: 1.2rem; }

/* ============================================================
   ADDITIONS
   Animated brand mark, ambient desert texture, band transitions,
   process steps, coverage map, FAQ.
   ============================================================ */

/* ---------- animated brand mark (Higgsfield) ----------
   The static logo is always painted. The clip sits on top and
   plays once; if it never loads, or motion is reduced, the page
   is visually identical to before. Nothing depends on the video. */
.brand-mark { position: relative; display: block; width: 48px; height: 48px; flex: none; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; display: block; }
.brand-vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; border-radius: 50%;
  opacity: 0; transition: opacity .45s var(--ease);
  pointer-events: none;
}
.brand-mark.playing .brand-vid { opacity: 1; }
.brand-mark-lg { width: 132px; height: 132px; }

/* ---------- closing banner ----------
   Full-bleed sign-off. The animated mark is the focus, the abstract dust
   loop sits behind it, and both fail back to the static logo on a solid
   ink ground. */
.foot-banner {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 0 0 clamp(2.25rem, 5vw, 3.25rem);
  padding: clamp(3rem, 7vw, 5rem) var(--gut);
  border-bottom: 1px solid var(--hair-dark);
  background: radial-gradient(ellipse at 50% 30%, #22201C 0%, var(--ink) 68%);
}
.foot-banner-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(1rem, 2.2vw, 1.5rem);
}
.brand-mark-xl { width: clamp(132px, 19vw, 208px); height: clamp(132px, 19vw, 208px); }
.foot-line {
  margin: 0; font-family: var(--display); font-weight: 500;
  font-size: clamp(1.9rem, 6vw, 3.4rem); line-height: 1.02;
  letter-spacing: -.035em; color: var(--on-dark); text-wrap: balance;
}
.foot-sub {
  margin: 0; font-size: clamp(.72rem, 1.6vw, .875rem); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-mute);
  text-wrap: balance;
}
.foot-cta { margin-top: .35rem; }
.ambient-wide video { opacity: 0; }
.ambient-wide.on video { opacity: .40; }
.ambient-wide::after {
  background: radial-gradient(ellipse at 50% 45%, rgba(19,18,16,.35) 0%, rgba(19,18,16,.78) 62%, var(--ink) 100%);
}

/* ---------- ambient desert texture behind the dark bands ----------
   Decorative only, sits under the content, never blocks a pointer. */
.band-dark { position: relative; isolation: isolate; overflow: hidden; }
.band-dark > .wrap { position: relative; z-index: 1; }
.ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ambient video {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.4s var(--ease);
  mix-blend-mode: screen;
}
.ambient.on video { opacity: .30; }
.ambient::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--ink) 0%, rgba(19,18,16,.55) 22%, rgba(19,18,16,.55) 78%, var(--ink) 100%);
}

/* ---------- band transitions ----------
   A soft wash where bone meets ink, so sections read as one
   authored page instead of stacked blocks. */
.band-dark::before,
.band-dark::after {
  content: ""; position: absolute; left: 0; right: 0; height: 90px; z-index: 2; pointer-events: none;
}
.band-dark::before { top: 0; background: linear-gradient(to bottom, rgba(19,18,16,.85), transparent); }
.band-dark::after { bottom: 0; background: linear-gradient(to top, rgba(19,18,16,.85), transparent); }

/* ---------- how it works ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding-top: 1.6rem; border-top: 1px solid var(--hair); }
.step-n { font-family: var(--display); font-size: .688rem; font-weight: 600; letter-spacing: .19em; color: var(--rust); display: block; margin-bottom: .9rem; }
.step h3 { font-family: var(--display); font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; margin: 0 0 .55rem; }
.step p { margin: 0; color: var(--fg-mute); font-size: .97rem; }

/* ---------- coverage map ---------- */
.area-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 860px) { .area-grid { grid-template-columns: 1fr 1.05fr; } }
.area-map { margin: 0; }
.area-map svg { width: 100%; height: auto; display: block; color: var(--fg); }
.map-pin circle { fill: var(--rust); }
.map-pin text { font-family: var(--display); font-size: 13px; font-weight: 600; fill: var(--fg); letter-spacing: -.01em; }
.map-out circle { fill: none; stroke: currentColor; stroke-opacity: .35; stroke-width: 1.3; }
.map-out text { font-family: var(--body); font-size: 11.5px; fill: var(--fg-faint); }
.area-map figcaption { margin-top: 1rem; font-size: .86rem; color: var(--fg-mute); }

/* ---------- faq ---------- */
.faq { max-width: 46rem; border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.25rem 2.5rem 1.25rem 0; position: relative;
  font-family: var(--display); font-weight: 500; font-size: clamp(1rem, 2vw, 1.1rem); letter-spacing: -.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%; width: 11px; height: 11px;
  border-right: 1.6px solid var(--fg-mute); border-bottom: 1.6px solid var(--fg-mute);
  transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
.faq details p { margin: 0 0 1.4rem; padding-right: 2.5rem; color: var(--fg-mute); font-size: .97rem; max-width: 40rem; }

/* ---------- quote form: photo input ---------- */
.field .opt { font-weight: 400; color: var(--fg-faint); font-size: .8rem; letter-spacing: 0; text-transform: none; }
.band-dark .field .opt { color: var(--on-dark-mute); }
input[type="file"] { width: 100%; font: inherit; font-size: .9rem; color: inherit; padding: .55rem 0; }
input[type="file"]::file-selector-button {
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  margin-right: .9rem; padding: .55rem 1rem; border-radius: var(--r);
  border: 1px solid var(--hair-dark); background: transparent; color: var(--on-dark);
  transition: background .25s var(--ease), color .25s var(--ease);
}
input[type="file"]::file-selector-button:hover { background: var(--on-dark); color: var(--ink); }

/* ---------- reduced motion: everything above degrades to still ---------- */
@media (prefers-reduced-motion: reduce) {
  .brand-vid { display: none; }
  .ambient { display: none; }
}

/* Process steps reuse the .rise observer (with its failsafe) and get their
   sequence from a CSS delay, so nothing can strand them part-faded. */
.js .step:nth-child(2) { transition-delay: .12s; }
.js .step:nth-child(3) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .js .step { transition-delay: 0s !important; } }

/* Call bar: three columns must not be forced wider than the screen by their
   own label min-content width. */
.callbar > * { min-width: 0; }
.callbar .btn { padding-left: .35rem; padding-right: .35rem; }

/* File input needs a real tap target, not a 22px native control. */
input[type="file"] { min-height: 48px; display: flex; align-items: center; }
input[type="file"]::file-selector-button { padding-top: .7rem; padding-bottom: .7rem; }

/* ---------- social links ---------- */
.socials { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; }
.socials a { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; }
.socials svg { width: 17px; height: 17px; flex: none; }

.foot-links { display: flex; flex-wrap: wrap; gap: .1rem 1.5rem; }
.foot-links a { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- coverage map detail ---------- */
.map-road { fill: none; stroke: currentColor; stroke-opacity: .17; stroke-width: 1.4; }
.map-road-lbl text { font-family: var(--body); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; fill: var(--fg-faint); text-transform: uppercase; }
.map-n { fill: var(--fg-faint); stroke: var(--fg-faint); stroke-width: 1.3; }
.map-n text { font-family: var(--body); font-size: 11px; font-weight: 600; stroke: none; }

/* Labels knock out the road lines behind them instead of being crossed by
   them. The map only ever sits on a .band-tint section, so the halo matches. */
.area-map text { paint-order: stroke; stroke: var(--bone-2); stroke-width: 3.5px; stroke-linejoin: round; }
.map-n text { stroke: var(--bone-2); }

/* ---------- testimonials ----------
   No cards. Hairlines and a heavy opening mark do the grouping, which keeps
   this from reading like the three-equal-boxes pattern used elsewhere. */
.quotes { display: grid; gap: clamp(2rem, 4vw, 3rem); }
/* Four reviews, so two columns rather than three: a 3-wide grid would
   leave one empty cell, and the extra width lets the longer quotes
   breathe instead of running to six lines. */
@media (min-width: 700px) { .quotes { grid-template-columns: repeat(2, 1fr); align-items: stretch; } }
.quote { margin: 0; padding-top: 2.4rem; border-top: 1px solid var(--hair); position: relative;
  display: flex; flex-direction: column; }
.quote::before {
  content: "\201C"; position: absolute; top: .35rem; left: -.12rem;
  font-family: var(--display); font-size: 3.4rem; line-height: 1; color: var(--rust); opacity: .5;
}
.quote blockquote {
  margin: 0 0 1.75rem; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.02rem, 1.7vw, 1.16rem); line-height: 1.5; letter-spacing: -.017em;
  max-width: 34ch; text-wrap: pretty;
}
/* Attribution sits on a shared baseline across all three, so a short
   quote reads as deliberate rather than as a box that failed to fill. */
.quote figcaption { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--hair-2); }
.quote figcaption b { display: block; font-family: var(--display); font-weight: 600; font-size: .95rem; letter-spacing: -.015em; }
.quote figcaption span { display: block; margin-top: .18rem; font-size: .82rem; color: var(--fg-faint); }

/* ============================================================
   BACKGROUND DEPTH
   The page was intentionally airy, but flat cream over eight
   sections reads as unfinished rather than as restraint. Two
   quiet layers fix that without putting imagery behind copy.
   Both are decorative, both sit under everything, neither is
   allowed to touch contrast on text.
   ============================================================ */

/* 1. A warm plaster ground across the whole page. Fixed, so the
      grain stays put while content moves over it. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: url("/images/texture/paper.jpg") center / cover no-repeat;
  opacity: .42;
}

/* 2. Desert contour lines as an ambient motif. Deliberately NOT in the
      service-area section: that section already has a map, and two sets
      of contour lines behind each other is noise, not depth. It goes
      where there is real whitespace and no competing line art. */
#how, #bins { position: relative; isolation: isolate; overflow: hidden; }
#how > .wrap, #bins > .wrap { position: relative; z-index: 1; }
#how::before, #bins::before {
  content: ""; position: absolute; inset: -18% -10%; z-index: 0; pointer-events: none;
  background: url("/images/texture/contour.svg") center / 150% auto no-repeat;
  opacity: .30;
}
#how::before {
  -webkit-mask-image: radial-gradient(ellipse at 18% 55%, #000 8%, transparent 60%);
          mask-image: radial-gradient(ellipse at 18% 55%, #000 8%, transparent 60%);
}
#bins::before {
  opacity: .24;
  -webkit-mask-image: radial-gradient(ellipse at 82% 45%, #000 8%, transparent 58%);
          mask-image: radial-gradient(ellipse at 82% 45%, #000 8%, transparent 58%);
}

/* The dark bands stay solid ink; the paper ground must not bleed
   through them or the ambient dust loses its contrast. */
.band-dark { background-color: var(--ink); }

/* ---------- header condenses once you leave the hero ---------- */
.site-head { transition: box-shadow .35s var(--ease), background-color .35s var(--ease); }
.head-inner { transition: height .35s var(--ease); }
.site-head.is-stuck .head-inner { height: 62px; }
.site-head.is-stuck .brand-mark { width: 38px; height: 38px; transition: width .35s var(--ease), height .35s var(--ease); }
.brand-mark { transition: width .35s var(--ease), height .35s var(--ease); }
.site-head.is-stuck .brand-name span { opacity: 0; transition: opacity .25s var(--ease); }
.brand-name span { transition: opacity .3s var(--ease); }

/* ---------- gallery photographs respond to the cursor ---------- */
.gal .ba { overflow: hidden; }
.gal .ba img { transition: transform .7s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .gal:hover .ba img { transform: scale(1.028); }
}
.gal figcaption { transition: color .3s var(--ease); }

/* ---------- service cards lift with intent, not a generic shadow ---------- */
.svc { transition: background-color .35s var(--ease), transform .35s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .svc:hover { transform: translateY(-3px); }
  .svc:hover .svc-ico { color: var(--rust); transition: color .35s var(--ease); }
}
.svc-ico { transition: color .35s var(--ease); }

/* Tactile press feedback on every button, per WCAG-friendly affordance. */
.btn:active { transform: translateY(1px) scale(.985); }

@media (prefers-reduced-motion: reduce) {
  .site-head.is-stuck .head-inner { height: 76px; }
  .site-head.is-stuck .brand-mark { width: 48px; height: 48px; }
  .site-head.is-stuck .brand-name span { opacity: 1; }
  .gal:hover .ba img, .svc:hover { transform: none; }
}

/* ---------- FAQ disclosure ----------
   Native <details> does the work. Where the browser supports animating to
   an intrinsic size, the panel eases open; everywhere else it simply opens
   instantly, which is the correct fallback. No JS, so it cannot get stuck. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: block-size .34s var(--ease), opacity .28s var(--ease), content-visibility .34s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; opacity: 1; }
  @media (prefers-reduced-motion: reduce) {
    .faq details::details-content { transition: none; opacity: 1; }
  }
}

/* ---------- Google rating line ---------- */
.rating { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .6rem; font-size: clamp(.95rem, 1.5vw, 1.05rem); color: var(--fg-mute); }
.rating b { font-family: var(--display); font-weight: 600; font-size: 1.1em; color: var(--fg); letter-spacing: -.02em; }
.stars { display: inline-flex; gap: .12rem; }
.stars svg { width: 17px; height: 17px; fill: var(--sand); }
.reviews-cta { margin: clamp(2rem, 4vw, 3rem) 0 0; }