/* PureWater: dark photo hero, then crisp white and light grey sections. Mobile first. */
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("/fonts/public-sans-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --bg-alt: #f5f7fa;
  --ink: #0b1b2e;
  --text: #1f2a37;
  --muted: #4b5563;
  --label: #0b3a66;
  --link: #0369a1;
  --cyan: #0ac2fa;
  --night: #0e1215;
  --green: #25d366;
  --star: #fbbc04;
  --line: #e2e8f0;
  --field: #f1f4f8;
  --field-line: #7b8799;
  --arrow: #64748b;
  --r-sm: 6px;
  --r-md: 12px;
  --gutter: clamp(1rem, 5vw, 2rem);
  --max: 72rem;
  --pad: 48px;
  --head: "Montserrat", "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --body: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
}

@media (min-width: 64rem) {
  :root {
    --pad: 96px;
  }
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3 {
  font-family: var(--head);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

h2 {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
}

h3 {
  font-size: 1.375rem;
  font-weight: 700;
}

p {
  margin: 0;
}

a {
  color: var(--link);
  text-underline-offset: 0.2em;
}

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

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: 0.75rem;
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: #ffffff;
  font-weight: 700;
  border-radius: var(--r-sm);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

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

.section-alt {
  background: var(--bg-alt);
}

.section-head {
  display: grid;
  gap: 16px;
  max-width: 44rem;
  margin-bottom: 32px;
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

.eyebrow {
  font-family: var(--head);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--label);
}

.lede {
  font-size: 1.25rem;
  color: var(--text);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.75rem 1.4rem;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn .ico {
  width: 1.35rem;
  height: 1.35rem;
}

.btn-wa {
  background: var(--green);
  color: var(--ink);
}

.btn-wa:hover {
  background: #1fbf5b;
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn-outline .btn-sub {
  display: block;
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.875rem;
}

.btn-outline .btn-lines {
  display: grid;
  text-align: left;
}

.btn-dark {
  background: var(--ink);
  color: #ffffff;
}

.btn-dark:hover {
  background: #1a2d44;
}

.btn-row {
  display: grid;
  gap: 16px;
}

@media (min-width: 40rem) {
  .btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
}

.ico {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
  flex-shrink: 0;
}

/* Header */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-top: env(safe-area-inset-top, 0px);
  color: #ffffff;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  border-bottom: 1px solid transparent;
}

.site-header.is-solid {
  background: #ffffff;
  color: var(--ink);
  border-bottom-color: var(--line);
}

.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.75rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: inherit;
  text-decoration: none;
  min-width: 0;
  flex: 1 1 auto;
}

.brand-tile {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: #ffffff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.brand-tile img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.brand-name {
  font-family: var(--head);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.15;
}

.brand-name small {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  opacity: 0.85;
}

@media (max-width: 23rem) {
  .site-header .brand-name {
    display: none;
  }
}

.site-nav {
  display: none;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, 0.14);
}

.is-solid .icon-btn {
  background: var(--bg-alt);
}

.icon-btn .ico {
  width: 1.4rem;
  height: 1.4rem;
}

.icon-btn.wa,
.is-solid .icon-btn.wa {
  background: var(--green);
  color: var(--ink);
}

.menu-btn {
  font: inherit;
}

.mobile-menu {
  display: none;
  padding: 0.5rem var(--gutter) 1.25rem;
  background: #ffffff;
  color: var(--ink);
  border-top: 1px solid var(--line);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

.site-header.menu-open {
  background: #ffffff;
  color: var(--ink);
  border-bottom-color: var(--line);
}

.site-header.menu-open .icon-btn:not(.wa) {
  background: var(--bg-alt);
}

.site-header.menu-open .mobile-menu {
  display: grid;
  gap: 0.25rem;
}

.mobile-menu a {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-family: var(--head);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.mobile-menu a.sub {
  font-family: var(--body);
  font-weight: 400;
  padding-left: 1rem;
}

.mobile-menu .btn {
  margin-top: 0.75rem;
  border-bottom: 0;
  justify-content: center;
}

@media (min-width: 64rem) {
  .menu-btn,
  .mobile-menu,
  .site-header.menu-open .mobile-menu {
    display: none;
  }

  .site-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-family: var(--head);
    font-weight: 700;
    font-size: 1rem;
  }

  .site-nav > a,
  .nav-trigger {
    color: inherit;
    text-decoration: none;
    padding: 0.625rem 0;
    border-bottom: 2px solid transparent;
  }

  .site-nav > a:hover,
  .nav-trigger:hover,
  .site-nav > a[aria-current="page"],
  .nav-trigger.is-current {
    border-bottom-color: var(--cyan);
  }

  .site-nav > a.nav-quote {
    padding: 0.55rem 1rem;
    border-radius: var(--r-sm);
    border: 2px solid currentColor;
  }
}

.nav-item {
  position: relative;
}

.nav-trigger {
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.chev {
  width: 0.7rem;
  height: 0.7rem;
  transition: transform 0.2s ease;
}

.nav-item.is-open .chev {
  transform: rotate(180deg);
}

.nav-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: -1rem;
  min-width: 18rem;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 16px 40px rgba(11, 27, 46, 0.16);
  display: none;
}

.nav-item.is-open .nav-menu {
  display: block;
}

.nav-menu a {
  display: block;
  padding: 0.6rem 1.1rem;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--body);
  font-weight: 600;
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
  background: var(--bg-alt);
}

/* Hero */
.hero {
  position: relative;
  min-height: 80vh;
  min-height: 80svh;
  display: flex;
  align-items: flex-end;
  color: #ffffff;
  background: var(--night);
  isolation: isolate;
}

@media (min-width: 64rem) {
  .hero {
    min-height: max(640px, 88vh);
    align-items: center;
  }
}

.hero-media,
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 14, 20, 0.72), rgba(10, 14, 20, 0.6) 45%, rgba(10, 14, 20, 0.8));
}

.hero-inner {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 7.5rem var(--gutter) 3rem;
  display: grid;
  gap: 24px;
  justify-items: center;
  text-align: center;
}

@media (min-width: 64rem) {
  .hero-inner {
    justify-items: start;
    text-align: left;
    padding-block: 8rem 5rem;
  }
}

.hero-copy {
  display: grid;
  gap: 24px;
  max-width: 46rem;
  justify-items: inherit;
}

.rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(6px);
}

.rating-pill .ico {
  width: 1.1rem;
  height: 1.1rem;
}

.hero h1 {
  color: #ffffff;
  font-weight: 800;
  font-size: clamp(2.5rem, 7vw, 4rem);
  line-height: 1.05;
}

.mark {
  background-image: linear-gradient(var(--cyan), var(--cyan));
  background-repeat: no-repeat;
  background-size: 100% 4px;
  background-position: 0 92%;
  padding-bottom: 0.08em;
}

.hero-intro {
  font-size: 1.1875rem;
  color: #f1f5f9;
  max-width: 40rem;
}

.hero .btn-row {
  width: 100%;
  max-width: 34rem;
}

@media (min-width: 40rem) {
  .hero .btn-row {
    width: auto;
    max-width: none;
  }
}

.hero .btn-outline {
  color: #ffffff;
  border-color: #ffffff;
}

.hero .btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
}

.hero-quote-link {
  color: #ffffff;
  font-weight: 700;
  font-family: var(--head);
  text-decoration: underline;
  text-decoration-color: var(--cyan);
  text-decoration-thickness: 3px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}

.page-hero {
  min-height: 0;
}

.page-hero .hero-inner {
  padding-block: 8rem 3rem;
}

@media (min-width: 64rem) {
  .page-hero {
    min-height: 420px;
  }
}

.page-hero h1 {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
}

/* Ticker */
.ticker {
  background: var(--night);
  color: #ffffff;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 90s linear infinite;
}

.ticker:hover .ticker-track {
  animation-play-state: paused;
}

.ticker ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  height: 52px;
}

@media (min-width: 64rem) {
  .ticker ul {
    height: 64px;
  }
}

.ticker li {
  display: flex;
  align-items: center;
  font-family: var(--head);
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
}

.ticker li::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  margin-inline: 1.5rem;
}

@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .ticker-track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }

  .ticker ul {
    flex-wrap: wrap;
    justify-content: center;
    height: auto;
    padding-block: 0.75rem;
  }

  .ticker ul[aria-hidden="true"] {
    display: none;
  }

  .btn,
  .btn:hover,
  a.service:hover {
    transition: none;
    transform: none;
  }
}

/* Cards and grids */
.card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}

.grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 40rem) {
  .grid-2,
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Instant quote */
.quote-card {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px;
  display: grid;
  gap: 32px;
}

@media (min-width: 48rem) {
  .quote-card {
    padding: 32px;
  }
}

.quote-card > header {
  display: grid;
  gap: 8px;
}

.quote-card h2 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
}

.step {
  display: grid;
  gap: 16px;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.step-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--head);
  font-weight: 800;
  font-size: 1.1875rem;
  color: var(--ink);
  padding: 0;
}

.step-num {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--ink);
  color: #ffffff;
  font-size: 0.9375rem;
  flex-shrink: 0;
}

.form-grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 22.5rem) {
  .form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field {
  display: grid;
  gap: 6px;
  min-width: 0;
  align-content: start;
}

.field label,
.field-label {
  font-weight: 600;
  font-size: 1rem;
  color: var(--label);
}

.opt {
  font-weight: 400;
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 1.0625rem;
  width: 100%;
  min-height: 52px;
  padding: 0.7rem 0.85rem;
  color: var(--ink);
  background-color: var(--field);
  border: 1px solid var(--field-line);
  border-radius: var(--r-sm);
}

.field textarea {
  min-height: 6rem;
  resize: vertical;
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2364748B' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 0.8rem;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 1px;
  background-color: #ffffff;
}

.extras {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 48rem) {
  .extras {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.extra {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #ffffff;
  min-width: 0;
}

.extra.is-on {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan);
}

.check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
  min-height: 48px;
}

.check input {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--link);
  flex-shrink: 0;
  margin: 0;
}

