/* Viarok Property Services landing page
   Tokens come from Brand/viarok-brand-book.md. Spacing, type sizes and radii
   are snapped to the landing-page-design scale (see comments on each token). */

:root {
  /* Brand colours */
  --ink: #050805;
  --surface: #121712;
  --raised: #1c231c;
  --line: #2a332a;
  --line-strong: #6b7d67;
  --lime: #a8f012;
  --lime-bright: #c0f648;
  --maple: #d8431c;
  --maple-dark: #bf3a17;
  --snow: #a8d0f8;
  --leaf: #3daa2a;
  --forest: #1e5e1a;
  --mist: #d2d8d2;
  --muted: #aab5a8;
  --text: #f2f5f0;
  --error: #ff8a66;

  /* Spacing scale (only these values are used) */
  --s-0: 0;
  --s-25: 2px;
  --s-50: 4px;
  --s-75: 8px;
  --s-100: 12px;
  --s-200: 16px;
  --s-300: 24px;
  --s-400: 32px;
  --s-500: 40px;
  --s-600: 48px;
  --s-700: 64px;
  --s-800: 80px;
  --s-900: 96px;

  /* Radii */
  --r-btn: 8px; /* rounded-lg */
  --r-card: 16px; /* rounded-2xl */
  --r-leaf: 48px;
  --r-leaf-lg: 96px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Fonts (brand book section 6) */
  --font-display: "Science Gothic", "Montserrat", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, sans-serif;
  --font-hand: "Kalam", "Montserrat", sans-serif;

  --header-h: 64px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(16px, calc(15px + 0.25vw), 18px); /* text-base up to text-lg */
  line-height: 1.6;
  font-weight: 400;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
dl,
dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

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

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  top: var(--s-200);
  left: var(--s-200);
  z-index: 100;
  padding: var(--s-75) var(--s-200);
  background: var(--lime);
  color: var(--ink);
  font-weight: 700;
  border-radius: var(--r-btn);
  transform: translateY(-200%);
  transition: transform 500ms var(--ease);
}
.skip-link:focus {
  transform: translateY(0);
}

/* Honeypot. Hidden from everyone, assistive tech included, so only a bot fills it. */
.hp {
  display: none !important;
}

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

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--s-200);
}
@media (min-width: 768px) {
  .container {
    padding-inline: var(--s-400);
  }
}

.section {
  padding-block: var(--s-700);
}
@media (min-width: 1024px) {
  .section {
    padding-block: var(--s-900);
  }
}
.section--surface {
  background: var(--surface);
}
.section--forest {
  background: var(--forest);
}

.section-head {
  display: grid;
  gap: var(--s-200);
  max-width: 680px;
  margin-bottom: var(--s-600);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}
.section-head p:not(.plate) {
  color: var(--muted);
}
.section-head .plate {
  justify-self: start;
}
.section-head--center .plate {
  justify-self: center;
}

/* ---------- Type ---------- */
.display,
.h1,
.h2 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}
/* Fluid headings: the font is wide and heavy, so sizes stay small and scale with the
   screen. Both ends of every clamp sit on the Tailwind type scale. */
.h1 {
  /* text-2xl up to text-3xl */
  font-size: clamp(24px, calc(16px + 1vw), 30px);
  line-height: 1.15;
}
.h2 {
  /* text-2xl, brand "H2" role */
  font-size: 24px;
  line-height: 32px;
}
.display {
  /* text-2xl up to text-4xl */
  font-size: clamp(24px, calc(14px + 1.8vw), 36px);
  line-height: 1.1;
}
.hl {
  color: var(--lime);
}
.h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 20px; /* text-xl */
  line-height: 28px;
}
.lead {
  font-size: clamp(16px, calc(14px + 0.5vw), 20px); /* text-base up to text-xl */
  line-height: 1.5;
  color: var(--mist);
  max-width: 680px;
}
.small {
  font-size: 14px; /* text-sm */
  line-height: 20px;
}
.muted {
  color: var(--muted);
}
.hand {
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 30px; /* text-3xl */
  line-height: 36px;
  color: var(--lime);
}

/* Plates and labels */
.plate {
  display: inline-flex;
  align-items: center;
  gap: var(--s-75);
  padding: var(--s-50) var(--s-100);
  background: var(--lime);
  color: var(--ink);
  border-radius: var(--r-btn);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.plate--snow {
  background: var(--snow);
}
.plate--leaf {
  background: var(--leaf);
}
.plate--maple {
  background: var(--lime);
}
.plate--maple i {
  color: var(--maple);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-75);
  padding: var(--s-75) var(--s-100);
  border: 2px solid transparent;
  border-radius: var(--r-btn);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 300ms var(--ease),
    color 300ms var(--ease),
    border-color 300ms var(--ease),
    transform 500ms var(--ease);
}
.btn i {
  font-size: 20px;
}
.btn--lg {
  padding: var(--s-100) var(--s-300);
  font-size: 16px;
  line-height: 24px;
}
.btn--lg i {
  font-size: 24px;
}
.btn--primary {
  background: var(--maple);
  color: var(--ink);
}
.btn--primary:hover {
  background: var(--maple-dark);
  color: #fff;
  transform: translateY(-2px);
}
.btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}
.btn--ghost:hover {
  border-color: var(--text);
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(1px) scale(0.98);
}
.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}
.btn--block {
  width: 100%;
}

/* ---------- Header ---------- */
.header {
  position: fixed;
  top: var(--s-200);
  left: 50%;
  z-index: 60;
  width: max-content;
  max-width: calc(100% - 32px);
  transform: translateX(-50%);
}
.header__bar {
  display: flex;
  align-items: center;
  gap: var(--s-300);
  padding: var(--s-75) var(--s-75) var(--s-75) var(--s-200);
  background: rgba(18, 23, 18, 0.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.header__logo {
  display: block;
  width: 128px;
}
.header__logo img {
  width: 128px;
  height: auto;
}
.nav {
  display: none;
  gap: var(--s-50);
}
.nav a {
  display: block;
  padding: var(--s-75) var(--s-100);
  border-radius: var(--r-btn);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--mist);
  text-decoration: none;
  transition:
    background-color 300ms var(--ease),
    color 300ms var(--ease);
}
.nav a:hover {
  background: var(--raised);
  color: #fff;
}
.nav a[aria-current="true"] {
  background: var(--raised);
  color: var(--lime);
}
.header__actions {
  display: none;
  gap: var(--s-75);
}
.header__mobile {
  display: flex;
  gap: var(--s-75);
  margin-left: auto;
}
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 300ms var(--ease);
}
.icon-btn:hover {
  background: var(--raised);
}
.icon-btn--call {
  background: var(--maple);
  border-color: var(--maple);
  color: var(--ink);
}
.icon-btn--call:hover {
  background: var(--maple-dark);
  color: #fff;
}

