/* ═══════════════════════════════════════════════════════════════════════
   webpage.contact — Night Shift

   Dark, dense, and short. The daylight version said everything and took
   13,000px to say it; this one makes its case in five screens: the pitch,
   the proof, the price, the form. If the page itself doesn't sell a fast
   site, no paragraph underneath it will.

   Two palettes on purpose. The PAGE is ink: charcoal panels, warm cream
   text, one electric blue. The MOCK-UPS inside it (the compare frame, the
   six example builds) keep their own light "paper" tokens — client sites
   drawn at full brightness inside a dark frame is the contrast doing the
   selling.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* the page */
  --bg:      #0e1014;
  --panel:   #151920;
  --panel-2: #1a1f28;
  --line:    #262c37;
  --line-2:  #323947;
  --text:    #ece7dd;   /* warm cream, the brand's paper carried over    */
  --muted:   #a7abb4;
  --faint:   #7d828d;
  --blue:    #6e9be8;   /* the navy, turned up so it reads on ink        */
  --blue-deep: #1b3a6b; /* the brand navy, for fills                     */
  --hot:     #ece7dd;   /* the loudest thing on the page is cream        */

  /* the mock-ups' own daylight — do not use these for page chrome */
  --paper:   #faf7f2;
  --paper-2: #f2ede4;
  --card:    #ffffff;
  --ink:     #16181c;
  --ink-50:  #6b6459;
  --rule:    #ded7cb;
  --rule-2:  #cfc6b6;

  --display: Archivo, 'Helvetica Neue', Helvetica, sans-serif;
  --body: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --wrap: 1200px;
  --gap: clamp(.8rem, 1.6vw, 1.1rem);
  --sect: clamp(1.9rem, 3.2vw, 2.75rem);
  --r: 3px;
}

/* ── Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: clamp(.98rem, .2vw + .93rem, 1.04rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
svg { display: block; width: 100%; height: 100%; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }

:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 1rem; top: -5rem; z-index: 100;
  background: var(--blue-deep); color: var(--paper);
  padding: .7rem 1.1rem;
  font-family: var(--display); font-weight: 700; font-size: .85rem;
  text-decoration: none; transition: top .15s;
}
.skip:focus { top: 1rem; }

/* ── Layout ──────────────────────────────────────────────────────────── */
.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--sect); border-top: 1px solid var(--line); }

/* Section heads are one row, not a stacked block: headline left, note
   right, rule underneath. A dashboard labels its panels; it doesn't
   introduce them. */
.rowhead {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.25rem;
  margin-bottom: clamp(.9rem, 1.6vw, 1.25rem);
}
.rowhead h2 { margin-right: auto; }
.rowhead-note { margin: 0; font-size: .92rem; color: var(--muted); }

/* ── Type ────────────────────────────────────────────────────────────── */
h1, h2, h3, .amount, .brand-word {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); }
h2 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.022em; line-height: 1.25; }

.dim { color: var(--faint); }

