/* ============================================================
   PAIR OF DOTS — /websites-for-detailers
   A dark, photography-led page for the vehicle appearance trade.

   Self-contained on purpose. This page does NOT load styles.css.
   The house paper-and-ink world is light, letterpress and flat; this
   one is a lit bay at night. Overriding one into the other would be a
   specificity war that neither sheet wins, so the shared furniture
   (nav, loader, cursor, footer) is restated here in this world's
   colours. The markup stays identical to the rest of the site so
   main.js drives it unchanged.
   ============================================================ */

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

:root {
  /* Ground. Near-black with a green cast so it sits under the brand
     accent and matches the charcoal walls in the bay photography. */
  --bg:        #0A0C0B;
  --bg-2:      #101312;
  --bg-3:      #171B19;
  --bg-4:      #1E2320;

  --line:       #272C29;
  --line-hover: #3A413C;   /* the one raised hairline; every hover border uses it */
  --line-soft:  rgba(241, 243, 238, 0.08);

  --text:      #F1F3EE;
  --text-2:    #A7ADA5;
  --text-3:    #808780;

  --dot:       #B4E019;   /* electric peridot, the one accent */
  --dot-deep:  #8FB700;

  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-brand:   'Fraunces', Georgia, serif;
  --f-mono:    'Spline Sans Mono', ui-monospace, monospace;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --gutter:    clamp(20px, 4vw, 56px);
  --wrap:      1280px;

  /* Depth on a dark ground is atmospheric: offset plus real blur.
     The house letterpress shadow (0 2px 0 ink) does not belong here. */
  --lift-1: 0 2px 10px rgba(0, 0, 0, 0.45);
  --lift-2: 0 18px 44px rgba(0, 0, 0, 0.55);
  --lift-3: 0 30px 70px rgba(0, 0, 0, 0.6);
}

html { scroll-behavior: smooth; }
html:focus-within { scroll-behavior: smooth; }

body {
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; border: none; background: none; cursor: pointer; }

/* ---- Browser surfaces. These ship with defaults belonging to no
   design system, so they get themed like everything else. ---- */
