/* ==========================================================================
   GLOSSWORX Auto Care
   Plain CSS, mobile first. No build step.

   1. Fonts            5. Buttons, cards, shared parts    9. Add-ons
   2. Tokens           6. Header and navigation          10. Before you book
   3. Base             7. Hero                           11. Request a call or quote
   4. Layout           8. Packages, ceramic coating      12. Footer, mobile bar
                                                         13. Motion, print
   ========================================================================== */

/* 1. Fonts (self-hosted) --------------------------------------------------- */

@font-face {
  font-family: "Archivo Expanded";
  src: url("../fonts/archivo-expanded.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched system fallbacks, so text does not jump when the web fonts arrive. */
@font-face {
  font-family: "Archivo Expanded Fallback";
  src: local("Arial Black"), local("Arial-Black"), local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 111%;
  ascent-override: 79%;
  descent-override: 19%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 107.1%;
  ascent-override: 90.6%;
  descent-override: 22.4%;
  line-gap-override: 0%;
}

/* 2. Tokens ---------------------------------------------------------------- */

:root {
  /* Brand blue, sampled from an opaque pixel of the logo artwork: rgb(43, 128, 208) */
  --blue: #2B80D0;
  --blue-700: #1C5C9A; /* shade: pressed states */
  --blue-400: #4E99E3; /* tint: hover on blue fills */
  --blue-300: #7DB6EE; /* tint: links and small text on dark (AA on every surface) */
  --blue-200: #B5D5F5; /* tint: highlights */
  --blue-rgb: 43, 128, 208;

  /* Neutrals */
  --ink: #050608; /* text on blue */
  --bg: #08090B; /* page */
  --bg-alt: #0B0D10; /* alternate section */
  --surface: #101317; /* cards */
  --surface-2: #161A1F; /* raised parts of cards */
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.15);
  --text: #F5F7FA;
  --text-2: #B4BCC8; /* secondary text */
  --text-3: #939CA9; /* fine print */

  /* Type */
  --font-display: "Archivo Expanded", "Archivo Expanded Fallback", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-h1: clamp(1.75rem, 1.1rem + 3.4vw, 3.75rem);
  --fs-h2: clamp(1.5rem, 1.15rem + 1.8vw, 2.5rem);
  --fs-h3: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.9375rem;
  --fs-fine: 0.875rem;
  --fs-label: 0.8125rem;

  /* One spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --section: clamp(3rem, 2.2rem + 3.6vw, 5.5rem);
  --gutter: clamp(1rem, 0.4rem + 3.6vw, 2.5rem);
  --card-pad: clamp(1rem, 0.72rem + 1.3vw, 2rem);

  /* Shape, depth, motion */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --shadow-card: 0 30px 60px -40px rgba(0, 0, 0, 0.9), 0 2px 6px rgba(0, 0, 0, 0.3);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 64px;
  --bar-h: 62px;
  --max: 1200px;
}

@media (min-width: 1100px) {
  :root {
    --header-h: 76px;
  }
}

/* What stays put while the page scrolls: the header (only once the page is scripted, when the
   navigation has folded into a menu button and the header is one slim row) and, on phones, the
   call / request bar. On a very short screen (a phone on its side, or a desktop zoomed right in)
   neither stays put: together they would take half the height. Everything that has to stop clear
   of them reads these two values. */
:root {
  --sticky-top: 0px;
  --sticky-bottom: 0px;
}

.js {
  --sticky-top: var(--header-h);
}

@media (max-width: 767.98px) {
  :root {
    --sticky-bottom: var(--bar-h);
  }
}

@media (max-height: 479.98px) {
  :root,
  .js {
    --sticky-top: 0px;
    --sticky-bottom: 0px;
  }
}

/* 3. Base ------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Jumps between sections are instant by default; site.js makes the short ones smooth. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: dark;
  background: var(--bg);
}

/* Whatever the browser scrolls to (the skip link's target, a section link, or keyboard focus) stops
   clear of the sticky header and the phone bar. Set on the targets rather than as scroll-padding on
   the page, which would make the page jump whenever something inside the header itself took focus. */
main,
main [id],
main :is(a, button, summary, input, select, textarea),
.site-footer a {
  scroll-margin-top: calc(var(--sticky-top) + 1rem);
  scroll-margin-bottom: calc(var(--sticky-bottom) + 1rem);
}

/* While the phone menu is open the page behind it does not scroll. */
html.menu-open {
  overflow: hidden;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-width: 320px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--text);
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--fs-h1);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

a {
  color: var(--blue-300);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--blue-200);
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--blue-300);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--blue);
  color: var(--ink);
}

[hidden] {
  display: none !important;
}

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

/* Phone numbers never break across lines. */
[data-config="phone"],
.nowrap {
  white-space: nowrap;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--blue);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  color: var(--ink);
}

