/* ==========================================================================
   Site in Three — design system
   Palette: warm ink + newsprint paper + one signal accent (vermilion)
   Type:    Newsreader (editorial display) + Inter Tight (text/UI)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colour ---------------------------------------------------------------- */
  --ink:          #16110E;
  --ink-soft:     #2B2320;
  --paper:        #FBF8F3;
  --paper-2:      #F3EDE3;
  --paper-3:      #EAE2D5;
  --muted:        #6C625B;
  --muted-2:      #756B64;
  --accent:       #D24518;
  --accent-deep:  #A83512;
  --accent-ink:   #AD3912;  /* accent deepened for small text on light backgrounds */
  --accent-light: #F26940;  /* accent lightened for small text on dark backgrounds */
  --accent-tint:  #FBE6DD;

  --line:         color-mix(in srgb, #16110E 13%, transparent);
  --line-strong:  color-mix(in srgb, #16110E 24%, transparent);

  /* On dark --------------------------------------------------------------- */
  --on-dark:      #F6F1E9;
  --on-dark-mute: #ABA098;
  --line-dark:    color-mix(in srgb, #F6F1E9 16%, transparent);

  /* Type ------------------------------------------------------------------ */
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-text:    "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid scale ----------------------------------------------------------- */
  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.85rem, 0.82rem + 0.14vw, 0.93rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
  --step-1:  clamp(1.15rem, 1.07rem + 0.38vw, 1.36rem);
  --step-2:  clamp(1.38rem, 1.22rem + 0.75vw, 1.85rem);
  --step-3:  clamp(1.70rem, 1.38rem + 1.55vw, 2.55rem);
  --step-4:  clamp(1.95rem, 1.45rem + 2.45vw, 3.25rem);
  --step-5:  clamp(2.35rem, 1.50rem + 4.15vw, 4.40rem);
  --step-6:  clamp(2.70rem, 0.20rem + 5.90vw, 4.60rem);

  /* Space ----------------------------------------------------------------- */
  --gutter:  clamp(1.25rem, 4.2vw, 2.75rem);
  --section: clamp(3.25rem, 6.4vw, 5.75rem);
  --measure: 58ch;

  /* Radius + motion ------------------------------------------------------- */
  --r-sm: 4px;
  --r-md: 8px;
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; min-width: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:where(strong, b) { font-weight: 600; }

/* --------------------------------------------------------------------------
   3. Focus + a11y helpers
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-ink :focus-visible { outline-color: var(--paper); }

.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 0; left: 50%;
  transform: translate(-50%, -140%);
  z-index: 200;
  padding: 0.8rem 1.4rem;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--step--1);
  font-weight: 600;
  border-radius: 0 0 var(--r-md) var(--r-md);
  transition: transform 0.25s var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide  { max-width: 88rem; }
.wrap--prose { max-width: 46rem; }
/* Prose that starts on the site's left grid line instead of centring in the
   viewport. `margin-inline: 0` alone left the legal pages' body copy 96px to
   the left of their own page title. */
.wrap--flush {
  margin-inline: 0;
  max-width: calc(46rem + max(0px, (100% - 78rem) / 2));
  padding-inline-start: calc(var(--gutter) + max(0px, (100% - 78rem) / 2));
}

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--flush-top { padding-top: 0; }

.on-ink {
  background: var(--ink);
  color: var(--on-dark);
  --line: var(--line-dark);
  --line-strong: color-mix(in srgb, #F6F1E9 32%, transparent);
  --muted: var(--on-dark-mute);
  --paper: #16110E;
  /* On ink the bright vermilion is the accessible one (4.52:1). */
  --accent-ink: var(--accent-light);
}

.on-paper-2 { background: var(--paper-2); }

hr.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* --------------------------------------------------------------------------
   5. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h4 { font-family: var(--font-text); font-weight: 600; margin: 0; }

.t-hero    { font-size: var(--step-6); line-height: 0.93; letter-spacing: -0.036em; }
.t-display { font-size: var(--step-5); line-height: 0.97; letter-spacing: -0.032em; }
.t-h2      { font-size: var(--step-4); line-height: 1.01; letter-spacing: -0.03em; }
.t-h3      { font-size: var(--step-2); line-height: 1.14; letter-spacing: -0.02em; }
.t-h4      { font-size: var(--step-1); line-height: 1.24; letter-spacing: -0.012em; }

.t-lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--muted);
  max-width: 40ch;
  text-wrap: pretty;
}
.t-body  { color: var(--muted); max-width: var(--measure); text-wrap: pretty; }
.t-small { font-size: var(--step--1); color: var(--muted); text-wrap: pretty; }

.t-label {
  font-family: var(--font-text);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  /* Labels wrap on narrow screens; leading of 1 made the two lines collide. */
  line-height: 1.3;
  text-wrap: balance;
  color: var(--muted);
}
.t-label--accent { color: var(--accent-ink); }
.on-ink .t-label--accent { color: var(--accent-light); }

.t-index {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.t-accent { color: var(--accent); }
.t-ital   { font-style: italic; }
.t-nowrap { white-space: nowrap; }

/* Section eyebrow: label + hairline ---------------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
/* .eyebrow carries its own bottom margin. Inside a gap-based container that
   margin stacks on top of the row gap, so the same label sat 36px above its
   content in one place and 60px in another. */
:where(.stack, .stack--lg, .form) > .eyebrow { margin-bottom: 0; }

/* Three-dot brand device --------------------------------------------------- */
.triad { display: inline-flex; gap: 0.4rem; align-items: center; flex-shrink: 0; }
.triad i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.28;
}
.triad i:nth-child(3) { background: var(--accent); opacity: 1; }

/* Prose -------------------------------------------------------------------- */
/* Cap the reading measure. The prose wrapper is 648px wide, which put legal
   copy at ~85 characters a line. */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: var(--step-2); margin-top: 2.2em; }
.prose h3 { font-size: var(--step-1); margin-top: 1.8em; }
.prose p, .prose li { color: var(--muted); text-wrap: pretty; }
.prose ul li { position: relative; padding-left: 1.4em; }
.prose ul li + li { margin-top: 0.5em; }
/* A dot, not a hairline. A 1px rule at a fractional offset lands across two
   device pixels on a 1x screen, so half the markers rendered washed-out grey
   and half solid red. A round mark antialiases evenly at any density, and it
   matches the three-dot brand device. */
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
}
.prose a:hover { color: var(--accent-ink); text-decoration-color: currentColor; }

/* --------------------------------------------------------------------------
   6. Buttons + links
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  /* Padding compensates for the 1.2 leading below, so single-line buttons keep
     the height they had. */
  padding: 0.95em 1.6em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: 100px;
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: -0.005em;
  /* Long labels wrap on phones; leading of 1 made the two lines touch, and
     balancing stops the last word being orphaned on its own line. */
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: #fff; border-color: var(--accent); }
.btn:active { transform: translateY(1px); }

