/* ==========================================================================
   NEXT GEN BACKEND — site.css
   Single stylesheet, no build step. Edit the tokens in :root to reskin.

   Bump ASSET_V in _tools/layout.mjs on every edit to this file, or returning
   visitors keep the cached copy for a year (.htaccess sends it immutable).

   No web fonts on purpose. Every Google Fonts link is a third-party request on
   the critical path and a privacy disclosure to write; the system stack renders
   instantly, everywhere, and costs nothing. On a site whose pitch is "we build
   fast sites", loading 180KB of font to say so would be an odd choice.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Core palette — cool, bright, high contrast */
  --ink:          #10131a;   /* near-black, faintly blue: text, dark bands  */
  --ink-soft:     #2b3243;
  --canvas:       #ffffff;   /* default page background                    */
  --paper:        #f5f7fc;   /* tinted section background                  */
  --paper-deep:   #e9edf8;   /* panel fill                                 */

  --accent:       #1c46ef;   /* signal blue: CTAs, links, rules            */
  --accent-deep:  #1233b4;   /* hover / pressed                            */
  --accent-wash:  #e8edff;   /* tinted panels, chips                       */
  --gold:         #d98016;   /* figures, prices, step numbers              */
  --gold-wash:    #fdf3e3;

  /* Neutrals */
  --grey-900: #1b2130;
  --grey-700: #4b5468;
  --grey-500: #7b849a;
  --grey-400: #a6adbe;
  --grey-300: #c9cfdd;
  --grey-200: #e1e6f0;
  --grey-100: #eff2f8;

  /* Semantic */
  --bg:          var(--canvas);
  --fg:          var(--ink);
  --fg-muted:    var(--grey-700);
  --rule:        var(--grey-200);
  --rule-strong: var(--grey-300);
  --error:       #b3261e;

  /* Type. System stack only — see the header note. */
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: var(--font-body);
  --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo,
               Consolas, "Liberation Mono", monospace;

  /* Fluid type scale (min 375px → max 1200px) */
  --step--1: clamp(0.82rem, 0.79rem + 0.16vw, 0.91rem);
  --step-0:  clamp(1rem,    0.96rem + 0.2vw,  1.13rem);
  --step-1:  clamp(1.19rem, 1.11rem + 0.36vw, 1.41rem);
  --step-2:  clamp(1.41rem, 1.28rem + 0.58vw, 1.76rem);
  --step-3:  clamp(1.68rem, 1.46rem + 0.95vw, 2.2rem);
  --step-4:  clamp(2rem,    1.65rem + 1.5vw,  2.75rem);
  --step-5:  clamp(2.38rem, 1.85rem + 2.25vw, 3.43rem);
  /* Hero only — one step above the shared ceiling so the hero actually leads.
     Capped at 4.1rem rather than higher: measured in-browser at 1280px the
     headline runs to three lines either way, and the larger size pushed the
     primary call-to-action past the fold on a 768px-tall laptop. A hero that
     looks impressive on a 27-inch monitor and hides its own button on the
     machine most people actually use is a bad trade. */
  --step-6:  clamp(2.6rem,  1.9rem  + 3.1vw,  4.1rem);

  /* Space scale */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  /* Section rhythm */
  --section-y: clamp(3.25rem, 1.9rem + 5.6vw, 6.5rem);

  /* Layout */
  --measure: 66ch;
  --wrap: 1180px;
  --wrap-narrow: 760px;
  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem);

  /* Shape & depth. Shadows are deliberately restrained — a light professional
     surface reads as expensive when edges are crisp, and as a template when
     everything floats. */
  --radius: 6px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(16, 19, 26, 0.05),
               0 2px 6px rgba(16, 19, 26, 0.04);
  --shadow-md: 0 2px 4px rgba(16, 19, 26, 0.05),
               0 10px 26px rgba(16, 19, 26, 0.07);
  --shadow-lg: 0 4px 10px rgba(16, 19, 26, 0.06),
               0 22px 54px rgba(16, 19, 26, 0.11);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.35s;

  --header-h: 68px;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Every nav link on this site is an in-page anchor, and without this the
     sticky header covers the heading you just jumped to. */
  scroll-padding-top: calc(var(--header-h) + var(--sp-5));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img, picture, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 0 0 var(--sp-4);
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
.h-md { font-size: var(--step-3); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--accent-deep); }

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--grey-100);
  padding: 0.12em 0.38em;
  border-radius: 3px;
}

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--sp-6) 0; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.55); }
.section--tint { background: var(--paper); }

.section-head { max-width: 46rem; margin-bottom: var(--sp-7); }
.section-head .lead { margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-3);
}

.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: var(--measure);
}

.small { font-size: var(--step--1); color: var(--fg-muted); }
.mt-4 { margin-top: var(--sp-4); }

