/* ==========================================================================
   TOP HAT CARPET CLEANING, LLC
   Design system. Mid-century American advertising, built for 2026.
   Palette sampled directly from the company logo and print ad.
   ========================================================================== */

/* --- 1. TOKENS ----------------------------------------------------------- */
:root {
  /* Brand, sampled from logo_full.webp */
  --ink:        #141414;
  --ink-2:      #2b2724;
  --ink-3:      #5d5651;
  --ink-4:      #8b827b;

  --crimson:    #9e272e;
  --crimson-lt: #c0272f;
  --crimson-dk: #71191f;

  --cream:      #f7f1e6;
  --cream-2:    #efe6d5;
  --cream-3:    #e4d8c2;
  --skin:       #f9e5c9;
  --paper:      #ffffff;

  --gold:       #b8912f;

  /* Type */
  --f-display: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  --f-cond:    'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-body:    'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-serif:   'Source Serif 4', Georgia, 'Times New Roman', serif;
  --f-script:  'Kaushan Script', cursive;

  /* Rhythm */
  --pad:   clamp(1.25rem, 5vw, 2.5rem);
  --shell: 1240px;
  --gap:   clamp(1.5rem, 3.5vw, 3rem);
  --sec:   clamp(4.5rem, 9vw, 8.5rem);

  --r:     4px;
  --r-lg:  14px;

  --shadow-sm: 0 2px 8px rgba(20, 20, 20, .08);
  --shadow:    0 10px 30px -12px rgba(20, 20, 20, .28);
  --shadow-lg: 0 30px 70px -30px rgba(20, 20, 20, .45);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- 2. RESET ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
       scroll-padding-top: 8.5rem;   /* sticky header height: anchors + skip link land clear of it */ }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: clamp(1.02rem, .35vw + .95rem, 1.14rem);
  line-height: 1.68;
  color: var(--ink-2);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 { margin: 0; line-height: 1.02; letter-spacing: -.012em; color: var(--ink); }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--crimson); color: var(--cream); }

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

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

.skip {
  position: absolute; left: 50%; top: 0; z-index: 999;
  transform: translate(-50%, -110%);
  background: var(--ink); color: var(--cream);
  padding: .8rem 1.4rem; font-family: var(--f-cond);
  text-transform: uppercase; letter-spacing: .1em; text-decoration: none;
}
.skip:focus { transform: translate(-50%, 0); }

/* --- 3. TEXTURE ---------------------------------------------------------- */
/* Diagonal ray field, lifted from the print ad's background treatment. */
.rays { position: relative; isolation: isolate; }
.rays::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(101deg,
    transparent 0 42px, rgba(20, 20, 20, .021) 42px 84px);
}
.rays--crimson::before {
  background: repeating-linear-gradient(101deg,
    transparent 0 42px, rgba(255, 255, 255, .035) 42px 84px);
}

/* Halftone dot field for crimson panels. */
.halftone { position: relative; isolation: isolate; }
.halftone::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .10) 1px, transparent 1.3px);
  background-size: 7px 7px;
  opacity: .7;
}

/* --- 4. LAYOUT ----------------------------------------------------------- */
.shell { width: min(100% - (var(--pad) * 2), var(--shell)); margin-inline: auto; }
.shell--narrow { width: min(100% - (var(--pad) * 2), 820px); margin-inline: auto; }

