/* Trase — studio black. Layout: full-bleed sections on a 6.35vw gutter,
   hairline rules between blocks, condensed display type at poster scale.
   Colours and sizes are set once here as tokens. */
:root {
  --bg: #000;
  --bg-raised: #0a0a0a;
  --fg: #fff;
  --text: #9a9a9a;      /* body copy */
  --text-soft: #b8b8b8; /* nav, footer links */
  --dim: #858585;       /* labels: 5.7:1 on black (was #6a6a6a, 3.9:1) */
  --on-photo: #d0d0d0;  /* small text over header photos */
  --placeholder: #7c7c7c; /* hint text in empty form fields: 4.7:1 */
  --ghost: #5c5c5c;     /* big step numbers: 3.1:1 (was #262626, 1.4:1) */
  --line: #1c1c1c;      /* hairlines */
  --line-strong: #333;  /* tag + input borders */

  --display: "Bebas Neue", "Oswald", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --sans: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;

  --gutter: max(16px, 6.35vw);
  --header-h: clamp(64px, 5.3vw, 112px);
  --section: clamp(64px, 6.5vw, 140px);

  --fs-body: clamp(15px, 1.05vw, 19px);
  --fs-label: clamp(11.5px, 0.74vw, 13px);
  --fs-nav: clamp(11px, 0.8vw, 15px);

  --ease-out: cubic-bezier(.23, 1, .32, 1); /* strong ease-out for anything that enters or answers a press */
  --ease-in-out: cubic-bezier(.77, 0, .175, 1); /* strong ease-in-out for things that move across the screen */
  --error: #e06060;     /* error text: 6:1 on black */
  --error-line: #b33;   /* error border: 3.4:1 */

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
[hidden] { display: none !important; }

.wrap { padding-inline: var(--gutter); }
.line { display: block; }

/* ---------- type ---------- */
.h-hero, .h-page, .h-contact, .h-section, .h-cta, .h-sub, .h-card, .h-standard,
.feature-title, .price, .stat-value {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0;
  color: var(--fg);
}
.h-hero    { font-size: clamp(4.5rem, 18.6vw, 26rem); line-height: 0.86; letter-spacing: -0.012em; }
.h-page    { font-size: clamp(3.6rem, 10.5vw, 14rem); }
.h-contact { font-size: clamp(4rem, 13vw, 17rem); line-height: 0.9; }
.h-section { font-size: clamp(3rem, 7.6vw, 10rem); }
.h-cta     { font-size: clamp(2.6rem, 6.8vw, 9rem); line-height: 0.98; text-wrap: balance; }
.h-sub     { font-size: clamp(2.4rem, 5vw, 6.5rem); }
.h-card    { font-size: clamp(2rem, 3.2vw, 4.2rem); line-height: 0.95; }
.h-standard{ font-size: clamp(1.8rem, 3vw, 4rem); line-height: 0.95; }
.price     { font-size: clamp(1.7rem, 2.65vw, 3.5rem); line-height: 1; white-space: nowrap; }

.label {
  font-size: var(--fs-label);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--dim);
  line-height: 1.5;
}
.body { color: var(--text); max-width: 34em; }
.body-wide { max-width: 62ch; }
.lead { color: var(--text); max-width: 31em; }
.body + .body { margin-top: 1.4em; }

.tag {
  display: inline-block;
  border: 1px solid var(--line-strong);
  color: var(--dim);
  font-size: var(--fs-label);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 0.55em 1.25em;
  line-height: 1.4;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--fg);
  background: transparent;
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, scale .16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--fg); color: var(--bg); } }
.btn:disabled { opacity: .5; cursor: wait; }
.btn-xs { font-size: var(--fs-label); padding: 1.05em 1.75em; border-color: var(--line-strong); color: var(--text-soft); font-weight: 400; }
@media (hover: hover) and (pointer: fine) { .btn-xs:hover { border-color: var(--fg); } }
.btn-sm { font-size: var(--fs-nav); padding: 1.05em 2em; }
.btn-md { font-size: clamp(12px, 0.85vw, 16px); padding: 1.55em 3.1em; }
.btn-lg { font-size: clamp(12px, 0.9vw, 17px); padding: 2em 3.8em; }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease;
}
body:not(.has-hero) .site-header,
.site-header.is-solid { background: var(--bg); border-bottom-color: var(--line); }
.header-inner { height: var(--header-h); display: flex; align-items: center; gap: clamp(20px, 2.7vw, 56px); }
.brand { margin-right: auto; display: block; }
.logo { height: clamp(22px, 2.6vw, 54px); width: auto; }
.nav { display: flex; gap: clamp(20px, 2.7vw, 56px); }
.nav a {
  font-size: var(--fs-nav); letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-soft);
  padding-block: 0.4em; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--fg); } }
.nav a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--fg); }

.menu-toggle {
  display: none; align-items: center; gap: 12px; min-height: 44px;
  background: none; border: 0; padding: 10px 0; cursor: pointer;
  font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase;
}
.menu-toggle-icon { width: 22px; height: 8px; border-block: 1px solid var(--fg); transition: transform .25s ease; }
.menu-open .menu-toggle-icon { transform: scaleY(0.12); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 40; background: var(--bg);
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 24px);
  overflow-y: auto;
}
.mobile-menu nav { display: flex; flex-direction: column; align-items: flex-start; }
.mobile-menu nav a:not(.btn) {
  font-family: var(--display); font-size: clamp(3rem, 15vw, 6rem); line-height: 1.02;
  text-transform: uppercase; width: 100%; border-bottom: 1px solid var(--line); padding-block: 0.12em;
}
.mobile-book { margin-top: 32px; font-size: 13px; padding: 1.3em 2.6em; }

/* ---------- home hero ---------- */
.home-hero {
  position: relative; overflow: hidden;
  min-height: clamp(600px, 100svh, 1400px);
  display: flex; align-items: stretch;
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 26%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.7) 100%), linear-gradient(90deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.3) 45%, rgba(0,0,0,0) 72%); }
.home-hero-inner {
  position: relative; width: 100%;
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(40px, 6vw, 130px));
  padding-bottom: clamp(48px, 6.4vw, 140px);
}
.home-hero-foot { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(24px, 4.4vw, 90px); }
.hero-sub {
  max-width: 24em; color: var(--text-soft);
  font-size: clamp(12px, 0.95vw, 18px); letter-spacing: 0.24em; text-transform: uppercase; line-height: 1.55;
}
.scroll-cue {
  position: absolute; right: calc(var(--gutter) * 0.42); bottom: clamp(40px, 2.5vw, 60px);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--dim); font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase;
}
.scroll-cue span { writing-mode: vertical-rl; }
.scroll-cue::after { content: ""; width: 1px; height: clamp(40px, 3.6vw, 70px); background: var(--dim); }

@media (prefers-reduced-motion: no-preference) {
  .h-hero .line, .h-page .line, .h-contact .line { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
  .h-hero .line:nth-child(2), .h-page .line:nth-child(2) { animation-delay: .12s; }
  .home-hero-foot, .page-hero .lead { animation: fade 1s .35s ease both; }
  .hero-bg { animation: settle 2.4s cubic-bezier(.2,.7,.2,1) both; }
  .feature-media img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
  @media (hover: hover) and (pointer: fine) { .feature:hover .feature-media img { transform: scale(1.03); } }
}
@keyframes rise { from { opacity: 0; transform: translateY(0.25em); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }

/* ---------- inner page hero ---------- */
.page-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.page-hero.has-image .hero-bg::after { background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 26%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.7) 100%), linear-gradient(90deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.3) 45%, rgba(0,0,0,0) 72%); }
.page-hero-inner {
  position: relative;
  display: flex; flex-direction: column; gap: clamp(18px, 1.6vw, 34px);
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(40px, 3.3vw, 80px));
  padding-bottom: clamp(56px, 5.5vw, 120px);
}
.page-hero .label { margin-bottom: -0.4em; }
.page-hero .lead { margin-top: clamp(14px, 2.4vw, 50px); }
.page-contact .page-hero-inner { padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(48px, 5.5vw, 120px)); }
.page-contact .page-hero .lead { margin-top: clamp(24px, 3.6vw, 80px); }

/* ---------- home: services features ---------- */
.home-services { padding-top: clamp(40px, 4vw, 90px); }
.home-services > .wrap > .label { margin-bottom: clamp(40px, 5.6vw, 120px); }
.features { border-bottom: 1px solid var(--line); }
.feature {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}
.feature-copy {
  min-width: 0;
  padding-block: clamp(40px, 4.8vw, 110px);
  padding-right: clamp(24px, 4vw, 90px);
  display: flex; flex-direction: column; align-items: flex-start; gap: clamp(20px, 2.4vw, 46px);
}
.feature.is-flipped .feature-copy { order: 2; padding-left: clamp(24px, 4.3vw, 90px); padding-right: 0; }
.feature-title { display: flex; align-items: baseline; gap: 0.38em; font-size: clamp(2.6rem, 5vw, 6.6rem); }
.feature-title .num { color: var(--ghost); }
@media (hover: hover) and (pointer: fine) { .feature-title a:hover { color: var(--text-soft); } }
.feature-copy .body { max-width: 26em; }
.feature-media { position: relative; aspect-ratio: 873 / 680; overflow: hidden; background: var(--bg-raised); max-width: 100%; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- stats ---------- */
.stats { border-block: 1px solid var(--line); margin-top: clamp(64px, 4.3vw, 100px); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat {
  padding: clamp(48px, 5.3vw, 120px) 0 clamp(56px, 6.4vw, 140px) clamp(16px, 2.15vw, 48px);
  display: flex; flex-direction: column; gap: clamp(14px, 1.5vw, 30px);
  min-width: 0;
}
.stat + .stat { border-left: 1px solid var(--line); }
.stat-value { font-size: clamp(2.8rem, 4.5vw, 6rem); line-height: 1; }

/* ---------- CTA ---------- */
.cta { padding-block: clamp(64px, 4.3vw, 100px) clamp(64px, 4.3vw, 100px); }
.cta-inner {
  border-top: 1px solid var(--line);
  padding-top: clamp(56px, 5.8vw, 120px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px;
}
.cta-copy { display: flex; flex-direction: column; gap: clamp(18px, 1.6vw, 34px); min-width: 0; }
.cta-copy .body { margin-top: clamp(12px, 2vw, 40px); }
.cta-inner .btn { margin-bottom: 0.2em; }
.page-services .cta-inner, .page-about .cta-inner { border-top: 0; }
.page-services .cta { border-top: 1px solid var(--line); }

/* ---------- services page ---------- */
.svc { padding-top: clamp(64px, 4.8vw, 110px); }
.svc + .svc { border-top: 1px solid var(--line); margin-top: clamp(64px, 4.5vw, 100px); }
.svc .wrap > .label { margin-bottom: clamp(16px, 1.4vw, 30px); }
.svc .h-section + .body { margin-top: clamp(28px, 3.5vw, 72px); }

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(56px, 5.4vw, 120px); }
.tier {
  position: relative; min-width: 0;
  display: flex; flex-direction: column; gap: clamp(16px, 1.4vw, 28px);
  padding: clamp(40px, 6.2vw, 130px) clamp(20px, 2.65vw, 56px) clamp(40px, 2.7vw, 60px);
}
.tiers-plain .tier { padding-top: clamp(32px, 2.8vw, 60px); }
.tiers-4 { grid-template-columns: repeat(4, 1fr); }
.tiers-4 .tier { padding-inline: clamp(18px, 2vw, 44px); }
@media (min-width: 901px) and (max-width: 1250px) {
  .tiers-4 .tier { padding-inline: 16px; }
  .tiers-4 .tier:first-child { padding-left: 0; }
  .tiers-4 .h-card { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
  .tiers-4 .badge { font-size: 11.5px; letter-spacing: .18em; }
}
.tier + .tier { border-left: 1px solid var(--line); }
.tier .label { margin-bottom: -0.3em; }
.tier .h-card + .body { margin-top: 0.4em; }
.badge {
  position: absolute; top: clamp(20px, 2.7vw, 56px);
  background: var(--fg); color: var(--bg);
  font-size: var(--fs-label); letter-spacing: 0.32em; text-transform: uppercase;
  padding: 0.6em 1em; font-weight: 500;
}
.dash-list { margin-top: auto; padding-top: clamp(20px, 2.4vw, 50px); display: grid; gap: 0.55em; color: var(--text-soft); font-size: 0.93em; }
.dash-list li { display: flex; gap: 1.1em; }
.dash-list li::before { content: ""; flex: 0 0 1em; height: 1px; background: var(--dim); margin-top: 0.8em; }
.price-row {
  margin-top: auto; border-top: 1px solid var(--line);
  padding-top: clamp(24px, 2.2vw, 46px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.dash-list + .price-row { margin-top: clamp(24px, 2.6vw, 54px); }
.tiers-plain .tier .body { margin-bottom: clamp(24px, 2.2vw, 46px); }

.options { margin-top: clamp(48px, 5.4vw, 120px); border-bottom: 1px solid var(--line); }
.option {
  display: grid; grid-template-columns: minmax(0, 27.5fr) minmax(0, 52fr) auto; gap: clamp(20px, 3vw, 60px);
  border-top: 1px solid var(--line);
  padding-block: clamp(32px, 2.6vw, 56px);
  align-items: start;
}
.option-name { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.2vw, 24px); }
.option-text { max-width: 44em; }
.option-price { display: flex; flex-direction: column; align-items: flex-end; gap: clamp(14px, 1.3vw, 26px); }

.pricing-note { border-top: 1px solid var(--line); margin-top: clamp(48px, 4.3vw, 90px); }
.pricing-note p { color: var(--dim); font-size: 0.9em; padding-block: clamp(32px, 3.2vw, 66px); }

/* ---------- gallery ---------- */
.gallery { padding-block: clamp(48px, 5vw, 110px) 0; }
.gallery-grid { columns: 2 320px; column-gap: clamp(12px, 1.6vw, 32px); }
.shot { break-inside: avoid; margin-bottom: clamp(24px, 2.6vw, 56px); }
.shot-btn { display: block; width: 100%; padding: 0; border: 0; background: var(--bg-raised); cursor: zoom-in; overflow: hidden; }
.shot-btn img { width: 100%; height: auto; transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .3s; }
@media (hover: hover) and (pointer: fine) { .shot-btn:hover img { transform: scale(1.02); } }
.shot figcaption { margin-top: 14px; font-size: var(--fs-label); letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim); }
.lightbox {
  position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.94);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 64px) 16px calc(env(safe-area-inset-bottom, 0px) + 32px);
}
.lightbox figure { display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 0; }
.lightbox img { max-height: 78vh; max-height: 78svh; width: auto; object-fit: contain; } /* svh: the height with the browser bars showing */
.lightbox figcaption { color: var(--text-soft); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; }
.lightbox button { background: none; border: 1px solid var(--line-strong); padding: 12px 16px; cursor: pointer; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) { .lightbox button:hover { border-color: var(--fg); } }
.lb-close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 16px); right: 16px; }