.btn--accent { --btn-bg: var(--accent); --btn-fg: #fff; }
.btn--accent::before { background: var(--ink); }
.btn--accent:hover, .btn--accent:focus-visible { border-color: var(--ink); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  border-color: var(--line-strong);
}
.btn--ghost::before { background: var(--ink); }
.on-ink .btn--ghost::before { background: var(--on-dark); }
.on-ink .btn--ghost:hover, .on-ink .btn--ghost:focus-visible { color: var(--ink); border-color: var(--on-dark); }

.btn--lg { padding: 1.15em 2em; font-size: var(--step-0); }
.btn--block { width: 100%; }

.btn__arrow { transition: transform 0.4s var(--ease); flex-shrink: 0; }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Underline text link ------------------------------------------------------ */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: var(--step--1);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: color 0.3s var(--ease), background-size 0.4s var(--ease);
  padding-bottom: 2px;
}
/* These links sit at 24-26px tall, which is a poor thumb target. Growing the
   hit area with a pseudo-element keeps the underline tight to the text. */
.link::after {
  content: "";
  position: absolute;
  inset: -0.55rem -0.25rem;
}
.link:hover { color: var(--accent-ink); }
.link--reveal { background-size: 0% 1px; }
.link--reveal:hover { background-size: 100% 1px; }

/* --------------------------------------------------------------------------
   7. Brand mark
   -------------------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.42rem;
  line-height: 1;
  letter-spacing: -0.03em;
  padding-bottom: 0.01em;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.on-ink .brand__mark { background: var(--on-dark); color: var(--ink); }
.brand:hover .brand__mark { background: var(--accent); color: #fff; }

.brand__word {
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1;
  white-space: nowrap;
}
.brand__word em { font-style: italic; font-weight: 500; }
/* --accent-ink, not --accent: at this size (18.56px, not bold) the raw accent
   sits at 4.3:1 against paper, just under the 4.5:1 text threshold. --accent-ink
   exists precisely for small text on light backgrounds. */
.brand__stop { color: var(--accent-ink); }

/* --------------------------------------------------------------------------
   8. Header + navigation
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.header.is-stuck { border-bottom-color: var(--line); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 4.6rem;
}

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.25rem); }

.nav__link {
  position: relative;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--muted);
  padding-block: 0.35rem;
  transition: color 0.3s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: 0.85rem; }

.price-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.8rem 0.45rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.price-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.price-chip b { color: var(--ink); font-weight: 600; }

/* Mobile menu button ------------------------------------------------------- */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  margin-right: -0.5rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}
.nav-toggle__bars { display: grid; gap: 5px; width: 20px; }
.nav-toggle__bars span {
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.4s var(--ease), opacity 0.25s var(--ease), width 0.4s var(--ease);
  width: 100%;
}
.nav-toggle__bars span:nth-child(3) { width: 60%; background: var(--accent); }
[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { width: 100%; transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer ------------------------------------------------------------ */
.drawer {
  position: fixed;
  inset: 4.6rem 0 0;
  z-index: 99;
  background: var(--paper);
  padding: var(--gutter);
  padding-top: clamp(1.5rem, 5vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }

.drawer__nav { display: grid; }
.drawer__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: clamp(0.9rem, 2.4vw, 1.15rem);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--step-3);
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.drawer__link:first-child { border-top: 1px solid var(--line); }
.drawer__link[aria-current="page"] { color: var(--accent); }
.drawer__link .t-index { opacity: 0.6; }
.drawer__foot { margin-top: auto; display: grid; gap: 1rem; padding-bottom: 1.5rem; }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; padding-top: clamp(2.25rem, 4.5vw, 3.75rem); padding-bottom: clamp(2.5rem, 4.5vw, 3.75rem); overflow: hidden; }

/* Faint three-column grid motif behind the hero.
   It only reads as structure on a wide desktop hero. Below 76em the copy
   column is narrow enough that the middle rule cuts straight through the body
   text and reads as a rendering artefact, so the motif is dropped there. The
   bottom inset stops the rules dangling past the sector rule into the section
   padding. */
.hero__grid {
  display: none;
  position: absolute;
  inset: 0 0 clamp(2.5rem, 4.5vw, 3.75rem);
  pointer-events: none;
  z-index: 0;
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 76em) { .hero__grid { display: grid; } }
.hero__grid span { border-left: 1px solid var(--line); opacity: 0.55; }
.hero__grid span:last-child { border-right: 1px solid var(--line); }

.hero__inner { position: relative; z-index: 1; }

.hero__layout {
  display: grid;
  gap: clamp(2.25rem, 4.5vw, 3.5rem);
  align-items: center;
}
.hero__copy { display: flex; flex-direction: column; }

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.15rem, 2.4vw, 1.6rem);
}

.hero__title { margin-bottom: clamp(1.15rem, 2.4vw, 1.6rem); }
.hero__title .l { display: block; }
.hero__title .price { color: var(--accent); }

.hero__lede { max-width: 46ch; margin-bottom: clamp(1.4rem, 2.6vw, 1.85rem); }

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.6rem;
  margin-bottom: 1.35rem;
}

.hero__assure {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--step--1);
  color: var(--muted);
  max-width: 40ch;
}
.hero__assure svg { flex-shrink: 0; margin-top: 0.2em; color: var(--accent); }