/* Menu toggle: two lines that rotate into a cross */
.toggle {
  position: relative;
}
.toggle span {
  position: absolute;
  left: 11px;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 500ms var(--ease);
}
.toggle span:nth-child(1) {
  transform: translateY(-4px);
}
.toggle span:nth-child(2) {
  transform: translateY(4px);
}
.toggle[aria-expanded="true"] span:nth-child(1) {
  transform: rotate(45deg);
}
.toggle[aria-expanded="true"] span:nth-child(2) {
  transform: rotate(-45deg);
}

@media (min-width: 1024px) {
  .nav,
  .header__actions {
    display: flex;
  }
  .header__mobile {
    display: none;
  }
  .header__bar {
    padding-right: var(--s-75);
  }
}

/* Full height mobile menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-300);
  padding: var(--s-900) var(--s-300) var(--s-400);
  background: rgba(5, 8, 5, 0.96);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 500ms var(--ease),
    visibility 0s linear 500ms;
}
.menu.is-open {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 500ms var(--ease),
    visibility 0s;
}
.menu__link,
.menu__cta {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 500ms var(--ease),
    transform 500ms var(--ease);
}
.menu.is-open .menu__link,
.menu.is-open .menu__cta {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 60ms);
}
.menu__link {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 36px;
  text-transform: uppercase;
  text-decoration: none;
}
.menu__link:hover {
  color: var(--lime);
}
.menu__cta {
  display: grid;
  gap: var(--s-100);
  margin-top: var(--s-100);
}
@media (min-width: 1024px) {
  .menu {
    display: none;
  }
}

/* ---------- Hero ---------- */
.hero {
  padding-top: 112px;
  padding-bottom: var(--s-700);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  gap: var(--s-600);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero {
    padding-top: 144px;
    padding-bottom: var(--s-900);
  }
  .hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--s-700);
  }
}
.hero__copy {
  display: grid;
  gap: var(--s-300);
  justify-items: start;
}
.hero__copy h1 {
  max-width: 680px;
}
.hero__copy .lead {
  max-width: 680px;
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-100);
}
.proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-100) var(--s-300);
  margin-top: var(--s-100);
}
.proof li {
  display: flex;
  align-items: center;
  gap: var(--s-75);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--mist);
}
.proof i {
  color: var(--lime);
  font-size: 20px;
}

.hero__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  width: 100%;
  margin-inline: auto;
  border-radius: var(--r-leaf-lg) 0 var(--r-leaf-lg) 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
}
.hero__chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--s-75);
  padding: var(--s-75) var(--s-100);
  border-radius: var(--r-btn);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
}
.hero__chip--a {
  top: var(--s-300);
  right: var(--s-300);
  background: var(--snow);
  color: var(--ink);
}
.hero__chip--b {
  bottom: var(--s-200);
  left: var(--s-200);
  right: auto;
  max-width: calc(100% - var(--s-400));
  gap: var(--s-75);
  padding: var(--s-75);
  font-size: 12px;
  line-height: 16px;
  background: rgba(18, 23, 18, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  color: var(--text);
}
.hero__chip i {
  font-size: 24px;
}
.hero__chip--b i {
  font-size: 18px;
  color: var(--lime);
}


/* ---------- Story ---------- */
.story {
  display: grid;
  gap: var(--s-600);
  align-items: center;
}
@media (min-width: 1024px) {
  /* Photo on the left, copy on the right, facts as a full width band underneath.
     The markup keeps copy first so a narrow screen still reads text, photo, facts. */
  .story {
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--s-600) var(--s-800);
    align-items: center;
  }
  .story__photo {
    grid-area: 1 / 1;
  }
  .story__copy {
    grid-area: 1 / 2;
  }
  .story .facts {
    grid-area: 2 / 1 / 3 / -1;
    gap: var(--s-600);
  }
}
.story__copy {
  display: grid;
  gap: var(--s-200);
  justify-items: start;
}
.story__copy p {
  color: var(--mist);
  max-width: 680px;
}
.story__quote {
  margin-top: var(--s-100);
}
.story__photo {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0 var(--r-leaf) 0 var(--r-leaf);
}
.story__photo img {
  display: block;
  width: 100%;
  height: auto;
}
/* Three across at every width. The type shrinks on narrow screens (see the
   max-width 767px block) rather than the facts dropping into a stack. */
.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-200);
  padding: var(--s-400);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-leaf) 0 var(--r-leaf) 0;
}
.section--surface .facts {
  background: var(--ink);
}
.fact {
  display: grid;
  gap: var(--s-50);
}
.fact__n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, calc(20px + 1vw), 36px);
  line-height: 1.1;
  color: var(--lime);
}
.fact__t {
  color: var(--mist);
  font-size: 16px;
  line-height: 24px;
}

/* ---------- Pillars ---------- */
.grid {
  display: grid;
  gap: var(--s-200);
}
@media (min-width: 640px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
  /* Only where the three passes sit in one row: the cards stop being separate
     grids and share the container's rows instead, so a title that wraps to two
     lines cannot push that card's price and subtitle out of line with the rest. */
  .grid--passes {
    grid-template-rows: auto auto auto 1fr auto;
    row-gap: var(--s-50);
  }
  .grid--passes .pass {
    grid-row: span 5;
    grid-template-rows: subgrid;
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.card {
  display: grid;
  align-content: start;
  gap: var(--s-100);
  padding: var(--s-300);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  transition:
    transform 500ms var(--ease),
    border-color 300ms var(--ease);
}
.section--surface .card {
  background: var(--ink);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
}
.card p {
  color: var(--muted);
  font-size: 16px;
  line-height: 24px;
}
.ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--lime);
  border-radius: 50%;
  color: var(--lime);
  font-size: 24px;
  margin-bottom: var(--s-75);
}
.ico--snow {
  border-color: var(--snow);
  color: var(--snow);
}