/* ---------- about ---------- */
.story { padding-block: clamp(64px, 4.3vw, 100px) clamp(64px, 4.3vw, 100px); }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 7vw, 150px); align-items: start; }
.story-copy .label { margin-bottom: clamp(16px, 1.6vw, 34px); }
.story-copy .h-sub { margin-bottom: clamp(32px, 3.8vw, 80px); }
.story-copy .body { max-width: none; }
.story-media img { width: 100%; aspect-ratio: 810 / 607; object-fit: cover; }
.standards { border-top: 1px solid var(--line); padding-top: clamp(56px, 4.6vw, 100px); }
.standards .h-section { margin-top: clamp(14px, 1.2vw, 26px); }
.standards-list { margin-top: clamp(48px, 6.5vw, 140px); }
.standards-list li {
  display: grid; grid-template-columns: minmax(0, 10.6fr) minmax(0, 39.7fr) minmax(0, 37fr); gap: 0;
  align-items: start; border-top: 1px solid var(--line);
  padding-block: clamp(32px, 2.8vw, 60px) clamp(36px, 3.6vw, 76px);
}
.standards-list .num { font-family: var(--display); font-size: clamp(1.8rem, 3vw, 4rem); line-height: 0.95; color: var(--ghost); }
.standards-list .body { max-width: none; }
.page-about .stats { margin-top: 0; }

/* ---------- contact ---------- */
.contact { padding-block: clamp(56px, 4.6vw, 100px) clamp(72px, 6vw, 130px); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 30.8fr) minmax(0, 61.8fr); gap: clamp(40px, 6.6vw, 130px); }
.contact-info .label, .contact-form-wrap > .label { margin-bottom: clamp(20px, 2.6vw, 52px); }
.info { display: grid; gap: clamp(22px, 2.6vw, 50px); }
.info dt { font-size: var(--fs-label); letter-spacing: .32em; text-transform: uppercase; color: var(--dim); margin-bottom: 0.7em; }
.info dd { color: var(--fg); overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .info dd a:hover { color: var(--text-soft); } }
.contact-note { border-top: 1px solid var(--line); margin-top: clamp(28px, 2.6vw, 50px); padding-top: clamp(28px, 2.6vw, 50px); color: var(--dim); font-size: 0.85em; }
.form-intro { margin-top: -0.6em; margin-bottom: clamp(32px, 3.3vw, 64px); max-width: none; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 2.6vw, 52px) clamp(16px, 1.6vw, 32px); }
.field { display: flex; flex-direction: column; gap: clamp(10px, 0.9vw, 18px); min-width: 0; }
.field.span-2 { grid-column: 1 / -1; }
.field label { font-size: var(--fs-label); letter-spacing: .32em; text-transform: uppercase; color: var(--text-soft); }
.field label span { color: var(--dim); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--fg);
  background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: 0;
  padding: 1.05em 1.4em; transition: border-color .2s ease;
  -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 9em; }
.field ::placeholder { color: var(--placeholder); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--fg); }
.field [aria-invalid="true"] { border-color: var(--error-line); }
.select { position: relative; }
.select::after { content: ""; position: absolute; right: 1.6em; top: 50%; width: 7px; height: 7px; border-right: 1px solid var(--text-soft); border-bottom: 1px solid var(--text-soft); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.select select { padding-right: 3.5em; cursor: pointer; }
.select option, .select optgroup { background: var(--bg-raised); color: var(--fg); }
.enquiry .btn { margin-top: clamp(28px, 2.6vw, 52px); }
.form-error { margin-top: 24px; color: #e06060; font-size: 0.9em; }
.form-done { border: 1px solid var(--line-strong); padding: clamp(24px, 3vw, 56px); display: grid; gap: 20px; }
.form-done:focus { outline: none; }
.form-done strong { color: var(--fg); font-weight: 500; }
.summary { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--sans); font-size: 0.9em; color: var(--text-soft); background: var(--bg-raised); border: 1px solid var(--line); padding: 1.2em 1.4em; }
.done-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-top: clamp(56px, 5.4vw, 116px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 2.55fr) minmax(0, 5.1fr) auto; gap: 32px; }
.logo-footer { height: clamp(22px, 2.1vw, 44px); }
.footer-tagline { margin-top: clamp(14px, 1.3vw, 26px); font-size: clamp(12px, 0.85vw, 16px); letter-spacing: .26em; text-transform: uppercase; color: var(--text-soft); }
.footer-address { margin-top: clamp(14px, 1.6vw, 32px); color: var(--dim); font-size: 0.85em; }
.footer-col .label { margin-bottom: clamp(18px, 1.6vw, 32px); }
.footer-col ul { display: grid; gap: clamp(10px, 1.1vw, 20px); }
.footer-col a { font-size: clamp(13px, 0.9vw, 17px); letter-spacing: .02em; color: var(--text-soft); transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) { .footer-col a:hover { color: var(--fg); } }
.footer-bottom {
  margin-top: clamp(48px, 4.6vw, 96px); border-top: 1px solid var(--line);
  padding-block: clamp(24px, 2vw, 40px) clamp(32px, 3vw, 60px);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.footer-bottom p { font-size: var(--fs-label); letter-spacing: .3em; text-transform: uppercase; color: var(--dim); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .option { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  .option-price { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; margin-bottom: 16px; }
}
@media (max-width: 900px) {
  .nav, .header-book { display: none; }
  .menu-toggle { display: inline-flex; }
  .feature, .story-grid, .contact-grid { grid-template-columns: 1fr; }
  .feature.is-flipped .feature-copy { order: 0; padding-left: 0; }
  .feature-copy { padding-right: 0; padding-bottom: 32px; }
  .feature-media { margin-bottom: 40px; }
  .tiers { grid-template-columns: 1fr; }
  .tier, .tiers-plain .tier { padding-inline: 0; padding-top: 40px; }
  .tier + .tier { border-left: 0; border-top: 1px solid var(--line); }
  .tier.is-featured { padding-top: 88px; }
  .badge { top: 36px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .stat:nth-child(odd) { padding-left: 0; }
  .cta-inner { grid-template-columns: 1fr; justify-items: start; }
  .standards-list li { grid-template-columns: 3.2em minmax(0, 1fr); row-gap: 14px; }
  .standards-list li .body { grid-column: 2; }
  .contact-grid { gap: 56px; }
}
@media (max-width: 600px) {
  .option { grid-template-columns: 1fr; }
  .option-price { grid-column: 1; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-contact { grid-column: 1 / -1; }
  .home-hero-foot .btn { width: 100%; }
  .scroll-cue { display: none; }
  .price-row .btn, .option-price .btn { padding-inline: 1.4em; }
  .lightbox { grid-template-columns: 1fr 1fr; }
  .lightbox figure { grid-column: 1 / -1; grid-row: 1; }
  .lb-prev { justify-self: start; } .lb-next { justify-self: end; }
}
@media (min-width: 901px) {
  .tiers-4 .price-row { flex-direction: column; align-items: flex-start; }
}
.footer-addr { line-height: 1.6; }
.svc-note { margin-top: clamp(20px, 2vw, 40px); padding-top: clamp(16px, 1.6vw, 30px); border-top: 1px solid var(--line); color: var(--dim); font-size: 0.85em; }
.home-hero-top { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 40px); }
.slogan { display: flex; align-items: center; flex-wrap: wrap; gap: 0.9em 1.3em; text-transform: uppercase; }
.slogan-bar { width: 1px; height: 1.1em; background: currentColor; opacity: .5; }
.hero-slogan { color: var(--fg); font-size: clamp(12px, 1.05vw, 20px); letter-spacing: .42em; font-weight: 500; }
.footer-slogan { margin-top: clamp(14px, 1.3vw, 26px); color: var(--dim); font-size: clamp(11px, .75vw, 14px); letter-spacing: .36em; }
@media (prefers-reduced-motion: no-preference) { .hero-slogan { animation: fade 1s .2s ease both; } }
@media (max-width: 600px) {
  .hero-slogan { font-size: 11px; letter-spacing: .26em; gap: .8em; }
  .logo { height: 20px; }
}

/* ---------- before / after sliders (home page + service pages) ----------
   The after photo sits in a window that slides with the line. Everything that moves while you drag
   moves by transform, so dragging never repaints the photos. */
.compare {
  --pos: 50%;
  --handle-y: 76%; /* low, so the handle never sits on the subject in the middle of the photo */
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--bg);
  color: var(--fg);
  -webkit-user-select: none;
          user-select: none;
  -webkit-touch-callout: none;
}
.js .compare {
  cursor: ew-resize;
  touch-action: pan-y pinch-zoom; /* a sideways drag moves the line; up and down still scrolls, and pinch still zooms */
}
/* home: the full-width slider, as tall as the screen allows without pushing its caption out of sight */
.compare--full { --handle-y: 70%; aspect-ratio: auto; height: clamp(360px, min(76svh, 60vw), 860px); }
/* only the slider itself takes the pointer, so a finger's implicit capture is never handed between elements */
.compare__set,
.compare__after { pointer-events: none; }
.compare__set { position: absolute; inset: 0; }
.js .compare__set:not(.is-current) { opacity: 0; visibility: hidden; transition: opacity 0s linear .24s, visibility 0s linear .24s; }
.js .compare__set.is-current { z-index: 1; transition: opacity .24s var(--ease-out); }
.compare__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%); /* a pair can set focus in content.js to keep its subject in frame when cropped */
  pointer-events: none;
}
.compare__after { position: absolute; inset: 0; overflow: hidden; transform: translateX(var(--pos)); will-change: transform; }
.compare__after > .compare__img { transform: translateX(calc(var(--pos) * -1)); will-change: transform; }
/* GSAP's Draggable moves this invisible point; the line follows it */
.compare__proxy { position: absolute; top: 0; left: 0; width: 0; height: 0; visibility: hidden; pointer-events: none; }
.compare__divider { position: absolute; inset: 0; z-index: 3; transform: translateX(var(--pos)); will-change: transform; pointer-events: none; }
.compare__divider::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -0.5px; width: 1px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.45);
}
.compare__handle {
  position: absolute; top: var(--handle-y); left: 0;
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--fg); border-radius: 50%;
  background: rgba(0, 0, 0, 0.7); color: var(--fg);
  transition: background-color .16s var(--ease-out), color .16s var(--ease-out), transform .16s var(--ease-out);
}
.compare__tag {
  position: absolute; top: var(--handle-y); margin-top: -14px;
  padding: 2px calc(10px - .3em) 2px 10px; /* the letter spacing after the last letter counts as padding */
  background: rgba(0, 0, 0, 0.82);
  font-size: var(--fs-label); font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
  line-height: 24px; white-space: nowrap;
  transition: opacity .16s var(--ease-out);
}
.compare__tag--before { right: calc(100% + 40px); }
.compare__tag--after { left: 40px; }
/* a tag that would run off the edge steps out of the way */
.compare.hide-before .compare__tag--before,
.compare.hide-after .compare__tag--after { opacity: 0; }
.compare.is-dragging .compare__handle { background: var(--fg); color: var(--bg); transform: scale(1.06); }
@media (hover: hover) and (pointer: fine) { .js .compare:hover .compare__handle { background: var(--fg); color: var(--bg); } }
/* the arrow keys move the line through this hidden slider. Its focus ring is drawn on the handle,
   and it sits at the handle's height so tabbing to it scrolls the handle into view. */
