/* Epoxy Flooring Vaughan design system
   Art direction: graphite shop floor, warm concrete paper, industrial amber signal.
   No web fonts, no third-party requests. */

:root {
  color-scheme: light;

  --shell: #0e1013;
  --shell-2: #171b21;
  --shell-3: #22272f;

  --paper: #f4f2ee;
  --paper-2: #e8e4dc;
  --paper-3: #dbd5cb;

  --ink: #14161a;
  --ink-2: #3c424b;
  --ink-3: #5d646e;

  --accent: #e8873a;
  --accent-deep: #8d4614;
  --accent-wash: #fbeadb;

  --line-dark: rgba(255, 255, 255, 0.13);
  --line-light: rgba(20, 22, 26, 0.14);

  --flake-a: #8e959e;
  --flake-b: #2c3138;
  --flake-c: #c8bfae;

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Helvetica Neue", "Arial Narrow", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --shell-pad: clamp(1.25rem, 5vw, 4.5rem);
  --measure: 68ch;
  --radius: 3px;

  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  --step-1: clamp(1.15rem, 1.09rem + 0.3vw, 1.35rem);
  --step-2: clamp(1.4rem, 1.28rem + 0.6vw, 1.8rem);
  --step-3: clamp(1.75rem, 1.5rem + 1.2vw, 2.6rem);
  --step-4: clamp(2.2rem, 1.7rem + 2.4vw, 4rem);
  --step-5: clamp(2.6rem, 1.85rem + 3.6vw, 5.2rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.028em;
  margin: 0 0 0.5em;
  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); letter-spacing: -0.015em; }

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

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

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

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -6rem;
  z-index: 200;
  background: var(--accent);
  color: #17110a;
  font-weight: 700;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0.75rem; }

/* ---------- layout primitives ---------- */

.wrap {
  width: min(100%, 78rem);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

.wrap--narrow { width: min(100%, 56rem); }

.band { padding-block: clamp(3.5rem, 8vw, 7rem); }
.band--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.band--dark { background: var(--shell); color: var(--paper); }
.band--dark h1,
.band--dark h2,
.band--dark h3 { color: #fff; }
.band--sand { background: var(--paper-2); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 5rem;
  background: currentColor;
  opacity: 0.4;
}
/* Every dark surface, not just .band--dark. The heroes are dark too. */
.band--dark .eyebrow,
.hero .eyebrow,
.page-hero .eyebrow,
.cta-band .eyebrow { color: var(--accent); }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 46ch;
}
.band--dark .lede,
.hero .lede,
.page-hero .lede,
.cta-band .lede { color: rgba(244, 242, 238, 0.78); }

.section-head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.85rem 1.55rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--accent); color: #17110a; }
.btn--primary:hover { background: #f39a4f; color: #17110a; }

.btn--ghost {
  background: transparent;
  color: inherit;
  border-color: currentColor;
  opacity: 0.9;
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.08); opacity: 1; color: inherit; }
.band--sand .btn--ghost:hover,
body > main .btn--ghost:hover { background: rgba(20, 22, 26, 0.06); }

.btn--block { width: 100%; }

.textlink {
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
  color: var(--ink);
  display: inline-block;
}
.textlink:hover { border-bottom-color: var(--ink); }
.band--dark .textlink { color: #fff; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--shell);
  color: var(--paper);
  border-bottom: 1px solid var(--line-dark);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  font-size: 1.06rem;
  margin-right: auto;
}
/* The global `a:hover` sets --ink and out-specifies .brand's #fff, which left
   the wordmark near-black on the near-black header. Amber reads clearly on
   both dark surfaces the lockup sits on. */
.brand:hover { color: var(--accent); }