::selection { background: var(--dot); color: #0A0C0B; }
:root { color-scheme: dark; caret-color: var(--dot); accent-color: var(--dot); }
* { scrollbar-color: var(--bg-4) var(--bg); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 99px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #2C332E; }

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

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

.skip-link {
  position: absolute; left: 50%; top: 10px; transform: translate(-50%, -140%);
  z-index: 10000; background: var(--dot); color: #0A0C0B;
  padding: 12px 22px; border-radius: 99px; font-weight: 700; font-size: 14px;
  transition: transform 0.2s var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ============ TYPE ============ */

.display, h1, h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 79;
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: 0.002em;
  text-wrap: balance;
}

h1 { font-size: clamp(43px, 7.4vw, 96px); }
h2 { font-size: clamp(32px, 4.6vw, 62px); }

h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-variation-settings: 'wdth' 92;
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.2;
  letter-spacing: 0.001em;
  text-wrap: balance;
}

p { max-width: 68ch; }

.lede {
  font-size: clamp(16px, 1.28vw, 19px);
  color: var(--text-2);
  max-width: 56ch;
}

.hl { color: var(--dot); }

/* Data and measurement only, never as a costume for "technical". */
.mono { font-family: var(--f-mono); font-weight: 500; }

/* ============ BUTTONS ============ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: clamp(15px, 1.1vw, 16.5px);
  padding: 16px 30px;
  border-radius: 99px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background 0.28s var(--ease-out), color 0.28s var(--ease-out),
              border-color 0.28s var(--ease-out), transform 0.28s var(--ease-out),
              box-shadow 0.28s var(--ease-out);
}

.btn-primary { background: var(--dot); color: #0A0C0B; box-shadow: var(--lift-1); }
.btn-primary:hover { background: #C3EE2E; transform: translateY(-2px); box-shadow: var(--lift-2); }
.btn-primary:active { transform: translateY(0) scale(0.985); }

.btn-ghost { background: rgba(241, 243, 238, 0.04); color: var(--text); border-color: var(--line); }
.btn-ghost:hover { background: rgba(241, 243, 238, 0.09); border-color: var(--line-hover); transform: translateY(-2px); }
.btn-ghost:active { transform: translateY(0) scale(0.985); }

.btn-lg { padding: 18px 34px; }

/* The two dots, carried into this world. Outlined then filled. */
.dots { display: inline-flex; align-items: center; gap: 5px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.dots i:first-child { border: 1.6px solid currentColor; }
.dots i:last-child { background: currentColor; }

/* ============ CURSOR ============ */

.cursor-dot, .cursor-tail {
  position: fixed; top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
}
/* Hidden until the pointer first moves, so neither dot sits parked in the
   middle of the hero on load. The inline script on the page adds the class. */
.cursor-dot, .cursor-tail { opacity: 0; }
body.pointer-live .cursor-dot, body.pointer-live .cursor-tail { opacity: 1; }
body.pointer-live .cursor-tail { opacity: 0.9; }

.cursor-dot {
  width: 9px; height: 9px; background: var(--dot);
  transform: translate(-50%, -50%);
  transition: background 0.25s, width 0.25s var(--ease-out), height 0.25s var(--ease-out), opacity 0.3s;
}
.cursor-tail {
  width: 34px; height: 34px;
  border: 1.5px solid rgba(180, 224, 25, 0.5);
  transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out),
              background 0.3s, border-color 0.3s, opacity 0.3s;
}
body.cursor-hover .cursor-dot { width: 13px; height: 13px; }
body.cursor-hover .cursor-tail {
  width: 54px; height: 54px;
  background: rgba(180, 224, 25, 0.12);
  border-color: var(--dot);
}
body.cursor-down .cursor-tail { width: 26px; height: 26px; }

@media (pointer: coarse) { .cursor-dot, .cursor-tail { display: none; } }

/* ============ LOADER ============ */

.loader {
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-content: center; justify-items: center; gap: 20px;
  background: var(--bg);
  transition: opacity 0.5s var(--ease-out), visibility 0.5s;
}
.loader.done { opacity: 0; visibility: hidden; }
.loader-dots { display: flex; gap: 9px; }
.loader-dots span { width: 11px; height: 11px; border-radius: 50%; background: var(--dot); animation: ldot 1.1s infinite ease-in-out; }
.loader-dots span:last-child { background: var(--text); animation-delay: 0.16s; }
.loader-word {
  font-family: var(--f-brand); font-weight: 900; font-size: 19px;
  letter-spacing: 0.01em; color: var(--text-3);
}
@keyframes ldot { 0%, 80%, 100% { transform: translateY(0); opacity: 0.55; } 40% { transform: translateY(-9px); opacity: 1; } }

/* ============ NAV ============ */

.nav {
  position: fixed; top: 16px; left: 0; right: 0; z-index: 900;
  display: flex; justify-content: center;
  padding-inline: var(--gutter);
  transition: transform 0.45s var(--ease-out), opacity 0.35s;
}
.nav.hidden { transform: translateY(-140%); opacity: 0; }
.nav-inner {
  width: 100%; max-width: var(--wrap);
  display: flex; align-items: center; gap: 18px;
  padding: 9px 9px 9px 20px;
  border-radius: 99px;
  background: rgba(10, 12, 11, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--line);
  box-shadow: var(--lift-1);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-brand); font-weight: 900; font-size: 20px;
  letter-spacing: 0.005em; margin-right: auto; white-space: nowrap;
}
.brand-dots { display: inline-flex; align-items: center; gap: 4px; }
.brand-dots i { width: 9px; height: 9px; border-radius: 50%; display: block; transition: transform 0.3s var(--ease-out); }
.brand-dots i:first-child { background: var(--dot); }
.brand-dots i:last-child { background: var(--text); }
.brand:hover .brand-dots i:first-child { transform: translateY(-3px); }
.brand:hover .brand-dots i:last-child { transform: translateY(3px); }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  font-size: 14.5px; font-weight: 500; color: var(--text-2);
  padding: 9px 15px; border-radius: 99px;
  transition: background 0.22s, color 0.22s;
}
.nav-links a:hover { background: rgba(241, 243, 238, 0.07); color: var(--text); }

