/* ==========================================================================
   Shopfront Web design system
   --------------------------------------------------------------------------
   Extracted from the Shopfront Web client sites built in the July/August 2026
   session (Taps & Plugs, Kerbside, Preen, Sharp & Co, Gleam, FlowRight, Volt,
   Apex Roofing, Evergreen Landscapes) and generalised into one themeable kit.

   Those sites were published as standalone artifacts, not committed to any
   repo, so this file is the first time the system exists as reusable code.

   How to theme a new site
   -----------------------
   Override the six brand tokens in a wrapper. Everything else is derived:

     .theme-audit { --brand:#1D5C7E; --brand-deep:#12415A; --accent:#C2751A; … }

   Structure is deliberately unchanged from the originals — sticky notice bar,
   sticky header, hero with a two-radial wash, alternating bands, service rows
   with a price rail, steps, reviews, a navy stat card, chips, and reveal-on-
   scroll. That combination is what made the client sites convert; only the
   palette and copy should move between sites.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- brand tokens: the only six values a new site needs to change ------ */
  --brand: #1667d6;
  --brand-deep: #0f4fa8;
  --accent: #f5a301;
  --accent-deep: #c98700;
  --navy: #0b2036;
  --good: #16a34a;

  /* --- derived surface tokens ------------------------------------------- */
  --paper: #f5f7fa;
  --ink: #101c2b;
  --muted: #54687e;
  --faint: #7a90a5;
  --line: #dbe4ee;
  --card: #ffffff;

  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --maxw: 1120px;
  --radius: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  text-wrap: balance;
  line-height: 1.05;
  letter-spacing: -0.028em;
  font-weight: 830;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.kick {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--brand-deep);
}

/* --- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 750;
  font-size: 15px;
  border-radius: 12px;
  padding: 15px 28px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .15s, background .2s, color .2s, border-color .2s;
}
.btn-accent { background: var(--accent); color: #211700; }
.btn-accent:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn-brand { background: var(--brand); color: #fff; }
.btn-brand:hover { transform: translateY(-2px); background: var(--brand-deep); }
.btn-ghost { border-color: currentColor; color: var(--ink); }
.btn-ghost:hover { color: var(--brand-deep); border-color: var(--brand-deep); }

.btn:focus-visible,
a:focus-visible {
  outline: 3px solid var(--brand-deep);
  outline-offset: 3px;
}

/* --- reveal on scroll --------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s;
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .btn:hover, .srow:hover { transform: none !important; }
  html { scroll-behavior: auto; }
}

/* --- sticky notice bar + header ----------------------------------------- */

.notice {
  position: sticky;
  top: 0;
  z-index: 70;
  background: linear-gradient(90deg, var(--brand), var(--accent-deep));
  color: #fff;
}
.notice .row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  flex-wrap: wrap;
}
.notice a { text-decoration: underline; text-underline-offset: 2px; }

