:root {
  
  --black: #040707;        
  --charcoal: #0a0d0e;
  --charcoal-soft: #14181a; 
  --white: #ffffff;        
  --silver: #b3b3b3;       
  --blue: #45b2e5;         
  --blue-deep: #255d76;    

  
  --black-rgb: 4, 7, 7;
  --white-rgb: 255, 255, 255;
  --silver-rgb: 179, 179, 179;
  --blue-rgb: 69, 178, 229;
  --blue-deep-rgb: 37, 93, 118;

  --ink-muted: rgba(var(--silver-rgb), 0.72);
  
  --line: rgba(var(--silver-rgb), 0.12);
  --line-strong: rgba(var(--silver-rgb), 0.22);


  --glass-sheen: linear-gradient(160deg, rgba(var(--white-rgb), 0.05), rgba(var(--white-rgb), 0) 55%);


  --glass-fill: rgba(200, 200, 200, 0.1);
  --glass-fill-solid: rgba(var(--black-rgb), 0.72);
  --glass-fill-photo: rgba(var(--black-rgb), 0.55);
  --glass-blur: blur(20px) saturate(1.4);
  --glass-border: 1px solid rgba(var(--white-rgb), 0.2);
  --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(var(--white-rgb), 0.08);

  
  --font-display: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-price: "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;

  
  
  --fs-h1: 36px;
  --fs-h2: 30px;
  --fs-h3: 20px;
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-eyebrow: 12px;
  --fs-micro: 13px;

  
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 96px;

  --section-pad: 64px;
  --content-max: 1240px;
  --gutter: 24px;
  --radius-pill: 999px;
  --radius-card: 16px;   

  
  --float-btn-size: 44px;
  --float-btn-edge: 16px;
  --float-btn-gap: 12px;
  --float-icon-size: 22px;
}

@media (min-width: 1025px) {
  :root {
    --fs-h1: 70px;
    --fs-h2: 44px;
    --fs-h3: 22px;
    --fs-body: 18px;
    --float-btn-size: 56px;
    --float-btn-edge: var(--sp-4);
    --float-btn-gap: var(--sp-3);
    --float-icon-size: 27px;
    --section-pad: 120px;
    --gutter: 48px;
  }
}


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

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

html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
html.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

@media (min-width: 1920px) {
  html { zoom: 1.1; }
}
body, h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--silver);
  overflow-x: hidden;
  background-color: var(--black);
  background-image:
    radial-gradient(1300px 900px at 50% 16%, rgba(var(--white-rgb), 0.032), transparent 72%),
    linear-gradient(180deg,
      var(--black) 0%,
      #0a0d0e 22%,
      #0b0f10 44%,
      #070a0b 72%,
      var(--black) 100%);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
}



h1, h2 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: rgba(var(--white-rgb), 0.94);
}
h1 { font-size: var(--fs-h1); font-weight: 400; }

h2 { font-size: var(--fs-h2); font-weight: 500; color: rgba(var(--white-rgb), 0.94); }
h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: rgba(var(--white-rgb), 0.94);
}
p { max-width: 62ch; }


.text-accent { color: var(--blue); }

.text-link { color: var(--blue); border-bottom: 1px solid rgba(var(--blue-rgb), 0.4); }
.text-link:hover { border-color: var(--blue); }


.amount, .price-table td, .btn[href^="tel:"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.amount, .price-table td { font-family: var(--font-price); letter-spacing: -0.03em; }

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

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

section { padding-block: var(--section-pad); position: relative; }
.hero { background-color: var(--black); }

section + section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100% - (var(--gutter) * 2), var(--content-max));
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(var(--silver-rgb), 0.16) 22%,
    rgba(var(--silver-rgb), 0.16) 78%,
    transparent);
  pointer-events: none;
}
.hero + section::before { content: none; }
section[id] { scroll-margin-top: 84px; }




.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: var(--sp-2);
}
.eyebrow::before {
  content: "";
  display: block;
  width: 22px;
  height: 1px;
  background: var(--silver);
  flex-shrink: 0;
}
.section-head { max-width: 640px; margin-bottom: var(--sp-5); }
.section-head p { color: var(--ink-muted); margin-top: var(--sp-2); }

.section-head--center { max-width: 640px; width: 100%; margin-inline: auto; text-align: center; }

.lede { font-size: var(--fs-h3); font-weight: 300; color: var(--ink-muted); max-width: 58ch; }
.fine-note { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--ink-muted); }
.fine-note em { color: var(--blue); font-style: normal; }


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: var(--sp-5);
  padding: 13px 30px;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 150ms ease;
}
.btn-pill { border-radius: var(--radius-pill); }


@property --trace-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.btn-accent, .service-tab.is-active {
  position: relative;
  isolation: isolate;
  color: var(--white);
  background:
    conic-gradient(from var(--trace-angle),
      transparent 0deg,
      rgba(var(--blue-rgb), 0.85) 70deg,
      rgba(var(--white-rgb), 0.9) 95deg,
      rgba(var(--blue-rgb), 0.85) 120deg,
      transparent 210deg,
      transparent 360deg),
    var(--black);
  animation: trace-sweep 6s linear infinite;
}

.btn-accent {
  box-shadow: 0 4px 20px rgba(var(--blue-rgb), 0.3);
}
.btn-accent::before, .service-tab.is-active::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  border-radius: inherit;
  background: var(--black);
}

.btn-accent.btn-sweep::before {
  background:
    linear-gradient(75deg,
      transparent 42%,
      rgba(var(--white-rgb), 0.1) 47%,
      rgba(var(--blue-rgb), 0.45) 50%,
      rgba(var(--white-rgb), 0.1) 53%,
      transparent 58%),
    var(--black);
  background-size: 220% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  animation: btn-glass-sweep 4s ease-in-out infinite;
}

.btn-accent.btn-sweep {
  background:
    conic-gradient(from var(--trace-angle),
      transparent 0deg,
      rgba(var(--blue-rgb), 0.6) 70deg,
      rgba(var(--white-rgb), 0.7) 95deg,
      rgba(var(--blue-rgb), 0.6) 120deg,
      transparent 210deg,
      transparent 360deg),
    var(--black);
  box-shadow: 0 4px 16px rgba(var(--blue-rgb), 0.22);
}
.btn-accent.btn-sweep:hover {
  box-shadow: 0 6px 20px rgba(var(--blue-rgb), 0.32);
}
.btn-accent.btn-sweep::after {
  background: conic-gradient(from var(--trace-angle),
    transparent 0deg,
    rgba(var(--blue-rgb), 0.42) 70deg,
    rgba(var(--white-rgb), 0.48) 95deg,
    rgba(var(--blue-rgb), 0.42) 120deg,
    transparent 210deg,
    transparent 360deg);
}

@keyframes btn-glass-sweep {
  0% { background-position: 160% 0, 0 0; }
  100% { background-position: -60% 0, 0 0; }
}
.btn-accent::after, .service-tab.is-active::after {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -2;
  border-radius: inherit;
  background: conic-gradient(from var(--trace-angle),
    transparent 0deg,
    rgba(var(--blue-rgb), 0.6) 70deg,
    rgba(var(--white-rgb), 0.65) 95deg,
    rgba(var(--blue-rgb), 0.6) 120deg,
    transparent 210deg,
    transparent 360deg);
  filter: blur(18px);
  opacity: 0;
  transition: opacity 250ms ease;
  animation: trace-sweep 6s linear infinite;
  pointer-events: none;
}
.btn-accent:focus-visible::after,
.service-tab.is-active:focus-visible::after {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .btn-accent:hover::after,
  .service-tab.is-active:hover::after {
    opacity: 1;
  }
}

@keyframes trace-sweep {
  to { --trace-angle: 360deg; }
}

.btn-accent { transition: box-shadow 250ms ease, transform 250ms ease; }
.btn-accent:hover { transform: translateY(-1px); box-shadow: 0 6px 26px rgba(var(--blue-rgb), 0.45); }

.btn-outline {
  background: var(--glass-fill-solid);
  color: var(--white);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.btn-outline:hover {
  border-color: rgba(var(--white-rgb), 0.38);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(var(--white-rgb), 0.14);
  color: var(--white);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .btn-outline {
    background: var(--glass-fill);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
}


.glass {
  background: var(--glass-fill-solid);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: var(--glass-fill);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
}



.media-placeholder {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  text-align: center;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(var(--blue-rgb), 0.22), transparent 55%),
    repeating-linear-gradient(135deg, rgba(var(--silver-rgb), 0.05) 0 2px, transparent 2px 26px),
    linear-gradient(160deg, var(--charcoal-soft), var(--black) 75%);
  color: var(--ink-muted);
}
.media-placeholder span {
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  max-width: 26ch;
}
.media-icon { width: 44px; height: 44px; color: var(--blue); opacity: 0.85; }



.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 320ms ease, border-color 320ms ease, backdrop-filter 320ms ease;
}
.site-header.is-scrolled {
  background: rgba(var(--black-rgb), 0.88);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}

.site-header > .wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 76px;
  padding-top: env(safe-area-inset-top, 0px);
}
.nav-toggle-label { order: -1; }
.header-actions { margin-left: 0; }

.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 40px; height: 38px; }
.site-header .brand img { width: 60px; height: 57px; } 


.site-header .brand {
  position: relative;
  z-index: 1;
  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header .brand:focus-visible,
.site-header .brand:active {
  transform: scale(1.5);
}

@media (hover: hover) and (pointer: fine) {
  .site-header .brand:hover { transform: scale(1.5); }
}

@media (max-width: 1024px) {
  .site-header .brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .site-header .brand:focus-visible,
  .site-header .brand:active {
    transform: translate(-50%, -50%) scale(1.5);
  }
}

@media (max-width: 1024px) and (hover: hover) and (pointer: fine) {
  .site-header .brand:hover { transform: translate(-50%, -50%) scale(1.5); }
}

.footer-brand-mark .footer-brand-wordmark {
  display: block;
  width: auto;
  height: 28px;
}

.btn-arrow { width: 14px; height: 14px; flex-shrink: 0; }

.main-nav { display: none; }
.main-nav ul { display: flex; gap: var(--sp-4); }
.main-nav a {
  display: inline-block;
  color: var(--silver);
  
  font-size: 16px;
  
  font-weight: 500;
  padding: 10px 0;
  border-bottom: 1px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}
.main-nav a:hover, .main-nav a:focus-visible { color: var(--white); border-color: var(--blue); }


.header-actions { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }

.header-actions .btn { min-height: 44px; padding: 10px 22px; }

@media (max-width: 359px) {
  .site-header .brand img { width: 40px; height: 38px; }
  .header-actions .btn { padding: 10px 8px; }
}

.nav-toggle-label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--white);
}