/* 4. Layout ---------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section);
}

.section--alt {
  background: var(--bg-alt);
  border-block: 1px solid var(--line);
}

.section__title,
.section__head {
  margin-bottom: clamp(1.25rem, 0.95rem + 1.4vw, 2.25rem);
}

.section__head {
  max-width: 44rem;
}

.section__intro {
  margin-top: var(--s-3);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.6;
  color: var(--text-2);
}

/* 5. Buttons, cards, shared parts ------------------------------------------ */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 48px;
  padding: 0.75rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  text-wrap: balance;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.btn .icon {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 2;
}

.btn--lg {
  min-height: 56px;
  padding: 0.9375rem 1.75rem;
  font-size: 0.9375rem;
}

.btn--block {
  display: flex;
  width: 100%;
}

/* Brand blue fill with near-black text (white on this blue fails contrast). */
.btn--primary {
  background: linear-gradient(180deg, #3F92E0 0%, var(--blue) 100%);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 24px -12px rgba(var(--blue-rgb), 0.9);
}

.btn--primary:hover {
  background: linear-gradient(180deg, #6AADEC 0%, var(--blue-400) 100%);
  color: var(--ink);
  transform: translateY(-1px);
}

.btn--outline {
  border-color: rgba(125, 182, 238, 0.5);
  background: rgba(var(--blue-rgb), 0.08);
  color: var(--text);
}

.btn--outline:hover {
  border-color: var(--blue-300);
  background: rgba(var(--blue-rgb), 0.18);
  color: var(--text);
  transform: translateY(-1px);
}

.btn--ghost {
  border-color: var(--line-2);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
}

.btn--ghost:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary:active {
  box-shadow: inset 0 2px 8px var(--blue-700);
}

/* Cards: hairline gradient border, faint top highlight, soft depth. */
.card {
  position: relative;
  overflow: hidden;
  padding: var(--card-pad);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.06) 38%, rgba(255, 255, 255, 0.05) 100%) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow-card);
}

.card--feature {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(var(--blue-rgb), 0.16) 0%, rgba(var(--blue-rgb), 0) 70%) padding-box,
    linear-gradient(180deg, #171D25 0%, var(--surface) 100%) padding-box,
    linear-gradient(180deg, rgba(125, 182, 238, 0.75) 0%, rgba(var(--blue-rgb), 0.22) 40%, rgba(255, 255, 255, 0.07) 100%) border-box;
}

/* Restrained sheen that crosses a card once when the pointer arrives. */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.055) 50%, rgba(255, 255, 255, 0) 62%);
  transform: translateX(-101%);
  pointer-events: none;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card:hover::after {
    transform: translateX(101%);
    transition: transform 1.1s var(--ease);
  }
}

.label {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: var(--blue-300);
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.03);
}

.tag--blue {
  border-color: rgba(125, 182, 238, 0.45);
  color: var(--blue-200);
  background: rgba(var(--blue-rgb), 0.14);
}

/* Lists with four-point sparkle bullets, matching the logo. */
.ticks {
  display: grid;
  gap: 0.625rem;
}

.ticks li {
  position: relative;
  padding-left: 1.75rem;
  line-height: 1.5;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0.125rem;
  top: 0.32em;
  width: 0.875rem;
  height: 0.875rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232B80D0' d='M12 0C12 8 16 12 24 12 16 12 12 16 12 24 12 16 8 12 0 12 8 12 12 8 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The client's notes, as small print. */
.note {
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  border-left: 2px solid rgba(var(--blue-rgb), 0.7);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: rgba(255, 255, 255, 0.025);
  font-size: var(--fs-fine);
  line-height: 1.6;
  color: var(--text-2);
}

.note__title {
  margin-bottom: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text);
}

.note p + p {
  margin-top: var(--s-3);
}

/* A native <details> ("What's included", "Protection benefits:"). The summary is laid out with
   padding and positioning (not flex or grid) so it also holds up in older Safari. */

.more__summary {
  position: relative;
  display: block;
  min-height: 3rem;
  padding: 0.75rem 2.5rem 0.75rem 0;
  border-radius: var(--r-sm);
  font-weight: 600;
  line-height: 1.5;
  color: var(--blue-300);
  list-style: none;
  cursor: pointer;
}

.more__summary::-webkit-details-marker {
  display: none;
}

.more__summary:hover {
  color: var(--blue-200);
}

.more__chevron {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: -0.75rem;
  transition: transform 0.25s var(--ease);
}

.more[open] > .more__summary .more__chevron {
  transform: rotate(180deg);
}

.more__body {
  display: grid;
  gap: var(--s-4);
  padding-block: var(--s-2) var(--s-3);
}

/* On its own (not inside a card) the block gets a box of its own. */
.more--box {
  padding-inline: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.2s var(--ease);
}

.more--box[open] {
  border-color: var(--line-2);
}

.more--box > .more__summary {
  min-height: 3.5rem;
  padding-block: 1rem;
}

/* 6. Header and navigation ------------------------------------------------- */