header {
  position: sticky;
  top: 38px;
  z-index: 60;
  height: 58px;
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.bar { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 850; font-size: 19px; }
nav.links { display: flex; gap: 24px; font-size: 14px; font-weight: 600; color: var(--muted); }
nav.links a:hover { color: var(--ink); }
.nav-cta {
  font-size: 14px; font-weight: 750; padding: 9px 18px;
  border-radius: 11px; background: var(--accent); color: #211700;
}
@media (max-width: 780px) { nav.links { display: none; } }

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

.hero { padding: 60px 0 72px; position: relative; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(48% 60% at 88% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 60%),
    radial-gradient(40% 50% at 8% 10%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 60%);
  pointer-events: none;
}
.hero-in {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: 40px; align-items: center;
}
@media (max-width: 880px) { .hero-in { grid-template-columns: 1fr; gap: 28px; } }
.hero h1 { font-size: clamp(38px, 6.2vw, 72px); margin-top: 14px; }
.hero h1 .em { color: var(--brand-deep); }
.hero h1 .em-a { color: var(--accent-deep); }
.lede { color: var(--muted); font-size: 18.5px; margin-top: 18px; max-width: 54ch; }
.actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.badges { display: flex; gap: 18px; margin-top: 26px; flex-wrap: wrap; font-size: 14px; color: var(--muted); font-weight: 600; }

/* --- bands -------------------------------------------------------------- */

.band { padding: 82px 0; }
.band.alt { background: #fff; border-block: 1px solid var(--line); }
.head { max-width: 60ch; margin: 0 auto 40px; text-align: center; }
.head h2 { font-size: clamp(28px, 4.4vw, 46px); margin-top: 12px; }
.head p { color: var(--muted); margin-top: 14px; font-size: 17.5px; }

/* --- service rows with a price rail ------------------------------------- */

.rows { display: grid; gap: 14px; }
.srow {
  display: flex; align-items: center; gap: 20px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px;
  transition: transform .15s, box-shadow .15s;
}
.srow:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -32px rgba(15,45,80,0.35); }
.srow .ic {
  width: 54px; height: 54px; border-radius: 14px;
  display: grid; place-items: center; font-size: 26px; flex: none;
}
.srow .ic.brand { background: color-mix(in srgb, var(--brand) 12%, #fff); }
.srow .ic.accent { background: color-mix(in srgb, var(--accent) 16%, #fff); }
.srow .body { flex: 1; min-width: 0; }
.srow .body h3 { font-size: 19px; }
.srow .body p { color: var(--muted); font-size: 14.5px; margin-top: 4px; }
.srow .price { text-align: right; white-space: nowrap; }
.srow .price .amount {
  font-size: 23px; font-weight: 850;
  color: var(--brand-deep); letter-spacing: -0.02em;
}
.srow .price .sub { font-size: 12px; color: var(--faint); font-weight: 600; display: block; }
.srow.em {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: linear-gradient(120deg, #fff, color-mix(in srgb, var(--accent) 7%, #fff));
}
@media (max-width: 640px) {
  .srow { flex-wrap: wrap; }
  .srow .price { text-align: left; width: 100%; padding-left: 74px; margin-top: -6px; }
}

/* --- chips -------------------------------------------------------------- */

.chips {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; max-width: 780px; margin: 26px auto 0;
}
.chip {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 17px;
  font-size: 14px; font-weight: 600; color: #33506d;
}

/* --- steps -------------------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 900px; margin: 0 auto; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.step .n {
  font-size: 15px; width: 42px; height: 42px;
  display: grid; place-items: center; border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 12%, #fff);
  color: var(--brand-deep); font-weight: 850; margin-bottom: 14px;
}
.step h3 { font-size: 18px; }
.step p { color: var(--muted); margin-top: 8px; font-size: 15px; }

/* --- reviews ------------------------------------------------------------ */

.revs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 820px) { .revs { grid-template-columns: 1fr; } }
.rev { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.rev .stars { color: var(--accent); letter-spacing: 2px; }
.rev p { margin: 12px 0 14px; font-size: 16px; color: #33475c; }
.rev .who { font-size: 13px; color: var(--muted); }
.rev .who b { color: var(--ink); }

/* --- navy stat card ----------------------------------------------------- */

.statcard {
  background: var(--navy); color: #eaf2fa;
  border-radius: 20px; padding: 30px;
  box-shadow: 0 40px 80px -50px rgba(11,32,54,0.7);
}
.statcard .big {
  font-size: 52px; font-weight: 850; letter-spacing: -0.04em;
  background: linear-gradient(90deg, #6babf5, var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.statcard .lbl { color: #90a9c2; font-weight: 600; margin-top: 2px; }
.statcard hr { border: none; border-top: 1px solid #1d3a5a; margin: 20px 0; }
.statcard .mini { display: flex; justify-content: space-between; font-size: 14px; color: #c4d5e6; padding: 6px 0; }
.statcard .mini b { color: #fff; }

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

footer { padding: 46px 0 58px; color: var(--muted); font-size: 14px; }
footer .legal { margin-top: 14px; font-size: 12.5px; color: var(--faint); max-width: 80ch; line-height: 1.55; }

/* ==========================================================================
   Shopfront v2 motion layer (2026-09-02)
   --------------------------------------------------------------------------
   Appended to the kit after the AgentProof upgrade. Adds: JS-gated entrance
   reveals, scroll progress, SVG logo mark, hero aurora, glass stat panel,
   ticker, dark "what arrives" chapter with the assembly panel, hover states,
   sliding-arrow buttons, SVG icon tiles, centred footer. No external assets.
   ========================================================================== */

:root { --ease: cubic-bezier(.2,.7,.2,1); }

/* --- entrance + reveal ---------------------------------------------------- */
.reveal { filter: blur(6px); }
.reveal.in { filter: blur(0); transition-delay: var(--d, 0s); }
.js .rise { opacity: 0; transform: translateY(18px); filter: blur(8px);
            transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease);
            transition-delay: var(--d, 0s); }
.js .rise.in { opacity: 1; transform: none; filter: blur(0); }

/* --- scroll progress + header state --------------------------------------- */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 90;
            background: linear-gradient(90deg, var(--brand), var(--accent)); }
header { transition: box-shadow .3s; }
header.scrolled { box-shadow: 0 10px 30px -22px rgba(0,0,0,.35); }

/* --- logo mark ------------------------------------------------------------ */
.logo .mark { width: 30px; height: 30px; flex: none; }
.logo .wordmark b { color: var(--accent); font-weight: inherit; }
a.logo { color: inherit; }

/* --- hero: aurora + grid + glass stat panel ------------------------------- */
.hero { padding: 72px 0 60px; }
.hero::before { display: none; }
.orb-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.orb.a { width: 560px; height: 560px; right: -120px; top: -180px;
         background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--brand) 55%, #fff), transparent 65%);
         animation: drift 18s ease-in-out infinite alternate; }
.orb.b { width: 480px; height: 480px; left: -160px; top: 120px;
         background: radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--accent) 45%, #fff), transparent 65%);
         animation: drift 22s ease-in-out infinite alternate-reverse; }
.orb.c { width: 320px; height: 320px; left: 40%; bottom: -160px;
         background: radial-gradient(circle, color-mix(in srgb, var(--brand) 30%, #fff), transparent 65%);
         animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate(0,0) scale(1); } to { transform: translate(40px, 30px) scale(1.12); } }
.grid-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
           background-image: radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1px);
           background-size: 28px 28px;
           -webkit-mask-image: radial-gradient(60% 60% at 50% 40%, #000 30%, transparent 100%);
                   mask-image: radial-gradient(60% 60% at 50% 40%, #000 30%, transparent 100%); }
.hero h1 { font-size: clamp(32px, 4.3vw, 54px); }
.hero .lede { font-size: 17px; }

.statcard.glass {
  position: relative; border-radius: 22px; border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(160deg, color-mix(in srgb, var(--navy) 80%, var(--brand)), var(--navy) 60%, color-mix(in srgb, var(--navy) 85%, #000));
  box-shadow: 0 50px 100px -50px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08);
  transform-style: preserve-3d; transition: transform .25s var(--ease);
}
.statcard.glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
                         background: linear-gradient(120deg, rgba(255,255,255,.08), transparent 40%); }
.statcard.glass .big { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, #fff), #fff);
                       -webkit-background-clip: text; background-clip: text; }
.statcard .mini { opacity: 0; transform: translateX(-6px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.statcard.in .mini, .statcard.rise.in .mini { opacity: 1; transform: none; }

/* --- ticker ---------------------------------------------------------------- */
.ticker { border-block: 1px solid var(--line); background: #fff; overflow: hidden; padding: 14px 0; }
.ticker .lead { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 800; color: var(--faint);
                text-align: center; margin-bottom: 10px; }
.track { display: flex; gap: 14px; width: max-content; animation: slide 34s linear infinite; }
.ticker:hover .track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.track span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 8px 16px; border-radius: 999px;
              border: 1px solid var(--line); font-size: 14px; font-weight: 650; color: #33506d; background: var(--paper); }
.track span i { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(90deg, var(--brand), var(--accent)); }

/* --- icon tiles (rows + honest limits) ------------------------------------- */
.srow .ic svg { width: 26px; height: 26px; color: var(--brand-deep); fill: none; stroke: currentColor;
                stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.srow .ic.accent svg { color: var(--accent-deep); }
.srow .ic { transition: transform .3s var(--ease); }
.srow:hover .ic { transform: rotate(-6deg) scale(1.06); }
.rev .stars { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
              background: color-mix(in srgb, var(--brand) 10%, #fff); color: var(--brand-deep); letter-spacing: 0; }
.rev .stars svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8;
                  stroke-linecap: round; stroke-linejoin: round; }

/* --- dark chapter: the assembly panel -------------------------------------- */
.chapter { background: var(--navy); color: #e6eefc; padding: 96px 0; position: relative; overflow: hidden; }
.chapter::before { content: ""; position: absolute; inset: 0; pointer-events: none;
                   background: radial-gradient(50% 60% at 80% 20%, color-mix(in srgb, var(--brand) 45%, transparent), transparent 70%),
                               radial-gradient(40% 50% at 10% 90%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); }
.chapter .wrap { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .chapter .wrap { grid-template-columns: 1fr; } }
.chapter .kick { color: color-mix(in srgb, var(--accent) 60%, #fff); }
.chapter h2 { font-size: clamp(30px, 4.4vw, 50px); margin-top: 12px; }
.chapter p { color: #b4c0da; margin-top: 16px; font-size: 17px; max-width: 46ch; }

.pack { position: relative; border-radius: 22px; padding: 22px 22px 20px; color: #e6eefc;
        background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(0,0,0,.25));
        border: 1px solid rgba(255,255,255,.1); box-shadow: 0 40px 80px -50px rgba(0,0,0,.9);
        transform-style: preserve-3d; transition: transform .25s var(--ease); }
.pack-top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #93a4c3; }
.pack-top .dot { width: 9px; height: 9px; border-radius: 50%; background: #2d3a55; }
.pack-top .dot:nth-child(1) { background: #f87171; } .pack-top .dot:nth-child(2) { background: #fbbf24; } .pack-top .dot:nth-child(3) { background: #34d399; }
.pack-top .url { margin-left: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #c7d2ee;
                 background: rgba(255,255,255,.06); padding: 4px 10px; border-radius: 8px; }
.pack-top .tag { margin-left: auto; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800;
                 color: color-mix(in srgb, var(--accent) 60%, #fff); }
.pack-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.pack-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #b8c4dd;
                opacity: .28; transform: translateX(-6px); transition: opacity .35s, transform .35s, color .35s; }
.pack-list li.on { opacity: 1; transform: none; color: #eef2ff; }
.pack-list .st { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex: none;
                 background: rgba(255,255,255,.06); color: transparent; }
.pack-list li.on .st { background: rgba(52,211,153,.18); color: #6ee7b7; }
.pack-list .st svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pack-list .w { margin-left: auto; font-size: 11px; color: #9fb0d0; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pack-foot { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.pack-bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.pack-bar i { display: block; height: 100%; width: 0; border-radius: inherit;
              background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, #fff), #fff); transition: width 1.2s var(--ease); }
.pack-pct { font-size: 28px; font-weight: 850; letter-spacing: -.03em; color: #fff; line-height: 1; }
.pack-pct span { font-size: 14px; color: #8b9bbd; font-weight: 700; }
.pack-stamp { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6ee7b7;
              opacity: 0; transition: opacity .5s; }
.pack-stamp.on { opacity: 1; }
.pack-note { font-size: 11.5px; color: #7f8fb0; margin-top: 12px; }

/* --- steps, tiers, buttons -------------------------------------------------- */
.step { position: relative; transition: transform .3s var(--ease), box-shadow .3s; }
.step:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -40px rgba(0,0,0,.4); }
.step .n { background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff; }
.tier { position: relative; transition: transform .3s var(--ease), box-shadow .3s; }
.tier:hover { transform: translateY(-4px); box-shadow: 0 34px 60px -44px rgba(0,0,0,.4); }
.tier.em::before { content: "Founding pilot"; position: absolute; top: -12px; left: 24px; font-size: 11px; letter-spacing: .14em;
                   text-transform: uppercase; font-weight: 800; color: #fff; padding: 5px 10px; border-radius: 999px;
                   background: linear-gradient(90deg, var(--brand), var(--accent)); }
.tier .btn + .btn { margin-top: 10px; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
           transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

/* --- footer ---------------------------------------------------------------- */
footer { text-align: center; }
footer .logo { justify-content: center; }
footer .legal { margin-left: auto; margin-right: auto; }

/* --- reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .rise { opacity: 1; transform: none; filter: none; transition: none; }
  .reveal { filter: none; }
  .statcard .mini { opacity: 1; transform: none; transition: none; }
  .orb, .track, .pack-list li, .pack-bar i { animation: none !important; transition: none !important; }
}