.jt-burger-bar {
  position: absolute;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;
}
.jt-burger-bar:nth-child(1) { transform: translateY(-6px); }
.jt-burger-bar:nth-child(2) { transform: translateY(0); }
.jt-burger-bar:nth-child(3) { transform: translateY(6px); }
#nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.site-header:has(#nav-toggle:checked) .jt-burger-bar:nth-child(1) { transform: translateY(0) rotate(45deg); }
.site-header:has(#nav-toggle:checked) .jt-burger-bar:nth-child(2) { opacity: 0; transform: translateY(0) scale(0.4); }
.site-header:has(#nav-toggle:checked) .jt-burger-bar:nth-child(3) { transform: translateY(0) rotate(-45deg); }
.site-header:has(#nav-toggle:focus-visible) .nav-toggle-label { outline: 2px solid var(--blue); outline-offset: 2px; }



.mobile-panel {
  position: fixed;
  top: calc(76px + env(safe-area-inset-top, 0px));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 56;
  background: var(--glass-sheen), var(--black);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 480ms;
  overflow-y: auto;
}
body:has(#nav-toggle:checked) .mobile-panel {
  transform: translateX(0);
  visibility: visible;
  transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
}

body:has(#nav-toggle:checked) { overflow: hidden; }

body:has(#nav-toggle:checked) .whatsapp-float,
body:has(#nav-toggle:checked) .phone-float { display: none; }

body:has(#nav-toggle:checked) .site-header {
  background: var(--black);
  border-bottom-color: var(--line);
}
body:has(#nav-toggle:checked) .header-actions { visibility: hidden; }

.mobile-panel .wrap {
  min-height: 100%;
  padding-block: var(--sp-5) var(--sp-4);
  display: flex;
  flex-direction: column;
  
  justify-content: flex-start;
  gap: var(--sp-1);
}
.mobile-panel a:not(.btn) {
  position: relative;
  color: var(--white);
  font-family: var(--font-display);
  
  /* pinned, not --fs-h2: this was tuned down twice from "too large" feedback
     and must not track future heading-size changes */
  font-size: 26px;
  font-weight: 500;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: color 250ms ease;
  
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1), transform 420ms cubic-bezier(0.16, 1, 0.3, 1), color 250ms ease;
}
.mobile-panel a:not(.btn):hover,
.mobile-panel a:not(.btn):focus-visible { color: var(--blue); }
body:has(#nav-toggle:checked) .mobile-panel a:not(.btn) { opacity: 1; transform: translateY(0); }
body:has(#nav-toggle:checked) .mobile-panel a:not(.btn):nth-child(2) { transition-delay: 60ms; }
body:has(#nav-toggle:checked) .mobile-panel a:not(.btn):nth-child(3) { transition-delay: 120ms; }
body:has(#nav-toggle:checked) .mobile-panel a:not(.btn):nth-child(4) { transition-delay: 180ms; }
body:has(#nav-toggle:checked) .mobile-panel a:not(.btn):nth-child(5) { transition-delay: 240ms; }
.mobile-panel-cta {
  margin-top: var(--sp-4);
  align-self: flex-start;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1), transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
body:has(#nav-toggle:checked) .mobile-panel-cta {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 300ms;
}
@media (prefers-reduced-motion: reduce) {
  .mobile-panel,
  .mobile-panel a:not(.btn),
  .mobile-panel-cta,
  .jt-burger-bar { transition-duration: 0.01ms !important; }
}


@media (min-width: 1025px) {
  .site-header > .wrap {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--sp-4);
  }
  .brand { grid-column: 1; justify-self: start; }
  .main-nav { grid-column: 2; display: block; justify-self: center; }
  .header-actions { grid-column: 3; display: flex; justify-self: end; }
  .nav-toggle-label, .mobile-panel { display: none; }
}



.whatsapp-float {
  position: fixed;
  right: var(--float-btn-edge);
  bottom: var(--float-btn-edge);
  z-index: 55;
  width: var(--float-btn-size);
  height: var(--float-btn-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: #25d366;
  color: #04140b;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
  animation: whatsapp-float-pulse 2.6s ease-in-out infinite;
}
.whatsapp-float svg { width: var(--float-icon-size); height: var(--float-icon-size); }
.whatsapp-float:hover, .whatsapp-float:focus-visible { background: #20bd5a; }
@keyframes whatsapp-float-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35), 0 0 0 0 rgba(37, 211, 102, 0.45); }
  50% { box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35), 0 0 0 10px rgba(37, 211, 102, 0); }
}


.phone-float {
  position: fixed;
  right: calc(var(--float-btn-edge) + var(--float-btn-size) + var(--float-btn-gap));
  bottom: var(--float-btn-edge);
  z-index: 55;
}
.phone-float-trigger {
  width: var(--float-btn-size);
  height: var(--float-btn-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--white);
  color: var(--black);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  animation: phone-float-pulse 2.6s ease-in-out infinite;
}
.phone-float-trigger svg { width: var(--float-icon-size); height: var(--float-icon-size); }
.phone-float-trigger:hover, .phone-float-trigger:focus-visible { background: var(--silver); }
@keyframes phone-float-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(var(--white-rgb), 0.45); }
  50% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 0 10px rgba(var(--white-rgb), 0); }
}
.phone-float-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--sp-2));
  min-width: 168px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--glass-sheen), var(--charcoal);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.96);
  pointer-events: none;
  transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1), transform 200ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 200ms;
}
.phone-float-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1), transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.phone-float-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: calc(var(--radius-card) - 8px);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--white);
}
.phone-float-option svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--blue); }
.phone-float-option:hover, .phone-float-option:focus-visible { background: rgba(var(--blue-rgb), 0.14); }




.hero {
  position: relative;
  background: var(--black);
  color: var(--white);
  margin-top: -76px;
  
  padding-block: 0 calc(var(--sp-7) + var(--sp-6));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  
  height: 100svh;
  justify-content: flex-end;
}

/* mobile: less bottom padding, so the content stack sits lower and finishes
   just above the scroll cue instead of a long way clear of it */
@media (max-width: 1024px) {
  .hero { padding-block: 0 calc(var(--sp-6) + var(--sp-4)); }
}

@media (min-width: 1920px) {
  .hero { height: calc(100svh / 1.1); }
}

/* Short phones (SE 1st gen, 5/5s: 568px tall). The hero is a fixed 100svh
   with bottom-anchored content, so anything too tall overflows UPWARDS behind
   the sticky header rather than being scrollable. Tighten the stack so it
   fits. Pre-existing: before this block the H1's first line rendered fully
   off-screen at 320x568. */
@media (max-width: 1024px) and (max-height: 660px) {
  /* the tagline restates the H1, so it is the one line that can go rather
     than shrinking everything else past legibility */
  .hero-tagline { display: none; }
  .hero h1 { font-size: 26px; }
  .hero-quickfacts { font-size: 11px; margin-top: 10px; }
  .hero-stats { margin-top: 12px; padding-top: 12px; }
  .hero-stat-value { font-size: clamp(17px, 5.2vw, 22px); }
  .hero-stat-label { font-size: 9px; margin-top: 3px; }
  .hero-cta { margin-top: 14px; }
  .hero-cta .btn { min-height: 44px; font-size: 13px; }
}

.hero-media { position: absolute; inset: 0; opacity: 0.5; }

.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  pointer-events: none;
  
  
  filter: brightness(1.85) contrast(0.92);
}
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
.hero-glow {
  position: absolute;
  inset: -20% -10%;
  background:
    radial-gradient(ellipse 60% 50% at 80% 10%, rgba(var(--blue-rgb), 0.14), transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(var(--blue-deep-rgb), 0.28), transparent 60%);
  pointer-events: none;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(var(--black-rgb), 0.5) 48%,
    rgba(var(--black-rgb), 0.5) 88%,
    rgba(var(--black-rgb), 1) 100%
  );
  pointer-events: none;
}

.hero-nav-scrim {
  position: absolute;
  inset: 0 0 auto 0;
  height: 160px;
  background: linear-gradient(to bottom, rgba(var(--black-rgb), 0.55), transparent);
  pointer-events: none;
}

.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: var(--sp-4);
  transform: translateX(-50%);
  z-index: 1;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--white-rgb), 0.7);
  animation: hero-scroll-cue-bounce 2s ease-in-out infinite;
}
.hero-scroll-cue svg { width: 22px; height: 22px; }
.hero-scroll-cue:hover, .hero-scroll-cue:focus-visible { color: var(--blue); }
@keyframes hero-scroll-cue-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

.hero-content { position: relative; z-index: 1; padding-block: var(--sp-2) 0; text-align: left; width: 100%; }

/* header and hero span the full viewport instead of the shared content column,
   so the logo and H1 sit near the true corners; every other section keeps the
   --content-max column. Below 1025px the column never reaches its cap, so this
   changes nothing on mobile. */
@media (min-width: 1025px) {
  .site-header > .wrap,
  .hero .hero-content { max-width: none; margin-inline: 0; }
}
.hero h1 { max-width: 20ch; }
.hero .lede { margin-top: var(--sp-3); max-width: 44ch; color: rgba(var(--silver-rgb), 0.88); }

.hero-tagline {
  margin-top: var(--sp-3);
  max-width: 44ch;
  font-size: var(--fs-body);
  font-weight: 300;
  text-transform: none;
  color: rgba(var(--silver-rgb), 0.88);
}

.hero-stats {
  width: 100%;
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}

.hero-stat { text-align: center; min-width: 0; }

.hero-stat--link { display: block; text-decoration: none; transition: opacity 180ms ease; }
.hero-stat--link:hover, .hero-stat--link:focus-visible { opacity: 0.8; }
.hero-stat-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 6vw, 28px);
  line-height: 1;
  color: var(--blue);
  font-variant-numeric: tabular-nums; 
  
  letter-spacing: -0.04em;
}

.stat-suffix { margin-left: 0.04em; }
.stat-suffix--percent { display: inline-block; font-size: 0.75em; vertical-align: 0.14em; }
.stat-suffix--star { display: inline-block; font-size: 0.85em; vertical-align: 0.1em; }
.hero-stat-label {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.hero-stat-label .google-g-icon { flex-shrink: 0; }

@media (min-width: 1025px) {
  
  .hero-content { padding-block: 16px 0; }

  
  .hero-video { filter: brightness(1.5); }

  
  .hero-scrim {
    background: linear-gradient(to bottom,
      transparent 0%,
      rgba(var(--black-rgb), 0.5) 48%,
      rgba(var(--black-rgb), 0.5) 78%,
      rgba(var(--black-rgb), 1) 100%
    );
  }

  
  .hero-stats {
    width: fit-content;
    display: flex;
    justify-content: flex-start;
    gap: var(--sp-6);
    flex-wrap: wrap;
  }
  .hero-stat-value {
    /* pinned, not --fs-h2 - stat figures are not headings */
    font-size: 36px;
    letter-spacing: -0.06em;
  }
  .hero-stat-label {
    font-size: var(--fs-micro);
    letter-spacing: 0.08em;
    gap: 5px;
  }
}



.tiers { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; margin-top: var(--sp-5); }
@media (min-width: 781px) { .tiers { grid-template-columns: 1fr 1fr; } }

.tier-card {
  position: relative;
  background: var(--black);
  border-radius: var(--radius-card);
  padding: 1px;
  
  display: flex;
  flex-direction: column;
}
.tier-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  z-index: 0;
  background: var(--line-strong);
}
.tier-card > * { position: relative; z-index: 1; }


.tier-top-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  background: var(--blue);
  color: var(--black);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}


.tier-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0;
}
.tier-media img { display: block; width: 100%; height: 100%; object-fit: cover; }


.tier-body { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px var(--sp-4) var(--sp-4); background: var(--glass-sheen), var(--black); border-radius: calc(var(--radius-card) - 1px); }
.tier-card:has(.tier-media) .tier-body { border-radius: 0 0 calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px); }
.tier-name { font-size: calc(var(--fs-h3) * 1.2); font-weight: 600; color: var(--white); }
.tier-level {
  margin-left: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  vertical-align: middle;
}
.tier-level--signature { color: var(--blue); }

.tier-name .tier-level {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-3);
  margin-left: 0;
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: rgba(var(--black-rgb), 0.6);
}
.tier-name .tier-level--signature { border-color: rgba(var(--blue-rgb), 0.5); }
.tier-tag { color: var(--ink-muted); margin-top: 6px; font-size: var(--fs-small); }

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




#services { padding-top: calc(var(--section-pad) - 24px); }
.services-head { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.services-head .section-head { margin-bottom: 0; }
.services-head .selector-guide { width: 100%; max-width: 380px; align-self: center; }


.morph-menu { position: relative; align-self: flex-start; width: 100%; }

.morph-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: var(--sp-2) var(--sp-4);
  background: var(--charcoal);
  color: var(--white);
  font-family: inherit;
  font-weight: 500;
  font-size: var(--fs-small);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease, color 180ms ease;
}
.morph-trigger:hover { border-color: rgba(var(--blue-rgb), 0.5); color: var(--blue); }
.morph-trigger-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--blue); }


.morph-menu.is-open [data-morph-trigger] {
  
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
  transition: none;
}

.morph-panel {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--glass-sheen), var(--black);
  overflow: hidden;
  transform-origin: top center;
}
.morph-panel[hidden] { display: none; }
.morph-menu.is-open .morph-panel {
  animation: morph-panel-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes morph-panel-in {
  from { opacity: 0; transform: scale(0.94) translateY(-6px); filter: blur(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

.morph-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-weight: 500;
  font-size: var(--fs-small);
  color: var(--white);
}
.morph-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  color: var(--ink-muted);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  background: none;
  border: none;
  transition: color 180ms ease;
}
.morph-close:hover { color: var(--blue); }
.morph-close svg { width: 16px; height: 16px; }

.selector-guide-item { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3); border-top: 1px solid var(--line); }
.selector-guide-item:nth-of-type(2) { border-top: none; }
.selector-guide-item h3 { font-size: var(--fs-small); }
.selector-guide-item p { margin-top: 6px; font-size: var(--fs-small); color: var(--ink-muted); }
.selector-guide-item--accent { background: linear-gradient(155deg, rgba(var(--blue-rgb), 0.1), transparent 70%); }
.selector-guide-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--blue); }


.morph-menu.is-open .selector-guide-item {
  animation: morph-item-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.morph-menu.is-open .selector-guide-item:nth-of-type(2) { animation-delay: 110ms; }
.morph-menu.is-open .selector-guide-item:nth-of-type(3) { animation-delay: 210ms; }
.morph-menu.is-open .selector-guide-item:nth-of-type(4) { animation-delay: 310ms; }
@keyframes morph-item-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}