.lede {
  font-size: clamp(1.05rem, .4vw + .98rem, 1.18rem);
  color: var(--muted);
  max-width: 44ch;
  margin: .9rem 0 1.25rem;
}
.lede-sm { font-size: 1rem; color: var(--muted); max-width: 60ch; margin: .6rem 0 .8rem; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  font-family: var(--display); font-weight: 700;
  font-size: .92rem; letter-spacing: -.005em;
  padding: .72rem 1.2rem;
  border: 1.5px solid transparent;
  border-radius: var(--r);
  text-decoration: none; cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.btn-lg { font-size: .97rem; padding: .85rem 1.45rem; }
.btn-block { width: 100%; }

/* The loud one: cream on ink. Light-switch contrast, no gradient. */
.btn-hot { background: var(--hot); color: #14161a; }
.btn-hot:hover { background: #fff; }

.btn-line { background: transparent; border-color: var(--line-2); color: var(--text); }
.btn-line:hover { border-color: var(--text); }

/* ── Top bar ─────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar.is-stuck { box-shadow: 0 8px 24px -16px rgba(0, 0, 0, .8); }
.topbar-inner { display: flex; align-items: center; gap: var(--gap); padding-block: .7rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; margin-right: auto; }
.brand-word { font-size: 1.05rem; letter-spacing: -.03em; }
.brand-word em { font-style: normal; color: var(--blue); }
/* The real mark: globe + cursor, transparent PNG — renders clean on any
   background, no blend tricks needed. */
.brand-mark {
  width: 34px; height: 34px; flex: none; display: block;
  filter: brightness(1.15);   /* the mark's glow was tuned for light paper */
}
.topnav { display: flex; gap: 1.35rem; }
.topnav a {
  text-decoration: none; font-family: var(--display); font-size: .9rem; color: var(--muted);
  padding-block: .15rem; border-bottom: 2px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.topnav a:hover { color: var(--text); border-bottom-color: var(--blue); }

@media (max-width: 760px) { .topnav { display: none; } }

/* ── Entrance ────────────────────────────────────────────────────────── */
.rise { animation: rise .6s cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--d, 0ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
.reveal.is-in { opacity: 1; transform: none; }

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

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero {
  padding-block: clamp(1.6rem, 3vw, 2.5rem);
  background:
    radial-gradient(56rem 30rem at 82% -12%, rgba(110, 155, 232, .1), transparent 65%),
    var(--bg);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.open-sign {
  display: inline-flex; align-items: center; gap: .6rem;
  border: 1px solid var(--line-2); border-left: 3px solid var(--blue);
  background: var(--panel);
  padding: .5rem .8rem; margin: 0 0 1.1rem;
  font-family: var(--display);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--blue);
}
.open-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--blue); }

/* The four numbers, 2×2, in a panel. */
.hero-figures {
  margin: 1rem 0 0; border: 1px solid var(--line); border-right: 0;
  background: var(--panel); max-width: 32rem;
  display: grid; grid-template-columns: 1fr 1fr;
}
.hero-figures > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; padding: .5rem .8rem;
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
}
.hero-figures > div:nth-last-child(-n+2) { border-bottom: 0; }
.hero-figures dt {
  margin: 0; font-family: var(--display);
  font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--faint);
}
.hero-figures dd {
  margin: 0; font-family: var(--display); font-weight: 800;
  font-size: 1.08rem; color: var(--text);
}
.hero-figures dd.free { color: var(--blue); }
.hero-figures dd small { font-size: .66rem; font-weight: 600; color: var(--faint); }
.hero-figures dd.plain { font-family: var(--body); font-size: .88rem; font-weight: 600; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}
/* On a phone the frame can't show a useful slice of both sides. */
@media (max-width: 760px) {
  .compare { display: none; }
}

/* ── The before/after frame ──────────────────────────────────────────── */
.compare { margin: 0; position: relative; }
.frame {
  position: relative;
  text-align: left;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
}
.frame-bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .55rem .9rem;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}
.frame-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.frame-url { margin-left: .75rem; font-size: .78rem; color: var(--muted); font-family: var(--display); }
.frame-drag {
  margin-left: auto;
  font-family: var(--display);
  font-size: .66rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue);
}
.frame-drag::after { content: ' \2192'; }

.frame-screen {
  position: relative;
  aspect-ratio: 3 / 2;
  container-type: inline-size;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  touch-action: pan-y;
}
.shot { position: absolute; inset: 0; }