.brand__mark { flex: none; width: 30px; height: 30px; }
.brand__name { display: flex; flex-direction: column; }
.brand__name small {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 3px;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
}
.nav a {
  color: rgba(244, 242, 238, 0.82);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 600;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: #fff; border-bottom-color: var(--accent); }
.nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--accent); }
.nav .btn { min-height: 2.6rem; padding: 0.5rem 1.05rem; font-size: 0.9rem; }
/* `.nav a` would otherwise out-specify `.btn--primary` and leave pale text on amber. */
.nav a.btn--primary,
.nav a.btn--primary:hover { color: #17110a; border-bottom-color: transparent; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  color: var(--paper);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 3px; }
.nav-toggle__bars span { display: block; width: 16px; height: 2px; background: currentColor; }

@media (max-width: 60rem) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--shell-2);
    border-bottom: 1px solid var(--line-dark);
    padding: 0.5rem var(--shell-pad) 1.25rem;
  }
  .site-header { position: sticky; }
  .site-header__inner { position: relative; }
  .nav[data-open="true"] { display: flex; }
  .nav a {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line-dark);
    font-size: 1rem;
  }
  .nav a:hover,
  .nav a[aria-current="page"] { border-bottom-color: var(--line-dark); color: var(--accent); }
  .nav .btn { margin-top: 1rem; min-height: 3rem; font-size: 1rem; }
  .nav .btn:hover { color: #17110a; }
}

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

.hero {
  position: relative;
  background: var(--shell);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 90% at 78% 0%, rgba(232, 135, 58, 0.16), transparent 58%),
    linear-gradient(180deg, #12151a 0%, #0c0e11 100%);
}
.hero__flake {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  pointer-events: none;
}

.hero__inner {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
  padding-block: clamp(3.5rem, 9vw, 7.5rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); }
}

.hero h1 { max-width: 14ch; }
/* Colour only, so it is a span rather than <em>: the word carries no stress
   emphasis and assistive tech should not announce it as though it does. */
.hero h1 .accent {
  color: var(--accent);
}
.hero__lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: rgba(244, 242, 238, 0.8);
  max-width: 44ch;
  margin-bottom: 1.75rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 2rem;
}
.hero__note {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: rgba(244, 242, 238, 0.55);
  max-width: 40ch;
  margin: 0;
}

/* ---------- hero quote form ---------- */

.hero__form { align-self: start; }
.hero .form-card { padding: clamp(1.15rem, 2.2vw, 1.75rem); }

.form-card__head { margin-bottom: 1.25rem; }
.form-card__head h2 {
  font-size: var(--step-2);
  margin-bottom: 0.4rem;
}
.form-card__head p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}

.hero .field input,
.hero .field select { min-height: 2.8rem; padding: 0.6rem 0.8rem; }
.hero .field-grid { gap: 0.9rem; }
.hero .form-foot { margin-top: 1.25rem; }
.hero .form-note { font-size: 0.79rem; }

/* Once the hero stacks, everything above the form pushes it off the fold.
   The note duplicates the form's own note, and the secondary link is already
   in the nav, so both come out to buy the form roughly 150px. */
@media (max-width: 61.99rem) {
  .hero__note { display: none; }
  .hero__actions { display: none; }
  .hero__inner { padding-block: clamp(2rem, 5vw, 3rem); gap: 1.75rem; }
  .hero__lede { margin-bottom: 0; }
}

/* material chips: original illustration, not project photography */
.chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 52rem) {
  .chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.chip {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--shell-2);
}
.chip__swatch { aspect-ratio: 16 / 11; width: 100%; }
.chip__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.72);
}
.chip__label b { color: #fff; font-weight: 700; letter-spacing: 0.06em; }

/* ---------- spec strip ---------- */

.strip {
  background: var(--shell-2);
  color: var(--paper);
  border-top: 1px solid var(--line-dark);
}
.strip__grid {
  display: grid;
  gap: 1px;
  background: var(--line-dark);
  border-inline: 1px solid var(--line-dark);
}
@media (min-width: 46rem) {
  .strip__grid { grid-template-columns: repeat(4, 1fr); }
}
.strip__cell {
  background: var(--shell-2);
  padding: 1.4rem clamp(1rem, 2vw, 1.6rem);
}
.strip__cell dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.45rem;
}
.strip__cell dd {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(244, 242, 238, 0.85);
}

/* ---------- editorial service rows ---------- */