.size-legend {
  margin-top: var(--sp-4);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.size-legend-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.size-legend-item dt { font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 500; color: rgba(var(--white-rgb), 0.94); }
.size-legend-item dd { font-size: var(--fs-micro); color: var(--ink-muted); }

@media (min-width: 1025px) {
  .size-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4) var(--sp-5); }
  .size-legend-item { flex-direction: row; align-items: baseline; text-align: left; gap: var(--sp-1); }
  .size-legend-item dd { font-size: var(--fs-small); }
}


.service-tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
@media (min-width: 781px) {
  .service-tabs { grid-template-columns: repeat(3, 1fr); }
}

.service-tab.category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 1 / 1;
  padding: var(--sp-4);
  border-radius: var(--radius-card);
  background: var(--charcoal);
  /* the photo is clipped by its own layer, not the card, so the selected
     card's pointer notch can sit outside the bottom edge */
  overflow: visible;
  text-align: left;
  isolation: isolate;
  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 350ms ease;
}
@media (max-width: 780px) {
  .service-tab.category-card { aspect-ratio: 4 / 3; }
}

.category-card-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; }
.category-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.category-card-media--placeholder {
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(var(--blue-rgb), 0.28), transparent 60%),
    linear-gradient(160deg, var(--blue-deep), var(--black) 70%);
}
.category-card-scrim {
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
  background:
    linear-gradient(to bottom,
      rgba(var(--black-rgb), 0.55) 0%,
      rgba(var(--black-rgb), 0.18) 14%,
      rgba(var(--black-rgb), 0) 26%),
    linear-gradient(to top,
      rgba(var(--black-rgb), 0.94) 0%,
      rgba(var(--black-rgb), 0.86) 30%,
      rgba(var(--black-rgb), 0.62) 48%,
      rgba(var(--black-rgb), 0.20) 68%,
      rgba(var(--black-rgb), 0) 100%);
}

.category-card-pill {
  position: absolute; z-index: 2; top: var(--sp-3); right: var(--sp-3);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--glass-fill-solid);
  border: var(--glass-border);
  color: var(--white);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .category-card-pill {
    background: var(--glass-fill);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
}

.category-card-body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }

/* the shared active-tab treatment paints a solid fill over the card interior,
   which would hide the photo; cards show selection with a ring instead */
.service-tab.category-card.is-active,
.service-tab.category-card[aria-selected="true"] {
  background: var(--charcoal);
  animation: none;
  box-shadow: 0 0 0 2px var(--blue);
}
.service-tab.category-card.is-active::before,
.service-tab.category-card.is-active::after { content: none; }
.category-card-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
  color: var(--white);
}
.category-card-copy {
  max-width: 34ch;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.45;
  color: rgba(var(--white-rgb), 0.94);
}
.category-card-cta {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  margin-top: var(--sp-1);
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--black);
  font-size: var(--fs-small);
  font-weight: 500;
  transition: background-color 200ms ease, transform 200ms ease;
}
.category-card-cta svg { width: 16px; height: 16px; transition: transform 250ms ease; }

@media (hover: hover) and (pointer: fine) {
  .service-tab.category-card:hover { transform: translateY(-4px); }
  .service-tab.category-card:hover .category-card-cta svg { transform: translateX(3px); }
}
.service-tab.category-card.reveal.is-visible:hover { transform: translateY(-4px); }

.service-tab.category-card[aria-selected="true"] {
  box-shadow: 0 0 0 2px var(--blue);
}
.service-tab.category-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.addons-tab { justify-self: center; }
@media (min-width: 781px) { .addons-tab { grid-column: 1 / -1; } }
.service-tab {
  padding: 12px var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--charcoal);
  color: var(--silver);
  font-size: var(--fs-small);
  font-weight: 500;
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.service-tab:hover { color: var(--white); }
.service-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tab-save-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: rgba(var(--blue-rgb), 0.18);
  color: var(--blue);
}
.tab-save-badge svg { width: 12px; height: 12px; }


.full-detail-savings-note {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  margin-bottom: var(--sp-4);
  padding: 10px var(--sp-3);
  border: 1px solid rgba(var(--blue-rgb), 0.35);
  border-radius: 999px;
  background: rgba(var(--blue-rgb), 0.1);
  color: var(--white);
  font-size: var(--fs-micro);
  text-align: center;
}

@media (min-width: 641px) {
  .full-detail-savings-note { white-space: nowrap; }
}
.full-detail-savings-note strong { color: var(--blue); }

.service-panels { margin-top: var(--sp-5); }


.service-panel { opacity: 0; transform: translateY(-10px); transition: opacity 280ms ease, transform 280ms ease; }
.service-panel.is-active { opacity: 1; transform: translateY(0); }
.service-panel[hidden] { display: none; }


.service-panel .tier-card {
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1), transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.service-panel.is-active .tier-card { opacity: 1; transform: translateY(0) scale(1); }

.service-panel.is-active .tier-card:nth-of-type(2) { transition-delay: 90ms; }


.tier-tagline { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--ink-muted); }
.tier-save { margin-top: var(--sp-2); margin-bottom: var(--sp-3); font-size: var(--fs-small); color: var(--blue); }


.tier-detail-trigger {
  margin-top: var(--sp-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  background: none;
  border: none;
  padding: 0;
  color: var(--blue);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.tier-detail-trigger:hover { text-decoration: underline; text-underline-offset: 3px; }


.tier-name-link { color: inherit; text-decoration: none; }
.tier-card { cursor: pointer; }

.process-dialog {
  width: min(560px, calc(100vw - var(--sp-4) * 2));
  max-height: min(80vh, 720px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--glass-sheen), var(--black);
  color: var(--white);
}
.process-dialog::backdrop { background: rgba(4, 7, 7, 0.75); backdrop-filter: blur(4px); }
.process-dialog[open] { animation: process-dialog-in 380ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes process-dialog-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); filter: blur(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) { .process-dialog[open] { animation: none; } }

.process-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--line); }
.process-dialog-head h3 { font-size: var(--fs-h3); }
.process-dialog-head p { margin-top: 4px; color: var(--ink-muted); font-size: var(--fs-small); }
.process-dialog-close {
  flex-shrink: 0;
  width: 44px; height: 44px;
  margin: -6px -6px 0 0;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 180ms ease;
}
.process-dialog-close:hover { color: var(--blue); }
.process-dialog-close svg { width: 18px; height: 18px; }

.process-dialog-body { padding: var(--sp-4); overflow-y: auto; }

.process-steps { display: flex; flex-direction: column; gap: var(--sp-4); counter-reset: process-step; }
.process-step { position: relative; padding-left: 44px; }
.process-step::before {
  counter-increment: process-step;
  content: counter(process-step);
  position: absolute;
  left: 0; top: 0;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(var(--blue-rgb), 0.15);
  color: var(--blue);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-small);
}
.process-step h4 { font-size: var(--fs-body); }
.process-step p { margin-top: 4px; color: var(--ink-muted); font-size: var(--fs-small); }

.process-step p strong { font-weight: inherit; }

.process-combo { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 641px) { .process-combo { grid-template-columns: 1fr 1fr; } }

.process-combo-col h3, .process-combo-col h4 { font-size: var(--fs-small); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--blue); }
.process-combo-col ul { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: 6px; }
.process-combo-col li { padding-left: 20px; position: relative; font-size: var(--fs-small); color: var(--white); }
.process-combo-col li::before {
  content: "";
  position: absolute;
  left: 1px; top: 5px;
  width: 8px; height: 5px;
  border: 2px solid var(--blue);
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}


.process-tick-list { display: flex; flex-direction: column; gap: 10px; }
.process-tick-list li { padding-left: 22px; position: relative; font-size: var(--fs-body); color: var(--white); }
.process-tick-list li::before {
  content: "";
  position: absolute;
  left: 1px; top: 6px;
  width: 10px; height: 6px;
  border: 2px solid var(--blue);
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}

.process-result {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-style: italic;
  color: var(--white);
  font-size: var(--fs-small);
}

.process-dialog-foot { padding: var(--sp-4); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); }
.process-dialog-foot .amount { color: var(--white); font-weight: 400; }

.price-table { margin-top: var(--sp-4); margin-bottom: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); width: 100%; border-collapse: collapse; }
.price-table th { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); font-weight: 400; text-align: center; padding-bottom: 10px; }
.price-table td { text-align: center; font-size: 28px; font-weight: 400; color: var(--white); padding-top: 6px; padding-inline: 4px; }
.tier-body .btn { margin-top: auto; align-self: center; }

/* ---------- Package cards v2 (photo | info | rail) ---------- */
.tiers { grid-template-columns: 1fr; }

.tier-card--v2 { display: grid; grid-template-columns: 1fr; overflow: visible; }
@media (min-width: 1025px) {
  .tier-card--v2 { grid-template-columns: 280px 1fr 260px; }
  .tier-card--v2.tier-card--no-photo { grid-template-columns: 1fr 260px; }
}

.tier-photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0;
}
.tier-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tier-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--black) 4%, transparent 48%);
}
@media (min-width: 1025px) {
  .tier-photo { aspect-ratio: auto; border-radius: calc(var(--radius-card) - 1px) 0 0 calc(var(--radius-card) - 1px); }
  .tier-photo::after { background: linear-gradient(to right, rgba(4, 7, 7, 0.15) 55%, rgba(4, 7, 7, 0.85) 100%); }
}
.tier-photo .tier-level {
  position: absolute; top: 18px; left: 18px; z-index: 1;
  margin-left: 0;
  background: var(--glass-fill-solid);
  color: var(--white);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tier-photo .tier-level {
    background: var(--glass-fill-photo);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
}

.tier-card--v2 .tier-info {
  margin-top: -30px;
  position: relative;
  z-index: 1;
  padding: 0 var(--sp-4) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  text-align: left;
  align-items: stretch;
  background: linear-gradient(to bottom, rgba(var(--black-rgb), 0) 0, var(--black) 30px);
}
.tier-card--v2.tier-card--no-photo .tier-info { margin-top: 0; padding-top: var(--sp-4); background: var(--glass-sheen), var(--black); }
@media (min-width: 1025px) {
  .tier-card--v2 .tier-info { margin-top: 0; padding: 28px 26px; background: var(--glass-sheen), var(--black); }
  .tier-card--v2.tier-card--no-photo .tier-info { padding: 28px 26px; border-radius: calc(var(--radius-card) - 1px) 0 0 calc(var(--radius-card) - 1px); }
}
.tier-card--v2 .tier-name { font-size: 32px; font-weight: 500; }
.tier-card--v2 .tier-meta { margin-top: 9px; font-size: var(--fs-small); color: var(--ink-muted); }
.tier-card--v2 .tier-tagline { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--ink-muted); }