section { position: relative; }
.band { padding-block: var(--sec); }
.band--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.band--cream2 { background: var(--cream-2); }
.band--paper  { background: var(--paper); }
.band--ink    { background: var(--ink); color: var(--cream-2); }
.band--ink h2, .band--ink h3 { color: var(--paper); }
.band--crimson { background: var(--crimson); color: #f6e9e2; }
.band--crimson h2, .band--crimson h3 { color: var(--paper); }

/* --- 5. TYPE SYSTEM ------------------------------------------------------ */
.eyebrow {
  font-family: var(--f-cond);
  font-weight: 600;
  font-size: clamp(.78rem, .2vw + .74rem, .9rem);
  text-transform: uppercase;
  letter-spacing: .26em;
  color: var(--crimson);
  margin: 0 0 1.1rem;
  display: flex; align-items: center; gap: .75rem;
}
.eyebrow::before {
  content: ''; width: 26px; height: 2px; background: var(--crimson); flex: none;
}
.eyebrow--center { justify-content: center; }
.band--ink .eyebrow, .band--crimson .eyebrow { color: var(--skin); }
.band--ink .eyebrow::before, .band--crimson .eyebrow::before { background: var(--skin); }

.h-xl {
  font-family: var(--f-display);
  font-size: clamp(2.55rem, 6.6vw, 5.1rem);
  line-height: .96;
  letter-spacing: -.024em;
  text-transform: uppercase;
}
.h-lg {
  font-family: var(--f-display);
  font-size: clamp(1.95rem, 4.1vw, 3.15rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.h-md {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.1vw, 1.85rem);
  line-height: 1.14;
  letter-spacing: -.014em;
  text-transform: uppercase;
}
.h-sm {
  font-family: var(--f-cond);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.3vw, 1.35rem);
  line-height: 1.22;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.script {
  font-family: var(--f-script);
  color: var(--crimson);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  display: inline-block;
  transform: rotate(-1.6deg);
  padding-inline: .06em;
}
.band--ink .script, .band--crimson .script { color: var(--skin); }

.lede {
  font-family: var(--f-serif);
  font-size: clamp(1.16rem, .55vw + 1.04rem, 1.42rem);
  line-height: 1.62;
  color: var(--ink-2);
}
.band--ink .lede, .band--crimson .lede { color: rgba(247, 241, 230, .9); }

.prose { font-family: var(--f-serif); font-size: 1.1rem; line-height: 1.72; }
.prose p { margin-bottom: 1.25em; }

.muted { color: var(--ink-3); }
.band--ink .muted, .band--crimson .muted { color: rgba(247, 241, 230, .72); }

/* --- 6. ORNAMENT --------------------------------------------------------- */
.burst { flex: none; color: var(--crimson); }
.band--ink .burst, .band--crimson .burst { color: var(--skin); }

/* Thick/thin paired rule, a mid-century print convention. */
.rule { border: 0; margin: 2.2rem 0; height: 5px; position: relative; }
.rule::before, .rule::after {
  content: ''; position: absolute; left: 0; right: 0; background: currentColor;
}
.rule::before { top: 0; height: 3px; }
.rule::after  { bottom: 0; height: 1px; }
.rule { color: var(--ink); opacity: .16; }
.rule--crimson { color: var(--crimson); opacity: .5; }
.rule--short { max-width: 92px; }

.sec-head { max-width: 62ch; margin-bottom: clamp(2.4rem, 4vw, 3.6rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-head .lede { margin-top: 1.3rem; }

/* --- 7. BUTTONS ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--f-cond); font-weight: 600;
  font-size: clamp(1rem, .3vw + .94rem, 1.1rem);
  text-transform: uppercase; letter-spacing: .12em;
  text-decoration: none; cursor: pointer;
  padding: 1.02rem 1.9rem;
  border: 2px solid transparent; border-radius: var(--r);
  transition: transform .18s var(--ease), background .18s var(--ease),
              color .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
  will-change: transform;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--crimson); color: var(--paper);
  box-shadow: 0 6px 0 var(--crimson-dk);
}
.btn--primary:hover { background: var(--crimson-lt); box-shadow: 0 8px 0 var(--crimson-dk); }
.btn--primary:active { box-shadow: 0 3px 0 var(--crimson-dk); }

.btn--ink {
  background: var(--ink); color: var(--cream);
  box-shadow: 0 6px 0 #000;
}
.btn--ink:hover { background: var(--ink-2); box-shadow: 0 8px 0 #000; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }

.band--ink .btn--ghost, .band--crimson .btn--ghost { color: var(--paper); border-color: rgba(255, 255, 255, .55); }
.band--ink .btn--ghost:hover, .band--crimson .btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }

/* --- 8. HEADER ----------------------------------------------------------- */
.top-strip {
  background: var(--ink); color: var(--cream-3);
  font-family: var(--f-cond); font-size: .88rem;
  text-transform: uppercase; letter-spacing: .16em;
  padding: .5rem 0;
}
.top-strip .shell {
  display: flex; align-items: center; justify-content: center;
  gap: .7rem; text-align: center;
}
.top-strip strong { color: var(--skin); font-weight: 600; }

.hdr {
  position: sticky; top: 0; z-index: 96;   /* above .scrim (92) and .navwrap (95)
                                              so the burger/X stays tappable
                                              while the drawer is open */
  background: var(--paper);                /* white, so the white-background logo
                                              sits flush instead of in a pill */
  border-bottom: 1px solid var(--cream-3);
  transition: box-shadow .25s var(--ease), background .25s var(--ease);
}
/* NOTE: no backdrop-filter here. It makes .hdr the containing block for
   fixed descendants, which imprisoned the mobile nav drawer inside the
   header strip after scrolling (Craig hit this live). The .97 white bg is
   visually identical without it. */
.hdr.is-stuck { box-shadow: 0 6px 24px -14px rgba(20, 20, 20, .5); background: rgba(255, 255, 255, .97); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; }
.hdr__logo { display: block; flex: none; }
.hdr__logo img { height: clamp(42px, 5.4vw, 58px); width: auto; }
@media (min-width: 941px) { .hdr__logo img { height: 87px; } }  /* 1.5x on desktop, per Craig */
@media (max-width: 719px) { .hdr__logo img { height: 84px; } }  /* 2x on mobile, per Craig */

.nav { display: flex; align-items: center; gap: clamp(.6rem, 1.5vw, 1.55rem); }
.nav a {
  font-family: var(--f-cond); font-weight: 600;
  font-size: 1.02rem; text-transform: uppercase; letter-spacing: .1em;
  text-decoration: none; color: var(--ink-2);
  padding: .35rem 0; position: relative;
  transition: color .18s var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--crimson); transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav a:hover { color: var(--crimson); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--crimson); }

.hdr__cta { display: none; }
.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 42px; padding: 0 9px;
  background: var(--ink); border: 0; border-radius: var(--r); cursor: pointer;
  /* .navwrap is a descendant of .hdr, so within the header's stacking context
     the open drawer would cover this button and swallow the closing tap.
     Verified: without this, a second tap on the X does nothing. */
  position: relative; z-index: 97;
}
.burger span { display: block; height: 2.5px; background: var(--cream); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.navwrap { display: contents; }

@media (max-width: 940px) {
  .navwrap {
    display: block; position: fixed; inset: 0;
    overflow: hidden; pointer-events: none; z-index: 95;
  }
  /* The wrapper only exists to clip the drawer, so it must never capture
     clicks itself, otherwise it covers the whole viewport and swallows the
     tap-outside-to-close on the scrim beneath it. Only the drawer takes them. */
  .navwrap.is-open .nav { pointer-events: auto; }
  .nav {
    pointer-events: none;
    position: absolute; inset: 0 0 0 auto; width: min(84vw, 340px);
    background: var(--ink); flex-direction: column; align-items: stretch;
    justify-content: flex-start; gap: 0; padding: 5.5rem 1.75rem 2rem;
    transform: translateX(100%); transition: transform .3s var(--ease);
    z-index: 95; overflow-y: auto;
  }
  .navwrap.is-open .nav { transform: translateX(0); }
  .nav a { color: var(--cream-2); font-size: 1.28rem; padding: .95rem 0; border-bottom: 1px solid rgba(247, 241, 230, .13); }
  .nav a::after { display: none; }
  .nav a[aria-current="page"] { color: var(--skin); }
  .nav .btn { margin-top: 1.4rem; }
}
@media (min-width: 941px) {
  .burger { display: none; }
  .hdr__cta { display: inline-flex; }
  .nav .btn { display: none; }
}
.scrim {
  position: fixed; inset: 0; background: rgba(20, 20, 20, .55);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
  z-index: 92;
}
.scrim.is-open { opacity: 1; visibility: visible; }

/* --- 9. HERO ------------------------------------------------------------- */
.hero { background: var(--cream); padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3.5rem, 7vw, 6rem); overflow: hidden; }
.hero__grid {
  display: grid; gap: 0 clamp(2.2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  grid-template-areas: "copy" "art" "body";   /* Craig's mobile order:
                                                 headline, mascot, pitch/CTA/proof */
}
.hero__copy { grid-area: copy; }
.hero__art  { grid-area: art; }
.hero__body { grid-area: body; }
@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: 1.02fr .98fr;
    grid-template-areas: "copy art" "body art";
  }
  .hero__copy { align-self: end; }
  .hero__body { align-self: start; }
}

.hero h1 { margin-bottom: 1.4rem; }

/* Hero headline: quiet condensed lead, one Archivo punch. Craig picked this
   over the all-bold three-liner ("too intense"). */
.hero__h1 { margin: 0 0 1.5rem; }
.hero__quiet {
  display: block;
  font-family: var(--f-cond); font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.45rem);
  line-height: 1.14; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
}
.hero__punch {
  display: block; margin-top: .35rem;
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 5.6vw, 4.1rem);
  line-height: 1.02; letter-spacing: -.015em;
  text-transform: uppercase; color: var(--ink);
}
.hero__punch b { color: var(--crimson); font-weight: inherit; }
.hero h1 .script {
  font-size: .95em;
  display: block; text-align: center;   /* centred against the heavy lines above/below */
  margin: .02em 0 -.04em;
}
.hero__lede { max-width: 54ch; margin-bottom: 2rem; }

