/* ==========================================================================
   Mechanical Finishers Inc., Design System
   Barlow headlines / Inter body. White-dominant enterprise. Brand blues only.
   ========================================================================== */

@import url("../fonts/fonts.css");

/* --------------------------------------------------------------- 1. Tokens */
:root {
  /* Brand (from the MFI Brand Sheet) */
  --blue:        #2D64B3;   /* Primary Blue  */
  --blue-deep:   #0F2E5C;   /* Deep Blue     */
  --ink:         #1F1F1F;   /* Charcoal      */
  --line:        #E6E6E6;   /* Light Gray    */
  --white:       #FFFFFF;

  /* Derived neutrals + tints */
  --blue-600:    #2557A0;
  --blue-300:    #7FA6DC;
  --blue-100:    #D9E4F5;
  --blue-050:    #F3F7FC;
  --paper:       #FAFAFB;
  --ink-70:      #5B6067;
  --ink-50:      #687079;   /* clears AA on white, on --paper and on the --blue-050 tint. #8A9099 was 3.2 */
  --line-soft:   #F0F0F1;

  /* Typography */
  --font-head: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-display: clamp(3.1rem, 7.4vw, 6.75rem);
  --fs-h1:      clamp(2.7rem, 5.8vw, 5.25rem);
  --fs-h2:      clamp(2.3rem, 4.8vw, 4.25rem);
  --fs-h3:      clamp(1.4rem, 2vw, 2rem);
  --fs-h4:      clamp(1.1rem, 1.3vw, 1.3rem);
  --fs-deck:    clamp(1.06rem, 1.35vw, 1.375rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-micro:   0.8125rem;

  /* Space */
  --gutter:     clamp(1.25rem, 4vw, 3rem);
  --maxw:       1240px;
  --maxw-text:  62ch;
  --sec-y:      clamp(5.5rem, 13vh, 11rem);

  /* Form */
  --radius:      14px;
  --radius-sm:   10px;
  --radius-pill: 100px;

  /* Elevation, restrained, never blurry-gray mush */
  --shadow-sm:  0 1px 2px rgba(15,46,92,.05), 0 2px 8px rgba(15,46,92,.04);
  --shadow-md:  0 2px 6px rgba(15,46,92,.06), 0 18px 40px -18px rgba(15,46,92,.22);
  --shadow-lg:  0 4px 12px rgba(15,46,92,.07), 0 36px 70px -28px rgba(15,46,92,.28);

  --ease:       cubic-bezier(.22, 1, .36, 1);
  --ease-io:    cubic-bezier(.4, 0, .2, 1);
  --nav-h:      68px;
}

/* ----------------------------------------------------------- 2. Reset/base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible {
  outline: 2.5px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection { background: var(--blue-100); color: var(--blue-deep); }

.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 999;
  background: var(--blue-deep); color: #fff;
  padding: 12px 20px; border-radius: var(--radius-sm);
  font-weight: 600; transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------- 3. Typography */
h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}
h3, h4 { font-weight: 700; letter-spacing: -0.018em; line-height: 1.14; }
p { margin: 0; text-wrap: pretty; }