.tier-checklist {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
@media (min-width: 1025px) { .tier-checklist { grid-template-columns: 1fr; gap: 10px; } }
.tier-checklist li { display: flex; align-items: center; gap: 9px; font-size: var(--fs-small); color: var(--silver); }
.tier-checklist li::before {
  content: "✓";
  flex: none;
  width: 19px; height: 19px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(var(--blue-rgb), 0.12);
  border: 1px solid rgba(var(--blue-rgb), 0.45);
  font-size: 11px; line-height: 1; font-weight: 700; color: var(--blue);
  transform: translateY(-0.5px);
}

.tier-card--v2 .tier-rule { height: 1px; background: var(--line); }

.tier-rail {
  padding: var(--sp-4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-radius: 0 0 calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px);
}
.tier-card--v2 .tier-rail { background: var(--glass-sheen), var(--charcoal); }
@media (min-width: 1025px) {
  .tier-rail {
    padding: 28px 24px;
    border-top: none;
    border-left: 1px solid var(--line);
    border-radius: 0 calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0;
  }
}
.tier-rail-label { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.tier-rail-label--desktop { display: none; }
.tier-rail-label--mobile { display: block; }
@media (min-width: 1025px) {
  .tier-rail-label--desktop { display: block; }
  .tier-rail-label--mobile { display: none; }
}

.tier-sizes { display: flex; flex-direction: column; gap: 8px; }
.tier-size {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 13px;
  background: rgba(var(--white-rgb), 0.035);
  border: 1px solid var(--line);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  appearance: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .tier-size:hover { background: rgba(var(--white-rgb), 0.07); }
}
.tier-size[aria-checked="true"] {
  background: rgba(var(--blue-rgb), 0.08);
  box-shadow: inset 0 0 0 1.5px var(--blue);
}
.tier-size-text { display: flex; flex-direction: column; gap: 2px; }
.tier-size-name { font-weight: 500; font-size: var(--fs-small); color: var(--ink-muted); }
.tier-size-eg { font-size: var(--fs-micro); color: var(--ink-muted); }
.tier-size-price { font-family: var(--font-price); font-size: 19px; font-weight: 400; color: var(--ink-muted); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.tier-size[aria-checked="true"] .tier-size-name,
.tier-size[aria-checked="true"] .tier-size-price { color: var(--white); }

.tier-total-row { display: none; }
@media (min-width: 1025px) {
  .tier-total-row { display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto; padding-top: var(--sp-2); }
}
.tier-total-label { font-size: var(--fs-small); color: var(--ink-muted); padding-bottom: 5px; }
.tier-total { display: flex; align-items: baseline; gap: 0; font-family: var(--font-price); font-size: 38px; font-weight: 400; line-height: 0.95; color: var(--white); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
.tier-total .sym { font-size: 20px; font-weight: 300; opacity: 0.6; letter-spacing: normal; margin-right: 1px; }

.tier-cta.btn { width: 100%; }
.tier-cta-dynamic { display: inline-flex; align-items: center; gap: 6px; }
.tier-cta-sep { opacity: 0.4; }
.tier-cta-amount { white-space: nowrap; }
.tier-cta-static { display: none; }
@media (min-width: 1025px) {
  .tier-cta-static { display: inline; }
  .tier-cta-dynamic { display: none; }
}


@media (max-width: 780px) {
  .tiers { gap: var(--sp-2); }
  
  .tier-media { aspect-ratio: 16 / 9; }
  .tier-body { padding: 44px var(--sp-3) var(--sp-3); }
  .tier-name { font-size: 19px; }
  .tier-tag { margin-top: 4px; }
  .tier-tagline { margin-top: var(--sp-1); }
  .tier-detail-trigger { margin-top: var(--sp-1); }
  .tier-save { margin-top: 4px; margin-bottom: var(--sp-1); }
  .price-table { margin-top: var(--sp-2); margin-bottom: var(--sp-2); padding-top: var(--sp-2); }
  .price-table th { padding-bottom: 4px; }
  .price-table td { font-size: 22px; padding-top: 2px; }
  .tier-body .btn { min-height: 44px; padding: 10px 24px; }
}




.addon-panel-intro {
  color: var(--ink-muted);
  max-width: 58ch;
  margin-inline: auto;
  text-align: center;
  font-size: var(--fs-small);
}

.addon-list {
  margin-top: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}
@media (min-width: 641px) { .addon-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .addon-list { grid-template-columns: repeat(3, 1fr); } }
.addon-item {
  position: relative; 
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--sp-4);
  background: var(--glass-sheen), var(--black);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.addon-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.addon-name { color: var(--white); font-weight: 600; }
.addon-desc { color: var(--ink-muted); font-size: var(--fs-small); }
.addon-price { font-family: var(--font-mono); color: var(--blue); font-weight: 600; flex-shrink: 0; }

.addon-item .tier-detail-trigger { margin-top: 0; }


.addon-note-guide { max-width: 320px; margin-top: var(--sp-3); }
.addon-note-guide .morph-panel { text-align: left; }
.addon-note-list { padding: var(--sp-3); }
.addon-note-list li { color: var(--silver); }
.addon-note-list li strong { color: var(--white); }


.bento-grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
/* auto-rows must be a MINIMUM, not a fixed height. Fixed at 220px, a tile whose
   heading wrapped to two lines overflowed, and since .bento-tile--text is a flex
   column the only shrinkable child - the svg icon - was squeezed to 0 height and
   hidden by overflow. Two of six icons were invisible because of this. */
@media (min-width: 781px) { .bento-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(200px, auto); } }
@media (min-width: 1025px) { .bento-grid { grid-template-columns: repeat(4, 1fr); } }
.bento-tile {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.bento-tile--photo { min-height: 220px; }
.bento-tile--photo .media-placeholder { position: absolute; inset: 0; aspect-ratio: auto; }
.bento-tile--text {
  background: var(--glass-sheen), var(--black);
  border: 1px solid var(--line);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  /* top-aligned, not centred: with equal-height tiles, centring floats the icon
     of a shorter card lower than its neighbours and the row reads ragged */
  justify-content: flex-start;
  gap: var(--sp-2);
  min-height: 180px;
}
.bento-tile--accent { background: linear-gradient(155deg, rgba(var(--blue-rgb), 0.16), transparent 70%), var(--black); border-color: rgba(var(--blue-rgb), 0.4); }

.bento-icon { width: 30px; height: 30px; flex: 0 0 auto; color: var(--blue); }
.bento-tile:hover .bento-icon { filter: drop-shadow(0 0 8px rgba(var(--blue-rgb), 0.7)); }
.bento-tile--text h3 { margin-top: var(--sp-1); }
.bento-tile--text p { font-size: var(--fs-small); color: var(--ink-muted); }

.about-cta { margin-top: var(--sp-5); display: flex; justify-content: center; }


.suburb-grid { margin-top: var(--sp-2); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
@media (min-width: 641px) { .suburb-grid { grid-template-columns: repeat(3, 1fr); } }
.suburb-card.trust-item { padding: var(--sp-3); text-align: center; color: var(--white); font-size: var(--fs-small); font-weight: 500; }
.suburb-name { display: block; }
.suburb-postcode {
  display: block;
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: var(--fs-micro);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}


.area-layout .lede { margin-top: var(--sp-2); }


.area-layout .lede + p { margin-top: var(--sp-3); }

.area-layout { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }

@media (min-width: 1025px) { .area-layout { grid-template-columns: 0.9fr 1.1fr; align-items: center; } }


.area-search { margin-bottom: var(--sp-4); }
.area-search-field { position: relative; display: flex; align-items: center; }
.area-search-icon {
  position: absolute;
  left: var(--sp-3);
  width: 18px;
  height: 18px;
  color: var(--ink-muted);
  pointer-events: none;
}
.area-search-field input {
  width: 100%;
  min-height: 48px;
  padding: 12px var(--sp-4) 12px 44px;
  background: var(--glass-sheen), var(--charcoal);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--white);
  font-size: var(--fs-body);
  transition: border-color 180ms ease;
}
.area-search-field input::placeholder { color: var(--ink-muted); }
.area-search-field input:focus { outline: none; border-color: var(--blue); }
.area-search-result {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-card);
  font-size: var(--fs-small);
  line-height: 1.6;
  animation: area-search-result-in 240ms ease both;
}
@keyframes area-search-result-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.area-search-result--yes { background: rgba(var(--blue-rgb), 0.1); border: 1px solid rgba(var(--blue-rgb), 0.35); color: var(--white); }
.area-search-result--yes strong { color: var(--blue); }
.area-search-result--maybe { background: rgba(var(--white-rgb), 0.04); border: 1px solid var(--line-strong); color: var(--silver); }
.area-search-result a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

.area-search-tick {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
  color: var(--blue);
}


.region-toggle {
  background: var(--glass-sheen), var(--charcoal);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding-inline: var(--sp-4);
}
.region-toggle-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  background: none;
  border: none;
  color: var(--white);
  font-family: inherit;
  font-weight: 500;
  font-size: var(--fs-body);
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.region-toggle-trigger:hover, .region-toggle-trigger:focus-visible { color: var(--blue); }
.region-toggle.is-open .region-toggle-trigger .region-arrow { transform: rotate(180deg); }
.region-toggle-panel-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.region-toggle.is-open .region-toggle-panel-wrap { grid-template-rows: 1fr; }

.region-toggle-panel { overflow: hidden; min-height: 0; }
.region-toggle-panel .region-accordion {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-top: 1px dashed var(--line-strong);
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-radius: 0;
  padding-inline: 0;
}
.region-toggle-panel .fine-note { margin-top: var(--sp-3); }


.region-accordion {
  display: flex;
  flex-direction: column;
  background: var(--glass-sheen), var(--charcoal);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding-inline: var(--sp-4);
}
.region-item:not(:last-child) { border-bottom: 1px dashed var(--line-strong); }
.region-heading { margin: 0; }
.region-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  background: none;
  border: none;
  color: var(--white);
  font-family: inherit;
  font-weight: 400;
  font-size: var(--fs-body);
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.region-header:hover, .region-header:focus-visible { color: var(--blue); }
.region-arrow { flex-shrink: 0; width: 18px; height: 18px; color: var(--blue); transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1); }
.region-item.is-open .region-arrow { transform: rotate(180deg); }


.region-panel-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.region-item.is-open .region-panel-wrap { grid-template-rows: 1fr; }
.region-panel { overflow: hidden; min-height: 0; }
.region-panel .suburb-grid { padding-bottom: var(--sp-4); }



.credential-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.credential-list li { padding-left: 22px; position: relative; color: var(--white); font-size: var(--fs-small); }
.credential-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 1px; background: var(--blue); }

.vip-card {
  --vip-gold: #c9a227;
  --vip-gold-light: #f0dfa6;
  --vip-ink: #2a2008;
  --vip-line: rgba(201, 162, 39, 0.22);
  position: relative;
  max-width: 1040px;
  margin: var(--sp-5) auto 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "plate" "price" "mid" "foot";
  row-gap: var(--sp-3);
  background: #0b0c0e;
  border: 1px solid var(--vip-line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.9);
  color: var(--white);
}
@media (min-width: 1000px) {
  .vip-card {
    grid-template-columns: 358px 1fr 300px;
    grid-template-rows: auto 1fr;
    grid-template-areas: "plate mid price" "plate mid foot";
    row-gap: 0; column-gap: 0;
    border-radius: 22px;
  }
}

.vip-plate {
  grid-area: plate;
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  background-image:
    repeating-linear-gradient(88deg, rgba(255, 255, 255, 0.07) 0px, rgba(255, 255, 255, 0.07) 1px, rgba(0, 0, 0, 0.05) 1px, rgba(0, 0, 0, 0.05) 3px),
    linear-gradient(122deg, #5f4610 0%, #a5811f 16%, #efdda2 31%, var(--vip-gold) 45%, #8a6a1a 60%, var(--vip-gold-light) 76%, #a07d1c 88%, #6a4f12 100%);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
@media (min-width: 1000px) {
  .vip-plate {
    padding: 40px 34px;
    gap: 30px;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }
}

.vip-plate-row { display: flex; align-items: center; justify-content: space-between; }
.vip-logo { height: 15px; width: auto; display: block; }
@media (min-width: 1000px) { .vip-logo { height: 17px; } }

.vip-badge {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: rgba(42, 32, 8, 0.75);
}
.vip-badge--full { display: block; }
.vip-badge--short { display: none; }
@media (min-width: 1000px) {
  .vip-badge--full { display: none; }
  .vip-badge--short { display: block; }
}

.vip-kicker {
  display: none;
  font-family: var(--font-display); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: rgba(42, 32, 8, 0.7);
}
@media (min-width: 1000px) { .vip-kicker { display: block; margin-top: 22px; } }

.vip-headline {
  margin: 14px 0 0; font-family: var(--font-display); font-size: 44px; font-weight: 500;
  letter-spacing: -0.03em; line-height: 0.96; color: var(--vip-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
@media (min-width: 1000px) { .vip-headline { margin-top: 14px; font-size: 62px; line-height: 0.94; } }

.vip-sub { margin: 12px 0 0; font-size: var(--fs-small); line-height: 1.5; color: rgba(42, 32, 8, 0.78); max-width: 30ch; }
@media (min-width: 1000px) { .vip-sub { margin-top: 18px; font-size: 14.5px; max-width: 24ch; } }

.vip-plate-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.vip-plate-foot span { font-family: var(--font-display); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(42, 32, 8, 0.6); }

.vip-price-box {
  grid-area: price;
  display: flex; flex-direction: column; gap: 14px;
}
@media (max-width: 999px) {
  .vip-price-box {
    margin: 0 22px;
    padding: 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(201, 162, 39, 0.09) 0%, rgba(201, 162, 39, 0.02) 100%);
    border: 1px solid rgba(201, 162, 39, 0.22);
  }
}
@media (min-width: 1000px) {
  .vip-price-box, .vip-foot {
    padding-left: 28px; padding-right: 28px;
    border-left: 1px solid rgba(201, 162, 39, 0.2);
    background: linear-gradient(180deg, rgba(201, 162, 39, 0.08) 0%, rgba(201, 162, 39, 0.01) 100%);
  }
  .vip-price-box { padding-top: 34px; }
  .vip-foot { padding-bottom: 34px; }
}

.vip-rail-label { font-family: var(--font-display); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }

.vip-sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.vip-size {
  position: relative; min-height: 44px; padding: 10px 6px; border-radius: 10px; cursor: pointer;
  font-family: var(--font-display); font-size: 12.5px; color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .vip-size:hover { background: rgba(255, 255, 255, 0.09); }
}
.vip-size[aria-checked="true"] {
  color: var(--vip-gold-light);
  background: rgba(201, 162, 39, 0.09);
  box-shadow: inset 0 0 0 1.5px rgba(201, 162, 39, 0.85);
}

.vip-price-block { display: flex; flex-direction: column; gap: 4px; }
.vip-price-label { font-size: 12px; color: rgba(255, 255, 255, 0.45); }
.vip-price-row { display: flex; align-items: baseline; gap: 11px; }
.vip-price { display: flex; align-items: baseline; gap: 3px; font-family: var(--font-price); color: var(--white); }
.vip-price .sym { font-size: 20px; font-weight: 300; opacity: 0.65; }
.vip-price .num { font-size: 44px; font-weight: 400; letter-spacing: -0.04em; line-height: 0.95; }
@media (min-width: 1000px) {
  .vip-price .sym { font-size: 23px; }
  .vip-price .num { font-size: 54px; }
}
.vip-was { font-family: var(--font-price); font-size: 15px; color: rgba(255, 255, 255, 0.32); text-decoration: line-through; }

.vip-save {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 11px;
  background: rgba(201, 162, 39, 0.1); border: 1px solid rgba(201, 162, 39, 0.25);
}
.vip-save-label { font-size: 12.5px; color: rgba(255, 255, 255, 0.62); }
.vip-save-value { font-family: var(--font-price); font-size: 16.5px; font-weight: 500; color: var(--vip-gold-light); }

.vip-mid { grid-area: mid; padding: 0 22px; display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 1000px) { .vip-mid { padding: 36px 34px; gap: 22px; } }

.vip-group { display: flex; flex-direction: column; gap: 13px; }
.vip-group-label { font-family: var(--font-display); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vip-gold); }

.vip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.vip-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, 0.82); }
@media (min-width: 1000px) { .vip-list li { font-size: 13.5px; } }
.vip-list li strong { color: var(--white); font-weight: 700; }

.vip-tick {
  width: 18px; height: 18px; flex: none; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(201, 162, 39, 0.14);
  border: 1px solid rgba(201, 162, 39, 0.42);
  font-size: 10px; line-height: 1; font-weight: 700; color: var(--vip-gold-light);
  transform: translateY(0.5px);
}

.vip-rule { height: 1px; background: linear-gradient(to right, rgba(201, 162, 39, 0.35), rgba(201, 162, 39, 0.05)); }

.vip-foot { grid-area: foot; padding: 0 22px 22px; display: flex; flex-direction: column; gap: 11px; }
@media (min-width: 1000px) { .vip-foot { padding: var(--sp-4) 28px 34px; justify-content: center; } }

.vip-cta {
  position: relative; overflow: hidden; width: 100%; min-height: 50px;
  display: flex; align-items: center; justify-content: center;
  padding: 15px 18px; border: none; border-radius: 12px;
  font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--vip-ink); text-decoration: none;
  background-image: linear-gradient(100deg, #a5811f 0%, #f3e2a8 26%, var(--vip-gold) 52%, var(--vip-gold-light) 78%, #a5811f 100%);
  box-shadow: 0 12px 30px -12px rgba(201, 162, 39, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 150ms ease;
}
.vip-cta:hover { transform: translateY(-1px); }
.vip-cta .sheen {
  position: absolute; top: 0; bottom: 0; left: 0; width: 40px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  animation: vip-sheen 4.5s ease-in-out infinite;
}
@keyframes vip-sheen {
  0% { transform: translateX(-120%) skewX(-18deg); }
  55%, 100% { transform: translateX(320%) skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .vip-cta .sheen { animation: none; }
}
.vip-cta .label { position: relative; }

.vip-fine { font-size: 12px; color: rgba(255, 255, 255, 0.38); text-align: center; }


.google-g-icon { width: 12px; height: 12px; flex-shrink: 0; opacity: 0.85; }
.trust-item {
  text-align: center;
  padding: var(--sp-4) var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--glass-sheen);
  position: relative;
  overflow: hidden;
  transform: perspective(1000px) rotateX(var(--tilt-rx, 0deg)) rotateY(var(--tilt-ry, 0deg));
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), border-color 240ms ease;
}
.trust-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--tilt-mx, 50%) var(--tilt-my, 50%), rgba(var(--white-rgb), 0.14), transparent 55%);
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
}
.trust-item.is-tilting { border-color: rgba(var(--blue-rgb), 0.35); }
.trust-item.is-tilting::after { opacity: 1; }