/* Solid, so the brand-blue name keeps its AA contrast whatever scrolls underneath.
   Without JavaScript the navigation is a block of links under the logo, so the header scrolls away
   with the page; it only sticks once it is the slim one-row version (and not on a very short screen). */
.site-header {
  position: relative;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.js .site-header {
  position: sticky;
  top: 0;
}

@media (max-height: 479.98px) {
  .js .site-header {
    position: relative;
  }
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--s-5);
  min-height: var(--header-h);
}

/* Home link: the GX mark with the name beside it as live text, stacked the way the logo stacks it. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  flex: none;
  color: var(--text);
  text-decoration: none;
}

.brand:hover {
  color: var(--text);
}

.brand__mark {
  flex: none;
  width: 96px;
  height: 40px;
}

.brand__name {
  display: grid;
  gap: 0.25rem;
  line-height: 1;
  white-space: nowrap;
}

.brand__word {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--blue);
}

.brand__sub {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text);
}

/* Very small phones: a slightly smaller mark and a tighter gap, so the name stays on one row
   beside the menu button with room to spare. */
@media (max-width: 359.98px) {
  .site-header__inner {
    column-gap: var(--s-3);
  }

  .brand {
    gap: 0.5rem;
  }

  .brand__mark {
    width: 78px;
    height: 32.5px;
  }

  .brand__word {
    font-size: 0.875rem;
  }
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: -0.5rem;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  cursor: pointer;
}

.nav-toggle .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.nav-toggle__close,
.nav-toggle[aria-expanded="true"] .nav-toggle__open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
  display: block;
}

/* Without JavaScript the links simply sit under the logo. */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  width: 100%;
  padding-bottom: var(--s-3);
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-4);
  list-style: none;
}

.site-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.site-nav__list a:hover,
.site-nav__list a[aria-current="true"] {
  color: var(--text);
}

.site-nav__cta {
  min-height: 44px;
  padding-block: 0.5rem;
  white-space: nowrap;
}

/* With JavaScript, small screens get a menu button that opens a panel. */
@media (max-width: 1099.98px) {
  .js .nav-toggle {
    display: inline-flex;
  }

  .js .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: block;
    width: auto;
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--s-2) var(--gutter) var(--s-5);
    background: var(--bg);
    border-bottom: 1px solid var(--line-2);
    /* The spread shadow dims the page below the open menu; the clip keeps it off the header itself. */
    box-shadow: 0 0 0 100vmax rgba(4, 5, 6, 0.72);
    clip-path: inset(0 -100vmax -100vmax -100vmax);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s linear 0.2s;
  }

  .js .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  .js .site-nav__list {
    display: block;
  }

  .js .site-nav__list li {
    border-bottom: 1px solid var(--line);
  }

  .js .site-nav__list a {
    display: flex;
    min-height: 56px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
  }

  .js .site-nav__cta {
    display: flex;
    min-height: 52px;
    margin-top: var(--s-5);
  }
}

@media (min-width: 1100px) {
  .site-header__inner {
    flex-wrap: nowrap;
  }

  .site-nav {
    width: auto;
    padding-bottom: 0;
    gap: var(--s-5);
    flex-wrap: nowrap;
  }

  .site-nav__list {
    flex-wrap: nowrap;
    gap: 0 var(--s-4);
  }

  .site-nav__list a {
    position: relative;
    white-space: nowrap;
  }

  .site-nav__list a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    height: 2px;
    border-radius: 2px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s var(--ease);
  }

  .site-nav__list a:hover::after,
  .site-nav__list a[aria-current="true"]::after {
    transform: scaleX(1);
  }

  .site-nav__cta {
    padding-inline: 1rem;
    font-size: 0.8125rem;
  }
}

/* Room to spare: the brand and the navigation at full size. */
@media (min-width: 1280px) {
  .brand {
    gap: 0.75rem;
  }

  .brand__mark {
    width: 110px;
    height: 46px;
  }

  .brand__word {
    font-size: 1.0625rem;
  }

  .brand__sub {
    font-size: 0.75rem;
  }

  .site-nav {
    gap: var(--s-6);
  }

  .site-nav__list {
    gap: 0 clamp(1.25rem, 2vw, 2rem);
  }

  .site-nav__cta {
    padding-inline: 1.375rem;
    font-size: 0.875rem;
  }
}

/* 7. Hero ------------------------------------------------------------------ */