/* Sector list -------------------------------------------------------------- */
.sectors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.05rem;
  padding-block: clamp(1.1rem, 2.2vw, 1.5rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sectors li {
  font-size: var(--step--1);
  color: var(--muted);
  white-space: nowrap;
}
/* The separator leads its own item rather than trailing the previous one.
   A trailing dot ends up dangling at the end of every wrapped line; a leading
   one always sits against the word it belongs to. */
.sectors li + li::before {
  content: "";
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
  vertical-align: 0.28em;
  margin-right: 1.05rem;
}
.sectors .sectors__label { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   10. Mockups — miniature websites drawn in CSS
   -------------------------------------------------------------------------- */
.mk {
  --u: 3.4px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 1px 1px rgba(22, 17, 14, 0.05),
    0 8px 20px -8px rgba(22, 17, 14, 0.16),
    0 28px 56px -24px rgba(22, 17, 14, 0.22);
  border: 1px solid var(--line);
}
@supports (container-type: inline-size) {
  .mk__screen { container-type: inline-size; }
  .mk { --u: 1cqw; }
}

/* Browser chrome ----------------------------------------------------------- */
.mk__bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.85rem;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.mk__dots { display: flex; gap: 4px; flex-shrink: 0; }
.mk__dots i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, #16110E 16%, transparent); }
.mk__url {
  flex: 1;
  min-width: 0;
  padding: 0.2rem 0.6rem;
  background: color-mix(in srgb, #fff 70%, transparent);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--muted-2);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mk__screen { position: relative; overflow: hidden; aspect-ratio: 16 / 11.6; }

.mk__site {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font-text);
  background: var(--mk-bg, #fff);
  color: var(--mk-ink, #16110E);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* Mock navigation ---------------------------------------------------------- */
.mk__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 2.6) calc(var(--u) * 3.4);
  border-bottom: 1px solid var(--mk-line, rgba(0, 0, 0, 0.09));
  flex-shrink: 0;
}
.mk__logo {
  font-family: var(--mk-display, var(--font-text));
  font-size: calc(var(--u) * 2.6);
  font-weight: var(--mk-logo-weight, 600);
  letter-spacing: var(--mk-logo-track, -0.02em);
  text-transform: var(--mk-logo-case, none);
  color: var(--mk-ink);
  line-height: 1;
  white-space: nowrap;
}
.mk__links { display: flex; gap: calc(var(--u) * 2.4); }
.mk__links span {
  font-size: calc(var(--u) * 1.55);
  color: var(--mk-mute, rgba(0, 0, 0, 0.55));
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.mk__cta {
  padding: calc(var(--u) * 1) calc(var(--u) * 2);
  background: var(--mk-accent);
  color: var(--mk-on-accent, #fff);
  border-radius: var(--mk-radius, 100px);
  font-size: calc(var(--u) * 1.5);
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.3;
}

/* Mock hero ---------------------------------------------------------------- */
.mk__hero { display: flex; flex: 1; min-height: 0; }
.mk__copy {
  flex: 1 1 52%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 3.4);
  min-width: 0;
}
.mk__eyebrow {
  font-size: calc(var(--u) * 1.35);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mk-accent);
}
.mk__h1 {
  font-family: var(--mk-display, var(--font-text));
  font-size: calc(var(--u) * var(--mk-h1, 5.6));
  font-weight: var(--mk-h1-weight, 600);
  line-height: var(--mk-h1-lh, 1);
  letter-spacing: var(--mk-h1-track, -0.035em);
  text-transform: var(--mk-h1-case, none);
  color: var(--mk-ink);
}
.mk__p {
  font-size: calc(var(--u) * 1.6);
  color: var(--mk-mute, rgba(0, 0, 0, 0.6));
  line-height: 1.5;
  max-width: 26ch;
}
.mk__btns { display: flex; gap: calc(var(--u) * 1.4); margin-top: calc(var(--u) * 0.8); flex-wrap: wrap; }
.mk__btn {
  padding: calc(var(--u) * 1.25) calc(var(--u) * 2.4);
  background: var(--mk-accent);
  color: var(--mk-on-accent, #fff);
  border-radius: var(--mk-radius, 100px);
  font-size: calc(var(--u) * 1.5);
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.3;
}
.mk__btn--2 {
  background: transparent;
  color: var(--mk-ink);
  border: 1px solid var(--mk-line-strong, rgba(0, 0, 0, 0.22));
  padding-block: calc(var(--u) * 1.15);
}

/* Mock artwork (stands in for photography) --------------------------------- */
.mk__art {
  flex: 1 1 48%;
  background: var(--mk-art, linear-gradient(150deg, #444, #999));
  position: relative;
  overflow: hidden;
}
.mk__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mk__art--inset { margin: calc(var(--u) * 3.4); border-radius: var(--mk-art-radius, 3px); }

/* Mock info strip ---------------------------------------------------------- */
.mk__strip {
  display: flex;
  flex-shrink: 0;
  border-top: 1px solid var(--mk-line, rgba(0, 0, 0, 0.09));
  background: var(--mk-strip-bg, transparent);
}
.mk__strip div {
  flex: 1;
  padding: calc(var(--u) * 1.9) calc(var(--u) * 3.4);
  font-size: calc(var(--u) * 1.45);
  color: var(--mk-mute, rgba(0, 0, 0, 0.6));
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mk__strip div + div { border-left: 1px solid var(--mk-line, rgba(0, 0, 0, 0.09)); }
.mk__strip b { color: var(--mk-ink); font-weight: 600; display: block; font-size: calc(var(--u) * 1.5); }

/* Photographic vignette so the art reads as an image crop ------------------- */
/* A restrained colour grade so each photo belongs to its own palette. */
.mk__art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.28), transparent 52%),
    var(--mk-tint, linear-gradient(160deg, rgba(0, 0, 0, 0.10), transparent 60%));
}

/* A little grain stops the gradients reading as flat colour fields. */
.mk__art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0.09;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 120px 120px;
}

/* --- Variant: kitchen and bath remodeler ---------------------------------- */
.mk--remodel {
  --mk-tint: linear-gradient(155deg, rgba(156, 90, 50, 0.30), rgba(36, 26, 18, 0.34));
  --mk-bg: #F8F2E8;
  --mk-ink: #241A12;
  --mk-mute: rgba(36, 26, 18, 0.62);
  --mk-line: rgba(36, 26, 18, 0.12);
  --mk-line-strong: rgba(36, 26, 18, 0.26);
  --mk-accent: #9C5A32;
  --mk-display: var(--font-display);
  --mk-radius: 2px;
  --mk-h1: 6.2;
  --mk-h1-weight: 500;
  --mk-h1-track: -0.03em;
  --mk-logo-weight: 500;
  --mk-logo-track: -0.01em;
  --mk-strip-bg: rgba(36, 26, 18, 0.035);
  --mk-art: radial-gradient(90% 70% at 68% 22%, rgba(255, 228, 190, 0.5), transparent 62%),
            linear-gradient(158deg, #2E1B10 0%, #6B3E22 46%, #AD764C 100%);
}

/* --- Variant: plumbing (dark, utility-forward) ---------------------------- */
.mk--plumb {
  --mk-tint: linear-gradient(155deg, rgba(22, 52, 74, 0.42), rgba(16, 33, 48, 0.30));
  --mk-bg: #102130;
  --mk-ink: #EDF3F7;
  --mk-mute: rgba(237, 243, 247, 0.60);
  --mk-line: rgba(237, 243, 247, 0.14);
  --mk-line-strong: rgba(237, 243, 247, 0.34);
  --mk-accent: #F0A32B;
  --mk-on-accent: #16110E;
  --mk-radius: 4px;
  --mk-h1: 5.4;
  --mk-h1-weight: 700;
  --mk-h1-track: -0.035em;
  --mk-logo-weight: 700;
  --mk-logo-case: uppercase;
  --mk-logo-track: 0.02em;
  --mk-strip-bg: rgba(0, 0, 0, 0.22);
  --mk-art: radial-gradient(80% 60% at 32% 16%, rgba(255, 255, 255, 0.26), transparent 60%),
            linear-gradient(155deg, #16344A, #2F6B85 58%, #86B6C6);
}

/* --- Variant: custom home builder (dark, quiet, editorial) ---------------- */
.mk--build {
  --mk-tint: linear-gradient(155deg, rgba(185, 140, 90, 0.20), rgba(20, 17, 16, 0.42));
  --mk-bg: #141110;
  --mk-ink: #F1E9E0;
  --mk-mute: rgba(241, 233, 224, 0.58);
  --mk-line: rgba(241, 233, 224, 0.14);
  --mk-line-strong: rgba(241, 233, 224, 0.32);
  --mk-accent: #B98C5A;
  --mk-on-accent: #141110;
  --mk-display: var(--font-display);
  --mk-radius: 0;
  --mk-h1: 5.9;
  --mk-h1-weight: 400;
  --mk-h1-track: -0.02em;
  --mk-logo-case: uppercase;
  --mk-logo-track: 0.24em;
  --mk-logo-weight: 400;
  --mk-art: radial-gradient(70% 60% at 62% 24%, rgba(255, 226, 199, 0.32), transparent 62%),
            linear-gradient(160deg, #17120F, #3E2C22 55%, #745643);
}

/* --- Variant: roofing and exteriors (slate, weathered copper) -------------- */
.mk--roof {
  --mk-tint: linear-gradient(155deg, rgba(38, 50, 60, 0.34), rgba(120, 62, 40, 0.20));
  --mk-bg: #F2F0EC;
  --mk-ink: #1F262B;
  --mk-mute: rgba(31, 38, 43, 0.62);
  --mk-line: rgba(31, 38, 43, 0.12);
  --mk-line-strong: rgba(31, 38, 43, 0.26);
  --mk-accent: #A6462A;
  --mk-display: var(--font-display);
  --mk-radius: 3px;
  --mk-h1: 5.9;
  --mk-h1-weight: 500;
  --mk-strip-bg: rgba(31, 38, 43, 0.04);
  --mk-art: radial-gradient(90% 70% at 26% 18%, rgba(255, 236, 214, 0.38), transparent 60%),
            linear-gradient(160deg, #26323C, #4A5A66 55%, #97A3AB);
}

/* --- Variant: electrical contractor (industrial) -------------------------- */
.mk--elec {
  --mk-tint: linear-gradient(155deg, rgba(23, 24, 26, 0.34), rgba(198, 48, 31, 0.16));
  --mk-bg: #F5F5F2;
  --mk-ink: #17181A;
  --mk-mute: rgba(23, 24, 26, 0.60);
  --mk-line: rgba(23, 24, 26, 0.12);
  --mk-line-strong: rgba(23, 24, 26, 0.26);
  --mk-accent: #C6301F;
  --mk-radius: 3px;
  --mk-h1: 5.2;
  --mk-h1-weight: 700;
  --mk-h1-case: uppercase;
  --mk-h1-track: -0.02em;
  --mk-h1-lh: 0.98;
  --mk-logo-weight: 700;
  --mk-logo-case: uppercase;
  --mk-logo-track: -0.01em;
  --mk-strip-bg: #17181A;
  --mk-art: radial-gradient(80% 60% at 72% 18%, rgba(255, 255, 255, 0.20), transparent 60%),
            linear-gradient(155deg, #17181A, #3A3F45 58%, #666D75);
}
.mk--elec .mk__strip div { color: rgba(245, 245, 242, 0.62); }
.mk--elec .mk__strip b { color: #F5F5F2; }
.mk--elec .mk__strip div + div { border-left-color: rgba(245, 245, 242, 0.16); }

/* --- Variant: painting contractor (warm, friendly) ------------------------ */
.mk--paint {
  --mk-tint: linear-gradient(155deg, rgba(183, 122, 80, 0.22), rgba(42, 122, 112, 0.18));
  --mk-bg: #FDF5EE;
  --mk-ink: #32231A;
  --mk-mute: rgba(50, 35, 26, 0.62);
  --mk-line: rgba(50, 35, 26, 0.12);
  --mk-line-strong: rgba(50, 35, 26, 0.24);
  --mk-accent: #2A7A70;
  --mk-display: var(--font-display);
  --mk-radius: 100px;
  --mk-h1: 5.8;
  --mk-h1-weight: 500;
  --mk-art-radius: calc(var(--u) * 2);
  --mk-strip-bg: rgba(42, 122, 112, 0.07);
  --mk-art: radial-gradient(85% 65% at 32% 20%, rgba(255, 255, 255, 0.48), transparent 60%),
            linear-gradient(155deg, #B77A50, #E0B189 55%, #F6DDC4);
}

/* --- Variant: the "before" (dated DIY site) ------------------------------- */
.mk--dated {
  --mk-bg: #FFFFFF;
  --mk-ink: #2C2C2C;
  --mk-mute: #555;
  --mk-line: #CCCCCC;
}
.mk--dated .mk__site {
  font-family: "Times New Roman", Times, serif;
  background: #FFFFFF;
  text-align: center;
}
.mk--dated .mk__banner {
  padding: calc(var(--u) * 2.4);
  background: linear-gradient(#4A6FA5, #2F4E7C);
  color: #fff;
  border-bottom: calc(var(--u) * 0.4) solid #14213D;
  flex-shrink: 0;
}
.mk--dated .mk__banner span {
  font-size: calc(var(--u) * 3.6);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}
.mk--dated .mk__tabs {
  display: flex;
  justify-content: center;
  gap: calc(var(--u) * 0.4);
  padding: calc(var(--u) * 1) calc(var(--u) * 2);
  background: #E8E8E8;
  border-bottom: 1px solid #BBB;
  flex-shrink: 0;
}
.mk--dated .mk__tabs span {
  padding: calc(var(--u) * 0.7) calc(var(--u) * 1.6);
  font-size: calc(var(--u) * 1.5);
  color: #0000CC;
  text-decoration: underline;
  background: #F4F4F4;
  border: 1px solid #CCC;
}
.mk--dated .mk__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.6);
  padding: calc(var(--u) * 3);
  min-height: 0;
}
.mk--dated .mk__welcome { font-size: calc(var(--u) * 3.2); font-weight: 700; color: #2C2C2C; }
.mk--dated .mk__blurb { font-size: calc(var(--u) * 1.6); color: #444; max-width: 46ch; line-height: 1.45; }
.mk--dated .mk__oldimg {
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 13);
  background:
    repeating-linear-gradient(45deg, #DCDCDC 0 calc(var(--u) * 1), #D2D2D2 calc(var(--u) * 1) calc(var(--u) * 2));
  border: 1px solid #AAA;
  display: grid;
  place-items: center;
  font-size: calc(var(--u) * 1.4);
  color: #888;
}
.mk--dated .mk__oldfoot {
  padding: calc(var(--u) * 1.6);
  background: #E8E8E8;
  border-top: 1px solid #BBB;
  font-size: calc(var(--u) * 1.3);
  color: #666;
  flex-shrink: 0;
}

/* --- Phone frame ---------------------------------------------------------- */
.mk--phone {
  background: #1A1512;
  border: 0;
  padding: 2.4%;
  border-radius: 9% / 4.4%;
  box-shadow:
    0 2px 4px rgba(22, 17, 14, 0.10),
    0 14px 28px -10px rgba(22, 17, 14, 0.26),
    0 36px 64px -28px rgba(22, 17, 14, 0.34);
}
.mk--phone .mk__screen {
  aspect-ratio: 9 / 18.4;
  border-radius: 7% / 3.4%;
  overflow: hidden;
  background: var(--mk-bg, #fff);
}
.mk--phone .mk__notch {
  position: absolute;
  top: 1.6%;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 2.1%;
  background: #1A1512;
  border-radius: 100px;
  z-index: 3;
}

/* Mobile composition inside the phone -------------------------------------- */
.mk__site--mobile .mk__nav { padding: calc(var(--u) * 5) calc(var(--u) * 4.5) calc(var(--u) * 3.6); }
.mk__site--mobile .mk__logo { font-size: calc(var(--u) * 4.4); }
.mk__site--mobile .mk__burger { display: grid; gap: calc(var(--u) * 1); width: calc(var(--u) * 5); }
.mk__site--mobile .mk__burger i { height: calc(var(--u) * 0.5); background: var(--mk-ink); border-radius: 2px; }
.mk__site--mobile .mk__burger i:last-child { width: 62%; background: var(--mk-accent); }
.mk__site--mobile .mk__hero { flex-direction: column; }
.mk__site--mobile .mk__art { flex: 0 0 26%; }
.mk__site--mobile .mk__copy {
  padding: calc(var(--u) * 4.5);
  gap: calc(var(--u) * 2.6);
  flex: 1;
}
.mk__site--mobile .mk__eyebrow { font-size: calc(var(--u) * 2.3); }
.mk__site--mobile .mk__h1 { font-size: calc(var(--u) * 9.4); }
.mk__site--mobile .mk__p { font-size: calc(var(--u) * 2.8); max-width: none; }
.mk__site--mobile .mk__btns { flex-direction: column; gap: calc(var(--u) * 2); }
.mk__site--mobile .mk__btn {
  text-align: center;
  padding: calc(var(--u) * 2.8);
  font-size: calc(var(--u) * 2.8);
}
.mk__site--mobile .mk__strip { flex-direction: column; }
.mk__site--mobile .mk__strip div { padding: calc(var(--u) * 3) calc(var(--u) * 4.5); font-size: calc(var(--u) * 2.4); }
.mk__site--mobile .mk__strip div + div { border-left: 0; border-top: 1px solid var(--mk-line); }
.mk__site--mobile .mk__strip b { font-size: calc(var(--u) * 2.6); }

/* Sticky click-to-call bar, drawn as part of the mobile mock ---------------- */
.mk__callbar {
  flex-shrink: 0;
  padding: calc(var(--u) * 3) calc(var(--u) * 4.5) calc(var(--u) * 4);
  background: var(--mk-accent);
  color: var(--mk-on-accent, #fff);
  font-size: calc(var(--u) * 3);
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   11. Hero proof composition
   -------------------------------------------------------------------------- */
.proof { position: relative; }
.proof__main { position: relative; z-index: 1; }
.proof__frame { position: relative; padding-top: 2.1rem; }
.proof__phone {
  position: absolute;
  z-index: 2;
  width: 20%;
  right: -2.5%;
  bottom: 0;
}
.proof__tag {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.7rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 100px;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px -8px rgba(22, 17, 14, 0.5);
}
.proof__tag i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* Caption under a mockup --------------------------------------------------- */
.mk-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.15rem 1rem;
  margin-top: 0.9rem;
  font-size: var(--step--1);
}
.mk-caption__name { font-weight: 600; color: var(--ink); }
.on-ink .mk-caption__name { color: var(--on-dark); }
.mk-caption__type { color: var(--muted); }

/* Concept badge ------------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.badge i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   12. Problem quotes
   -------------------------------------------------------------------------- */
.quotes {
  --cell-pad: clamp(1.15rem, 2.4vw, 1.65rem);
  display: grid;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.quotes li {
  background: var(--paper);
  padding: var(--cell-pad);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
/* The outer cells drop their outside padding so the quotes start on the same
   left grid line as the section heading instead of sitting 26px inside it. */
.quotes > li { padding-inline: 0; }
@media (min-width: 40em) {
  .quotes > li { padding-inline: var(--cell-pad); }
  .quotes > li:nth-child(2n + 1) { padding-left: 0; }
  .quotes > li:nth-child(2n) { padding-right: 0; }
}
@media (min-width: 62em) {
  .quotes > li:nth-child(2n) { padding-right: var(--cell-pad); }
  .quotes > li:nth-child(2n + 1) { padding-left: var(--cell-pad); }
  .quotes > li:nth-child(3n + 1) { padding-left: 0; }
  .quotes > li:nth-child(3n) { padding-right: 0; }
}
.on-ink .quotes li { background: var(--ink); }
.quotes q {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.18;
  letter-spacing: -0.02em;
  quotes: "\201C" "\201D";
  text-wrap: balance;
}
.quotes cite {
  font-style: normal;
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   13. Offer / price
   -------------------------------------------------------------------------- */
.offer {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: color-mix(in srgb, #F6F1E9 4%, transparent);
}
.offer__col { display: flex; flex-direction: column; gap: clamp(1.75rem, 3.5vw, 2.75rem); }
.offer__head { display: flex; flex-direction: column; gap: 1.15rem; }
.offer__list { min-width: 0; }
/* The exclusions run the full width of the card. Kept inside the left column
   they left the included-list column ending 160px short of the card floor,
   which is the single biggest pocket of dead space on the page. */
.offer__foot {
  grid-column: 1 / -1;
  padding-top: clamp(1.4rem, 2.8vw, 1.9rem);
  border-top: 1px solid var(--line);
}
.offer__price {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: var(--step-6);
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-weight: 500;
}
.offer__price sup {
  font-size: 0.34em;
  line-height: 1;
  top: 0.28em;
  position: relative;
  color: var(--accent);
}
.offer__terms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: var(--step--1);
  color: var(--muted);
}
.offer__terms span { display: inline-flex; align-items: center; gap: 0.45rem; }
.offer__terms svg { color: var(--accent); flex-shrink: 0; }

/* Two columns on wide screens. As a single 8-item column this list ran 716px
   tall against a 430px price column, which is what forced the big pocket of
   dead space in the card; split, the two columns finish within 50px. */
.includes { display: grid; gap: 0 2.5rem; }
@media (min-width: 76em) { .includes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.includes li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding-block: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  line-height: 1.5;
}
.includes li:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 76em) {
  /* Two columns means the final row holds two cells; both need the closing
     rule or one column ends on a stray hanging line. */
  .includes li:nth-last-child(-n + 2) { border-bottom: 1px solid var(--line); }
}
.includes__mark { color: var(--accent); flex-shrink: 0; margin-top: 0.28em; }
.includes b { display: block; font-weight: 600; }
.includes span { color: var(--muted); }

/* Not a box. A dashed rounded rectangle around the exclusions read as a
   warning panel bolted inside the price card; as a plain list across the foot
   of the card it reads as the rest of the same document. */
.excludes {
  display: grid;
  gap: 0.6rem 2.5rem;
}
@media (min-width: 40em) { .excludes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62em) { .excludes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.excludes li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: var(--step--1);
  color: var(--muted);
}
/* 2px so the rule survives a 1x screen — see .prose ul li::before. A dash is
   kept here rather than a dot because it carries the "not included" sense. */
.excludes li::before {
  content: "";
  width: 9px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  flex-shrink: 0;
  margin-top: 0.62em;
  opacity: 0.55;
}

/* Editorial callout — a note that has to stay visible without becoming a card.
   Same left-rule language as .day__you. */
.callout {
  padding-left: clamp(1rem, 2.2vw, 1.35rem);
  border-left: 2px solid var(--accent);
}
.callout p { color: var(--ink); }
.on-ink .callout p { color: var(--on-dark); }

/* --------------------------------------------------------------------------
   14. Three-day process
   -------------------------------------------------------------------------- */
.days { display: grid; }
.day {
  display: grid;
  gap: clamp(0.6rem, 2vw, 2rem);
  padding-block: clamp(1.5rem, 3.2vw, 2.4rem);
  border-top: 1px solid var(--line);
  position: relative;
}
.day:last-child { border-bottom: 1px solid var(--line); }
.day__no {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  font-weight: 500;
  color: var(--accent);
  font-variant-numeric: lining-nums;
}
.day__label { margin-bottom: 0.65rem; }
.day__title { margin-bottom: 0.85rem; }
.day__list { display: grid; gap: 0.45rem; margin-top: 1.1rem; }
.day__list li {
  position: relative;
  padding-left: 1.3rem;
  font-size: var(--step--1);
  color: var(--muted);
}
.day__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.day__you {
  margin-top: 1.25rem;
  padding: 0.85rem 1.1rem;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, #DC4B1E 5%, transparent);
  font-size: var(--step--1);
}
.day__you b { font-weight: 600; }

/* --------------------------------------------------------------------------
   15. Reason cards
   -------------------------------------------------------------------------- */
/* Ruled, not carded: the same treatment as .quotes, so the page has one
   language for tabular blocks instead of a rounded box floating inside the
   grid. Flush outer cells keep the text on the content grid. */
.reasons {
  --cell-pad: clamp(1.35rem, 2.6vw, 1.9rem);
  display: grid;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.reason {
  background: var(--paper);
  padding: var(--cell-pad);
  padding-inline: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 100%;
}
@media (min-width: 40em) {
  .reason { padding-inline: var(--cell-pad); }
  .reasons > .reason:nth-child(2n + 1) { padding-left: 0; }
  .reasons > .reason:nth-child(2n) { padding-right: 0; }
}
.on-ink .reason { background: var(--ink); }
.reason__no {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  color: var(--accent-ink);
  margin-bottom: 0.35rem;
}
.reason p { color: var(--muted); font-size: var(--step--1); }

/* --------------------------------------------------------------------------
   16. Comparison
   -------------------------------------------------------------------------- */
.compare { width: 100%; border-collapse: collapse; text-align: left; }
.compare caption { text-align: left; margin-bottom: 1.5rem; font-size: var(--step--1); color: var(--muted); }
.compare th, .compare td {
  padding: clamp(0.9rem, 2vw, 1.15rem) clamp(0.75rem, 1.8vw, 1.35rem);
  vertical-align: top;
  font-size: var(--step--1);
  line-height: 1.45;
  border-bottom: 1px solid var(--line);
}
/* Row labels sit on the content grid rather than one cell-padding inside it.
   The tinted Site in Three column keeps its padding — it is a filled block,
   so its text should not touch the edge of the tint. */
@media (min-width: 48em) {
  .compare tr > *:first-child { padding-left: 0; }
}
.compare thead th {
  font-family: var(--font-text);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: var(--line-strong);
  white-space: nowrap;
}
.compare tbody th {
  font-family: var(--font-text);
  font-weight: 600;
  color: var(--ink);
  width: 1%;
  white-space: nowrap;
}
.compare td { color: var(--muted); }
.compare .is-us {
  background: color-mix(in srgb, #DC4B1E 5%, transparent);
  color: var(--ink);
  font-weight: 500;
}
.compare thead .is-us { color: var(--accent-ink); position: relative; }
.compare thead .is-us::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: var(--accent);
}
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   17. Fit lists
   -------------------------------------------------------------------------- */
.fit { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.fit__col { display: flex; flex-direction: column; gap: 1.15rem; }
.fit__head { display: flex; align-items: center; gap: 0.7rem; }
.fit__list { display: grid; gap: 0.7rem; }
.fit__list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: var(--step--1);
  color: var(--muted);
  line-height: 1.5;
}
.fit__list svg { flex-shrink: 0; margin-top: 0.22em; }
.fit--yes .fit__list svg { color: var(--accent); }
.fit--no .fit__list svg { color: var(--muted-2); }

/* --------------------------------------------------------------------------
   18. Work (editorial rows)
   -------------------------------------------------------------------------- */
.work-row {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: center;
  padding-block: clamp(2rem, 4vw, 3.25rem);
  border-top: 1px solid var(--line);
}
.work-row__meta { display: flex; flex-direction: column; gap: 1.1rem; }
.work-row__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.work-row__notes { display: grid; gap: 1.1rem; margin-top: 0.4rem; }
.note__label {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 0.35rem;
}
.note p { font-size: var(--step--1); color: var(--muted); max-width: 62ch; }

.mk-link { display: block; transition: transform 0.5s var(--ease); }
.mk-link:hover { transform: translateY(-4px); }

/* Work grid (home) --------------------------------------------------------- */
.work-grid { display: grid; gap: clamp(1.75rem, 3.5vw, 2.5rem); }
.work-card { display: flex; flex-direction: column; }

/* --------------------------------------------------------------------------
   19. Before / after
   -------------------------------------------------------------------------- */
.ba { display: grid; gap: clamp(1.25rem, 3vw, 2rem); align-items: center; }
.ba__item { display: flex; flex-direction: column; gap: 0.9rem; }
.ba__label { display: flex; align-items: center; gap: 0.6rem; }
.ba__arrow {
  display: grid;
  place-items: center;
  color: var(--accent);
}
.ba__arrow svg { transform: rotate(90deg); }
.ba .mk--dated { box-shadow: 0 1px 1px rgba(22, 17, 14, 0.05), 0 6px 14px -10px rgba(22, 17, 14, 0.3); }

/* --------------------------------------------------------------------------
   20. FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1.1rem, 2.6vw, 1.5rem);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: -0.02em;
  transition: color 0.3s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--accent-ink); }
.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.2em;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.4s var(--ease);
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  inset: 50% 28%;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.faq__icon::after { transform: translateY(-50%) rotate(90deg); }
[open] > .faq__q .faq__icon { background: var(--accent); border-color: var(--accent); color: #fff; }
[open] > .faq__q .faq__icon::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.faq__a { padding-bottom: clamp(1.1rem, 2.6vw, 1.6rem); padding-right: clamp(0, 6vw, 3rem); }
.faq__a p { color: var(--muted); max-width: 64ch; text-wrap: pretty; }
.faq__a p + p { margin-top: 0.8em; }
.faq__a a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Progressive open animation where supported */
@supports selector(::details-content) {
  .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: block-size 0.4s var(--ease), opacity 0.3s var(--ease), content-visibility 0.4s allow-discrete;
    transition-behavior: allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; opacity: 1; }
}

/* --------------------------------------------------------------------------
   21. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: clamp(1.1rem, 2.4vw, 1.4rem); }
.field { display: grid; gap: 0.45rem; }
.field__label {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: -0.005em;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.field__opt { font-weight: 400; color: var(--muted); font-size: var(--step--2); }
.field__hint { font-size: var(--step--2); color: var(--muted); line-height: 1.45; }

.input, .select, .textarea {
  width: 100%;
  padding: 0.95rem 1.05rem;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-size: max(16px, var(--step--1));
  line-height: 1.4;
  color: var(--ink);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
  appearance: none;
}
.textarea { min-height: 7rem; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--muted-2); }
.input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, #16110E 38%, transparent); }
.input:focus, .select:focus, .textarea:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, #DC4B1E 18%, transparent);
  background: #fff;
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--accent-deep);
  background: color-mix(in srgb, #DC4B1E 4%, transparent);
}

.select-wrap { position: relative; display: grid; }
.select { padding-right: 2.75rem; cursor: pointer; }
.select-wrap svg {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted);
}

.field__error {
  display: none;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--step--2);
  font-weight: 600;
  color: var(--accent-deep);
}
.field.has-error .field__error { display: flex; }

.form__row { display: grid; gap: clamp(1.1rem, 2.4vw, 1.4rem); }
.form__foot { display: grid; gap: 0.9rem; margin-top: 0.4rem; }
.form__note { font-size: var(--step--2); color: var(--muted); line-height: 1.5; }
.form__note a { text-decoration: underline; text-underline-offset: 2px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Alert / status panels ---------------------------------------------------- */
.alert {
  display: none;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  border-radius: 10px;
  font-size: var(--step--1);
  line-height: 1.5;
  border: 1px solid;
}
.alert.is-shown { display: flex; }
.alert--error {
  border-color: color-mix(in srgb, #A83512 35%, transparent);
  background: color-mix(in srgb, #DC4B1E 7%, transparent);
  color: var(--ink);
}
.alert svg { flex-shrink: 0; margin-top: 0.15em; color: var(--accent-deep); }
.alert a { color: var(--accent-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Success panel ------------------------------------------------------------ */
.success {
  display: none;
  flex-direction: column;
  gap: 1.15rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}
.success.is-shown { display: flex; }
.success__mark {
  display: grid;
  place-items: center;
  width: 2.9rem; height: 2.9rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  flex-shrink: 0;
}
.success__steps { display: grid; gap: 0.65rem; margin-top: 0.35rem; }
.success__steps li {
  display: flex;
  gap: 0.8rem;
  font-size: var(--step--1);
  color: var(--muted);
  align-items: flex-start;
}
.success__steps .n {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--accent-ink);
  flex-shrink: 0;
  margin-top: 0.25em;
}

.is-busy { pointer-events: none; opacity: 0.7; }
.spinner {
  width: 14px; height: 14px;
  border: 2px solid color-mix(in srgb, #FBF8F3 40%, transparent);
  border-top-color: #FBF8F3;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   22. CTA band
   -------------------------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.5rem, 3vw, 2rem);
}
.cta-band .t-lede { max-width: 46ch; text-align: center; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }
.cta-band__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  font-size: var(--step--1);
  color: var(--muted);
}
.cta-band__meta span { display: inline-flex; align-items: center; gap: 0.45rem; }
.cta-band__meta svg { color: var(--accent); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   23. Footer
   -------------------------------------------------------------------------- */
.footer { border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 4.5vw, 3.5rem) 1.75rem; }
.footer__top { display: grid; gap: clamp(1.75rem, 3.5vw, 2.5rem); margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.footer__pitch { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
/* Padding rather than gap, so each link carries its own 38px tap target while
   the column keeps roughly the rhythm it had. */
.footer__nav { display: grid; gap: 0; }
.footer__nav h2 {
  font-family: var(--font-text);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.footer__nav a { font-size: var(--step--1); color: var(--muted); padding-block: 0.45rem; transition: color 0.25s var(--ease); }
.footer__nav > p { padding-top: 0.45rem; }
.footer__nav a:hover { color: var(--ink); }
.on-ink .footer__nav a:hover { color: var(--on-dark); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-size: var(--step--2);
  color: var(--muted);
}
.footer__bottom a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   24. Inner page header
   -------------------------------------------------------------------------- */
.page-head {
  padding-top: clamp(2.25rem, 4.5vw, 3.5rem);
  padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  border-bottom: 1px solid var(--line);
}
.page-head__inner { display: grid; gap: clamp(1.25rem, 3vw, 2rem); align-items: end; }
.page-head__lede { max-width: 52ch; }
.crumbs { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; font-size: var(--step--2); color: var(--muted); }
.crumbs a:hover { color: var(--accent-ink); }
.crumbs li { display: flex; align-items: center; gap: 0.5rem; }
.crumbs li + li::before { content: "/"; color: var(--line-strong); }
.crumbs [aria-current="page"] { color: var(--ink); }

/* --------------------------------------------------------------------------
   25. Scroll reveal
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   26. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 33.99em) {
  .proof__phone { display: none; }
}

@media (min-width: 34em) {
  .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 40em) {
  .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48em) {
  .day { grid-template-columns: minmax(4.5rem, 6rem) minmax(0, 1fr); }
  .day__no { grid-row: span 2; }
  .fit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); }
  .page-head__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

@media (min-width: 56em) {
  .offer { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
  .ba { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .ba__arrow svg { transform: none; }
}

@media (min-width: 62em) {
  .nav-toggle { display: none; }
  .hero__layout { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
  .work-row { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  /* Flipping only the order left the mockup 642px wide on one row and 475px on
     the next, so the concept work was shown at two different sizes down the
     page and the prose ran to 86 characters. Swap the track widths too. */
  .work-row--flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .work-row--flip .work-row__meta { order: 2; }
  .work-row--flip .work-row__art { order: 1; }
  .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 61.99em) {
  .nav, .header__actions .price-chip, .header__actions .btn { display: none; }
  .header__actions .btn--compact { display: inline-flex; }
  .nav-toggle { display: flex; }
}

@media (min-width: 76em) {
  .day { grid-template-columns: 6rem minmax(0, 17rem) minmax(0, 1fr); align-items: start; }
  .day__no { grid-row: auto; }
}

/* Comparison: transpose to stacked blocks on small screens ------------------ */
@media (max-width: 47.99em) {
  .compare, .compare thead, .compare tbody, .compare tr, .compare th, .compare td { display: block; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compare tbody tr {
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 0.9rem;
    overflow: hidden;
  }
  .compare tbody th {
    width: auto;
    white-space: normal;
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
    font-size: var(--step--2);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .compare tbody td { border-bottom: 1px solid var(--line); padding-block: 0.8rem; }
  .compare tbody tr td:last-child { border-bottom: 0; }
  .compare tbody td::before {
    content: attr(data-col);
    display: block;
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 0.2rem;
  }
  .compare .is-us::before { color: var(--accent-ink); }
  .compare thead .is-us::before { content: none; }
}

/* --------------------------------------------------------------------------
   27. Motion + print preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  .header, .footer, .cta-band, .drawer, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
}

/* --------------------------------------------------------------------------
   28. Misc
   -------------------------------------------------------------------------- */
:root { interpolate-size: allow-keywords; }

.day__head { display: flex; flex-direction: column; }
.day__body { min-width: 0; }

/* The only header CTA on phones — it was 33px tall, under any thumb-target
   guidance, on the site's single most important button. */
.btn--compact { padding: 0.85em 1.25em; font-size: var(--step--2); min-height: 40px; }
@media (min-width: 62em) { .btn--compact { display: none; } }

.stack { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
.stack--lg { gap: clamp(1.75rem, 4vw, 2.75rem); }
.cluster { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }
.mt-l { margin-top: clamp(1.5rem, 3.2vw, 2.4rem); }
.mt-m { margin-top: clamp(1.25rem, 3vw, 2rem); }
.center { text-align: center; }
.center .t-lede, .center .t-body { margin-inline: auto; }

.split-head {
  display: grid;
  gap: clamp(1rem, 2.4vw, 2rem);
  align-items: end;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 56em) {
  .split-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .split-head__aside { justify-self: end; text-align: right; }
}

/* Free-mockup page: form beside a reassurance column ----------------------- */
@media (min-width: 62em) {
  .mockup-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}
@media (max-width: 61.99em) {
  .mockup-layout > aside { position: static !important; }
}

.btn.is-busy .btn__arrow { display: none; }
.success:focus { outline: none; }

/* Free-mockup closing reassurance band ------------------------------------- */
.assure { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 56em) {
  .assure { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

/* A 626px-wide stadium button is a mobile pattern stretched across a desktop
   column. Full width where the column is narrow, capped where it is not. */
@media (min-width: 40em) {
  .form__foot .btn--block { max-width: 24rem; }
}

/* Free-mockup explainer: checklist beside the action ----------------------- */
.catch { display: grid; gap: clamp(1.5rem, 3vw, 2rem); }
.catch__act { display: flex; flex-direction: column; }
@media (min-width: 62em) {
  .catch {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   29. Mockup layout archetypes
   Each concept gets its own composition, not just its own palette.
   -------------------------------------------------------------------------- */

/* --- overlay: full-bleed photo, nav and headline on top of it ------------- */
.mk__hero--overlay { position: relative; display: block; }
.mk__hero--overlay .mk__art { position: absolute; inset: 0; margin: 0; }
.mk__nav--over {
  position: relative;
  z-index: 4;
  border-bottom: 0;
  color: #fff;
}
.mk__nav--over .mk__logo { color: #fff; }
.mk__nav--over .mk__links span { color: rgba(255, 255, 255, 0.82); }
.mk__nav--over .mk__cta { background: #fff; color: var(--mk-ink); }
.mk__overlay {
  position: absolute;
  z-index: 4;
  left: calc(var(--u) * 3.4);
  right: calc(var(--u) * 3.4);
  bottom: calc(var(--u) * 3.2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.5);
  color: #fff;
}
.mk__overlay .mk__h1 { color: #fff; }
.mk__overlay .mk__eyebrow { color: #fff; opacity: 0.9; }

.mk__menu {
  display: flex;
  flex-shrink: 0;
  border-top: 1px solid var(--mk-line);
}
.mk__menu div {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 0.8);
  padding: calc(var(--u) * 1.9) calc(var(--u) * 3.4);
  font-size: calc(var(--u) * 1.5);
  color: var(--mk-mute);
  min-width: 0;
}
.mk__menu div + div { border-left: 1px solid var(--mk-line); }
.mk__menu i { flex: 1; border-bottom: 1px dotted var(--mk-line-strong); }
.mk__menu b { color: var(--mk-ink); font-weight: 600; white-space: nowrap; }

/* --- utility: alert bar, photo left, service grid ------------------------- */
.mk__alert {
  flex-shrink: 0;
  padding: calc(var(--u) * 1.3) calc(var(--u) * 3.4);
  background: var(--mk-accent);
  color: var(--mk-on-accent, #fff);
  font-size: calc(var(--u) * 1.45);
  font-weight: 700;
  letter-spacing: 0.01em;
}
/* DOM order is already photo-then-copy, so no direction change is needed. */
.mk__hero--flip .mk__art { flex-basis: 44%; }

.mk__grid3 {
  display: flex;
  flex-shrink: 0;
  border-top: 1px solid var(--mk-line);
  background: var(--mk-strip-bg, transparent);
}
.mk__grid3 div {
  flex: 1;
  padding: calc(var(--u) * 1.9) calc(var(--u) * 3.4);
  min-width: 0;
}
.mk__grid3 div + div { border-left: 1px solid var(--mk-line); }
.mk__grid3 b {
  display: block;
  font-size: calc(var(--u) * 1.6);
  font-weight: 700;
  color: var(--mk-ink);
  margin-bottom: calc(var(--u) * 0.4);
}
.mk__grid3 span { font-size: calc(var(--u) * 1.35); color: var(--mk-mute); }

/* --- centred: type first, photo band under ------------------------------- */
.mk__nav--center {
  flex-direction: column;
  gap: calc(var(--u) * 1.6);
  padding-block: calc(var(--u) * 2.8);
}
.mk__nav--center .mk__cta { display: none; }
.mk__center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 3) calc(var(--u) * 6);
  min-height: 0;
}
.mk__center .mk__p { max-width: 34ch; }

.mk__band { flex-shrink: 0; height: 34%; position: relative; overflow: hidden; }
.mk__band--tall { height: 46%; }
.mk__band .mk__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --- stacked: photo band, then copy + services --------------------------- */
.mk__below { flex: 1; display: flex; min-height: 0; }
.mk__copy--flush { flex: 1 1 52%; }
.mk__services {
  flex: 1 1 48%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--u) * 3.4);
  gap: calc(var(--u) * 1.4);
  border-left: 1px solid var(--mk-line);
  min-width: 0;
}
.mk__services div { min-width: 0; }
.mk__services b {
  display: block;
  font-size: calc(var(--u) * 1.5);
  font-weight: 600;
  color: var(--mk-ink);
}
.mk__services span { font-size: calc(var(--u) * 1.3); color: var(--mk-mute); }

/* --- index: copy beside stacked photo + promise panel -------------------- */
.mk__side {
  flex: 1 1 46%;
  display: flex;
  flex-direction: column;
  padding: calc(var(--u) * 3.4) calc(var(--u) * 3.4) calc(var(--u) * 3.4) 0;
  gap: calc(var(--u) * 1.8);
  min-width: 0;
}
.mk__side .mk__art { flex: 1; border-radius: var(--mk-art-radius, 3px); }
.mk__panel {
  flex-shrink: 0;
  padding: calc(var(--u) * 1.7);
  border: 1px solid var(--mk-line-strong);
  border-left: calc(var(--u) * 0.6) solid var(--mk-accent);
  font-size: calc(var(--u) * 1.4);
  line-height: 1.45;
  color: var(--mk-ink);
  background: color-mix(in srgb, currentColor 5%, transparent);
}

/* --- card: pill nav, rounded photo card, price chips --------------------- */
.mk__nav--pill { border-bottom: 0; padding-bottom: calc(var(--u) * 1.6); }
.mk__nav--pill .mk__links {
  padding: calc(var(--u) * 0.9) calc(var(--u) * 2);
  border-radius: 100px;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.mk__art--card {
  margin: 0 calc(var(--u) * 3.4) 0 0;
  border-radius: calc(var(--u) * 2.4);
  overflow: hidden;
  align-self: stretch;
}
.mk__prices {
  display: flex;
  flex-shrink: 0;
  gap: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 2.2) calc(var(--u) * 3.4);
  border-top: 1px solid var(--mk-line);
  background: var(--mk-strip-bg, transparent);
}
.mk__prices span {
  padding: calc(var(--u) * 1) calc(var(--u) * 2);
  border-radius: 100px;
  background: color-mix(in srgb, currentColor 7%, transparent);
  border: 1px solid var(--mk-line);
  font-size: calc(var(--u) * 1.35);
  color: var(--mk-mute);
  white-space: nowrap;
}
.mk__prices b { color: var(--mk-ink); font-weight: 600; }

/* The card layout needs breathing room the split layouts do not. */
.mk--paint .mk__copy { padding-right: calc(var(--u) * 2); }