.extra-control {
  display: grid;
  gap: 6px;
  font-size: 0.9375rem;
  color: var(--muted);
}

.extra-control[hidden] {
  display: none;
}

.stepper {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--field-line);
  border-radius: var(--r-sm);
  background: var(--field);
  overflow: hidden;
}

.stepper button {
  width: 48px;
  min-height: 48px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

.stepper button svg {
  width: 16px;
  height: 16px;
}

.stepper input {
  width: 100%;
  min-width: 0;
  border: 0;
  text-align: center;
  font: inherit;
  font-weight: 700;
  background: transparent;
  color: var(--ink);
  -moz-appearance: textfield;
}

.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sizes {
  display: grid;
  gap: 4px;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.sizes label {
  position: relative;
  min-width: 0;
}

.sizes input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sizes span {
  display: grid;
  place-items: center;
  min-height: 48px;
  border: 1px solid var(--field-line);
  border-radius: var(--r-sm);
  background: var(--field);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--ink);
  cursor: pointer;
}

.sizes input:checked + span {
  background: var(--ink);
  color: #ffffff;
  border-color: var(--ink);
}

.sizes input:focus-visible + span {
  outline: 3px solid var(--link);
  outline-offset: 1px;
}

.access {
  display: grid;
  gap: 12px;
}

@media (min-width: 40rem) {
  .access {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.access label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 14px 48px 14px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #ffffff;
  cursor: pointer;
}

.access input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.a-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--bg-alt);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--ink);
}

.a-icon svg {
  width: 26px;
  height: 26px;
}

.access strong {
  display: block;
  font-family: var(--head);
  color: var(--ink);
  font-size: 1rem;
}

.access small {
  display: block;
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.4;
}

.access label::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--field-line);
}

.access label:has(input:checked) {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan);
}

.access label:has(input:checked)::after {
  border-color: var(--cyan);
  background: var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230b1b2e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.access label:has(input:focus-visible) {
  outline: 3px solid var(--link);
  outline-offset: 2px;
}

.price-panel {
  display: grid;
  gap: 12px;
  padding: 20px;
  border-radius: var(--r-md);
  background: var(--bg-alt);
  border: 1px solid var(--line);
}

.price-rows {
  display: grid;
  gap: 4px;
}

.price-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.price-row.big {
  font-family: var(--head);
  font-size: 1.125rem;
  font-weight: 700;
}

.price-row.big strong {
  font-size: 1.75rem;
  font-weight: 800;
}

.price-lines {
  margin: 0;
  padding: 10px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 2px;
  font-size: 1rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.price-lines li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.price-msg {
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.1875rem;
  color: var(--ink);
}

.price-note {
  font-size: 0.9375rem;
  color: var(--muted);
}

.price-note.reminder {
  color: var(--ink);
  font-weight: 600;
}

.confirm-note {
  font-size: 1rem;
  color: var(--label);
  font-weight: 600;
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

.form-status:empty {
  display: none;
}

.form-status.is-error {
  color: #9a1c1c;
}

.form-status.is-ok {
  color: #0b6b3a;
}

.fine {
  font-size: 0.9375rem;
  color: var(--muted);
}

/* Price teaser chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  font-weight: 600;
  color: var(--ink);
}

.chip b {
  font-family: var(--head);
}

.teaser-price {
  font-family: var(--head);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 3rem);
  color: var(--ink);
  line-height: 1.1;
}

/* Reviews */
.reviews-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 24px;
}

.reviews-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.reviews-brand .g-big {
  width: 44px;
  height: 44px;
}

.reviews-brand h2 {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
}

.reviews-brand p {
  color: var(--muted);
  font-size: 1rem;
}

.reviews-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}




.review {
  position: relative;
  scroll-snap-align: start;
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 22px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  margin: 0;
}

.review-top {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-family: var(--head);
  font-weight: 800;
  font-size: 1.0625rem;
}

.review-name {
  font-weight: 700;
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.25;
}

.review-src {
  display: block;
  font-size: 0.875rem;
  color: var(--muted);
  font-weight: 400;
}

.review-top .ico {
  width: 1.25rem;
  height: 1.25rem;
}

.review-top .fb {
  fill: #1877f2;
}

.stars {
  display: flex;
  gap: 2px;
  color: var(--star);
}

.stars svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.review blockquote {
  margin: 0;
}

.review-text {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  overflow-wrap: anywhere;
}

.review-text.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.read-more {
  justify-self: start;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--link);
  background: none;
  border: 0;
  padding: 0;
  min-height: 48px;
  cursor: pointer;
}

.read-more[hidden] {
  display: none;
}






.reviews-brand .fb-big {
  width: 40px;
  height: 40px;
  fill: #1877f2;
}

/* Services grid */
.service {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

a.service:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

.service-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--bg-alt);
  display: grid;
  place-items: center;
  color: var(--ink);
}

.service-icon svg {
  width: 28px;
  height: 28px;
}

.from {
  font-family: var(--head);
  font-weight: 800;
  color: var(--ink);
}

.from small {
  font-family: var(--body);
  font-weight: 400;
  color: var(--muted);
  font-size: 0.9375rem;
}

.service p {
  font-size: 1rem;
  color: var(--text);
}

.more-link {
  font-weight: 700;
  font-family: var(--head);
  color: var(--link);
}

/* Work */
.work-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 64rem) {
  .work-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }
}

.work-grid .wide {
  grid-column: span 2;
}

.work-grid figure {
  margin: 0;
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}

.ph {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-alt);
}

.ph.square {
  aspect-ratio: 1 / 1;
}

.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-grid figcaption {
  font-size: 1rem;
  color: var(--text);
}

/* Areas */
.areas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.areas li {
  padding: 0.55rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  font-weight: 600;
  color: var(--ink);
}

.info-card {
  padding: 24px;
  display: grid;
  gap: 16px;
  align-content: start;
}

.hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 24px;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.hours dt {
  font-weight: 600;
  color: var(--ink);
}

.hours dd {
  margin: 0;
}

.contact-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.contact-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* FAQ */
.faq {
  max-width: 48rem;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
  padding-block: 0.75rem;
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--ink);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%230b1b2e' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.faq details[open] summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14' fill='none' stroke='%230b1b2e' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.faq details p {
  padding-bottom: 1.25rem;
  max-width: 65ch;
}

/* Price tables */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #ffffff;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
}

.price-table caption {
  text-align: left;
  padding: 16px 16px 4px;
  font-family: var(--head);
  font-weight: 700;
  color: var(--ink);
}

.price-table th,
.price-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.price-table thead th {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--label);
}

.price-table tbody th {
  color: var(--ink);
}

.price-table tr:last-child th,
.price-table tr:last-child td {
  border-bottom: 0;
}

.price-table b {
  font-family: var(--head);
  color: var(--ink);
}

.price-table .first {
  display: block;
  font-size: 0.875rem;
  color: var(--muted);
}

.desktop-only {
  display: none;
}

@media (min-width: 48rem) {
  .desktop-only {
    display: block;
  }

  .mobile-only {
    display: none;
  }
}

.type-card {
  padding: 20px;
  display: grid;
  gap: 8px;
}

.type-card dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
}

.type-card dt {
  font-weight: 600;
  color: var(--ink);
}

.type-card dd {
  margin: 0;
}

.mini-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
}

.mini-table th,
.mini-table td {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-weight: 400;
}

.mini-table td {
  text-align: right;
  font-weight: 700;
  color: var(--ink);
}

.ticks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.ticks li {
  position: relative;
  padding-left: 2rem;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230b1b2e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.svc-section {
  display: grid;
  gap: 24px;
  scroll-margin-top: 88px;
}

@media (min-width: 64rem) {
  .svc-section {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
  }

  .svc-section.flip .svc-media {
    order: 2;
  }
}

.svc-media {
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bg-alt);
}

.svc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svc-copy {
  display: grid;
  gap: 24px;
  align-content: start;
}

.from-badge {
  justify-self: start;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--ink);
  color: #ffffff;
  font-family: var(--head);
  font-weight: 700;
  font-size: 0.9375rem;
}

.stack {
  display: grid;
  gap: 24px;
}

.anchor {
  scroll-margin-top: 88px;
}

/* Footer */
.site-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  padding-block: 56px 104px;
  color: var(--text);
}

.footer-grid {
  display: grid;
  gap: 32px;
}

@media (min-width: 48rem) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

.footer-brand {
  display: grid;
  gap: 12px;
  align-content: start;
}

.footer-brand .brand {
  color: var(--ink);
  flex: 0 0 auto;
}

.strap {
  font-family: var(--head);
  font-weight: 700;
  color: var(--ink);
}

.site-footer h2 {
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 12px;
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.site-footer a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  overflow-wrap: anywhere;
}

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer .btn {
  text-decoration: none;
}

.footer-areas {
  font-size: 1rem;
}

.footer-base {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
}

.wa-float {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--green);
  color: var(--ink);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(11, 27, 46, 0.28);
}

.wa-float.is-tucked {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}