.prose { max-width: var(--measure); }
.prose > h2 { margin-top: var(--sp-7); }
.prose > h2:first-child { margin-top: 0; }
.prose p { font-size: var(--step-0); }
.prose ol { padding-left: 1.3em; }
.prose ol li { margin-bottom: var(--sp-4); }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }

.note {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border-left: 3px solid var(--gold);
  background: var(--gold-wash);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
  max-width: 52rem;
}

/* --------------------------------------------------------------------------
   4. BUTTONS AND LINKS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.72em 1.5em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform 0.12s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-deep); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn--ghost:hover { background: var(--grey-100); color: var(--ink); border-color: var(--grey-400); }

.btn--lg { padding: 0.92em 1.9em; font-size: var(--step-0); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-5);
}

.link-arrow {
  display: inline-block;
  font-weight: 600;
  color: var(--accent);
  font-size: var(--step--1);
}
.link-arrow::after {
  content: " \2192";
  display: inline-block;
  transition: transform var(--dur) var(--ease);
}

.ticks { list-style: none; padding: 0; margin: 0 0 var(--sp-5); }
.ticks li {
  position: relative;
  padding-left: 1.75em;
  margin-bottom: var(--sp-3);
  line-height: 1.55;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.7em;
  height: 0.38em;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   5. TOPBAR / HEADER / NAV
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--ink);
  color: var(--grey-300);
  font-size: var(--step--1);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 38px;
  flex-wrap: wrap;
  text-align: center;
}
.topbar a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  /* Pad the anchor, not the row: this is the hit area, and at 38px tall the
     topbar has the room. See the note on target size in section 15. */
  display: inline-block;
  padding-block: var(--sp-1);
}
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar__sep { color: var(--grey-500); }

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--ink);
  flex: none;
}
.logo__icon { width: 40px; height: 40px; flex: none; }
.logo__text { display: block; line-height: 1.05; }
.logo__mark {
  display: block;
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: 0.13em;
}
.logo__sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__link {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 600;
  border-radius: var(--radius);
  white-space: nowrap;
}
.nav__link:hover { color: var(--accent); background: var(--grey-100); }
.nav__link[aria-current="page"] { color: var(--accent); }

.nav__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 15rem;
  list-style: none;
  margin: 0;
  padding: var(--sp-2);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility var(--dur);
}
.nav__item:hover .nav__panel,
.nav__item:focus-within .nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__panel a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--step--1);
  white-space: nowrap;
}
.nav__panel a:hover { background: var(--accent-wash); color: var(--accent-deep); }

.header__cta { flex: none; font-size: var(--step--1); padding: 0.62em 1.15em; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--rule);
  background: #fff;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  padding-block: var(--sp-5);
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav > .wrap > ul > li { border-bottom: 1px solid var(--rule); }
.mobile-nav a {
  display: block;
  padding: var(--sp-3) 0;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.mobile-nav__group { padding-bottom: var(--sp-3) !important; }
.mobile-nav__group a {
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
  font-weight: 400;
  font-size: var(--step--1);
  color: var(--fg-muted);
}
.mobile-nav .btn { width: 100%; margin-top: var(--sp-5); }

@media (max-width: 62rem) {
  .nav, .header__cta { display: none; }
  .nav-toggle { display: block; }
}

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero {
  padding-block: clamp(2.25rem, 1.4rem + 2.8vw, 3.25rem);
  background:
    radial-gradient(60rem 32rem at 78% -12%, var(--accent-wash), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--rule);
}
.hero > .wrap {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
}
.hero__inner { max-width: 34rem; }

.hero__h1 {
  font-size: var(--step-6);
  letter-spacing: -0.032em;
  margin-bottom: var(--sp-5);
}

.hero .lead { font-size: var(--step-1); color: var(--ink-soft); }

.hero__meta {
  margin-top: var(--sp-6);
  font-size: var(--step--1);
  color: var(--fg-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
.hero__meta strong { color: var(--ink); }

@media (max-width: 60rem) {
  .hero > .wrap { grid-template-columns: 1fr; }
  .hero__inner { max-width: none; }
}

/* The hero's "where the hours go" panel. Markup rather than a photograph —
   see the comment in pages/home.mjs. */
.ledger {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.ledger__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--rule);
  background: var(--grey-100);
}
.ledger__title { font-weight: 700; font-size: var(--step--1); }
.ledger__badge {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-wash);
  border: 1px solid #f0dcbd;
  padding: 0.24em 0.7em;
  border-radius: 999px;
}
.ledger__list { list-style: none; margin: 0; padding: var(--sp-2) var(--sp-5); }
.ledger__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px dashed var(--rule);
  font-size: var(--step--1);
}
.ledger__list li:last-child { border-bottom: 0; }
.ledger__task { color: var(--ink-soft); }
.ledger__hrs {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.ledger__foot {
  padding: var(--sp-4) var(--sp-5);
  background: var(--ink);
  color: var(--grey-300);
  font-size: var(--step--1);
  display: grid;
  gap: var(--sp-1);
}
.ledger__foot strong { color: #fff; }

/* --------------------------------------------------------------------------
   7. PAGE HERO (inner pages)
   -------------------------------------------------------------------------- */
.page-hero {
  padding-block: clamp(2rem, 1.2rem + 3.4vw, 3.75rem) clamp(2rem, 1.2rem + 3.4vw, 3.5rem);
  background: linear-gradient(180deg, #fff 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--rule);
}
.page-hero h1 { max-width: 20ch; }
.page-hero .lead { margin-top: var(--sp-4); }

.breadcrumb { margin-bottom: var(--sp-5); font-size: var(--step--1); }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--fg-muted);
}
.breadcrumb li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--grey-400); }
.breadcrumb a {
  color: var(--fg-muted);
  text-decoration: none;
  display: inline-block;
  padding-block: 4px;
}
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink); }

