/* ==========================================================================
   Los Reyes del Roof — Design System
   Derived from the KJ Roof system (Reino7, 2026). Same structure and rhythm;
   palette re-sampled from the LRDR brand: king mark on red circle.
   Signature angle: 26.565deg = a 6:12 roof pitch. Used for every diagonal.

   Token names keep the original --gold/--bronze identifiers so the 16 HTML
   pages' inline var() references keep working. Values are the red family:
     --gold        #E83E2C  brand red — fills, rules, large display accents.
                            4.07:1 on white: NOT for small text on light bg.
     --gold-deep   #C93321  pressed/hover + button fills (5.28:1 w/ white text)
     --bronze      #B22A1A  the only red for small text on paper (6.48:1)
     --red-on-dark #FF7A5C  coral for text accents on carbon (5.82:1)
   Dark containers rescope --gold to --red-on-dark so eyebrow/hover/accent
   text stays legible; button fills use --btn-fill and are NOT rescoped.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand — sampled from logo los reyes del roof.ai (boceto #3, favicon) */
  --brand-red: #e83e2c;
  --gold: var(--brand-red);
  --gold-deep: #c93321;      /* pressed / hover */
  --bronze: #b22a1a;         /* small red text on paper — 6.48:1 */
  --red-on-dark: #ff7a5c;    /* text accents on carbon — 5.82:1 */
  --btn-fill: #c93321;
  --btn-fill-hover: #a62617;

  /* Carbon — #1D292D is the exact logo carbon (crown/beard ink). Deeper tones
     derived from it for large background fields. */
  --brand-charcoal: #1d292d;
  --ink-900: #12191c;
  --ink-800: #172125;
  --ink-700: var(--brand-charcoal);
  --ink-600: #33444b;

  /* Cool grays — carbon is blue-leaning, so grays follow it */
  --warm-500: #7f8c91;
  --warm-400: #9aa6ab;
  --warm-300: #bcc5c9;

  /* Paper — neutral-cool to sit beside red without going pink */
  --paper: #f4f4f2;
  --brand-white: #f7f7f6;
  --paper-alt: #fafaf9;
  --white: #ffffff;

  /* Semantic */
  --bg: var(--paper);
  --ink: #232c2f;
  --ink-muted: #5a676c;
  --rule: #dde1e2;

  /* Type */
  --font-display: "neue-haas-grotesk-display", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "neue-haas-grotesk-text", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-spec: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Scale */
  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0: clamp(0.97rem, 0.95rem + 0.12vw, 1.03rem);
  --step-1: clamp(1.1rem, 1.06rem + 0.2vw, 1.22rem);
  --step-2: clamp(1.3rem, 1.22rem + 0.36vw, 1.55rem);
  --step-3: clamp(1.6rem, 1.44rem + 0.7vw, 2.1rem);
  --step-4: clamp(1.95rem, 1.66rem + 1.25vw, 2.85rem);
  --step-5: clamp(2.5rem, 2rem + 2.2vw, 4.05rem);

  /* Space */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(3.25rem, 5.5vw, 5.5rem);
  --measure: 58ch;

  /* Signature */
  --pitch: 26.565deg; /* 6:12 */
  --shell: 1200px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- 3. Type roles ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-stretch: 92%;
  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 { text-wrap: pretty; }

/* Spec text — measurements are typeset as measurements */
.spec {
  font-family: var(--font-spec);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-spec);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bronze);
  display: block;
  margin-bottom: 0.9rem;
}
.eyebrow--muted { color: var(--ink-muted); }
/* Gold only survives on dark surfaces — 12.89:1 there, 1.3:1 on paper */
.section--dark .eyebrow, .hero .eyebrow, .footer .eyebrow { color: var(--red-on-dark); }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: var(--measure);
}

/* Pitch rule — the 6:12 slope as an underline device */
.pitch-rule {
  width: 52px;
  height: 2px;
  background: var(--ink-900);
  transform: skewX(calc(-1 * var(--pitch)));
  margin-bottom: 1.35rem;
}

.section--dark .pitch-rule, .hero .pitch-rule { background: var(--gold); }

/* ---------- 4. Layout ---------- */
.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}
.section { padding-block: var(--section-y); }
.section--dark { background: var(--ink-800); color: var(--paper); }
.section--dark .lede { color: var(--warm-400); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

.section-head { max-width: 42rem; margin-bottom: clamp(2rem, 3.5vw, 3rem); }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.05rem 1.9rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.94rem;
  font-stretch: 92%;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--btn-fill); color: var(--white); }
.btn--primary:hover { background: var(--btn-fill-hover); }
.btn--ghost { background: transparent; color: var(--paper); border-color: rgba(214, 226, 231, 0.35); }
.btn--ghost:hover { border-color: var(--paper); background: rgba(214, 226, 231, 0.08); }
.btn--dark { background: var(--ink-800); color: var(--paper); }
.btn--dark:hover { background: var(--ink-600); }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--ink-900);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--gold);
}

.section--dark :where(a,button,input,select,textarea):focus-visible,
.masthead :where(a,button):focus-visible,
.footer :where(a,button):focus-visible,
.hero :where(a,button):focus-visible,
.utility :where(a,button):focus-visible {
  outline-color: var(--gold);
  box-shadow: 0 0 0 6px var(--ink-900);
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--btn-fill); color: var(--white);
  padding: 0.75rem 1.25rem; z-index: 999;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- 6. Utility bar ---------- */
.utility {
  background: var(--ink-900);
  color: var(--warm-400);
  font-size: 0.8rem;
}
.utility__inner {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem;
  align-items: center; justify-content: space-between;
  padding-block: 0.6rem;
}
.utility a { color: var(--paper); text-decoration: none; font-weight: 500; }
.utility a:hover { color: var(--red-on-dark); }
.utility__group { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center; }


/* ---------- Brand logo sizing (LRDR r2: client asked for smaller) ---------- */
.masthead .brandmark img { height: 36px; width: auto; }
.footer .brandmark img { height: 40px; width: auto; }
@media (max-width: 40rem) { .masthead .brandmark img { height: 32px; } }

/* ---------- Logo mark ---------- */
.wordmark__mark {
  width: 1.85em; height: 1.85em;
  flex: none; color: var(--gold);
  align-self: center;
}
.footer .wordmark__mark { width: 1.6em; height: 1.6em; }

/* ---------- 7. Header ---------- */
.masthead {
  position: sticky; top: 0; z-index: 100;
  background: rgba(16, 23, 26, 0.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(214, 226, 231, 0.1);
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: 0.5rem;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 900; font-stretch: 80%;
  font-size: 1.5rem; letter-spacing: -0.03em;
  color: var(--paper); text-decoration: none;
  display: flex; align-items: baseline; gap: 0.45rem;
}
.wordmark em {
  font-style: normal; color: var(--gold);
}
.wordmark span {
  font-family: var(--font-spec); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.16em; color: var(--warm-500); text-transform: uppercase;
}
.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.1rem); }
.nav a {
  color: var(--paper); text-decoration: none;
  font-size: 0.92rem; font-weight: 500;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--gold); }
.masthead .btn { padding: 0.72rem 1.3rem; font-size: 0.85rem; }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  padding: 0.5rem; color: var(--paper);
}
@media (max-width: 60rem) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(85vw, 22rem);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0.25rem; padding: 5.5rem 1.75rem 2rem;
    background: var(--ink-900);
    transform: translateX(100%); transition: transform 0.28s ease;
    overflow-y: auto;
  }
  .nav[data-open="true"] { transform: translateX(0); }
  .nav a { padding-block: 0.95rem; border-bottom: 1px solid rgba(214,226,231,0.1); font-size: 1.05rem; }
  .nav .btn { margin-top: 1.25rem; }
}

/* ---------- 8. Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--ink-900); isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media video, .hero__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(23,22,20,0.94) 0%, rgba(23,22,20,0.82) 42%, rgba(23,22,20,0.42) 100%),
    linear-gradient(to top, rgba(23,22,20,0.9) 0%, transparent 45%);
}
.hero__inner {
  position: relative;
  padding-block: clamp(3.5rem, 6.5vw, 5.25rem) clamp(3rem, 5.5vw, 4.5rem);
  max-width: 46rem;
  color: var(--paper);
}
.hero h1 { color: var(--white); margin-bottom: 1.35rem; max-width: 17ch; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero__lede {
  font-size: var(--step-1); line-height: 1.5;
  color: var(--warm-300); max-width: 36rem; margin-bottom: 2rem; font-size: var(--step-0);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 2rem; }
.hero__note {
  font-family: var(--font-spec); font-size: 0.76rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--warm-500);
}

/* ---------- 9. Spec bar ---------- */
.specbar { background: var(--ink-900); border-top: 1px solid rgba(214,226,231,0.1); }
.specbar__inner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.specbar__item {
  padding: 1.9rem clamp(1rem, 2.5vw, 2rem);
  border-right: 1px solid rgba(214,226,231,0.1);
}
.specbar__item:last-child { border-right: 0; }
.specbar__value {
  font-family: var(--font-display); font-weight: 800; font-stretch: 84%;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1;
  color: var(--paper); letter-spacing: -0.03em;
  display: block; margin-bottom: 0.55rem;
}
.specbar__value b { color: var(--gold); font-weight: inherit; }
.specbar__label {
  font-family: var(--font-spec); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--warm-500);
}