/* ---------- Tagline reveal ---------- */
.tagline {
  padding-block: var(--s-800);
}
@media (min-width: 1024px) {
  .tagline {
    padding-block: 160px;
  }
}
.tagline__text {
  max-width: 960px;
  margin-inline: auto;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(24px, calc(12px + 2vw), 36px); /* text-2xl up to text-4xl */
  line-height: 1.15;
  text-wrap: balance;
}
.tagline__text .w {
  display: inline-block;
  opacity: 0.3;
  transition: opacity 500ms var(--ease);
}
.tagline__text .w.on {
  opacity: 1;
}
.tagline__text .w.hl-w.on {
  color: var(--lime);
}
.tagline__sign {
  max-width: 960px;
  margin: var(--s-400) auto 0;
}
.tagline__text,
.tagline__sign {
  text-align: center;
}

/* ---------- Packages ---------- */
.includes {
  display: grid;
  gap: var(--s-200);
  margin-bottom: var(--s-600);
}
@media (min-width: 640px) {
  .includes {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .includes {
    grid-template-columns: repeat(4, 1fr);
  }
}
.include {
  display: flex;
  gap: var(--s-200);
  align-items: flex-start;
}
.include .ico {
  flex: none;
  margin: 0;
}
.include h3 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 800;
}
.include p {
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}

/* Five rows: name, subtitle, price, ticks (takes the slack), bottom block.
   The row gap is the tight name to subtitle one; the three blocks that need
   more air get it back as a margin, so the spacing is unchanged. Splitting
   them into real rows is what lets the cards share rows at 1024px and up. */
.pass {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  row-gap: var(--s-50);
  column-gap: var(--s-200);
  padding: var(--s-300);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.pass__price,
.pass .ticks,
.pass > div:last-child {
  margin-top: var(--s-100);
}
.pass--popular {
  border-color: var(--lime);
  border-width: 2px;
}
/* The card header and the block under the ticks are centred at every width:
   the flag, the name, the line under it, then the spots chip and the visits
   line. The price box and the tick list stay left aligned, because a centred
   list of items is harder to scan. */
.pass > div:last-child {
  text-align: center;
  justify-items: center;
}
.pass__flag {
  position: absolute;
  top: calc(var(--s-200) * -1);
  left: 50%;
  translate: -50% 0;
}
.pass__name,
.pass__for {
  text-align: center;
}
.pass__name {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 20px;
  line-height: 28px;
}
.pass__for {
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
  /* No margin-top: the card's row gap already supplies this 4px. */
}
.pass__price {
  display: grid;
  gap: var(--s-50);
  padding: var(--s-200);
  background: var(--raised);
  border-radius: var(--r-btn);
}
.pass__from {
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}
.pass__amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, calc(20px + 1vw), 36px);
  line-height: 1.1;
}
.pass__amount small {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  color: var(--muted);
}
.pass__prepay {
  font-size: 14px;
  line-height: 20px;
  color: var(--mist);
}
.pass__prepay strong {
  color: var(--lime);
}
.ticks {
  display: grid;
  gap: var(--s-100);
  align-content: start;
}
.ticks li {
  display: flex;
  gap: var(--s-100);
  align-items: flex-start;
  font-size: 16px;
  line-height: 24px;
  color: var(--text);
}
.ticks i {
  flex: none;
  margin-top: var(--s-25);
  color: var(--lime);
  font-size: 20px;
}
.pass__visits {
  display: inline-flex;
  align-items: center;
  gap: var(--s-75);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--snow);
}
.pass__spots {
  display: inline-flex;
  align-items: center;
  gap: var(--s-75);
  margin-bottom: var(--s-75);
  padding: var(--s-50) var(--s-100);
  border: 1px solid color-mix(in srgb, var(--lime) 40%, transparent);
  border-radius: var(--r-btn);
  background: color-mix(in srgb, var(--lime) 12%, transparent);
  color: var(--lime);
  font-weight: 800;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.01em;
}

.commercial {
  display: grid;
  gap: var(--s-300);
  align-items: center;
  margin-top: var(--s-200);
  padding: var(--s-400);
  background: var(--forest);
  border-radius: var(--r-leaf) 0 var(--r-leaf) 0;
}
@media (min-width: 1024px) {
  .commercial {
    grid-template-columns: 1fr auto;
  }
}
.commercial p {
  color: #fff;
  max-width: 680px;
}

.single {
  display: grid;
  gap: var(--s-400);
  margin-top: var(--s-400);
  padding: var(--s-300);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
@media (min-width: 768px) {
  .single {
    padding: var(--s-400);
  }
}
.single__head {
  text-align: center;
}
.single__head p {
  max-width: 680px;
  margin: var(--s-75) auto 0;
  color: var(--muted);
}
.single__grid {
  display: grid;
  gap: var(--s-300);
}
@media (min-width: 768px) {
  .single__grid {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}
.single__side {
  display: flex;
  flex-direction: column;
  gap: var(--s-300);
}
.single .btn {
  white-space: normal;
  text-align: center;
}
@media (min-width: 768px) {
  .single fieldset.field {
    display: flex;
    flex-direction: column;
  }
  .single #sv-type {
    flex: 1;
    align-content: space-between;
  }
  .single__side .result {
    margin-top: auto;
  }
}
.single__opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-100) var(--s-300);
}
.single .result .btn {
  margin-top: var(--s-100);
}
.single:first-child {
  margin-top: 0;
}
.single + .section-head {
  margin-top: var(--s-700);
  scroll-margin-top: var(--s-900);
}
.single > *,
.single__grid > *,
.single__side > * {
  min-width: 0;
}
.single .note a {
  color: var(--lime);
  text-decoration: underline;
}