.wa-float {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.wa-float .ico {
  width: 1.9rem;
  height: 1.9rem;
}

.notfound {
  padding-block: 10rem 5rem;
  text-align: center;
  display: grid;
  gap: 24px;
  justify-items: center;
}

@media (max-width: 25.99rem) {
  .extra.is-on {
    grid-column: span 2;
  }
}

.ticker:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: -3px;
}

.price-row .from-word {
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* Motion: everything is visible by default; these only run when motion is allowed */
.hero {
  overflow: hidden;
}

.price-row strong {
  display: inline-block;
}

.access label,
.extra,
.review,
.card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-media img {
    animation: hero-drift 22s cubic-bezier(0.2, 0.6, 0.2, 1) both;
    transform-origin: 60% 40%;
  }

  .js .hero-copy > * {
    animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .js .hero-copy > :nth-child(1) { animation-delay: 0.05s; }
  .js .hero-copy > :nth-child(2) { animation-delay: 0.15s; }
  .js .hero-copy > :nth-child(3) { animation-delay: 0.3s; }
  .js .hero-copy > :nth-child(4) { animation-delay: 0.42s; }
  .js .hero-copy > :nth-child(5) { animation-delay: 0.54s; }

  .mark {
    background-size: 0% 4px;
    animation: underline 0.9s 0.7s cubic-bezier(0.6, 0, 0.2, 1) forwards;
  }

  .motion .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--d, 0s);
  }

  .motion .reveal.in {
    opacity: 1;
    transform: none;
  }

  .extra.is-on .extra-control {
    animation: drop 0.25s ease both;
  }

  .review:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.1);
  }

  .access label:hover {
    border-color: var(--field-line);
  }

  .price-row strong.bump {
    animation: bump 0.35s ease;
  }
}

@keyframes hero-drift {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes underline {
  to {
    background-size: 100% 4px;
  }
}

@keyframes drop {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes bump {
  40% {
    transform: scale(1.08);
    color: var(--link);
  }
}

/* Service articles (Jase's copy) */
.svc-list {
  display: grid;
  gap: calc(var(--pad) * 1.25);
}

.svc-article {
  display: grid;
  gap: 32px;
  padding-bottom: calc(var(--pad) * 1.25);
  border-bottom: 1px solid var(--line);
}

.svc-article:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.svc-section.no-media {
  grid-template-columns: minmax(0, 1fr);
  max-width: 48rem;
}

.svc-intro {
  display: grid;
  gap: 16px;
  max-width: 65ch;
}

.svc-detail {
  display: grid;
  gap: 24px;
}

@media (min-width: 64rem) {
  .svc-detail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 48px;
  }
}

.svc-block {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.svc-block .ticks li,
.steps li {
  font-size: 1.125rem;
  line-height: 1.55;
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 14px;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.75rem;
  min-height: 2rem;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--ink);
  color: #ffffff;
  font-family: var(--head);
  font-weight: 800;
  font-size: 0.9375rem;
}

.tip {
  padding: 12px 14px;
  border-left: 4px solid var(--cyan);
  background: var(--bg-alt);
  font-size: 1.125rem;
}

.svc-close {
  max-width: 65ch;
  font-size: 1.125rem;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero-video.is-playing {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }
}

/* Review glide: one mixed band of Google and Facebook cards */
.brand-pair {
  display: inline-flex;
  align-items: center;
}

.brand-pair svg {
  width: 40px;
  height: 40px;
  background: #ffffff;
  border-radius: 50%;
  padding: 4px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
}

.brand-pair .fb-big {
  margin-left: 6px;
  fill: #1877f2;
}

.reviews-tools .btn .fb {
  fill: #1877f2;
}

.glide {
  overflow-x: auto;
  padding-block: 8px 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.glide-track {
  display: flex;
  align-items: flex-start;
  width: max-content;
}

.glide .review {
  width: clamp(17rem, 78vw, 22rem);
  flex: 0 0 auto;
  margin-right: 20px;
}

.glide.is-moving .glide-track {
  animation: glide var(--glide-duration, 120s) linear infinite;
}

.glide.is-moving:hover .glide-track,
.glide.is-moving:focus-within .glide-track,
.glide.is-paused .glide-track {
  animation-play-state: paused;
}

@keyframes glide {
  to {
    transform: translateX(-50%);
  }
}

.glide-controls {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.glide-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.glide-toggle svg {
  width: 16px;
  height: 16px;
}

.glide-toggle .i-play,
.glide-toggle.is-paused .i-pause,
.video-toggle .i-play,
.video-toggle.is-paused .i-pause {
  display: none;
}

.glide-toggle.is-paused .i-play,
.video-toggle.is-paused .i-play {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .glide {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .glide .review {
    scroll-snap-align: start;
  }

  .glide-controls {
    display: none;
  }
}

/* Quote form opens step by step (all open without JavaScript) */
.quote-card {
  gap: 0;
}

.quote-card > header {
  margin-bottom: 32px;
}

.stage {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.stage-inner {
  min-height: 0;
  overflow: hidden;
  padding-top: 32px;
}

#stage-extras .stage-inner {
  padding-top: 16px;
}

.quote-ready .stage:not(.open) {
  grid-template-rows: 0fr;
}

.quote-ready .stage:not(.open) .stage-inner {
  visibility: hidden;
  padding-top: 0;
}

.quote-ready .stage.open .stage-inner {
  animation: stage-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes stage-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.stage-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 16px;
}

.stage-next[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .stage {
    transition: none;
  }

  .quote-ready .stage.open .stage-inner {
    animation: none;
  }
}

.glide .review {
  display: flex;
  flex-direction: column;
}

.glide .read-more {
  margin-top: auto;
  align-self: flex-start;
}

.glide {
  padding-inline: 20px;
}

.glide:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: -3px;
}

.video-toggle {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

.video-toggle[hidden] {
  display: none;
}

.video-toggle svg {
  width: 16px;
  height: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .glide.is-moving .glide-track {
    animation: none;
  }

  .glide .review[aria-hidden="true"] {
    display: none;
  }

  .video-toggle {
    display: none;
  }
}

.svc-article,
.svc-section {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 64rem) {
  .svc-section:not(.no-media) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.svc-detail {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 64rem) {
  .svc-detail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.svc-block,
.svc-media,
.svc-copy {
  min-width: 0;
  overflow-wrap: break-word;
}

.svc-list {
  grid-template-columns: minmax(0, 1fr);
}

/* Audit pass, 20 Oct */
html {
  scroll-padding: 88px 0 90px;
}

.hero :focus-visible,
.ticker :focus-visible,
.site-header:not(.is-solid):not(.menu-open) :focus-visible {
  outline-color: #ffffff;
}

#quote-form:not(.quote-ready) [type="submit"],
#quote-form:not(.quote-ready) #wa-send,
.glide:not(.is-moving) ~ .glide-controls,
.ticker:not(.ready) .ticker-toggle,
.site-header:not(.nav-ready) .menu-btn {
  display: none;
}

.quote-fallback {
  padding: 12px 14px;
  border-left: 4px solid var(--cyan);
  background: var(--bg-alt);
}

.quote-ready .quote-fallback {
  display: none;
}

.glide.is-moving {
  overflow: hidden;
}

.section-head.wide {
  max-width: 60rem;
}

.extras,
#extras .grid-3 {
  align-items: start;
}

.foot-h {
  font-family: var(--head);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--label);
  margin: 0 0 12px;
}

/* Home hero: the video carries the motion, so no drift under it; lighter on the right on desktop */
.hero:not(.page-hero) .hero-media img {
  animation: none;
}

@media (min-width: 64rem) {
  .hero:not(.page-hero)::after {
    background: linear-gradient(90deg, rgba(10, 14, 20, 0.78) 0%, rgba(10, 14, 20, 0.66) 45%, rgba(10, 14, 20, 0.32) 100%);
  }
}

/* Running price receipt under step 1 */
.receipt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--ink);
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.receipt[hidden] {
  display: none;
}

.receipt-label {
  font-size: 0.9375rem;
  color: #cbd5e1;
}

.receipt-nums {
  font-family: var(--head);
  font-weight: 800;
  font-size: 1.125rem;
}

.receipt-nums b {
  display: inline-block;
  color: var(--cyan);
}

@media (prefers-reduced-motion: no-preference) {
  .receipt-nums b.bump {
    animation: bump 0.35s ease;
  }
}

/* Ticker pause */
.ticker {
  position: relative;
}

.ticker.is-paused .ticker-track {
  animation-play-state: paused;
}

.ticker-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: var(--night);
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.ticker-toggle svg {
  width: 14px;
  height: 14px;
}

.ticker-toggle .i-play,
.ticker-toggle.is-paused .i-pause {
  display: none;
}

.ticker-toggle.is-paused .i-play {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .ticker-toggle {
    display: none;
  }
}

/* No JavaScript at all: show the mobile links in the header instead of a dead menu button */
@media (max-width: 63.99rem) {
  html:not(.js) .site-header .mobile-menu {
    display: grid;
    background: transparent;
    border-top: 0;
    padding-top: 0;
  }

  html:not(.js) .site-header .mobile-menu a {
    color: inherit;
    border-bottom-color: rgba(255, 255, 255, 0.2);
  }

  html:not(.js) .site-header {
    position: absolute;
    background: rgba(14, 18, 21, 0.85);
  }
}

/* Get your quote page (/quote/): one form that grows section by section */
#q:not(.quote-ready) .qs {
  display: none;
}

.q-layout {
  display: grid;
  gap: 32px;
  align-items: start;
}

@media (min-width: 64rem) {
  .q-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 48px;
  }
}

.q-card {
  width: 100%;
  max-width: 44rem;
  padding: 24px;
  display: grid;
  gap: 40px;
}

@media (min-width: 48rem) {
  .q-card {
    padding: 36px;
  }
}

.qs {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.qs[hidden] {
  display: none;
}

.qs + .qs:not([hidden]) {
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.qs h2 {
  font-size: clamp(1.5rem, 3.4vw, 1.875rem);
  font-weight: 700;
}

.qs-in {
  animation: qs-in 450ms ease-out both;
}

@keyframes qs-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.pc-row {
  display: flex;
  gap: 10px;
}

.pc-row input {
  flex: 1 1 auto;
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pc-row .btn {
  flex: 0 0 auto;
  min-width: 6.5rem;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.q-hint {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

.q-hint:empty,
.q-hint[hidden] {
  display: none;
}

.q-hint.is-warn {
  color: #8a4b00;
  font-weight: 600;
}

.house-grid {
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  align-items: end;
}

.house-grid[hidden] {
  display: none;
}

@media (max-width: 28rem) {
  .house-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.addr-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-alt);
}

.addr-card[hidden],
.sv[hidden] {
  display: none;
}

.sv {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--line);
}

.sv img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 200ms;
}

.sv.is-loading img {
  opacity: 0.55;
}

.sv-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.sv-btn svg {
  width: 20px;
  height: 20px;
}

.sv-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.sv-btn:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 2px;
}

.sv-left {
  left: 10px;
}

.sv-right {
  right: 10px;
}

.sv-pill {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(14, 18, 21, 0.78);
  color: #ffffff;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.addr-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}

.addr-line p {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
}

.link-btn {
  font: inherit;
  font-weight: 600;
  color: var(--link);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  text-align: left;
  min-height: 24px;
}

.q-other {
  margin: 0;
  font-size: 0.9375rem;
}

.tog-group {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: grid;
  gap: 10px;
}

.tog-group[hidden] {
  display: none;
}

.tog-grid {
  display: grid;
  gap: 8px;
}

.tog-types {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tog-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.tog-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tog-stack {
  display: grid;
  gap: 8px;
}

.tog {
  font: inherit;
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  min-height: 52px;
  padding: 10px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #ffffff;
  box-shadow: var(--shadow);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  min-width: 0;
  transition: border-color 150ms, box-shadow 150ms, background-color 150ms;
}

.tog:hover {
  border-color: #9fdcf2;
}

.tog-types .tog {
  min-height: 0;
  padding: 10px 6px 12px;
  gap: 4px;
}

.tog-img {
  display: block;
  width: 100%;
  max-width: 112px;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

.tog-ico {
  width: 48px;
  height: 32px;
  color: var(--label);
}

.tog[aria-pressed="true"] {
  background: #effaff;
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan);
  color: var(--ink);
}

.tog-types .tog[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230b1b2e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

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

.tog-wide {
  justify-items: start;
  text-align: left;
  padding: 12px 16px;
}

.tog-wide small {
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--muted);
}

.tog-wide strong {
  font-weight: 600;
}

.q-two {
  display: grid;
  gap: 20px;
}

@media (min-width: 30rem) {
  .q-two {
    grid-template-columns: minmax(0, 5fr) minmax(0, 3fr);
  }
}

.q-flags {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 4px 16px;
}

.q-flags summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--label);
  min-height: 48px;
  display: flex;
  align-items: center;
}

.q-flag-list {
  display: grid;
  gap: 2px;
  padding-bottom: 6px;
}

.q-flags .q-hint {
  padding-bottom: 12px;
}

.q-cta {
  display: grid;
  gap: 10px;
}

.q-cta .btn,
.q-send {
  width: 100%;
  min-height: 56px;
  justify-content: center;
}

.q-price {
  display: grid;
  gap: 12px;
  padding: 24px;
  border-radius: var(--r-md);
  background: var(--ink);
  color: #ffffff;
}

.q-price p {
  margin: 0;
}

.q-price-lead {
  font-weight: 600;
  color: var(--cyan);
}

.q-price-big {
  font-family: var(--head);
  font-weight: 800;
  font-size: clamp(2.5rem, 8vw, 3.25rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.q-price-big span {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #d6dde6;
}

.q-price-big .from-word {
  font-size: 1.25rem;
}

.q-price-first strong {
  font-size: 1.125rem;
}

.q-price-inc,
.q-price-note {
  color: #d6dde6;
  font-size: 0.9375rem;
}

.q-price .btn {
  width: 100%;
  min-height: 56px;
  justify-content: center;
  background: var(--cyan);
  color: var(--ink);
  border-color: var(--cyan);
}

.q-price .btn:hover {
  background: #ffffff;
}

.q-price-ticks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  font-size: 0.9375rem;
  color: #d6dde6;
}

.q-price-ticks li::before {
  content: "\2713\00a0\00a0";
  color: var(--cyan);
  font-weight: 700;
}

.q-hand,
.q-done {
  display: grid;
  gap: 12px;
  padding: 24px;
  border-radius: var(--r-md);
  background: var(--bg-alt);
  border: 1px solid var(--line);
}

.q-hand p,
.q-done p,
.q-hand ul {
  margin: 0;
}

.q-hand ul {
  padding-left: 1.2rem;
  display: grid;
  gap: 4px;
}

.q-hand-cap {
  font-family: var(--head);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--ink);
}

.q-hand-sum {
  font-size: 0.9375rem;
  color: var(--muted);
}

.q-done-price {
  font-family: var(--head);
  font-weight: 800;
  font-size: 1.375rem;
  color: var(--ink);
}

.q-recap {
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  background: var(--bg-alt);
  font-weight: 600;
  color: var(--ink);
}

.q-recap[hidden] {
  display: none;
}

.q-aside {
  display: grid;
  gap: 16px;
  font-size: 1rem;
  color: var(--text);
}

.q-aside p {
  margin: 0;
}

.q-aside strong {
  display: block;
  font-family: var(--head);
  color: var(--ink);
}

@media (max-width: 28rem) {
  .q-card {
    padding: 18px;
  }
  .tog-types .tog {
    font-size: 0.875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qs-in {
    animation: none;
  }
}

.pc-start {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 30rem;
  margin: 8px auto 0;
}

.pc-start input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 1.0625rem;
  min-height: 56px;
  padding: 0.7rem 0.95rem;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--field-line);
  border-radius: var(--r-sm);
  text-transform: uppercase;
}

.pc-start input::placeholder {
  text-transform: none;
  color: var(--muted);
}

.pc-start input:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 1px;
}