/* ---------- 10. Pitch divider — the signature ---------- */
.pitch-break { display: none; }

/* ---------- 11. Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.card:hover { border-color: var(--warm-400); transform: translateY(-3px); }
.card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--ink-700); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: clamp(1.5rem, 2.5vw, 2.1rem); display: flex; flex-direction: column; gap: 0.9rem; flex: 1; }
.card__body h3 { font-size: var(--step-1); }
.card__body p { color: var(--ink-muted); font-size: 0.97rem; }
.card__list { list-style: none; padding: 0; display: grid; gap: 0.5rem; margin-top: auto; padding-top: 0.75rem; }
.card__list li {
  font-family: var(--font-spec); font-size: 0.76rem;
  letter-spacing: 0.05em; color: var(--ink-muted);
  padding-left: 1.15rem; position: relative;
}
.card__list li::before {
  content: ""; position: absolute; left: 0; top: 0.52em;
  width: 8px; height: 2px; background: var(--bronze);
  transform: skewX(calc(-1 * var(--pitch)));
}

/* ---------- 12. Feature split ---------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 56rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.15fr 1fr; }
}
.split__media { position: relative; border-radius: 2px; overflow: hidden; }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- 13. Process — a real sequence, so it is numbered ---------- */
.steps { counter-reset: step; display: grid; gap: 0; }
@media (min-width: 56rem) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  counter-increment: step;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
  border-top: 2px solid var(--ink-600);
  position: relative;
}
@media (min-width: 56rem) { .step + .step { border-left: 1px solid var(--ink-600); } }
@media (max-width: 55.99rem) { .step { border-top: 1px solid var(--ink-600); } .step:first-child { border-top: 2px solid var(--ink-600); } }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-spec); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.14em; color: var(--gold);
  display: block; margin-bottom: 1.1rem;
}
.step h3 { font-size: var(--step-1); color: var(--paper); margin-bottom: 0.7rem; }
.step p { color: var(--warm-400); font-size: 0.95rem; }

/* ---------- 14. Quotes ---------- */
.quote {
  background: var(--white); border: 1px solid var(--rule);
  border-radius: 2px; padding: clamp(1.75rem, 3vw, 2.4rem);
  display: flex; flex-direction: column; gap: 1.25rem;
}
.quote blockquote { font-size: var(--step-1); line-height: 1.45; letter-spacing: -0.01em; }
.quote figcaption {
  font-family: var(--font-spec); font-size: 0.75rem;
  letter-spacing: 0.08em; color: var(--ink-muted); text-transform: uppercase;
  margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--rule);
}
.quote figcaption b { color: var(--ink); font-weight: 600; }

/* ---------- 15. Service area ---------- */
.areas { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.55rem; }
.areas li {
  font-family: var(--font-spec); font-size: 0.78rem; letter-spacing: 0.05em;
  padding: 0.5rem 0.9rem; border: 1px solid var(--rule);
  border-radius: 2px; background: var(--white); color: var(--ink-muted);
}
.areas li[data-core] { border-color: var(--bronze); color: var(--ink); font-weight: 600; }

/* ---------- 16. Form ---------- */
.form { display: grid; gap: 1.1rem; }
@media (min-width: 40rem) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } }
.field { display: grid; gap: 0.45rem; }
.field label {
  font-family: var(--font-spec); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--warm-400);
}
.field input, .field select, .field textarea {
  padding: 0.95rem 1.05rem;
  background: var(--ink-900);
  border: 1px solid var(--ink-600);
  border-radius: 2px; color: var(--paper);
  font-size: 1rem; width: 100%;
  transition: border-color 0.18s ease;
}
.field input::placeholder, .field textarea::placeholder { color: #5c646e; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--warm-500); }
.field textarea { resize: vertical; min-height: 6.5rem; }
.form__note { font-size: 0.82rem; color: var(--warm-500); }
.form__note a { color: var(--warm-300); }

/* ---------- 17. Footer ---------- */
.footer { background: var(--ink-900); color: var(--warm-400); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.footer__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.footer h3 {
  font-family: var(--font-spec); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper); margin-bottom: 1.15rem;
}
.footer ul { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.footer a { color: var(--warm-400); text-decoration: none; font-size: 0.92rem; }
.footer a:hover { color: var(--red-on-dark); }
.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.75rem;
  border-top: 1px solid rgba(214,226,231,0.1);
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; justify-content: space-between;
  font-size: 0.8rem;
}

/* ---------- 18. Sticky mobile call bar ---------- */
.callbar {
  position: fixed; inset: auto 0 0 0; z-index: 90;
  display: none; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--ink-600);
}
.callbar a {
  padding: 1rem; text-align: center; text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
}
.callbar a:first-child { background: var(--ink-800); color: var(--paper); }
.callbar a:last-child { background: var(--btn-fill); color: var(--white); }
@media (max-width: 48rem) {
  .callbar { display: grid; }
  body { padding-bottom: 3.6rem; }
}

/* ---------- 19. Reveal on scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Revision pass — logo lockup, FAQ, elevated form, WhatsApp, refinements
   ========================================================================== */

/* ---------- Official logo lockup ---------- */
.brandmark { display: inline-flex; align-items: center; text-decoration: none; }
.brandmark img { height: 74px; width: auto; display: block; }
.footer .brandmark img { height: 88px; margin-bottom: 1.1rem; }
@media (max-width: 60rem) { .brandmark img { height: 56px; } }

/* ---------- Section rhythm ---------- */
.section--dark + .section--dark { padding-top: 0; }
.section--edge { border-top: 1px solid var(--rule); }
.section--dark.section--edge { border-top-color: rgba(214,226,231,0.12); }

/* ---------- Cards: flatter, tighter, more considered ---------- */
.card { border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.card:hover { transform: none; border-color: var(--ink-700); box-shadow: 0 6px 24px rgba(0,0,0,0.09); }
.card__media { aspect-ratio: 16 / 10; }
.card__body { padding: clamp(1.25rem, 2vw, 1.65rem); gap: 0.7rem; }
.card__body h3 { font-size: var(--step-2); }
.card__body p { font-size: 0.94rem; line-height: 1.6; }

.quote { border-radius: 3px; padding: clamp(1.4rem, 2.2vw, 1.85rem); gap: 0.85rem; }
.quote h3 { font-size: var(--step-2) !important; }
.quote p { font-size: 0.94rem; line-height: 1.6; }

/* ---------- Spec bar: tighter ---------- */
.specbar__item { padding: 1.4rem clamp(0.9rem, 2vw, 1.6rem); }
.specbar__value { font-size: clamp(1.6rem, 2.6vw, 2.15rem); margin-bottom: 0.4rem; }
.specbar__label { font-size: 0.62rem; letter-spacing: 0.12em; }

/* ---------- Steps ---------- */
.step { padding: clamp(1.35rem, 2.2vw, 1.85rem) clamp(1rem, 1.8vw, 1.5rem); }
.step h3 { font-size: var(--step-2); margin-bottom: 0.5rem; }
.step p { font-size: 0.91rem; line-height: 1.6; }
.step::before { margin-bottom: 0.85rem; font-size: 0.72rem; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--rule); max-width: 52rem; }
.section--dark .faq { border-top-color: rgba(214,226,231,0.14); }

.faq__item { border-bottom: 1px solid var(--rule); }
.section--dark .faq__item { border-bottom-color: rgba(214,226,231,0.14); }

.faq__item > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; padding: 1.15rem 0;
  font-family: var(--font-display); font-weight: 700; font-stretch: 92%;
  font-size: var(--step-2); letter-spacing: -0.015em; line-height: 1.3;
  transition: color 0.16s ease;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary:hover { color: var(--bronze); }
.section--dark .faq__item > summary:hover { color: var(--red-on-dark); }

.faq__item > summary::after {
  content: ""; flex: none; width: 13px; height: 13px; margin-top: 0.4em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transform-origin: 60% 60%;
  transition: transform 0.22s ease; opacity: 0.5;
}
.faq__item[open] > summary::after { transform: rotate(-135deg); opacity: 1; }
.faq__item[open] > summary { color: var(--ink); }
.section--dark .faq__item[open] > summary { color: var(--red-on-dark); }