.nav-cta {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--dot); color: #0A0C0B;
  font-weight: 650; font-size: 14.5px;
  padding: 11px 21px; border-radius: 99px;
  white-space: nowrap;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background 0.25s;
}
.nav-cta:hover { background: #C3EE2E; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(180, 224, 25, 0.22); }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-inner { padding-left: 18px; }
}
@media (max-width: 420px) {
  .brand { font-size: 17px; }
  .nav-cta { font-size: 13.5px; padding: 10px 16px; }
}

/* ============ HERO ============ */

.hero {
  position: relative;
  min-height: min(100svh, 860px);
  display: flex; align-items: flex-end;
  padding-top: 120px;
  padding-bottom: clamp(48px, 7vh, 88px);
  overflow: hidden;
  isolation: isolate;
}

.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 58%; }

/* The scrim does the work that makes text over photography legible.
   Two layers: a vertical ramp for the copy, a corner pool for depth. */
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(10, 12, 11, 0.97) 0%, rgba(10, 12, 11, 0.86) 26%, rgba(10, 12, 11, 0.42) 56%, rgba(10, 12, 11, 0.5) 100%),
    radial-gradient(120% 85% at 12% 100%, rgba(10, 12, 11, 0.85) 0%, rgba(10, 12, 11, 0) 62%);
}

/* Narrow viewports stack the copy taller, pushing the lede up into the lit
   part of the photo. Carry the scrim further up so the text keeps its ground. */
@media (max-width: 760px) {
  /* Solve legibility with the crop, not by drowning the photo. Framing the
     copy over dark bodywork lets the bay and the hexagons survive. */
  .hero-media img { object-position: 74% 62%; }
  .hero-scrim {
    background: linear-gradient(to top,
      rgba(10, 12, 11, 0.94) 0%,
      rgba(10, 12, 11, 0.74) 46%,
      rgba(10, 12, 11, 0.46) 72%,
      rgba(10, 12, 11, 0.34) 100%);
  }
}

.hero-inner { position: relative; width: 100%; }
.hero h1 { max-width: 15ch; }
.hero h1 .hl { display: inline-block; }

.hero-lede { margin-top: 26px; max-width: 54ch; font-size: clamp(16px, 1.32vw, 19.5px); color: #C6CBC3; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 36px; }

.hero-trades {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 40px; padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}
.hero-trades span {
  font-family: var(--f-body); font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--text-2);
  padding: 7px 14px; border-radius: 99px;
  border: 1px solid var(--line);
  background: rgba(241, 243, 238, 0.03);
}