/* The gloss is all in the surface: black paint, studio light strips, a blue glow and one slow
   passing light. Nothing here touches the logo, which sits on top exactly as supplied. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(90% 46% at 50% 88%, rgba(var(--blue-rgb), 0.2) 0%, rgba(var(--blue-rgb), 0) 70%),
    linear-gradient(180deg, #0C0E12 0%, #07080A 58%, #040506 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: -2;
  background:
    linear-gradient(104deg, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, 0.05) 21%, rgba(255, 255, 255, 0.018) 27%, rgba(255, 255, 255, 0) 31%),
    linear-gradient(104deg, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0.075) 54.5%, rgba(255, 255, 255, 0.03) 60%, rgba(255, 255, 255, 0) 66%),
    linear-gradient(104deg, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.04) 82%, rgba(255, 255, 255, 0) 88%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 4%, #000 34%, #000 62%, rgba(0, 0, 0, 0) 96%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 4%, #000 34%, #000 62%, rgba(0, 0, 0, 0) 96%);
  pointer-events: none;
}

/* The slow passing light. It lives behind the content (and behind the logo). */
.hero::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 34%;
  z-index: -1;
  background: linear-gradient(104deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 46%, rgba(255, 255, 255, 0.02) 58%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-130%);
  pointer-events: none;
}

.hero__inner {
  display: grid;
  gap: var(--s-5);
  padding-block: clamp(1.25rem, 0.7rem + 2.8vw, 3.5rem) clamp(1.75rem, 1.2rem + 2.8vw, 3.5rem);
}

.hero__line {
  margin-top: var(--s-3);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  margin-top: var(--s-5);
}

.hero__actions .btn {
  flex: 1 1 14rem;
}

/* The second action: a plain text link under the button on phones, a button from tablet width up. */
.hero__call {
  display: none;
}

.hero__call-link {
  display: block;
  flex: 1 1 100%;
  padding-block: 0.625rem;
  font-weight: 500;
  line-height: 1.5rem;
  text-align: center;
}

/* What is on offer: four links, straight under the buttons. */
.offers {
  display: grid;
  gap: var(--s-2);
}

.offer {
  position: relative;
  display: block;
  height: 100%;
  min-height: 3.75rem;
  padding: 0.625rem 3rem 0.625rem var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r);
  background:
    linear-gradient(180deg, rgba(22, 26, 31, 0.92), rgba(16, 19, 23, 0.92)) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06) 60%) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}