.hero__seals {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1.6rem;
  margin-top: 2.4rem; padding-top: 1.8rem; border-top: 2px solid var(--cream-3);
}

.hero__art { position: relative; display: flex; justify-content: center; align-items: flex-end; }
.hero__mascot { width: min(100%, 380px); filter: drop-shadow(0 24px 34px rgba(20, 20, 20, .26)); position: relative; z-index: 2; }
.hero__disc {
  position: absolute; z-index: 1;
  width: min(94%, 400px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--cream-2) 0%, var(--cream-3) 62%, transparent 72%);
  top: 50%; left: 50%; transform: translate(-50%, -48%);
}
.hero__ring {
  position: absolute; z-index: 1;
  width: min(96%, 412px); aspect-ratio: 1; border-radius: 50%;
  border: 2px dashed rgba(158, 39, 46, .3);
  top: 50%; left: 50%; transform: translate(-50%, -48%);
  animation: spin 68s linear infinite;
}
@keyframes spin { to { transform: translate(-50%, -48%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero__ring { animation: none; } }

.hero__burst { position: absolute; z-index: 3; color: var(--crimson); opacity: .85; }
.hero__burst--a { top: 4%;  right: 4%;  width: 62px; }
.hero__burst--b { bottom: 16%; left: 1%; width: 42px; }

/* Speech tag on the mascot: the greeting at the door. */
.hero__tag {
  position: absolute; z-index: 4; bottom: 8%; right: -2%;
  background: var(--paper); border: 2.5px solid var(--crimson);
  border-radius: var(--r-lg); padding: .75rem 1.05rem;
  font-family: var(--f-cond); font-weight: 600; text-transform: uppercase;
  letter-spacing: .09em; font-size: .92rem; line-height: 1.3; color: var(--ink);
  box-shadow: var(--shadow); max-width: 190px; text-align: center;
  transform: rotate(2.2deg);
}
.hero__tag::after {
  content: ''; position: absolute; left: 22px; bottom: -13px;
  border: 7px solid transparent; border-top-color: var(--crimson); border-bottom: 0;
}
@media (max-width: 560px) { .hero__tag { right: 0; font-size: .8rem; max-width: 158px; } }

/* --- 10. SEALS / RATING -------------------------------------------------- */
.seal { display: flex; align-items: center; gap: .78rem; }
.seal__badge { flex: none; }
.seal__badge img { width: 74px; height: auto; border-radius: var(--r); }
.seal__txt { font-family: var(--f-cond); line-height: 1.24; text-transform: uppercase; letter-spacing: .07em; }
.seal__txt b { display: block; font-family: var(--f-display); font-size: 1.32rem; letter-spacing: -.01em; color: var(--ink); }
.seal__txt span { font-size: .88rem; color: var(--ink-3); letter-spacing: .12em; }
.band--ink .seal__txt b, .band--crimson .seal__txt b { color: var(--paper); }
.band--ink .seal__txt span, .band--crimson .seal__txt span { color: rgba(247, 241, 230, .75); }

.stars { color: var(--crimson); letter-spacing: .16em; font-size: 1.06rem; line-height: 1; }
.seal__txt span.stars--gold, .stars--gold { color: #d9a441; }

/* Hero proof seals: two matching centred blocks (trophy | stars). */
.hero__seals { justify-content: flex-start; gap: 1rem 3.2rem; }
.seal--rating .seal__txt { text-align: center; }
.seal--rating .stars { display: block; font-size: 1.25rem; margin-bottom: .45rem; }
.seal--rating .seal__ico { display: block; margin: 0 auto .35rem; color: #d9a441; }
.seal--rating .seal__txt > span:last-child { display: block; }
.band--ink .stars, .band--crimson .stars { color: var(--skin); }

/* --- 11. CARDS ----------------------------------------------------------- */
.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.card {
  background: var(--paper);
  border: 1px solid var(--cream-3);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 2.5vw, 2.2rem);
  position: relative;
  display: flex; flex-direction: column;   /* lets card__link pin to the bottom */
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card--lift:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--crimson); }
.card__num {
  font-family: var(--f-display); font-size: 2.5rem; line-height: 1;
  color: var(--cream-3); margin-bottom: .7rem; letter-spacing: -.03em;
}
.card--lift:hover .card__num { color: var(--crimson); transition: color .25s var(--ease); }
.card h3 { margin-bottom: .8rem; }
.card p { color: var(--ink-3); font-size: 1.02rem; }
.card__link {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: auto; padding-top: 1.2rem;   /* same baseline across sibling cards */
  align-self: flex-start;
  font-family: var(--f-cond); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; font-size: .96rem; color: var(--crimson); text-decoration: none;
}
.card__link svg { transition: transform .2s var(--ease); }
.card__link:hover svg { transform: translateX(4px); }

.band--ink .card { background: #1e1a18; border-color: #332d29; }
.band--ink .card p { color: rgba(247, 241, 230, .74); }
.band--ink .card__num { color: #3a332e; }

/* --- 12. THE STANDARD (numbered protocol) -------------------------------- */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.1rem, 2.5vw, 2rem);
  padding: clamp(1.5rem, 3vw, 2.2rem) 0;
  border-top: 1px solid rgba(247, 241, 230, .16);
}
.step:first-child { border-top: 0; }
.step__n {
  counter-increment: step;
  font-family: var(--f-display); font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1; color: var(--crimson-lt); letter-spacing: -.02em;
  min-width: 2.1ch;
}
.step__n::before { content: counter(step, decimal-leading-zero); }
.step h3 { margin-bottom: .6rem; }
.step p { color: rgba(247, 241, 230, .78); margin: 0; }

/* Light variant */
.steps--light .step { border-top-color: var(--cream-3); }
.steps--light .step p { color: var(--ink-3); }
.steps--light .step__n { color: var(--crimson); }

/* --- 13. BEFORE / AFTER -------------------------------------------------- */
.ba {
  background: var(--paper); border-radius: var(--r-lg);
  border: 1px solid var(--cream-3); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ba:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.ba__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0; position: relative; }
.ba__half { position: relative; overflow: hidden; }
.ba__half img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ba__half + .ba__half { border-left: 3px solid var(--crimson); }
.ba__lbl {
  position: absolute; top: .6rem; left: .6rem;
  font-family: var(--f-cond); font-weight: 600; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .16em;
  padding: .28rem .6rem; border-radius: 3px;
  background: rgba(20, 20, 20, .82); color: var(--cream);
}
.ba__lbl--after { background: var(--crimson); }
.ba__cap { padding: 1.1rem 1.25rem 1.3rem; }
.ba__cap h3 { font-family: var(--f-cond); font-weight: 600; font-size: 1.14rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .3rem; }
.ba__cap p { font-size: .96rem; color: var(--ink-3); margin: 0; }

.shot {
  border: 3px solid var(--crimson); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow); background: var(--paper);
}
.shot img { width: 100%; }

/* --- 14. PULL QUOTE / STATEMENT ------------------------------------------ */
.statement { text-align: center; max-width: 22ch; margin-inline: auto; }
.pull {
  font-family: var(--f-serif); font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.95rem);
  line-height: 1.42; color: var(--ink);
  border-left: 5px solid var(--crimson);
  padding-left: clamp(1.1rem, 2.5vw, 1.9rem);
  margin: 0;
}
.band--ink .pull { color: var(--cream); border-left-color: var(--crimson-lt); }
.pull cite { display: block; margin-top: 1rem; font-family: var(--f-cond); font-style: normal; font-size: .92rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-3); }
.band--ink .pull cite { color: rgba(247, 241, 230, .62); }