/* The authored moment: the bay settles into focus once, on load. */
@media (prefers-reduced-motion: no-preference) {
  .hero-media img {
    transform: scale(1.07);
    filter: blur(9px);
    opacity: 0;
    transition: transform 2.2s var(--ease-out), filter 1.2s var(--ease-out), opacity 0.9s ease-out;
  }
  body.loaded .hero-media img { transform: scale(1); filter: blur(0); opacity: 1; }

  .hero-inner > * { opacity: 0; transform: translateY(16px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
  body.loaded .hero-inner > * { opacity: 1; transform: none; }
  body.loaded .hero-inner > *:nth-child(2) { transition-delay: 0.09s; }
  body.loaded .hero-inner > *:nth-child(3) { transition-delay: 0.17s; }
  body.loaded .hero-inner > *:nth-child(4) { transition-delay: 0.25s; }
}

/* ============ SECTIONS ============ */

section { position: relative; }
.pad { padding-block: clamp(84px, 12vh, 150px); }
.pad-sm { padding-block: clamp(60px, 8vh, 100px); }

.sec-head { margin-bottom: clamp(44px, 6vh, 72px); }
.sec-head h2 { max-width: 17ch; }
.sec-head p { margin-top: 20px; color: var(--text-2); max-width: 58ch; font-size: clamp(15.5px, 1.2vw, 18px); }

/* ---- The argument: five hairline-ruled rows ---- */

.reasons { border-top: 1px solid var(--line); }
.reason {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(20px, 3vw, 44px);
  padding-block: clamp(34px, 4.4vh, 52px);
  border-bottom: 1px solid var(--line);
  transition: background 0.4s var(--ease-out);
}
.reason:hover { background: rgba(241, 243, 238, 0.018); }
.reason h3 { max-width: 27ch; }
/* 58ch, not 62: Archivo's ch box is wider than its average glyph, so 62ch
   still measured 78 characters on the line. */
.reason p { color: var(--text-2); font-size: clamp(15px, 1.15vw, 16.8px); max-width: 58ch; }

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

/* ---- Photo band ---- */

/* ---- Full bleed frame ---- */

.bleed { position: relative; }
.bleed figure { position: relative; overflow: hidden; background: var(--bg-2); }
.bleed img {
  width: 100%;
  height: clamp(320px, 62vh, 620px);
  object-fit: cover; object-position: 50% 64%;
}
.bleed figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(70px, 14vh, 150px) 0 clamp(24px, 3.6vh, 38px);
  background: linear-gradient(to top,
    rgba(10, 12, 11, 0.97) 0%,
    rgba(10, 12, 11, 0.88) 34%,
    rgba(10, 12, 11, 0.5) 68%,
    rgba(10, 12, 11, 0) 100%);
}
/* Full bleed frame, wrap-aligned text: the caption starts on the same left
   edge as every other section rather than floating centred. */
.bleed figcaption span {
  display: block;
  padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  font-family: var(--f-display); font-weight: 700;
  font-variation-settings: 'wdth' 92;
  font-size: clamp(17px, 1.95vw, 27px); line-height: 1.2;
  letter-spacing: -0.005em;
  /* Two lines, so the text stays in the strong part of the scrim instead of
     riding up across the lit bodywork. Box-sizing keeps the measure honest
     once the wrap-alignment padding is added. */
  box-sizing: content-box;
  max-width: 46ch; text-wrap: balance;
}

/* ---- Photo band, asymmetric ---- */

.band { position: relative; }
.band-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(10px, 1.4vw, 20px);
  align-items: end;
}
.band figure { position: relative; overflow: hidden; border-radius: 6px; background: var(--bg-2); }
.band img { width: 100%; height: 100%; object-fit: cover; }
.band-lg img { aspect-ratio: 16 / 10; }
.band-sm img { aspect-ratio: 4 / 5; }
.band figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 22px 18px;
  font-family: var(--f-body); font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; color: #D8DDD4;
  background: linear-gradient(to top, rgba(10, 12, 11, 0.92), rgba(10, 12, 11, 0));
}
@media (max-width: 700px) {
  .band-grid { grid-template-columns: 1fr; }
  .band-sm img { aspect-ratio: 4 / 3; }
}

/* ---- What we build: hairline table, not a card grid ---- */

.builds { border-top: 1px solid var(--line); }
.build {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(16px, 3vw, 48px);
  align-items: baseline;
  padding-block: clamp(24px, 3vh, 34px);
  border-bottom: 1px solid var(--line);
}
.build h3 { font-variation-settings: 'wdth' 100; font-size: clamp(17px, 1.35vw, 20px); }
.build p { color: var(--text-2); font-size: clamp(14.6px, 1.1vw, 16.2px); max-width: 62ch; }
@media (max-width: 760px) { .build { grid-template-columns: 1fr; gap: 9px; } }

/* ---- Work ---- */

.work-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 42px);
}
.work-card { display: block; }
.work-media {
  position: relative; overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  box-shadow: var(--lift-1);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.5s;
}
.work-card:hover .work-media { transform: translateY(-6px); box-shadow: var(--lift-3); border-color: var(--line-hover); }
.work-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top center; }

.work-badge {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-body); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.11em;
  padding: 7px 13px; border-radius: 99px;
  background: rgba(10, 12, 11, 0.82);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line); color: var(--text);
}
.work-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }

.work-visit {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-content: center;
  background: rgba(10, 12, 11, 0.82);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line); color: var(--text);
  opacity: 0; transform: translateY(-4px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), background 0.3s, color 0.3s;
}
.work-visit svg { width: 17px; height: 17px; }
.work-card:hover .work-visit { opacity: 1; transform: none; background: var(--dot); color: #0A0C0B; border-color: var(--dot); }

.work-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 20px; }
.work-meta h3 { font-variation-settings: 'wdth' 100; }
.work-meta p {
  font-family: var(--f-body); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-2);
  white-space: nowrap;
}
.work-note { margin-top: 9px; color: var(--text-2); font-size: 14.8px; }

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