.offer:hover {
  color: var(--text);
  transform: translateY(-2px);
  background:
    linear-gradient(180deg, #1A2029, var(--surface)) padding-box,
    linear-gradient(180deg, rgba(125, 182, 238, 0.8), rgba(var(--blue-rgb), 0.2) 60%) border-box;
}

.offer__name {
  display: block;
  font-weight: 600;
  line-height: 1.3;
}

/* A tile with no price line: centre the name against the arrow. */
.offer__name:only-of-type {
  padding-block: 0.625rem;
}

.offer__price {
  display: block;
  margin-top: 0.125rem;
  font-size: var(--fs-fine);
  line-height: 1.35;
  color: var(--text-2);
}

.offer__num {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.offer__price--assess {
  font-weight: 600;
  color: var(--blue-300);
}

.offer__arrow {
  position: absolute;
  right: var(--s-4);
  top: 50%;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.625rem;
  color: var(--blue-300);
  transition: transform 0.2s var(--ease);
}

.offer:hover .offer__arrow {
  transform: translateX(3px);
}

/* The logo: on phones it follows the offers at a restrained size (60% of the screen width). */
.hero__logo {
  justify-self: center;
  width: min(60vw, 18rem);
  margin-top: var(--s-2);
}

.hero__logo img {
  width: 100%;
}

@media (min-width: 600px) {
  .hero__actions .btn {
    flex: 0 1 auto;
  }

  .hero__actions {
    gap: var(--s-3);
  }

  .hero__call {
    display: inline-flex;
  }

  .hero__call-link {
    display: none;
  }

  .offers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
  }
}

@media (min-width: 900px) {
  .hero {
    background:
      radial-gradient(40% 58% at 78% 36%, rgba(var(--blue-rgb), 0.24) 0%, rgba(var(--blue-rgb), 0) 72%),
      linear-gradient(180deg, #0C0E12 0%, #07080A 58%, #040506 100%);
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    grid-template-areas:
      "copy logo"
      "offers offers";
    align-items: center;
    gap: var(--s-7) var(--s-8);
  }

  .hero__copy {
    grid-area: copy;
  }

  .offers {
    grid-area: offers;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .offer {
    padding-block: var(--s-4);
  }

  .hero__logo {
    grid-area: logo;
    justify-self: end;
    width: 100%;
    max-width: 30rem;
    margin-top: 0;
  }
}

/* 8. Packages -------------------------------------------------------------- */

.packages {
  display: grid;
  gap: var(--s-4);
}

.pkg {
  padding-bottom: calc(var(--card-pad) - 0.5rem);
}

.pkg__top {
  display: grid;
  gap: var(--s-5);
  align-content: start;
}

.pkg__head h3 {
  font-size: clamp(1.1875rem, 1.05rem + 0.8vw, 1.5rem);
  font-weight: 800;
}

.pkg__desc {
  color: var(--text-2);
}

.pkg__head .pkg__desc {
  margin-top: var(--s-2);
}

/* The price rows adapt to the width of their own block. */
.pkg__pricing {
  container-type: inline-size;
}

.pkg__pricing .label {
  margin-bottom: var(--s-3);
}

.prices {
  border-top: 1px solid var(--line-2);
}

.price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.price__size {
  display: grid;
  min-width: 0;
  line-height: 1.35;
}

.price__name {
  font-weight: 600;
  color: var(--text);
}

.price__type {
  font-size: var(--fs-small);
  color: var(--text-2);
}

/* On a narrow card the size sits above its vehicle types, so the dash is kept for screen readers only. */
.price__dash {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.price__amount {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex: none;
  white-space: nowrap;
}

.price__from {
  font-size: var(--fs-fine);
  font-weight: 500;
  color: var(--text-2);
}

.price__num {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* The narrowest phones: "From" sits above a slightly smaller figure, which leaves the size
   label and its vehicle types one clean line each. */
@media (max-width: 359.98px) {
  .price {
    gap: var(--s-3);
  }

  .price__amount {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
  }

  .price__from {
    font-size: var(--fs-label);
    line-height: 1;
  }

  .price__num {
    font-size: 1.5rem;
  }
}

@container (min-width: 26rem) {
  .price__size {
    display: block;
  }

  .price__dash {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    color: var(--text-3);
  }

  .price__type {
    font-size: inherit;
  }
}

.pkg__more {
  margin-top: var(--s-5);
}

.pkg__more > .more__summary {
  border-top: 1px solid var(--line);
}

.includes {
  display: grid;
  gap: var(--s-5);
}

.includes h5 {
  margin-bottom: var(--s-3);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}

.includes .ticks {
  color: var(--text-2);
  font-size: var(--fs-small);
}

@media (min-width: 900px) {
  .packages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-5);
    align-items: start;
  }

  /* Side by side, each card is laid out as two pieces of one grid. Its top (name, pricing, button)
     shares three rows with the other card, so the two always line up and are the same height when
     closed. Its "What's included" sits underneath at its own height, so opening one card never
     stretches or moves the other. The two pieces are drawn to read as a single card. */
  @supports (grid-template-rows: subgrid) {
    .packages {
      grid-template-rows: repeat(4, auto);
      row-gap: 0;
    }

    .pkg {
      display: contents;
    }

    .pkg::after {
      content: none;
    }

    .pkg:nth-child(1) > * {
      grid-column: 1;
    }

    .pkg:nth-child(2) > * {
      grid-column: 2;
    }

    .pkg__top {
      grid-row: 1 / span 3;
      grid-template-rows: subgrid;
      padding: var(--card-pad) var(--card-pad) var(--s-5);
      border: 1px solid transparent;
      border-bottom: 0;
      border-radius: var(--r-lg) var(--r-lg) 0 0;
      background:
        linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%) padding-box,
        linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.06) 38%, rgba(255, 255, 255, 0.05) 100%) border-box;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .card--feature > .pkg__top {
      background:
        radial-gradient(120% 60% at 50% 0%, rgba(var(--blue-rgb), 0.16) 0%, rgba(var(--blue-rgb), 0) 70%) padding-box,
        linear-gradient(180deg, #171D25 0%, var(--surface) 100%) padding-box,
        linear-gradient(180deg, rgba(125, 182, 238, 0.75) 0%, rgba(var(--blue-rgb), 0.22) 40%, rgba(255, 255, 255, 0.07) 100%) border-box;
    }

    .pkg__more {
      grid-row: 4;
      align-self: start;
      margin-top: 0;
      padding: 0 var(--card-pad) calc(var(--card-pad) - 0.5rem);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-top: 0;
      border-radius: 0 0 var(--r-lg) var(--r-lg);
      background: var(--surface);
      box-shadow: var(--shadow-card);
    }

    .card--feature > .pkg__more {
      border-color: rgba(255, 255, 255, 0.07);
    }
  }
}

/* 8b. Ceramic coating ------------------------------------------------------ */

.ceramic {
  display: grid;
  gap: var(--s-5);
}

.ceramic__main {
  display: grid;
  gap: var(--s-4);
  align-content: start;
}

.ceramic__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-top: calc(-1 * var(--s-1));
}

.ceramic__price {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--blue-300);
}

.callout {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid rgba(125, 182, 238, 0.32);
  border-radius: var(--r);
  background: rgba(var(--blue-rgb), 0.09);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text);
}

.callout .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--blue-300);
}

.callout a {
  display: inline-block;
  padding-block: 0.75rem;
  margin-block: -0.75rem;
  font-weight: 600;
}

/* The two tap-to-open blocks: what's included, and the protection benefits. */
.ceramic__details {
  display: grid;
  gap: var(--s-2);
  align-content: start;
}

.timeline {
  list-style: none;
  counter-reset: step;
}

.timeline li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  padding-left: 3.25rem;
  margin-bottom: var(--s-3);
  counter-increment: step;
  font-weight: 500;
  line-height: 1.4;
}

.timeline li:last-child {
  margin-bottom: 0;
}