.deals {
  display: grid;
  gap: var(--s-200);
  margin-top: var(--s-600);
}
@media (min-width: 768px) {
  .deals {
    grid-template-columns: repeat(2, 1fr);
  }
}
.deal {
  display: flex;
  gap: var(--s-200);
  align-items: flex-start;
  padding: var(--s-200);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-card);
}
.deal i {
  flex: none;
  color: var(--lime);
  font-size: 32px;
}
.deal strong {
  display: block;
  font-size: 16px;
  line-height: 24px;
}
.deal span {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}
.fine {
  margin-top: var(--s-200);
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
  max-width: 960px;
}
.fine strong {
  color: var(--text);
}

/* ---------- Quote and form ---------- */
.book {
  display: grid;
  gap: var(--s-300);
}
@media (min-width: 1024px) {
  .book {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
.panel {
  display: grid;
  gap: var(--s-300);
  padding: var(--s-300);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
@media (min-width: 768px) {
  .panel {
    padding: var(--s-400);
  }
}
.section--surface .panel {
  background: var(--ink);
}
.panel__title {
  display: flex;
  gap: var(--s-100);
  align-items: center;
}
.panel__title .ico {
  margin: 0;
}

.field {
  display: grid;
  gap: var(--s-75);
}
.field label,
.field legend {
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mist);
}
.field legend {
  padding: 0;
  margin-bottom: var(--s-75);
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.input {
  width: 100%;
  padding: var(--s-100) var(--s-200);
  background: var(--raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-btn);
  font-size: 18px;
  line-height: 28px;
  transition: border-color 300ms var(--ease);
}
.input::placeholder {
  color: var(--muted);
  opacity: 0.8;
}
.input:hover {
  border-color: var(--muted);
}
.input:focus-visible {
  outline-offset: 0;
  border-color: var(--lime);
}
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'%3E%3Cpath fill='%23aab5a8' d='M213.7 101.7l-80 80a8 8 0 0 1-11.4 0l-80-80a8 8 0 0 1 11.4-11.4L128 164.7l74.3-74.4a8 8 0 0 1 11.4 11.4Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: var(--s-600);
}
.field[data-invalid="true"] .input {
  border-color: var(--error);
}
.field__error {
  display: none;
  align-items: center;
  gap: var(--s-75);
  font-size: 14px;
  line-height: 20px;
  color: var(--error);
}
.field[data-invalid="true"] .field__error {
  display: flex;
}
.row {
  display: grid;
  gap: var(--s-200);
}
@media (min-width: 640px) {
  .row--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.choices {
  display: grid;
  gap: var(--s-75);
}
.choice {
  position: relative;
}
.choice input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.choice span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-200);
  padding: var(--s-100) var(--s-200);
  background: var(--raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-btn);
  font-size: 16px;
  line-height: 24px;
  transition:
    border-color 300ms var(--ease),
    background-color 300ms var(--ease);
}
.choice small {
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}
.choice input:hover + span {
  border-color: var(--muted);
}
.choice input:checked + span {
  border-color: var(--lime);
  background: var(--surface);
}
.choice input:focus-visible + span {
  outline: 3px solid var(--lime);
  outline-offset: 2px;
}
.check {
  display: flex;
  gap: var(--s-100);
  align-items: flex-start;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
}
.check input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--lime);
}

.result {
  display: grid;
  gap: var(--s-75);
  padding: var(--s-300);
  background: var(--raised);
  border: 1px solid var(--lime);
  border-radius: var(--r-btn);
}
.result__label {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}
.result__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, calc(20px + 1vw), 36px);
  line-height: 1.1;
  color: var(--lime);
}
.result__price small {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--muted);
}
.result ul {
  display: grid;
  gap: var(--s-50);
  font-size: 14px;
  line-height: 20px;
  color: var(--mist);
}
.result .note {
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}

.form-alt {
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}
.form-alt a {
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}
.status {
  display: none;
  gap: var(--s-100);
  padding: var(--s-200);
  border-radius: var(--r-btn);
  background: var(--raised);
  border: 1px solid var(--leaf);
  font-size: 16px;
  line-height: 24px;
}
.status.is-shown {
  display: grid;
}
.status strong {
  display: flex;
  gap: var(--s-75);
  align-items: center;
}
.status i {
  color: var(--leaf);
  font-size: 24px;
}
.status.is-error {
  border-color: var(--error);
}
.status.is-error i {
  color: var(--error);
}
.skeleton {
  display: none;
  height: 24px;
  border-radius: var(--r-btn);
  background: var(--raised);
  animation: pulse 1.6s var(--ease) infinite;
}
.is-loading .skeleton {
  display: block;
}
@keyframes pulse {
  50% {
    opacity: 0.4;
  }
}

/* ---------- How it works ---------- */
.steps {
  display: grid;
  gap: var(--s-200);
  counter-reset: step;
}
@media (min-width: 1024px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
.step {
  display: grid;
  gap: var(--s-100);
  align-content: start;
  padding: var(--s-300);
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.step__n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, calc(20px + 1vw), 36px);
  line-height: 1.1;
  color: var(--lime);
}
.step p {
  color: var(--muted);
  font-size: 16px;
  line-height: 24px;
}

/* ---------- Before and after ---------- */
.ba {
  position: relative;
  aspect-ratio: 4 / 3;
  max-width: 880px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--surface);
  --pos: 50%;
  touch-action: pan-y;
}
@media (min-width: 768px) {
  .ba {
    aspect-ratio: 16 / 10;
  }
}
.ba__layer {
  position: absolute;
  inset: 0;
}
.ba__layer svg,
.ba__layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ba__layer img {
  position: absolute;
  inset: 0;
}
.ba__layer img {
  object-position: 50% 62%;
}
.ba__layer--before {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.ba__tag {
  position: absolute;
  top: var(--s-200);
  z-index: 2;
}
.ba__tag--before {
  left: var(--s-200);
}
.ba__tag--after {
  right: var(--s-200);
}
.ba__handle {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  background: var(--lime);
  pointer-events: none;
}
.ba__handle span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  background: var(--lime);
  color: var(--ink);
  border-radius: 50%;
  font-size: 24px;
}
.ba__range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.ba:has(.ba__range:focus-visible) {
  outline: 3px solid var(--lime);
  outline-offset: 2px;
}
.ba-caption {
  max-width: 880px;
  margin: var(--s-200) auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
}