/* --- 15. REVIEWS --------------------------------------------------------- */
.rev {
  background: var(--paper); border: 1px solid var(--cream-3); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 2.4vw, 2rem); display: flex; flex-direction: column; gap: .9rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.rev:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.rev__q { font-family: var(--f-serif); font-size: 1.04rem; line-height: 1.62; color: var(--ink-2); margin: 0; flex: 1; }
.rev__who { font-family: var(--f-cond); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: .88rem; color: var(--ink-3); display: flex; align-items: center; gap: .5rem; }
.rev__who::before { content: ''; width: 18px; height: 2px; background: var(--crimson); }

/* --- 16. FACT PANEL ------------------------------------------------------ */
.facts { display: grid; gap: 1px; background: rgba(255, 255, 255, .18); border-radius: var(--r-lg); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.fact { background: var(--crimson); padding: clamp(1.5rem, 2.5vw, 2.1rem) 1.3rem; text-align: center; }
.fact b { display: block; font-family: var(--f-display); font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1; color: var(--paper); letter-spacing: -.02em; margin-bottom: .5rem; }
.fact span { font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .13em; font-size: .88rem; color: rgba(255, 255, 255, .85); line-height: 1.35; display: block; }

/* --- 17. CHECK LIST ------------------------------------------------------ */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .95rem; }
.checks li { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; font-size: 1.04rem; }
.checks svg { margin-top: .3rem; color: var(--crimson); flex: none; }
.band--ink .checks svg, .band--crimson .checks svg { color: var(--skin); }