.timeline li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--surface-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.timeline li::after {
  content: "";
  position: absolute;
  left: calc(1.25rem - 0.5px);
  top: 2.5rem;
  width: 1px;
  height: calc(100% - 2.5rem + var(--s-3));
  background: var(--line-2);
}

.timeline li:last-child::after {
  display: none;
}

.timeline .timeline__key {
  color: var(--text);
  font-weight: 600;
}

.timeline .timeline__key::before {
  border-color: transparent;
  background: linear-gradient(180deg, #3A8EDD 0%, var(--blue) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 5px rgba(var(--blue-rgb), 0.16);
  color: var(--ink);
}

.benefits {
  font-weight: 500;
}

.footnote {
  font-size: var(--fs-fine);
  line-height: 1.6;
  color: var(--text-3);
}

@media (min-width: 600px) {
  .ceramic__main > .btn {
    justify-self: start;
  }
}

@media (min-width: 900px) {
  .ceramic {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
}

/* 9. Add-ons --------------------------------------------------------------- */

/* Eight rows: one after another on phones, two columns of four on wide screens. Each column is its
   own list, so opening a row only moves the rows beneath it in the same column. */
.addons,
.addons__col {
  display: grid;
  gap: var(--s-2);
  align-content: start;
}

.addon {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.2s var(--ease);
}

.addon[open] {
  border-color: var(--line-2);
}

.addon__summary {
  position: relative;
  display: block;
  min-height: 4rem;
  padding: 0.75rem 3.25rem 0.75rem var(--s-4);
  border-radius: var(--r);
  list-style: none;
  cursor: pointer;
}

.addon__summary::-webkit-details-marker {
  display: none;
}

.addon__summary h3 {
  font-size: 1rem;
  line-height: 1.3;
}

.addon__price {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--fs-fine);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-2);
}

.addon__num {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.addon__price--assess {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--blue-300);
}

.addon__chevron {
  position: absolute;
  right: var(--s-4);
  top: 50%;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: -0.75rem;
  color: var(--text-2);
  transition: transform 0.25s var(--ease);
}

.addon[open] .addon__chevron {
  transform: rotate(180deg);
}

.addon__summary:hover .addon__chevron {
  color: var(--text);
}

.addon__body {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-1) var(--s-4) var(--s-4);
}

.addon__desc {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text);
}

.addon__cond {
  font-size: var(--fs-fine);
  line-height: 1.55;
  color: var(--text-3);
}

.addon__cond--included {
  color: var(--blue-200);
}

@media (min-width: 800px) {
  .addons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-4);
    align-items: start;
  }

  .addons__col {
    gap: var(--s-3);
  }
}

/* 10. Before you book ------------------------------------------------------ */

.policies {
  display: grid;
  gap: var(--s-2);
}

.policy {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.2s var(--ease);
}

.policy[open] {
  border-color: var(--line-2);
}

/* Title, one-line summary and a chevron. */
.policy__summary {
  position: relative;
  display: block;
  padding: 0.875rem 3.25rem 0.875rem var(--s-4);
  border-radius: var(--r);
  list-style: none;
  cursor: pointer;
}

.policy__summary::-webkit-details-marker {
  display: none;
}

.policy__summary h3 {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
}

.policy__line {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--text-2);
}

.policy__chevron {
  position: absolute;
  right: var(--s-4);
  top: 50%;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: -0.75rem;
  color: var(--text-2);
  transition: transform 0.25s var(--ease);
}

.policy[open] .policy__chevron {
  transform: rotate(180deg);
}

.policy__summary:hover .policy__chevron {
  color: var(--text);
}

.policy__body {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-1) var(--s-4) var(--s-4);
  font-size: var(--fs-small);
  color: var(--text-2);
}

.policy__body .ticks {
  color: var(--text);
}

.book__closing {
  margin-top: var(--s-4);
  font-size: var(--fs-fine);
  line-height: 1.55;
  color: var(--text-3);
}

/* Wide screens: the heading stays beside a single column held to a comfortable reading width. */
@media (min-width: 1000px) {
  .book {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }

  .book > .section__title {
    position: sticky;
    top: calc(var(--sticky-top) + var(--s-6));
    margin-bottom: 0;
  }

  .book__main {
    max-width: 46rem;
  }

  .policy__summary {
    padding-block: var(--s-4);
  }

  .policy__body {
    padding-bottom: var(--s-5);
  }
}

/* 11. Request a call or quote ---------------------------------------------- */

.request {
  display: grid;
  gap: var(--s-5);
}

.request__main {
  min-width: 0;
}

.request-fallback p {
  font-size: var(--fs-lead);
}

.request-fallback__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-4);
}

.request-fallback__actions .btn {
  flex: 1 1 auto;
  min-width: 0;
}

