/* Border Glass Now. Homepage only, apart from the reusable logo component.
   Load after design.css. Steel surfaces; lime is an action accent. */
.bgn-brand {
  display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none;
  max-width: 100%; border-radius: 8px;
}
.bgn-brand img { display: block; width: 235px; max-width: 100%; height: auto; object-fit: contain; }
.bgn-brand:focus-visible { outline: 2px solid #AAE633; outline-offset: 4px; }
.bgn-brand--footer img { width: 260px; height: auto; }

.site {
  --ink: #111315; --panel: #1d2023; --panel-2: #292d31;
  --text: #f6f6f3; --muted: #b8bec3; --line: #42474c; --line-soft: #303438;
  --accent: #AAE633; --accent-ink: #19200e; --glass: #d7dde1;
  --pad: clamp(20px, 4.5vw, 76px);
  --header-height: 102px;
  background: #111315; font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  overflow-x: clip; line-height: 1.65;
}
.site::before { display: none; }
.site :is(.wrap-wide, .site-header__inner, .hero__frame) { max-width: 1440px; }
.site :is(section[id], [data-dropzone], #main) { scroll-margin-top: calc(var(--header-height) + 20px); }
.site :focus-visible { outline: 3px solid #AAE633; outline-offset: 5px; }
.site :is(.dropzone, .problem, #how, #faq, #where) :focus-visible { outline-color: #252b30; }
.site :is(h1, h2, h3) { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-variation-settings: normal; }
.site .eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .15em; color: #aeb6bd; }
.site .eyebrow::before { width: 22px; height: 3px; background: #AAE633; }
.site .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 20px;
  min-height: 52px; padding: 14px 23px; border-radius: 9px;
  font: 700 13px/1.4 'Plus Jakarta Sans', Arial, sans-serif;
  text-decoration: none; letter-spacing: -.015em; cursor: pointer;
  transition: background .2s, box-shadow .2s, transform .2s;
}
.site .btn-primary { background: #AAE633; border: 1px solid #AAE633; color: #19200e; }
.site .btn-primary:hover { background: #b9ef52; border-color: #b9ef52; color: #19200e; box-shadow: 0 5px 22px #0002; }
.site .btn:disabled, .site button:disabled { cursor: wait; }
.site .site-header { background: #111315f5; border-bottom: 1px solid #ffffff18; backdrop-filter: blur(18px); }
.site .site-header.is-stuck { background: #111315fa; box-shadow: 0 8px 32px #0002; }
.site .site-header__inner { min-height: var(--header-height); padding-block: 3px; gap: 25px; }
.site .site-header .bgn-brand img { width: 141px; height: auto; }
.site .nav { gap: clamp(16px, 2vw, 30px); }
.site .nav a { display: inline-flex; align-items: center; min-height: 44px; color: #d5d9dc; font-size: 12px; }
.site .nav a:last-child { color: #aeb6bd; }
.site .site-header__actions { gap: 22px; }
.site .site-header .btn { border-radius: 9px; }
.site .hdr-phone { font-size: 11px; color: #d5d9dc; }
.site .hdr-phone__ico { background: #AAE633; animation: none; box-shadow: none; }
.site .burger { border-color: #565b60; border-radius: 8px; }
.site .burger span { background: #f6f6f3; }
.site .drawer { top: var(--header-height); padding: 18px var(--pad) 24px; max-height: calc(100dvh - var(--header-height)); overflow-y: auto; background: #171a1d; border-color: #45494d; box-shadow: 0 28px 45px #0005; }
.site .drawer.is-open { display: flex; }
.site .drawer a { color: #f6f6f3; font-size: 15px; min-height: 48px; border-color: #34383b; }
.site .drawer .btn { color: #19200e; padding-inline: 22px; }

/* Film, scrim, the 25% road shield, then content and playback controls. */
.site .hero {
  position: relative; display: flex; align-items: center; min-height: 100svh;
  padding: calc(var(--header-height) + clamp(18px, 3vh, 40px)) 0 clamp(18px, 3vh, 40px); isolation: isolate;
  background: #080b0e;
  border-bottom: 1px solid #3e4348; overflow: hidden;
}
.site .hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, #080b10e0 0%, #080b10b8 35%, #0b111559 61%, #0b11152e 100%), linear-gradient(0deg, #080b10a6 0%, transparent 45%, #080b1059 100%);
}
.site .hero__brand-overlay {
  position: absolute; z-index: 2; top: 53%; left: 45%; width: min(82vw, 1040px);
  max-width: none; height: auto; object-fit: contain; transform: translate(-50%, -50%);
  opacity: .25; pointer-events: none; user-select: none;
}
.site .hero__frame { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(340px, .85fr); gap: 20px 6%; align-items: center; }
.site .hero__copy { position: relative; grid-column: 1; grid-row: 1; min-width: 0; }
.site .hero__copy .eyebrow { margin-bottom: 18px; }
.site .hero__title {
  margin: 0 0 26px; max-width: none; font-size: clamp(50px, 5.55vw, 80px);
  line-height: .98; letter-spacing: -.035em !important; font-weight: 700 !important;
  color: #f7f7f4;
}
.site .hero__outline { color: #f7f7f4; }
@supports (-webkit-text-stroke: 1px #fff) {
  .site .hero__outline { color: transparent; -webkit-text-stroke: 1.5px #f7f7f4; }
}
.site .hero__punctuation { color: #AAE633; -webkit-text-stroke: 0; }
.site .hero__outline::after { content: ''; display: inline-block; width: .13em; height: .13em; margin-left: .15em; background: #AAE633; border-radius: 1px; vertical-align: .04em; }
.site .hero__sub { font-size: 15px; line-height: 1.75; color: #e0e5e8; max-width: 43ch; margin: 0; opacity: 1; text-shadow: 0 2px 18px #0009; }
.site .hero__quote { grid-column: 2; grid-row: 1; min-width: 0; }
.site .hero-film { position: absolute; inset: 0; z-index: 0; background: #050607; overflow: hidden; pointer-events: none; }
.site .hero__shatter { position: absolute; inset: 0; opacity: 1; z-index: 0; pointer-events: none; }
.site .shatter-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; mix-blend-mode: normal; }
.site .glass-shine { inset: 0; opacity: 0; animation: none; transform: none; transition: opacity .65s ease; background: linear-gradient(112deg, transparent 25%, #dce4eb10 39%, #f7faff26 42%, transparent 46%, transparent 66%, #eff4ff12 73%, transparent 76%); }
.site .hero-film.is-clear .glass-shine { opacity: 1; }
.site .hero-film__caption { color: #e5e9ec; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 1px 8px #000; }
.site .video-toggle { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 26px; padding: 10px 14px; border: 1px solid #ffffff55; border-radius: 999px; background: #111315df; color: #f6f6f3; font: 600 11px/1.3 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
.site .video-toggle:hover { background: #353b40; }
.site .video-toggle__icon { font-size: 10px; min-width: 12px; }
.site .hero__note { color: #d9dfe3; font-size: 11px; line-height: 1.7; margin: 12px 8px 0; max-width: none; text-shadow: 0 1px 8px #000; }
.site .hero__base { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; justify-content: space-between; gap: 22px; border-top: 1px solid #ffffff30; padding-top: 20px; margin: 0; }
.site .hero__steps { padding: 0; margin: 0; border: 0; gap: 12px 24px; }
.site .hero__steps li { color: #d0d6da; font-size: 11px; gap: 9px; }
.site .step-n { border: 0; border-radius: 0; width: auto; height: auto; color: #AAE633; font-size: 10px; }
.site .hero__where { margin: 0; font-size: 10px; color: #c7d0d6; letter-spacing: .015em; }

/* One upload component, two entry points. Only the actual buttons open pickers. */
.site .dropzone, .site .hero .dropzone, .site .dropzone--try {
  --text: #171c20; --muted: #535e67; --line: #ccd2d5;
  position: relative; display: block; width: 100%; max-width: none; min-height: 0;
  padding: 28px; border: 1px solid #fff; border-radius: 20px;
  background: linear-gradient(135deg, #fff 0%, #f1f3f4 72%, #e6e9ec 100%);
  color: #171c20; box-shadow: 0 22px 75px #0003, inset 0 1px #fff;
  cursor: default; transform: none;
}
.site .dropzone:hover { transform: none; background: linear-gradient(135deg, #fff, #f1f3f4 72%, #e6e9ec); border-color: #fff; }
.site .dropzone.dragging { outline: 4px solid #AAE633; outline-offset: 5px; transform: none; }
.site .dropzone:focus-within { border-color: #fff; transform: none; }
.site .quote-panel__top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 26px; }
.site .quote-panel__step { color: #2e383e; font-size: 9px; letter-spacing: .12em; font-weight: 750; text-transform: uppercase; }
.site .quote-panel__time { color: #616b73; font-size: 10px; }
.site .dropzone__icon { width: 38px; height: 31px; margin: 0 0 18px; border: 1.5px solid #56636b; border-radius: 9px 9px 5px 5px; background: linear-gradient(135deg, #fff, #d9e0e5); }
.site .dropzone__icon::after { width: 11px; height: 11px; margin: -5px 0 0 -5px; border-color: #56636b; border-width: 1.5px; }
.site .dropzone h2.dropzone__big { font-size: clamp(25px, 2.6vw, 36px); font-weight: 650; letter-spacing: -.048em; line-height: 1.14; max-width: none; margin: 0 0 13px; color: #171c20; }
.site .dropzone p.dropzone__sub { max-width: 35ch; font-size: 12px; line-height: 1.7; color: #535e67; margin: 0 0 22px; }
.site .dropzone__actions { display: grid; gap: 10px; }
.site .upload-button { width: 100%; justify-content: space-between; min-height: 54px; font-size: 14px; padding-inline: 20px; }
.site .upload-button span { font-size: 23px; line-height: 1; }
.site .camera-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; border: 1px solid #bdc5cb; border-radius: 9px; background: #ffffff80; color: #313b42; font: 600 12px/1.3 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
.site .camera-button:hover { border-color: #586770; background: #fff; }
.site .camera-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.site .dropzone p.dropzone__hint { color: #5f6971; font-size: 10px; line-height: 1.7; margin: 12px 0 0; }
.site .dropzone p.quote-panel__privacy { max-width: none; color: #677078; font-size: 10px; line-height: 1.65; border-top: 1px solid #ccd2d6; padding-top: 14px; margin: 16px 0 0; }
.site .dropzone p.photo-error { color: #9a261b; font-size: 12px; font-weight: 600; line-height: 1.6; margin: 13px 0 0; max-width: none; }
.site .photo-error:empty { display: none; }
.site .photo-error__next { color: #702016; text-decoration: underline; text-underline-offset: 3px; }
.site .dropzone__busy { background: #f7f9faee; color: #253039; border-radius: 20px; z-index: 3; font-size: 13px; padding: 24px; }
.site .dropzone .spinner { border-color: #c3cbd0; border-top-color: #344a16; }

/* Compact hero card keeps the working controls within the first desktop view. */
.site .hero .dropzone { padding: 22px; }
.site .hero .quote-panel__top { margin-bottom: 12px; }
.site .hero .dropzone__icon { position: absolute; top: 57px; right: 22px; width: 30px; height: 25px; margin: 0; }
.site .hero .dropzone h2.dropzone__big { padding-right: 40px; font-size: clamp(25px, 2.2vw, 32px); margin-bottom: 10px; }
.site .hero .dropzone p.dropzone__sub { margin-bottom: 14px; }
.site .hero .dropzone__actions { grid-template-columns: 1.35fr 1fr; gap: 8px; }
.site .hero .upload-button { padding-inline: 14px; gap: 8px; font-size: 13px; }
.site .hero .camera-button { padding-inline: 9px; }
.site .hero .dropzone p.quote-panel__privacy { padding-top: 12px; margin-top: 13px; }

/* Editorial section rhythm: off-white, brushed silver, then deep graphite. */
.site .band { padding: 92px 0; }
/* Section headings carry the HERO's treatment (Adam, 27/09: the titles in each
   section need to stand out like the hero title font style). Matched to
   .site .hero__title above - weight 700, -.035em tracking, .98 leading - and
   sized a step below it so the hero still leads the page. Per-section rules
   below only set size and measure, so they inherit this. */
.site .band h2 { font-size: clamp(42px, 5.1vw, 74px); font-weight: 700; letter-spacing: -.035em; line-height: .98; margin: 16px 0 28px; text-wrap: balance; }
.site .heading-accent { color: #56616a; }
.site :is(#services, #try, .cta-card) .heading-accent { color: #b9c5ce; }
.site .heading-punctuation { color: #AAE633; }
.site .band p { font-size: 14px; line-height: 1.9; }
.site .problem { padding: 60px 0; background: #f2f3f1; }
.site .problem .wrap-wide { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; }
.site .problem .eyebrow { color: #5c646a; }
.site .problem h2 { font-size: clamp(36px, 3.4vw, 48px); max-width: 13ch; margin-bottom: 0; color: #20272c; }
.site .problem p.pull { max-width: 45ch; font-size: 20px; line-height: 1.65; font-weight: 400; letter-spacing: -.025em; color: #515b62 !important; }
.site .problem .pull em { color: #20272c; font-weight: 650; }
.site :is(#how, #faq) { --text: #192126; --muted: #556068; --line: #b5bdc3; --panel: #e8edf0; background-color: #e3e7ea; background-image: repeating-linear-gradient(0deg, #fff5 0 1px, transparent 1px 4px), linear-gradient(110deg, #eef1f3, #d8dee3 48%, #f4f5f5 90%); }
.site #how > .wrap-wide { display: grid; grid-template-columns: .78fr 1.22fr; column-gap: 9%; }
.site #how h2 { max-width: 13ch; margin-bottom: 0; }
/* How it works is a plain numbered list: every step readable at once, nothing to click. */
.site #how .steps { margin-top: 0; min-width: 0; }
.site #how .steps li { padding: 22px 0 22px 62px; }
.site #how .steps li::before { top: 25px; color: #192126; font: 700 15px/1 'Plus Jakarta Sans', Arial, sans-serif; letter-spacing: .06em; }
.site #how .steps h3 { font-size: 22px; line-height: 1.25; margin: 0 0 6px; }
.site #how .steps p { font-size: 15px; line-height: 1.6; max-width: 58ch; color: var(--muted); }
.site #how .steps p strong { color: var(--text); }
.site #services { background: #1a1e22; background-image: linear-gradient(105deg, #15181b, #282e34 70%, #1b2025); }
.site #services > .wrap-wide { grid-template-columns: .78fr 1.22fr; gap: 30px 9%; }
.site #services .eyebrow { margin: 0 0 5px; }
.site #services h2 { color: #f5f6f3; max-width: 12ch; }
.site #services .services { border-top-color: #50585f; }
.site #services .services li { position: relative; color: #e1e5e7; font-size: clamp(18px, 2vw, 25px); padding: 24px 0; gap: 18px; border-bottom-color: #454d54; }
.site #services .services li::before { width: 5px; height: 5px; border-radius: 0; background: #AAE633; }
.site .photos-band { padding: 58px 0; background: #f1f2ef; }
.site .photos { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; gap: 25px; align-items: start; }
.site .photos .photo { display: block; grid-column: auto; grid-row: auto; min-width: 0; margin: 0; border-radius: 0; }
.site .photo__media { display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 12px; }
.site .photo img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 12px; filter: saturate(.65); }
.site .photo figcaption { font-size: 11px; line-height: 1.6; padding-top: 16px; color: #5b646b; max-width: 40ch; }
.site .try { grid-template-columns: 1.15fr .85fr; gap: 9%; padding-inline: var(--pad); }
.site .try__say p { color: #b8c1c7; max-width: 39ch; }
.site #where { --text: #20272c; --muted: #5b656d; background: #f4f4f1; color: #20272c; padding-block: 90px; }
.site #where .eyebrow { color: #5b656d; }
.site #where .two-up { grid-template-columns: 1fr .8fr; gap: 12%; }
.site #where .addr { padding: 5px 0 5px 23px; margin-block: 28px; border-left-color: #262e34; }
.site #where .addr__line { font-size: 18px; }
.site #where .addr__map { color: #20272c; font-size: 12px; min-height: 40px; display: inline-flex; align-items: center; }
.site #where .workshop-hours { margin: 0 0 24px; padding: 20px 0; border-block: 1px solid #d7dcd7; }
.site #where .workshop-hours h3 { margin: 0 0 12px; font-size: 16px; line-height: 1.4; }
.site #where .workshop-hours p.workshop-hours__call { margin: 0; font-size: 13px; line-height: 1.6; }
.site #where .workshop-hours p.workshop-hours__call a { color: #20272c; font-weight: 650; }
.site #where .workshop-hours p.workshop-hours__booking { margin: 15px 0 0; color: #20272c; font-size: 13px; font-weight: 650; }
.site #where .cta-card { --text: #f5f6f3; --muted: #c7cdd1; background: linear-gradient(0deg, #11171aed, #11171aa3), url('/assets/img/glass-clean.jpg') center/cover; padding: 44px 34px; border: 1px solid #4a555e; color: #f5f6f3; border-radius: 16px; }
.site #where .cta-card .eyebrow { color: #c7cdd1; }
.site #where .cta-card h3 { font-size: 40px; font-weight: 500; letter-spacing: -.028em; line-height: 1.08; margin: 25px 0 15px; text-wrap: balance; }
.site #where .cta-card p { color: #c7cdd1; }
.site #where .cta-card__call { color: #c7cdd1; min-height: 44px; padding-top: 9px; }
.site #faq > .wrap-wide { grid-template-columns: .78fr 1.22fr; gap: 0 9%; }
.site #faq h2 { max-width: 9ch; }
.site #faq .faq__q summary { min-height: 76px; font-size: 14px; line-height: 1.6; padding-block: 22px; }
.site #faq .faq__q summary::after { background: linear-gradient(#27333b 0 0) center / 100% 1.5px no-repeat, linear-gradient(#27333b 0 0) center / 1.5px 100% no-repeat; }
.site #faq .faq__q[open] summary::after { background-size: 100% 1.5px, 0 100%; }
.site #faq .faq__a p { font-size: 13px; line-height: 1.9; }
.site #contact { background: #181c20; }
.site #contact h2 { font-size: clamp(48px, 6vw, 84px); }
.site #contact .contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.site #contact .contact-card { min-height: 195px; padding: 28px; background: #23292e; border-color: #434c53; border-radius: 12px; }
.site #contact .contact-card strong { font-size: clamp(18px, 1.8vw, 25px); }
.site #contact .contact-card__hours { display: block; color: #c7cdd1; font-size: 11px; line-height: 1.7; }
.site #contact .contact-card--go { background: #edf0f1; border-color: #edf0f1; }
.site #contact .contact-card--go :is(.eyebrow, strong, .tiny) { color: #202a31; }
.site #contact .contact-card--go .eyebrow::before { background: #6e901e; }
.site .site-foot { background: #101315; padding: 40px 0 32px; }
.site .site-foot .wrap-wide { grid-template-columns: 1fr 1fr; align-items: center; gap: 25px; }
.site .site-foot__nav { gap: 10px 24px; }
.site .site-foot__nav a { min-height: 44px; display: inline-flex; align-items: center; font-size: 11px; color: #bfc7cd; }
.site .site-foot__legal { grid-column: 1 / -1; color: #aab4bc; padding-top: 25px; border-color: #343b41; }
.site .mobile-quote { display: none; }

/* Static content is visible. The script opts individual items into motion only
   after observation is ready; masks animate text, never the heading container. */
.site :is(.motion-item, .motion-heading, .motion-media, .motion-line__inner) { opacity: 1; transform: none; }
.site .motion-line { display: block; overflow: hidden; padding: .08em .025em .16em; margin: -.08em -.025em -.16em; }
.site .motion-line__inner { display: block; }
.site .motion-line + .motion-line { --line-delay: 130ms; }
@media (prefers-reduced-motion: no-preference) {
  .site.motion-ready .motion-item:not(.motion-heading):not(.motion-media) {
    transition: opacity .55s ease var(--motion-delay, 0ms), transform .65s cubic-bezier(.2, .7, .3, 1) var(--motion-delay, 0ms);
  }
  .site.motion-ready .motion-item:not(.motion-heading):not(.motion-media):not(.is-revealed) { opacity: 0; transform: translateY(18px); }
  .site.motion-ready .motion-item.is-revealed { opacity: 1; transform: none; }
  .site.motion-ready .motion-heading { opacity: 1; transform: none; transition: none; }
  .site.motion-ready .motion-heading .motion-line__inner {
    transition: transform .9s cubic-bezier(.22, 1, .36, 1) calc(var(--motion-delay, 0ms) + var(--line-delay, 0ms));
  }
  .site.motion-ready .motion-heading:not(.is-revealed) .motion-line__inner { transform: translateY(110%); }
  .site.motion-ready .motion-heading.is-revealed .motion-line__inner { transform: none; }
  .site.motion-ready .photo img.motion-media { opacity: 1; transform-origin: center; transition: transform 1.1s cubic-bezier(.22, 1, .36, 1) var(--motion-delay, 0ms); }
  .site.motion-ready .photo img.motion-media:not(.is-revealed) { transform: scale(1.045); }
  .site.motion-ready .photo img.motion-media.is-revealed { transform: none; }
  .site.motion-ready #services .services li.motion-item {
    transition: opacity .65s ease var(--service-delay, 0ms), transform .85s cubic-bezier(.22, 1, .36, 1) var(--service-delay, 0ms);
  }
  .site.motion-ready #services .services li.motion-item:not(.is-revealed) { transform: translateX(-28px); }
  .site #services .services li:nth-child(2) { --service-delay: 80ms; }
  .site #services .services li:nth-child(3) { --service-delay: 160ms; }
  .site #services .services li:nth-child(4) { --service-delay: 240ms; }
  .site #services .services li:nth-child(5) { --service-delay: 320ms; }
}

@media (max-width: 1120px) {
  .site .nav { gap: 17px; }
  .site .hdr-phone { display: none; }
  .site .hero__frame { column-gap: 4%; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); }
  .site .hero__title { font-size: clamp(43px, 5.2vw, 58px); }
  .site .hero-film__caption { display: none; }
  .site .dropzone { padding: 24px; }
  .site .hero__base { flex-wrap: wrap; }
}
@media (max-width: 1020px) {
  .site .nav { display: none; }
  .site .burger { display: flex; }
  .site .site-header__actions .btn-sm { display: none; }
}
@media (max-width: 860px) {
  .bgn-brand img { width: 180px; height: auto; }
  .site .site-header .bgn-brand img { width: 108px; }
  .site { --pad: 24px; --header-height: 80px; }
  .site .site-header__inner { min-height: var(--header-height); padding-block: 4px; }
  .site .nav { display: none; }
  .site .burger { display: flex; }
  .site .drawer { top: var(--header-height); max-height: calc(100dvh - var(--header-height)); }
  .site .hero { display: block; padding: calc(var(--header-height) + 14px) 0 25px; }
  .site .hero__brand-overlay { top: calc(var(--header-height) + 180px); left: 50%; width: min(112vw, 720px); }
  .site .hero__frame { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .site .hero__copy { grid-area: 1 / 1; }
  .site .hero__title { font-size: clamp(39px, 7.8vw, 66px); line-height: .98; margin-bottom: 18px; max-width: none; }
  .site .hero__copy .eyebrow { display: flex; min-height: 44px; max-width: calc(100% - 130px); margin-bottom: 10px; font-size: 9px; }
  .site .hero__sub { font-size: 14px; line-height: 1.65; max-width: 42ch; }
  .site .hero__quote { grid-area: 2 / 1; width: 100%; max-width: 590px; justify-self: center; }
  .site .video-toggle { position: absolute; top: 0; right: 0; margin: 0; }
  .site .hero-film__caption { display: block; }
  .site .hero__base { grid-area: 3 / 1; padding-top: 20px; gap: 15px; }
  .site .hero__steps { margin: 0; gap: 10px 19px; }
  .site .hero__steps li { font-size: 10px; }
  .site .hero .dropzone { max-width: none; }
  .site .dropzone, .site .hero .dropzone, .site .dropzone--try { padding: 23px; border-radius: 15px; }
  .site .quote-panel__top { margin-bottom: 15px; }
  .site .dropzone__icon { display: none; }
  .site .dropzone h2.dropzone__big, .site .hero .dropzone h2.dropzone__big { padding-right: 0; font-size: 27px; margin-bottom: 10px; }
  .site .dropzone h2 br { display: none; }
  .site .dropzone p.dropzone__sub { max-width: 42ch; margin-bottom: 17px; font-size: 12px; }
  .site .dropzone__actions { grid-template-columns: 1.35fr 1fr; gap: 8px; }
  .site .upload-button { padding-inline: 14px; gap: 6px; min-height: 52px; font-size: 13px; }
  .site .upload-button span { font-size: 19px; }
  .site .camera-button { padding-inline: 9px; font-size: 11px; }
  .site .dropzone p.quote-panel__privacy { margin-top: 15px; padding-top: 12px; }
  .site .hero__note { margin: 13px 4px 0; font-size: 10px; }
  .site .band { padding: 62px 0; }
  .site .band h2 { font-size: 38px; }
  .site .problem .wrap-wide { grid-template-columns: 1fr; gap: 24px; }
  .site .problem h2 { margin: 8px 0 0; font-size: 36px; max-width: 18ch; }
  .site .problem p.pull { font-size: 18px; max-width: none; }
  .site #how > .wrap-wide, .site #faq > .wrap-wide { display: block; }
  .site #how h2 { max-width: 18ch; margin-bottom: 28px; }
  .site #how .steps li { padding-left: 44px; }
  .site #services > .wrap-wide { display: block; }
  .site #services .services__intro { margin-bottom: 28px; }
  .site #services .services li { font-size: 21px; }
  .site .photos { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .site .try { grid-template-columns: 1fr; gap: 28px; padding-inline: var(--pad); }
  .site .try__say h2 { font-size: 44px; }
  .site .try .dropzone { max-width: 590px; justify-self: center; }
  .site #where { padding-block: 62px; }
  .site #where .two-up { grid-template-columns: 1fr; gap: 32px; }
  .site #where .cta-card { padding: 34px; }
  .site #where .cta-card h3 { font-size: 35px; }
  .site #faq h2 { max-width: none; margin-bottom: 28px; }
  .site #contact .contact-grid { grid-template-columns: 1fr; }
  .site #contact .contact-card { min-height: 165px; padding: 26px; gap: 15px; }
  .site #contact .contact-card strong { font-size: 25px; }
  .site .site-foot { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  .site .site-foot .wrap-wide { grid-template-columns: 1fr; }
  .site .site-foot__nav { justify-content: start; }
  .site .mobile-quote { position: fixed; z-index: 45; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: .85fr 1.15fr; gap: 12px; padding: 10px 18px calc(10px + env(safe-area-inset-bottom, 0px)); background: #121619f5; border-top: 1px solid #4a535a; backdrop-filter: blur(14px); box-shadow: 0 -8px 28px #0002; }
  .site .mobile-quote .btn { min-height: 46px; padding: 10px 18px; border-radius: 7px; justify-content: space-between; }
  .site .mobile-quote__call { display: flex; align-items: center; justify-content: center; min-height: 46px; font-size: 11px; font-weight: 600; color: #e8ecee; text-decoration: none; }
}
@media (max-width: 430px) {
  .site { --pad: 18px; }
  .site .hero__title { font-size: clamp(34px, 10vw, 43px); }
  .site .hero__frame { gap: 18px; }
  .site .hero__sub { font-size: 13px; }
  .site .dropzone, .site .hero .dropzone, .site .dropzone--try { padding: 20px; }
  .site .dropzone h2.dropzone__big, .site .hero .dropzone h2.dropzone__big { font-size: 25px; }
  .site .dropzone h2 br { display: initial; }
  .site .dropzone__actions, .site .hero .dropzone__actions { grid-template-columns: 1fr; }
  .site .camera-button { min-height: 44px; }
  .site .quote-panel__top { gap: 6px; }
  .site .quote-panel__time { font-size: 9px; }
  .site .hero-film__caption { display: none; }
  .site .hero__steps { gap: 8px 14px; }
  .site .hero__steps li { font-size: 9px; gap: 6px; }
  .site .band h2 { font-size: 35px; }
  .site .photos { gap: 16px; }
  .site .photo figcaption { font-size: 10px; }
  .site #where .cta-card { padding: 29px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .site *, .site *::before, .site *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .site :is(.motion-item, .motion-heading, .motion-media, .motion-line__inner) { opacity: 1 !important; transform: none !important; }
  .site .glass-shine { opacity: 0; }
}
@media (forced-colors: active) {
  .site .hero__outline { color: CanvasText; -webkit-text-stroke: 0; }
  .site :is(.heading-accent, .heading-punctuation, .hero__punctuation) { color: CanvasText; }
  .site .btn, .site .video-toggle, .site .camera-button { border: 1px solid ButtonText; }
  .site .bgn-brand { forced-color-adjust: none; background: #111315; }
}

/* Print: the scroll-reveal must never hide body copy on paper.
   The reveal hides any .motion-item the observer has not reached yet, and print
   renders the current computed style - so a customer who lands on the page and
   hits Ctrl+P without scrolling would otherwise print a page missing most of the
   services, workshop and FAQ text. There is no other print stylesheet in the
   project. Found by the T-BAS-056 security review (Peter, F1). */
@media print {
  .site :is(.motion-item, .motion-heading, .motion-media, .motion-line__inner) {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .site .motion-line { overflow: visible; }

  /* The print page is about 816px wide, so the mobile breakpoint applies and the
     fixed quote bar and header painted over the body text on all 11 pages -
     "subject to change" printed as subCjaellcthtetowocrhkashnogpe. Anything
     fixed has to come out of the flow, and the tap-only chrome has no meaning
     on paper. Measured by printing to PDF, not by reading this file. */
  .site .site-header { position: static; }
  .site :is(.mobile-quote, .drawer, .burger, .video-toggle, .nav, .site-header .btn, [role="status"], .dropzone__actions,
    .dropzone__hint, .hero__brand-overlay, .hero-film, .hero__shatter, .hero__scrim) { display: none !important; }
  /* The hero reserves calc(var(--header-height) + 14px) for a header that is no
     longer out of flow on paper - about a third of page one, left blank. */
  .site .hero { padding-top: 0; }
  .site .site-foot { padding-bottom: 0; }

  /* Keep a question with its answer, and a card whole. */
  .site :is(details, .steps li, .contact-card, .photo, .services > li,
    .workshop-hours) { break-inside: avoid; }
  .site :is(h2, h3) { break-after: avoid; }

  /* Half the page is light text on a dark background, and Chrome does not print
     backgrounds unless the reader ticks "Background graphics" - so that copy came
     out as near-white ink on white paper. Measured off the PDF's own content
     stream: 746 of 6,225 text-drawing operations were below WCAG AA on white and
     498 of those were effectively invisible (#e0e5e8 and #e1e5e7 at 1.27:1,
     #d9dfe3 at 1.34:1, #c7cdd1 at 1.61:1). Force white paper and dark ink both
     ways, so it reads whether or not backgrounds are printed. */
  .site :is(.hero, .band, .try, .try-band, .cta-card, .contact-card, .site-foot,
    .photos-band, #services, #where, #contact) {
    background: #fff !important;
    background-image: none !important;
  }
  .site :is(.hero, .hero__copy, .hero__sub, .hero__note, .hero__where, .hero-film__caption,
    .hero__steps, .hero__steps li, #services, .services > li, .try__say, #where .cta-card,
    #contact .contact-card, .site-foot) { color: #1b2126 !important; }
  .site :is(.try__say, #where .cta-card, #contact .contact-card, .site-foot, #services) :is(h2, h3, p,
    strong, span, a, dt, dd, li, .eyebrow, .addr__line) { color: #1b2126 !important; }
  .site .eyebrow { color: #46515a !important; }
  .site * { box-shadow: none !important; text-shadow: none !important; }

  /* design.css gives the dark sections their own --text/--muted, so recolouring
     individual selectors leaves every var() consumer behind. Redefine the
     properties instead - one rule, no selector chase. */
  .site,
  .site :is(#services, #try, #where, #contact, .site-foot, .cta-card, .contact-card,
    .band, .try, .try-band) {
    --text: #1b2126 !important;
    --muted: #46515a !important;
    --line: #9aa4ad !important;
  }
  .site :is(#services, #try, #where, #contact) .eyebrow { color: #46515a !important; }
  .site .ticker__track :is(span, b) { color: #46515a !important; }

  /* Naming the dark sections one by one missed three - .site itself
     (glass-now.css:17, #111315), .problem (design.css:55, #0b0b0b) and the
     header - so 25 large dark panels still printed. Dark ink on those is
     invisible, and an audit that scores ink against WHITE paper cannot see it:
     the metric passed a page it should have failed. Neutralise every background
     instead of listing sections, so the paper is provably white and the ink
     audit's assumption is actually true. Also drops ink coverage from most of
     a sheet to almost nothing. */
  html, body, .site { background: #fff !important; }
  .site *, .site *::before, .site *::after {
    background-color: transparent !important;
    background-image: none !important;
  }
  .site :is(.hero__title, .hero__outline, .hero__punctuation) {
    color: #111 !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
  }
}