/* ---- Pricing ---- */

.price-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.4vw, 28px);
  align-items: stretch;
}
.price-grid.one { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
.price {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: clamp(28px, 3.2vw, 44px);
  box-shadow: var(--lift-1);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s;
}
.price:hover { transform: translateY(-4px); box-shadow: var(--lift-2); border-color: var(--line-hover); }
.price.featured { background: var(--bg-3); border-color: rgba(180, 224, 25, 0.42); }

.price-tag {
  position: absolute; top: 0; right: clamp(24px, 3vw, 40px);
  transform: translateY(-50%);
  font-family: var(--f-body); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  background: var(--dot); color: #0A0C0B;
  padding: 8px 15px; border-radius: 99px;
}

.price h3 {
  font-variation-settings: 'wdth' 88;
  font-size: clamp(21px, 1.7vw, 26px);
  text-transform: uppercase;
}

/* The figure carries this section, so it runs at display scale. */
.price-fig { display: flex; align-items: baseline; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.price-fig b {
  font-family: var(--f-display); font-variation-settings: 'wdth' 76;
  font-weight: 800; font-size: clamp(62px, 7.6vw, 104px); line-height: 0.86;
  letter-spacing: -0.012em;
  font-variant-numeric: tabular-nums;
}
.price-fig span { font-family: var(--f-mono); font-size: 14px; color: var(--text-2); }

.price-then { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 15.2px; }
.price-then strong { color: var(--text); font-weight: 600; }

.price-note { margin-top: 14px; font-size: 14px; color: var(--text-3); }

/* Stated once for both paths instead of two identical checklists. */
.price-shared {
  margin-top: clamp(20px, 2.6vw, 30px);
  padding: clamp(24px, 2.6vw, 34px) clamp(24px, 3vw, 40px);
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(241, 243, 238, 0.022);
}
.price-shared-lead { font-size: 15.2px; color: var(--text); font-weight: 600; margin-bottom: 18px; }
.price-shared ul {
  list-style: none; display: grid; gap: 12px 30px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.price-shared li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 15px; color: var(--text-2); }
.price-shared li svg { width: 15px; height: 15px; margin-top: 4px; color: var(--dot); }

@media (max-width: 800px) { .price-grid { grid-template-columns: 1fr; } .price-tag { right: auto; left: clamp(24px, 3vw, 40px); } }

/* ---- Quote form ---- */

.quote { background: var(--bg-2); border-top: 1px solid var(--line); }
.quote-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: start;
}
@media (max-width: 900px) { .quote-grid { grid-template-columns: 1fr; } }

.quote-side h2 { max-width: 13ch; }
.quote-side .lede { margin-top: 20px; }
.quote-points { list-style: none; margin-top: 30px; display: grid; gap: 13px; }
.quote-points li { display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start; color: var(--text-2); font-size: 15px; }
.quote-points svg { width: 15px; height: 15px; margin-top: 4px; color: var(--dot); }

.form-panel {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: clamp(26px, 3vw, 40px);
  box-shadow: var(--lift-2);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

/* Direct child only. A descendant selector here also caught the <label>
   wrapping each service checkbox and shouted its text in tracked mono. */
.field > label, .field > legend {
  font-family: var(--f-mono); font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--text-2);
  padding: 0;
}
.field > label .opt, .field > legend .opt { text-transform: none; letter-spacing: 0.04em; color: var(--text-2); }
fieldset.field { border: 0; margin: 0; }
fieldset.field > legend { margin-bottom: 8px; }

.field input, .field select, .field textarea {
  font-family: var(--f-body); font-size: 15.5px; color: var(--text);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 7px; padding: 12px 14px;
  width: 100%;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.field textarea { resize: vertical; min-height: 104px; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-2); opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-hover); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--dot);
  background: #0D100E;
  box-shadow: 0 0 0 3px rgba(180, 224, 25, 0.14);
}
/* Error state. :user-invalid only fires after the visitor has actually
   interacted, so nothing is red on arrival. */