/* The address is set in the narrower text face and sized to the screen, so it stays inside its button. */
.request-fallback__actions [data-contact="email"] {
  font-family: var(--font-body);
  font-size: clamp(0.8125rem, 4vw, 0.9375rem);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 479.98px) {
  .request-fallback {
    padding: var(--s-3);
  }

  .request-fallback__actions .btn {
    flex-basis: 100%;
    gap: 0.375rem;
    padding-inline: 0.5rem;
  }
}

/* The form builds its message with JavaScript, so without it the plain contact buttons above are
   shown instead. The choice is made here, from the js class the page sets before first paint, so
   the form is laid out from the start and nothing is swapped once the script has loaded. */
.request-form {
  display: none;
  gap: var(--s-4);
}

.js .request-form {
  display: grid;
}

.js .request-fallback {
  display: none;
}

.request-form::after {
  display: none;
}

.fields {
  display: grid;
  gap: var(--s-4);
}

.field {
  display: grid;
  gap: var(--s-2);
  align-content: start;
  min-width: 0;
}

.field label,
.service__legend,
.request-form__manual label {
  font-size: var(--fs-fine);
  font-weight: 600;
  color: var(--text-2);
}

.field__req {
  color: var(--blue-300);
}

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field textarea,
.request-form__manual textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.2s var(--ease);
}

.field textarea,
.request-form__manual textarea {
  resize: vertical;
}

.field input[type="text"]:hover,
.field input[type="tel"]:hover,
.field input[type="email"]:hover,
.field textarea:hover {
  border-color: rgba(255, 255, 255, 0.35);
}

.field input:focus-visible,
.field textarea:focus-visible,
.request-form__manual textarea:focus-visible {
  border-color: var(--blue-300);
  outline-offset: 1px;
}

.field [aria-invalid="true"] {
  border-color: var(--blue-300);
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--blue-300);
  border-radius: var(--r-sm);
  background: rgba(var(--blue-rgb), 0.16);
  font-size: var(--fs-fine);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}

.field__error .icon {
  margin-top: 0.05em;
  color: var(--blue-200);
}

/* Service: native radio buttons shown as rows. The names wrap freely, so every one reads in full. */
.service {
  margin: 0;
  padding: 0;
  border: 0;
}

.service__legend {
  float: left;
  width: 100%;
  margin-bottom: var(--s-2);
  padding: 0;
}

.service__options {
  clear: both;
  display: grid;
  gap: var(--s-2);
}

.service__option {
  position: relative;
  display: block;
  cursor: pointer;
}

.service__option input {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  width: 1.25rem;
  height: 1.25rem;
  margin: -0.625rem 0 0;
  opacity: 0;
}

.service__box {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 48px;
  padding: 0.625rem 0.875rem 0.625rem 2.875rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg);
  line-height: 1.35;
  color: var(--text);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.service__box::before {
  content: "";
  position: absolute;
  left: 0.875rem;
  top: 50%;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.625rem;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: var(--bg);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.service__option:hover .service__box {
  border-color: rgba(255, 255, 255, 0.35);
}

.service__option input:checked + .service__box {
  border-color: var(--blue-300);
  background: rgba(var(--blue-rgb), 0.18);
}

.service__option input:checked + .service__box::before {
  border-color: var(--blue-300);
  box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 10px var(--blue-300);
}

.service__option input:focus-visible + .service__box {
  outline: 2px solid var(--blue-300);
  outline-offset: 3px;
}

.request-form__note {
  font-size: var(--fs-label);
  color: var(--text-2);
}

.request-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.request-form__actions .btn {
  flex: 1 1 auto;
  white-space: nowrap;
}

/* Shown after a send button has been pressed, and it stays. */
.request-form__sent {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  padding: var(--s-4);
  border: 1px solid rgba(125, 182, 238, 0.4);
  border-radius: var(--r);
  background: rgba(var(--blue-rgb), 0.1);
}

.request-form__sent-text {
  font-size: var(--fs-small);
  font-weight: 500;
}

/* The label keeps the width of "Send request" while it reads "Sending…", so the three buttons in a
   row do not shift sideways when a send starts and ends. The reserved copy is invisible and silent. */
#r-send-label {
  display: inline-flex;
  flex-direction: column;
}

#r-send-label::after {
  content: "Send request" / "";
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

/* "Send request" while the request is on its way: it cannot be pressed again. */
.request-form__actions .btn:disabled {
  opacity: 0.75;
  cursor: progress;
  transform: none;
}

.request-form__privacy {
  margin-top: calc(-1 * var(--s-2));
  font-size: var(--fs-fine);
  color: var(--text-2);
}

/* The spam trap: off screen, out of the tab order and hidden from assistive technology. */
/* The spam trap is never displayed: it takes no space, cannot be reached by keyboard or screen
   reader, and is still sent with the form (FormData includes it), so Netlify can spot bots. */
.request-form__trap {
  display: none;
}

.request-form__manual {
  display: grid;
  gap: var(--s-2);
  width: 100%;
}

/* Phones: a little less padding in and around the fields. */
@media (max-width: 479.98px) {
  .request-form {
    padding: var(--s-3);
  }

  .request-form__sent {
    padding: var(--s-3);
  }
}