.display { font-size: var(--fs-display); line-height: .92; letter-spacing: -0.045em; font-weight: 800; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.h4 { font-size: var(--fs-h4); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 1.1rem;
  display: block;
}
.eyebrow--muted { color: var(--ink-50); }
.eyebrow--light { color: var(--blue-300); }

.deck {
  font-size: var(--fs-deck);
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 56ch;
  font-weight: 400;
}
.deck--center { margin-inline: auto; }
.lede { font-size: clamp(1.25rem,2vw,1.6rem); line-height: 1.45; color: var(--ink); font-weight: 400; }
.text-blue { color: var(--blue); }
.text-deep { color: var(--blue-deep); }
.text-muted { color: var(--ink-70); }
.tnum { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ 4. Layout */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: 1480px; }
.wrap--narrow { max-width: 880px; }
.section { padding-block: var(--sec-y); position: relative; background: var(--white); }
.section--tight { padding-block: clamp(3rem, 6vh, 5rem); }
.section--paper { background: var(--paper); }
.section--tint { background: var(--blue-050); }
.section--deep { background: var(--blue-deep); color: #fff; }
.section--stage { background: transparent; }   /* lets the WebGL stage show through */
.section--flush-top { padding-top: 0; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.grid { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.stack > * + * { margin-top: 1.1rem; }
.section-head { max-width: 800px; margin-bottom: clamp(3rem, 6vw, 5.5rem); }
/* p has margin:0 globally, so a deck following a headline needs its own gap.
   Without this the subhead sits hard against the h2 baseline. */
.section-head h1 + .deck,
.section-head h2 + .deck,
.page-head h1 + .deck,
.hero h1 + .deck { margin-top: 1.5rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .deck { margin-inline: auto; }

/* ------------------------------------------------------------ 5. Buttons */
.btn {
  --btn-bg: var(--blue);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600;
  letter-spacing: -0.005em;
  padding: .95rem 1.65rem;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  cursor: pointer; white-space: nowrap;
  transition: transform .32s var(--ease), background .22s var(--ease-io),
              box-shadow .32s var(--ease), border-color .22s var(--ease-io), color .22s var(--ease-io);
  will-change: transform;
}
.btn:hover { background: var(--blue-600); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line); }
.btn--ghost:hover { --btn-bg: transparent; --btn-fg: var(--blue); border-color: var(--blue-300); box-shadow: none; }
.btn--deep { --btn-bg: var(--blue-deep); }
.btn--deep:hover { background: #17407a; }
.btn--white { --btn-bg: #fff; --btn-fg: var(--blue-deep); }
.btn--white:hover { background: #fff; box-shadow: 0 18px 40px -18px rgba(0,0,0,.5); }
.btn--onDeep-ghost { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255,255,255,.32); }
.btn--onDeep-ghost:hover { --btn-bg: rgba(255,255,255,.08); --btn-fg: #fff; border-color: rgba(255,255,255,.6); box-shadow: none; }
.btn--lg { padding: 1.1rem 2.1rem; font-size: 1rem; }
.btn--sm { padding: .6rem 1.15rem; font-size: var(--fs-micro); }
.btn .ico { width: 1em; height: 1em; flex: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45em;
  font-weight: 600; font-size: var(--fs-small); color: var(--blue);
  /* Keep the label and its arrow on one line. Without this "Learn more" wraps
     and strands the arrow on a line of its own in narrow cards. */
  white-space: nowrap;
}
.link-arrow .ico { transition: transform .32s var(--ease); }
.link-arrow:hover .ico { transform: translateX(4px); }

/* --------------------------------------------------------------- 6. Nav */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease-io), border-color .3s var(--ease-io), box-shadow .3s var(--ease-io);
}
.nav.is-stuck { background: rgba(255,255,255,.9); border-bottom-color: var(--line); }
.nav__inner {
  width: 100%; max-width: 1480px; margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: clamp(1rem,3vw,2.5rem);
}
.nav__brand { display: flex; align-items: center; gap: .6rem; flex: none; }
.nav__brand img { height: 40px; width: auto; }
.nav__links { display: flex; align-items: center; gap: clamp(.5rem,1.6vw,1.6rem); margin-left: auto; }
.nav__link {
  position: relative; font-size: var(--fs-small); font-weight: 500; color: var(--ink);
  padding: .4rem .1rem; transition: color .2s var(--ease-io);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--blue); transform: scaleX(0); transform-origin: left;
  transition: transform .34s var(--ease);
}
.nav__link:hover { color: var(--blue); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--blue); font-weight: 600; }
.nav__actions { display: flex; align-items: center; gap: .75rem; flex: none; }
.nav__tel { font-size: var(--fs-small); font-weight: 600; color: var(--blue-deep); display: inline-flex; align-items: center; gap: .4rem; }
.nav__tel:hover { color: var(--blue); }
.nav__tel svg { width: 15px; height: 15px; }

.nav__toggle {
  display: none; width: 44px; height: 44px; border: 0; background: none;
  align-items: center; justify-content: center; cursor: pointer;
}
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--ink); position: relative; transition: background .2s; }
.nav__toggle span::before, .nav__toggle span::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--ink);
  transition: transform .34s var(--ease), top .2s var(--ease);
}
.nav__toggle span::before { top: -7px; }
.nav__toggle span::after  { top:  7px; }
.nav.is-open .nav__toggle span { background: transparent; }
.nav.is-open .nav__toggle span::before { top: 0; transform: rotate(45deg); }
.nav.is-open .nav__toggle span::after  { top: 0; transform: rotate(-45deg); }

.nav__sheet {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 99;
  background: #fff; padding: 2rem var(--gutter) 3rem;
  display: flex; flex-direction: column; gap: .25rem;
  transform: translateY(-8px); opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .28s var(--ease-io), transform .38s var(--ease), visibility 0s linear .38s;
  overflow-y: auto;
}
body.is-nav-open .nav__sheet {
  opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  transition: opacity .28s var(--ease-io), transform .38s var(--ease), visibility 0s;
}
.nav__sheet a.nav__sheet-link {
  font-family: var(--font-head); font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em;
  padding: .7rem 0; border-bottom: 1px solid var(--line-soft);
}
.nav__sheet .btn { margin-top: 1.5rem; }
.nav__sheet-meta { margin-top: auto; padding-top: 2rem; color: var(--ink-70); font-size: var(--fs-small); }