.faq__answer { padding: 0 0 1.35rem; max-width: 46rem; }
.faq__answer p { color: var(--ink-muted); font-size: 0.96rem; line-height: 1.65; }
.section--dark .faq__answer p { color: var(--warm-400); }

/* ---------- Form: raised card, not a bare stack ---------- */
.form-card {
  background: var(--ink-800);
  border: 1px solid rgba(214,226,231,0.13);
  border-radius: 4px;
  padding: clamp(1.5rem, 3vw, 2.35rem);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}
.section:not(.section--dark) .form-card {
  background: var(--white); border-color: var(--rule);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}
.form-card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding-bottom: 1.15rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(214,226,231,0.13);
}
.section:not(.section--dark) .form-card__head { border-bottom-color: var(--rule); }
.form-card__head h3 { font-size: var(--step-2); color: var(--paper); }
.section:not(.section--dark) .form-card__head h3 { color: var(--ink); }
.form-card__step {
  font-family: var(--font-spec); font-size: 0.64rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--warm-500); white-space: nowrap;
}

.form { gap: 0.95rem; }
.field label { font-size: 0.64rem; letter-spacing: 0.13em; color: var(--warm-400); }
.section:not(.section--dark) .field label { color: var(--ink-muted); }
.field input, .field select, .field textarea {
  padding: 0.82rem 0.95rem; font-size: 0.95rem; border-radius: 3px;
  background: var(--ink-900); border-color: rgba(214,226,231,0.16);
}
.section:not(.section--dark) .field input,
.section:not(.section--dark) .field select,
.section:not(.section--dark) .field textarea {
  background: var(--paper-alt); border-color: var(--rule); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.form .btn { width: 100%; margin-top: 0.35rem; }
.form__note { font-size: 0.78rem; line-height: 1.5; }

/* ---------- Buttons ---------- */
.btn { padding: 0.92rem 1.6rem; font-size: 0.9rem; border-radius: 3px; }
.masthead .btn { padding: 0.66rem 1.15rem; font-size: 0.82rem; }

/* ---------- Trust row under the hero CTA ---------- */
.trustrow {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; align-items: center;
  font-family: var(--font-spec); font-size: 0.68rem;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--warm-400);
}
.trustrow span { display: inline-flex; align-items: center; gap: 0.5rem; }
.trustrow span::before {
  content: ""; width: 9px; height: 2px; background: var(--gold); flex: none;
  transform: skewX(calc(-1 * var(--pitch)));
}