/* Reviews marquee - same CSS-only mechanism as the #brands strip: two
   identical tracks, the second translating in behind the first. No JS. */
/* driven by scrollLeft in js, not a css keyframe, so a drag or a swipe can
   scrub it directly. overflow-x:auto also gives touch devices native momentum
   for free. NEVER add data-lenis-prevent here - this scrolls horizontally
   only, and that attribute would freeze vertical page scroll over it. */
.reviews-marquee {
  margin-top: var(--sp-5);
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  cursor: grab;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.reviews-marquee::-webkit-scrollbar { display: none; }
.reviews-marquee.is-dragging { cursor: grabbing; }
/* while dragging, swallow clicks so releasing over a card does not fire a link */
.reviews-marquee.is-dragging a { pointer-events: none; }
.reviews-track {
  display: flex;
  align-items: stretch;
  gap: var(--reviews-gap, 20px);
  flex: 0 0 auto;
  padding-right: var(--reviews-gap, 20px);
}

.review-card {
  flex: 0 0 auto;
  width: min(340px, calc(100vw - 64px));
  display: flex;
  flex-direction: column;
  text-align: left;
  background:
    var(--glass-sheen) padding-box,
    linear-gradient(var(--charcoal), var(--charcoal)) padding-box,
    linear-gradient(150deg,
      rgba(var(--white-rgb), 0.30),
      rgba(var(--white-rgb), 0.07) 42%,
      rgba(var(--white-rgb), 0.05) 62%,
      rgba(var(--white-rgb), 0.22)) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  padding: var(--sp-4);
}
.review-card .review-divider { margin-top: auto; }

@media (min-width: 1025px) {
  .reviews-marquee { --reviews-gap: 20px; }
  .review-card { width: 348px; padding: var(--sp-4); }
}

/* the sitewide reduced-motion rule only zeroes durations, which would snap an
   infinite marquee to its end state - stop it outright and allow manual scroll */
/* reduced motion: js skips the auto-scroll loop entirely, but the row stays
   swipeable by hand. duplicate tracks are kept so wrapping still works. */
@media (prefers-reduced-motion: reduce) {
  .reviews-marquee { -webkit-mask-image: none; mask-image: none; }
}

.review-stars-row { color: #FBBC05; letter-spacing: 3px; font-size: 21px; text-align: center; line-height: 1; }
.review-quote-wrap { position: relative; margin-top: var(--sp-3); }

.review-quote-icon { position: absolute; top: -6px; left: -6px; width: 28px; height: 28px; color: rgba(var(--blue-rgb), 0.18); transform: scaleX(-1); }
.review-text { position: relative; font-size: var(--fs-small); color: var(--silver); line-height: 1.55; }
.review-divider { margin: var(--sp-4) 0; height: 1px; background: var(--line); }

.review-header { display: flex; align-items: center; gap: var(--sp-3); }
.review-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(var(--white-rgb), 0.09); border: 1px solid rgba(var(--white-rgb), 0.14); color: rgba(var(--white-rgb), 0.85); font-weight: 500; font-size: var(--fs-small); }
.review-identity { min-width: 0; }
.review-name { font-size: var(--fs-micro); font-weight: 500; color: var(--white); }
.review-meta { font-size: 11px; color: var(--ink-muted); }
.review-google-badge { flex-shrink: 0; width: 22px; height: 22px; margin-left: auto; }



.reviews-deco { position: absolute; z-index: -1; width: 96px; height: 96px; border-radius: 18px; background: rgba(var(--blue-rgb), 0.05); }
.reviews-deco--tr { top: -24px; right: -24px; }
.reviews-deco--bl { bottom: -24px; left: -24px; }

.reviews-feed-link { display: inline-block; margin-top: var(--sp-5); font-size: var(--fs-small); }
#reviews .wrap { text-align: center; }


.faq-layout { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 1025px) { .faq-layout { grid-template-columns: 0.85fr 1.15fr; align-items: start; } }
.faq-intro p { margin-top: var(--sp-3); color: var(--ink-muted); }


.faq-card {
  background: var(--glass-sheen), var(--charcoal);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding-inline: var(--sp-4);
}
.faq-list { display: flex; flex-direction: column; }
.faq-item:not(:last-child) { border-bottom: 1px dashed var(--line-strong); }
.faq-heading { margin: 0; }
.faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  background: none;
  border: none;
  color: var(--white);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.faq-trigger:hover, .faq-trigger:focus-visible { color: var(--blue); }
.faq-arrow { flex-shrink: 0; width: 18px; height: 18px; color: var(--blue); transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1); }
.faq-item.is-open .faq-arrow { transform: rotate(180deg); }

.faq-panel-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item.is-open .faq-panel-wrap { grid-template-rows: 1fr; }
.faq-panel { overflow: hidden; min-height: 0; }
.faq-panel p { padding-bottom: var(--sp-3); color: var(--ink-muted); font-size: var(--fs-small); padding-right: var(--sp-5); }
.faq-panel p a { color: var(--blue); border-bottom: 1px solid rgba(var(--blue-rgb), 0.4); }





.quote-wizard {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: var(--sp-5) auto 0;
  padding: var(--sp-5);
  background: var(--glass-sheen), var(--charcoal);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}


.quote-progress { display: flex; gap: 6px; margin-bottom: var(--sp-4); }
.quote-progress-step { flex: 1; height: 3px; border-radius: var(--radius-pill); background: var(--line-strong); transition: background-color 240ms ease; }
.quote-progress-step.is-active, .quote-progress-step.is-done { background: var(--blue); }

.quote-step-labels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 6px; }
.quote-step-label-item {
  min-width: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  transition: color 240ms ease;
}
.quote-step-label-item.is-done { color: var(--silver); }
.quote-step-label-item.is-active { color: var(--blue); font-weight: 600; }
@media (max-width: 359px) {
  .quote-step-labels { font-size: 9px; gap: 3px; }
  .quote-step-label-item { font-size: 9px; letter-spacing: 0; }
}


.quote-stage { position: relative; perspective: 1400px; }
.quote-card { opacity: 1; }
.quote-card[hidden] { display: none; }

@keyframes quote-flip-out { from { transform: rotateY(0deg); opacity: 1; } to { transform: rotateY(-90deg); opacity: 0; } }
@keyframes quote-flip-in { from { transform: rotateY(90deg); opacity: 0; } to { transform: rotateY(0deg); opacity: 1; } }
@keyframes quote-flip-out-back { from { transform: rotateY(0deg); opacity: 1; } to { transform: rotateY(90deg); opacity: 0; } }
@keyframes quote-flip-in-back { from { transform: rotateY(-90deg); opacity: 0; } to { transform: rotateY(0deg); opacity: 1; } }
.quote-card.is-leaving { animation: quote-flip-out 220ms cubic-bezier(0.5, 0, 0.75, 0) both; }
.quote-card.is-entering { animation: quote-flip-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.quote-card.is-leaving-back { animation: quote-flip-out-back 220ms cubic-bezier(0.5, 0, 0.75, 0) both; }
.quote-card.is-entering-back { animation: quote-flip-in-back 320ms cubic-bezier(0.16, 1, 0.3, 1) both; }

.quote-step-label { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.quote-question { margin-top: var(--sp-2); font-size: var(--fs-h3); font-weight: 500; color: rgba(var(--white-rgb), 0.94); }


.quote-options { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.quote-option {
  min-height: 56px;
  padding-inline: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  background: var(--black);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}
.quote-option:hover { border-color: var(--blue); transform: translateX(2px); }
.quote-option:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.quote-option[aria-checked="true"] { border-color: var(--blue); background: rgba(var(--blue-rgb), 0.12); color: var(--blue); }
.quote-option-price { font-family: var(--font-price); font-size: var(--fs-small); font-weight: 400; color: var(--ink-muted); flex-shrink: 0; }
@media (max-width: 359px) {
  .quote-option { flex-direction: column; align-items: flex-start; justify-content: center; padding-block: 10px; padding-inline: var(--sp-3); gap: 2px; font-size: 15px; }
  .quote-option-price { font-size: 12px; }
}

.quote-field { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: 6px; }
.quote-field label { font-size: var(--fs-small); color: var(--silver); }
.quote-field input {
  width: 100%;
  min-height: 48px;
  padding: 12px var(--sp-3);
  background: var(--black);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  transition: border-color 180ms ease;
}
.quote-field input::placeholder { color: var(--ink-muted); }
.quote-field input:focus { outline: none; border-color: var(--blue); }
.quote-field input.is-shaking { animation: quote-shake 400ms ease; border-color: var(--blue); }
@keyframes quote-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.quote-area-result { margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--radius-card); font-size: var(--fs-small); line-height: 1.6; }
.quote-area-result--yes { background: rgba(var(--blue-rgb), 0.1); border: 1px solid rgba(var(--blue-rgb), 0.35); color: var(--white); }
.quote-area-result--yes strong { color: var(--blue); }
.quote-area-result--maybe { background: rgba(var(--white-rgb), 0.04); border: 1px solid var(--line-strong); color: var(--silver); }
.quote-area-result a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.quote-area-tick { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; color: var(--blue); }

.quote-actions { margin-top: var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); }
.quote-back {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--silver);
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease;
}
.quote-back svg { width: 18px; height: 18px; }
.quote-back:hover, .quote-back:focus-visible { border-color: var(--blue); color: var(--blue); }