.compare__range { display: none; }
.js .compare__range { display: block; position: absolute; top: var(--handle-y); left: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } /* keyboard only: a press anywhere is the slider's */
.compare__range:focus-visible ~ .compare__divider .compare__handle {
  outline: 2px solid var(--fg); outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 7px rgba(0, 0, 0, 0.6);
}

/* the caption under each before and after: the car, then what was done and how long it took */
.compare-figure { display: flex; flex-direction: column; gap: 14px; }
.job { display: flex; flex-direction: column; gap: 2px; }
.job__car { color: var(--fg); font-size: clamp(16px, 1.2vw, 21px); font-weight: 500; line-height: 1.35; }
.job__detail { color: var(--text); line-height: 1.45; }

/* home: before and after. The heading sits above the photo and the caption under it, so nothing covers
   the work itself; with more than one job, the buttons beside the caption switch between them */
.showcase-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px;
  padding-block: clamp(64px, 5.5vw, 120px) clamp(28px, 2.6vw, 48px);
}
.showcase-head .body { max-width: 24em; }
.showcase-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 24px 40px; padding-top: clamp(18px, 1.6vw, 28px); }
.showcase-jobs { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.showcase-link { font-size: var(--fs-label); letter-spacing: .26em; text-transform: uppercase; color: var(--text-soft); border-bottom: 1px solid var(--line-strong); padding-bottom: 6px; transition: color .2s ease, border-color .2s ease; }
@media (hover: hover) and (pointer: fine) { .showcase-link:hover { color: var(--fg); border-color: var(--fg); } }
.showcase-switch { display: inline-grid; grid-auto-flow: column; gap: 1px; border: 1px solid var(--dim); background: var(--dim); } /* one button per job, side by side */
.segment { position: relative; display: flex; margin: 0; cursor: pointer; }
.segment input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segment span {
  flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; padding: 6px 18px;
  background: var(--bg); color: var(--fg);
  font-size: var(--fs-label); font-weight: 500; letter-spacing: .24em; text-transform: uppercase; line-height: 1.2; text-align: center;
  transition: background-color .16s var(--ease-out), color .16s var(--ease-out);
}
.segment input:checked + span { background: var(--fg); color: var(--bg); }
.segment input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: -6px; }
.segment input:checked:focus-visible + span { outline-color: var(--bg); }
@media (hover: hover) and (pointer: fine) { .segment:hover input:not(:checked) + span { background: #262626; } }
@media (forced-colors: active) {
  .compare__divider::before { forced-color-adjust: none; background: CanvasText; }
  .segment input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}
/* the four boxes that sat under the old drawn slider (off unless content.js → home.compare.showBoxes is true) */
.benefits { border-block: 1px solid var(--line); margin-top: clamp(48px, 4.5vw, 96px); }
.benefits-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.benefit { padding: clamp(28px, 2.6vw, 56px) clamp(16px, 2.15vw, 48px); display: grid; gap: 10px; align-content: start; min-width: 0; }
.benefit:first-child { padding-left: 0; }
.benefit + .benefit { border-left: 1px solid var(--line); }
.benefit-title { font-family: var(--display); font-size: clamp(1.8rem, 2.8vw, 3.6rem); line-height: 1; text-transform: uppercase; }
@media (max-width: 700px) {
  .compare:not(.compare--full) { aspect-ratio: 4 / 3; }
  .compare:not(.compare--full) .compare__handle { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  /* on a phone the photo stands taller than it is wide, so it fills the screen as you drag */
  .compare--full { --handle-y: 76%; height: auto; aspect-ratio: 4 / 5; max-height: 78svh; }
  .showcase-foot { grid-template-columns: minmax(0, 1fr); }
  .showcase-switch { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } /* two to a row */
  .segment span { padding-inline: 8px; letter-spacing: .14em; } /* "Paint correction" on one line at phone width */
  .benefits-grid { grid-template-columns: 1fr 1fr; }
  .benefit:nth-child(3) { border-left: 0; padding-left: 0; }
  .benefit:nth-child(n+3) { border-top: 1px solid var(--line); }
}
.stat-link { transition: background-color .2s ease; }
@media (hover: hover) and (pointer: fine) { .stat-link:hover { background: var(--bg-raised); } }
@media (hover: hover) and (pointer: fine) { .stat-link:hover .label { color: var(--fg); } }
.ext-link { border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
@media (hover: hover) and (pointer: fine) { .ext-link:hover { border-color: var(--fg); } }
/* slogan under the header logo, stretched to the logo's width */
.brand { display: inline-flex; flex-direction: column; gap: clamp(5px, .45vw, 9px); }
.header-slogan { justify-content: space-between; gap: 0; font-size: clamp(8px, .6vw, 11.5px); letter-spacing: .3em; color: var(--text-soft); font-weight: 500; line-height: 1; }
.header-slogan .slogan-bar { height: 1em; }
.header-slogan span:last-child { margin-right: -.3em; }
.site-header .logo { height: clamp(20px, 2.2vw, 46px); }
@media (max-width: 600px) { .header-slogan { font-size: 7.5px; letter-spacing: .22em; } }
.header-slogan { font-size: clamp(8.5px, .72vw, 14px); letter-spacing: .42em; }
.header-slogan .slogan-bar { opacity: .4; }
@media (max-width: 600px) { .header-slogan { display: none; } }   /* 7.5px was too small to read; logo alone on phones */
.benefit:first-child { padding-left: clamp(16px, 2.15vw, 48px); }
@media (max-width: 700px) { .benefit:first-child, .benefit:nth-child(3) { padding-left: 0; } }

/* ---------- home: CTA with enquiry form ---------- */
.cta-with-form .cta-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; gap: clamp(40px, 6vw, 130px); }
.cta-with-form .cta-copy { position: sticky; top: calc(var(--header-h) + 32px); }
.cta-form { min-width: 0; }
.cta-form > .label { margin-bottom: clamp(20px, 2vw, 40px); }
@media (max-width: 900px) { .cta-with-form .cta-inner { grid-template-columns: 1fr; } .cta-with-form .cta-copy { position: static; } }
.footer-brand .footer-slogan { margin-top: clamp(14px, 1.3vw, 26px); }
.cta-with-form .h-cta { font-size: clamp(2.6rem, 4.6vw, 6.4rem); }

/* nav hover: underline grows from the centre out to both ends */
.nav a { position: relative; border-bottom: 0; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0.24em; bottom: 0; height: 1px;
  background: var(--fg); transform: scaleX(0); transform-origin: center;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.nav a:focus-visible::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .nav a:hover::after { transform: scaleX(1); } }
.nav a[aria-current="page"] { border-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .nav a::after { transition: none; } }

/* ---------- home: brand bar ---------- */
.brands { border-bottom: 1px solid var(--line); }
.brands .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 80px); padding-block: clamp(28px, 2.8vw, 56px); }
.brands-label { white-space: nowrap; }
.brands-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; }
.brand-item { display: flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: 12px; }
.brand-item + .brand-item { border-left: 1px solid var(--line); }
.brand-name {
  font-family: var(--sans); font-weight: 500; text-transform: uppercase;
  font-size: clamp(12px, 1vw, 18px); letter-spacing: .34em; margin-right: -.34em;
  color: var(--text-soft); opacity: .75; white-space: nowrap; transition: opacity .3s ease, color .3s ease;
}
.brand-item img { max-height: clamp(22px, 2vw, 36px); max-width: 100%; width: auto; filter: brightness(0) invert(1); opacity: .6; transition: opacity .3s ease; }
@media (hover: hover) and (pointer: fine) { .brand-item:hover .brand-name { opacity: 1; color: var(--fg); } }
@media (hover: hover) and (pointer: fine) { .brand-item:hover img { opacity: 1; } }
.brands + .home-services { padding-top: clamp(56px, 5vw, 110px); }
.showcase + .home-services { padding-top: clamp(56px, 5vw, 110px); } /* the slider's boxes end in a line, so the services keep the same gap as after the brand logos */
@media (max-width: 900px) {
  .brands .wrap { grid-template-columns: 1fr; gap: 20px; }
  .brands-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
  .brand-item:nth-child(4) { border-left: 0; }
}
@media (max-width: 520px) {
  .brands-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-item:nth-child(3), .brand-item:nth-child(5) { border-left: 0; }
  .brand-item:nth-child(4) { border-left: 1px solid var(--line); }
  .brand-name { letter-spacing: .24em; margin-right: -.24em; }
}
@media (max-width: 520px) { .brand-item:last-child:nth-child(odd) { grid-column: 1 / -1; border-left: 0; } }
/* real logos: same visual height, white */
.brand-item img { height: clamp(16px, 1.35vw, 26px); max-height: none; width: auto; max-width: 100%; object-fit: contain; }
/* brand bar: label centred above the logos */
.brands .wrap { grid-template-columns: 1fr; justify-items: center; gap: clamp(18px, 1.8vw, 34px); }
.brands-label { text-align: center; margin-right: -.32em; }
.brands-row { width: 100%; max-width: 1200px; }

/* ---------- home: services carousel ---------- */
.carousel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(20px, 2.4vw, 48px); }
.home-services > .wrap > .carousel-head .label { margin: 0; }
.car-controls { display: flex; align-items: center; gap: 10px; }
.car-count { font-size: var(--fs-label); letter-spacing: .3em; color: var(--dim); margin-right: 14px; font-variant-numeric: tabular-nums; }
.car-cur { color: var(--fg); }
.car-btn { width: 52px; height: 52px; display: grid; place-items: center; background: none; border: 1px solid var(--line-strong); color: var(--fg); cursor: pointer; font-size: 16px; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
@media (hover: hover) and (pointer: fine) { .car-btn:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); } }
.carousel { position: relative; }
.car-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; outline-offset: 6px; }
.car-track::-webkit-scrollbar { display: none; }
.car-track .slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; min-width: 0; }
.home-services .features, .car-track { border-bottom: 0; }
.slide-link { margin-top: auto; font-size: var(--fs-label); letter-spacing: .3em; text-transform: uppercase; color: var(--text-soft); border-bottom: 1px solid var(--line-strong); padding-bottom: 6px; transition: color .2s ease, border-color .2s ease; }
@media (hover: hover) and (pointer: fine) { .slide-link:hover { color: var(--fg); border-color: var(--fg); } }
.car-progress { height: 1px; background: var(--line); }
.car-progress span { display: block; height: 100%; background: var(--fg); transform-origin: left; transform: scaleX(.33); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
@media (max-width: 900px) {
  .car-btn { width: 44px; height: 44px; }
  .car-count { margin-right: 6px; }
  .car-track .feature-media { margin-bottom: 0; }
  .car-track .feature-copy { padding-bottom: 28px; }
}
/* carousel arrows on the sides, sitting in the page gutter */
.carousel .car-btn { position: absolute; top: 50%; z-index: 2; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.carousel .car-prev { left: calc(var(--gutter) / -2); transform: translate(-50%, -50%); }
.carousel .car-next { right: calc(var(--gutter) / -2); transform: translate(50%, -50%); }
@media (hover: hover) and (pointer: fine) { .carousel .car-btn:hover { background: var(--fg); } }
.car-count { margin-right: 0; }
@media (max-width: 1100px) {
  /* gutter too narrow: sit the arrows just inside the slide edges */
  .carousel .car-prev { left: 12px; transform: translateY(-50%); }
  .carousel .car-next { right: 12px; transform: translateY(-50%); }
  .carousel .car-prev { left: auto; right: calc(50% + 12px); }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .carousel .car-prev { right: auto; left: calc(50% + 12px); }
}
@media (max-width: 900px) {
  /* stacked slide: centre the arrows on the photo */
  .carousel .car-btn { top: auto; bottom: calc((100vw - 2 * max(16px, 6.35vw)) * 680 / 873 / 2 + 1px); transform: translateY(50%); }
  .carousel .car-prev { left: 10px; right: auto; }
  .carousel .car-next { right: 10px; }
}
/* carousel: no outline lines around the text panel */
.car-track .feature { border-top: 0; }
.car-track { clip-path: inset(0 1px 0 1px); }
/* carousel arrows: no box, just the arrow */
.carousel .car-btn { border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: 26px; color: var(--text-soft); text-shadow: 0 1px 8px rgba(0,0,0,.7); transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) { .carousel .car-btn:hover { background: none; color: var(--fg); } }
@media (max-width: 900px) { .carousel .car-btn { color: var(--fg); font-size: 24px; } }
/* carousel tags: plain text, no box */
.car-track .tag { border: 0; padding: 0; color: var(--text-soft); }

/* slide-up reveal (only applied by script when the row is below the fold) */
.stats .stat { transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), background-color .25s ease; }
.stats .stat.reveal-pending { opacity: 0; transform: translateY(48px); }
.stats { overflow: hidden; }

/* "Now taking bookings" line above the home headline */
.hero-badge { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(11px, .8vw, 14px); letter-spacing: .3em; text-transform: uppercase; color: var(--text-soft); }
.hero-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fg); box-shadow: 0 0 0 0 rgba(255,255,255,.6); }
@media (prefers-reduced-motion: no-preference) {
  .hero-badge { animation: fade 1s .1s ease both; }
}