.rows { border-top: 1px solid var(--line-light); }
.row {
  display: grid;
  gap: 0.5rem 2rem;
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  border-bottom: 1px solid var(--line-light);
  align-items: start;
}
@media (min-width: 52rem) {
  .row { grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.15fr) auto; align-items: baseline; }
}
.row__num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--accent-deep);
  padding-top: 0.35rem;
}
.row h3 { margin: 0; }
.row h3 a { color: var(--ink); text-decoration: none; }
.row h3 a:hover { color: var(--accent-deep); }
.row p { color: var(--ink-2); margin: 0; max-width: 52ch; }
.row__go {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-3);
  white-space: nowrap;
  padding-top: 0.4rem;
}
.row:hover .row__go { color: var(--accent-deep); }

/* ---------- split feature ---------- */

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 58rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

/* Headings inside a two-column split sit one step below full-width section heads. */
.split > div > h2 { font-size: var(--step-3); }

.figure {
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  background: #fff;
  padding: clamp(1rem, 2.5vw, 1.75rem);
}
.band--dark .figure { background: var(--shell-2); border-color: var(--line-dark); }
.figure figcaption {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 0.9rem;
  line-height: 1.6;
}
.band--dark .figure figcaption { color: rgba(244, 242, 238, 0.6); }

/* ---------- ordered process steps ---------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 62rem;
  counter-reset: step;
  display: grid;
  gap: 0;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding: 1.35rem 0 1.35rem 3.5rem;
  border-bottom: 1px solid var(--line-light);
}
.band--dark .steps li { border-bottom-color: var(--line-dark); }
.steps li:first-child { border-top: 1px solid var(--line-light); }
.band--dark .steps li:first-child { border-top-color: var(--line-dark); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--accent-deep);
}
.band--dark .steps li::before { color: var(--accent); }
.steps h3 { font-size: var(--step-1); margin-bottom: 0.35rem; }
.steps p { color: var(--ink-2); margin: 0; }
.band--dark .steps p { color: rgba(244, 242, 238, 0.75); }

/* ---------- process journey cards ---------- */

.journey {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line-light);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  overflow: hidden;
  counter-reset: journey;
}
@media (min-width: 40rem) {
  .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .journey { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.journey__card {
  counter-increment: journey;
  background: #fff;
  padding: clamp(1.35rem, 2.4vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.journey__card::before {
  content: counter(journey, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--accent-deep);
  margin-bottom: 0.35rem;
}
.journey__card h3 {
  font-size: var(--step-1);
  margin: 0;
}
.journey__card p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: none;
}

.journey__note {
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
  max-width: 76ch;
  color: var(--ink-2);
  font-size: var(--step-1);
  line-height: 1.55;
}

/* ---------- service area ---------- */

.areas {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 50rem) {
  .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 3rem; }
}
.areas h3 {
  font-size: 0.8rem;
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line-light);
  margin-bottom: 1rem;
}
.areas ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 1.5rem;
}
.areas li {
  padding: 0.3rem 0;
  font-size: 0.96rem;
  break-inside: avoid;
}

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--line-light); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--line-light); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.018em;
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 1.6rem;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--accent-deep);
  border-bottom: 2px solid var(--accent-deep);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.85rem; }
.faq summary:hover { color: var(--accent-deep); }
.faq .faq__body { padding: 0 2.5rem 1.5rem 0; color: var(--ink-2); }

/* ---------- quote form ---------- */