/* ---------- Before and after carousel ---------- */
/* Full bleed and endless. This is a real horizontal scroller, so a finger can
   swipe it and a trackpad can push it; main.js only nudges scrollLeft along
   between those, and wraps it by exactly one set of cards, which it measures.
   The scrollbar is hidden because the fade at both edges already says there is
   more to the sides. */
.marquee {
  position: relative;
  margin-top: var(--s-500);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: auto; /* main.js sets scrollLeft every frame, never animate it */
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee::-webkit-scrollbar {
  display: none;
}
.marquee__track {
  display: flex;
  gap: var(--s-200);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}
.marquee__item {
  flex: none;
}

.shot {
  display: block;
  position: relative;
  width: clamp(240px, 32vw, 420px);
  padding: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  cursor: pointer;
  transition:
    transform 500ms var(--ease),
    border-color 300ms var(--ease);
}
.shot img {
  display: block;
  width: 100%;
  height: clamp(180px, 24vw, 300px);
  object-fit: cover;
  object-position: 50% 62%;
}
.shot:hover,
.shot:focus-visible {
  border-color: var(--lime);
  transform: translateY(-4px);
}
.shot:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 2px;
}
.shot__chip {
  position: absolute;
  left: var(--s-75);
  bottom: var(--s-75);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px var(--s-75);
  background: var(--lime);
  color: var(--ink);
  border-radius: var(--r-btn);
  font-weight: 800;
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 0.01em;
}

/* ---------- Before and after lightbox ---------- */
.lightbox {
  width: min(960px, 94vw);
  max-width: none;
  padding: 0;
  background: none;
  border: 0;
}
.lightbox::backdrop {
  background: rgba(2, 6, 2, 0.82);
}
.lightbox__panel {
  padding: var(--s-200);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-200);
  margin-bottom: var(--s-100);
}
.lightbox__title {
  font-family: var(--font-display);
  font-stretch: var(--stretch);
  font-weight: 800;
  font-size: 20px;
  line-height: 28px;
}
/* The pair sets this, so a portrait job is not cropped into a letterbox. */
.lightbox .ba {
  aspect-ratio: var(--shot-ratio, 4 / 3);
  max-height: 72vh;
  max-width: none;
}
.lightbox__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-100);
  margin-top: var(--s-200);
}
.lightbox__count {
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 560px) {
  .lightbox__nav .btn {
    padding-inline: var(--s-100);
  }
  .lightbox__title {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* No drift of its own; the carousel is still there to swipe through. */
  .shot:hover,
  .shot:focus-visible {
    transform: none;
  }
}

/* ---------- Reviews ---------- */
.reviews {
  display: grid;
  gap: var(--s-300);
}
@media (min-width: 1024px) {
  .reviews {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}
.review-list {
  display: grid;
  gap: var(--s-200);
}
.review {
  display: grid;
  gap: var(--s-100);
  padding: var(--s-300);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.review__stars {
  color: var(--lime);
  font-size: 20px;
  display: flex;
  gap: var(--s-25);
}
.review__who {
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}
.empty {
  display: grid;
  gap: var(--s-200);
  align-content: center;
  padding: var(--s-400);
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-card);
}
.empty p {
  color: var(--muted);
}
.links {
  display: grid;
  gap: var(--s-100);
  align-content: start;
}
.link-card {
  display: flex;
  align-items: center;
  gap: var(--s-200);
  padding: var(--s-200);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  text-decoration: none;
  transition:
    transform 500ms var(--ease),
    border-color 300ms var(--ease);
}
.link-card:hover {
  transform: translateY(-2px);
  border-color: var(--lime);
}
.link-card .ico {
  display: grid;
  margin: 0;
  flex: none;
  font-size: 24px;
  line-height: 1;
  color: var(--lime);
}
.link-card strong {
  display: block;
  font-size: 16px;
  line-height: 24px;
}
.link-card span {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}
.link-card > i:last-child {
  margin-left: auto;
  color: var(--lime);
  font-size: 24px;
}

/* ---------- Areas ---------- */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-75);
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-75);
  padding: var(--s-75) var(--s-200);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-btn);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
}
.tag i {
  color: var(--lime);
  font-size: 20px;
}
.tag--ind {
  border-color: var(--forest);
  background: var(--forest);
  color: #fff;
}
.tag--ind i {
  color: var(--lime);
}
.areas-group + .areas-group {
  margin-top: var(--s-300);
}
.areas-group h3 {
  text-align: center;
}
.areas-group .tags {
  justify-content: center;
}
.areas-group h3 {
  margin-bottom: var(--s-100);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Services (four seasonal marks) ---------- */
.svc {
  display: grid;
  gap: var(--s-100);
  align-content: start;
  padding: var(--s-300);
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.svc p {
  color: var(--muted);
  font-size: 16px;
  line-height: 24px;
}
.svc .plate {
  justify-self: start;
}

/* ---------- FAQ ---------- */
.faq {
  display: grid;
  gap: var(--s-100);
  max-width: 880px;
  margin-inline: auto;
}
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  transition: border-color 300ms var(--ease);
}
.faq details[open] {
  border-color: var(--line-strong);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-200);
  padding: var(--s-200) var(--s-300);
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-card);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary i {
  flex: none;
  color: var(--lime);
  font-size: 24px;
  transition: transform 500ms var(--ease);
}
.faq details[open] summary i {
  transform: rotate(45deg);
}
.faq__a {
  padding: 0 var(--s-300) var(--s-300);
  color: var(--mist);
  font-size: 16px;
  line-height: 24px;
  max-width: 680px;
}

/* ---------- Final CTA ---------- */
.final {
  display: grid;
  gap: var(--s-300);
  justify-items: start;
  max-width: 680px;
}
.final p {
  color: #fff;
}
.final__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-100);
}
.section--forest .btn--ghost {
  border-color: #fff;
}