/* ---------- information page ---------- */
.info-block { padding-top: clamp(64px, 5.5vw, 120px); }
.info-block + .info-block { border-top: 1px solid var(--line); margin-top: clamp(64px, 5.5vw, 120px); }
.info-block .h-section { margin-top: clamp(14px, 1.2vw, 26px); }
.info-intro { margin-top: clamp(24px, 2.6vw, 52px); }
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: clamp(48px, 5vw, 110px); border-top: 1px solid var(--line); }
.step { padding: clamp(28px, 2.4vw, 50px) clamp(16px, 1.8vw, 36px) 0; display: grid; align-content: start; gap: clamp(14px, 1.4vw, 28px); min-width: 0; }
.step:first-child { padding-left: 0; }
.step + .step { border-left: 1px solid var(--line); }
.step .num { font-family: var(--display); font-size: clamp(1.8rem, 3vw, 4rem); line-height: .95; color: var(--ghost); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(40px, 6vw, 120px); align-items: start; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: clamp(20px, 1.8vw, 34px); font-family: var(--display); font-size: clamp(1.4rem, 2vw, 2.6rem); line-height: 1.05; text-transform: uppercase; }
.faq summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--text-soft); } }
.faq-icon { position: relative; flex: 0 0 16px; height: 16px; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform .3s ease; }
.faq-icon::after { transform: rotate(90deg); }
.faq details[open] .faq-icon::after { transform: rotate(0deg); }
.faq details .body { padding-bottom: clamp(22px, 2vw, 40px); max-width: 44em; }
.care-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 4vw, 90px); border-top: 1px solid var(--line); }
.care { padding: clamp(28px, 2.4vw, 50px) clamp(16px, 1.8vw, 36px) 0; display: grid; gap: clamp(12px, 1vw, 20px); align-content: start; min-width: 0; }
.care:first-child { padding-left: 0; }
.care + .care { border-left: 1px solid var(--line); }
.page-information .cta { margin-top: clamp(40px, 4vw, 90px); border-top: 1px solid var(--line); }
.page-information .cta-inner { border-top: 0; }
@media (max-width: 1100px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; } .step:nth-child(4) { border-left: 0; padding-left: 0; } }
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr; }
  .care-grid { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .care:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 600px) {
  .steps { grid-template-columns: 1fr; border-top: 0; row-gap: 0; }
  .step, .step:first-child, .step:nth-child(4) { padding: 24px 0; border-left: 0; border-top: 1px solid var(--line); grid-template-columns: 3em minmax(0,1fr); column-gap: 12px; }
  .step .num { grid-row: span 2; }
  .care-grid { grid-template-columns: 1fr; }
  .care, .care:first-child { padding: 24px 0; border-left: 0; }
  .care + .care { border-top: 1px solid var(--line); }
}
/* line the badge's dot up with the left edge of the P in the headline (Bebas has a small side bearing) */
.hero-badge { margin-left: calc(clamp(4.5rem, 18.6vw, 26rem) * 0.044); }

/* ---------- launch essentials ---------- */
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--fg); color: var(--bg); padding: 12px 18px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }
main:focus { outline: none; }

.mobile-bar { display: none; }
@media (max-width: 900px) {
  .mobile-bar {
    display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: rgba(0,0,0,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--line-strong); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 10px;
  }
  .mobile-bar a { display: flex; align-items: center; justify-content: center; min-height: 48px; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; border: 1px solid var(--fg); white-space: nowrap; }
  .mobile-bar .mb-call { color: var(--fg); }
  .mobile-bar .mb-quote { background: var(--fg); color: var(--bg); }
  .mobile-bar a:only-child { grid-column: 1 / -1; }
  body.has-mobile-bar { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .menu-open .mobile-bar { display: none; }
}

.reviews-link { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(8px, 1vw, 18px); font-size: var(--fs-label); letter-spacing: .26em; text-transform: uppercase; color: var(--text-soft); border-bottom: 1px solid var(--line-strong); padding-bottom: 6px; align-self: flex-start; transition: color .2s ease, border-color .2s ease; }
.reviews-link .stars { letter-spacing: .12em; color: var(--fg); }
@media (hover: hover) and (pointer: fine) { .reviews-link:hover { color: var(--fg); border-color: var(--fg); } }

.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: clamp(28px, 2.6vw, 52px); }
.form-foot .btn { margin-top: 0; }
.form-privacy { color: var(--dim); font-size: 0.82em; }
.form-privacy a { color: var(--text-soft); border-bottom: 1px solid var(--line-strong); }

.directions { display: inline-block; margin-top: 10px; font-size: 0.85em; color: var(--text-soft); }
.footer-hours { color: var(--dim); font-size: clamp(13px, 0.9vw, 17px); letter-spacing: .02em; }
.social { display: flex; gap: 28px; flex-wrap: wrap; margin-top: clamp(32px, 3vw, 56px); }
.social a { font-size: var(--fs-label); letter-spacing: .3em; text-transform: uppercase; color: var(--text-soft); }
@media (hover: hover) and (pointer: fine) { .social a:hover { color: var(--fg); } }
.footer-bottom a { color: var(--dim); border-bottom: 1px solid transparent; }
@media (hover: hover) and (pointer: fine) { .footer-bottom a:hover { color: var(--fg); } }

.legal { padding-block: clamp(48px, 4.5vw, 100px); }
.legal-list { margin-top: clamp(24px, 2vw, 40px); border-top: 1px solid var(--line); max-width: 960px; }
.legal-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px 48px; padding-block: clamp(24px, 2.4vw, 44px); border-bottom: 1px solid var(--line); }
.legal-item .body { max-width: 56ch; }
@media (max-width: 700px) { .legal-item { grid-template-columns: 1fr; } }
.nf-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.page-notfound .site-footer { margin-top: 0; }
@media (max-width: 900px) { body.has-mobile-bar .home-hero { min-height: calc(100svh - 70px - env(safe-area-inset-bottom, 0px)); } }
.social { margin-top: clamp(22px, 2vw, 36px); } .social .handle { color: var(--fg); letter-spacing: .12em; text-transform: none; }

/* ---------- footer social column ---------- */
.footer-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 2.55fr) minmax(0, 2.55fr) minmax(0, 2.8fr) auto; }
.footer-social .social { display: grid; gap: clamp(10px, 1.1vw, 20px); margin-top: 0; }
.footer-social .social a { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(13px, 0.9vw, 17px); letter-spacing: .02em; text-transform: none; color: var(--text-soft); }
@media (hover: hover) and (pointer: fine) { .footer-social .social a:hover { color: var(--fg); } }
.footer-social .handle { color: inherit; letter-spacing: .06em; }
.social-icon { width: 22px; height: 22px; object-fit: contain; opacity: .85; transition: opacity .2s ease; }
@media (hover: hover) and (pointer: fine) { .footer-social a:hover .social-icon { opacity: 1; } }
@media (max-width: 1100px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- tint shade guide ---------- */
.shades { margin-top: clamp(48px, 4.5vw, 96px); }
.shades-bare { margin-top: 0; } /* on the Window Tinting page the guide is its own section, under its own heading */
.svc-shades .shade-intro { margin-top: clamp(16px, 1.6vw, 30px); }
/* the Services menu and phone menu: a service that isn't bookable yet */
.mobile-menu nav .mobile-sub .nm-soon { display: block; margin: 2px 0 0 1.1em; font-size: 10px; letter-spacing: .2em; color: var(--dim); } /* its own line under the name */
.cert-chip.soon-chip { color: var(--text-soft); }
.shade-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(16px, 2vw, 40px); margin-top: clamp(20px, 2vw, 40px); } /* one column per shade, however many there are */
.shade { margin: 0; display: grid; gap: 16px; min-width: 0; }
.shade-glass { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, #5f6a75 0%, #9aa7b2 38%, #d9dfe4 52%, #7d8893 70%, #4b545d 100%); }
.shade-glass::before { content: ""; position: absolute; left: 12%; right: 12%; top: 56%; height: 2px; background: #fff; box-shadow: 0 -18px 0 -0.5px rgba(255,255,255,.7), 0 18px 0 -0.5px rgba(255,255,255,.5); }
.shade-glass span { position: absolute; inset: 0; background: #050607; opacity: calc(1 - var(--vlt)); }
.shade-glass::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 40%); }
.shade-vlt { font-family: var(--display); font-size: clamp(1.8rem, 2.4vw, 3rem); line-height: 1; }
.shade-vlt span { font-family: var(--sans); font-size: var(--fs-label); letter-spacing: .3em; color: var(--dim); }
.shade-name { font-size: var(--fs-label); letter-spacing: .3em; text-transform: uppercase; color: var(--text-soft); margin-top: 6px; }
.shade figcaption .body { margin-top: 8px; font-size: .9em; }
.shade-legal { margin-top: clamp(20px, 2vw, 36px); padding-top: 16px; border-top: 1px solid var(--line); color: var(--dim); font-size: .85em; max-width: 60em; }
@media (max-width: 900px) { .shade-row { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } }

/* ---------- reviews ---------- */
.reviews { padding-top: clamp(64px, 5vw, 110px); }
.reviews-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.reviews-head .h-cta { margin-top: 14px; }
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: clamp(32px, 3vw, 64px); }
.review { margin: 0; background: var(--bg); padding: clamp(24px, 2.4vw, 44px); display: grid; gap: 16px; align-content: start; }
.review .stars { letter-spacing: .2em; font-size: 14px; }
.review-text { color: var(--fg); font-size: 1.05em; line-height: 1.6; }
.review footer { font-size: var(--fs-label); letter-spacing: .26em; text-transform: uppercase; color: var(--dim); display: flex; flex-wrap: wrap; gap: 6px; }
.review-name { color: var(--text-soft); }
.review-service { flex-basis: 100%; color: var(--dim); }