/* ------------------------------------------------------- 7. The 3D stage */
.site-main { position: relative; z-index: 1; }
.stage-fallback {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 70% 32%, rgba(45,100,179,.10), transparent 70%),
    radial-gradient(48% 44% at 22% 68%, rgba(15,46,92,.07), transparent 70%);
}

/* --------------------------------------------------------------- 8. Hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block: calc(var(--nav-h) + 4rem) 5rem;
  background: transparent;
}
.hero__media {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: var(--paper);
}
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }
/* Scrim. Heavier on the copy side than the earlier gradient because it now sits
   over photography rather than over a white page. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.96) 32%,
                    rgba(255,255,255,.66) 50%, rgba(255,255,255,.10) 70%,
                    rgba(255,255,255,0) 84%);
}
.hero__inner { max-width: 1480px; margin-inline: auto; padding-inline: var(--gutter); width: 100%; position: relative; z-index: 2; }
.hero__copy { max-width: 56rem; position: relative; z-index: 2; }
.hero .display { color: var(--ink); }
.hero .display em { font-style: normal; color: var(--blue); display: block; margin-top: .12em; }
.hero__deck { margin-top: 1.6rem; max-width: 44ch; font-size: var(--fs-deck); color: #3A3E44; }
.hero__cta { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: .85rem; }
.hero__chips {
  margin: 3rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: #4A4F55;
}
.hero__chips li { display: flex; align-items: center; gap: .55rem; list-style: none; }
.hero__chips li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); flex: none; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-50);
}
.scroll-cue__track { width: 1px; height: 42px; background: var(--line); position: relative; overflow: hidden; }
.scroll-cue__track::after {
  content: ""; position: absolute; inset: 0 auto auto 0; width: 1px; height: 16px; background: var(--blue);
  animation: cue 2.4s var(--ease-io) infinite;
}
@keyframes cue { 0% { transform: translateY(-18px); } 60%, 100% { transform: translateY(46px); } }

/* --------------------------------------------------------- 9. Trust strip */
.trust {
  border-block: 1px solid var(--line);
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.trust__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; padding-block: 1.4rem;
}
.trust__item {
  display: flex; align-items: center; gap: .7rem;
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-70);
}
.trust__item svg { width: 18px; height: 18px; color: var(--blue); flex: none; }

/* ---------------------------------------------- 10. Process (sticky photo) */
.process { position: relative; background: var(--white); }

/* Photograph on one side, steps scrolling past on the other. The panel sticks
   for the length of the section and cross-fades as each beat becomes active. */
.process__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
.process__media {
  position: sticky; top: calc(var(--nav-h) + clamp(1.5rem, 5vh, 4rem));
  aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
  background: var(--paper); border: 1px solid var(--line);
}
.process__shot {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .55s var(--ease-io);
}
.process__shot.is-on { opacity: 1; }
.process__steps { position: relative; }
.process__step { min-height: 62svh; display: grid; align-content: center; }
.process__card {
  max-width: 34rem; padding: 0 0 0 clamp(1.2rem, 2.5vw, 2rem);
  border-left: 2px solid var(--line);
  transition: opacity .5s var(--ease-io), border-color .5s var(--ease-io);
}
/* Only dim once the scroll driver is actually running. */
html.process-ready .process__card { opacity: .38; }
html.process-ready .process__step.is-active .process__card { opacity: 1; }
.process__step.is-active .process__card { border-left-color: var(--blue); }

/* The step heading is a real <button> so a phone can turn it into an accordion
   without rebuilding the DOM. On a wide screen it is styled back down to a
   plain heading: no affordance, no pointer, nothing to activate. */
.process__h { margin: 0; }
.process__head {
  display: block; width: 100%; margin: 0; padding: 0;
  font: inherit; color: inherit; text-align: left;
  background: none; border: 0; cursor: default;
}
.process__title { display: block; font-size: var(--fs-h3); }
.process__pm { display: none; }