/* ---------- WhatsApp ---------- */
.wa {
  position: fixed; right: 1.15rem; bottom: 1.15rem; z-index: 95;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: #128c4a; color: #fff; text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.wa:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.34); }
.wa svg { width: 28px; height: 28px; fill: currentColor; }
@media (max-width: 48rem) { .wa { bottom: 4.6rem; right: 0.9rem; width: 50px; height: 50px; } }

/* ---------- Areas ---------- */
.areas li { font-size: 0.74rem; padding: 0.42rem 0.78rem; }

/* ---------- FAQ: dos columnas, el título ancla la izquierda ---------- */
.faq-layout { display: grid; gap: clamp(1.75rem, 3.5vw, 3.5rem); align-items: start; }
@media (min-width: 62rem) {
  .faq-layout { grid-template-columns: 0.72fr 1fr; }
  .faq-layout .section-head { margin-bottom: 0; position: sticky; top: 8.5rem; }
}
.faq { max-width: none; }

/* ---------- Bloque de conversión: columnas equilibradas ---------- */
@media (min-width: 56rem) {
  #inspection .split { grid-template-columns: 0.85fr 1fr; align-items: center; }
}

/* ==========================================================================
   PASS 3 — dark-dominant system, editorial rhythm, technical detail
   The brand yellow reads 8.35:1 on charcoal and 1.32:1 on white. The palette
   is telling us the site should be dark. This pass listens to it.
   ========================================================================== */

/* ---------- Base flip ---------- */
body { background: var(--ink-900); color: var(--warm-300); }

.section { background: var(--ink-900); color: var(--warm-300); position: relative; }
.section--dark { background: var(--ink-800); }
/* Dark defaults first, light overrides after — equal specificity, order decides */
.section h2, .section h3 { color: var(--paper); }
.section .lede { color: var(--warm-400); }
.section p { color: var(--warm-400); }
.eyebrow { color: var(--gold); }
.eyebrow--muted { color: var(--warm-500); }
.pitch-rule { background: var(--gold); }

.section--light { background: var(--paper); color: var(--ink); }
.section--light h2, .section--light h3, .section--light h4 { color: var(--ink); }
.section--light .lede { color: var(--ink-muted); }
.section--light p { color: var(--ink-muted); }
.section--light .eyebrow { color: var(--bronze); }
.section--light .eyebrow--muted { color: var(--ink-muted); }
.section--light .pitch-rule { background: var(--ink-900); }
.section--light .row-item h3 { color: var(--ink); }
.section--light .sec-label b { color: var(--bronze); }
.section--light .sec-label span, .section--light .sec-label i { color: var(--ink-muted); }

/* ---------- Grain. Flat dark reads cheap; a little tooth reads printed. ---------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Hero: spec bar overlaps it ---------- */
.hero__inner { padding-bottom: clamp(5rem, 9vw, 7.5rem); }
.specbar {
  position: relative; z-index: 2;
  margin-top: clamp(-4.5rem, -6vw, -3rem);
  background: var(--ink-800);
  border: 1px solid rgba(214,226,231,0.14);
  border-radius: 3px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.specbar .shell { width: 100%; }
.specbar__inner { border-radius: 3px; overflow: hidden; }
.specbar__item { border-right-color: rgba(214,226,231,0.14); }

/* ---------- Section label: numbered, ruled, editorial ---------- */
.sec-label {
  display: flex; align-items: baseline; gap: 1rem;
  padding-bottom: 1rem; margin-bottom: clamp(2rem, 4vw, 3.25rem);
  border-bottom: 1px solid rgba(214,226,231,0.16);
  font-family: var(--font-spec); font-size: 0.66rem;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.section--light .sec-label { border-bottom-color: rgba(23,22,20,0.16); }
.sec-label b { color: var(--gold); font-weight: 600; }
.section--light .sec-label b { color: var(--bronze); }
.sec-label span { color: var(--warm-500); }
.section--light .sec-label span { color: var(--ink-muted); }
.sec-label i { font-style: normal; margin-left: auto; color: var(--warm-500); }

/* ---------- Editorial rows replace generic cards ---------- */
.rows { border-top: 1px solid rgba(214,226,231,0.16); }
.section--light .rows { border-top-color: rgba(23,22,20,0.14); }
.row-item {
  display: grid; gap: clamp(1.25rem, 3vw, 2.75rem);
  padding-block: clamp(1.75rem, 3.5vw, 3rem);
  border-bottom: 1px solid rgba(214,226,231,0.16);
  align-items: start;
}
.section--light .row-item { border-bottom-color: rgba(23,22,20,0.14); }
@media (min-width: 60rem) {
  .row-item { grid-template-columns: 4.5rem 1fr 1.05fr; align-items: center; }
}
.row-item__no {
  font-family: var(--font-spec); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; color: var(--gold); padding-top: 0.35rem;
}
.section--light .row-item__no { color: var(--bronze); }
.row-item h3 { font-size: var(--step-3); margin-bottom: 0.7rem; }
.row-item p { font-size: 0.96rem; line-height: 1.6; max-width: 34rem; }
.row-item__media { overflow: hidden; border-radius: 3px; }
.row-item__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.row-item__tags {
  list-style: none; padding: 0; margin-top: 1rem;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.15rem;
  font-family: var(--font-spec); font-size: 0.7rem;
  letter-spacing: 0.06em; color: var(--warm-500);
}
.section--light .row-item__tags { color: var(--ink-muted); }
.row-item__tags li::before { content: "— "; color: var(--gold); }
.section--light .row-item__tags li::before { color: var(--bronze); }

/* ---------- Full-bleed feature ---------- */
.bleed { position: relative; min-height: clamp(24rem, 46vw, 34rem); display: grid; align-items: end; isolation: isolate; }
.bleed__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.bleed__media img { width: 100%; height: 100%; object-fit: cover; }
.bleed__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(23,22,20,0.95) 0%, rgba(23,22,20,0.55) 45%, rgba(23,22,20,0.15) 100%);
}
.bleed__body { padding-block: clamp(2.75rem, 5vw, 4.25rem); }
.bleed__body > * { max-width: 42rem; }
.bleed__body h2 { color: var(--white); }

/* ---------- Commitments: hairline grid, no boxes ---------- */
.commit { display: grid; border-top: 1px solid rgba(214,226,231,0.16); }
@media (min-width: 48rem) { .commit { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .commit { grid-template-columns: repeat(3, 1fr); } }
.commit__item {
  padding: clamp(1.5rem, 2.6vw, 2.15rem) clamp(1.15rem, 2vw, 1.85rem);
  border-bottom: 1px solid rgba(214,226,231,0.16);
  border-right: 1px solid rgba(214,226,231,0.16);
}
.commit__item h3 { font-size: var(--step-2); margin-bottom: 0.6rem; }
.commit__item p { font-size: 0.93rem; line-height: 1.6; }
.commit__item::before {
  content: ""; display: block; width: 22px; height: 2px;
  background: var(--gold); margin-bottom: 1.1rem;
  transform: skewX(calc(-1 * var(--pitch)));
}

/* ---------- Areas on dark ---------- */
.areas li { background: transparent; border-color: rgba(214,226,231,0.2); color: var(--warm-400); }
.areas li[data-core] { border-color: var(--gold); color: var(--paper); }
.section--light .areas li { background: var(--white); border-color: var(--rule); color: var(--ink-muted); }
.section--light .areas li[data-core] { border-color: var(--bronze); color: var(--ink); }

/* ---------- FAQ on dark ---------- */
.faq, .faq__item { border-color: rgba(214,226,231,0.16); }
.faq__item > summary { color: var(--paper); }
.faq__item > summary:hover, .faq__item[open] > summary { color: var(--gold); }
.faq__answer p { color: var(--warm-400); }
.section--light .faq, .section--light .faq__item { border-color: rgba(23,22,20,0.14); }
.section--light .faq__item > summary { color: var(--ink); }
.section--light .faq__item > summary:hover, .section--light .faq__item[open] > summary { color: var(--bronze); }

/* ---------- Cards / quotes on dark ---------- */
.card, .quote {
  background: var(--ink-800); border-color: rgba(214,226,231,0.16);
  box-shadow: none;
}
.card:hover { border-color: var(--gold); box-shadow: none; }
.card__body h3, .quote h3 { color: var(--paper); }
.card__body p, .quote p { color: var(--warm-400); }
.card__list li { color: var(--warm-500); }
.card__list li::before { background: var(--gold); }

/* ---------- Anatomy diagram (the signature) ---------- */
.anatomy { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 64rem) { .anatomy { grid-template-columns: 0.85fr 1.15fr; } }
.anatomy__fig {
  border: 1px solid rgba(214,226,231,0.16); border-radius: 3px;
  background: var(--ink-800); padding: clamp(1rem, 2vw, 1.75rem);
}
.anatomy__fig svg { width: 100%; height: auto; display: block; }
.anatomy__cap {
  font-family: var(--font-spec); font-size: 0.64rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--warm-500);
  margin-top: 1rem; padding-top: 0.85rem;
  border-top: 1px solid rgba(214,226,231,0.16);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* ---------- Buttons on dark ---------- */
.btn--dark { background: var(--paper); color: var(--ink-900); }
.btn--dark:hover { background: var(--white); }
.section--light .btn--dark { background: var(--ink-900); color: var(--paper); }

/* ---------- Form card on dark base ---------- */
.form-card { background: var(--ink-800); }
.field input, .field select, .field textarea { background: var(--ink-900); color: var(--paper); }
.field input::placeholder, .field textarea::placeholder { color: #6d6d69; }

/* ---------- Split media framing ---------- */
.split__media { border-radius: 3px; }
.split__media::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 68px; height: 4px; background: var(--gold);
}

/* ---------- Fix: .nav a (0,1,1) beats .btn--primary (0,1,0). Red-era: the
     fill is crimson, so the forced color must be white (5.28:1). ---------- */
.nav a.btn--primary,
.nav a.btn--primary:hover,
.callbar a:last-child {
  color: var(--white);
}

/* ==========================================================================
   PASS 4 — light-dominant, trust-first.
   Correction to PASS 3: the yellow's 1.32:1 on white means it can't be TEXT
   on light surfaces. It does not mean the site must be dark. Yellow becomes
   a FILL with white type on top (5.28:1 on --btn-fill). Light does the trust work.
   ========================================================================== */

:root {
  --paper: #ffffff;
  --paper-alt: #f7f7f5;
  --paper-deep: #edefee;
  --ink: #1d292d;          /* headings — the brand carbon itself, 14.9:1 */
  --ink-muted: #4f5c61;    /* body — 7.0:1 on white */
  --rule: #dfe3e4;
  --rule-strong: #c6cdd0;
}

body { background: var(--paper); color: var(--ink-muted); }
body::after { opacity: 0.02; }

/* ---------- Light is now the default; dark is punctuation ---------- */
.section { background: var(--paper); color: var(--ink-muted); }
.section h2, .section h3, .section h4 { color: var(--ink); }
.section .lede { color: var(--ink-muted); }
.section p { color: var(--ink-muted); }
.section .eyebrow { color: var(--bronze); }
.section .eyebrow--muted { color: var(--ink-muted); }
.section .pitch-rule { background: var(--ink); }

.section--alt { background: var(--paper-alt); }

/* Dark sections: reserved for the hero surround, the feature band and the CTA */
.section--dark { background: var(--ink); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--paper); }
.section--dark .lede, .section--dark p { color: #b9b5ad; }
.section--dark .eyebrow { color: var(--gold); }
.section--dark .pitch-rule { background: var(--gold); }

/* --light is now redundant but still used in markup — make it the alt tone */
.section--light { background: var(--paper-alt); color: var(--ink-muted); }
.section--light h2, .section--light h3, .section--light h4 { color: var(--ink); }
.section--light p, .section--light .lede { color: var(--ink-muted); }
.section--light .eyebrow { color: var(--bronze); }
.section--light .pitch-rule { background: var(--ink); }

/* ---------- Hairlines on light ---------- */
.sec-label { border-bottom-color: var(--rule-strong); }
.sec-label b { color: var(--bronze); }
.sec-label span, .sec-label i { color: var(--ink-muted); }
.section--dark .sec-label { border-bottom-color: rgba(255,255,255,0.2); }
.section--dark .sec-label b { color: var(--gold); }
.section--dark .sec-label span, .section--dark .sec-label i { color: #9a968e; }

.rows { border-top-color: var(--rule-strong); }
.row-item { border-bottom-color: var(--rule); }
.row-item__no { color: var(--bronze); }
.row-item h3 { color: var(--ink); }
.row-item p { color: var(--ink-muted); }
.row-item__tags { color: var(--ink-muted); }
.row-item__tags li::before { color: var(--bronze); }

/* ---------- Yellow as FILL, never as text on light ---------- */
.commit { border-top-color: var(--rule-strong); }
.commit__item { border-color: var(--rule); }
.commit__item h3 { color: var(--ink); }
.commit__item p { color: var(--ink-muted); }
.commit__item::before { background: var(--gold); width: 26px; height: 5px; }

.trustrow { color: var(--ink-muted); }
.trustrow span::before { background: var(--gold); height: 5px; width: 12px; }

/* A yellow highlight block — the brand colour doing real work */
.mark {
  background: var(--btn-fill); color: var(--white);
  padding: 0.05em 0.3em; border-radius: 2px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* ---------- Spec bar: light, bordered, sits under the hero ---------- */
.specbar {
  background: var(--paper); border-color: var(--rule-strong);
  box-shadow: 0 16px 40px rgba(35,35,31,0.10);
}
.specbar__item { border-right-color: var(--rule); }
.specbar__value { color: var(--ink); }
.specbar__value b { color: var(--bronze); }
.specbar__label { color: var(--ink-muted); }

/* ---------- Cards / quotes on light ---------- */
.card, .quote {
  background: var(--paper); border-color: var(--rule);
  box-shadow: 0 1px 3px rgba(35,35,31,0.05);
}
.card:hover { border-color: var(--rule-strong); box-shadow: 0 10px 30px rgba(35,35,31,0.10); }
.card__body h3, .quote h3 { color: var(--ink); }
.card__body p, .quote p { color: var(--ink-muted); }
.card__list li { color: var(--ink-muted); }
.card__list li::before { background: var(--gold); height: 4px; width: 12px; }

/* ---------- Steps: light with a yellow rule per step ---------- */
.section--dark .step { border-color: rgba(255,255,255,0.18); }
.step { border-color: var(--rule); }
.step h3 { color: var(--ink); }
.step p { color: var(--ink-muted); }
.step::before { color: var(--bronze); }
.section--dark .step h3 { color: var(--paper); }
.section--dark .step p { color: #b9b5ad; }
.section--dark .step::before { color: var(--gold); }

/* ---------- FAQ on light ---------- */
.faq, .faq__item { border-color: var(--rule); }
.faq { border-top-color: var(--rule-strong); }
.faq__item > summary { color: var(--ink); }
.faq__item > summary:hover, .faq__item[open] > summary { color: var(--bronze); }
.faq__answer p { color: var(--ink-muted); }

/* ---------- Areas ---------- */
.areas li { background: var(--paper); border-color: var(--rule); color: var(--ink-muted); }
.areas li[data-core] {
  background: var(--btn-fill); border-color: var(--btn-fill);
  color: var(--white); font-weight: 600;
}

/* ---------- Anatomy figure on light ---------- */
.anatomy__fig { background: var(--ink); border-color: var(--ink); }
.anatomy__cap { color: #9a968e; border-top-color: rgba(255,255,255,0.18); }

/* ---------- Buttons ---------- */
.btn--primary { background: var(--btn-fill); color: var(--white); border-color: var(--btn-fill); }
.btn--primary:hover { background: var(--btn-fill-hover); border-color: var(--btn-fill-hover); }
.btn--dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--dark:hover { background: #33444b; border-color: #33444b; }
.btn--ghost { color: var(--ink); border-color: var(--rule-strong); }
.btn--ghost:hover { border-color: var(--ink); background: transparent; }
.section--dark .btn--ghost, .hero .btn--ghost { color: var(--paper); border-color: rgba(255,255,255,0.4); }
.section--dark .btn--ghost:hover, .hero .btn--ghost:hover { border-color: var(--paper); }
.section--dark .btn--dark { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ---------- Form: light card, dark fields removed ---------- */
.form-card {
  background: var(--paper); border-color: var(--rule);
  box-shadow: 0 14px 44px rgba(35,35,31,0.10);
}
.form-card__head { border-bottom-color: var(--rule); }
.form-card__head h3 { color: var(--ink); }
.form-card__step { color: var(--ink-muted); }
.field label { color: var(--ink-muted); }
.field input, .field select, .field textarea {
  background: var(--paper-alt); border-color: var(--rule-strong); color: var(--ink);
}
.field input::placeholder, .field textarea::placeholder { color: #8d8a82; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-muted); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--ink); box-shadow: 0 0 0 3px rgba(236,229,75,0.55);
}
.form__note { color: var(--ink-muted); }

/* Dark-surface form (the CTA band keeps its dark card) */
.section--dark .form-card { background: #2c2c27; border-color: rgba(255,255,255,0.16); }
.section--dark .form-card__head { border-bottom-color: rgba(255,255,255,0.16); }
.section--dark .form-card__head h3 { color: var(--paper); }
.section--dark .field label { color: #b9b5ad; }
.section--dark .field input,
.section--dark .field select,
.section--dark .field textarea {
  background: var(--ink); border-color: rgba(255,255,255,0.2); color: var(--paper);
}

/* ---------- Focus ring works on both ---------- */
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--ink); outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--gold);
}

/* ---------- Split media accent ---------- */
.split__media::after { height: 6px; width: 84px; background: var(--gold); }

/* ---------- Section edge ---------- */
.section--edge { border-top-color: var(--rule); }

/* ---------- Hero carousel ---------- */
.hero { min-height: clamp(30rem, 78vh, 44rem); display: grid; align-items: center; }
.hero__slides { position: absolute; inset: 0; z-index: -2; }
.hero__slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.1s ease;
}
.hero__slide[data-active="true"] { opacity: 1; }
.hero__slide video, .hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.hero__slides::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background:
    linear-gradient(100deg, rgba(20,20,17,0.93) 0%, rgba(20,20,17,0.80) 44%, rgba(20,20,17,0.38) 100%),
    linear-gradient(to top, rgba(20,20,17,0.86) 0%, transparent 42%);
}

.hero__lines { position: relative; min-height: 1px; }
.hero__line { display: none; }
.hero__line[data-active="true"] { display: block; animation: heroIn 0.7s ease both; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.hero__line h1 { margin-bottom: 1.15rem; }
.hero__line p {
  font-size: var(--step-1); line-height: 1.55; color: #cfcbc2;
  max-width: 36rem; margin-bottom: 1.9rem;
}

/* Progress dots double as manual controls */
.hero__dots { display: flex; gap: 0.6rem; margin-top: 2rem; }
.hero__dot {
  width: 46px; height: 3px; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,0.28); position: relative; overflow: hidden;
}
.hero__dot[aria-selected="true"]::after {
  content: ""; position: absolute; inset: 0;
  background: var(--gold); transform-origin: left;
  animation: dotFill var(--dwell, 5.2s) linear both;
}
@keyframes dotFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero__dot:hover { background: rgba(255,255,255,0.5); }
@media (prefers-reduced-motion: reduce) {
  .hero__dot[aria-selected="true"]::after { animation: none; transform: none; }
}

/* ---------- WhatsApp: expands on hover, nudges once on load ---------- */
.wa {
  width: auto; height: 54px; border-radius: 27px;
  padding: 0 14px; gap: 0; overflow: hidden;
  display: inline-flex; align-items: center;
  grid-template-columns: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.24);
}
.wa svg { width: 27px; height: 27px; flex: none; }
.wa__label {
  font-family: var(--font-display); font-weight: 700; font-size: 0.88rem;
  white-space: nowrap; max-width: 0; opacity: 0;
  transition: max-width 0.34s ease, opacity 0.24s ease, margin-left 0.34s ease;
  margin-left: 0;
}
.wa:hover .wa__label, .wa:focus-visible .wa__label, .wa[data-open="true"] .wa__label {
  max-width: 12rem; opacity: 1; margin-left: 0.6rem;
}
.wa[data-open="true"] { animation: waNudge 0.5s ease; }
@keyframes waNudge {
  0%,100% { transform: none; } 30% { transform: translateY(-5px); } 60% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .wa[data-open="true"] { animation: none; } }

/* --alt inherits the light text treatment */
.section--alt h2, .section--alt h3, .section--alt h4 { color: var(--ink); }
.section--alt p, .section--alt .lede { color: var(--ink-muted); }
.section--alt .eyebrow { color: var(--bronze); }
.section--alt .pitch-rule { background: var(--ink); }
.section--alt .sec-label { border-bottom-color: var(--rule-strong); }
.section--alt .sec-label b { color: var(--bronze); }
.section--alt .sec-label span, .section--alt .sec-label i { color: var(--ink-muted); }

/* Bleed sits above the page background, never inherits it */
.bleed { background: var(--ink); }
.bleed__media { z-index: 0; }
.bleed__media img { position: relative; z-index: 0; }
.bleed .shell { position: relative; z-index: 4; }
.bleed__body h2 { color: #fff; }
.bleed__body p, .bleed__body .lede { color: #d6d2c9; }
.bleed__body .eyebrow { color: var(--gold); }

/* h1 inside dark bands (contact, thank-you, 404) must be light, not ink */
.section--dark h1 { color: #fff; }
.section--dark .lede, .section--dark li { color: #c4c0b8; }
.section--dark .spec { color: #9a968e; }

/* Micro-labels inherit ink by default; on dark surfaces they need lifting */
.hero .trustrow, .section--dark .trustrow { color: #b9b5ad; }
.section--dark .form-card__step { color: #9a968e; }
.section--dark .form__note { color: #9a968e; }

/* ---------- Testimonials: text-forward. No stock avatars, no invented stars. ---------- */
.voices { display: grid; gap: 0; border-top: 1px solid var(--rule-strong); }
@media (min-width: 46rem) { .voices { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70rem) { .voices { grid-template-columns: repeat(3, 1fr); } }

.voice {
  padding: clamp(1.6rem, 2.8vw, 2.25rem) clamp(1.25rem, 2.2vw, 2rem);
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 1.1rem;
  margin: 0;
}
.voice::before {
  content: ""; display: block; width: 26px; height: 5px;
  background: var(--gold); transform: skewX(calc(-1 * var(--pitch)));
}
.voice blockquote {
  margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--ink);
  font-weight: 450;
}
.voice figcaption {
  margin-top: auto; padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-spec); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted);
}
.voice figcaption b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 0.98rem; letter-spacing: -0.01em; text-transform: none;
  color: var(--ink); margin-bottom: 0.2rem;
}
.voice--wide { grid-column: span 1; }
@media (min-width: 70rem) { .voice--wide { grid-column: span 2; } }
.voice--wide blockquote { font-size: var(--step-1); }

.voices-note {
  margin-top: 1.5rem; font-family: var(--font-spec);
  font-size: 0.7rem; letter-spacing: 0.08em; color: var(--ink-muted);
}

/* ==========================================================================
   PASS 5 — service area, conversion block, testimonials
   ========================================================================== */

/* ---------- Service area: two honest tiers, not a wall of chips ---------- */
.coverage { display: grid; gap: 0; border-top: 1px solid var(--rule-strong); }
@media (min-width: 60rem) { .coverage { grid-template-columns: 1fr 1fr; } }

.tier {
  padding: clamp(1.5rem, 2.8vw, 2.25rem) 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 60rem) {
  .tier { padding-inline: 0 clamp(1.5rem, 3vw, 3rem); }
  .tier + .tier {
    padding-inline: clamp(1.5rem, 3vw, 3rem) 0;
    border-left: 1px solid var(--rule);
  }
}
.tier__head {
  display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.tier__badge {
  font-family: var(--font-spec); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--btn-fill); color: var(--white);
  padding: 0.34rem 0.6rem; border-radius: 2px;
}
.tier__badge--quiet {
  background: transparent; color: var(--ink-muted);
  border: 1px solid var(--rule-strong);
}
.tier__head h3 { font-size: var(--step-2); }
.tier__eta {
  margin-left: auto; font-family: var(--font-spec); font-size: 0.66rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted);
}
.tier__cities {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.1rem 1rem;
}
.tier__cities li {
  font-size: 0.95rem; color: var(--ink);
  padding: 0.34rem 0; display: flex; align-items: baseline; gap: 0.55rem;
}
.tier__cities li::before {
  content: ""; flex: none; width: 11px; height: 4px; background: var(--gold);
  transform: skewX(calc(-1 * var(--pitch)));
}
.tier--quiet .tier__cities li { color: var(--ink-muted); font-size: 0.9rem; }
.tier--quiet .tier__cities li::before { background: var(--rule-strong); }
.tier__note { margin-top: 1.1rem; font-size: 0.88rem; color: var(--ink-muted); }

/* ---------- Conversion block ---------- */
.convert { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 62rem) { .convert { grid-template-columns: 0.9fr 1fr; } }

.convert__phone {
  display: block; text-decoration: none;
  font-family: var(--font-display); font-weight: 800; font-stretch: 88%;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem); letter-spacing: -0.03em;
  color: var(--gold); line-height: 1; margin-bottom: 0.4rem;
}
.convert__phone:hover { color: var(--gold-deep); }
.convert__phone-label {
  font-family: var(--font-spec); font-size: 0.64rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: #9a968e; display: block; margin-bottom: 0.7rem;
}

.next { list-style: none; padding: 0; margin: 2rem 0 0; counter-reset: nx; }
.next li {
  counter-increment: nx; position: relative;
  padding: 0 0 1.15rem 2.6rem;
  color: #b9b5ad; font-size: 0.95rem; line-height: 1.55;
}
.next li:last-child { padding-bottom: 0; }
.next li::before {
  content: counter(nx); position: absolute; left: 0; top: -0.1em;
  width: 1.7rem; height: 1.7rem; display: grid; place-items: center;
  background: var(--btn-fill); color: var(--white);
  font-family: var(--font-spec); font-size: 0.7rem; font-weight: 600;
  border-radius: 2px;
}
.next li b { color: #fff; font-weight: 600; display: block; }
.next li::after {
  content: ""; position: absolute; left: 0.82rem; top: 1.9rem; bottom: 0.35rem;
  width: 1px; background: rgba(255,255,255,0.18);
}
.next li:last-child::after { display: none; }

.convert__seal {
  margin-top: 2rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,0.18);
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem;
  font-family: var(--font-spec); font-size: 0.66rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: #9a968e;
}
.convert__seal span { display: inline-flex; align-items: center; gap: 0.5rem; }
.convert__seal span::before {
  content: ""; width: 11px; height: 4px; background: var(--gold); flex: none;
  transform: skewX(calc(-1 * var(--pitch)));
}

/* ---------- Testimonials: one featured, rest supporting ---------- */
.voices { border-top: none; }
.voice-lead {
  border: 1px solid var(--rule-strong); border-radius: 3px;
  padding: clamp(1.75rem, 3.2vw, 2.75rem);
  background: var(--paper-alt);
  margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
  display: grid; gap: 1.5rem;
}
@media (min-width: 60rem) { .voice-lead { grid-template-columns: 1fr auto; align-items: end; } }
.voice-lead blockquote {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-stretch: 94%;
  font-size: var(--step-3); line-height: 1.28; letter-spacing: -0.02em; color: var(--ink);
  max-width: 44rem;
}
.voice-lead__mark {
  width: 40px; height: 6px; background: var(--gold);
  transform: skewX(calc(-1 * var(--pitch))); margin-bottom: 1.25rem;
}
.voice-lead figcaption {
  font-family: var(--font-spec); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-muted); white-space: nowrap;
}
.voice-lead figcaption b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; letter-spacing: -0.01em; text-transform: none;
  color: var(--ink); margin-bottom: 0.2rem;
}

/* ==========================================================================
   WhatsApp: quick-reply panel. Turns a passive button into a lead entry point.
   ========================================================================== */
.wa-wrap { position: fixed; right: 1.15rem; bottom: 1.15rem; z-index: 96; }
@media (max-width: 48rem) { .wa-wrap { bottom: 4.6rem; right: 0.9rem; } }

.wa { position: static; right: auto; bottom: auto; z-index: auto; }

.wa-panel {
  position: absolute; right: 0; bottom: calc(100% + 0.7rem);
  width: min(85vw, 20.5rem);
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: 6px;
  box-shadow: 0 22px 60px rgba(35,35,31,0.28);
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0; transform: translateY(10px) scale(0.96); pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.wa-panel[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; }

.wa-panel__head {
  background: #128c4a; color: #fff;
  padding: 0.95rem 1.05rem; display: flex; align-items: center; gap: 0.7rem;
}
.wa-panel__head svg { width: 26px; height: 26px; fill: currentColor; flex: none; }
.wa-panel__head b {
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  display: block; line-height: 1.2;
}
.wa-panel__head span {
  font-family: var(--font-spec); font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85;
}
.wa-panel__close {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: #fff; font-size: 1.35rem; line-height: 1; padding: 0 0.2rem; opacity: 0.8;
}
.wa-panel__close:hover { opacity: 1; }

.wa-panel__body { padding: 1.05rem; }
.wa-panel__lead { font-size: 0.92rem; line-height: 1.5; margin-bottom: 0.85rem; color: var(--ink-muted); }
.wa-panel__lead b { color: var(--ink); }

.wa-chips { display: grid; gap: 0.45rem; }
.wa-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  text-align: left; text-decoration: none;
  padding: 0.7rem 0.85rem;
  background: var(--paper-alt); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 4px;
  font-size: 0.9rem; font-weight: 500;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.wa-chip:hover { border-color: #128c4a; background: var(--paper); }
.wa-chip::after {
  content: ""; flex: none; width: 13px; height: 13px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg); opacity: 0.4;
}
.wa-chip:hover::after { opacity: 1; }
.wa-chip--urgent { border-color: var(--btn-fill); background: var(--btn-fill); color: var(--white); }
.wa-chip--urgent:hover { background: var(--gold-deep); border-color: var(--gold-deep); }

.wa-panel__foot {
  padding: 0.75rem 1.05rem; border-top: 1px solid var(--rule);
  background: var(--paper-alt);
  font-family: var(--font-spec); font-size: 0.62rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted);
  display: flex; align-items: center; gap: 0.5rem;
}
.wa-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: #128c4a; box-shadow: 0 0 0 3px rgba(18,140,74,0.2);
}
.wa-dot[data-closed="true"] { background: var(--warm-500); box-shadow: 0 0 0 3px rgba(139,139,136,0.2); }

/* ---------- Language switcher ---------- */
.langswitch {
  display: inline-flex; align-items: stretch;
  border: 1px solid rgba(255,255,255,0.28); border-radius: 3px;
  overflow: hidden; flex: none;
  font-family: var(--font-spec); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.1em;
}
.langswitch a, .langswitch__on {
  padding: 0.42rem 0.6rem; text-decoration: none; line-height: 1.2;
  display: inline-flex; align-items: center;
}
.langswitch a { color: #b9b5ad; transition: color 0.16s ease, background-color 0.16s ease; }
.langswitch a:hover { color: #fff; background: rgba(255,255,255,0.1); }
.langswitch__on { background: var(--btn-fill); color: var(--white); }
@media (max-width: 60rem) {
  .langswitch { align-self: flex-start; margin-top: 1.25rem; }
}

/* Spanish suffixes are longer than "hr"/"yr" — let them shrink instead of wrap */
:lang(es) .specbar__value b { font-size: 0.5em; letter-spacing: 0.01em; }

/* ==========================================================================
   PASS 6 — nav type, language switch, mobile
   ========================================================================== */

/* ---------- Nav: display face, deliberate weight, roomier rhythm ---------- */
.nav a {
  font-family: var(--font-display);
  font-weight: 600; font-size: 0.99rem;
  letter-spacing: -0.008em; font-stretch: 100%;
  color: #d9d5cd;
  padding-block: 0.5rem;
}
.nav a:hover { color: #fff; }
.nav a[aria-current="page"] { color: #fff; }
.masthead .btn { font-weight: 700; }

/* ---------- Language switch: quiet text, no box ---------- */
.langswitch {
  border: 0; border-radius: 0; overflow: visible;
  gap: 0.15rem; align-items: baseline;
  font-family: var(--font-spec); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em;
}
.langswitch::before {
  content: ""; align-self: center;
  width: 1px; height: 1.05rem; background: rgba(255,255,255,0.22);
  margin-right: 0.85rem;
}
.langswitch a, .langswitch__on {
  padding: 0.3rem 0.35rem; position: relative;
}
.langswitch a {
  color: #8f8b83;
  font-family: var(--font-spec); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em; border-bottom: 0;
}
.langswitch a:hover { color: #fff; background: none; }
.langswitch__on { background: none; color: #fff; }
.langswitch__on::after {
  content: ""; position: absolute; left: 0.35rem; right: 0.35rem; bottom: 0;
  height: 2px; background: var(--gold);
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 48rem) {

  /* iOS zooms any input under 16px on focus. Don't let it. */
  .field input, .field select, .field textarea { font-size: 16px; padding: 0.9rem 1rem; }

  /* Hero: tighter, thumb-reachable */
  .hero { min-height: min(88svh, 46rem); }
  .hero__inner { padding-top: 2.5rem; }
  .hero__actions { gap: 0.6rem; }
  .hero__actions .btn { flex: 1 1 100%; padding: 1.05rem 1.25rem; font-size: 1rem; }
  .trustrow { gap: 0.45rem 1.1rem; font-size: 0.62rem; }

  /* Progress dots: 3px tall is not a tap target — give them invisible padding */
  .hero__dots { gap: 0.4rem; margin-top: 1.6rem; }
  .hero__dot {
    width: 100%; flex: 1; height: 22px;
    background: none; display: grid; align-items: center;
  }
  .hero__dot::before {
    content: ""; display: block; height: 3px; background: rgba(255,255,255,0.28);
  }
  .hero__dot[aria-selected="true"]::after {
    top: auto; height: 3px; align-self: center;
  }

  /* Spec bar: 2x2, tight, still overlapping the hero */
  .specbar { margin-top: -2.25rem; }
  .specbar__inner { grid-template-columns: 1fr 1fr; }
  .specbar__item {
    padding: 1.05rem 1rem;
    border-bottom: 1px solid var(--rule);
  }
  .specbar__item:nth-child(even) { border-right: 0; }
  .specbar__item:nth-child(n+3) { border-bottom: 0; }
  .specbar__value { font-size: 1.55rem; }
  .specbar__label { font-size: 0.56rem; letter-spacing: 0.1em; }

  /* Section labels: let the right tag drop rather than squeeze */
  .sec-label { flex-wrap: wrap; row-gap: 0.2rem; }
  .sec-label i { margin-left: 0; flex-basis: 100%; }

  /* Anatomy: full-bleed the figure so the diagram earns real width */
  .anatomy__fig {
    margin-inline: calc(-1 * var(--gutter));
    border-left: 0; border-right: 0; border-radius: 0;
  }

  /* Editorial rows: media first reads better on a phone */
  .row-item { grid-template-columns: 1fr; gap: 1rem; }
  .row-item__no { padding-top: 0; }
  .row-item__media { order: -1; margin-inline: calc(-1 * var(--gutter)); border-radius: 0; }

  /* Full-bleed band */
  .bleed { min-height: 30rem; }

  /* Conversion: number stays huge and tappable */
  .convert__phone { font-size: 2.1rem; }
  .next li { padding-left: 2.4rem; }

  /* FAQ: bigger tap area */
  .faq__item > summary { padding: 1.05rem 0; gap: 1rem; }

  /* Voices: single column, lead quote tightens */
  .voice-lead { padding: 1.4rem; gap: 1rem; }
  .voice-lead blockquote { font-size: 1.25rem; }

  /* Coverage tiers stack with a rule between */
  .tier + .tier { border-left: 0; padding-inline: 0; }
  .tier { padding-inline: 0; }
  .tier__eta { margin-left: 0; flex-basis: 100%; }

  /* Drawer nav: switcher gets its own row, phone gets a row */
  .nav .langswitch { margin-top: 1.1rem; }
  .nav .langswitch::before { display: none; }
}

/* Ultra narrow */
@media (max-width: 22.5rem) {
  .specbar__value { font-size: 1.35rem; }
  h1 { font-size: clamp(1.9rem, 9vw, 2.4rem); }
}

/* Drawer-only call shortcut; desktop already shows the number in the utility bar */
.nav__call { display: none; }
@media (max-width: 60rem) {
  .nav__call {
    display: block; margin-top: 0.5rem;
    font-family: var(--font-spec) !important; font-size: 0.78rem !important;
    letter-spacing: 0.08em; color: var(--gold) !important;
    border-bottom: 0 !important;
  }
}

/* ---------- Mobile drawer fix ----------
   backdrop-filter on .masthead makes it the containing block for
   position:fixed descendants, so the drawer was sizing itself to the
   header instead of the viewport. The header bg is 94% opaque, so
   dropping the blur on mobile is imperceptible — and the drawer works. */
@media (max-width: 60rem) {
  .masthead { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav {
    box-shadow: -24px 0 60px rgba(0,0,0,0.45);
    padding-top: 5rem;
  }
  /* Utility bar: one line, phone stays */
  .utility__group span:not(:last-child) { display: none; }
  .utility__inner { justify-content: space-between; }
}

/* Inside the drawer the switcher anchors must not inherit link sizing */
@media (max-width: 60rem) {
  .nav .langswitch a, .nav .langswitch .langswitch__on {
    font-size: 0.78rem; padding: 0.35rem 0.4rem;
    border-bottom: 0 !important;
  }
}

/* ==========================================================================
   PASS 7 — tuned to the Adobe kit that is actually loaded.
   Kit qyl7oeb ships:
     neue-haas-grotesk-display  600, 700
     neue-haas-grotesk-text     400, 500, 700
   Nothing above 700 exists, so asking for 800/900 made the browser
   synthesise a fake bold — heavier, muddier, and slightly wrong in shape.
   Neue Haas also has no width axis, so the font-stretch values that Archivo
   (a variable font) honoured are meaningless here and are neutralised.
   ========================================================================== */

h1, h2, h3, h4 {
  font-weight: 700;
  font-stretch: normal;
  /* Neue Haas Display is already tightly fitted; Archivo needed the extra
     negative tracking, this face does not. */
  letter-spacing: -0.017em;
}
h1 { letter-spacing: -0.023em; }

.wordmark { font-weight: 700; font-stretch: normal; }
.specbar__value { font-weight: 700; font-stretch: normal; letter-spacing: -0.025em; }
.btn { font-weight: 700; font-stretch: normal; }
.nav a { font-weight: 600; font-stretch: normal; }
.faq__item > summary { font-weight: 700; font-stretch: normal; }
.voice-lead blockquote { font-weight: 700; font-stretch: normal; }
.voice blockquote { font-weight: 400; }
.convert__phone { font-weight: 700; font-stretch: normal; }
.callbar a { font-weight: 700; }
.hero__line h1 em, .wordmark em { font-weight: inherit; }

/* Body copy: the Text cut reads a touch larger than Inter Tight at the same
   size, so ease the line-height back rather than shrinking the type. */
body { font-weight: 400; }
p, li { line-height: 1.62; }
.lede { font-weight: 400; line-height: 1.5; }

/* Belt and braces: never let the browser fake a weight or a slant */
body, h1, h2, h3, h4, .btn, .nav a, .wordmark, .specbar__value {
  font-synthesis: none;
  -webkit-font-synthesis: none;
}

/* Poster stand-ins for the clips dropped on mobile / data saver */
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }


/* ==========================================================================
   Footer credit — Reino7
   The mark is traced to six paths, one per glyph, so the hover can cascade
   left to right. Idea: the letters lay in like shingle courses and pick up
   the brand yellow as they land, with the site's own 6:12 pitch rule drawing
   in underneath. Creative but quiet — a credit line should never outshout
   the client's own footer.
   ========================================================================== */
/* Sits inline in .footer__bottom as the middle of three items, so the
   space-between on that row centres it between the copyright and the
   service-area note. No border or margin of its own — the row owns those. */
.credit {
  display: inline-flex; align-items: center; gap: 0.6rem;
  flex: 0 0 auto;
}
.credit__label {
  font-family: var(--font-spec); font-size: 0.54rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #6f6c66; white-space: nowrap;
}

.credit .credit__link {
  font-size: 0;
  position: relative; display: inline-flex; align-items: center;
  padding: 0.18rem 0.1rem 0.34rem;
  color: #8b8882;                    /* the SVG inherits this */
  text-decoration: none; line-height: 0;
  transition: color 0.3s ease;
}
.credit .credit__link:hover,
.credit .credit__link:focus-visible { color: var(--gold); }

.r7 { width: 58px; height: auto; display: block; overflow: visible; }
.r7 path { fill: currentColor; }

/* Each glyph gets its own delay from --i, so the wave reads left to right */
.r7__g {
  transform-box: fill-box; transform-origin: 50% 100%;
  transition: transform 0.42s cubic-bezier(0.2, 1.5, 0.35, 1);
  transition-delay: calc(var(--i) * 42ms);
}
.credit .credit__link:hover .r7__g,
.credit .credit__link:focus-visible .r7__g {
  transform: translateY(-3.5px);
}

/* The pitch rule: skewed to the same 6:12 angle used across the site,
   drawing in from the left as the letters land. */
.credit .credit__link::after {
  content: ""; position: absolute; left: 0.1rem; right: 0.1rem; bottom: 0;
  height: 2px; background: var(--gold);
  transform: skewX(calc(-1 * var(--pitch))) scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.credit .credit__link:hover::after,
.credit .credit__link:focus-visible::after { transform: skewX(calc(-1 * var(--pitch))) scaleX(1); }

/* Light-surface footers, if the credit is ever moved onto one */
.section--light .credit, .section--alt .credit { border-top-color: var(--rule); }
.section--light .credit__label, .section--alt .credit__label { color: var(--ink-muted); }
.section--light .credit__link, .section--alt .credit .credit__link {
  font-size: 0; color: var(--ink-muted); }
.section--light .credit .credit__link:hover, .section--alt .credit .credit__link:hover { color: var(--bronze); }

@media (prefers-reduced-motion: reduce) {
  .r7__g { transition: none; }
  .credit .credit__link:hover .r7__g, .credit .credit__link:focus-visible .r7__g { transform: none; }
  .credit .credit__link::after { transition: opacity 0.2s ease; transform: skewX(calc(-1 * var(--pitch))); opacity: 0; }
  .credit .credit__link:hover::after, .credit .credit__link:focus-visible::after { opacity: 1; }
}

@media (max-width: 48rem) {
  /* On a phone the row already wraps, so let the credit sit on its own line */
  .footer__bottom { justify-content: flex-start; }
  .credit { order: 3; width: 100%; }
  .r7 { width: 54px; }
}

/* ---------- Footer bottom row (r3): two-up ----------
   The old three-up grid (© | credit | service-area) predates the meta
   cluster. Structure is now two items — .footer__meta and .credit —
   so: meta hugs left, credit hugs right. */
.footer__bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem 1.5rem;
}
.footer__bottom .credit { justify-self: end; }

@media (max-width: 60rem) {
  .footer__bottom { grid-template-columns: 1fr; gap: 1.1rem; }
  .footer__bottom .credit { justify-self: start; }
}

/* ---------- Reels — vertical crew footage strip (LRDR) ----------
   Full-bleed horizontal scroll-snap of 9:16 loops, muted. Modeled on the
   reino7.com "Inside the Studio" strip. Autoplay only while in view (JS);
   posters only when prefers-reduced-motion. */
.reels-sec { padding-bottom: calc(var(--section-y) * 0.8); }
.reels {
  display: flex; gap: clamp(0.75rem, 1.6vw, 1.25rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 0.25rem var(--gutter) 1rem;
  scrollbar-width: thin; scrollbar-color: var(--ink-600) transparent;
}
.reels:focus-visible { outline: 3px solid var(--red-on-dark); outline-offset: 4px; }
.reel {
  flex: 0 0 auto; margin: 0;
  width: clamp(200px, 24vw, 262px);
  scroll-snap-align: start;
  position: relative;
}
.reel::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 4px; background: var(--gold); transform: skewX(calc(-1 * var(--pitch)));
  opacity: 0; transition: opacity 0.25s ease;
}
.reel[data-playing]::after { opacity: 1; }
.reel video {
  display: block; width: 100%; aspect-ratio: 9 / 16; height: auto;
  object-fit: cover; border-radius: 4px;
  background: var(--ink-900);
  border: 1px solid rgba(244, 244, 242, 0.12);
}
.reels-note {
  margin-top: 1.4rem; font-family: var(--font-spec);
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--warm-400);
}
.reels-note a { color: var(--paper); text-underline-offset: 3px; }
.reels-note a:hover { color: var(--red-on-dark); }
@media (prefers-reduced-motion: reduce) {
  .reel::after { transition: none; }
}

/* footer legal link (privacy) */
.footer__legal {
  color: var(--warm-400); font-size: 0.85rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.footer__legal:hover { color: var(--red-on-dark); }

/* legal pages */
.legal-body h2 {
  font-size: var(--step-1); margin: 2.2rem 0 0.7rem;
  color: var(--ink);
}
.legal-body p { color: var(--ink-muted); margin-bottom: 0.9rem; max-width: var(--measure); }
.legal-body a { color: var(--bronze); text-underline-offset: 3px; }
.legal-body a:hover { color: var(--gold-deep); }

/* ==========================================================================
   R2 — form refinement + footer meta row (client review, 2026-08-29)
   ========================================================================== */

/* ---------- Form card: crisper panel with the signature pitch accent ---------- */
.form-card {
  position: relative;
  background: linear-gradient(180deg, #1a262b 0%, var(--ink-900) 100%);
  border: 1px solid rgba(214,226,231,0.14);
  border-radius: 6px;
  box-shadow: 0 26px 64px rgba(0,0,0,0.45);
  overflow: hidden;
}
.form-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--brand-red) 0%, var(--btn-fill-hover) 100%);
}
.section:not(.section--dark) .form-card {
  background: var(--white); border-color: var(--rule);
  box-shadow: 0 14px 44px rgba(29,41,45,0.10);
}
.form-card__head { border-bottom-color: rgba(214,226,231,0.12); }

/* ---------- Fields: filled, taller, coral focus ring ---------- */
.field { gap: 0.5rem; }
.field label { font-size: 0.66rem; letter-spacing: 0.14em; }
.field input, .field select, .field textarea {
  padding: 0.9rem 1rem; font-size: 0.98rem;
  background: rgba(9, 14, 16, 0.55);
  border: 1px solid rgba(214,226,231,0.16);
  border-radius: 4px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}
.field input:hover, .field select:hover, .field textarea:hover {
  border-color: rgba(214,226,231,0.32);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--red-on-dark);
  box-shadow: 0 0 0 3px rgba(255,122,92,0.18);
  background: rgba(9, 14, 16, 0.8);
}
.section:not(.section--dark) .field input,
.section:not(.section--dark) .field select,
.section:not(.section--dark) .field textarea {
  background: var(--paper-alt); border-color: var(--rule-strong);
}
.section:not(.section--dark) .field input:focus,
.section:not(.section--dark) .field select:focus,
.section:not(.section--dark) .field textarea:focus {
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(201,51,33,0.14);
  background: var(--white);
}

/* ---------- Select: custom chevron ---------- */
.field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ff7a5c' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
}
.section:not(.section--dark) .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b22a1a' stroke-width='2'/%3E%3C/svg%3E");
}

/* ---------- Submit: weightier, with intent ---------- */
.form .btn--primary {
  padding-block: 1.02rem; font-weight: 700; font-size: 1rem;
  box-shadow: 0 12px 30px rgba(201,51,33,0.32);
  transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.form .btn--primary:hover {
  box-shadow: 0 14px 34px rgba(166,38,23,0.42);
  transform: translateY(-1px);
}
.form__note { margin-top: 0.15rem; }

/* ---------- Footer bottom: meta cluster left, credit right ---------- */
.footer__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.35rem 0.65rem;
}
.footer__dot { color: var(--ink-600); }
.footer__bottom { align-items: center; row-gap: 1rem; }

/* footer meta: single line on desktop */
@media (min-width: 64rem) {
  .footer__meta { flex-wrap: nowrap; white-space: nowrap; }
}