.pc-start .btn {
  flex: 0 0 auto;
}

/* Quote page: softer, bordered panels like the extras cards */
#q .sizes span {
  background: #ffffff;
  border-color: var(--line);
  border-radius: var(--r-sm);
  font-weight: 600;
}

#q .sizes input:checked + span {
  background: #effaff;
  color: var(--ink);
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan);
}

#q .check {
  font-weight: 600;
}

.q-hand-cap {
  font-weight: 700;
}

.q-hand .btn-row,
.q-done .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.q-hand .btn,
.q-done .btn {
  flex: 1 1 13rem;
  justify-content: center;
}

.q-hand .btn-outline,
.q-done .btn-outline {
  background: #ffffff;
  color: var(--ink);
  border-color: var(--field-line);
}

.q-hand-hurry {
  font-weight: 600;
  color: var(--ink);
}

/* Homepage: tighter grey bands under the reviews and around "Get your quote" */
.reviews-sec {
  padding-bottom: 32px;
}

.quote-band {
  padding-block: 40px;
}

@media (min-width: 64rem) {
  .reviews-sec {
    padding-bottom: 40px;
  }
  .quote-band {
    padding-block: 56px;
  }
}

.quote-band .section-head {
  margin-bottom: 0;
}

.tog-types .tog[aria-pressed="true"] {
  background: #ffffff;
}

#q .extras {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Reviews band: every card the height of the tallest, long reviews cut to four lines */
.glide-track {
  align-items: stretch;
}

.glide .review-text.is-clamped {
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.svc-note {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
}

/* Roof lantern pages */
.lantern-price {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 24px;
}

.lantern-price p {
  margin: 0;
}

.lp-name {
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--ink);
}

.lp-price {
  font-family: var(--head);
  font-weight: 800;
  font-size: 1.75rem;
  color: var(--label);
}

.lp-price span {
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
}

.lantern-cta {
  display: grid;
  gap: 12px;
  padding: 28px;
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan);
}

.lantern-cta p,
.lantern-cta h2 {
  margin: 0;
}

.lantern-cross {
  display: grid;
  gap: 20px;
  align-items: center;
}

@media (min-width: 48rem) {
  .lantern-cross {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.lantern-cta .btn {
  white-space: normal;
  overflow-wrap: anywhere;
  justify-content: center;
}

@media (max-width: 40rem) {
  .lantern-cta {
    padding: 20px;
  }
  .lantern-cta .btn-row {
    display: grid;
  }
}

.pc-start input {
  flex: 1 1 0;
  width: 100%;
}

@media (max-width: 26rem) {
  .pc-start {
    flex-direction: column;
  }
  .pc-start .btn {
    justify-content: center;
  }
}

/* Size guides (roof lanterns; conservatories to follow): Jase's layout */
.size-guide {
  display: grid;
  gap: 28px;
}

.sg-head {
  display: grid;
  gap: 10px;
  padding: 28px 24px;
  border-radius: var(--r-md);
  background: var(--label);
  color: #ffffff;
  text-align: center;
}

.sg-head h2 {
  color: #ffffff;
  font-size: clamp(1.75rem, 4.4vw, 2.5rem);
}

.sg-head h2 span {
  color: #7cc8ff;
}

.sg-head p {
  margin: 0 auto;
  max-width: 46rem;
  color: #e6eef7;
  font-size: 1.0625rem;
}

.sg-cols {
  display: grid;
  gap: 28px;
}

@media (min-width: 48rem) {
  .sg-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

.sg-col {
  display: grid;
  gap: 14px;
  align-content: start;
  grid-template-rows: auto auto 1fr auto;
}

.sg-col img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 336 / 273;
  object-fit: cover;
  border-radius: var(--r-md);
}

.sg-pill {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 36px;
  border-radius: 999px;
  background: #2f8fde;
  color: #ffffff;
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.375rem;
}

.sg-pill.is-dark {
  background: var(--label);
}

.sg-ico {
  width: 26px;
  height: 26px;
}

.sg-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  align-content: start;
}

.sg-list li {
  position: relative;
  padding-left: 20px;
  color: var(--text);
}

.sg-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2f8fde;
}