/* ---------- Footer ---------- */
.footer {
  padding-block: var(--s-700) var(--s-400);
  border-top: 1px solid var(--line);
}
.footer__grid {
  display: grid;
  gap: var(--s-500);
}
@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}
.footer__logo {
  width: 160px;
  height: auto;
  margin-bottom: var(--s-200);
}
.footer h2 {
  margin-bottom: var(--s-200);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}
.footer li + li {
  margin-top: var(--s-75);
}
.footer a {
  text-decoration: none;
  font-size: 16px;
  line-height: 24px;
  transition: color 300ms var(--ease);
}
.footer a:hover {
  color: var(--lime);
}
.footer p {
  font-size: 16px;
  line-height: 24px;
  color: var(--mist);
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-200);
  margin-top: var(--s-600);
  padding-top: var(--s-300);
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}
.footer__legal a {
  font-size: 14px;
  line-height: 20px;
}
.footer__legal ul {
  display: flex;
  gap: var(--s-300);
}
.footer__legal li + li {
  margin-top: 0;
}

/* Mobile action bar */
.mbar {
  position: fixed;
  left: var(--s-200);
  right: var(--s-200);
  bottom: var(--s-200);
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-75);
  padding: var(--s-75);
  background: rgba(18, 23, 18, 0.85);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  opacity: 0;
  transform: translateY(96px);
  pointer-events: none;
  transition:
    opacity 500ms var(--ease),
    transform 500ms var(--ease);
}
.mbar.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Back to the top. Appears once the hero has scrolled away. Sits under the
   mobile action bar in the stack, and steps above it when that bar is up. */
.to-top {
  position: fixed;
  right: var(--s-200);
  bottom: var(--s-200);
  z-index: 45;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--lime);
  color: var(--ink);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition:
    opacity 400ms var(--ease),
    transform 400ms var(--ease);
}
.to-top svg {
  width: 22px;
  height: 22px;
}
.to-top.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.to-top:focus-visible {
  outline: 3px solid var(--snow);
  outline-offset: 3px;
}
@media (max-width: 1023px) {
  /* Clear of the action bar: its own 16px offset, its 66px height, and 16px
     of air, so the two never read as one block of controls. */
  body:has(.mbar.is-visible) .to-top {
    bottom: calc(var(--s-200) * 2 + 68px);
  }
}
@media (min-width: 1024px) {
  .mbar {
    display: none;
  }
}
body.has-mbar .footer {
  padding-bottom: 112px;
}
@media (min-width: 1024px) {
  body.has-mbar .footer {
    padding-bottom: var(--s-400);
  }
}

/* ---------- Reveal on scroll ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 700ms var(--ease),
    transform 700ms var(--ease);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Simple pages (404, legal) ---------- */
.page-head {
  padding: var(--s-400) 0;
}
.page-head img {
  width: 160px;
  height: auto;
}
.prose {
  max-width: 680px;
  padding-bottom: var(--s-900);
}
.prose h1 {
  margin-bottom: var(--s-300);
}
.prose h2 {
  margin: var(--s-500) 0 var(--s-100);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 24px;
  line-height: 32px;
}
.prose p,
.prose li {
  color: var(--mist);
}
.prose p + p {
  margin-top: var(--s-100);
}
.prose ul {
  display: grid;
  gap: var(--s-75);
  margin-top: var(--s-100);
  padding-left: var(--s-300);
  list-style: disc;
}
.prose a {
  color: var(--lime);
}
.nf {
  min-height: 100vh;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--s-300);
  padding-block: var(--s-700);
}
.nf__code {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 96px; /* text-8xl */
  line-height: 1;
  color: var(--lime);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
    animation: none !important;
  }
  .js .reveal,
  .menu__link,
  .menu__cta {
    transform: none !important;
  }
  .snowflake {
    display: none;
  }
}

/* ---------- Small screen safeguards ---------- */
.grid > *,
.reviews > *,
.book > *,
.story > *,
.hero__grid > *,
.commercial > *,
.steps > *,
.deals > *,
.includes > *,
.footer__grid > * {
  min-width: 0;
}
h1,
h2,
h3 {
  overflow-wrap: break-word;
}
.commercial .btn {
  white-space: normal;
  text-align: center;
}
.mbar .btn {
  min-width: 0;
  padding: var(--s-100) var(--s-75);
}
@media (max-width: 420px) {
  .container {
    padding-inline: var(--s-200);
  }
  .panel {
    padding: var(--s-200);
  }
  .facts {
    padding: var(--s-300) var(--s-200);
  }
  .commercial {
    padding: var(--s-300);
  }
}
.link-card > span:nth-child(2) {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Plates always carry black text (brand book 5.4), whatever paragraph rule they sit under */
.plate,
.plate i {
  color: var(--ink) !important;
}

/* ---------- Quote pop up ---------- */
.dialog {
  width: calc(100% - 32px);
  max-width: 560px;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 500ms var(--ease),
    transform 500ms var(--ease);
}
.dialog.is-open {
  opacity: 1;
  transform: none;
}
.dialog::backdrop {
  background: rgba(5, 8, 5, 0.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 500ms var(--ease);
}
.dialog.is-open::backdrop {
  opacity: 1;
}
.dialog__panel {
  position: relative;
  display: grid;
  gap: var(--s-200);
  justify-items: start;
  padding: var(--s-300);
}
.dialog__panel > form {
  width: 100%;
}
@media (min-width: 768px) {
  .dialog__panel {
    padding: var(--s-400);
  }
}
.dialog__close {
  position: absolute;
  top: var(--s-200);
  right: var(--s-200);
}
.dialog__panel .h2 {
  padding-right: var(--s-600);
}

/* Headings use the condensed width of Science Gothic so phrases stay on one line.
   The hero heading breaks only between phrases. */
:root {
  --stretch: 75%;
}
@media (min-width: 768px) {
  :root {
    --stretch: 87.5%;
  }
}
.display,
.h1,
.h2,
.tagline__text,
.menu__link,
.fact__n,
.pass__amount,
.result__price,
.step__n {
  font-stretch: var(--stretch);
}
.display {
  text-wrap: pretty;
}
.display .br {
  display: inline-block;
  white-space: nowrap;
}
@media (max-width: 340px) {
  .display .br {
    white-space: normal;
  }
}

/* Final call to action sits in the middle of the page */
.final {
  margin-inline: auto;
  justify-items: center;
  text-align: center;
}
.final__links {
  justify-content: center;
}

.form-alt {
  text-align: center;
  text-wrap: balance;
}

/* ---------- Phones and tablets: centred hero, compact footer grid ---------- */
@media (max-width: 1023px) {
  .hero__copy {
    justify-items: center;
    text-align: center;
  }
  .hero__ctas,
  .proof {
    justify-content: center;
  }
}

.footer__grid {
  grid-template-columns: 1fr 1fr;
  gap: var(--s-400) var(--s-300);
  text-align: center;
}
.footer__grid > :nth-child(1) {
  grid-column: 1 / -1;
}
.footer__grid > :nth-child(3) {
  grid-column: 1 / -1;
  order: 4;
}
.footer__grid > :nth-child(4) {
  order: 3;
}
.footer__logo {
  margin-inline: auto;
}
.footer h2 {
  margin-bottom: var(--s-100);
}
.footer__legal {
  justify-content: center;
  text-align: center;
  margin-top: var(--s-400);
}
.footer__legal ul {
  justify-content: center;
}
@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    text-align: left;
  }
  .footer__grid > :nth-child(1),
  .footer__grid > :nth-child(3) {
    grid-column: auto;
  }
  .footer__grid > :nth-child(3),
  .footer__grid > :nth-child(4) {
    order: 0;
  }
  .footer__logo {
    margin-inline: 0;
  }
  .footer__legal {
    justify-content: space-between;
    text-align: left;
  }
  .footer__legal ul {
    justify-content: flex-start;
  }
}