.quote-fallback { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--ink-muted); }

.quote-card--done { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.quote-done-icon {
  width: 44px;
  height: 44px;
  padding: 10px;
  margin-bottom: var(--sp-3);
  border-radius: var(--radius-pill);
  background: rgba(var(--blue-rgb), 0.12);
  color: var(--blue);
}
.quote-done-copy { margin-top: var(--sp-2); color: var(--ink-muted); }



.site-footer {
  position: relative;
  background-color: var(--black);
  color: var(--ink-muted);
  border-radius: 32px 32px 0 0;
  padding-block: var(--sp-6) var(--sp-4);
  font-size: var(--fs-small);
}
@media (min-width: 1025px) { .site-footer { border-radius: 48px 48px 0 0; } }

.footer-top { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line); }
@media (min-width: 1025px) { .footer-top { grid-template-columns: 1fr 2fr; align-items: start; } }
.footer-brand p { margin-top: var(--sp-2); max-width: 32ch; }
.footer-copyright { margin-top: var(--sp-4); font-size: var(--fs-micro); color: var(--ink-muted); }


.footer-link-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
@media (min-width: 641px) { .footer-link-grid { grid-template-columns: repeat(4, 1fr); } }

.footer-heading { color: var(--white); font-weight: 500; font-size: var(--fs-small); margin-bottom: var(--sp-2); letter-spacing: 0.02em; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a:hover { color: var(--white); }

.footer-social a { display: inline-flex; align-items: center; gap: 8px; }
.footer-social a svg { width: 16px; height: 16px; flex-shrink: 0; }

.footer-bottom { padding-top: var(--sp-3); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); text-align: center; }



.blog-hero { padding-block: var(--sp-6) var(--sp-5); }
.blog-hero .lede { margin-top: var(--sp-2); }

.post-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; margin-top: var(--sp-5); }
@media (min-width: 781px) { .post-grid { grid-template-columns: 1fr 1fr; } }
.post-card { display: flex; flex-direction: column; border: 1px solid var(--line); padding: var(--sp-4); }
.post-card-meta { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.post-card h2 { margin-top: var(--sp-2); font-size: var(--fs-h3); }
.post-card p { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--ink-muted); }
.post-card .text-link { margin-top: var(--sp-3); display: inline-block; font-size: var(--fs-small); }

.article-header { padding-block: var(--sp-6) var(--sp-4); max-width: 68ch; }
.article-header .post-card-meta { margin-bottom: var(--sp-2); }

.article-image { max-width: 68ch; margin-top: var(--sp-4); }
.article-image img { width: 100%; height: auto; border-radius: var(--radius-card); display: block; }
.article-image figcaption { margin-top: var(--sp-1); font-size: var(--fs-micro); color: var(--ink-muted); }
.article-body { max-width: 68ch; padding-bottom: var(--sp-6); }
.article-body h2 { font-size: var(--fs-h3); text-transform: none; margin-top: var(--sp-5); }
.article-body h3 { font-size: var(--fs-body); margin-top: var(--sp-4); }
.article-body p { margin-top: var(--sp-3); color: var(--silver); }
.article-body ul, .article-body ol { margin-top: var(--sp-3); padding-left: 1.25em; display: flex; flex-direction: column; gap: var(--sp-1); color: var(--silver); }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body ul.process-tick-list, .article-body .process-combo-col ul { list-style: none; padding-left: 0; }
.article-body a { color: var(--blue); border-bottom: 1px solid rgba(var(--blue-rgb), 0.4); }
.article-body a:hover { border-color: var(--blue); }
.compare-table-wrap { margin-top: var(--sp-4); overflow-x: auto; contain: paint; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--glass-sheen), var(--charcoal); }
.compare-table { width: 100%; min-width: 480px; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: 10px var(--sp-3); text-align: left; border-bottom: 1px solid var(--line); font-size: var(--fs-small); color: var(--silver); }
.compare-table tbody tr:nth-child(even) { background: rgba(var(--white-rgb), 0.02); }
.compare-table thead th { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); font-weight: 400; border-bottom: 1px solid var(--line-strong); }
.compare-table tbody th { color: var(--white); font-weight: 500; white-space: nowrap; text-align: left; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: none; }
.article-cta { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); max-width: 68ch; }

.pkg-rail { margin-top: var(--sp-5); }

@media (max-width: 1024px) {
  .pkg-layout { display: flex; flex-direction: column; }
  .pkg-layout > .article-header { order: 1; }
  .pkg-layout > .article-image  { order: 2; }
  .pkg-layout > .pkg-rail       { order: 3; }
  .pkg-layout > .article-body   { order: 4; padding-top: var(--sp-5); }
}
.pkg-booking {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--glass-sheen), var(--charcoal);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.pkg-booking .tier-total-row { margin-top: 0; }
.pkg-booking-note { font-size: var(--fs-micro); line-height: 1.5; color: var(--ink-muted); }

@media (min-width: 1025px) {
  .pkg-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    grid-template-rows: auto 1fr;
    column-gap: var(--sp-6);
    row-gap: var(--sp-4);
  }
  .pkg-layout > .article-header { grid-column: 1; grid-row: 1; }
  .pkg-layout > .article-image  { grid-column: 2; grid-row: 1; margin-top: var(--sp-6); }
  .pkg-layout > .article-body   { grid-column: 1; grid-row: 2; }
  .pkg-layout > .pkg-rail       { grid-column: 2; grid-row: 2; margin-top: 0; }
  .pkg-booking { position: sticky; top: 104px; }
  .pkg-layout .article-image { max-width: none; }
  .pkg-layout .article-image img { aspect-ratio: 4 / 3; object-fit: cover; }
  .pkg-layout > .article-header,
  .pkg-layout > .article-body { max-width: none; min-width: 0; }
  .pkg-layout > .article-header { padding-top: var(--sp-6); padding-bottom: 0; }
  .pkg-layout > .article-body > p,
  .pkg-layout > .article-body > .lede { max-width: 68ch; }
  .article-body .process-tick-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-1) var(--sp-4);
  }
  .article-cta { max-width: none; display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
  .article-cta .lede { margin-right: auto; }
  .article-cta .article-back { margin-top: 0; }
}
.article-back { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--sp-4); font-size: var(--fs-small); }



.reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition: opacity 600ms ease, transform 600ms ease, filter 600ms ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }

.trust-item.reveal.is-visible { transform: perspective(1000px) rotateX(var(--tilt-rx, 0deg)) rotateY(var(--tilt-ry, 0deg)); }


.reveal--roll {
  opacity: 0;
  transform: perspective(900px) rotateX(-16deg) translateY(24px);
  transform-origin: 50% 0%;
  filter: blur(4px);
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 700ms ease;
}
.reveal--roll.is-visible {
  opacity: 1;
  transform: perspective(900px) rotateX(0deg) translateY(0);
  filter: blur(0);
}


.reveal:nth-child(2) { transition-delay: 70ms; }
.reveal:nth-child(3) { transition-delay: 140ms; }
.reveal:nth-child(4) { transition-delay: 210ms; }
.reveal:nth-child(5) { transition-delay: 280ms; }
.reveal:nth-child(6) { transition-delay: 350ms; }

/* Compact square package card — trial variant, Interior panel only.
   Selectors are deliberately (0,3,0) so they beat the .tier-card--v2
   rules above regardless of source order. */
.tiers--compact { grid-template-columns: 1fr; gap: var(--sp-3); }
@media (min-width: 781px) {
  .tiers--compact { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
}

.tier-card--v2.tier-card--compact { grid-template-columns: 1fr; }

.tier-card--v2.tier-card--compact .tier-photo {
  aspect-ratio: auto;
  height: 276px;
  border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0;
}
/* the name/duration/tagline sit over the lower third of the photo, so the
   photo carries its own bottom-up darkening for legibility */
.tier-card--v2.tier-card--compact .tier-photo::after {
  background: linear-gradient(to top,
    rgba(var(--black-rgb), 0.95) 0%,
    rgba(var(--black-rgb), 0.86) 22%,
    rgba(var(--black-rgb), 0.45) 42%,
    rgba(var(--black-rgb), 0.08) 62%,
    rgba(var(--black-rgb), 0) 76%);
}

.tier-card--v2.tier-card--compact .tier-info {
  margin-top: -104px;
  padding: 0 var(--sp-3) var(--sp-3);
  gap: 20px;
  background: linear-gradient(to bottom,
    rgba(var(--black-rgb), 0) 0,
    rgba(var(--black-rgb), 0.55) 52px,
    var(--black) 104px);
  border-radius: 0;
}
.tier-card--v2.tier-card--compact .tier-meta,
.tier-card--v2.tier-card--compact .tier-tagline { color: rgba(var(--white-rgb), 0.82); }
.tier-card--v2.tier-card--compact .tier-name { font-size: 21px; line-height: 1.15; }
.tier-card--v2.tier-card--compact .tier-meta { margin-top: 11px; font-size: var(--fs-micro); }
.tier-card--v2.tier-card--compact .tier-tagline {
  margin-top: 11px;
  font-size: 13px;
  line-height: 1.5;
}
.tier-card--v2.tier-card--compact .tier-rule { display: none; }
.tier-card--v2.tier-card--compact .tier-checklist {
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.tier-card--v2.tier-card--compact .tier-checklist li { font-size: var(--fs-micro); gap: 7px; }
.tier-card--v2.tier-card--compact .tier-checklist li::before { width: 15px; height: 15px; font-size: 9px; }

.tier-card--v2.tier-card--compact .tier-rail {
  margin-top: auto;
  padding: var(--sp-3);
  gap: 16px;
  border-top: 1px solid var(--line);
  border-left: none;
  border-radius: 0 0 calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px);
}
.tier-card--v2.tier-card--compact .tier-sizes { flex-direction: row; gap: 6px; }
.tier-card--v2.tier-card--compact .tier-size {
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: 7px 9px;
  border-radius: 10px;
}
.tier-card--v2.tier-card--compact .tier-size-eg {
  display: block;
  margin-top: 1px;
  font-size: 10px;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: rgba(var(--silver-rgb), 0.6);
}
.tier-card--v2.tier-card--compact .tier-size-name { font-size: var(--fs-micro); }
.tier-card--v2.tier-card--compact .tier-size-price { font-size: 15px; }
.tier-card--v2.tier-card--compact .tier-total { font-size: 36px; }
.tier-card--v2.tier-card--compact .tier-total-row { padding-top: 4px; }
.tier-card--v2.tier-card--compact .tier-body .btn,
.tier-card--v2.tier-card--compact .tier-rail .btn { min-height: 44px; padding: 11px 18px; }
.tier-card--v2.tier-card--compact .tier-save { margin-bottom: 0; }
/* on phones the total row is hidden and the price rides in the CTA, so it
   gets its own bump rather than missing out on the larger total */
.tier-card--v2.tier-card--compact [data-tier-cta-price] { font-size: 17px; font-weight: 500; }

/* Service Area is visually mirrored on desktop — search column left, heading
   right — so it doesn't repeat the Reviews block's text-left silhouette
   directly above it. DOM order is untouched (heading first), so reading
   order and the single-column mobile layout are unaffected. */
@media (min-width: 1025px) {
  .area-layout { grid-template-columns: 1.1fr 0.9fr; }
  /* grid-row must be explicit: with only grid-column set, auto-placement
     advances its cursor and drops the second item into a new row */
  .area-layout > div:first-child { grid-column: 2; grid-row: 1; }
  .area-layout > div:nth-child(2) { grid-column: 1; grid-row: 1; }
}

/* Quote form — a plain, scannable form. Replaces the 4-step flip-card wizard,
   which tested as unclear ("what do I do here?"). */
.quote-form {
  max-width: 560px;
  margin-inline: auto;
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  background: var(--glass-sheen), var(--charcoal);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  text-align: left;
}
.quote-field { display: flex; flex-direction: column; gap: 8px; margin-top: 0; min-width: 0; }

.contact-layout { display: grid; gap: var(--sp-4); align-items: start; }
.quote-row { display: grid; gap: var(--sp-4); }

.quote-aside {
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--glass-sheen), var(--charcoal);
  text-align: left;
}
.quote-aside-title { margin: 0 0 var(--sp-3); font-size: var(--fs-h3); }
.quote-steps { counter-reset: qstep; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.quote-steps li {
  counter-increment: qstep;
  position: relative;
  padding-left: 38px;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-muted);
}
.quote-steps li::before {
  content: counter(qstep);
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: rgba(var(--blue-rgb), 0.12);
  border: 1px solid rgba(var(--blue-rgb), 0.4);
  color: var(--blue);
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1;
}
.quote-steps strong { display: block; color: var(--white); font-weight: 500; }
.quote-aside-note {
  margin: var(--sp-3) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--line-strong);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-muted);
}
.quote-aside-note strong { color: var(--white); font-weight: 500; }