.sg-col:last-child .sg-list li::before {
  background: var(--label);
}

.sg-size {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: #e6f1fc;
  color: var(--text);
  font-size: 0.9375rem;
}

.sg-size strong {
  display: block;
  font-family: var(--head);
  font-size: 1.125rem;
  color: var(--ink);
}

.sg-arrow {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--ink);
}

.sg-photo {
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
  padding: 22px;
  border-radius: var(--r-md);
  background: #ffffff;
  border: 1px solid var(--line);
}

.sg-photo p {
  margin: 0;
  font-size: 1.125rem;
  color: var(--ink);
}

.sg-photo .btn-row {
  justify-content: center;
}

.sg-important {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 24px;
  border-radius: var(--r-md);
  background: #e6f1fc;
  border-left: 6px solid var(--label);
}

.sg-i {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--label);
  color: #ffffff;
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 1.75rem;
}

.sg-important p {
  margin: 0;
}

.sg-imp-title {
  font-family: var(--head);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--ink);
  margin-bottom: 4px !important;
}

@media (max-width: 26rem) {
  .sg-important {
    flex-direction: column;
  }
  .sg-photo .btn-row {
    display: grid;
    width: 100%;
  }
}

/* Quote form: "i" information buttons and pop-ups */
.extra-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.extra-head .check {
  min-width: 0;
}

.info-btn {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--label);
  background: #ffffff;
  color: var(--label);
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.info-btn:hover {
  background: var(--label);
  color: #ffffff;
}

.info-btn:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 2px;
}

.info-dialog {
  width: min(34rem, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  box-shadow: 0 20px 50px rgba(11, 27, 46, 0.3);
  color: var(--text);
}

.info-dialog::backdrop {
  background: rgba(11, 27, 46, 0.55);
}

.id-inner {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.id-inner p {
  margin: 0;
}

.id-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.id-top h2 {
  font-size: 1.375rem;
}

.id-close {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--bg-alt);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.id-close:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 2px;
}

.ig-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.ig-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.ig-plain .ig-row {
  grid-template-columns: minmax(0, 1fr);
}

.ig-row img {
  width: 96px;
  height: 78px;
  object-fit: cover;
  border-radius: var(--r-sm);
}

.ig-name {
  font-family: var(--head);
  font-weight: 700;
  color: var(--ink);
}

.ig-name span {
  margin-left: 6px;
  color: var(--label);
}

.ig-size {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--label);
}

.ig-row p:last-child:not(.ig-name) {
  font-size: 0.9375rem;
}

.id-important {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: #e6f1fc;
  border-left: 5px solid var(--label);
  font-size: 0.9375rem;
}

.id-imp-title {
  font-family: var(--head);
  font-weight: 800;
  color: var(--ink);
}

.id-photo {
  color: var(--ink);
}

.info-dialog .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.info-dialog .btn {
  flex: 1 1 12rem;
  justify-content: center;
}

@media (max-width: 26rem) {
  .ig-row {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .ig-row img {
    width: 72px;
    height: 58px;
  }
}

/* Jase 26 Oct: "i" buttons tucked into the box corner; extras boxes turn brand blue on hover */
#q .extra {
  position: relative;
  transition: background-color 150ms, border-color 150ms, box-shadow 150ms;
}

#q .extra-head {
  padding-right: 34px;
}

#q .info-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  font-size: 0.9375rem;
}

@media (hover: hover) {
  #q .extra:hover {
    background: var(--cyan);
    border-color: var(--cyan);
    box-shadow: 0 0 0 1px var(--cyan);
  }
  #q .extra:hover .check,
  #q .extra:hover .extra-control {
    color: var(--ink);
  }
  #q .extra:hover .info-btn {
    background: #ffffff;
  }
}


/* Quote page: property type, bedrooms and floors turn brand blue on hover, like the extras (Jase, 27 Oct) */
#q .tog-types .tog-img {
  border-radius: 10px;
}

@media (hover: hover) {
  #q [data-group="type"] .tog:hover,
  #q [data-group="beds"] .tog:hover,
  #q [data-group="floors"] .tog:hover {
    background: var(--cyan);
    border-color: var(--cyan);
    box-shadow: 0 0 0 1px var(--cyan);
    color: var(--ink);
  }
  #q [data-group="type"] .tog[aria-pressed="true"]:hover::after {
    background-color: #ffffff;
  }
}


.ph.pano { aspect-ratio: 832 / 309; }

/* ===== Jase 29 Oct: homepage, menu, lanterns (Claude) ===== */

/* Mobile menu: Services is one item that opens its list */
.mm-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  font-family: var(--head);
  font-weight: 700;
  font-size: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.mm-toggle .chev {
  width: 14px;
  height: 14px;
  margin-right: 4px;
  transition: transform 0.2s ease;
}

.mm-toggle[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}

.mm-toggle:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 2px;
}

.mm-group:not([hidden]) {
  display: grid;
  gap: 0.25rem;
}

html:not(.js) .mm-toggle {
  display: none;
}

html:not(.js) .mm-group {
  display: grid;
}

@media (prefers-reduced-motion: reduce) {
  .mm-toggle .chev {
    transition: none;
  }
}
/* Menu "Get your quote" button: text was navy on navy */
.mobile-menu a.btn-dark {
  color: #ffffff;
}
/* Locations (Jase, 2 Nov): bold area headings with the places underneath */
.loc-head {
  margin: 0 0 0.35rem;
  font-family: var(--head);
  font-weight: 800;
  color: var(--ink);
}

.loc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text);
}

.nav-menu-loc {
  left: 50%;
  transform: translateX(-50%);
  width: min(44rem, 92vw);
  padding: 1.1rem 1.4rem 1.25rem;
}

.nav-item.is-open .nav-menu-loc {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1fr;
  gap: 1.5rem;
}

.nav-menu-loc .loc-list {
  font-family: var(--body);
  font-weight: 400;
}

/* Six menu items now: keep each on one line */
@media (min-width: 64rem) {
  .site-nav {
    gap: 1.1rem;
    white-space: nowrap;
  }
}

@media (min-width: 64rem) and (max-width: 79.99rem) {
  .site-nav {
    gap: 0.9rem;
    font-size: 0.9375rem;
  }
}

.nav-menu-loc .loc-col:first-child .loc-list {
  columns: 2;
  column-gap: 1rem;
}

.mm-loc:not([hidden]) {
  gap: 1rem;
  padding: 0.75rem 0 1rem 1rem;
  border-bottom: 1px solid var(--line);
}

.mm-loc .loc-list {
  columns: 2;
  column-gap: 1rem;
}

html:not(.js) .mm-loc .loc-head,
html:not(.js) .mm-loc .loc-list {
  color: inherit;
}
/* end Claude block */

/* -------------------------------------------------------- */
/* separator: do not edit */
/* -------------------------------------------------------- */

/* ===== Jase 29 Oct: price guide (Cursor) ===== */
.price-guide-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 1.5rem);
  width: 100%;
  min-width: 0;
}

@media (min-width: 40rem) {
  .price-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .price-guide-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.price-guide-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .price-guide-card {
    transition: none;
  }
}

.price-guide-card:hover,
.price-guide-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .price-guide-card:hover,
  .price-guide-card:focus-visible {
    transform: none;
  }
}

.price-guide-card h3 {
  margin: 0;
  padding: 1.125rem 1.125rem 0.375rem;
  font-family: var(--head);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
}

.price-guide-from {
  margin: 0;
  padding: 0 1.125rem;
  font-family: var(--head);
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--brand);
}

.price-guide-note {
  margin: 0.375rem 0 0;
  padding: 0 1.125rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--muted);
}

.price-guide-card:not(:has(.price-guide-note)) .price-guide-from {
  padding-bottom: 0.75rem;
}

.price-guide-media {
  display: block;
  aspect-ratio: 4 / 3;
  margin-top: auto;
  overflow: hidden;
  background: var(--bg-alt);
}

.price-guide-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* end Cursor block */

/* -------------------------------------------------------- */
/* separator: do not edit */
/* -------------------------------------------------------- */

/* ===== Jase 29 Oct: service badges, info icons, rear access (Grok) ===== */

/* Service "from" pills: brand blue, dark text. White on #02b5f5 fails WCAG. */
.from-badge {
  background: var(--brand);
  color: #07090d;
}

/* Quote extras: the i sits in the top-right corner of the box.
   The head reserves the corner, including the 44px tap target, so the
   label and the revealed size options never run underneath it. */
#q .extra-head {
  position: relative;
  padding-right: 52px;
  min-width: 0;
}

#q .extra-head .check {
  min-width: 0;
  overflow-wrap: anywhere;
}

#q .info-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border: 2px solid var(--brand);
  background: #ffffff;
  color: var(--brand);
}

#q .info-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