.process__num {
  font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-50);
  display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem;
}
.process__step.is-active .process__num { color: var(--blue); }
.process__num i { display: block; width: 22px; height: 1px; background: currentColor; flex: none; }
.process__card p { margin-top: .9rem; color: var(--ink-70); font-size: var(--fs-small); }
.process__meta {
  margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .45rem;
}
.process__tag {
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--blue-deep); background: var(--blue-050); border: 1px solid var(--blue-100);
  border-radius: var(--radius-pill); padding: .3rem .7rem;
}
.process__rail {
  position: fixed; right: clamp(1rem,2.5vw,2.5rem); top: 50%; transform: translateY(-50%);
  z-index: 2; display: flex; flex-direction: column; gap: .85rem;
  opacity: 0; pointer-events: none; transition: opacity .4s var(--ease-io);
}
.process__rail.is-visible { opacity: 1; pointer-events: auto; }
.process__dot {
  width: 26px; height: 26px; border: 0; background: none; padding: 0; cursor: pointer;
  display: grid; place-items: center;
}
.process__dot i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: all .34s var(--ease); }
.process__dot[aria-current="true"] i { background: var(--blue); transform: scale(1.5); }
.process__dot:hover i { background: var(--blue-300); }

/* -------------------------------------------------- 10c. Compare two cards */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.compare__col { background: #fff; padding: clamp(1.5rem, 3vw, 2.4rem); display: flex; flex-direction: column; gap: .9rem; }
.compare__col--hl { background: var(--blue-050); }
.compare__tag { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.compare__row { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding-block: .6rem;
  border-top: 1px solid var(--line-soft); font-size: var(--fs-small); }
.compare__row dt { color: var(--ink-50); font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; }
.compare__row dd { margin: 0; color: var(--ink-70); }

/* ------------------------------------------------- 10d. Rule list (no box) */
/* Used where a bordered card grid would be the third identical grid on the
   page. A hairline and a number carry the structure instead. */
.rulelist { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 clamp(1.5rem,3vw,3.5rem); }
.rulelist__item { padding: 1.6rem 0 2rem; border-top: 1px solid var(--line); }
.rulelist__n {
  font-family: var(--font-head); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .14em; color: var(--blue); display: block; margin-bottom: .9rem;
  font-variant-numeric: tabular-nums;
}
.rulelist__t { font-family: var(--font-head); font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.rulelist__d { margin-top: .7rem; font-size: var(--fs-small); color: var(--ink-70); line-height: 1.6; }

/* ------------------------------------------------------------ 11. Cards */
.card {
  position: relative; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  display: flex; flex-direction: column; gap: .8rem;
  transition: transform .42s var(--ease), box-shadow .42s var(--ease), border-color .3s var(--ease-io);
  overflow: hidden;
}
a.card:hover, .card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-100); }
.card__ico {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; flex: none;
  background: var(--blue-050); color: var(--blue);
  border: 1px solid var(--blue-100);
  transition: background .32s var(--ease-io), color .32s var(--ease-io), border-color .32s var(--ease-io);
}
.card__ico svg { width: 24px; height: 24px; }
a.card:hover .card__ico { background: var(--blue); color: #fff; border-color: var(--blue); }
.card__title { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.card__text { font-size: var(--fs-small); color: var(--ink-70); line-height: 1.55; }
.card__more { margin-top: auto; padding-top: .6rem; }
.card--flat { border-color: transparent; background: var(--paper); }
.card--pad-lg { padding: clamp(1.8rem, 3vw, 2.6rem); }

.card--service { padding: 0; }
.card--service .card__media { aspect-ratio: 16/10; overflow: hidden; background: var(--paper); border-bottom: 1px solid var(--line); }
.card--service .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
a.card--service:hover .card__media img { transform: scale(1.045); }
.card--service .card__body { padding: clamp(1.3rem, 2.2vw, 1.75rem); display: flex; flex-direction: column; gap: .7rem; flex: 1; }

/* --------------------------------------------------------- 12. Stat block */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--line); border-block: 1px solid var(--line);
}
.stat { background: var(--white); padding: clamp(1.6rem,3vw,2.6rem) clamp(1.2rem,2vw,2rem); }
.section--deep .stats { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.16); }
.section--deep .stat { background: var(--blue-deep); }
.stat__num {
  font-family: var(--font-head); font-weight: 800; letter-spacing: -.04em; line-height: 1;
  font-size: clamp(2.6rem, 5vw, 4.25rem); color: var(--blue-deep);
  font-variant-numeric: tabular-nums;
}
.section--deep .stat__num { color: #fff; }
.stat__num sup { font-size: .42em; vertical-align: super; letter-spacing: 0; margin-left: .06em; }
.stat__label { margin-top: .7rem; font-size: var(--fs-small); color: var(--ink-70); line-height: 1.45; }
.section--deep .stat__label { color: rgba(255,255,255,.7); }

/* ------------------------------------------------------- 13. Split / media */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split--rev .split__media { order: -1; }
.split__media { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.figure-note {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem;
  background: linear-gradient(to top, rgba(15,46,92,.86), transparent);
  color: #fff; font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
}
/* Wide banner between a section head and its content. Exists to break up the
   long all-text sections; reuses .figure-note for the caption. */
.section-photo {
  position: relative; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--paper); aspect-ratio: 22 / 10;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.section-photo img { width: 100%; height: 100%; object-fit: cover; }

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.checklist li { display: grid; grid-template-columns: 22px 1fr; gap: .8rem; align-items: start; font-size: var(--fs-small); color: var(--ink-70); }
.checklist li::before {
  content: ""; width: 20px; height: 20px; margin-top: .12rem; border-radius: 50%;
  background: var(--blue-050) center/12px 12px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D64B3' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  border: 1px solid var(--blue-100);
}
.section--deep .checklist li { color: rgba(255,255,255,.78); }
.section--deep .checklist li::before {
  background-color: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* --------------------------------------------------- 13b. Full-width band */
.band { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.band img { width: 100%; height: auto; display: block; }
.band figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem clamp(1.2rem, 3vw, 2.4rem);
  background: linear-gradient(to top, rgba(15,46,92,.82), transparent);
  color: #fff; font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}

/* Map variant of .band. The photo it replaced set its own height through the
   image's intrinsic ratio; an iframe has none, so the ratio is declared here.
   22/10 is the same letterbox the photo used, which keeps the homepage rhythm,
   but it is unusable on a phone: a map 22 units wide and 10 tall shows a strip
   of road and nothing either side of it. Below 700px it squares up instead. */
.band--map { border: 1px solid var(--line); aspect-ratio: 22 / 10; }
.band--map iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 700px) {
  .band--map { aspect-ratio: 4 / 3; }
}

/* -------------------------------------------------------- 14. Industries */
.industries {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.industry {
  background: #fff; padding: clamp(1.5rem,2.6vw,2.1rem) 1.2rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  transition: background .3s var(--ease-io);
}
.industry:hover { background: var(--blue-050); }
.industry svg { width: 30px; height: 30px; color: var(--blue); }
.industry span { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--blue-deep); line-height: 1.35; }

/* -------------------------------------------------------- 15. Timeline */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 6.5rem; top: .6rem; bottom: .6rem; width: 1px; background: var(--line); }
.timeline li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0 2rem; padding-block: 1.15rem; position: relative; }
.timeline li::before {
  content: ""; position: absolute; left: calc(6.5rem - 4px); top: 1.55rem;
  width: 9px; height: 9px; border-radius: 50%; background: var(--blue);
  border: 2px solid #fff; box-shadow: 0 0 0 3px var(--blue-050);
}
.timeline time { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; color: var(--blue-deep); letter-spacing: -.02em; }
.timeline p { font-size: var(--fs-small); color: var(--ink-70); }

/* ---------------------------------------------------------- 16. CTA band */
.cta-band { position: relative; overflow: hidden; background: var(--blue-deep); color: #fff; }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(52% 70% at 84% 18%, rgba(45,100,179,.55), transparent 68%),
    radial-gradient(40% 60% at 10% 90%, rgba(45,100,179,.30), transparent 70%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band .h2 { color: #fff; max-width: 18ch; }
.cta-band .deck { color: rgba(255,255,255,.72); }
.cta-band__row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }
.cta-band__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
.cta-band__aside { display: grid; gap: 1.1rem; }
.cta-line { display: grid; grid-template-columns: 20px 1fr; gap: .9rem; align-items: start; font-size: var(--fs-small); color: rgba(255,255,255,.8); }
.cta-line svg { width: 20px; height: 20px; color: var(--blue-300); margin-top: .12rem; }
.cta-line strong { display: block; color: #fff; font-weight: 600; }

/* ------------------------------------------------------------ 17. Forms */
.form { display: grid; gap: 1.05rem; }
.field { display: grid; gap: .45rem; }
.field label { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-70); }
.field .req { color: var(--blue); }
.field input, .field select, .field textarea {
  width: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .85rem 1rem; color: var(--ink);
  /* Never below 16px: iOS Safari zooms the viewport on focus otherwise, which
     throws the user out of position halfway through a quote request. */
  font-size: 16px;
  transition: border-color .2s var(--ease-io), box-shadow .2s var(--ease-io);
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-100);
}
.field--error input, .field--error select, .field--error textarea { border-color: #C0392B; }
.field__err { font-size: var(--fs-micro); color: #C0392B; display: none; }
.field--error .field__err { display: block; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; }
.radio-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.radio-chip { position: relative; }
.radio-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio-chip span {
  display: block; padding: .55rem 1.05rem; border: 1px solid var(--line); border-radius: var(--radius-pill);
  font-size: var(--fs-micro); font-weight: 600; color: var(--ink-70); cursor: pointer;
  transition: all .22s var(--ease-io);
}
.radio-chip input:checked + span { background: var(--blue-050); border-color: var(--blue); color: var(--blue-deep); }
.radio-chip input:focus-visible + span { outline: 2.5px solid var(--blue); outline-offset: 2px; }
.form__note { font-size: var(--fs-micro); color: var(--ink-50); }
/* Honeypot. Off-screen rather than display:none, because some bots skip
   fields that are display:none. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { display: none; padding: 1rem 1.1rem; border-radius: var(--radius-sm); font-size: var(--fs-small); }
.form-status.is-ok { display: block; background: var(--blue-050); border: 1px solid var(--blue-100); color: var(--blue-deep); }
/* The endpoint refused or is unreachable. This state carries the buyer's only
   remaining route to MFI, so it must be visible: .form-status is display:none
   by default and an unstyled state would hide the fallback entirely. */
.form-status.is-warn { display: block; background: #FFF7E6; border: 1px solid #F0D9A8; color: #5A4213; }
.form-status.is-warn a { color: var(--blue-deep); font-weight: 600; text-decoration: underline; }

/* ---------------------------------------------------------- 18. Accordion */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.4rem 0; font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; letter-spacing: -.015em;
  color: var(--ink); transition: color .2s var(--ease-io);
}
.acc__btn:hover { color: var(--blue); }
.acc__btn i { flex: none; width: 18px; height: 18px; position: relative; }
.acc__btn i::before, .acc__btn i::after {
  content: ""; position: absolute; top: 50%; left: 0; width: 18px; height: 2px;
  background: var(--blue); border-radius: 2px; transition: transform .34s var(--ease);
}
.acc__btn i::after { transform: rotate(90deg); }
.acc__btn[aria-expanded="true"] i::after { transform: rotate(0deg); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.acc__panel > div { overflow: hidden; }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel p { padding-bottom: 1.5rem; color: var(--ink-70); font-size: var(--fs-small); max-width: 68ch; }

/* ------------------------------------------------- 18b. Touch target sizes */
/* Pointer-coarse only, so the desktop rhythm is untouched. WCAG 2.5.8 asks for
   24px; calling is a primary conversion here, so these get the full 44px. */
@media (pointer: coarse) {
  .footer ul a,
  .crumbs a,
  .cta-line a,
  .nav__sheet-meta a,
  .prose a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
  }
  .footer ul { gap: 0; }
  .radio-chip span { padding: .8rem 1.2rem; }
  .acc__btn { padding-block: 1.15rem; min-height: 56px; }
  .link-arrow { min-height: 44px; align-items: center; }
  .nav__tel { min-height: 44px; }
  .nav__brand { min-height: 44px; align-items: center; }
  .nav__sheet-meta a, .nav__sheet-meta a strong { display: inline-block; min-height: 44px; line-height: 44px; }
}


/* ------------------------------------------------------------ 19. Footer */
.footer {
  /* The 3D canvas is position:fixed z-index:0. A static footer paints its
     background before positioned siblings, so the part drew over the address.
     Same escape hatch .site-main already uses. */
  position: relative; z-index: 1;
  background: var(--ink); color: rgba(255,255,255,.66);
  padding-block: clamp(3.5rem,7vw,5.5rem) 2rem; font-size: var(--fs-small);
}
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: clamp(2rem,4vw,3.5rem); }
.footer h4 {
  color: #fff; font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase;
  font-family: var(--font-body); font-weight: 600; margin-bottom: 1.1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer a:hover { color: #fff; }
.footer__brand img { height: 34px; width: auto; margin-bottom: 1.2rem; filter: brightness(0) invert(1); }
.footer__brand p { max-width: 34ch; line-height: 1.6; }
.footer__bar {
  margin-top: clamp(2.5rem,5vw,4rem); padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center;
  font-size: var(--fs-micro); color: rgba(255,255,255,.56);
}
/* Padding, not line-height, so these clear the 40px touch target. They are
   standalone navigation, so the inline-link exemption does not apply. */
.footer__hint { color: rgba(255,255,255,.45); font-size: var(--fs-micro); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 0 1.4rem; }
.footer__legal a { color: rgba(255,255,255,.55); display: inline-block; padding-block: .6rem; }
.footer__legal a:hover { color: #fff; }
.footer__iso { display: inline-flex; align-items: center; gap: .6rem; color: rgba(255,255,255,.75); font-weight: 600; }
.footer__iso svg { width: 16px; height: 16px; color: var(--blue-300); }

/* ----------------------------------------------------- 20. Page header */
.page-head {
  padding-block: calc(var(--nav-h) + clamp(3.5rem,7vw,6rem)) clamp(2.5rem,5vw,4rem);
  background: transparent; position: relative;
}
.page-head .h1 { max-width: 16ch; }
.page-head .deck { margin-top: 1.4rem; }
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: var(--fs-micro); color: var(--ink-50); margin: 0 0 1.4rem; list-style: none; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--line); }
.crumbs a:hover { color: var(--blue); }

/* ------------------------------------------------------- 21. Prose (blog) */
.prose { max-width: var(--maxw-text); }
.prose > * + * { margin-top: 1.35rem; }
.prose h2 { font-size: clamp(1.6rem,2.6vw,2.15rem); margin-top: 3rem; }
.prose h3 { font-size: clamp(1.25rem,1.9vw,1.5rem); margin-top: 2.2rem; }
.prose p, .prose li { color: var(--ink-70); line-height: 1.72; }
.prose ul, .prose ol { padding-left: 1.35rem; display: grid; gap: .6rem; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* -------------------------------------------------------- 22. Reveal anim */
/* Content is VISIBLE by default and only hidden once JS has confirmed it will
   reveal it (html.reveal-on, set by an inline head script and auto-removed if
   the module never boots). A scroll animation must never be able to make copy
   permanently invisible. */
html.reveal-on [data-reveal] { opacity: 0; transform: translateY(22px); }
html.reveal-on [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease-io), transform .9s var(--ease);
  transition-delay: var(--d, 0ms);
}

/* ------------------------------------------------------- 23. Responsive */
@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .cta-band__grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  :root { --nav-h: 60px; }
  .nav__links, .nav__tel { display: none; }
  .nav__actions { margin-left: auto; }
  .nav__toggle { display: flex; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rulelist { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .split { grid-template-columns: 1fr; }
  .split--rev .split__media { order: 0; }
  /* Process, phone and small tablet. The desktop mechanism is a sticky photo
     that cross-fades as six full-height beats scroll past it, which cannot work
     in one narrow column. The first attempt here was a tap-driven accordion,
     but collapsing five of six steps hid the substance and read as greyed-out
     dead text. Every step is now open, exactly like the numbered list further
     down the page, and the sticky photo follows whichever step you have
     scrolled to. Nothing is hidden and nothing needs tapping. */
  .process__grid { display: block; }
  .process__media {
    position: sticky; top: calc(var(--nav-h) + .5rem); z-index: 2;
    aspect-ratio: 16 / 9; margin-bottom: 1.6rem;
    box-shadow: var(--shadow-sm);
  }
  .process__steps { border-top: 1px solid var(--line); }
  .process__step { min-height: 0; display: block; }
  /* Beats the html.process-ready dimming rule, which is a desktop mechanism. */
  html .process__card,
  html.process-ready .process__card,
  html.process-ready .process__step.is-active .process__card {
    max-width: none; padding: 0 0 0 1rem; opacity: 1;
    border-left: 2px solid var(--line-soft);
    border-bottom: 0;
  }
  /* The only marker of which step the photo is showing. */
  html .process__step.is-active .process__card,
  html.process-ready .process__step.is-active .process__card { border-left-color: var(--blue); }
  .process__step + .process__step { border-top: 1px solid var(--line); }
  .process__head {
    display: block; cursor: default; padding-block: 1.15rem .1rem;
  }
  .process__num   { margin-bottom: .45rem; }
  .process__title { font-size: 1.15rem; }
  .process__pm    { display: none; }
  .process__body  { display: block; }
  .process__body > div { overflow: visible; }
  .process__card p { margin-top: .55rem; padding-bottom: 1.35rem; }
  .process__rail { display: none; }
  .compare { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .rulelist { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .timeline::before { left: 4px; }
  .timeline li { grid-template-columns: 1fr; gap: .3rem; padding-left: 1.75rem; }
  .timeline li::before { left: 0; top: 1.5rem; }
  .section-photo { aspect-ratio: 16 / 9; }
  .stat__num { font-size: 2.9rem; }
  .nav__brand img { height: 34px; }

  /* Hero, phone. The video stops being a background and becomes a card.
     Behind the copy it needed a ~95% white scrim to keep the headline legible,
     which erased it: three megabytes bought a pale haze. Stacked instead, the
     headline gets full contrast on paper and the footage is actually visible.
     `order` on a flex column does this without touching the markup. */
  /* `display: contents` dissolves the two wrapper divs so the headline, the
     video, the deck and the buttons all become direct flex children of .hero
     and can be ordered independently. That is what lets the video sit directly
     under "Built to perform." while the markup stays untouched, and it is why
     the gutter moves onto .hero itself: the wrapper that used to carry it no
     longer generates a box. */
  .hero {
    display: flex; flex-direction: column; gap: 0;
    min-height: 0;
    padding: calc(var(--nav-h) + 2.25rem) var(--gutter) 2.75rem;
  }
  .hero::before { display: none; }
  .hero__inner, .hero__copy { display: contents; }
  .hero .display { order: 1; }
  .hero__deck { order: 3; margin-top: 1.5rem; }
  .hero__cta  { order: 4; margin-top: 1.6rem; }
  /* Stack on a phone, pair up on a wide phone/small tablet, one rule. */
  .hero__cta .btn { flex: 1 1 14rem; }
  .hero__media {
    order: 2; position: relative; inset: auto;
    margin: 1.5rem 0 0;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    background: var(--blue-050);
  }
  /* The cue is anchored to the bottom of the hero box, which the card now
     occupies. Reaching the card is its own scroll affordance. */
  .scroll-cue { display: none; }

  /* Trust strip, phone. `space-between` wrapping produced a ragged left stack
     with an orphan pairing on the last line. A two-up hairline grid keeps the
     credential-bar reading and lands the fifth item across the full width. */
  .trust__row {
    display: grid; grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 0; padding-block: 0;
  }
  .trust__item {
    align-items: flex-start;
    padding-block: .9rem;
    font-size: .72rem; letter-spacing: .05em; line-height: 1.35; gap: .5rem;
    border-bottom: 1px solid var(--line-soft);
  }
  .trust__item svg { width: 15px; height: 15px; margin-top: .1em; }
  .trust__item:nth-child(odd)  { padding-right: .85rem; }
  .trust__item:nth-child(even) { padding-left: .85rem; border-left: 1px solid var(--line-soft); }
  .trust__item:last-child {
    grid-column: 1 / -1; justify-content: center;
    border-bottom: 0; border-left: 0; padding-inline: 0;
  }
}

/* --------------------------------------------------- 24. Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  html.reveal-on [data-reveal] { opacity: 1; transform: none; }

  .scroll-cue__track::after { display: none; }
}

/* ------------------------------------------------------------- 25. Print */
@media print {
  .nav, .scroll-cue, .process__rail, .stage-fallback { display: none !important; }
  body { color: #000; }
  .section { padding-block: 1.5rem; }
}

/* ==========================================================================
   ElevenLabs conversational agent
   --------------------------------------------------------------------------
   The widget renders inside a shadow root and positions itself fixed at
   z-index 1000, which is above the mobile nav sheet (99) and the skip link
   (999). Shadow DOM does not create a stacking context on its own, so that
   1000 would compete at document level.

   The widget's own `:host` rule is:
       position: fixed; inset: 0; z-index: 1000; pointer-events: none
   so the host is already a full-viewport overlay layer that creates its own
   stacking context and lets clicks through. Every internal layer is contained
   inside it, which means the single z-index below re-places the whole widget.

   ONLY override z-index here. A light-DOM rule on the element beats the
   shadow tree's `:host`, so setting `position` would overwrite that `fixed`
   and collapse the host to a zero-size box in the document flow, taking the
   `position: absolute` overlays down to the end of the page with it.
   ========================================================================== */
elevenlabs-convai {
  z-index: 90;               /* under .nav__sheet (99) and .nav (100) */
}

/* When the mobile menu is open the sheet covers the viewport, so the bubble
   is hidden behind it already. This also stops it taking pointer events
   through the sheet and keeps it out of the tab order. */
body.is-nav-open elevenlabs-convai {
  visibility: hidden;
  pointer-events: none;
}

/* The bubble is fixed to the bottom-right of the viewport, so anything in
   that corner can be scrolled clear of it except the very end of the
   document. Give the footer room so its last row is always reachable.
   Narrow screens only: on desktop the footer bar has width to spare. */
@media (max-width: 620px) {
  .footer__bar { padding-bottom: 5rem; }
}

@media print {
  elevenlabs-convai { display: none; }
}