/* ==========================================================================
   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; }