#q .info-btn:hover,
#q .info-btn:focus-visible,
#q .extra:hover .info-btn,
#q .extra:hover .info-btn:hover {
  background: #ffffff;
  color: var(--brand);
  border-color: var(--brand);
}

@media (max-width: 36rem) {
  #q .extras {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The narrow rule that spans a ticked extra would open a second column. */
  #q .extra.is-on {
    grid-column: auto;
  }
}

/* Rear access. Yes is faded blue, No is faded red.
   Hover must not turn No blue (see .tog:hover and the quote hover blocks). */
#q [data-group="rear"] .tog[data-val="yes"] {
  background: rgba(2, 181, 245, 0.12);
  border-color: rgba(2, 181, 245, 0.55);
  box-shadow: none;
  color: #07090d;
}

#q [data-group="rear"] .tog[data-val="yes"]:hover {
  background: rgba(2, 181, 245, 0.2);
  border-color: #02b5f5;
  box-shadow: none;
  color: #07090d;
}

#q [data-group="rear"] .tog[data-val="yes"][aria-pressed="true"] {
  background: rgba(2, 181, 245, 0.32);
  border-color: #02b5f5;
  box-shadow: 0 0 0 1px #02b5f5;
  color: #07090d;
}

#q [data-group="rear"] .tog[data-val="yes"][aria-pressed="true"]:hover {
  background: rgba(2, 181, 245, 0.42);
  border-color: #02b5f5;
  box-shadow: 0 0 0 1px #02b5f5;
  color: #07090d;
}

#q [data-group="rear"] .tog[data-val="no"] {
  background: rgba(220, 53, 69, 0.1);
  border-color: rgba(220, 53, 69, 0.45);
  box-shadow: none;
  color: #07090d;
}

#q [data-group="rear"] .tog[data-val="no"]:hover {
  background: rgba(220, 53, 69, 0.18);
  border-color: #dc3545;
  box-shadow: none;
  color: #07090d;
}

#q [data-group="rear"] .tog[data-val="no"][aria-pressed="true"] {
  background: rgba(220, 53, 69, 0.26);
  border-color: #dc3545;
  box-shadow: 0 0 0 1px #dc3545;
  color: #07090d;
}

#q [data-group="rear"] .tog[data-val="no"][aria-pressed="true"]:hover {
  background: rgba(220, 53, 69, 0.34);
  border-color: #dc3545;
  box-shadow: 0 0 0 1px #dc3545;
  color: #07090d;
}

#q [data-group="rear"] .tog small {
  color: #1f2a37;
}