/* ---------- gallery filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(24px, 2.4vw, 48px); }
.filter { background: none; border: 1px solid var(--line-strong); color: var(--text-soft); padding: .9em 1.4em; font-size: var(--fs-label); letter-spacing: .26em; text-transform: uppercase; cursor: pointer; transition: all .2s ease; }
@media (hover: hover) and (pointer: fine) { .filter:hover { border-color: var(--fg); color: var(--fg); } }
.filter.is-on { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.nearby { color: var(--text-soft); font-size: .92em; line-height: 1.6; }
.field input[type="date"] { color-scheme: dark; min-height: 3.3em; }
.shade { align-content: start; }

/* ---------- SEO headings shown as small labels ---------- */
h1.label, h1.hero-sub { font-weight: inherit; margin: 0; }
.page-hero .hero-h1 { margin-bottom: -0.4em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- how it works (home) ---------- */
.how { padding-top: clamp(64px, 5.5vw, 120px); }
.how .h-cta { margin-top: 14px; }
.how-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(32px, 3.4vw, 72px); border-top: 1px solid var(--line); }
.how-steps li { padding: clamp(24px, 2.4vw, 48px) clamp(16px, 2vw, 40px) 0; display: grid; gap: clamp(12px, 1.2vw, 22px); align-content: start; min-width: 0; }
.how-steps li:first-child { padding-left: 0; }
.how-steps li + li { border-left: 1px solid var(--line); }
.how-steps .num { font-family: var(--display); font-size: clamp(1.8rem, 3vw, 4rem); line-height: .95; color: var(--ghost); }
@media (max-width: 800px) {
  .how-steps { grid-template-columns: 1fr; border-top: 0; }
  .how-steps li, .how-steps li:first-child { padding: 24px 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- new car call-out (services) ---------- */
.newcar { display: flex; justify-content: space-between; align-items: center; gap: 24px 48px; flex-wrap: wrap; margin-top: clamp(28px, 2.6vw, 52px); padding: clamp(24px, 2.4vw, 44px); border: 1px solid var(--line-strong); }
.newcar > div { flex: 1 1 420px; min-width: 0; display: grid; gap: 10px; }
.newcar .body { max-width: 62ch; }

/* ---------- comparison table (FAQ) ---------- */
.table-wrap { overflow-x: auto; margin-top: clamp(32px, 3vw, 64px); border-top: 1px solid var(--line); }
.compare-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .95em; }
.compare-table th, .compare-table td { text-align: left; padding: clamp(14px, 1.3vw, 24px) clamp(12px, 1.4vw, 28px); border-bottom: 1px solid var(--line); vertical-align: top; }
.compare-table thead th { font-weight: 500; font-size: var(--fs-label); letter-spacing: .28em; text-transform: uppercase; color: var(--dim); }
.compare-table thead th.is-ours { color: var(--fg); }
.compare-table tbody th { font-weight: 400; font-size: var(--fs-label); letter-spacing: .24em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.compare-table td { color: var(--text); }
.compare-table td.is-ours { color: var(--fg); background: rgba(255,255,255,.03); }
.compare-table th:first-child { padding-left: 0; }

/* ---------- specialised coatings ---------- */
.spec { margin-top: clamp(56px, 5vw, 110px); padding-top: clamp(40px, 3.6vw, 80px); border-top: 1px solid var(--line); }
.spec .h-sub { margin-top: 14px; }
.spec > .body { margin-top: clamp(14px, 1.4vw, 26px); }
.spec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: clamp(28px, 3vw, 60px); }
.spec-item { background: var(--bg); padding: clamp(22px, 2.2vw, 40px); display: flex; flex-direction: column; gap: clamp(12px, 1vw, 18px); min-width: 0; }
.spec-item .h-card { font-size: clamp(1.6rem, 2.2vw, 2.8rem); }
.spec-item .price-row { margin-top: auto; padding-top: clamp(16px, 1.4vw, 26px); }
.spec-item .price { font-size: clamp(1.2rem, 1.6vw, 2rem); }
@media (max-width: 900px) { .spec-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .spec-grid { grid-template-columns: 1fr; } }
h4 { margin: 0; }

/* ---------- certification chip ---------- */
.cert-chip { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line-strong); padding: .7em 1.2em; font-size: var(--fs-label); letter-spacing: .26em; text-transform: uppercase; color: var(--fg); }
.cert-chip span { font-size: 1.1em; letter-spacing: 0; }
.brands-head { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.brands-row { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
.svc .cert-chip { margin: 0 0 clamp(16px, 1.4vw, 28px); }
@media (max-width: 900px) { .brands-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .brand-item:nth-child(4) { border-left: 0; } }
@media (max-width: 520px) { .brands-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .brand-item:nth-child(4) { border-left: 1px solid var(--line); } .brand-item:nth-child(3), .brand-item:nth-child(5) { border-left: 0; } }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@media (max-width: 520px) { .cert-chip { letter-spacing: .16em; padding: .7em 1em; } }

/* ---------- individual service pages ---------- */
.btn-solid { background: var(--fg); color: var(--bg); }
@media (hover: hover) and (pointer: fine) { .btn-solid:hover { background: transparent; color: var(--fg); } }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .9em; font-size: var(--fs-label); letter-spacing: .26em; text-transform: uppercase; color: var(--dim); }
.crumbs a { color: var(--text-soft); transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--fg); } }
.crumbs [aria-current] { color: var(--text-soft); }
.svc-hero .page-hero-inner { min-height: min(88svh, 980px); justify-content: flex-end; }
.svc-hero .crumbs { margin-bottom: auto; }
.svc-hero .hero-h1 { color: var(--text-soft); }
.svc-hero .lead { margin-top: clamp(4px, 1vw, 20px); max-width: 36em; }
.svc-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: clamp(4px, .8vw, 16px); }
.svc-hero-actions .cert-chip { margin-left: clamp(0px, 1.2vw, 24px); }

.glance { border-bottom: 1px solid var(--line); }
.glance-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.glance-item { padding: clamp(24px, 2.4vw, 48px) clamp(16px, 2vw, 40px); display: grid; gap: 10px; align-content: start; min-width: 0; }
.glance-item:first-child { padding-left: 0; }
.glance-item + .glance-item { border-left: 1px solid var(--line); }
.glance-value { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.6rem, 2.3vw, 3rem); line-height: 1; }

.overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
.overview-grid .h-sub { margin-top: clamp(14px, 1.2vw, 26px); }
.overview-copy { display: grid; gap: 1.1em; }
.overview-copy .body { max-width: 40em; }
.ideal { margin-top: clamp(18px, 2vw, 40px); padding-top: clamp(18px, 2vw, 40px); border-top: 1px solid var(--line); }
.ideal .dash-list { padding-top: 16px; margin-top: 0; }

.page-service .svc .h-section { margin-bottom: 0; }
.page-service .svc .tiers, .page-service .svc .options { margin-top: clamp(40px, 4vw, 90px); }
.page-service .spec-grid { margin-top: clamp(40px, 4vw, 90px); }
.page-service .svc + .info-block, .page-service .info-block + .svc { border-top: 1px solid var(--line); margin-top: clamp(64px, 5.5vw, 120px); }
.page-service .svc { padding-top: clamp(64px, 5.5vw, 120px); }
.page-service .svc .svc-note { color: var(--dim); }

.svc-table td { color: var(--text-soft); }
.svc-table td.yes { color: var(--fg); font-size: 1.15em; }
.svc-table td.no { color: var(--dim); }
.svc-table tr.is-price th, .svc-table tr.is-price td { font-family: var(--display); font-size: clamp(1.3rem, 1.7vw, 2.2rem); letter-spacing: 0; color: var(--fg); }
.svc-table tr.is-price th { font-family: var(--sans); font-size: var(--fs-label); letter-spacing: .24em; color: var(--dim); }

.checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 80px); margin-top: clamp(32px, 3.4vw, 72px); border-top: 1px solid var(--line); }
.checklist li { display: flex; gap: 1em; align-items: baseline; padding-block: clamp(14px, 1.3vw, 24px); border-bottom: 1px solid var(--line); color: var(--text-soft); }
.checklist li span { color: var(--fg); flex: 0 0 auto; }

@media (min-width: 1101px) { .steps[style*="--n:4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.more-link { display: inline-block; margin-top: clamp(18px, 1.8vw, 34px); font-size: var(--fs-label); letter-spacing: .3em; text-transform: uppercase; color: var(--text-soft); border-bottom: 1px solid var(--line-strong); padding-bottom: 6px; transition: color .2s ease, border-color .2s ease; }
@media (hover: hover) and (pointer: fine) { .more-link:hover { color: var(--fg); border-color: var(--fg); } }
.spec .more-link { margin-top: clamp(14px, 1.2vw, 22px); }

.related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 40px); margin-top: clamp(32px, 3.4vw, 72px); }
.related-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.related-media { aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 8px; background: var(--bg-raised); }
.related-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25) brightness(.85); transition: transform .6s ease, filter .4s ease; }
@media (hover: hover) and (pointer: fine) { .related-card:hover .related-media img { transform: scale(1.04); filter: none; } }
.related-card .h-card { font-size: clamp(1.6rem, 2.2vw, 2.8rem); }
.related-card .body { font-size: .92em; }
.related-card .slide-link { align-self: flex-start; margin-top: auto; padding-top: 6px; }
@media (hover: hover) and (pointer: fine) { .related-card:hover .slide-link { color: var(--fg); border-color: var(--fg); } }
.page-service .cta { margin-top: clamp(40px, 4vw, 90px); border-top: 1px solid var(--line); }
.page-service .cta-inner { border-top: 0; }

@media (max-width: 1100px) {
  .glance-grid { grid-template-columns: 1fr 1fr; }
  .glance-item:nth-child(3) { border-left: 0; padding-left: 0; }
  .glance-item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .related-grid { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .steps[style*="--n:4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps[style*="--n:4"] .step:nth-child(3) { border-left: 0; padding-left: 0; }
  .steps[style*="--n:4"] .step:nth-child(4) { border-left: 1px solid var(--line); padding-left: clamp(16px, 1.8vw, 36px); }
}
@media (max-width: 900px) {
  .overview-grid { grid-template-columns: 1fr; }
  .checklist { grid-template-columns: 1fr; }
  .svc-hero .page-hero-inner { min-height: 0; }
  .svc-hero .crumbs { margin-bottom: 8px; }
  .svc-hero-actions .cert-chip { margin-left: 0; }
}
@media (max-width: 600px) {
  .steps[style*="--n:4"] { grid-template-columns: 1fr; }
  .steps[style*="--n:4"] .step:nth-child(n) { padding: 24px 0; border-left: 0; }
  .related-grid { grid-template-columns: 1fr; }
  .glance-value { font-size: 1.45rem; }
}
.table-wrap { position: relative; } /* keeps screen-reader labels inside the scroll area */

/* comparison tables on phones: one block per row, column name above each value */
@media (max-width: 700px) {
  .table-wrap { overflow: visible; }
  .compare-table { min-width: 0; display: block; }
  .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare-table tbody { display: block; }
  .compare-table tr { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); column-gap: 14px; padding-block: 16px; border-bottom: 1px solid var(--line); }
  .compare-table tbody th { grid-column: 1 / -1; padding: 0 0 10px; border: 0; white-space: normal; }
  .compare-table td { padding: 0; border: 0; background: none !important; font-size: .92em; }
  .compare-table td::before { content: attr(data-col); display: block; font-family: var(--sans); font-size: var(--fs-label); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }
  .compare-table td.is-ours::before { color: var(--text-soft); }
  .svc-table tr.is-price td { font-size: 1.5rem; }
  .care + .care { border-left: 0; }
}

/* ---------- tint shade guide: drawn car window ---------- */
.shade-view { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line-strong); background: #050506; }
.shade-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.shade-intro { margin-top: clamp(12px, 1.2vw, 22px); max-width: 62ch; }
.shade-vlt abbr { font-family: var(--sans); font-size: var(--fs-label); letter-spacing: .3em; color: var(--dim); text-decoration: none; cursor: help; }

/* ---------- FAQ: clean list ---------- */
.faq-grid { align-items: start; }
.faq-side { position: sticky; top: calc(var(--header-h) + 24px); }
.faq-ask { margin-top: clamp(28px, 3vw, 56px); padding-top: clamp(20px, 2vw, 36px); border-top: 1px solid var(--line); display: grid; gap: 10px; max-width: 26em; }
.faq-ask-title { font-weight: 500; color: var(--fg); }
.faq-ask .body { font-size: .92em; }
.faq-ask-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 4px; font-size: .92em; }
.faq-ask .more-link { margin-top: 14px; justify-self: start; }

.faq-group { margin: clamp(36px, 3.4vw, 64px) 0 clamp(10px, 1vw, 16px); }
.faq-group:first-child { margin-top: 0; }
.faq .faq-item { border-top: 1px solid var(--line); }
.faq .faq-item:last-child, .faq .faq-item:has(+ .faq-group) { border-bottom: 1px solid var(--line); }
.faq .faq-item summary {
  display: grid; grid-template-columns: 2.6em minmax(0, 1fr) 32px; align-items: center; gap: 0 clamp(10px, 1vw, 18px);
  padding-block: clamp(18px, 1.5vw, 26px);
  font-family: var(--sans); font-size: clamp(16px, 1.12vw, 20px); line-height: 1.4; font-weight: 400;
  text-transform: none; letter-spacing: 0; color: var(--text-soft);
  transition: color .2s ease;
}
.faq .faq-item[open] summary { color: var(--fg); }
@media (hover: hover) and (pointer: fine) { .faq .faq-item summary:hover { color: var(--fg); } }
.faq-num { font-size: var(--fs-label); letter-spacing: .2em; color: var(--dim); font-variant-numeric: tabular-nums; }
.faq .faq-icon { position: relative; width: 32px; height: 32px; flex: none; border: 1px solid var(--line-strong); border-radius: 50%; transition: border-color .2s ease, background-color .2s ease; }
.faq .faq-icon::before, .faq .faq-icon::after { left: 50%; right: auto; top: 50%; width: 11px; height: 1px; margin: -0.5px 0 0 -5.5px; background: currentColor; }
@media (hover: hover) and (pointer: fine) { .faq .faq-item summary:hover .faq-icon { border-color: var(--fg); } }
.faq .faq-item[open] .faq-icon { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.faq-a { padding: 0 calc(32px + clamp(10px, 1vw, 18px)) clamp(20px, 1.8vw, 32px) calc(2.6 * clamp(16px, 1.12vw, 20px) + clamp(10px, 1vw, 18px)); }
.faq .faq-a .body { padding: 0; max-width: 40em; }
.faq-item[open] .faq-a { animation: faq-open .35s ease; }
@keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .faq-item[open] .faq-a { animation: none; } }
@media (max-width: 900px) {
  .faq-side { position: static; }
  .faq-ask { max-width: none; }
}
@media (max-width: 600px) {
  .faq .faq-item summary { grid-template-columns: 2.1em minmax(0, 1fr) 28px; }
  .faq .faq-icon { width: 28px; height: 28px; }
  .faq-a { padding-left: calc(2.1 * 16px + 10px); padding-right: 0; }
}
/* phones: questions first, then the "still have a question" box */
@media (max-width: 900px) {
  .faq-grid { display: flex; flex-direction: column; gap: 0; }
  .faq-side { display: contents; }
  .faq-side .h-section { margin-bottom: clamp(28px, 6vw, 48px); }
  .faq { order: 1; }
  .faq-ask { order: 2; border-top: 0; margin-top: 8px; }
}