.quote {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 60rem) {
  .quote { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

.form-card {
  /* The card sits on dark bands, which set a light text colour. Without this,
     anything inside that does not set its own colour renders white on white. */
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  box-shadow: 0 1px 0 rgba(20, 22, 26, 0.04), 0 18px 40px -32px rgba(20, 22, 26, 0.55);
}

.field-grid {
  display: grid;
  gap: 1.1rem;
  align-items: start;
}
@media (min-width: 34rem) {
  .field-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.field { display: grid; gap: 0.4rem; }
.field label {
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}
.field label .opt {
  font-weight: 400;
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: 0;
}
.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 0.72rem 0.85rem;
  min-height: 3rem;
  width: 100%;
}
.field textarea { min-height: 7rem; resize: vertical; line-height: 1.55; }
.field input:focus,
.field select:focus,
.field textarea:focus { background: #fff; }
.field input:user-invalid,
.field textarea:user-invalid,
.field select:user-invalid { border-color: #a3231f; background: #fdf3f2; }
.field__hint {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-3);
  margin: -0.1rem 0 0;
  max-width: none;
}

.field__error {
  font-size: 0.8rem;
  color: #8f1f1b;
  min-height: 0;
}
.field__error:empty { display: none; }

.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-foot {
  margin-top: 1.4rem;
  display: grid;
  gap: 0.9rem;
}
.form-note {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0;
  max-width: none;
}

.form-status {
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  font-size: 0.92rem;
  line-height: 1.55;
  border: 1px solid;
}
.form-status[hidden] { display: none; }
.form-status--ok { background: #eef6ef; border-color: #b6d3ba; color: #1d4526; }
.form-status--err { background: #fdf3f2; border-color: #e2b6b4; color: #7d1c19; }
.form-status h3 { font-size: var(--step-1); margin-bottom: 0.35rem; color: inherit; }
.form-status p { margin: 0; color: inherit; max-width: none; }

.assurances {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}
.assurances li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.55;
}
.band--dark .assurances li { color: rgba(244, 242, 238, 0.78); }
.assurances li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 1px;
}

/* ---------- comparison tables ---------- */

/* Horizontally scrollable on narrow screens. The paired gradients are the classic
   scroll-shadow trick: the `local` layers ride the content and uncover the `scroll`
   layers only when there is more table to reach. */
.table-wrap {
  --table-surface: #fff;
  --table-shadow: rgba(20, 22, 26, 0.22);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  background-color: var(--table-surface);
  background-image:
    linear-gradient(to right, var(--table-surface), rgba(255, 255, 255, 0)),
    linear-gradient(to left, var(--table-surface), rgba(255, 255, 255, 0)),
    linear-gradient(to right, var(--table-shadow), rgba(255, 255, 255, 0)),
    linear-gradient(to left, var(--table-shadow), rgba(255, 255, 255, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.band--dark .table-wrap {
  --table-surface: var(--shell-2);
  --table-shadow: rgba(0, 0, 0, 0.5);
  border-color: var(--line-dark);
}
.table-wrap:focus-visible { outline-offset: 0; }

table.spec {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.spec caption {
  text-align: left;
  padding: 1rem 1.1rem 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.spec th,
.spec td {
  text-align: left;
  vertical-align: top;
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid var(--line-light);
  line-height: 1.5;
}
.spec thead th {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--ink-2);
  white-space: nowrap;
}
.spec tbody th { font-weight: 700; color: var(--ink); }
.spec td { color: var(--ink-2); }
.spec tbody tr:last-child th,
.spec tbody tr:last-child td { border-bottom: 0; }

.band--dark .spec caption,
.band--dark .spec thead th { color: rgba(244, 242, 238, 0.6); }
.band--dark .spec thead th { border-bottom-color: var(--line-dark); }
.band--dark .spec th,
.band--dark .spec td { border-bottom-color: var(--line-dark); }
.band--dark .spec tbody th { color: #fff; }
.band--dark .spec td { color: rgba(244, 242, 238, 0.78); }

/* ---------- callout ---------- */

.callout {
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  padding: 1.15rem 1.35rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.callout h3 { font-size: var(--step-1); margin-bottom: 0.35rem; }
.callout p { color: var(--ink-2); margin: 0; }
.band--dark .callout { background: rgba(232, 135, 58, 0.1); }
.band--dark .callout p { color: rgba(244, 242, 238, 0.82); }

/* ---------- two column text ---------- */

.cols { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 52rem) {
  .cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cols h3 {
  font-size: var(--step-1);
  padding-top: 0.9rem;
  border-top: 2px solid var(--accent);
  margin-bottom: 0.5rem;
}
.cols p { color: var(--ink-2); }
.band--dark .cols p { color: rgba(244, 242, 238, 0.75); }

/* ---------- prose (privacy, long copy) ---------- */

.prose h2 { font-size: var(--step-2); margin-top: 2.5rem; }
.prose h3 { font-size: var(--step-1); margin-top: 1.75rem; }
.prose ul, .prose ol { max-width: var(--measure); padding-left: 1.2rem; }
.prose li { margin-bottom: 0.5rem; }

/* ---------- breadcrumb ---------- */

.crumbs {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.55);
  padding-top: clamp(1.25rem, 3vw, 2rem);
}
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; opacity: 0.5; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current="page"] { color: rgba(244, 242, 238, 0.85); }

/* ---------- page hero (interior) ---------- */

.page-hero { background: var(--shell); color: var(--paper); }
.page-hero__inner { padding-block: clamp(2.25rem, 5vw, 4rem) clamp(2.5rem, 6vw, 4.5rem); }
.page-hero h1 { font-size: var(--step-4); max-width: 18ch; }
.page-hero .lede { margin-top: 1.25rem; }

/* ---------- CTA band ---------- */

.cta-band { background: var(--shell-2); color: var(--paper); }
.cta-band__inner {
  display: grid;
  gap: 1.75rem;
  align-items: center;
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}
@media (min-width: 54rem) {
  .cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; }
}
.cta-band h2 { font-size: var(--step-3); margin-bottom: 0.6rem; }
.cta-band p { color: rgba(244, 242, 238, 0.75); margin: 0; }

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

.site-footer {
  background: var(--shell);
  color: rgba(244, 242, 238, 0.7);
  border-top: 1px solid var(--line-dark);
  padding-block: clamp(2.75rem, 6vw, 4rem) 7rem;
  font-size: 0.92rem;
}
@media (min-width: 60rem) { .site-footer { padding-bottom: clamp(2.75rem, 6vw, 4rem); } }

.footer-grid {
  display: grid;
  gap: 2.25rem;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid var(--line-dark);
}
@media (min-width: 50rem) {
  .footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 3rem; }
}
.footer-grid h2 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer-grid a { color: rgba(244, 242, 238, 0.72); text-decoration: none; }
.footer-grid a:hover { color: #fff; text-decoration: underline; }
.footer-grid p { color: rgba(244, 242, 238, 0.6); font-size: 0.9rem; }

/* ---------- map embed ---------- */

.map-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-3);
}
@media (max-width: 48rem) {
  .map-frame { aspect-ratio: 4 / 3; }
}
.map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

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

.nap {
  font-style: normal;
  margin-top: 1.35rem;
  display: grid;
  gap: 0.3rem;
  font-size: 0.9rem;
  line-height: 1.55;
}
.nap strong {
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.nap span { color: rgba(244, 242, 238, 0.6); }
.nap a {
  color: rgba(244, 242, 238, 0.72);
  text-decoration: none;
  justify-self: start;
}
.nap a:hover { color: #fff; text-decoration: underline; }

.footer-base {
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(244, 242, 238, 0.5);
}
.footer-base a { color: inherit; }

/* ---------- mobile sticky CTA ---------- */

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: rgba(14, 16, 19, 0.94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line-dark);
  padding: 0.7rem var(--shell-pad) calc(0.7rem + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 1rem;
}
.dock__text {
  font-size: 0.8rem;
  line-height: 1.35;
  color: rgba(244, 242, 238, 0.7);
  margin: 0;
  flex: 1;
  min-width: 0;
}
.dock__text b { display: block; color: #fff; font-size: 0.92rem; }
.dock .btn { min-height: 2.85rem; padding-inline: 1.15rem; flex: none; }
@media (min-width: 60rem) { .dock { display: none; } }

/* ---------- utilities ---------- */

.stack > * + * { margin-top: 1.1rem; }
.measure { max-width: 52rem; }
.mt-lg { margin-top: clamp(2rem, 4vw, 3rem); }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@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;
  }
}

@media print {
  .site-header, .dock, .cta-band, .form-card { display: none; }
  body { background: #fff; color: #000; }
}