/* end Grok block */
/* Original PureWater homepage, November 2026 */
:root{--brand:#02b5f5}
.pw-home{background:#fff;color:#102b3b}.pw-shell{width:min(1180px,calc(100% - 40px));margin:auto}.pw-section{padding-block:70px}.pw-home h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.1;margin-bottom:30px;max-width:850px}.pw-eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:.75rem;font-weight:800;margin-bottom:20px}.pw-hero{background:#0b2332;color:white;display:grid;padding-top:110px}.pw-hero-copy{padding:45px 24px}.pw-hero h1{font-size:clamp(3rem,6vw,5.8rem);line-height:1.02;letter-spacing:-.05em;margin:0 0 28px}.pw-hero-copy>p:not(.pw-eyebrow){max-width:520px;font-size:1.15rem}.pw-price{font-size:2rem!important;font-weight:800;margin:30px 0 20px}.pw-price span{font-size:.9rem;font-weight:400}.pw-hero-photo img{width:100%;height:100%;object-fit:cover;min-height:260px}.pw-actions{display:flex;gap:10px;margin:24px 0;flex-wrap:wrap}.pw-actions a,.pw-start button{background:#02b5f5;color:#092536;border:0;border-radius:6px;padding:15px 19px;font-weight:800;text-decoration:none;min-height:48px;display:inline-flex;justify-content:center;align-items:center}.pw-home .pw-actions a.pw-wa{background:#25d366;color:#062b14;border:0}.pw-rating{color:#7cdbff;display:block;margin-top:25px;text-decoration:none}.pw-rating span{color:white;display:block;font-size:.85rem;margin-top:5px}.pw-start{padding-block:35px;display:grid;gap:24px;border-bottom:1px solid #cedee5}.pw-start h2{font-size:1.8rem;margin:0 0 10px}.pw-start form{min-width:0}.pw-start label{display:block;font-weight:700;margin-bottom:8px}.pw-start form>div{display:flex;gap:8px}.pw-start input{min-width:0;width:100%;border:1px solid #78919f;border-radius:6px;padding:12px;font-size:1rem}.pw-start button{white-space:nowrap;padding-inline:12px}.pw-prices{display:grid;border-top:1px solid #c4d5de}.pw-prices a{padding:22px 0;border-bottom:1px solid #c4d5de;display:flex;justify-content:space-between;gap:18px;text-decoration:none;color:inherit}.pw-prices strong{white-space:nowrap}.pw-services{display:grid;gap:25px}.pw-services>a{color:inherit;text-decoration:none;background:#edf4f7;padding:15px;border-radius:8px}.pw-services img{width:100%;height:230px;object-fit:cover;border-radius:4px}.pw-services h3{font-size:1.5rem;margin:22px 0 12px}.pw-services span{display:block;font-weight:700;margin-top:20px}.pw-routine{background:#e5f5fc;padding:65px 0}.pw-steps{display:grid;gap:30px}.pw-steps article{border-top:3px solid #02b5f5;padding-top:20px}.pw-steps h3{font-size:1.3rem;margin-bottom:12px}.pw-reviews{display:grid;gap:20px;max-height:650px;overflow:auto;padding:5px}.pw-reviews .review{width:auto;min-width:0;max-width:none;flex:none;background:#f2f6f8;border-radius:8px}.pw-gallery{display:grid;gap:22px}.pw-gallery figure{margin:0;min-width:0}.pw-gallery img{width:100%;height:290px;object-fit:cover;border-radius:7px}.pw-gallery figcaption{font-size:.85rem;padding-top:12px}.pw-link{display:inline-block;margin-top:25px;padding:12px 0;font-weight:700}.pw-close{padding:65px 0;background:#0b2332;color:white}.pw-close a{color:inherit}.pw-close .pw-actions a{color:#102b3b}.pw-home a:focus-visible,.pw-home button:focus-visible,.pw-home input:focus-visible{outline:3px solid #087db5;outline-offset:4px}.site-footer{background:#edf3f6;color:#102b3b;border-top:6px solid #02b5f5;padding-top:45px}.site-footer a,.site-footer .foot-h,.site-footer .brand-name{color:#102b3b}.footer-grid{gap:30px}.site-footer .footer-base{border-top:1px solid #b4c8d3}.site-footer a{overflow-wrap:anywhere}.pw-home .faq summary{min-height:48px}.pw-home .areas{margin-block:25px}
@media(min-width:768px){.pw-hero{grid-template-columns:1.1fr 1fr;min-height:710px}.pw-hero-copy{padding:60px max(30px,calc((100vw - 1180px)/2)) 60px max(30px,calc((100vw - 1180px)/2));padding-right:30px}.pw-start{grid-template-columns:1fr 1fr;align-items:center;gap:50px}.pw-services,.pw-steps{grid-template-columns:repeat(3,minmax(0,1fr))}.pw-gallery,.pw-reviews{grid-template-columns:repeat(2,minmax(0,1fr))}.pw-gallery figure:first-child{grid-column:span 2}.pw-gallery figure:first-child img{height:460px}.pw-section{padding-block:90px}}
@media(max-width:400px){.pw-actions a{padding-inline:12px;font-size:.9rem;flex:1}.pw-hero-copy{padding-inline:20px}.pw-hero h1{font-size:2.9rem}}
.pw-hero h1,.pw-close h2{color:#fff}
@media(max-width:767px){.pw-hero{position:relative;isolation:isolate;padding-top:105px}.pw-hero-photo{position:absolute;inset:0;z-index:-2}.pw-hero-photo:after{content:"";position:absolute;inset:0;background:rgba(4,23,35,.83)}.pw-hero-photo img{height:100%;width:100%;object-fit:cover}.pw-hero-copy{padding-bottom:45px}}
/* Recent work: every real photo from Jase's Facebook page, grouped by service */
.pw-wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pw-wall figure{margin:0;min-width:0}.pw-wall a{display:block;border-radius:6px;overflow:hidden}.pw-wall img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .2s ease}.pw-wall a:hover img{transform:scale(1.03)}.pw-wall a:focus-visible{outline:3px solid #087db5;outline-offset:3px}.pw-wall-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.pw-wall-nav a{padding:10px 14px;border:1px solid #b7cbd5;border-radius:999px;text-decoration:none;color:#102b3b;font-weight:700;min-height:44px;display:inline-flex;align-items:center}
@media(min-width:640px){.pw-wall{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(min-width:1024px){.pw-wall{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}}
@media(prefers-reduced-motion:reduce){.pw-wall img{transition:none}}

/* Round 2 (Nov 2026): before and after slider, numbers band, review cards, gentle photo reveals */
.pw-hero-photo{overflow:hidden}
.pw-hero-photo img{will-change:transform}
.pw-ba-sec{padding-block:70px;background:#fff;border-top:1px solid #dbe7ed}
.pw-ba-grid{display:grid;gap:28px;align-items:center}
.pw-ba-copy h2{margin-bottom:16px}
.pw-ba-copy>p:not(.pw-eyebrow){max-width:440px;font-size:1.08rem;line-height:1.6}
.pw-ba-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 6px;min-width:0}
.pw-ba-tab{font:inherit;font-weight:700;font-size:.95rem;color:#102b3b;background:#fff;border:1px solid #9fb8c5;border-radius:999px;padding:10px 16px;min-height:44px;cursor:pointer}
.pw-ba-tab[aria-pressed="true"]{background:#0b2332;border-color:#0b2332;color:#fff}
.pw-ba-tab:hover{border-color:#02b5f5}
.pw-ba-tabs{display:none}
.pw-ba-sec.is-live .pw-ba-tabs{display:flex}
.pw-ba-stage{background:#0b2332;border-radius:14px;padding:16px;display:grid;gap:22px;min-width:0}
.pw-ba-panel{min-width:0}
.pw-ba-frame{margin:0 auto;min-width:0;max-width:100%}
.pw-ba-view{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pw-ba-img{position:relative;min-width:0;overflow:hidden;border-radius:8px}
.pw-ba-img img{display:block;width:100%;height:100%;object-fit:cover}
.pw-ba-tag{position:absolute;top:10px;left:10px;background:rgba(6,24,36,.82);color:#fff;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:5px}
.pw-ba-after .pw-ba-tag{left:auto;right:10px;background:#02b5f5;color:#062030}
.pw-ba-handle,.pw-ba-range{display:none}
.pw-ba-frame figcaption{color:#d7e8f0;font-size:.95rem;line-height:1.5;padding:14px 4px 2px}
.is-live .pw-ba-frame{width:100%}
.is-live [data-shape="cladding"] .pw-ba-frame{max-width:560px}
.is-live [data-shape="fascia"] .pw-ba-frame{max-width:660px}
.is-live [data-shape="gutter"] .pw-ba-frame{max-width:250px}
.is-live .pw-ba-view{display:block;position:relative;aspect-ratio:var(--ar);border-radius:8px;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.is-live .pw-ba-img{position:absolute;inset:0;border-radius:0}
.is-live .pw-ba-after{clip-path:inset(0 0 0 var(--pos))}
.is-live .pw-ba-handle{display:block;position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(6,24,36,.25);pointer-events:none}
.is-live .pw-ba-handle:after{content:"";position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2332' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-5 6 5 6M15 6l5 6-5 6'/%3E%3C/svg%3E") center/24px no-repeat;box-shadow:0 4px 14px rgba(6,24,36,.35)}
.is-live .pw-ba-range{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none;touch-action:pan-y;-webkit-appearance:none;appearance:none;background:transparent}
.is-live .pw-ba-view:focus-within{outline:3px solid #02b5f5;outline-offset:3px}
.pw-ba-panel[hidden]{display:none}
@media(min-width:900px){.pw-ba-sec{padding-block:100px}.pw-ba-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px}.pw-ba-stage{padding:28px;min-height:640px;align-content:center}}

.pw-facts{background:#0b2332;color:#fff;padding:60px 0}
.pw-home .pw-facts h2{color:#fff;font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:28px}
.pw-facts-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pw-facts-list a{display:block;height:100%;color:#fff;text-decoration:none;border:1px solid rgba(124,219,255,.28);border-radius:10px;padding:18px 16px}
.pw-facts-list a:hover{border-color:#02b5f5}
.pw-facts-list a:hover>span{text-decoration:underline}
.pw-facts-list strong{display:block;font-family:Montserrat,sans-serif;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1;color:#02b5f5;font-variant-numeric:tabular-nums;margin-bottom:10px}
.pw-facts-list a>span{display:block;font-size:.95rem;line-height:1.45;color:#d7e8f0}
.pw-facts a:focus-visible{outline:3px solid #7cdbff;outline-offset:3px}
@media(min-width:900px){.pw-facts{padding:80px 0}.pw-facts-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.pw-facts-list a{padding:24px 22px}}

.pw-rsources{display:grid;gap:12px;margin-bottom:28px}
.pw-rsources a{display:flex;gap:14px;align-items:center;color:#102b3b;text-decoration:none;border:1px solid #c9dce5;border-radius:10px;padding:14px 16px;background:#f5fafc}
.pw-rsources a:hover{border-color:#02b5f5}
.pw-rsources svg{width:30px;height:30px;flex:none;fill:#1877f2}
.pw-rsources strong{display:block;font-size:1.02rem}
.pw-rsources span{font-size:.92rem;color:#2c4655}
.pw-rgrid{display:grid;gap:18px;align-items:start}
.pw-rcard{background:#fff;border:1px solid #d3e2e9;border-top:4px solid #02b5f5;border-radius:10px;padding:20px 20px 16px;box-shadow:0 8px 22px rgba(11,35,50,.06);min-width:0}
.pw-rcard[hidden]{display:none}
.pw-rcard-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pw-home .pw-rcard h3{font-size:1.12rem;margin:0}
.pw-src{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 11px;border:1px solid #c9dce5;border-radius:999px;font-size:.8rem;font-weight:700;color:#102b3b;text-decoration:none;white-space:nowrap}
.pw-src:hover{border-color:#02b5f5}
.pw-src svg{width:15px;height:15px}
.pw-src-f svg{fill:#1877f2}
.pw-rstars{display:flex;gap:2px;margin:12px 0 10px;color:#0399d4}
.pw-rstars svg{width:18px;height:18px;fill:currentColor}
.pw-rrec{margin:12px 0 10px;font-size:.85rem;font-weight:700;color:#0a6a91}
.pw-rrec:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#02b5f5;margin-right:7px;vertical-align:1px}
.pw-rcard blockquote{margin:0}
.pw-rtext{margin:0;font-size:1rem;line-height:1.6;color:#1d3442;overflow-wrap:anywhere}
.pw-rgrid.is-live .pw-rtext.is-clamped{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.pw-rmore{font:inherit;font-size:.9rem;font-weight:700;color:#0369a1;background:none;border:0;padding:10px 0 4px;min-height:40px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pw-rmore[hidden],.pw-rall[hidden]{display:none}
.pw-rall{display:block;margin:28px auto 0;font:inherit;font-weight:800;color:#102b3b;background:#fff;border:2px solid #02b5f5;border-radius:8px;padding:12px 22px;min-height:48px;cursor:pointer}
.pw-rall:hover{background:#e5f5fc}
@media(min-width:640px){.pw-rsources{grid-template-columns:1fr 1fr}.pw-rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.pw-rgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.pw-close-form{max-width:460px;margin:22px 0 6px}
.pw-close-form label{display:block;font-weight:700;margin-bottom:8px}
.pw-close-form>div{display:flex;gap:8px}
.pw-close-form input{min-width:0;width:100%;border:1px solid #78919f;border-radius:6px;padding:12px;font-size:1rem}
.pw-close-form button{background:#02b5f5;color:#092536;border:0;border-radius:6px;padding:0 14px;min-height:48px;font:inherit;font-weight:800;white-space:nowrap;cursor:pointer}
.pw-close-form input:focus-visible,.pw-close-form button:focus-visible{outline:3px solid #7cdbff;outline-offset:3px}

.pw-gallery figure{overflow:hidden;border-radius:7px}
@media(prefers-reduced-motion:no-preference){
  .motion .pw-gallery>figure.reveal img,.motion .pw-wall figure.reveal img{transform:scale(1.06);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  .motion .pw-gallery>figure.reveal.in img,.motion .pw-wall figure.reveal.in img{transform:none}
  .motion .pw-wall figure.reveal.in a:hover img{transform:scale(1.03)}
}
@media(max-width:899px){.pw-ba-sec{padding-block:56px}.pw-ba-grid{gap:0}.pw-ba-copy{display:contents}.pw-ba-stage{order:1;margin-top:20px;padding:12px}.pw-ba-copy .pw-link{order:2;margin-top:14px}.pw-ba-tab{font-size:.9rem;padding:8px 13px}}
.pw-included{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.pw-included li{position:relative;background:#fff;border:1px solid #c9e4f0;border-radius:10px;padding:18px 18px 18px 52px;font-size:1.02rem;line-height:1.55;color:#1d3442}
.pw-included li:before{content:"";position:absolute;left:18px;top:20px;width:22px;height:22px;border-radius:50%;background:#02b5f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23062030' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.pw-included strong{color:#0b2332}
@media(min-width:768px){.pw-included{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
.pw-facts-list strong small{display:block;font-family:inherit;font-size:.9rem;font-weight:700;color:#d7e8f0;margin:-4px 0 6px;letter-spacing:.02em}

/* Review band: one row, gliding left, seamless loop */
.pw-rband{position:relative;min-width:0}
.pw-rband-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-bottom:14px}
.pw-rpause,.pw-rallbtn{font:inherit;font-size:.95rem;font-weight:800;color:#102b3b;background:#fff;border:2px solid #02b5f5;border-radius:8px;padding:10px 16px;min-height:44px;min-width:44px;cursor:pointer}
.pw-rpause:hover,.pw-rallbtn:hover{background:#e5f5fc}
.pw-rpause[hidden],.pw-rallbtn[hidden]{display:none}
.pw-rviewport{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:4px 2px 16px;border-radius:12px}
.pw-rviewport:focus-visible{outline:3px solid #087db5;outline-offset:3px}
.pw-rtrack{list-style:none;margin:0;padding:0;display:flex;width:max-content}
.pw-rtrack>.pw-rcard{flex:0 0 auto;width:min(85vw,360px);margin:0 18px 0 0;scroll-snap-align:start;display:flex;flex-direction:column}
.pw-rband.is-live .pw-rtext.is-clamped{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.pw-rband.is-moving .pw-rviewport{overflow:hidden;scroll-snap-type:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.pw-rband.is-moving .pw-rtrack{animation:pw-glide var(--pw-dur,200s) linear infinite}
.pw-rband.is-moving:hover .pw-rtrack,.pw-rband.is-moving:focus-within .pw-rtrack,.pw-rband.is-paused .pw-rtrack{animation-play-state:paused}
@keyframes pw-glide{to{transform:translate3d(-50%,0,0)}}
.pw-rband.is-all .pw-rviewport{overflow:visible}
.pw-rband.is-all .pw-rtrack{display:grid;width:auto;gap:18px;align-items:start}
.pw-rband.is-all .pw-rtrack>.pw-rcard{width:auto;margin:0}
@media(min-width:640px){.pw-rband.is-all .pw-rtrack{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.pw-rband.is-all .pw-rtrack{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.pw-rband .pw-rtrack{animation:none!important}}

/* Photo frame beside the included list */
.pw-incl-grid{display:grid;gap:24px;align-items:center}
.pw-fade{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#cfe6f0;box-shadow:0 10px 26px rgba(11,35,50,.12)}
.pw-fade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.pw-fade img.is-on{opacity:1}
.pw-fade img:not([src]){display:none}
@media(prefers-reduced-motion:reduce){.pw-fade img{transition:none}}
@media(min-width:900px){.pw-incl-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}.pw-incl-grid .pw-included{grid-template-columns:1fr}}

/* Containment: nothing inside these can widen the page (no reliance on body overflow clipping) */
.pw-rband{max-width:100%;min-width:0}
.pw-rviewport{position:relative;max-width:100%;contain:paint}
.pw-rtrack>.pw-rcard{position:relative}
.pw-rband.is-moving .pw-rviewport{overflow:hidden}
@supports (overflow:clip){.pw-rband.is-moving .pw-rviewport{overflow:clip}}
.hero-media{overflow:hidden;contain:paint}
.pw-hero-photo,.pw-fade,.pw-gallery figure,.pw-ba-view{contain:paint}
/* Hero drift without scaling: the photo is taller than its frame and slides down within it */
@media(min-width:768px){.pw-hero-photo{position:relative}.pw-hero-photo img{position:absolute;left:0;right:0;top:-110px;width:100%;height:calc(100% + 110px);min-height:0}}
/* Gallery reveal grows in from slightly smaller, so nothing pokes outside its frame */
@media(prefers-reduced-motion:no-preference){
  .motion .pw-gallery>figure.reveal img,.motion .pw-wall figure.reveal img{transform:none}
  .motion .pw-gallery>figure.reveal,.motion .pw-wall figure.reveal{transform:translateY(24px) scale(.96)}
  .motion .pw-gallery>figure.reveal.in,.motion .pw-wall figure.reveal.in{transform:none}
}

/* ===== Round 2d (Adam, 4 Nov): Jase's blue, pill header, hero reel, price blocks, short gallery ===== */
/* Floating pill header (all pages) */
.site-header,.site-header.is-solid,.site-header.menu-open{background:transparent;border-bottom-color:transparent;color:var(--ink);padding:calc(env(safe-area-inset-top,0px) + 10px) 10px 0;pointer-events:none}
.site-header .header-inner{pointer-events:auto;max-width:1180px;padding:6px 8px 6px 8px;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(2,181,245,.45);border-radius:999px;box-shadow:0 12px 34px -14px rgba(6,30,45,.45);transition:max-width .26s ease,box-shadow .2s ease,background-color .2s ease}
.site-header.is-scrolled .header-inner{max-width:1100px;background:rgba(255,255,255,.98);box-shadow:0 16px 40px -14px rgba(6,30,45,.55),0 0 0 1px rgba(2,181,245,.25)}
.site-header .brand-tile{box-shadow:none;border:1px solid #d7ecf5}
.site-header .icon-btn{background:var(--bg-alt);color:var(--ink)}
.site-header .icon-btn.tel{background:#02b5f5;color:#062030}
.site-header .icon-btn.tel:hover{background:#29c3f8}
.site-header .icon-btn.wa{background:var(--green);color:var(--ink)}
.site-header :focus-visible,.site-header:not(.is-solid):not(.menu-open) :focus-visible{outline:3px solid #087db5;outline-offset:3px}
.site-header .mobile-menu{pointer-events:auto;margin:8px 0 0;border:1px solid rgba(2,181,245,.35);border-radius:22px;box-shadow:0 24px 50px -20px rgba(6,30,45,.5);max-height:calc(100vh - 100px)}
@media(min-width:64rem){.site-header .header-inner{padding:6px 8px 6px 10px}.site-header .site-nav>a[aria-current="page"]{border-bottom-color:#02b5f5}}

/* Jase's blue accents */
.pw-blue{color:#02b5f5}
.pw-home .pw-eyebrow{color:#0a76a3}
.pw-home .pw-hero .pw-eyebrow{color:#7cdbff}
.pw-home h2::after{content:"";display:block;width:56px;height:4px;border-radius:2px;background:#02b5f5;margin-top:14px}
.pw-home .pw-start h2::after{width:44px;margin-top:10px}

/* Hero: tighter, so the postcode box shows on first screen */
.pw-hero{padding-top:88px}
@media(min-width:768px){.pw-hero{min-height:620px}.pw-hero-copy{padding-top:36px;padding-bottom:40px}.pw-hero h1{font-size:clamp(3rem,5.2vw,4.6rem);margin-bottom:22px}.pw-price{margin:22px 0 14px!important}}
@media(max-width:767px){.pw-hero{padding-top:88px}.pw-hero-copy{padding-top:28px;padding-bottom:32px}.pw-hero h1{font-size:clamp(2.6rem,11vw,3.4rem);margin-bottom:18px}.pw-price{margin:20px 0 12px!important}}
.pw-start{padding-block:28px}

/* Hero photo reel: Jase's photos cross-fade with a slow pan; headline never changes */
.pw-hero-reel{position:absolute;inset:0;overflow:hidden}
.pw-hero-reel img,.pw-hero-photo .pw-hero-reel img{position:absolute;inset:0;top:0;width:100%;height:100%;min-height:0;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.pw-hero-reel img.is-on{opacity:1}
.pw-hero-reel img:not([src]){display:none}
@media(min-width:768px){.pw-hero-photo{position:relative;overflow:hidden}.pw-hero-reel{top:-110px;bottom:auto;height:calc(100% + 110px)}}
@media(max-width:767px){.pw-hero-photo:after{z-index:1}}
@media(prefers-reduced-motion:no-preference){
  .pw-hero-photo{animation:pw-photo-in 1s .1s cubic-bezier(.2,.7,.2,1) both}
  .pw-hero-copy>*{animation:pw-copy-in .7s cubic-bezier(.2,.7,.2,1) both}
  .pw-hero-copy>:nth-child(2){animation-delay:.08s}.pw-hero-copy>:nth-child(3){animation-delay:.16s}.pw-hero-copy>:nth-child(4){animation-delay:.24s}.pw-hero-copy>:nth-child(5){animation-delay:.32s}.pw-hero-copy>:nth-child(6){animation-delay:.4s}
}
@keyframes pw-photo-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes pw-copy-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Prices at a glance: blocks with icons */
.pw-prices.pw-pblocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;border:0}
.pw-pblocks a{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:18px 16px;border:1px solid #cfe0e8;border-radius:14px;background:#fff;box-shadow:0 6px 18px rgba(11,35,50,.05);color:#102b3b;text-decoration:none;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.pw-pblocks a:hover{border-color:#02b5f5;transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(2,120,170,.35)}
.pw-pblocks a:first-child{grid-column:span 2}
.pw-pico{width:46px;height:46px;border-radius:12px;background:#02b5f5;display:grid;place-items:center;flex:none}
.pw-pico svg{width:26px;height:26px;fill:none;stroke:#062030;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pw-plabel{font-weight:700;line-height:1.3;font-size:1rem}
.pw-plabel small{display:block;font-weight:500;font-size:.85rem;color:#46606e;margin-top:2px}
.pw-pblocks strong{margin-top:auto;font-family:Montserrat,sans-serif;font-size:1.35rem;color:#0b2332}
@media(min-width:640px){.pw-prices.pw-pblocks{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.pw-pblocks a:first-child{grid-column:auto}}
@media(min-width:1000px){.pw-prices.pw-pblocks{grid-template-columns:repeat(5,minmax(0,1fr))}.pw-pblocks a{padding:22px 18px}}

/* See the difference: two photos and a link */
.pw-gallery.pw-gallery-pair{grid-template-columns:1fr 1fr;gap:12px}
.pw-gallery-pair figure:first-child{grid-column:auto}
.pw-gallery-pair img,.pw-gallery-pair figure:first-child img{height:200px}
@media(min-width:768px){.pw-gallery.pw-gallery-pair{gap:20px}.pw-gallery-pair img,.pw-gallery-pair figure:first-child img{height:340px}}
.pw-workbtn{display:inline-flex;align-items:center;gap:8px;margin-top:22px;min-height:48px;padding:12px 22px;border-radius:999px;background:#0b2332;color:#fff;font-weight:800;text-decoration:none;border:2px solid #0b2332}
.pw-workbtn:hover{background:#02b5f5;border-color:#02b5f5;color:#062030}
.pw-workbtn:focus-visible{outline:3px solid #087db5;outline-offset:3px}
@media(max-width:63.99rem){.site-header .icon-btn{width:44px;height:44px}.site-header .brand-tile{width:42px;height:42px}.site-header .brand-tile img{width:36px;height:36px}.site-header .brand-name{font-size:.95rem}.site-header .brand-name{min-width:0}.site-header .brand-name small{font-size:.68rem;line-height:1.2;white-space:normal}.site-header .nav-actions{gap:.375rem}}