.field input:user-invalid, .field textarea:user-invalid {
  border-color: #E4674A;
  background: rgba(228, 103, 74, 0.06);
}
.field input:user-invalid:focus, .field textarea:user-invalid:focus {
  box-shadow: 0 0 0 3px rgba(228, 103, 74, 0.18);
}
.field .err { display: none; font-size: 13px; color: #F0917B; }
.field input:user-invalid ~ .err, .field textarea:user-invalid ~ .err { display: block; }

.field select {
  appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A7ADA5' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 15px;
}

/* Checkbox group: the services this shop actually sells. */
.checks { display: flex; flex-wrap: wrap; gap: 9px; }
.check { position: relative; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check span {
  display: inline-block; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--text-2);
  padding: 9px 16px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--bg);
  transition: background 0.22s, color 0.22s, border-color 0.22s;
}
.check span:hover { border-color: var(--line-hover); color: var(--text); }
.check input:checked + span { background: var(--dot); color: #0A0C0B; border-color: var(--dot); font-weight: 600; }
.check input:focus-visible + span { outline: 2px solid var(--dot); outline-offset: 3px; }

.form-actions { margin-top: 28px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.form-note { font-size: 13.4px; color: var(--text-2); max-width: 34ch; }

/* Submitting state, so the button reports that the POST is in flight. */
form.is-sending .btn-primary { pointer-events: none; opacity: 0.72; }
form.is-sending .btn-primary .btn-label::after {
  content: ''; display: inline-block;
  width: 12px; height: 12px; margin-left: 9px; vertical-align: -1px;
  border: 2px solid rgba(10, 12, 11, 0.3); border-top-color: #0A0C0B;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  form.is-sending .btn-primary .btn-label::after { animation: none; border-top-color: rgba(10, 12, 11, 0.3); }
}

/* ---- Also worth a look ---- */

.also { border-top: 1px solid var(--line); }
.also-row { display: flex; flex-wrap: wrap; gap: 10px; }
.also-row a {
  font-size: 14.5px; font-weight: 500; color: var(--text-2);
  padding: 11px 20px; border-radius: 99px;
  border: 1px solid var(--line);
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--ease-out);
}
.also-row a:hover { background: rgba(241, 243, 238, 0.06); color: var(--text); border-color: var(--line-hover); transform: translateY(-2px); }

/* ============ FOOTER ============ */

.footer { background: var(--bg-2); border-top: 1px solid var(--line); padding-top: clamp(56px, 8vh, 90px); overflow: hidden; }
.footer-mark {
  font-family: var(--f-brand); font-weight: 900;
  font-size: clamp(58px, 15vw, 210px); line-height: 0.9;
  text-align: center; color: transparent;
  -webkit-text-stroke: 1px #2C332E;
  display: flex; align-items: center; justify-content: center; gap: 0.1em;
  user-select: none; margin-bottom: -0.06em;
}
.fm-dot { width: 0.13em; height: 0.13em; border-radius: 50%; background: #2C332E; display: inline-block; }
.footer-area { color: var(--text-3); font-size: 14.2px; max-width: 74ch; padding-top: clamp(32px, 5vh, 54px); }
.footer-area a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); transition: color 0.2s, text-decoration-color 0.2s; }
.footer-area a:hover { color: var(--dot); text-decoration-color: var(--dot); }

.footer-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  margin-top: clamp(30px, 4vh, 46px);
  padding-block: 26px;
  border-top: 1px solid var(--line);
  font-size: 13.6px; color: var(--text-3);
}
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.footer-links a { transition: color 0.2s; }
.footer-links a:hover { color: var(--dot); }
.to-top { display: inline-flex; align-items: center; gap: 6px; }
.to-top svg { width: 13px; height: 13px; }

/* ============ REVEALS ============ */

@media (prefers-reduced-motion: no-preference) {
  html.js-anim .reveal { opacity: 0; transform: translateY(14px); }
  html.js-anim .reveal.in-view {
    opacity: 1; transform: none;
    transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
    transition-delay: var(--d, 0s);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .cursor-dot, .cursor-tail, .loader { display: none; }
  .hero-media img { opacity: 1; transform: none; filter: none; }
  .hero-inner > * { opacity: 1; transform: none; }
}