@media (min-width: 641px) {
  .quote-row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1025px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: var(--sp-5); }
  .contact-layout .quote-form { max-width: none; margin-inline: 0; margin-top: 0; }
  .quote-aside { margin-top: 0; }
}
.quote-label { font-size: var(--fs-small); font-weight: 500; color: var(--white); }
.quote-input {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line-strong);
  background: rgba(var(--black-rgb), 0.5);
  color: var(--white);
  font: inherit;
  font-size: var(--fs-body);
  appearance: none; -webkit-appearance: none;
}
select.quote-input {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3b3b3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
  padding-right: 44px;
}
.quote-input::placeholder { color: var(--ink-muted); }
.quote-input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-color: transparent; }
.quote-input.is-invalid { border-color: rgba(255, 120, 120, 0.7); }

.quote-area-result { margin-top: 2px; font-size: var(--fs-small); color: var(--ink-muted); }
.quote-area-result.is-match { color: var(--blue); }
.quote-area-result[hidden] { display: none; }

.quote-submit { width: 100%; margin-top: var(--sp-1); }
.quote-form .quote-fallback { margin: 0; text-align: center; font-size: var(--fs-small); color: var(--ink-muted); }
.quote-done {
  margin: 0;
  padding: var(--sp-3);
  border-radius: var(--radius-card);
  background: rgba(var(--blue-rgb), 0.1);
  border: 1px solid rgba(var(--blue-rgb), 0.35);
  font-size: var(--fs-small);
  color: var(--silver);
}
.quote-done strong { display: block; margin-bottom: 4px; color: var(--white); }
.quote-done[hidden] { display: none; }
.quote-done-reach { display: block; margin-top: 8px; }
.quote-done-reach a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.quote-done-reach a:hover, .quote-done-reach a:focus-visible { color: var(--white); }
.page-vip .vip-intro { max-width: 62ch; margin-inline: auto; margin-bottom: var(--sp-5); text-align: center; }

/* selected category card points into the packages it opened */
.service-tabs .service-tab.category-card[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 18px; height: 18px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--blue);
  border-radius: 3px;
  z-index: 3;
}

/* package cards lift on hover, matching the category cards above them */
@media (hover: hover) and (pointer: fine) {
  .tier-card--v2.tier-card--compact:hover { transform: translateY(-4px); }
}
.tier-card--v2.tier-card--compact {
  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 350ms ease;
}
.tier-card.reveal.is-visible.tier-card--compact:hover { transform: translateY(-4px); }

/* Floating Google trust badge — parked bottom-left, hidden over the hero and
   fading in once the visitor scrolls past it. */
.google-trust {
  position: fixed;
  left: var(--float-btn-edge);
  bottom: var(--float-btn-edge);
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px 9px 11px;
  border-radius: var(--radius-pill);
  background: var(--glass-fill-solid);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  color: var(--white);
  line-height: 1;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 520ms;
}
.google-trust.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .google-trust {
    background: var(--glass-fill);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
}
.google-trust-icon { display: inline-flex; }
.google-trust-icon .google-g-icon { width: 18px; height: 18px; }
.google-trust-body { display: flex; flex-direction: column; gap: 4px; }
.google-trust-rating {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-small);
  line-height: 1;
}
.google-trust-stars { color: #FBBC05; letter-spacing: 1.5px; }
.google-trust-rating strong { font-weight: 600; color: var(--white); }
.google-trust-text {
  font-size: var(--fs-micro);
  font-weight: 300;
  line-height: 1;
  color: rgba(var(--silver-rgb), 0.9);
}
.google-trust-text strong { font-weight: 500; color: var(--white); }
.google-trust:hover, .google-trust:focus-visible { border-color: rgba(var(--white-rgb), 0.4); }
@media (max-width: 480px) {
  .google-trust { padding: 8px 12px 8px 9px; gap: 7px; }
  .google-trust-rating { font-size: var(--fs-micro); }
  .google-trust-text { font-size: 10px; }
  .google-trust-icon .google-g-icon { width: 15px; height: 15px; }
}

/* Trusted products — infinite logo marquee */
.brand-marquee {
  margin-top: var(--sp-5);
  display: flex;
  overflow: hidden;
  /* fades the strip out at both edges without painting a solid colour over it,
     so it works against the body gradient rather than fighting it */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.brand-track {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center;
  gap: var(--brand-gap, 56px);
  flex: 0 0 auto;
  padding-right: var(--brand-gap, 56px);
  animation: brand-scroll 42s linear infinite;
}
.brand-marquee:hover .brand-track { animation-play-state: paused; }
@keyframes brand-scroll { to { transform: translateX(-100%); } }

.brand-item { flex: 0 0 auto; display: flex; align-items: center; }
.brand-item img {
  display: block; width: auto; opacity: 0.72;
  transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.brand-marquee:hover .brand-item img { opacity: 0.55; }
.brand-item:hover img { opacity: 1; }

/* heights are tuned per mark so they read optically equal, not mathematically
   equal — a badge and a long wordmark at the same pixel height do not match */
.brand-item--carpro     img { height: 26px; }
.brand-item--meguiars   img { height: 46px; }
.brand-item--mirch      img { height: 24px; }
.brand-item--ps         img { height: 34px; }
.brand-item--gyeon      img { height: 30px; }
.brand-item--kochchemie img { height: 30px; }

@media (min-width: 781px) {
  .brand-marquee { --brand-gap: 88px; }
  .brand-item--carpro     img { height: 32px; }
  .brand-item--meguiars   img { height: 56px; }
  .brand-item--mirch      img { height: 29px; }
  .brand-item--ps         img { height: 42px; }
  .brand-item--gyeon      img { height: 36px; }
  .brand-item--kochchemie img { height: 36px; }
}

/* The sitewide reduced-motion rule zeroes animation durations, which for an
   infinite marquee would snap it to its end state. Stop it outright instead
   and let the row scroll manually. */
@media (prefers-reduced-motion: reduce) {
  .brand-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .brand-track { animation: none; }
  .brand-track[aria-hidden="true"] { display: none; }
}

/* About intro - story copy beside a portrait video */
.about-intro { display: grid; gap: var(--sp-5); margin-bottom: var(--sp-6); }
.about-intro-copy > p { margin-top: var(--sp-3); color: var(--ink-muted); max-width: 60ch; }
.about-video { margin: 0; }
.about-video video {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-card);
  background: var(--charcoal);
  border: 1px solid var(--line);
}
.about-video figcaption { margin-top: var(--sp-2); font-size: var(--fs-micro); color: var(--ink-muted); }
/* portrait 9:16 - capped on small screens so it does not eat the whole viewport */
@media (max-width: 1024px) {
  .about-video { max-width: 320px; margin-inline: auto; }
}
@media (min-width: 1025px) {
  .about-intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
    gap: var(--sp-6);
    align-items: center;
  }
}

/* Recent Work gallery — self-hosted photos, styled from the existing card system */
.gallery-grid {
  list-style: none; margin: var(--sp-5) 0 0; padding: 0;
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 781px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }
.btn-social-icon { width: 18px; height: 18px; flex: 0 0 auto; margin-right: 8px; }
.gallery-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--glass-sheen), var(--charcoal);
  border: 1px solid var(--line);
  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
/* the square lives here now, not on the tile, so the caption sits below the
   photo instead of being clipped by the tile's own 1:1 box */
.gallery-media { display: block; position: relative; aspect-ratio: 1 / 1; overflow: hidden; flex: 0 0 auto; }
.gallery-tile img,
.gallery-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-caption { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; margin-top: auto; }
.gallery-service { font-size: var(--fs-small); font-weight: 500; color: rgba(var(--white-rgb), 0.94); line-height: 1.25; }
/* the tiles are links now, and mobile has no hover to reveal that, so the
   arrow is the only affordance a touch visitor gets */
.gallery-service::after { content: " →"; color: var(--blue); display: inline-block; transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1); }
.gallery-meta { font-size: var(--fs-micro); color: var(--ink-muted); line-height: 1.3; }
.gallery-price { font-family: var(--font-price); }
.gallery-tile:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .gallery-tile:hover { transform: translateY(-4px); }
  .gallery-tile:hover .gallery-service { color: var(--blue); }
  .gallery-tile:hover .gallery-service::after { transform: translateX(3px); }
}
@media (max-width: 400px) {
  .gallery-caption { padding: 8px 10px 10px; }
  .gallery-service { font-size: var(--fs-micro); }
}
.gallery-cta { display: inline-flex; margin: var(--sp-5) auto 0; }
#our-work .wrap { text-align: center; }
#our-work .gallery-grid { text-align: left; }

/* 404 page. Entrance only - staggered fade/rise/blur reusing the sitewide
   reveal language, so no new motion idea is introduced. Covered by the global
   prefers-reduced-motion rule: these animations end in the visible state, so
   zeroing their duration simply shows the content immediately. */
.nf-main { display: flex; }
.nf {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 62svh;
}
.nf-inner { text-align: center; }
.nf-code {
  font-family: var(--font-display);
  font-size: clamp(60px, 13vw, 104px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(var(--white-rgb), 0.20);
  margin: 0;
}
.nf-rule {
  width: 56px; height: 1px;
  margin: var(--sp-3) auto var(--sp-4);
  background: var(--blue);
  transform-origin: center;
}
.nf h1 { margin: 0; }
.nf-lede { margin: var(--sp-3) auto 0; max-width: 46ch; }
.nf-cta {
  margin-top: var(--sp-5);
  display: flex; flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
}
.nf-links {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-4);
}
.nf-links a {
  font-size: var(--fs-small);
  color: var(--ink-muted);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex; align-items: center;
  transition: color 220ms ease;
}
.nf-links a:hover, .nf-links a:focus-visible { color: var(--blue); }

@keyframes nf-in {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes nf-rule-in {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
.nf-code, .nf h1, .nf-lede, .nf-cta, .nf-links {
  animation: nf-in 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.nf-rule { animation: nf-rule-in 620ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.nf-code  { animation-delay: 40ms; }
.nf-rule  { animation-delay: 160ms; }
.nf h1    { animation-delay: 240ms; }
.nf-lede  { animation-delay: 320ms; }
.nf-cta   { animation-delay: 400ms; }
.nf-links { animation-delay: 480ms; }

@media (max-width: 640px) {
  .nf-links { gap: var(--sp-1) var(--sp-3); }
  .nf-links a { font-size: var(--fs-micro); }
  /* the fixed call/whatsapp buttons sit bottom-right and were landing on the
     last wrapped link. the content exactly fills its box, so there is no
     centring slack for bottom padding to absorb - the row has to be pulled up
     instead. */
  .nf-links { margin-top: var(--sp-4); }
  .nf { padding-bottom: var(--sp-5); }
}
/* 320px (SE 1st gen) wraps the links onto three lines, which puts the last one
   back under the buttons - tighten the whole stack at that width only */
@media (max-width: 359px) {
  .nf-code { font-size: 48px; }
  .nf-lede { margin-top: var(--sp-2); }
  .nf-cta { margin-top: var(--sp-4); }
  .nf-links { margin-top: var(--sp-3); padding-top: var(--sp-3); }
}

.breadcrumb { padding-top: var(--sp-5); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); padding: 0; margin: 0; font-size: var(--fs-micro); color: var(--ink-muted); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--sp-1); color: var(--line-strong); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-muted); text-decoration: none; }
.breadcrumb [aria-current="page"] { display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb [aria-current="page"] { color: var(--silver); }

.svc-page { padding-bottom: var(--sp-6); }
.svc-hero { display: grid; gap: var(--sp-4); padding-top: var(--sp-4); align-items: center; }
.svc-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); min-width: 0; }
.svc-hero-copy h1 { margin: 0; }
.svc-hero-copy .lede { margin: 0; }