/* --------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.card:hover {
  border-color: var(--grey-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.card:hover .link-arrow::after { transform: translateX(4px); }
.card__link {
  display: block;
  height: 100%;
  padding: var(--sp-5);
  color: inherit;
  text-decoration: none;
}
.card__body h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.card__body p { font-size: var(--step--1); color: var(--fg-muted); }
.card__outcome {
  color: var(--ink) !important;
  font-weight: 600;
  border-left: 2px solid var(--accent);
  padding-left: var(--sp-3);
  margin-bottom: var(--sp-3) !important;
}
.card--industry .card__body h3 { color: var(--accent); }

/* The landing page's service grid is an index, not a pitch - name, outcome, and
   a jump link to the full section further down. Tighter padding and a lighter
   border keep seven of them from reading as seven full cards competing with the
   sections underneath. See the note on `compact` in partials.mjs. */
.card--compact .card__link { padding: var(--sp-4) var(--sp-5); }
.card--compact .card__body h3 { font-size: var(--step-0); color: var(--fg-muted); font-weight: 650; }
.card--compact .card__outcome {
  font-size: var(--step-0);
  border-left: 0;
  padding-left: 0;
  margin-bottom: var(--sp-3) !important;
}

.panel {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}
.panel h3 { font-size: var(--step-1); }
.panel .ticks { margin-bottom: 0; }
.panel .ticks li { font-size: var(--step--1); }
.panel--feature {
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  border-color: #cfd9ff;
}

/* --------------------------------------------------------------------------
   9. SERVICE SECTIONS (anchored)
   -------------------------------------------------------------------------- */
.svc { padding-block: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem); border-top: 1px solid var(--rule); }
.svc--alt { background: var(--paper); }
.svc__grid {
  display: grid;
  gap: clamp(1.5rem, 0.8rem + 3vw, 3.5rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
}
.svc__lede h3 { font-size: var(--step-3); margin-bottom: var(--sp-3); }
.svc__lede .eyebrow { color: var(--grey-400); }
.svc__outcome {
  font-weight: 600;
  color: var(--accent-deep);
  font-size: var(--step-0);
}
.svc__body p { color: var(--fg-muted); max-width: var(--measure); }
.svc__body .ticks { margin-top: var(--sp-5); margin-bottom: 0; }
.svc__body .ticks li { font-size: var(--step--1); }

@media (max-width: 54rem) {
  .svc__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   10. STEPS
   -------------------------------------------------------------------------- */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  counter-reset: step;
}
.steps__item {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}
.steps__n {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--gold);
  margin-bottom: var(--sp-3);
}
.steps__item h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.steps__item p { font-size: var(--step--1); color: var(--fg-muted); margin: 0; }

/* --------------------------------------------------------------------------
   11. OFFER / PRICING
   -------------------------------------------------------------------------- */
.offer {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: #fff;
}
.offer__price {
  background: var(--ink);
  color: #fff;
  padding: var(--sp-7) var(--sp-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-1);
}
.offer__from {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-400);
}
.offer__figure {
  font-size: var(--step-5);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
}
.offer__unit { font-size: var(--step-0); color: var(--grey-300); }
.offer__body { padding: var(--sp-6); }
.offer__body .ticks li { font-size: var(--step-0); }
.offer__body .small { max-width: var(--measure); }

@media (max-width: 52rem) {
  .offer { grid-template-columns: 1fr; }
  .offer__price { padding: var(--sp-6); }
}

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--sp-5) 2.5rem var(--sp-5) 0;
  position: relative;
  font-weight: 650;
  font-size: var(--step-0);
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  margin-top: -0.42rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -0.15rem; }
.faq summary:hover { color: var(--accent); }
.faq details > div {
  padding-bottom: var(--sp-5);
  max-width: var(--measure);
  color: var(--fg-muted);
}