/* --- 18. SPLIT ----------------------------------------------------------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4.2rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 880px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-l { grid-template-columns: 1.2fr .8fr; }
  .split--wide-r { grid-template-columns: .8fr 1.2fr; }
  /* proof photo carries more weight than the copy beside it, so a very large
     headline does not leave the image looking like a stamp */
  .split--proof { grid-template-columns: 1.08fr .92fr; align-items: center; }
  .split--flip > *:first-child { order: 2; }
}

/* --- 19. AWARD ----------------------------------------------------------- */
.award { display: flex; gap: clamp(1.2rem, 3vw, 2.2rem); align-items: center; flex-wrap: wrap; }
.award img { width: clamp(112px, 15vw, 158px); border-radius: var(--r); box-shadow: var(--shadow); }

/* --- 20. FORM ------------------------------------------------------------ */
.form { display: grid; gap: 1.05rem; }
.field { display: grid; gap: .4rem; }
.field label {
  font-family: var(--f-cond); font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; font-size: .86rem; color: var(--ink-2);
}
/* forms on dark surfaces (About hiring card): light labels + softer borders */
.band--ink .field label { color: var(--cream-2); }
.band--ink .field input, .band--ink .field select, .band--ink .field textarea {
  border-color: #4a423c;
}
.band--ink .form__note { color: rgba(247, 241, 230, .65); }
.field input, .field select, .field textarea {
  font-family: var(--f-body); font-size: 1.02rem; color: var(--ink);
  background: var(--paper); border: 2px solid var(--cream-3); border-radius: var(--r);
  padding: .82rem .95rem; width: 100%;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--crimson); box-shadow: 0 0 0 4px rgba(158, 39, 46, .13);
}
.field--2 { display: grid; gap: 1.05rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .field--2 { grid-template-columns: 1fr 1fr; } }
.form__note { font-size: .9rem; color: var(--ink-3); }
.form__msg { display: none; padding: 1rem 1.15rem; border-radius: var(--r); font-size: 1rem; }
.form__msg.is-ok   { display: block; background: #e8f2e8; border: 1px solid #b8d6b8; color: #23572a; }
.form__msg.is-err  { display: block; background: #fbeaea; border: 1px solid #e8bcbc; color: #8b2020; }

/* --- 21. CONTACT TILES --------------------------------------------------- */
.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tile {
  display: flex; align-items: center; gap: 1rem; text-decoration: none;
  background: var(--paper); border: 2px solid var(--cream-3); border-radius: var(--r-lg);
  padding: 1.2rem 1.35rem; transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.tile:hover { border-color: var(--crimson); transform: translateY(-3px); box-shadow: var(--shadow); }
.tile__ico { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--crimson); color: var(--paper); display: grid; place-items: center; }
.tile__t { font-family: var(--f-cond); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .86rem; color: var(--ink-3); display: block; }
.tile__v { font-family: var(--f-display); font-size: 1.16rem; color: var(--ink); letter-spacing: -.01em; display: block; margin-top: .12rem; }

/* --- 22. CTA BAND -------------------------------------------------------- */
.cta { text-align: center; }
.cta .h-lg { margin-bottom: 1.2rem; }
.cta .lede { max-width: 56ch; margin: 0 auto 2.2rem; }
.cta .btn-row { justify-content: center; }

/* --- 23. FOOTER ---------------------------------------------------------- */
.ftr { background: var(--ink); color: rgba(247, 241, 230, .72); padding-block: clamp(3rem, 6vw, 4.5rem) 0; font-size: 1rem; }
.ftr__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.ftr__logo img { width: 210px; background: var(--paper); border-radius: var(--r); padding: .6rem .7rem; box-sizing: content-box; }
.ftr h4 { font-family: var(--f-cond); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: .92rem; color: var(--skin); margin-bottom: 1.1rem; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ftr a { color: rgba(247, 241, 230, .78); text-decoration: none; transition: color .18s var(--ease); }
.ftr a:hover { color: var(--skin); }
.ftr__bot {
  margin-top: clamp(2.4rem, 4vw, 3.4rem); border-top: 1px solid rgba(247, 241, 230, .14);
  padding: 1.4rem 0 5.6rem; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem;
  justify-content: space-between; font-size: .9rem; color: rgba(247, 241, 230, .5);
}
@media (min-width: 720px) { .ftr__bot { padding-bottom: 1.4rem; } }

/* --- 24. MOBILE CALL BAR ------------------------------------------------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 88;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--ink); border-top: 3px solid var(--crimson);
}
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem .6rem; text-decoration: none;
  font-family: var(--f-cond); font-weight: 600; text-transform: uppercase;
  letter-spacing: .11em; font-size: .98rem; color: var(--cream);
}
.callbar a + a { border-left: 1px solid rgba(247, 241, 230, .18); }
.callbar a:first-child { background: var(--crimson); }
@media (min-width: 720px) { .callbar { display: none; } }

/* --- 25. BREADCRUMB / PAGE HEAD ------------------------------------------ */
.phead { background: var(--ink); color: var(--cream-2); padding-block: clamp(3rem, 6vw, 5rem); }
.phead h1 { color: var(--paper); margin-bottom: 1.1rem; }
/* .phead is an ink surface but not .band--ink, so it needs the same light
   overrides -- without these the lede rendered near-black on black. */
.phead .lede { max-width: 62ch; color: rgba(247, 241, 230, .9); }
.phead .eyebrow { color: var(--skin); }
.phead .eyebrow::before { background: var(--skin); }
.phead .seal__txt b { color: var(--paper); }
.phead .seal__txt span { color: rgba(247, 241, 230, .75); }
.phead .stars { color: var(--skin); }
.phead .seal__txt span.stars--gold { color: #d9a441; }
.crumb { font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .16em; font-size: .82rem; color: rgba(247, 241, 230, .55); margin-bottom: 1.4rem; }
.crumb a { color: var(--skin); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

/* --- 26. REVEAL ---------------------------------------------------------- */
.rv { opacity: 1; transform: none; }
html.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js .rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .rv { opacity: 1; transform: none; transition: none; } }

/* --- 27. UTILITY --------------------------------------------------------- */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* --- 28. MASCOT WALK -----------------------------------------------------
   His figure is used WHOLE and unmodified. Only the hat arm is a separate
   layer, because it is the one piece that separates cleanly in the source art
   and it is what makes the hat tip possible. Body + hat stacked at rest
   reproduce the logo exactly.                                                */
.mw {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 60%);
  isolation: isolate;
}

/* Carpet. Clean trails behind the machine head as it passes. */
.mw__carpet { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; overflow: hidden; }
.mw__clean, .mw__dirty { position: absolute; inset: 0; }
.mw__clean {
  background:
    repeating-linear-gradient(78deg, rgba(255,255,255,.30) 0 11px, rgba(255,255,255,0) 11px 25px),
    linear-gradient(180deg, #c6ae8c 0%, #ab9271 100%);
}
.mw__dirty {
  background:
    repeating-linear-gradient(78deg, rgba(0,0,0,.05) 0 8px, rgba(0,0,0,0) 8px 19px),
    linear-gradient(180deg, #8d8272 0%, #776c5d 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px);
  mask-image: linear-gradient(90deg, transparent 0, #000 60px);
}

/* Everything that travels together: puppet, pose overlay, contact shadow. */
.mw__rig {
  position: absolute; bottom: 4%; left: 0;
  width: 44%; min-width: 190px;
  aspect-ratio: 3 / 4;
  will-change: transform;
}
.mw__work { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .22s var(--ease); }
/* Raster logo pose, aligned onto the same art coordinates as the puppet:
   art bbox (2,6)-(294,396) inside viewBox (-40,-140,420,560). Computed. */
.mw__pose {
  position: absolute; left: 10%; top: 26.07%; width: 69.52%; height: 69.64%;
  opacity: 0; transition: opacity .22s var(--ease); pointer-events: none;
}
.mw__pose .mw__layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.mw__pose .mw__hat { transform-origin: 57.5% 67.7%; }
.mwW [data-leg-l], .mwW [data-leg-r], .mwW [data-bob], .mwW [data-machine],
.mwW [data-machine-head] { will-change: transform; }

.mw__shadow {
  position: absolute; bottom: 1.5%; left: 6%;
  width: 88%; height: 4%;
  background: radial-gradient(ellipse at 50% 50%, rgba(20,20,20,.30) 0%, rgba(20,20,20,0) 70%);
  pointer-events: none;
}

/* Speech tag, shown only while he is tipping his hat. Sits just above his hat
   so it reads as his, and clear of the starbursts. */
.mw__tag {
  position: absolute; z-index: 5;
  left: 52%; top: 13%;
  background: var(--paper); border: 2.5px solid var(--crimson);
  border-radius: var(--r-lg); padding: .6rem .9rem;
  font-family: var(--f-cond); font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; font-size: clamp(.68rem, 1.05vw, .88rem); line-height: 1.25;
  color: var(--ink); box-shadow: var(--shadow); max-width: 48%; text-align: center;
  transform: rotate(1.6deg); opacity: 0; transition: opacity .3s var(--ease);
  pointer-events: none;
}
.mw__tag::after {
  content: ''; position: absolute; left: 24px; bottom: -13px;
  border: 7px solid transparent; border-top-color: var(--crimson); border-bottom: 0;
}

.mw__burst { position: absolute; color: var(--crimson); opacity: .75; z-index: 1; }
.mw__burst--a { top: 9%;  right: 6%;  width: 46px; }
.mw__burst--b { top: 52%; right: 15%; width: 26px; }

@media (max-width: 620px) {
  .mw { aspect-ratio: 4 / 3; }
  .mw__rig { width: 42%; }
  .mw__tag { font-size: .66rem; max-width: 54%; padding: .45rem .6rem; left: 46%; top: 10%; }
  .mw__burst--a { width: 32px; }
}

/* --- 29. STATIC HERO ------------------------------------------------------ */
.hero__still {
  position: relative; display: flex; justify-content: center; align-items: center;
  min-height: 340px;
}
.hero__still .hero__mascot {
  width: min(78%, 330px); height: auto; position: relative; z-index: 2;
  filter: drop-shadow(0 22px 30px rgba(20,20,20,.22));
}
.hero__still .hero__disc {
  position: absolute; z-index: 1; width: min(88%, 380px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 44%, var(--cream-2) 0%, var(--cream-3) 62%, transparent 72%);
}
.hero__still .hero__burst { position: absolute; color: var(--crimson); opacity: .8; z-index: 3; }
.hero__still .hero__burst--a { top: 2%; right: 6%; width: 54px; }
.hero__still .hero__burst--b { bottom: 10%; left: 2%; width: 34px; }

/* --- 30. REVIEW MARQUEE ---------------------------------------------------
   Continuous slow scroll, pause on hover. Track content is duplicated once by
   JS; animating to -50% loops seamlessly. Reduced motion gets a swipeable row. */
.mqwrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.mq__track {
  display: flex; gap: 1.4rem; width: max-content;
  padding-block: .4rem;
  animation: mq-scroll var(--mq-dur, 48s) linear infinite;
}
.mqwrap:hover .mq__track { animation-play-state: paused; }
.mq__track .rev { width: clamp(280px, 30vw, 360px); flex: none; }
@keyframes mq-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .mq__track { animation: none; }
  .mqwrap { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

.rev__when { color: var(--ink-4); letter-spacing: .04em; font-weight: 500; text-transform: none; }

/* --- 31. MOBILE DENSITY PASS ---------------------------------------------
   The desktop page stacked to ~40 phone screens. Photo galleries become
   swipeable snap rows, rhythm tightens, hero and footer compress.           */
@media (max-width: 719px) {
  :root { --sec: 3.2rem; }
  .band--tight { padding-block: 2.4rem; }
  .sec-head { margin-bottom: 1.9rem; }

  /* Any 3-up grid of before/after cards -> one-row swipe gallery */
  .grid--3:has(> .ba) {
    display: flex; overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: .9rem;
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
    padding-bottom: .9rem;
    scrollbar-width: none;
  }
  .grid--3:has(> .ba)::-webkit-scrollbar { display: none; }
  .grid--3:has(> .ba) > .ba { flex: 0 0 86%; scroll-snap-align: center; }

  /* Hero: less air; Craig-spec order with bigger headline and centred mascot */
  .hero { padding-block: 2rem 2.6rem; }
  .hero__quiet { font-size: 1.88rem; }
  .hero__punch { font-size: 3.05rem; }
  .hero__still { min-height: 0; margin-block: 1.1rem .9rem; }
  .hero__still .hero__mascot { width: min(62%, 250px); }
  .hero__lede { margin-top: .2rem; }
  .hero__body .btn-row { justify-content: center; }
  .hero__seals { margin-top: 1.6rem; padding-top: 1.2rem; gap: 1rem 2rem;
                 justify-content: center; }

  /* Crimson facts strip: 2+1 so three tiles never leave a ghost cell */
  .facts { grid-template-columns: 1fr 1fr; }
  .facts .fact:last-child { grid-column: 1 / -1; }
  .fact { padding: 1.1rem .75rem; }
  .fact b { font-size: 1.7rem; margin-bottom: .3rem; }
  .fact span { font-size: .78rem; }

  /* Protocol steps */
  .step { padding: 1.15rem 0; gap: .9rem; }

  /* Footer */
  .ftr__logo img { width: 150px; }
  .ftr__grid { gap: 1.6rem; }
  .ftr a { display: inline-block; padding-block: .55rem; }   /* >=40px tap targets */
  .ftr ul { gap: .1rem; }

  /* Cards breathe a little less */
  .card { padding: 1.35rem 1.3rem; }
}

/* --- 32. SECTION TRANSITION DIVIDER --------------------------------------
   Art Deco parallel geometric rules: five tight horizontal lines, dominant
   centre rule, brass gradient like polished metal catching light. Standard
   block flow, zero layout disruption; percentage widths collapse cleanly on
   mobile. Craig's Gemini-spec'd concept, in the site's own gold.            */
.section-transition-divider {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  width: min(94%, 640px);
  margin: 0 auto clamp(1.8rem, 3.5vw, 2.6rem);
  pointer-events: none;
}
.section-transition-divider span {
  display: block; border-radius: 2px;
  background: linear-gradient(90deg,
    #7a5d1e 0%, #b8912f 18%, #f0dfae 50%, #b8912f 82%, #7a5d1e 100%);
}
.section-transition-divider span:nth-child(1) { height: 1px; width: 46%; opacity: .75; }
.section-transition-divider span:nth-child(2) { height: 1px; width: 72%; opacity: .9; }
.section-transition-divider span:nth-child(3) { height: 2.5px; width: 100%; }
.section-transition-divider span:nth-child(4) { height: 1px; width: 72%; opacity: .9; }
.section-transition-divider span:nth-child(5) { height: 1px; width: 46%; opacity: .75; }

/* --- 33. CENTRED PAGE HEADER (reviews) ----------------------------------- */
.phead--center { text-align: center; }
.phead--center .crumb--center { text-align: center; }
.phead--center .eyebrow { justify-content: center; }
.phead--center .lede { margin-inline: auto; }
.phead--center .script { display: inline-block; }
.phead__bigstars {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: .3em;
  margin: .4rem 0 1rem; line-height: 1;
}
.phead__proof {
  display: flex; justify-content: center; align-items: center;
  gap: 1.4rem 3.5rem; flex-wrap: wrap; margin-top: 2.2rem;
}
.phead__proof .seal__txt b { font-size: 1.5rem; }

/* Tim peeks in from the far right of the centred reviews hero, wide screens
   only, sized to stay clear of the centred text column. */
.phead { overflow: hidden; }
.phead__tim { display: none; }
@media (min-width: 1150px) {
  .phead:not(.phead--center) .phead__tim {
    display: block; position: absolute; z-index: 0;
    right: clamp(2rem, 7vw, 8rem); bottom: -4%;
    height: 80%; width: auto;
    filter: drop-shadow(0 14px 24px rgba(0,0,0,.45));
  }
}
@media (min-width: 1360px) {
  .phead__shell { position: relative; z-index: 5; }
  .phead__tim {
    display: block; position: absolute; z-index: 0;
    right: 2.5rem; bottom: -4%;
    height: 64%; width: auto;
    filter: drop-shadow(0 14px 24px rgba(0,0,0,.45));
  }
  .phead--center .shell { position: relative; z-index: 5; }
}

/* --- 34. TIM SPOTS --------------------------------------------------------
   Tim appears somewhere on every page, in different corners -- a recurring
   character, not a template element. Wide screens only; bands clip him. */
.has-tim { overflow: hidden; }
.has-tim .shell { position: relative; z-index: 2; }
.tim-spot {
  display: none; position: absolute; z-index: 0;
  bottom: -5%; height: 78%; max-height: 290px; width: auto;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.35));
  pointer-events: none;
}
.tim-spot--right { right: 1.25rem; }
.tim-spot--left  { left:  1.25rem; transform: scaleX(-1); }
.tim-spot--tilt  { rotate: -4deg; }
/* Only where the shell's own max-width leaves real margin for him, so he can
   never crowd a line of copy. Verified with an overlap sweep at 1150/1440. */
@media (min-width: 1500px) { .tim-spot { display: block; } }

/* Centred CTA bands span nearly the full shell; give Tim guaranteed margin
   there so he can never graze the copy. */
@media (min-width: 1500px) {
  .has-tim.cta .shell, .has-tim .cta { max-width: 900px; margin-inline: auto; }
  .has-tim .lede, .has-tim .h-lg { margin-inline: auto; }
}

/* --- 35. ESTIMATE MODAL --------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: var(--pad); }
.modal[hidden] { display: none; }
.modal__scrim { position: absolute; inset: 0; background: rgba(20,20,20,.62); backdrop-filter: blur(2px); animation: mFade .2s var(--ease); }
.modal__box {
  position: relative; z-index: 1;
  width: min(100%, 480px);
  background: var(--cream); border: 2px solid var(--ink);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: clamp(1.6rem, 4vw, 2.3rem);
  animation: mIn .24s var(--ease);
  max-height: calc(100dvh - 2rem); overflow-y: auto;
}
.modal__box .eyebrow { margin-bottom: .5rem; }
.modal__sub { color: var(--ink-3); margin: .7rem 0 1.4rem; font-size: 1rem; }
.modal__opts { display: grid; gap: .7rem; }
.modal__x {
  position: absolute; top: .7rem; right: .7rem;
  width: 38px; height: 38px; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--ink-3); cursor: pointer;
}
.modal__x:hover { background: var(--cream-3); color: var(--ink); }
@keyframes mFade { from { opacity: 0 } }
@keyframes mIn { from { opacity: 0; transform: translateY(14px) scale(.97) } }
@media (prefers-reduced-motion: reduce) { .modal__scrim, .modal__box { animation: none } }

/* --- 36. BEFORE/AFTER LIGHTBOX -------------------------------------------- */
.ba__pair { cursor: zoom-in; }
.lb { position: fixed; inset: 0; z-index: 130; background: rgba(12,12,12,.93);
      display: grid; place-items: center; padding: clamp(1rem,4vw,3rem); animation: mFade .2s var(--ease); }
.lb[hidden] { display: none; }
.lb__fig { margin: 0; width: min(100%, 1280px); }
.lb__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--r-lg); overflow: hidden; }
.lb__half { position: relative; background: #000; }
.lb__half + .lb__half { border-left: 3px solid var(--crimson); }
.lb__half img { width: 100%; height: auto; max-height: 74dvh; object-fit: contain; display: block; }
.lb__cap { color: var(--cream); text-align: center; margin-top: 1rem; }
.lb__cap b { display: block; font-family: var(--f-display); text-transform: uppercase;
             letter-spacing: -.01em; font-size: clamp(1.05rem,2vw,1.4rem); margin-bottom: .3rem; }
.lb__cap span { color: rgba(247,241,230,.72); font-family: var(--f-serif); font-size: .98rem; }
.lb__x { position: absolute; top: 1rem; right: 1rem; width: 46px; height: 46px;
         display: grid; place-items: center; background: rgba(255,255,255,.1);
         border: 0; border-radius: 50%; color: var(--cream); cursor: pointer; }
.lb__x:hover { background: rgba(255,255,255,.2); }
@media (max-width: 620px) { .lb__pair { grid-template-columns: 1fr; }
  .lb__half + .lb__half { border-left: 0; border-top: 3px solid var(--crimson); }
  .lb__half img { max-height: 34dvh; } }

/* Feature before/after: taller frame, heavier presence. */
.ba--feature .ba__half img { aspect-ratio: 3 / 4; }
.ba--feature .ba__cap { padding: 1.3rem 1.5rem 1.5rem; }
.ba--feature .ba__cap h3 { font-size: 1.25rem; }
@media (max-width: 880px) { .ba--feature .ba__half img { aspect-ratio: 4 / 3; } }