.svc-trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.svc-trust li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--silver); }
.svc-trust svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--blue); }

.svc-hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }

.svc-section { margin-top: var(--sp-6); }
.svc-section > .section-head { margin-bottom: var(--sp-4); }
.svc-prose { max-width: 68ch; margin-inline: auto; }
.svc-prose h2 { margin-bottom: var(--sp-3); }
.svc-prose p { margin-bottom: var(--sp-3); color: var(--ink-muted); }
.svc-prose p:last-child { margin-bottom: 0; }
.svc-size-note { margin-top: var(--sp-3); font-size: var(--fs-micro); color: var(--ink-muted); text-align: center; }

.compare-table.cmp-levels { min-width: 560px; }
.compare-table.cmp-levels tbody th { white-space: normal; font-weight: 400; color: var(--silver); width: 46%; }
.compare-table.cmp-levels thead th {
  text-align: center;
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
}
.compare-table.cmp-levels thead th .cmp-lvl {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 400;
}
.compare-table.cmp-levels td { text-align: center; color: var(--white); }
.compare-table.cmp-levels .cmp-corner { border-bottom: 1px solid var(--line-strong); }
.compare-table.cmp-levels thead th { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.cmp-yes { width: 18px; height: 18px; color: var(--blue); }
.cmp-no { color: var(--line-strong); }
.cmp-yes, .cmp-no { display: inline-block; vertical-align: middle; line-height: 1; }
.compare-table.cmp-levels tbody tr:first-child td { color: var(--blue); font-family: var(--font-price); font-weight: 400; }

.svc-siblings { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
.svc-sibling {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--glass-sheen), var(--charcoal);
  text-decoration: none;
  transition: border-color 250ms ease, transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.svc-sibling-media { flex: 0 0 96px; height: 76px; border-radius: 12px; overflow: hidden; }
.svc-sibling-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-sibling-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.svc-sibling-title { color: var(--white); font-size: var(--fs-body); font-weight: 500; }
.svc-sibling-copy { color: var(--ink-muted); font-size: var(--fs-small); }
.svc-sibling-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--blue); font-size: var(--fs-small); }
.svc-sibling-cta svg { width: 15px; height: 15px; transition: transform 250ms ease; }
@media (hover: hover) and (pointer: fine) {
  .svc-sibling:hover { border-color: rgba(var(--blue-rgb), 0.45); transform: translateY(-3px); }
  .svc-sibling:hover .svc-sibling-cta svg { transform: translateX(3px); }
}
.svc-sibling:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

@media (min-width: 781px) {
  .svc-siblings { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1025px) {
  .svc-hero { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding-top: var(--sp-4); align-items: start; }
  .svc-section { margin-top: var(--sp-7); }
}

.svc-prose > h2 { text-align: center; }
.compare-table.cmp-levels tbody tr:first-child td { white-space: nowrap; }

.cmp-price + .cmp-price::before { content: " / "; color: var(--ink-muted); }

@media (max-width: 640px) {
  .compare-table.cmp-levels { min-width: 0; table-layout: fixed; }
  .compare-table.cmp-levels th,
  .compare-table.cmp-levels td { padding: 9px 8px; font-size: 12px; }
  /* table-layout:fixed takes column widths from the FIRST row, so these
     must sit on the thead cells - a tbody width here is ignored. */
  .compare-table.cmp-levels .cmp-corner { width: 48%; }
  .compare-table.cmp-levels thead th { width: 26%; }
  .compare-table.cmp-levels thead th { padding-top: 10px; padding-bottom: 10px; font-size: 11px; letter-spacing: 0.04em; }
  .compare-table.cmp-levels thead th .cmp-lvl { font-size: 9px; letter-spacing: 0.04em; }
  .compare-table.cmp-levels .cmp-yes { width: 15px; height: 15px; }

  .compare-table.cmp-levels tbody tr:first-child td { white-space: normal; line-height: 1.35; }
  .cmp-price { display: block; }
  .cmp-price + .cmp-price::before { content: none; }
}

@media (max-width: 359px) {
  .compare-table.cmp-levels th,
  .compare-table.cmp-levels td { padding: 8px 6px; font-size: 11px; }
  .compare-table.cmp-levels thead th { font-size: 10px; }
}

/* the sitewide `img, svg { display: block }` reset makes an svg ignore its
   parent's text-align, so the tick must be inline to centre in its cell */

.svc-hero h1 { font-size: 30px; line-height: 1.12; }
.svc-hero .lede { font-size: var(--fs-body); }






@media (min-width: 1025px) {
  .svc-hero h1 { font-size: 48px; }
  
}

@media (max-width: 1024px) {
  /* the scroll cue directly below already does this button's job */
  .svc-cta-packages { display: none; }
  .breadcrumb { padding-top: var(--sp-3); }
  .breadcrumb ol { flex-wrap: nowrap; font-size: 11px; gap: 4px; }
  .breadcrumb li { white-space: nowrap; }
  .breadcrumb li:last-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .breadcrumb li + li::before { margin-right: 4px; }
}

/* 1fr grid tracks default to min-width:auto, so the unbreakable email address
   was holding the footer wider than the viewport below ~360px */
.footer-col, .footer-brand { min-width: 0; }
.footer-col a, .footer-brand p { overflow-wrap: anywhere; }
@media (max-width: 400px) {
  .footer-link-grid { gap: var(--sp-4) var(--sp-3); }
}

@media (max-width: 1024px) {
  .svc-hero { padding-top: var(--sp-2); gap: var(--sp-3); }
  .svc-hero-copy { gap: var(--sp-2); }
  .svc-trust { gap: var(--sp-1) var(--sp-3); }
}

/* a grid item's default min-width:auto resolves to min-content, and with
   aspect-ratio set that includes a width derived from the content height -
   which beats max-width and pushed the card past its own 272px track at 320px */
.service-tab.category-card { min-width: 0; max-width: 100%; }

.svc-hero-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--black);
  /* tuck the video up under the sticky, transparent-at-top header, the same
     way the homepage hero does, then pad the content back down */
  margin-top: -76px;
  padding-top: 76px;
  padding-bottom: calc(var(--sp-6) + 44px);
}
.svc-hero-section > .wrap { position: relative; z-index: 1; }
.svc-hero-section + section::before { content: none; }


@media (min-width: 1025px) {
  .svc-hero-section { padding-bottom: calc(var(--sp-7) + 44px); }
}

/* the homepage hero anchors its text to the bottom, where its scrim is already
   dark; this hero's text spans the whole section, so it needs an even scrim */
.svc-hero-section .hero-scrim {
  background: linear-gradient(to bottom,
    rgba(var(--black-rgb), 0.76) 0%,
    rgba(var(--black-rgb), 0.68) 40%,
    rgba(var(--black-rgb), 0.74) 82%,
    rgba(var(--black-rgb), 1) 100%
  );
}
/* full-opacity silver over video: the base .lede alpha drops it under AA */
.svc-hero .lede { color: var(--silver); }

@media (max-width: 1024px) {
  .svc-hero-section { padding-bottom: calc(var(--sp-5) + 44px); }
}

@media (max-width: 359px) {
  /* bottom-anchored card content reaches the pill at this width; a floor on
     the height pushes the title clear of it */
  .service-tab.category-card { aspect-ratio: auto; min-height: 300px; }
}

/* these sections already inherit the sitewide section padding-block; the extra
   margin-top was stacking on top of it, tripling every boundary */
.svc-section { margin-top: 0; padding-block: 36px; }
.svc-section > .section-head { margin-bottom: var(--sp-3); }
@media (min-width: 1025px) {
  .svc-section { margin-top: 0; padding-block: 60px; }
  .svc-section > .section-head { margin-bottom: var(--sp-4); }
}

.legal-updated { margin-top: var(--sp-2); font-size: var(--fs-micro); color: var(--ink-muted); font-family: var(--font-mono); letter-spacing: 0.04em; }
.legal-page .article-body strong { color: var(--white); font-weight: 500; }
.legal-back { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--line); }

.hero-quickfacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--white);
}
.hero-quickfact { display: inline-flex; align-items: center; }
.hero-quickfact + .hero-quickfact::before {
  content: "";
  width: 3px; height: 3px;
  margin-right: 10px;
  border-radius: 50%;
  background: rgba(var(--silver-rgb), 0.5);
}
.hero-quickfact--price { font-family: var(--font-price); }

.phone-float--direct {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--black);
  background: var(--white);
  border-radius: 50%;
  width: var(--float-btn-size);
  height: var(--float-btn-size);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  animation: phone-float-pulse 2.6s ease-out infinite;
}
.phone-float--direct svg { width: var(--float-icon-size); height: var(--float-icon-size); }
.phone-float--direct:hover, .phone-float--direct:focus-visible { background: var(--silver); }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.hero-cta .btn { min-height: 48px; }
@media (max-width: 640px) {
  .hero-cta .btn { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: 12px; }
}
@media (max-width: 359px) {
  .hero-cta { gap: 10px; }
}

.footer-col a, .footer-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--silver);
}
.footer-brand-mark { min-height: 44px; display: inline-flex; align-items: center; }
.footer-col ul { gap: 0; }
.footer-col li:not(:has(a)) {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.footer-col a.footer-phone {
  color: var(--white);
  font-weight: 500;
}
@media (max-width: 640px) {
  .site-footer { padding-bottom: calc(var(--sp-6) + var(--sp-2)); }
}
.footer-col a.footer-email { overflow-wrap: normal; }

.svc-hero { padding-top: var(--sp-3); gap: var(--sp-2); }
.svc-hero h1 { font-size: 24px; line-height: 1.15; }
.svc-hero-copy { gap: var(--sp-2); }
.svc-hero-copy .lede { font-size: var(--fs-small); }
.svc-hero-section { padding-bottom: var(--sp-2); }
#compare { margin-top: var(--sp-2); }
#compare .section-head { margin-bottom: var(--sp-2); }
#compare .section-head p { display: none; }
@media (min-width: 1025px) {
  .svc-hero h1 { font-size: 34px; }
  .svc-hero-copy .lede { font-size: var(--fs-body); }
  #compare { margin-top: var(--sp-3); }
}

.svc-hero-section .breadcrumb { padding-top: var(--sp-3); }
.svc-hero-section .breadcrumb a,
.svc-hero-section .breadcrumb [aria-current="page"] { min-height: 32px; }
.svc-cta-under-table { margin-top: var(--sp-3); justify-content: center; }
@media (min-width: 1025px) {
  .svc-cta-under-table { margin-top: var(--sp-4); }
}

#compare .section-head h2 { font-size: 20px; line-height: 1.2; }
.compare-table.cmp-levels caption {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (min-width: 1025px) {
  #compare .section-head h2 { font-size: 26px; }
}
#compare.svc-section { padding-top: var(--sp-2); }
@media (min-width: 1025px) { #compare.svc-section { padding-top: var(--sp-3); } }


.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.header-phone svg { width: 16px; height: 16px; flex: none; color: var(--blue); }
.header-phone:hover, .header-phone:focus-visible { color: var(--blue); }

/* Below the desktop breakpoint the number replaces Book Now outright, styled
   as an outline pill so the hero's accent CTA stays the loudest thing on the
   first screen. Book Now still lives in the mobile menu and the hero. */
@media (max-width: 1024px) {
  .header-actions .btn { display: none; }
  .header-phone {
    padding: 10px 18px;
    font-size: var(--fs-small);
    border-radius: var(--radius-pill);
    background: var(--glass-fill-solid);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
  }
  .header-phone:hover, .header-phone:focus-visible {
    color: var(--white);
    border-color: rgba(var(--white-rgb), 0.38);
  }
}
/* The mobile logo is pinned dead-centre, so the pill has to fit the gap
   between that and the right edge. Measured: it collides at 320, 390 and
   393 at full size, so it steps down before those widths, not after. */
@media (max-width: 429px) {
  .header-phone { padding: 10px 12px; font-size: 13px; gap: 5px; }
  .header-phone svg { width: 14px; height: 14px; }
}
@media (max-width: 374px) {
  .header-phone svg { display: none; }
}

.quote-reply {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--white);
  text-align: center;
}

.quote-aside-guarantee {
  display: flex;
  gap: 10px;
  margin: var(--sp-3) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--line-strong);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-muted);
}
.quote-aside-guarantee svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--blue); }
.quote-aside-guarantee strong { color: var(--white); font-weight: 500; }