/* --------------------------------------------------------------------------
   13. CONTACT / FORM
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  gap: clamp(1.5rem, 0.8rem + 3vw, 3rem);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  align-items: start;
}
@media (max-width: 58rem) {
  .contact-grid { grid-template-columns: 1fr; }
}

.form-panel {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}

.field { margin: 0 0 var(--sp-4); }
.field label {
  display: block;
  font-size: var(--step--1);
  font-weight: 650;
  margin-bottom: var(--sp-2);
}
.field .opt { font-weight: 400; color: var(--grey-500); }

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--step-0);
  color: var(--ink);
  background: #fff;
  padding: 0.7em 0.85em;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--grey-400); }

/* Set by site.js after a failed submit attempt, so a field only turns red once
   the visitor has actually tried — :invalid alone paints every empty required
   field the moment the page loads, which reads as "you did something wrong"
   before anyone has typed a character. */
.field input.is-error,
.field select.is-error,
.field textarea.is-error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.1);
}

.field-row { display: grid; gap: var(--sp-4); grid-template-columns: 1fr 1fr; }
@media (max-width: 34rem) { .field-row { grid-template-columns: 1fr; } }

/* Honeypot. Off-screen rather than display:none — see partials.mjs. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form-note { margin-top: var(--sp-4); margin-bottom: 0; }
.form-panel .btn { width: 100%; }

.contact-aside {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}
.contact-aside h3 { font-size: var(--step-1); }
.contact-aside p { font-size: var(--step--1); color: var(--fg-muted); }
.contact-aside .btn { width: 100%; }

/* --------------------------------------------------------------------------
   14. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band {
  background: var(--ink);
  color: #fff;
  padding-block: var(--section-y);
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--grey-300); max-width: 46rem; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; }
.cta-band .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.cta-band .btn--ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.6); }

.cta-band__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding-block: var(--sp-2);
  margin-top: var(--sp-4);
  color: var(--grey-300);
  font-size: var(--step--1);
  text-decoration: none;
}
.cta-band__phone:hover { color: #fff; text-decoration: underline; }
.cta-band__phone svg { width: 1em; height: 1em; }

/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding-block: var(--sp-8) var(--sp-5);
  font-size: var(--step--1);
}
.footer__grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
}
@media (max-width: 62rem) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 34rem) { .footer__grid { grid-template-columns: 1fr; } }

.footer h2 {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-mono);
  color: var(--grey-500);
  margin-bottom: var(--sp-4);
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: var(--sp-2); }
.footer a { color: var(--ink-soft); text-decoration: none; }
/* Bare inline anchors in a list measured 17px tall on a phone - under the 24px
   minimum target size. Padding the anchor rather than the <li> is what actually
   grows the tappable box; margin on the list item only moves the links apart.
   The footer link lists are the densest tap targets on the site, so this is the
   one place it genuinely matters. */
.footer a:not(.logo) { display: inline-block; padding-block: 4px; }
/* .logo is excluded because it is a flex container - inline-block would
   collapse the mark and the wordmark onto separate lines. It is also
   already well over the minimum size. */
.footer a:hover { color: var(--accent); text-decoration: underline; }
.footer p { color: var(--fg-muted); }
.footer address { font-style: normal; color: var(--fg-muted); line-height: 1.8; }
.footer .logo { margin-bottom: var(--sp-2); }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: space-between;
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  color: var(--grey-500);
}
.footer__bar p { margin: 0; }

/* --------------------------------------------------------------------------
   16. MOBILE CALL BAR
   -------------------------------------------------------------------------- */
.callbar { display: none; }

@media (max-width: 46rem) {
  .callbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    border-top: 1px solid var(--rule);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .callbar a {
    padding: var(--sp-4) var(--sp-2);
    text-align: center;
    font-weight: 650;
    font-size: var(--step--1);
    text-decoration: none;
    color: var(--ink);
  }
  .callbar a:last-child { background: var(--accent); color: #fff; }
  /* Clear the bar so it never covers the last line of the footer. */
  body { padding-bottom: 3.6rem; }
}

/* --------------------------------------------------------------------------
   17. REVEAL ON SCROLL
   Progressive enhancement: site.js adds .reveal-ready to <html> before painting.
   Without JS the elements are simply visible, which is the correct fallback —
   opacity:0 in the base rule would hide content from anyone with JS blocked.
   -------------------------------------------------------------------------- */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.reveal-ready .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   18. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .topbar, .header, .callbar, .cta-band, .nav-toggle { display: none !important; }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  .faq details { display: block; }
  .faq details > div { display: block !important; }
}