/* Phones: footer blocks stack vertically, and the items inside each block sit in a row */
@media (max-width: 767px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--s-300);
  }
  .footer__grid > :nth-child(1),
  .footer__grid > :nth-child(3),
  .footer__grid > :nth-child(4) {
    grid-column: auto;
    order: 0;
  }
  .footer__grid ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-75) var(--s-300);
  }
  .footer__grid li + li {
    margin-top: 0;
  }
  .footer h2 {
    margin-bottom: var(--s-75);
  }
}

/* ---------- Colour roles ----------
   Lime for buttons, maple for plates (a deliberate change from the brand book default,
   which has maple buttons and lime plates). Change the three variables to swap again. */
:root {
  --btn-bg: var(--lime);
  --btn-hover: var(--lime-bright);
  --plate-bg: var(--maple);
}
.btn--primary,
.icon-btn--call {
  background: var(--btn-bg);
  border-color: var(--btn-bg);
  color: var(--ink);
}
.btn--primary:hover,
.icon-btn--call:hover {
  background: var(--btn-hover);
  border-color: var(--btn-hover);
  color: var(--ink);
}
.plate,
.plate--maple {
  background: var(--plate-bg);
}
.plate--lime {
  background: var(--lime);
}
.plate--snow {
  background: var(--snow);
}
.plate--leaf {
  background: var(--leaf);
}

/* ---------- Phones: headings, sub headings and text blocks are centred ----------
   Forms, the FAQ and tick lists stay left aligned because they read better that way. */