/* Before — clipped from the left by the handle. */
.shot-before { clip-path: inset(0 calc(100% - var(--split, 48%)) 0 0); background: #fff; }
.bf-inner {
  font-family: 'Times New Roman', Times, serif;
  color: #000; background: #fff;
  font-size: 2.35cqw;
  line-height: 1.4;
  height: 100%; display: flex; flex-direction: column;
}
.bf-banner {
  font-weight: bold; color: #000080; text-align: center;
  font-size: 1.3em; padding: .65em .5em;
  text-decoration: underline;
  background: #e8e8f0; border-bottom: 2px solid #000080;
  flex: none;
}
.bf-body { flex: 1; display: flex; min-height: 0; }
.bf-side {
  width: 30%; flex: none;
  background: #dcdce8; border-right: 2px solid #000080;
  padding: .8em .7em;
  display: flex; flex-direction: column; gap: .35em;
}
.bf-side-head { font-weight: bold; color: #000080; border-bottom: 1px solid #9a9ab0; padding-bottom: .3em; }
.bf-side a { color: #0000ee; }
.bf-counter {
  margin-top: auto; text-align: center;
  background: #000; color: #0f0;
  font-family: 'Courier New', monospace; letter-spacing: .12em;
  padding: .35em .4em;
}
.bf-main { padding: .9em 1em; display: flex; flex-direction: column; }
.bf-construction { color: #c00; margin-bottom: .8em; }
.bf-text { margin: 0 0 .7em; }
.bf-text a { color: #0000ee; }
.bf-services { margin: 0 0 .7em; padding-left: 1.4em; }
.bf-services li { margin-bottom: .15em; }
.bf-small { font-size: .9em; }
.bf-footer { color: #666; font-size: .85em; margin-top: auto; padding-top: 1em; }

/* After — daylight inside the dark page, which is the point. */
.shot-after {
  background: var(--paper);
  display: flex; flex-direction: column;
  font-size: 2.35cqw;
  color: var(--ink);
}
.af-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8em 1.1em; flex: none;
  background: var(--card);
  border-bottom: 1px solid var(--rule);
}
.af-logo { font-family: var(--display); font-weight: 800; font-size: 1.02em; letter-spacing: -.03em; }
.af-logo em { font-style: normal; color: var(--blue-deep); }
.af-call {
  font-family: var(--display); font-weight: 700; font-size: .82em;
  background: var(--blue-deep); color: var(--paper);
  padding: .5em .9em;
}
.af-hero {
  flex: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.4em; align-items: center;
  padding: 1.3em 1.2em;
}
.af-eyebrow {
  font-family: var(--display);
  font-size: .72em; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue-deep);
  margin: 0 0 .55em;
}
.af-hero h3 { font-size: 2.15em; line-height: 1.02; margin: 0 0 .85em; font-weight: 800; }
.af-btns { display: flex; gap: .45em; }
.af-btn {
  font-family: var(--display); font-weight: 700; font-size: .82em;
  background: var(--blue-deep); color: var(--paper); padding: .6em .95em;
}
.af-btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.af-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--blue-deep);
  padding: .95em .9em;
  display: flex; flex-direction: column; gap: .32em;
}
.af-card-status { display: flex; align-items: center; gap: .4em; font-weight: 600; font-size: .82em; color: #1f6b40; }
.af-live { width: 6px; height: 6px; border-radius: 50%; background: #1f6b40; }
.af-card-num { font-family: var(--display); font-weight: 800; font-size: 1.2em; letter-spacing: -.03em; }
.af-card-sub { font-size: .87em; color: var(--ink-50); line-height: 1.45; }
.af-card-btn {
  margin-top: .35em; text-align: center;
  font-family: var(--display); font-weight: 700; font-size: .8em;
  border: 1.5px solid var(--ink);
  padding: .6em;
}
.af-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule); flex: none;
  background: var(--card);
}
.af-strip > div {
  padding: .65em .8em; text-align: center;
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: .12em;
}
.af-strip > div:last-child { border-right: 0; }
.af-strip strong { font-family: var(--display); font-weight: 700; font-size: .95em; }
.af-strip span { color: var(--ink-50); font-size: .85em; }

/* Handle */
.handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--split, 48%);
  width: 2px; margin-left: -1px;
  background: var(--blue);
  pointer-events: none;
}
.handle-grip {
  position: absolute; top: 50%; left: 50%;
  translate: -50% -50%;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--blue-deep);
  border: 2px solid var(--blue);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}
.handle-grip::before, .handle-grip::after {
  content: ''; position: absolute; top: 50%; translate: 0 -50%;
  width: 0; height: 0; border-block: 5px solid transparent;
}
.handle-grip::before { left: 9px; border-right: 7px solid var(--paper); }
.handle-grip::after  { right: 9px; border-left: 7px solid var(--paper); }