/* Direct contacts: compact rows. */
.contacts {
  border-top: 1px solid var(--line);
}

.contacts__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 3.75rem;
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--line);
  border-radius: 2px;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.contacts__row:hover {
  color: var(--blue-200);
}

.contacts__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-sm);
  background: var(--blue);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.contacts__icon .icon {
  width: 1.375rem;
  height: 1.375rem;
}

.contacts__text {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}

.contacts__label {
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--text-2);
}

.contacts__value {
  font-size: 1.0625rem;
  font-weight: 700;
}

/* Sized to the width of its own column, so the whole address sits on one line on every screen.
   (Its only possible break point is before ".com.au"; the first line is for older browsers.) */
.request__contacts {
  container-type: inline-size;
}

.contacts__value--email {
  font-size: clamp(0.8125rem, 0.55rem + 1.6vw, 1.0625rem);
  font-size: clamp(0.8125rem, 4.7cqw, 1.0625rem);
}

.area {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 3.75rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text);
}

.area .icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-inline: 0.5rem;
  color: var(--blue-300);
}

@media (min-width: 560px) {
  .fields,
  .service__options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field--wide {
    grid-column: 1 / -1;
  }
}

@media (min-width: 960px) {
  .request {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
}

/* 12. Footer, mobile bar --------------------------------------------------- */

.site-footer {
  padding-block: var(--s-7) var(--s-5);
  background: #050607;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--text-2);
}

.site-footer__inner {
  display: grid;
  gap: var(--s-6);
}

.site-footer__brand img {
  width: 200px;
  height: auto;
}

.site-footer__nav ul,
.site-footer__contact {
  display: grid;
  gap: 0;
}

.site-footer__nav ul {
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  column-gap: var(--s-5);
}

.site-footer__nav a {
  white-space: nowrap;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--blue-200);
}

.site-footer .icon {
  color: var(--blue-300);
}

.site-footer__area {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  color: var(--text-2);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-6);
  font-size: var(--fs-fine);
  color: var(--text-3);
}

.site-footer__legal::before {
  content: "";
  flex: 0 0 100%;
  height: 1px;
  margin-bottom: var(--s-4);
  background: var(--line);
}

@media (min-width: 720px) {
  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1000px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.3fr);
  }

  .site-footer__brand {
    grid-column: auto;
  }
}

/* Slim call / request bar on phones. The page is padded so it never covers the last element.
   Without JavaScript it is always there. With it, site.js shows it only when the same button is
   not already on screen (see initMobileBar), so it starts out of the way. */
.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-2);
  height: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  padding: var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 9, 11, 0.94);
  border-top: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.js .mobile-bar {
  transform: translateY(105%);
  visibility: hidden;
  transition: transform 0.3s var(--ease), visibility 0s linear 0.3s;
}

.js .mobile-bar.is-on {
  transform: none;
  visibility: visible;
  transition: transform 0.3s var(--ease), visibility 0s linear 0s;
}

.mobile-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* The narrowest phones: slightly smaller lettering, so the wide button keeps some air at its sides. */
@media (max-width: 359.98px) {
  .mobile-bar a {
    font-size: 0.8125rem;
  }
}

.mobile-bar__call {
  padding-inline: 0.875rem;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.mobile-bar__call:hover {
  color: var(--text);
}

.mobile-bar__request {
  background: linear-gradient(180deg, #3F92E0 0%, var(--blue) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: var(--ink);
}

.mobile-bar__request:hover {
  color: var(--ink);
}

@media (max-width: 767.98px) {
  body {
    padding-bottom: calc(var(--sticky-bottom) + env(safe-area-inset-bottom, 0px));
  }
}

/* No bar on wide screens, and none on very short ones (see the note on what stays put, above). */
@media (min-width: 768px), (max-height: 479.98px) {
  .mobile-bar {
    display: none;
  }
}

/* 13. Motion --------------------------------------------------------------- */

@keyframes hero-light {
  0% {
    transform: translateX(-130%);
  }
  55%,
  100% {
    transform: translateX(330%);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero::after {
    animation: hero-light 14s cubic-bezier(0.45, 0, 0.3, 1) 1.2s infinite;
  }

  /* Scroll reveal. The stylesheet on its own hides nothing: when site.js starts it marks the blocks
     that are still below the screen as waiting (is-pending), and only those are held back until
     they scroll into view. If the script never runs, every block is simply there. */
  [data-reveal].is-pending {
    opacity: 0;
    transform: translateY(18px);
  }

  [data-reveal].is-in {
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Print -------------------------------------------------------------------- */

@media print {
  .site-header,
  .mobile-bar,
  .nav-toggle,
  .request-form,
  .skip-link {
    display: none !important;
  }

  body {
    padding-bottom: 0;
  }

  [data-reveal].is-pending {
    opacity: 1 !important;
    transform: none !important;
  }
}