@media (max-width: 767px) {
  .section-head {
    justify-items: center;
    text-align: center;
    margin-inline: auto;
  }
  .section-head .plate {
    justify-self: center;
  }
  .story__copy {
    justify-items: center;
    text-align: center;
  }
  /* The facts stay three across here, so the type scales down to fit the
     narrow columns instead of the row breaking into a stack. */
  .facts {
    gap: var(--s-100);
  }
  .fact__n {
    font-size: clamp(18px, 5.2vw, 26px);
  }
  .fact__t {
    font-size: clamp(11px, 3.1vw, 14px);
    line-height: 1.35;
  }
  .facts,
  .fact,
  .card,
  .step,
  .svc,
  .include,
  .review,
  .empty,
  .commercial {
    text-align: center;
    justify-items: center;
  }
  .svc .plate {
    justify-self: center;
  }
  .include {
    flex-direction: column;
    align-items: center;
  }
  .include .ico,
  .card .ico {
    margin-inline: auto;
  }
  .pass__flag {
    left: 50%;
    translate: -50% 0;
  }
  .pass__name,
  .pass__for,
  .pass__price,
  .pass > div:last-child {
    text-align: center;
    justify-items: center;
  }
  .deal {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .fine,
  .areas-group h3 {
    text-align: center;
  }
  .tags {
    justify-content: center;
  }
  .result,
  .result__label,
  .result .note {
    text-align: center;
  }
}

/* ---------- Hero before and after photo ---------- */
.hero__compare {
  --pos: 50%;
  touch-action: pan-y;
}
.hero__compare .ba__layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__compare .hero__chip {
  z-index: 2;
  pointer-events: none;
}
/* One label in the middle of the photo: the slider line wipes "Before" out and draws "After" in */
.hero__compare .ba__tag {
  left: 50%;
  right: auto;
  z-index: auto;
  min-width: 96px;
  justify-content: center;
  padding-left: calc(var(--s-100) + 1.5px); /* offsets the trailing letter spacing so the word sits dead centre */
  top: 50%;
  opacity: 0.6; /* reads as a watermark over the photo */
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.hero__compare:has(.ba__range:focus-visible) {
  outline: 3px solid var(--lime);
  outline-offset: 2px;
}
.snowfall {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.snowflake {
  stroke: rgba(70, 90, 115, 0.5);
  stroke-width: 1;
  opacity: 0;
  animation: snowfall var(--t, 9s) linear infinite;
  animation-delay: var(--d, 0s);
}
@keyframes snowfall {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10% {
    opacity: 0.95;
  }
  90% {
    opacity: 0.95;
  }
  100% {
    transform: translate(var(--sw, 12px), 660px);
    opacity: 0;
  }
}

/* ---------- Thank you pop up ---------- */
/* .thanks extends .dialog, so the colours, backdrop, radius and open animation
   all come from there. Only the centring and the tick are new. */
.thanks__panel {
  justify-items: center;
  text-align: center;
  padding-top: var(--s-500);
}
.thanks__mark {
  display: block;
  color: var(--lime);
  font-size: 56px;
  line-height: 1;
}
/* The icon is inline, not a flex child. As a flex row the text wrapped to a
   second line and centred inside its own box, which left the icon stranded at
   the far left instead of sitting against the first word. */
.thanks__meta {
  display: block;
  max-width: 36ch;
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
}
.thanks__meta i {
  margin-right: var(--s-50);
  color: var(--snow);
  font-size: 18px;
  vertical-align: -3px;
}
.thanks__actions {
  display: grid;
  gap: var(--s-200);
  justify-items: center;
  width: 100%;
  margin-top: var(--s-100);
}

/* ---------- Bylaw quiz pop up ---------- */
/* The snowflakes are the client's own artwork, lifted out of
   Animation/Snowflakes.json as plain paths. See CLAUDE.md. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.quiz {
  inset: 0;
  color: var(--text);
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--s-200);
  overflow: hidden;
  background: transparent;
  border: 0;
}
.quiz[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.quiz::backdrop {
  background: rgba(5, 8, 5, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 700ms var(--ease);
}
.quiz.is-open::backdrop {
  opacity: 1;
}

/* Falling snow. Flakes are built in main.js so the count can drop on phones. */
.quiz__snow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.quiz__flake {
  position: absolute;
  top: 0;
  left: var(--x, 50%);
  width: var(--size, 18px);
  height: var(--size, 18px);
  color: #fff;
  opacity: 0;
  animation: quiz-fall var(--t, 11s) linear var(--d, 0s) infinite;
}
.quiz__flake svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
  filter: blur(var(--blur, 0));
}
@keyframes quiz-fall {
  0% {
    transform: translate3d(0, -14vh, 0) rotate(0deg);
    opacity: 0;
  }
  9% {
    opacity: var(--a, 0.85);
  }
  90% {
    opacity: var(--a, 0.85);
  }
  100% {
    transform: translate3d(var(--sw, 0px), 106vh, 0) rotate(var(--rot, 180deg));
    opacity: 0;
  }
}

/* The drift that buries the page, rising from the bottom edge. */
.quiz__drift {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 26vh;
  pointer-events: none;
  transform: translateY(102%);
}
.quiz.is-open .quiz__drift {
  animation: quiz-drift 1800ms var(--ease) 200ms forwards;
}
@keyframes quiz-drift {
  to {
    transform: translateY(30%);
  }
}
.quiz__drift svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: #eaf2fb;
}
.quiz__drift::before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(to top, rgba(234, 242, 251, 0.18), rgba(234, 242, 251, 0));
  content: "";
}

/* The panel waits for the snow to settle before it rises. */
.quiz__panel {
  position: relative;
  display: grid;
  gap: var(--s-200);
  justify-items: center;
  width: min(100%, 520px);
  max-height: calc(100dvh - 32px);
  padding: var(--s-500) var(--s-300) var(--s-300);
  text-align: center;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  opacity: 0;
  transform: translateY(28px) scale(0.98);
}
.quiz.is-open .quiz__panel {
  animation: quiz-rise 640ms var(--ease) 1150ms forwards;
}
@keyframes quiz-rise {
  to {
    opacity: 1;
    transform: none;
  }
}
@media (min-width: 768px) {
  .quiz__panel {
    padding: var(--s-500) var(--s-400) var(--s-400);
  }
}
.quiz__close {
  position: absolute;
  top: var(--s-200);
  right: var(--s-200);
}
.quiz__step {
  display: grid;
  gap: var(--s-200);
  justify-items: center;
  width: 100%;
}
.quiz__step[hidden] {
  display: none;
}
.quiz__actions {
  display: grid;
  gap: var(--s-100);
  width: 100%;
  margin-top: var(--s-100);
}

/* Questions */
.quiz__progress {
  display: flex;
  gap: var(--s-50);
  width: 100%;
}
.quiz__progress span {
  flex: 1;
  height: 3px;
  background: var(--line);
  border-radius: var(--r-btn);
  transition: background-color 300ms var(--ease);
}
.quiz__progress span.is-done {
  background: var(--lime);
}
.quiz__q {
  margin: 0;
}
.quiz__answers {
  display: grid;
  gap: var(--s-100);
  width: 100%;
}
.quiz__a {
  display: flex;
  gap: var(--s-100);
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--s-200);
  color: var(--text);
  font: inherit;
  text-align: center;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  cursor: pointer;
  transition:
    background-color 250ms var(--ease),
    border-color 250ms var(--ease),
    transform 250ms var(--ease);
}
@media (hover: hover) {
  .quiz__a:hover {
    background: #212a21;
    border-color: var(--lime);
    transform: translateY(-2px);
  }
}
.quiz__a:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 2px;
}
.quiz__a.is-picked {
  background: #212a21;
  border-color: var(--lime);
}
.quiz__back {
  justify-self: center;
}
/* The tick list is centred as a block, but each line keeps its left edge so the
   eye still has a column to run down. */
#quiz-result-ticks {
  display: inline-grid;
  justify-self: center;
  text-align: left;
}

/* Result */
.quiz__why {
  margin: 0;
  color: var(--muted);
}
.quiz__price {
  margin: 0;
  color: var(--lime);
  font-family: var(--font-display);
  font-size: 32px;
  font-variation-settings: "wdth" 85;
  line-height: 36px;
}
.quiz__price small {
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* A quiet third option, for dismissing without competing with the primary. */
.btn--text {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
.btn--text:hover {
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .quiz__flake,
  .quiz.is-open .quiz__drift {
    animation: none;
  }
  .quiz__drift {
    transform: translateY(30%);
  }
  .quiz__flake {
    opacity: var(--a, 0.85);
  }
  .quiz.is-open .quiz__panel {
    animation: quiz-rise 1ms linear forwards;
  }
}