/* footer slogan stretched to the footer logo's width (same treatment as the header) */
.footer-brand { display: grid; grid-template-columns: max-content; justify-content: start; align-content: start; }
.footer-brand .footer-slogan { width: 0; min-width: 100%; flex-wrap: nowrap; justify-content: space-between; gap: 0;
  font-size: clamp(8.5px, .68vw, 13.5px); letter-spacing: .42em; line-height: 1; white-space: nowrap; }
.footer-brand .footer-slogan span:last-child { margin-right: -.42em; }
.footer-brand .footer-slogan .slogan-bar { height: 1em; opacity: .4; }
@media (max-width: 600px) { .footer-brand .footer-slogan { font-size: 10px; letter-spacing: .14em; } .footer-brand .footer-slogan span:last-child { margin-right: -.14em; } }

/* certified / insured chips in the home hero, on their own line under the enquiry button */
.hero-chips { flex-basis: 100%; justify-content: flex-start; margin-top: calc(clamp(24px, 4.4vw, 90px) * -0.55); }
.hero-chips .cert-chip { background: rgba(0,0,0,.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-color: rgba(255,255,255,.22); }
@media (min-width: 601px) {
  .hero-chips { flex-basis: auto; flex-wrap: nowrap; gap: 10px; }
  .hero-chips .cert-chip { flex: 1 1 0; justify-content: center; min-width: 0; text-align: center; }
}
@media (min-width: 601px) and (max-width: 1100px) { .hero-chips .cert-chip { letter-spacing: .16em; padding-inline: .9em; } }
.hero-chips { margin-top: calc(clamp(24px, 4.4vw, 90px) * -0.2); } /* a little more air under the subheading and button */

/* ---------- gallery: one carousel per service (matches the home page carousel) ---------- */
.gallery { padding-block: 0; }
.gal-sec { padding-top: clamp(48px, 4.5vw, 96px); }
.gal-sec + .gal-sec { border-top: 1px solid var(--line); margin-top: clamp(48px, 4.5vw, 96px); }
.gal-head { align-items: flex-end; }
.gal-title { display: flex; align-items: baseline; gap: clamp(14px, 1.4vw, 28px); }
.gal-title .num { font-family: var(--display); font-size: clamp(1.6rem, 2.4vw, 3.2rem); line-height: 1; color: var(--ghost); }
.gal-count { margin: 0 0 .5em; }
.gal-carousel { position: relative; }
.gal-stage { position: relative; }
.gal-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; outline-offset: 6px; }
.gal-track::-webkit-scrollbar { display: none; }
.gal-slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; min-width: 0; margin: 0; }
.gal-slide .shot-btn { aspect-ratio: 16 / 8; }
.gal-slide .shot-btn img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) { .gal-slide .shot-btn:hover img { transform: scale(1.015); } }
/* arrows: same as the home carousel, plain arrows in the page gutter */
.gal-btn { position: absolute; top: 50%; z-index: 2; width: 52px; height: 52px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 26px; color: var(--text-soft); text-shadow: 0 1px 8px rgba(0,0,0,.7); transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) { .gal-btn:hover { color: var(--fg); } }
.gal-prev { left: calc(var(--gutter) / -2); transform: translate(-50%, -50%); }
.gal-next { right: calc(var(--gutter) / -2); transform: translate(50%, -50%); }
.gal-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding-block: clamp(16px, 1.6vw, 28px); }
.gal-cap { font-size: var(--fs-label); letter-spacing: .3em; text-transform: uppercase; color: var(--text-soft); }
.gal-foot .more-link { margin-top: 0; }
.gal-sec.is-single .gal-stage { border-bottom: 1px solid var(--line); }
.page-gallery .cta { margin-top: clamp(48px, 4.5vw, 96px); border-top: 1px solid var(--line); }
.page-gallery .cta-inner { border-top: 0; }
@media (max-width: 1100px) {
  /* gutter too narrow: arrows just inside the photo edges */
  .gal-prev { left: 8px; transform: translateY(-50%); }
  .gal-next { right: 8px; transform: translateY(-50%); }
  .gal-btn { color: var(--fg); }
}
@media (max-width: 900px) { .gal-slide .shot-btn { aspect-ratio: 4 / 3; } .gal-btn { width: 44px; height: 44px; font-size: 24px; } }

/* footer social: logos only, side by side */
.footer-social .social-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.footer-social .social-icons a { display: inline-flex; align-items: center; min-height: 26px; }
.footer-social .social-icons .social-icon { width: 26px; height: 26px; opacity: .8; transition: opacity .2s ease, transform .2s ease; }
@media (hover: hover) and (pointer: fine) { .footer-social .social-icons a:hover .social-icon { opacity: 1; transform: translateY(-1px); } }
.reviews-summary { margin-top: clamp(12px, 1.2vw, 22px); font-size: var(--fs-label); letter-spacing: .26em; text-transform: uppercase; color: var(--text-soft); }
.reviews-summary .stars { color: var(--fg); letter-spacing: .12em; margin-right: 6px; }

/* ---------- Services dropdown in the header ---------- */
.nav { align-items: center; }
.nav-item { position: relative; display: flex; align-items: center; gap: 6px; }
.nav-caret { width: 18px; height: 18px; display: grid; place-items: center; padding: 0; background: none; border: 0; cursor: pointer; color: var(--text-soft); }
.nav-caret span { width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s ease; }
.nav-item.is-open .nav-caret { color: var(--fg); }
@media (hover: hover) and (pointer: fine) { .nav-item:hover .nav-caret { color: var(--fg); } }
.nav-item:focus-within .nav-caret span, .nav-item.is-open .nav-caret span { transform: translateY(1px) rotate(-135deg); }
@media (hover: hover) and (pointer: fine) { .nav-item:hover .nav-caret span { transform: translateY(1px) rotate(-135deg); } }
.nav-menu { position: absolute; top: 100%; left: -28px; padding-top: 18px; min-width: 340px; z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
.nav-item:focus-within .nav-menu, .nav-item.is-open .nav-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease, visibility 0s; }
@media (hover: hover) and (pointer: fine) { .nav-item:hover .nav-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease, visibility 0s; } }
.nav-menu-inner { background: rgba(0,0,0,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--line-strong); padding: 10px 0; box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.nav .nav-menu a { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 13px 28px; border: 0;
  font-family: var(--display); font-size: 1.35rem; line-height: 1; letter-spacing: .02em; color: var(--text-soft); transition: color .15s ease, background-color .15s ease; }
.nav .nav-menu a::after { display: none; }
.nav .nav-menu a:focus-visible, .nav .nav-menu a[aria-current="page"] { color: var(--fg); background: rgba(255,255,255,.05); }
@media (hover: hover) and (pointer: fine) { .nav .nav-menu a:hover { color: var(--fg); background: rgba(255,255,255,.05); } }
.nav .nav-menu .nm-from { font-family: var(--sans); font-size: var(--fs-label); letter-spacing: .2em; color: var(--dim); white-space: nowrap; }
.nav .nav-menu .nm-all { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--sans); font-size: var(--fs-label); letter-spacing: .26em; color: var(--text-soft); }
.nav .nav-menu .nm-all .nm-from { color: var(--text-soft); }
/* phone menu: services listed under the Services link */
.mobile-sub { display: flex; flex-direction: column; width: 100%; padding: 6px 0 14px 4px; border-bottom: 1px solid var(--line); }
.mobile-menu nav .mobile-sub a { font-family: var(--sans); font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--text-soft); border: 0; padding: 9px 0; width: auto; line-height: 1.4; }
.mobile-menu nav .mobile-sub a::before { content: "— "; color: var(--dim); }
.nav .nav-menu .nm-name { white-space: nowrap; } .nav-menu { min-width: 400px; }


/* ---------- home hero: quick-quote form beside the headline ---------- */
.home-hero-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.hero-form {
  position: relative; min-width: 0;
  background: rgba(0,0,0,.62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.16);
  padding: clamp(22px, 2vw, 40px);
}
.hero-form > .label { margin-bottom: 12px; }
.hero-form-title { font-size: clamp(2rem, 2.4vw, 3.4rem); }
.hero-form-text { margin-top: 10px; color: var(--text); font-size: 0.86em; line-height: 1.5; }
.hero-form .enquiry, .hero-form .form-done { margin-top: clamp(18px, 1.5vw, 28px); }
.enquiry-compact .form-grid { gap: 14px 12px; }
.enquiry-compact .field { gap: 7px; }
.enquiry-compact .field label { font-size: var(--fs-label); letter-spacing: .26em; }
.enquiry-compact .field input, .enquiry-compact .field select, .enquiry-compact .field textarea { padding: .78em 1em; font-size: 15px; background: rgba(10,10,10,.85); }
.enquiry-compact .select::after { right: 1.2em; }
.enquiry-compact .field textarea { min-height: 3.6em; }
.enquiry-compact .form-error { margin-top: 14px; }
.enquiry-compact .form-foot { margin-top: 18px; gap: 12px; }
.enquiry-compact .form-foot .btn { width: 100%; padding-block: 1.3em; }
.enquiry-compact .form-privacy { font-size: 12px; }
@media (prefers-reduced-motion: no-preference) { .hero-form { animation: fade 1s .5s ease both; } }

/* desktop: headline on the left, form on the right */
@media (min-width: 1101px) {
  /* the form takes about a third of the width; the headline scales to fill whatever is left */
  .home-hero-inner.has-form {
    --hf-form: clamp(430px, 35vw, 640px); --hf-gap: clamp(36px, 3.6vw, 80px);
    --hero-fs: min(16rem, calc((100vw - 2 * var(--gutter) - var(--hf-form) - var(--hf-gap)) / 3.95));
    display: grid; grid-template-columns: minmax(0, 1fr) var(--hf-form); gap: var(--hf-gap); align-items: center;
  }
  .has-form .home-hero-main { align-self: stretch; }
  .home-hero-inner.has-form { padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(32px, 4.2vw, 100px)); padding-bottom: clamp(40px, 4.4vw, 110px); }
  .has-form .h-hero { font-size: var(--hero-fs); }
  .has-form .hero-badge { margin-left: calc(var(--hero-fs) * 0.044); }
  .has-form .hero-chips { flex-direction: column; flex-wrap: nowrap; }
  .has-form .hero-chips .cert-chip { flex: none; justify-content: flex-start; }
}
/* tablets and phones: the form follows the headline, and the enquiry button (which would sit right above it) is hidden */
@media (max-width: 1100px) {
  .home-hero-inner.has-form { gap: clamp(36px, 6vw, 64px); justify-content: flex-start; }
  .has-form .home-hero-main { flex: none; }
  .has-form .home-hero-foot > .btn { display: none; }
  .has-form .hero-form { max-width: 640px; width: 100%; }
}