.compare-range { width: 100%; margin-top: .8rem; accent-color: var(--blue); }
.compare-hint {
  display: flex; justify-content: space-between; gap: 1rem;
  margin: .4rem 0 0; font-size: .84rem; color: var(--faint);
}
.compare-hint span:last-child { text-align: right; }

/* ── The work — six mini-sites ───────────────────────────────────────── */
.builds {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(3, 1fr);
}
.build {
  background: var(--panel); border: 1px solid var(--line);
  display: flex; flex-direction: column;
  border-radius: var(--r); overflow: hidden;
}
.build-site { height: 235px; overflow: hidden; }
.build-foot {
  padding: .5rem .85rem; border-top: 1px solid var(--line);
  display: flex; align-items: baseline; gap: .6rem;
}
.build-trade { font-family: var(--display); font-weight: 800; font-size: .9rem; letter-spacing: -.03em; }
.build-note { font-size: .82rem; color: var(--faint); margin-left: auto; text-align: right; }

/* Shared furniture of a mini-site. Each .bs-* skin overrides it. */
.build-site .bs-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem 1rem; font-size: .7rem;
}
.build-site .bs-name { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; }
.build-site .bs-name em { font-style: normal; font-weight: 500; opacity: .7; }
.build-site .bs-num { margin-left: auto; font-family: var(--display); font-weight: 700; }
.build-site .bs-body { padding: 1rem 1rem; display: flex; flex-direction: column; gap: .7rem; }
.build-site h3 { font-size: 1.45rem; line-height: 1.03; }
.build-site .bs-eyebrow {
  margin: 0; font-family: var(--display); font-size: .6rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
}
.build-site .bs-list { display: flex; flex-direction: column; gap: .35rem; font-size: .72rem; }
.build-site .bs-list > span { display: flex; justify-content: space-between; gap: .6rem; }
.build-site .bs-cta {
  font-family: var(--display); font-weight: 700; font-size: .66rem;
  padding: .6rem; text-align: center; letter-spacing: .04em;
}
.build-site .bs-chips { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.build-site .bs-chips span { padding: .5rem; font-size: .63rem; text-align: center; }
.build-site .bs-small { margin: 0; font-size: .68rem; line-height: 1.5; }

/* Plumber — the emergency case. */
.bs-plumb { background: #16181c; color: var(--paper); }
.bs-plumb .bs-bar { border-bottom: 1px solid #33363d; }
.bs-plumb .bs-num, .bs-plumb .bs-eyebrow { color: #7fa5e0; }
.bs-plumb .bs-btns { display: flex; gap: .4rem; }
.bs-plumb .bs-btn {
  font-family: var(--display); font-size: .62rem; font-weight: 700;
  background: var(--blue-deep); color: var(--paper); padding: .5rem .85rem; border-radius: var(--r);
}
.bs-plumb .bs-btn.ghost { background: transparent; border: 1px solid #4c5361; color: #d7dae0; }
.bs-plumb .bs-card { background: #1f2228; border: 1px solid #33363d; padding: .65rem; display: flex; flex-direction: column; gap: .25rem; }
.bs-plumb .bs-live {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--display); font-size: .58rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #6ee7a8;
}
.bs-plumb .bs-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #6ee7a8; }
.bs-plumb .bs-big { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.03em; }
.bs-plumb .bs-small { color: #9aa4b5; }

/* Barber — signage, not software. */
.bs-barber { background: #0e0e0c; color: #f3ece0; }
.bs-barber .bs-bar { border-bottom: 1px solid #2a2823; letter-spacing: .14em; }
.bs-barber .bs-name, .bs-barber .bs-num { font-family: Impact, Haettenschweiler, var(--display); font-weight: 400; letter-spacing: .12em; }
.bs-barber .bs-num { color: #c9a227; }
.bs-barber h3 {
  font-family: Impact, Haettenschweiler, var(--display); font-weight: 400;
  font-size: 2.4rem; line-height: .9; letter-spacing: .01em;
}
.bs-barber .bs-hr { height: 2px; width: 54px; background: #c9a227; }
.bs-barber .bs-list { color: #b8b1a4; }
.bs-barber .bs-list > span { border-bottom: 1px solid #2a2823; padding-bottom: .3rem; }
.bs-barber .bs-list > span > span:last-child { color: #f3ece0; }
.bs-barber .bs-cta { background: #c9a227; color: #0e0e0c; letter-spacing: .14em; }

/* Café — the menu is the product. */
.bs-cafe { background: #f6efe3; color: #2f2a22; }
.bs-cafe .bs-bar { border-bottom: 1px solid #e0d5c1; justify-content: center; }
.bs-cafe .bs-name { font-family: Georgia, serif; font-weight: 400; font-size: 1.05rem; letter-spacing: .01em; }
.bs-cafe .bs-body { text-align: center; }
.bs-cafe .bs-eyebrow { color: #a1743c; letter-spacing: .18em; }
.bs-cafe h3 { font-family: Georgia, serif; font-weight: 400; font-size: 1.6rem; line-height: 1.08; letter-spacing: 0; }
.bs-cafe .bs-list { text-align: left; border-top: 1px solid #e0d5c1; padding-top: .6rem; }
.bs-cafe .bs-list > span > span:last-child { color: #a1743c; }
.bs-cafe .bs-cta { border: 1.5px solid #2f2a22; }

/* Tattoo studio — editorial. */
.bs-tattoo { background: #f5f2ee; color: #131313; }
.bs-tattoo .bs-bar { border-bottom: 1.5px solid #131313; }
.bs-tattoo .bs-name { font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; }
.bs-tattoo .bs-num { font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: #6b6055; }
.bs-tattoo h3 { font-size: 1.7rem; line-height: .95; letter-spacing: -.045em; }
.bs-tattoo h3 em { font-style: italic; font-family: Georgia, serif; font-weight: 400; letter-spacing: -.01em; }
.bs-tattoo .bs-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.bs-tattoo .bs-swatches span { aspect-ratio: 1; background: #131313; }
.bs-tattoo .bs-swatches span:nth-child(2) { background: #c1362f; }
.bs-tattoo .bs-swatches span:nth-child(4) { background: #d8cfc2; }
.bs-tattoo .bs-list { color: #4a443c; border-top: 1px solid #ddd6cb; padding-top: .55rem; font-size: .7rem; }
.bs-tattoo .bs-list > span > span:last-child { color: #131313; }

/* Auto repair — utility. */
.bs-auto { background: #1c1f22; color: #e8e6e1; }
.bs-auto .bs-bar { background: #f0b429; color: #1c1f22; }
.bs-auto .bs-num { font-weight: 800; }
.bs-auto h3 { font-size: 1.35rem; line-height: 1.02; }
.bs-auto .bs-chips span { border: 1px solid #3a3f44; color: #b6b2aa; }
.bs-auto .bs-cta { background: #f0b429; color: #1c1f22; font-weight: 800; letter-spacing: -.01em; font-size: .7rem; }

/* Landscaper — sells the finished garden. */
.bs-garden { background: var(--card); color: #1b2419; }
.bs-garden .bs-hero {
  height: 108px; position: relative; overflow: hidden;
  background: linear-gradient(155deg, #3d5f38 0%, #24391f 70%);
}
.bs-garden .bs-kicker {
  position: absolute; left: 1rem; top: .8rem;
  font-family: var(--display); font-size: .55rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: #b9cfae;
}
.bs-garden .bs-headline {
  position: absolute; left: 1rem; bottom: .8rem;
  font-family: Georgia, serif; font-size: 1.4rem; color: #f2f5ee; line-height: 1.05;
}
.bs-garden .bs-chips { grid-template-columns: repeat(4, 1fr); }
.bs-garden .bs-chips span { border: 1px solid #d6dcd2; color: #4b5748; }
.bs-garden .bs-small { color: #4b5748; }
.bs-garden .bs-cta { background: #2f4a2c; color: #f2f5ee; }

@media (max-width: 980px) { .builds { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .builds { grid-template-columns: 1fr; } }

/* ── Already on Shopify — the other half of the work ─────────────────── */
/* The six builds above are sites made from scratch. This panel is the case
   where the store already exists and the job is theme work instead. Same
   split as the hero: ink on the left doing the talking, a daylight mock-up
   on the right doing the proving. */
.shopify-panel {
  margin-top: var(--gap);
  background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r);
  display: grid; grid-template-columns: 1fr .92fr;
  gap: clamp(1.25rem, 2.6vw, 2.4rem);
  padding: clamp(1.1rem, 2.2vw, 1.7rem);
  align-items: center;
}
.sp-copy { min-width: 0; }
.sp-eyebrow {
  margin: 0 0 .55rem;
  font-family: var(--display); font-size: .66rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--blue);
}
.sp-copy h3 { font-size: clamp(1.3rem, 2.1vw, 1.7rem); font-weight: 800; letter-spacing: -.035em; }
.sp-lede { margin: .85rem 0 1rem; font-size: .98rem; color: var(--muted); max-width: 52ch; }
.sp-list {
  list-style: none; padding: 0; margin: 0 0 1.1rem;
  display: grid; gap: .4rem; font-size: .92rem; color: var(--muted);
}
.sp-list li { position: relative; padding-left: 1.5rem; }
.sp-list li::before {
  content: ''; position: absolute; left: 0; top: .45em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  rotate: -45deg;
}
.sp-price { margin: 0 0 1rem; display: flex; align-items: baseline; gap: .45rem; }

/* The mini page keeps the mock-ups' daylight tokens — it is a picture of a
   client's storefront, not page chrome. Flat boxes stand in for the inputs;
   nothing here is focusable, and the whole block is aria-hidden. */
.sp-demo { margin: 0; min-width: 0; }
.sp-mini {
  display: grid; gap: .55rem;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r);
  padding: 1rem 1rem 1.1rem;
}
.sp-mini-h { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.03em; }
.sp-mini-sub { font-size: .74rem; color: var(--ink-50); margin-bottom: .15rem; }
.sp-mini-row { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.sp-mini-f { display: grid; gap: .22rem; min-width: 0; }
.sp-mini-f i {
  font-style: normal;
  font-family: var(--display); font-weight: 700; font-size: .6rem;
  letter-spacing: .04em; color: var(--ink-50);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-mini-f b {
  display: block; height: 1.55rem;
  background: var(--card); border: 1px solid var(--rule-2); border-radius: 2px;
}
.sp-mini-f b.area { height: 3.8rem; }
/* The subject field is a select in the Liquid — draw its caret. */
.sp-mini-f b.sel {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-50) 50%),
                    linear-gradient(135deg, var(--ink-50) 50%, transparent 50%);
  background-position: calc(100% - 14px) calc(50% + 1px), calc(100% - 9px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.sp-mini-btn {
  justify-self: start; margin-top: .2rem;
  background: var(--ink); color: var(--paper);
  font-family: var(--display); font-weight: 700; font-size: .72rem;
  padding: .6rem 1.1rem; border-radius: 2px;
}
.sp-demo-cap { margin-top: .55rem; font-size: .78rem; color: var(--faint); }

@media (max-width: 860px) {
  .shopify-panel { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 420px) {
  .sp-mini-row { grid-template-columns: 1fr; }
}

/* ── What's included — one dense strip of ticks ──────────────────────── */
.ticks {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
.ticks li {
  position: relative;
  background: var(--panel);
  padding: .75rem .9rem .75rem 2.1rem;
  font-size: .9rem; color: var(--muted);
}
.ticks li em { font-style: normal; color: var(--text); font-weight: 600; }
.ticks li::before {
  content: ''; position: absolute; left: .8rem; top: 1.15em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  rotate: -45deg;
}
@media (max-width: 980px) { .ticks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ticks { grid-template-columns: 1fr; } }

.strip-note {
  margin: .9rem 0 0; max-width: none;
  font-size: .9rem; color: var(--faint);
  border-left: 3px solid var(--line-2); padding-left: .9rem;
}
.strip-note a { color: var(--blue); }

/* ── Shop (hidden until configured in main.js) ───────────────────────── */
.shop-grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}
.shop-item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem; min-height: 120px; }
@media (max-width: 900px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .shop-grid { grid-template-columns: 1fr; } }

/* ── Pricing ─────────────────────────────────────────────────────────── */
.paths { display: grid; gap: var(--gap); grid-template-columns: repeat(2, 1fr); align-items: stretch; }
.path {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.2rem 1.2rem;
  display: flex; flex-direction: column;
}
.path.is-picked { border-color: var(--blue); background: var(--panel-2); }
.path-flag {
  position: absolute; top: -0.7rem; left: 1rem;
  margin: 0;
  font-family: var(--display);
  font-size: .66rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--blue); color: #0e1014;
  padding: .28rem .6rem; border-radius: var(--r);
}
.path-name { font-size: 1.08rem; margin-bottom: .4rem; }
.path-price { margin: 0 0 .7rem; display: flex; align-items: baseline; gap: .45rem; }
.amount { font-size: clamp(1.8rem, 2.8vw, 2.2rem); }
.per { font-size: .92rem; color: var(--faint); }
.path-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .4rem; font-size: .92rem; color: var(--muted); }
.path-list li { position: relative; padding-left: 1.5rem; }
.path-list li::before {
  content: ''; position: absolute; left: 0; top: .45em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  rotate: -45deg;
}
.path-actions { margin-top: auto; display: grid; gap: .5rem; }
.path .btn, .path .path-actions { margin-top: auto; }
.path-actions .btn { margin-top: 0; }

@media (max-width: 760px) { .paths { grid-template-columns: 1fr; } .path-flag { top: -0.65rem; } }

/* ── Contact ─────────────────────────────────────────────────────────── */
.cta { padding-block: var(--sect); border-top: 1px solid var(--line); }
.cta-grid {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}
.cta-copy .dim { color: var(--faint); }
.cta-alt { margin: .9rem 0 0; font-size: .98rem; color: var(--muted); }
.cta-alt a { color: var(--text); font-family: var(--display); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--blue); }
.cta-fine { margin: 1.2rem 0 0; font-size: .84rem; color: var(--faint); max-width: 46ch; }

.cta-form { display: grid; gap: .75rem; align-content: start; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { display: grid; gap: .35rem; }
.field label {
  font-family: var(--display);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--faint);
}
.field input {
  width: 100%;
  padding: .75rem .85rem;
  background: var(--bg);
  border: 1.5px solid var(--line-2);
  border-radius: var(--r);
  color: var(--text);
}
.field input::placeholder { color: var(--faint); }
.field input:focus { border-color: var(--blue); outline: none; }
.field.is-bad input { border-color: #d96a58; }
.field-error { margin: 0; font-size: .84rem; color: #e8a396; }
.cta-note { margin: .3rem 0 0; font-size: .86rem; color: var(--faint); }
.cta-note.is-good { color: #86d9a5; }

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

/* ── Footer ──────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); padding-block: 1.5rem; }
.foot-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem var(--gap); }
.foot-brand { display: inline-flex; align-items: center; gap: .55rem; margin-right: auto; }
.foot-tag {
  margin-left: .5rem; padding-left: .8rem; border-left: 1px solid var(--line-2);
  font-family: var(--display); font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}
.foot-links { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.foot-links a { text-decoration: none; font-family: var(--display); font-size: .88rem; color: var(--muted); }
.foot-links a:hover { color: var(--text); }
.foot-legal { width: 100%; margin: 0; font-size: .82rem; color: var(--faint); }

/* ── Mobile call bar ─────────────────────────────────────────────────── */
.callbar { display: none; }

@media (max-width: 760px) {
  .callbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; gap: .5rem;
    padding: .55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line-2);
  }
  .callbar-btn {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center;
    padding: .8rem .6rem;
    font-family: var(--display); font-weight: 700; font-size: .92rem;
    text-decoration: none; border-radius: var(--r);
    background: var(--hot); color: #14161a;
  }
  .callbar-btn.ghost { background: transparent; border: 1.5px solid var(--line-2); color: var(--text); }
  .foot { padding-bottom: 5.5rem; }
}

/* ── Small screens ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .topbar .btn { font-size: .8rem; padding: .55rem .85rem; white-space: nowrap; }
  .brand-word { font-size: .95rem; }
  .topbar-inner { gap: .7rem; }
  .rowhead { flex-direction: column; align-items: flex-start; gap: .2rem; }
}