/* with six menu items (Vouchers added), switch to the Menu button below 1100px so the logo and slogan aren't squeezed */
@media (max-width: 1100px) {
  .nav, .header-book { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* home hero on desktop: with the button and badges gone, keep the strapline under the headline, level with the form */
@media (min-width: 1101px) {
  .has-form .home-hero-main { justify-content: center; gap: clamp(28px, 2.6vw, 56px); }
}


/* ---------- refinement pass ---------- */
/* phones: the desktop divider between "How it works" steps outranked the phone rule */
@media (max-width: 800px) { .how-steps li + li { border-left: 0; } }
/* "Explore more" cards: as many columns as there are cards, so three don't leave an empty fourth slot */
@media (min-width: 901px) { .related-grid { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
/* service page header on phones: Get a Quote and See Prices as an even pair */
@media (max-width: 600px) {
  .svc-hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .svc-hero-actions .btn { width: 100%; padding-inline: 1em; text-align: center; justify-content: center; }
  .svc-hero-actions .cert-chip { grid-column: 1 / -1; justify-self: start; }
}
/* home: the stats band already ends with a rule, so the quote section below doesn't add a second one */
.stats + .cta .cta-inner { border-top: 0; }

/* FAQ rows without running numbers: question text and answer share one left edge */
.faq .faq-item summary { grid-template-columns: minmax(0, 1fr) 32px; }
.faq-a { padding-left: 0; }
@media (max-width: 600px) { .faq .faq-item summary { grid-template-columns: minmax(0, 1fr) 28px; } .faq-a { padding-left: 0; } }
/* five brand logos on tablets: three on top, two centred underneath */
@media (min-width: 521px) and (max-width: 900px) {
  .brands-row[data-n="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .brands-row[data-n="5"] .brand-item { grid-column: span 2; }
  .brands-row[data-n="5"] .brand-item:nth-child(4) { grid-column: 2 / span 2; border-left: 0; }
}


/* ---------- impeccable audit fixes (approved) ---------- */
/* small headings, intro text and the big headline over header photos */
.page-hero.has-image h1.label, .svc-hero h1.label { color: var(--on-photo); }
.page-hero.has-image .lead, .svc-hero .lead { color: var(--text-soft); }
.crumbs { color: var(--text-soft); }
.h-hero, .page-hero.has-image .h-page { text-shadow: 0 2px 28px rgba(0,0,0,.45); }
/* phones: photos get an even, darker shade because text runs the full width; the quote card is near-solid */
@media (max-width: 600px) {
  .hero-bg::after, .page-hero.has-image .hero-bg::after { background: linear-gradient(180deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.5) 40%, rgba(0,0,0,.72) 100%); }
  .hero-form { background: rgba(0,0,0,.8); }
}
/* the Vouchers list label is now a real heading (keeps heading order), styled as before */
h2.label { font-weight: inherit; margin: 0; }
/* phones: footer links get thumb-sized rows (44px) */
@media (max-width: 600px) {
  .footer-col ul { gap: 0; }
  .footer-col li a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-social .social a { min-width: 44px; min-height: 44px; justify-content: center; }
  .footer-col .footer-hours { padding-block: 12px; }
}
/* very small phones: long button text wraps instead of pushing the page sideways */
@media (max-width: 400px) { .newcar .btn { white-space: normal; width: 100%; text-align: center; justify-content: center; } }
/* phones: bigger tap areas for the logo, breadcrumbs and contact links, without shifting the layout */
@media (max-width: 600px) {
  .brand { min-height: 44px; justify-content: center; }
  .more-link { position: relative; }
  .more-link::after { content: ""; position: absolute; inset: -9px 0; }   /* 26px link, 44px tap area */
  .crumbs { column-gap: .7em; } /* keeps "Home / Services / Paint Correction" on one line */
  .crumbs a { display: inline-block; padding-block: 12px; margin-block: -12px; }
  /* contact links: an invisible hit area, so their underlines stay tight to the text */
  .info dd a { position: relative; }
  .info dd a::after { content: ""; position: absolute; inset: -12px -4px; }   /* 20px text, 44px tap area */
}
/* phones: stand-alone text links get a 24px+ tap height; inline padding doesn't move the underline or the text */
@media (max-width: 600px) { p > .ext-link { padding-top: 4px; } }
/* phones: the two-line footer address keeps its line break (flex would join the lines) */
@media (max-width: 600px) { .footer-col li a.footer-addr { display: inline-block; min-height: 0; padding-block: 10px; } }

/* ---------- emil-design-eng detail pass ---------- */
/* 1 · buttons answer a press: a quick 3% shrink that springs back on release (no grey tap flash) */
.btn, .mobile-bar a, .car-btn, .gal-btn, .lightbox button, .hint-fix { -webkit-tap-highlight-color: transparent; }
.mobile-bar a { transition: scale .16s var(--ease-out); }
.car-btn, .carousel .car-btn, .gal-btn { transition: background-color .2s ease, color .2s ease, border-color .2s ease, scale .16s var(--ease-out); }
.lightbox button { transition: border-color .2s ease, scale .16s var(--ease-out); }
@media (prefers-reduced-motion: no-preference) {
  .btn:active:not(:disabled), .mobile-bar a:active, .car-btn:active, .gal-btn:active, .lightbox button:active { scale: .97; }
  .enquiry-compact .form-foot .btn:active:not(:disabled), .mobile-bar a:active { scale: .98; } /* wide buttons: a smaller shrink reads the same */
}

/* 3 · sending: the button keeps its look and a thin line runs along its foot, instead of turning into a grey slab */
.btn.is-sending { position: relative; overflow: hidden; opacity: 1; cursor: progress; background: transparent; color: var(--fg); border-color: var(--fg); }
.btn.is-sending::after { content: ""; position: absolute; left: 0; bottom: 0; width: 30%; height: 2px; background: var(--fg); }
@media (prefers-reduced-motion: no-preference) { .btn.is-sending::after { animation: send-line 1.1s linear infinite; } }
@media (prefers-reduced-motion: reduce) { .btn.is-sending::after { width: 100%; opacity: .4; } }
@keyframes send-line { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

/* 4 · tracked capitals sit dead centre: letter-spacing adds space after the last letter, so add the same before the first */
.btn { text-indent: .26em; }
.mobile-bar a { text-indent: .2em; }

/* 5 · one hover speed: underlined text links fade like everything else (they used to snap) */
.ext-link, .form-privacy a, .info dd a, .footer-bottom a, .social a, .done-note a { transition: color .2s ease, border-color .2s ease; }

.carousel { display: flow-root; } /* keeps the track's negative margin inside, so the arrows stay centred on the photo */
/* 6 · focus rings no longer cut off: the sliders get 8px of room (and a 16px gap between slides, so neighbours never peek in) */
.car-track, .gal-track { padding: 8px; margin: -8px; scroll-padding-inline: 8px; column-gap: 16px; outline-offset: -2px; }
.car-track { clip-path: none; }
.stat-link:focus-visible { outline-offset: -8px; } /* the stats band clips its edges, so the ring sits inside each box */

/* 7 · fields: focus is a 2px edge like every other ring on the site, shown instantly; a mouse-over lifts the border slightly */
.field input, .field select, .field textarea { transition: border-color .15s ease, box-shadow .15s ease; }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 1px var(--fg); transition: none; }
@media (hover: hover) and (pointer: fine) {
  .field input:hover:not(:focus):not([aria-invalid="true"]), .field select:hover:not(:focus), .field textarea:hover:not(:focus) { border-color: #555; }
}

/* 8 · 16px text in fields on touch screens: iPhones and iPads zoom the whole page in on anything smaller */
@media (max-width: 1100px), (pointer: coarse) {
  .field input, .field select, .field textarea,
  .enquiry-compact .field input, .enquiry-compact .field select, .enquiry-compact .field textarea { font-size: 16px; }
}

/* 9 · each problem shows under its own field and clears the moment it's fixed */
.field > .field-error, .field > .field-hint { margin-top: -3px; font-size: .82em; line-height: 1.45; }
.enquiry-compact .field > .field-error, .enquiry-compact .field > .field-hint { margin-top: -1px; font-size: 12.5px; }
.field-error { color: var(--error); }
/* 10 · the "did you mean" email suggestion */
.field-hint { color: var(--text-soft); }
.hint-fix { position: relative; font: inherit; color: var(--fg); background: none; border: 0; border-bottom: 1px solid var(--fg); padding: 0; cursor: pointer; overflow-wrap: anywhere; text-align: left; }
.hint-fix::after { content: ""; position: absolute; inset: -5px -4px -8px; } /* a finger-sized tap area without changing the look */

/* 11 · autofilled details keep the black field and white text (browsers otherwise tint them blue or yellow) */
.field input:-webkit-autofill, .field input:-webkit-autofill:hover, .field textarea:-webkit-autofill, .field select:-webkit-autofill {
  -webkit-text-fill-color: var(--fg); caret-color: var(--fg);
  -webkit-box-shadow: 0 0 0 100px var(--bg-raised) inset; box-shadow: 0 0 0 100px var(--bg-raised) inset;
}
.field input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 100px var(--bg-raised) inset, 0 0 0 1px var(--fg); box-shadow: 0 0 0 100px var(--bg-raised) inset, 0 0 0 1px var(--fg); }

/* 12 · sent: the message takes the card's place (no leftover "Get a quote", no box in a box), keeps its size, and arrives gently */
.enquiry.is-leaving { opacity: 0; transition: opacity .15s ease-out; }
.form-done { align-content: center; }
.hero-form.is-done { display: flex; flex-direction: column; justify-content: center; }
.hero-form.is-done > .label, .hero-form.is-done > .hero-form-title, .hero-form.is-done > .hero-form-text { display: none; }
.hero-form .form-done { border: 0; padding: 0; margin-top: 0; }
.done-tick { display: block; width: 36px; height: 36px; color: var(--fg); }
.form-done .addr { color: var(--fg); font-weight: 400; overflow-wrap: anywhere; }
.form-done .nowrap { white-space: nowrap; }
.done-note { color: var(--dim); font-size: .86em; }
.done-note a { color: var(--text-soft); border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .done-note a:hover { color: var(--fg); border-color: var(--fg); } }
@media (prefers-reduced-motion: no-preference) {
  .form-done.is-in { animation: done-in .35s var(--ease-out) both; }
  .form-done.is-in .done-tick path { stroke-dasharray: 19; stroke-dashoffset: 19; animation: tick-draw .45s .18s var(--ease-out) forwards; }
}
@keyframes done-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes tick-draw { to { stroke-dashoffset: 0; } }

/* 13 · couldn't-send panel: the two buttons pair up evenly */
.done-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.done-actions .btn { width: 100%; }

/* 14 · the quote card arrives with the headline (it used to wait half a second, then take a full second) */
@media (prefers-reduced-motion: no-preference) { .hero-form { animation: fade .4s .15s var(--ease-out) both; } }

/* ---------- service pages: before / after ---------- */
.svc-results .compare-figure { margin-top: clamp(24px, 2.4vw, 48px); }

/* ---------- gallery photo viewer: fade in and out (instant from the keyboard) ---------- */
.lightbox.is-leaving { pointer-events: none; } /* while it fades out, taps go to the page underneath */
@media (prefers-reduced-motion: no-preference) {
  .lightbox { transition: opacity .25s var(--ease-out); }
  .lightbox figure { transition: transform .25s var(--ease-out); }
  .lightbox.is-entering { opacity: 0; }
  .lightbox.is-entering figure { transform: scale(.96); }
  .lightbox.is-leaving { opacity: 0; transition-duration: .15s; } /* leaving is quicker than arriving */
}
@media (prefers-reduced-motion: reduce) { /* a plain fade, no growing */
  .lightbox { transition: opacity .15s ease; }
  .lightbox.is-entering, .lightbox.is-leaving { opacity: 0; }
}

/* ---------- ceramic coating: water-beading clip under the overview heading ---------- */
.ov-clip { margin: clamp(24px, 2.4vw, 48px) 0 0; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line-strong); background: var(--bg-raised); }
.ov-clip { position: relative; }
.ov-clip video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* pause / play: always available (looping video needs a way to stop it) */
.ov-clip-toggle { position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: rgba(0,0,0,.6); color: var(--fg); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: border-color .2s ease, scale .16s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .ov-clip-toggle:hover { border-color: var(--fg); } }
@media (prefers-reduced-motion: no-preference) { .ov-clip-toggle:active { scale: .97; } }
.ov-i-pause { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.ov-i-play { display: none; width: 0; height: 0; margin-left: 3px; border-block: 6px solid transparent; border-left: 10px solid currentColor; }
.ov-clip-toggle.is-paused .ov-i-pause { display: none; }
.ov-clip-toggle.is-paused .ov-i-play { display: block; }


/* ---------- mobile-native pass ---------- */
/* no grey/blue flash on tap; every tappable thing has its own press state instead */
html { -webkit-tap-highlight-color: transparent; }
a:not(.btn):not(.mb-call):not(.mb-quote):not(.stat-link):active, summary:active { opacity: .6; }
.menu-toggle { transition: opacity .2s ease; }
.menu-toggle:active { opacity: .6; transition-duration: .05s; }
/* gallery photos dim a touch under the finger (quick in, gentle out) */
.shot-btn:active img { opacity: .8; transition-duration: .8s, .1s; }
/* the stat boxes light up under the finger like a list row, at once (their slow reveal fade would otherwise lag the press) */
.stats .stat-link:active { background-color: #161616; transition-duration: .8s, .8s, 0s; }
.stats .stat-link:active .label { color: var(--fg); }
/* taps fire straight away (no double-tap-zoom wait); pinch zoom still works */
a, button, summary, label, input, select, textarea { touch-action: manipulation; }
/* holding a finger on a button doesn't select its label or pop up the link menu */
.btn, button, .mobile-bar a, .menu-toggle, .nav a, .mobile-menu nav a { -webkit-user-select: none; user-select: none; }
.btn, .mobile-bar a { -webkit-touch-callout: none; }
/* the menu scrolls on its own without dragging the page behind it, and its last button clears the home indicator */
.mobile-menu { overscroll-behavior: contain; padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
/* phones on their side: keep text and buttons clear of the notch and rounded corners */
.wrap { padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
.lb-close { right: max(16px, env(safe-area-inset-right, 0px)); }
.lightbox { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
/* photo viewer: the photo keeps to the middle column, so it stays centred when a section has one photo and the arrows are hidden */
@media (min-width: 601px) {
  .lb-prev { grid-column: 1; grid-row: 1; }
  .lightbox figure { grid-column: 2; grid-row: 1; }
  .lb-next { grid-column: 3; grid-row: 1; }
}
/* phones on their side: the photo and its caption fit the short screen, still clear of the Close button */
@media (orientation: landscape) and (max-height: 560px) {
  .lightbox { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); }
  .lightbox img { max-height: calc(100svh - 124px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
}

/* call / quote bar */
:root { --bar-h: 0px; }
@media (max-width: 900px) {
  :root { --bar-h: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .mobile-bar { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  body.has-mobile-bar { padding-bottom: var(--bar-h); }
  body.has-mobile-bar .home-hero { min-height: calc(100svh - var(--bar-h)); }
  /* while typing, the bar steps aside so it can't cover the field or ride up on the keyboard */
  body:has(.field :is(input, select, textarea):focus) .mobile-bar { display: none; }
}
/* phones on their side: a slimmer bar, so it doesn't take a quarter of the screen (the buttons stay 44px tall) */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 560px) {
  :root { --bar-h: calc(51px + max(6px, env(safe-area-inset-bottom, 0px))); }
  .mobile-bar { padding-top: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)); }
  .mobile-bar a { min-height: 44px; }
}
/* smaller phones (and bigger iPhones set to Display Zoom): tighter lettering, so the number never touches its border
   and both buttons stay the same width */
@media (max-width: 380px) { .mobile-bar a { letter-spacing: .14em; text-indent: .14em; } }
@media (max-width: 340px) { .mobile-bar a { font-size: 11px; letter-spacing: .1em; text-indent: .1em; } }

/* header: once the Menu button takes over (1100px and under) the logo stands alone; the slogan was too squeezed to read */
@media (max-width: 1100px) { .header-slogan { display: none; } }

/* home hero on phones and tablets: the photo, headline and strapline fill the first screen exactly (nothing cut off by
   the bottom of the screen or the call bar), and the quote card starts just below it, one swipe or one tap away */
@media (max-width: 1100px) {
  .home-hero.has-quote, body.has-mobile-bar .home-hero.has-quote { min-height: 0; }
  .home-hero.has-quote .home-hero-main {
    min-height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px) - clamp(40px, 6vw, 130px) - var(--bar-h) - 40px);
    justify-content: space-between;
  }
  .home-hero.has-quote .home-hero-inner.has-form { gap: clamp(64px, 9vw, 96px); }
  .home-hero.has-quote .hero-bg { bottom: auto; height: calc(100svh - var(--bar-h)); }
  .home-hero.has-quote .hero-bg::after { background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.3) 26%, rgba(0,0,0,.18) 52%, rgba(0,0,0,.74) 84%, #000 100%); }
  .home-hero.has-quote .scroll-cue { display: none; }
  #hero-quote { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 16px); }   /* on top of the page's header allowance */
}
/* held upright, the photo is cropped to its most striking part (set per photo in content.js: home.hero.phoneFocus) */
@media (max-width: 1100px) and (orientation: portrait) {
  .home-hero .hero-bg { background-position: var(--focus-phone, center); }
}
/* phones on their side: headline sized to the screen's height, strapline beside it, level with its last line */
@media (max-width: 1100px) and (orientation: landscape) and (max-height: 560px) {
  .h-hero { font-size: min(18.6vw, 19svh); }
  .hero-badge { margin-left: calc(min(18.6vw, 19svh) * 0.044); }
  .home-hero-inner { padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 16px); }
  .home-hero-main { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(28px, 5vw, 56px); align-content: start; align-items: end; }
  .home-hero-foot { justify-content: flex-end; }
  .hero-sub { max-width: 26em; }
  .home-hero.has-quote .home-hero-main { min-height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px) - 16px - var(--bar-h) - 24px); }
  /* inside pages: title sized to the screen's height and the stack above it tightened, so it clears the call bar */
  .h-page, .h-contact { font-size: min(10.5vw, 19svh); }
  .page-hero-inner, .page-contact .page-hero-inner { padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 16px); gap: 12px; }
}


/* ---------- break-ui pass: prices and quote form with worst-case content ---------- */
/* buttons in price rows and plan boxes stay inside their card: a long label wraps instead of running into the next card */
.price-row .btn, .option-price .btn, .care-plan-buttons .btn, .price-empty .btn { max-width: 100%; white-space: normal; text-align: center; }
/* a price keeps each amount whole but may wrap between words ("From $1,099 / inc. GST") rather than run out of its card */
.price { white-space: normal; text-wrap: balance; }
/* option rows on phones: the text column no longer stretches to fit the price and button side by side */
@media (max-width: 600px) { .option { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1100px) { .option-price { flex-wrap: wrap; row-gap: 14px; } }
/* with no description, the price still sits in the right-hand column */
@media (min-width: 1101px) { .option-price { grid-column: 3; } }

/* "Most popular" style badges stay on one line inside the card; anything longer ends in "…" (full text on hover) */
.tier { --tier-pl: clamp(20px, 2.65vw, 56px); --tier-pr: clamp(20px, 2.65vw, 56px); }
.tiers-4 .tier { --tier-pl: clamp(18px, 2vw, 44px); --tier-pr: clamp(18px, 2vw, 44px); }
@media (min-width: 901px) and (max-width: 1250px) { .tiers-4 .tier { --tier-pl: 16px; --tier-pr: 16px; } .tiers-4 .tier:first-child { --tier-pl: 0px; } }
@media (max-width: 900px) { .tier, .tiers-plain .tier { --tier-pl: 0px; --tier-pr: 0px; } }
.badge { left: var(--tier-pl); max-width: calc(100% - var(--tier-pl) - var(--tier-pr)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* package grids follow the number of packages: one or two fill the row, five or more wrap in rows of three with clean dividers */
@media (min-width: 901px) {
  .tiers-1 { grid-template-columns: minmax(0, 1fr); }
  .tiers-1 .tier > :not(.price-row) { max-width: 44em; }
  .tiers-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiers-many .tier:nth-child(3n+1) { border-left: 0; }
  .tiers-many .tier:nth-child(n+4) { border-top: 1px solid var(--line); }
}

/* specialised coatings grid: the dividers belong to the cards, so an odd number of cards leaves a clean gap, not a grey block */
.spec-grid { background: none; gap: 0; border: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.spec-item { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 561px) { .spec-grid.spec-1 { grid-template-columns: minmax(0, 1fr); } .spec-grid.spec-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.spec-1 .spec-item > :not(.price-row) { max-width: 44em; }
/* narrow cards stack the price over the button, so prices line up across the row whatever their length */
.spec-item { container-type: inline-size; }
@container (max-width: 250px) { .spec-item .price-row { flex-direction: column; align-items: flex-start; } }

/* a price list with nothing in it says how to get a price */
.price-empty { margin-top: clamp(32px, 3.4vw, 72px); padding-block: clamp(24px, 2.4vw, 44px); border-block: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.price-empty .body { max-width: 44em; }
.price-empty + .svc-note { border-top: 0; padding-top: 0; }

/* every button is a full 44px tall on touch screens */
@media (pointer: coarse) { .btn { min-height: 44px; } }

/* quote form */
/* the chosen service stops short of the arrow in the compact (home) form too */
.enquiry-compact .select select { padding-right: 2.75em; text-overflow: ellipsis; }
.select select { text-overflow: ellipsis; }
/* small laptops and tablets on their side: the form beside the heading is too narrow for two fields a row, so choices
   like "Large 4WD / ute / van" were cut off; it goes one field per row there */
@media (min-width: 901px) and (max-width: 1150px) { .cta-with-form .form-grid { grid-template-columns: minmax(0, 1fr); } }
/* the suggested address: underline follows the text when a long address wraps, and the "?" stays with it */
.hint-fix { border-bottom: 0; }
.hint-fix .hint-addr { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }


/* ---------- high-end pass (approved 16 Oct): home landing page, How it works / reviews / stats, body text ---------- */
:root {
  --space: clamp(72px, 10vw, 192px);     /* gap above a section */
  --space-in: clamp(40px, 4.4vw, 88px);  /* heading to what it introduces */
}

/* home landing page and header: kept exactly as they were (the bigger body text below doesn't reach them) */
.home-hero { font-size: clamp(15px, 1.05vw, 19px); line-height: 1.6; --text: #9a9a9a; }
.site-header { font-size: clamp(15px, 1.05vw, 19px); line-height: 1.6; }

/* body text a size up and a touch lighter on every page (15px to 17px on a laptop, 16px on phones);
   the text inside price cards stays exactly the size it was */
:root { --fs-body: clamp(16px, 1.18vw, 19px); --text: #a8a8a8; }
body { line-height: 1.65; }
.tier .body, .spec-item .body { font-size: clamp(15px, 1.05vw, 19px); }
.dash-list { font-size: calc(clamp(15px, 1.05vw, 19px) * .93); }

/* How it works: no dividers between the steps; a fine line over each step and space between them */
.how { padding-top: var(--space); }
.how-steps { margin-top: var(--space-in); }
@media (min-width: 801px) {
  .how-steps { border-top: 0; column-gap: clamp(32px, 4vw, 80px); }
  .how-steps li, .how-steps li:first-child, .how-steps li + li { padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
.how-steps .body { text-wrap: pretty; }

/* reviews: no boxes; a fine line over each review, names and services in normal case */
.reviews { padding-top: var(--space); }
.review-grid { background: none; border: 0; gap: 48px clamp(32px, 4vw, 80px); margin-top: var(--space-in); }
.review { background: none; padding: 28px 0 0; border-top: 1px solid var(--line); }
.review-text { text-wrap: pretty; }
.review footer { text-transform: none; letter-spacing: 0; font-size: 14px; }
.review-name { color: var(--fg); font-weight: 500; }
.reviews-summary { text-transform: none; letter-spacing: 0; font-size: 15px; }
.reviews .reviews-link { letter-spacing: .18em; }

/* live Google reviews (filled in by /api/reviews): the review's date beside the name, unfilled stars dimmed, a link to the review */
.review-when { color: var(--dim); }
.review-when::before { content: "· "; }
.review .stars-off { color: var(--line); }
a.review-name { text-decoration: none; }
a.review-name:hover { text-decoration: underline; }
.review-google { text-decoration: none; }
.review-google:hover { text-decoration: underline; }

/* stats: a quiet row with no dividers or bands; captions in normal case (the whole item still lights up on hover) */
.stats { border-block: 0; margin-top: var(--space); --stat-pad: min(24px, var(--gutter)); }
.page-about .stats { margin-top: var(--space-in); }   /* About: the row keeps clear of the list above now it has no band */
.stats-grid.wrap { padding-inline: calc(max(var(--gutter), env(safe-area-inset-left, 0px)) - var(--stat-pad)) calc(max(var(--gutter), env(safe-area-inset-right, 0px)) - var(--stat-pad)); }
.stats .stat.stat:nth-child(n) { border: 0; padding: 28px var(--stat-pad) 32px; }
.stat .label { text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--text); }
@media (hover: hover) and (pointer: fine) { .stat-link:hover { background: #0e0e0e; } }

/* Services page: links to the four price sections, shown on phones only (on a laptop the first prices are already in view) */
.jump { display: none; }
@media (max-width: 900px) {
  .jump { display: block; background: var(--bg); border-bottom: 1px solid var(--line); }
  .jump-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 14px; padding-bottom: 14px; }
  .jump a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 10px; border: 1px solid var(--line-strong);
    font-size: 11px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--fg); text-align: center; }
  .jump a:active { background: var(--fg); color: var(--bg); }
}