/* =========================================================================
   High Caliber Concrete Coatings — landing page
   Aesthetic: clean, confident, aquatic. Sky-cyan brand on bright concrete
   white, anchored by deep ink feature sections.
   Typography: Montserrat throughout — heavy (800) for headings, regular for
   body, semibold uppercase for eyebrows/labels. Matches the live WordPress site.
   Primary blue: #3CCEEB.
   ========================================================================= */

:root {
  /* Brand palette ---------------------------------------------------------- */
  --primary: #3cceeb;        /* Sky Cyan  — primary action / accent          */
  --primary-bright: #62dcf4; /* lighter cyan for hovers / accents on dark    */
  --primary-deep: #1191b1;   /* AA-contrast cyan for icons/text on white     */
  --primary-ink: #06323d;    /* text color that sits on cyan fills           */
  --accent: #60c2d4;         /* Aqua Teal                                    */
  --sand: #ffbc7d;           /* Warm Sand — support accent                   */

  /* Neutrals --------------------------------------------------------------- */
  --ink: #1a1d1f;            /* Headlines / dark sections                    */
  --ink-2: #15181a;
  --ink-3: #101315;
  --steel: #808080;
  --secondary: #bcbcbc;

  --bg: #f4f6f7;             /* page background (concrete white)             */
  --surface: #ffffff;        /* cards                                        */
  --surface-2: #eef1f3;      /* alt section / tinted card                    */

  --text: #1a1d1f;           /* strong text on light                         */
  --text-soft: #5b6266;      /* body text on light (AA on white)            */
  --on-dark: #f6f8f9;        /* text on dark sections                        */
  --on-dark-soft: #aeb8bc;   /* muted text on dark                           */

  --line-light: rgba(26, 29, 31, 0.1);
  --line-dark: rgba(246, 248, 249, 0.14);

  --shell: 1180px;
  --radius: 14px;
  --radius-lg: 22px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Brand font is Montserrat throughout (matches the live WordPress site).
     Display = heavy Montserrat for headings; label = Montserrat for eyebrows/buttons. */
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Montserrat', system-ui, sans-serif;
  --font-label: 'Montserrat', system-ui, sans-serif;
}

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

* {
  margin: 0;
}

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

/* Offset in-page anchors so the sticky header never covers section starts. */
[id] {
  scroll-margin-top: 88px;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a,
button {
  /* Snappier taps on mobile; intentional (not invisible) tap highlight. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(60, 206, 235, 0.25);
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
}

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

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

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

/* Accessibility helpers ---------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -120px;
  z-index: 200;
  background: var(--ink);
  color: var(--on-dark);
  padding: 12px 18px;
  border-radius: 0 0 12px 12px;
  font-weight: 700;
  transition: top 0.2s var(--ease);
}
.skip-link:focus {
  top: 0;
}

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

/* Skip-link target is focused programmatically; it isn't an interactive control,
   so don't draw a page-wide focus ring around <main>. */
#main-content:focus,
#main-content:focus-visible {
  outline: none;
}

/* Typography primitives ---------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary-deep);
  margin-bottom: 18px;
}
.eyebrow--light {
  color: var(--primary-bright);
}
.eyebrow__g {
  width: 18px;
  height: 18px;
}

.section {
  padding-block: clamp(72px, 11vw, 132px);
}

.section__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: 0.005em;
  max-width: 22ch;
  text-wrap: balance;
}

/* Buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease),
    background 0.2s var(--ease), color 0.2s var(--ease);
  will-change: transform;
}
.btn--lg {
  padding: 17px 32px;
  font-size: 0.92rem;
}
.btn--solid {
  background: var(--primary);
  color: var(--primary-ink);
  box-shadow: 0 12px 28px -12px rgba(60, 206, 235, 0.8);
}
.btn--solid:hover {
  background: var(--primary-bright);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -14px rgba(60, 206, 235, 0.95);
}
.btn--ghost {
  background: rgba(246, 248, 249, 0.1);
  color: var(--on-dark);
  border-color: var(--line-dark);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  background: rgba(246, 248, 249, 0.18);
  border-color: rgba(246, 248, 249, 0.28);
  transform: translateY(-2px);
}
.btn--outline {
  background: transparent;
  color: var(--on-dark);
  border-color: rgba(246, 248, 249, 0.5);
}
.btn--outline:hover {
  background: rgba(246, 248, 249, 0.1);
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}

/* Header ------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(26, 29, 31, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-dark);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  color: var(--on-dark);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.brand__logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}
.brand__logo--footer {
  width: 52px;
  height: 52px;
}
.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.18rem;
  line-height: 1;
  letter-spacing: 0.01em;
}
.brand__sub {
  display: block;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--primary-bright);
  margin-top: 5px;
}
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 22px;
}
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  color: var(--on-dark);
  transition: color 0.2s var(--ease);
}
.header-phone:hover {
  color: var(--primary-bright);
}
.header-phone__icon {
  color: var(--primary);
}

/* Hero --------------------------------------------------------------------- */
.hero {
  position: relative;
  background: #080a0c;
  color: var(--on-dark);
  overflow: hidden;
}
.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
      100deg,
      rgba(8, 10, 12, 0.9) 0%,
      rgba(8, 10, 12, 0.78) 38%,
      rgba(8, 10, 12, 0.45) 72%,
      rgba(8, 10, 12, 0.3) 100%
    );
}
@media (max-width: 940px) {
  .hero::before {
    background: linear-gradient(
        170deg,
        rgba(8, 10, 12, 0.86) 0%,
        rgba(8, 10, 12, 0.72) 45%,
        rgba(8, 10, 12, 0.55) 100%
      );
  }
}
/* Keep hero copy legible over the photo without darkening the image itself. */
.hero__content {
  text-shadow: 0 1px 14px rgba(8, 10, 12, 0.55);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(24px, 3vw, 34px) clamp(32px, 5vw, 72px);
  padding-block: clamp(48px, 8vw, 104px);
  position: relative;
  z-index: 2;
}
/* Copy and proof badges share one grid cell, spaced by this gap alone. */
.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
}
.hero__content {
  max-width: 640px;
  align-self: center;
}
.hero__headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.3rem, 5.4vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: 0.004em;
  margin: 22px 0 24px;
  text-wrap: balance;
}
.hero__headline-accent {
  color: var(--primary-bright);
  font-style: italic;
}
.hero__sub {
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  color: var(--on-dark-soft);
  max-width: 52ch;
  margin-bottom: 32px;
}
.hero__sub mark {
  background: linear-gradient(transparent 58%, rgba(60, 206, 235, 0.4) 58%);
  color: var(--on-dark);
  font-weight: 700;
  padding: 0 2px;
}
.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 28px;
}
.hero__proofs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
}
.hero__proofs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--on-dark);
}
.hero__proof-check {
  color: var(--primary-bright);
}
/* Force the emphasized badge onto its own line below the other two. */
.hero__proof--break {
  flex-basis: 100%;
}

/* Rating pill (social proof #1) */
.rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: rgba(246, 248, 249, 0.07);
  border: 1px solid var(--line-dark);
}
.rating-pill__top {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.rating-pill__stars {
  display: inline-flex;
  gap: 1px;
  color: var(--sand);
}
.rating-pill__text {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--on-dark);
}

/* Hero grain overlay */
.hero__grain,
.final-cta__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
}

/* Hero — compact split headline (quiz on the right) */
.hero--a .hero__headline {
  font-size: clamp(1.85rem, 3.2vw, 2.8rem);
  line-height: 1.12;
  margin: 18px 0 18px;
  max-width: 17ch;
}
.hero--a .hero__sub {
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  margin-bottom: 28px;
}

/* Hero entrance — staggered fade/rise on first paint (above the fold, so
   driven by animation rather than the scroll observer). */
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hero__content > .rating-pill,
.hero__headline,
.hero__sub,
.hero__cta-row,
.hero__proofs,
.hero__media,
.hero__form {
  animation: hero-rise 0.7s var(--ease) both;
}
.hero__content > .rating-pill { animation-delay: 0.05s; }
.hero__headline { animation-delay: 0.15s; }
.hero__sub { animation-delay: 0.27s; }
.hero__cta-row { animation-delay: 0.39s; }
.hero__proofs { animation-delay: 0.51s; }
.hero__media,
.hero__form { animation-delay: 0.32s; }

/* The accent phrase fades up a touch after the headline settles. */
.hero__headline-accent {
  display: inline-block;
  animation: hero-rise 0.6s var(--ease) both;
  animation-delay: 0.45s;
}

/* Hero video --------------------------------------------------------------- */
.hero-video {
  background:
    radial-gradient(circle at 15% 20%, rgba(60, 206, 235, 0.12), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
  padding-block: clamp(52px, 7vw, 84px);
}
.hero-video__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 5vw, 62px);
  align-items: center;
}
.hero-video__copy {
  max-width: 470px;
}
.hero-video__lead {
  color: var(--text-soft);
  margin-top: 18px;
}
.hero-video__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  background: var(--ink);
  border: 1px solid rgba(26, 29, 31, 0.12);
  box-shadow: 0 30px 70px -42px rgba(26, 29, 31, 0.55);
}
.hero-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Trust bar ---------------------------------------------------------------- */
.trustbar {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  color: var(--primary-ink);
}
.trustbar__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding-block: 30px;
}
.trustbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}
.trustbar__item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -9px;
  top: 12%;
  height: 76%;
  width: 1px;
  background: rgba(6, 50, 61, 0.22);
}
.trustbar__stat {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  line-height: 1.05;
}
.trustbar__label {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 8px;
  color: rgba(6, 50, 61, 0.78);
}

/* Benefits ----------------------------------------------------------------- */
.benefits {
  background: var(--bg);
}
.benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 52px;
}
.benefit-card {
  background: var(--surface);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  padding: 34px 30px 36px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.benefit-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.benefit-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -28px rgba(26, 29, 31, 0.35);
  border-color: rgba(60, 206, 235, 0.55);
}
.benefit-card:hover::before {
  transform: scaleX(1);
}
.benefit-card__kicker {
  display: inline-block;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary-deep);
  margin-bottom: 16px;
}
.benefit-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.2;
  margin-bottom: 12px;
}
.benefit-card__body {
  color: var(--text-soft);
  font-size: 1rem;
}

/* Before / After comparison slider ----------------------------------------- */
.benefits__compare {
  margin-top: 56px;
  text-align: center;
}
.benefits__compare-label {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary-deep);
  margin-bottom: 16px;
}
.ba {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 380px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  /* Layered depth + a faint brand-cyan ring/glow so it reads on the dark hero. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 28px 60px -24px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(60, 206, 235, 0.14),
    0 0 60px -14px rgba(60, 206, 235, 0.22);
  /* pan-y, never none: `none` tells the browser to perform no panning at all for
     gestures starting here, which trapped vertical scrolling on touch devices.
     pan-y lets the page scroll through while horizontal drags still compare. */
  touch-action: pan-y;
  user-select: none;
  background: var(--ink-2);
}
/* Bevel/frame overlay — bright top edge, sunken bottom, so the image reads as a
   raised, framed panel (subtle 3D depth). */
.ba::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 -22px 44px -20px rgba(0, 0, 0, 0.55);
}
.ba__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.ba__before {
  z-index: 2;
  will-change: clip-path;
}
.ba__tag {
  position: absolute;
  bottom: 16px;
  z-index: 3;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(16, 19, 21, 0.62);
  backdrop-filter: blur(4px);
  padding: 7px 14px;
  border-radius: 999px;
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
}
.ba__tag--before {
  left: 16px;
}
.ba__tag--after {
  right: 16px;
}
.ba__handle {
  touch-action: none;
  cursor: ew-resize;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
  width: 3px;
  background: rgba(255, 255, 255, 0.9);
  transform: translateX(-50%);
  box-shadow: 0 0 0 1px rgba(16, 19, 21, 0.25);
  cursor: ew-resize;
}
.ba__handle:focus-visible {
  outline: none;
}
.ba__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--primary-ink);
  background: #fff;
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.7);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.ba__handle:hover .ba__grip,
.ba__handle:focus-visible .ba__grip {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 0 0 4px rgba(60, 206, 235, 0.4), 0 8px 22px -8px rgba(0, 0, 0, 0.7);
}

/* Before / After showcase (filmstrip) -------------------------------------- */
.ba-show {
  max-width: 1040px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
.ba-film {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.ba .ba__img { transition: none; }

.ba-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.ba-thumb {
  position: relative;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: var(--ink-2);
  aspect-ratio: 16 / 9;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.ba-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.7;
  transition: opacity 0.2s var(--ease);
}
.ba-thumb:hover { transform: translateY(-2px); border-color: var(--primary); }
.ba-thumb:hover img { opacity: 1; }

@media (max-width: 720px) {
  .ba-thumbs {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Why our system (4-layer comparison) -------------------------------------- */
.system {
  background: var(--bg);
}
.system__lead {
  margin-top: 14px;
  max-width: 56ch;
  color: var(--text-soft);
  font-size: 1.05rem;
}
.system__compare {
  margin-top: 48px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  background: #06080a;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 36px 80px -40px rgba(0, 0, 0, 0.8);
}
.system-card {
  margin: 0;
  min-width: 0;
  display: flex;
}
.system-card__img {
  width: 100%;
  height: auto;
  display: block;
}
/* The two comparison images have their titles baked in at slightly different
   heights. Raise the competitor (left) image so its title lines up with the
   right card's title. Only applies in the side-by-side (desktop) layout. */
@media (min-width: 761px) {
  .system-card--bad .system-card__img {
    transform: translateY(-3.3%);
  }
}
/* Glowing "VS" divider that splits the black panel. */
.system__vs {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(54px, 7vw, 92px);
}
.system__vs::before {
  content: '';
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(173, 216, 240, 0.35) 18%,
    rgba(173, 216, 240, 0.35) 82%,
    transparent
  );
}
.system__vs span {
  position: relative;
  z-index: 1;
  padding: 16px 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: 0.04em;
  color: #f4fbff;
  background: radial-gradient(closest-side, #06080a 60%, transparent);
  text-shadow:
    0 0 10px rgba(150, 220, 250, 0.95),
    0 0 24px rgba(60, 206, 235, 0.7),
    0 0 44px rgba(60, 206, 235, 0.4);
}
.system__features {
  margin-top: 38px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.system-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.system-feature__icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--primary-deep);
}
.system-feature__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 4px;
}
.system-feature__desc {
  color: var(--text-soft);
  font-size: 0.92rem;
}
.system__cta {
  margin-top: 38px;
  text-align: center;
}
@media (max-width: 760px) {
  .system__compare {
    grid-template-columns: 1fr;
  }
  .system__vs {
    width: auto;
    height: clamp(54px, 15vw, 82px);
  }
  .system__vs::before {
    top: 50%;
    bottom: auto;
    left: 8%;
    right: 8%;
    width: auto;
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(
      to right,
      transparent,
      rgba(173, 216, 240, 0.35) 18%,
      rgba(173, 216, 240, 0.35) 82%,
      transparent
    );
  }
  .system__features {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 18px;
  }
}
@media (max-width: 460px) {
  .system__features {
    grid-template-columns: 1fr;
  }
}

/* Process ------------------------------------------------------------------ */
.process {
  background: var(--ink-2);
  color: var(--on-dark);
}
.process .eyebrow {
  color: var(--primary-bright);
}
.process .section__title {
  color: var(--on-dark);
}
.process__lead {
  margin-top: 14px;
  max-width: 620px;
  color: var(--on-dark-soft);
  font-size: 1.02rem;
}

/* Process step cards */
.pcards {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
/* Full-bleed image card: photo fills the square, number badge in the corner,
   caption overlaid on a bottom gradient. */
.pcard {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.pcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4);
}
.pcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Darkening gradient so the overlaid caption stays legible on any photo. */
.pcard::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.72) 24%,
    rgba(0, 0, 0, 0.12) 52%,
    transparent 72%
  );
  pointer-events: none;
}
.pcard__num {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--primary);
  color: var(--primary-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
}
.pcard__overlay {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 22px 24px;
}
.pcard__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
}
.pcard__title::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  margin: 11px 0 12px;
  border-radius: 2px;
  background: var(--primary);
}
.pcard__body {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
  line-height: 1.45;
}

/* Process step cards — responsive */
@media (max-width: 940px) {
  .pcards {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .pcards {
    grid-template-columns: 1fr;
  }
}

/* Services ----------------------------------------------------------------- */
.services {
  background: var(--ink);
  color: var(--on-dark);
}
.services .section__title {
  color: var(--on-dark);
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 52px;
}
.service-card {
  background: var(--surface);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 26px 26px 28px;
  color: var(--text);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -26px rgba(26, 29, 31, 0.4);
}
.service-card__icon {
  color: var(--primary-deep);
  background: rgba(60, 206, 235, 0.14);
  border-radius: 9px;
  padding: 7px;
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
}
.service-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.16rem;
  margin-bottom: 8px;
}
.service-card__desc {
  color: var(--text-soft);
  font-size: 0.96rem;
}

/* Gallery ------------------------------------------------------------------ */
.gallery {
  background: var(--surface-2);
}
.gallery__grid {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.gallery__item {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line-light);
  box-shadow: 0 16px 36px -26px rgba(26, 29, 31, 0.5);
}
.gallery__btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  position: relative;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease);
}
.gallery__logo {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(28px, 3vw, 38px);
  height: clamp(28px, 3vw, 38px);
  padding: 3px;
  border-radius: 8px;
  background: rgba(8, 10, 12, 0.52);
  box-shadow: 0 10px 26px -16px rgba(0, 0, 0, 0.75);
  pointer-events: none;
}
.gallery__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: none;
}
.gallery__location {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  max-width: calc(100% - 82px);
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(8, 10, 12, 0.62);
  color: var(--on-dark);
  font-family: var(--font-label);
  font-size: clamp(0.72rem, 1.3vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 10px 26px -18px rgba(0, 0, 0, 0.75);
  pointer-events: none;
}
.gallery__item:hover img,
.gallery__btn:focus-visible img {
  transform: scale(1.06);
}
.gallery__item:hover .gallery__logo img,
.gallery__btn:focus-visible .gallery__logo img {
  transform: none;
}
.gallery__zoom {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--on-dark);
  background: rgba(16, 19, 21, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.gallery__item:hover .gallery__zoom,
.gallery__btn:focus-visible .gallery__zoom {
  opacity: 1;
  transform: translateY(0);
}
.gallery__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
}

/* Lightbox ----------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(8px, 2vw, 24px);
  padding: clamp(16px, 4vw, 48px);
  background: rgba(8, 10, 12, 0.86);
  backdrop-filter: blur(6px);
  animation: lightbox-in 0.2s var(--ease);
}
@keyframes lightbox-in {
  from {
    opacity: 0;
  }
}
.lightbox__figure {
  grid-column: 2;
  margin: 0;
  justify-self: center;
  max-width: min(100%, 1080px);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  position: relative;
}
.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
  animation: lightbox-zoom 0.25s var(--ease);
}
.lightbox__logo {
  position: absolute;
  right: clamp(14px, 2vw, 22px);
  bottom: 58px;
  display: grid;
  place-items: center;
  width: clamp(34px, 4vw, 49px);
  height: clamp(34px, 4vw, 49px);
  padding: 4px;
  border-radius: 9px;
  background: rgba(8, 10, 12, 0.52);
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}
.lightbox__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@keyframes lightbox-zoom {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}
.lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 14px;
  color: var(--on-dark-soft);
  font-size: 0.92rem;
  text-align: center;
}
.lightbox__count {
  font-family: var(--font-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--on-dark);
}
.lightbox__close,
.lightbox__nav {
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  color: var(--on-dark);
  background: rgba(246, 248, 249, 0.1);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(246, 248, 249, 0.22);
}
.lightbox__close {
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
}
.lightbox__nav {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
}
.lightbox__nav svg {
  width: 26px;
  height: 26px;
}
.lightbox__nav--prev {
  grid-column: 1;
}
.lightbox__nav--prev svg {
  transform: rotate(90deg);
}
.lightbox__nav--next {
  grid-column: 3;
}
.lightbox__nav--next svg {
  transform: rotate(-90deg);
}
@media (max-width: 680px) {
  .lightbox__nav {
    width: 44px;
    height: 44px;
  }
  .lightbox__img {
    max-height: 70vh;
  }
}

/* Team --------------------------------------------------------------------- */
.team {
  background:
    linear-gradient(180deg, rgba(246, 248, 249, 0.96), rgba(255, 255, 255, 0.98)),
    radial-gradient(70% 90% at 12% 18%, rgba(60, 206, 235, 0.18), transparent 62%);
}
.team__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
  align-items: center;
  gap: clamp(28px, 5vw, 68px);
}
.team__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  min-height: clamp(310px, 42vw, 500px);
  border: 1px solid var(--line-light);
  box-shadow: 0 30px 70px -42px rgba(26, 29, 31, 0.58);
}
.team__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(8, 10, 12, 0.34));
  pointer-events: none;
}
.team__img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
  display: block;
}
.team__content {
  max-width: 620px;
}
.team__lead {
  margin-top: 20px;
  color: var(--text);
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.65;
}
.team__copy {
  margin-top: 18px;
  color: var(--text-soft);
  line-height: 1.7;
}
.team__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 30px;
}
.team__stats span {
  min-height: 94px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 16px 14px;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-soft);
  font-size: 0.86rem;
  font-weight: 700;
  text-transform: uppercase;
}
.team__stats strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1;
  text-transform: none;
}
@media (max-width: 940px) {
  .team__inner {
    grid-template-columns: 1fr;
  }
  .team__content {
    max-width: 760px;
  }
}
@media (max-width: 560px) {
  .team__media {
    min-height: 300px;
  }
  .team__stats {
    grid-template-columns: 1fr;
  }
  .team__stats span {
    min-height: 76px;
  }
}

/* Testimonials ------------------------------------------------------------- */
.testimonials {
  background: var(--surface-2);
}
.testimonials__link {
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
  color: var(--primary);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 2px solid rgba(213, 155, 58, 0.45);
}
.testimonials__link:hover,
.testimonials__link:focus-visible {
  color: var(--accent);
  border-bottom-color: currentColor;
}
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 52px;
}
.review-card {
  background: var(--surface);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  color: var(--text);
  box-shadow: 0 18px 40px -28px rgba(26, 29, 31, 0.45);
}
.review-card__stars {
  display: flex;
  gap: 2px;
  color: var(--sand);
  margin-bottom: 16px;
}
.review-card__quote {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1.28;
  margin-bottom: 12px;
}
.review-card__body {
  color: var(--text-soft);
  font-size: 0.98rem;
  flex-grow: 1;
}
.review-card__author {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-light);
}
.review-card__avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--primary-bright), var(--accent));
  color: var(--primary-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
}
.review-card__name {
  font-weight: 700;
  font-size: 0.92rem;
  flex-grow: 1;
}

/* FAQ ---------------------------------------------------------------------- */
.faq {
  background: var(--surface-2);
}
.faq__list {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.faq-item--open {
  border-color: rgba(60, 206, 235, 0.6);
  box-shadow: 0 14px 36px -26px rgba(26, 29, 31, 0.45);
}
.faq-item__heading {
  margin: 0;
}
.faq-item__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1.06rem;
  font-weight: 700;
  text-align: left;
  color: var(--text);
}
.faq-item__chevron {
  flex-shrink: 0;
  color: var(--primary-deep);
  transition: transform 0.3s var(--ease);
}
.faq-item--open .faq-item__chevron {
  transform: rotate(180deg);
}
.faq-item__panel {
  padding: 0 24px 24px;
  color: var(--text-soft);
}

/* Final CTA ---------------------------------------------------------------- */
.final-cta {
  position: relative;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(60, 206, 235, 0.26), transparent 60%),
    linear-gradient(180deg, rgba(16, 19, 21, 0.74) 0%, rgba(8, 10, 12, 0.86) 100%),
    image-set(url('/images/hero-plate-1000.webp') type('image/webp'), url('/images/our-work-5.jpg') type('image/jpeg'))
      center 60% / cover no-repeat;
  color: var(--on-dark);
  overflow: hidden;
  text-align: center;
}
.final-cta__inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
}
.final-cta__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.08;
  margin-bottom: 20px;
  text-wrap: balance;
}
.final-cta__sub {
  font-size: 1.1rem;
  color: var(--on-dark-soft);
  max-width: 54ch;
  margin: 0 auto 32px;
}
.final-cta__row {
  justify-content: center;
  margin-bottom: 30px;
}
.final-cta__proofs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 26px;
}
.final-cta__proofs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
}
.final-cta__check {
  color: var(--primary-bright);
}

/* Footer ------------------------------------------------------------------- */
.footer {
  background: var(--ink-3);
  color: var(--on-dark-soft);
  padding-top: 56px;
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 40px;
}
.footer__brand {
  display: flex;
  gap: 14px;
  align-items: center;
}
.footer__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--on-dark);
  letter-spacing: 0.01em;
}
.footer__line {
  font-size: 0.92rem;
}
.footer__address-line {
  display: block;
}
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer__contact a {
  font-weight: 700;
  color: var(--on-dark);
  transition: color 0.2s var(--ease);
}
.footer__contact a:hover {
  color: var(--primary-bright);
}
.footer__legal {
  border-top: 1px solid var(--line-dark);
  padding-block: 22px;
  font-size: 0.82rem;
}

/* Before/after showcase embedded in the hero */
.hero__media {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
/* Soft brand-cyan backlight so the frame lifts off the dark hero. */
.hero__media::before {
  content: '';
  position: absolute;
  inset: 2% -5% 6% -5%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(58% 50% at 68% 30%, rgba(60, 206, 235, 0.28), transparent 72%);
  filter: blur(34px);
  animation: ba-glow 6s var(--ease) infinite;
}
@keyframes ba-glow {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.hero__media-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary-bright);
  text-align: center;
  margin-bottom: 14px;
}

/* Quiz funnel -------------------------------------------------------------- */
/* Inline embed (hero) */
.hero__form {
  width: 100%;
}
.quiz--inline {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  color: var(--text);
  box-shadow: 0 40px 80px -32px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.quiz--inline .quiz__body {
  padding: clamp(22px, 3vw, 30px);
  min-height: 308px;
}

.quiz-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: clamp(12px, 4vw, 32px);
  background: rgba(16, 19, 21, 0.72);
  backdrop-filter: blur(8px);
  animation: quiz-fade 0.25s var(--ease);
}
@keyframes quiz-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.quiz {
  width: 100%;
  max-width: 600px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.6);
  outline: none;
  animation: quiz-pop 0.3s var(--ease);
}
@keyframes quiz-pop {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.quiz__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 0;
}
.quiz__back {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--text-soft);
  padding: 4px 2px;
  transition: color 0.2s var(--ease);
}
.quiz__back:hover {
  color: var(--primary-deep);
}
.quiz__close {
  margin-left: auto;
  background: var(--surface-2);
  border: none;
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 0.9rem;
  color: var(--text-soft);
  display: grid;
  place-items: center;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.quiz__close:hover {
  background: #e2e6e8;
  color: var(--text);
}
.quiz__bar {
  height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  margin: 14px 22px 0;
  overflow: hidden;
}
.quiz__bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 0.4s var(--ease);
}
.quiz__body {
  padding: clamp(22px, 4vw, 38px);
}
.quiz__eyebrow {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-deep);
  margin-bottom: 12px;
}
.quiz__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.45rem, 3.6vw, 1.9rem);
  line-height: 1.15;
  color: var(--text);
}
.quiz__title--q {
  margin-bottom: 8px;
}
.quiz__sub {
  margin-top: 12px;
  color: var(--text-soft);
  font-size: 0.98rem;
}
.quiz__cta {
  width: 100%;
  margin-top: 24px;
}

/* Intro */
.quiz-intro__list {
  margin-top: 22px;
  display: grid;
  gap: 12px;
}
.quiz-intro__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.96rem;
}
.quiz-intro__check {
  color: var(--primary-deep);
  flex-shrink: 0;
}
.quiz-intro__proof {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.84rem;
  color: var(--text-soft);
  font-weight: 600;
}
.quiz-intro__stars {
  display: inline-flex;
  gap: 1px;
  color: var(--sand);
}

/* Questions */
.quiz-options {
  margin-top: 24px;
  display: grid;
  gap: 12px;
}
.quiz-options--swatch {
  grid-template-columns: 1fr 1fr;
}
.quiz-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1.5px solid var(--line-light);
  border-radius: var(--radius);
  padding: 16px 18px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease),
    transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.quiz-option:hover {
  border-color: var(--primary);
  background: rgba(60, 206, 235, 0.06);
  transform: translateY(-2px);
}
.quiz-option--sel {
  border-color: var(--primary);
  background: rgba(60, 206, 235, 0.1);
  box-shadow: 0 0 0 3px rgba(60, 206, 235, 0.18);
}
.quiz-option__swatch {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.quiz-option__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-grow: 1;
}
.quiz-option__label {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}
.quiz-option__hint {
  font-size: 0.82rem;
  color: var(--text-soft);
}
.quiz-option__tick {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  background: var(--primary);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.quiz-option--sel .quiz-option__tick {
  opacity: 1;
  transform: scale(1);
}

/* Capture form */
.quiz-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.quiz-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
}
.quiz-field label {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text);
}
.quiz-field input,
.quiz-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 14px;
  border: 1.5px solid var(--line-light);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.quiz-field textarea {
  resize: vertical;
  min-height: 76px;
}
.quiz-field input:focus,
.quiz-field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(60, 206, 235, 0.18);
}
.quiz-field input[aria-invalid='true'] {
  border-color: #e05656;
}
.quiz-field__optional {
  font-weight: 500;
  color: var(--text-soft);
}
.quiz-field__err {
  font-size: 0.78rem;
  color: #c33;
  font-weight: 600;
}
.quiz-form__error {
  margin-top: 16px;
  padding: 11px 13px;
  border: 1px solid rgba(195, 51, 51, 0.35);
  border-radius: 10px;
  background: rgba(195, 51, 51, 0.08);
  color: #9f2929;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
}
.quiz-form__error a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.quiz__cta:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}
.quiz-form__fine {
  margin-top: 14px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-soft);
}

/* Done */
.quiz-done {
  text-align: center;
}
.quiz-done__badge {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 12px 28px -10px rgba(60, 206, 235, 0.7);
}
.quiz-summary {
  margin-top: 22px;
  display: grid;
  gap: 1px;
  background: var(--line-light);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: left;
}
.quiz-summary li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface-2);
}
.quiz-summary__key {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.quiz-summary__val {
  font-weight: 700;
  color: var(--text);
  text-align: right;
}

@media (max-width: 480px) {
  .quiz-options--swatch {
    grid-template-columns: 1fr;
  }
  .quiz-form__row {
    grid-template-columns: 1fr;
  }
}

/* Scroll reveal ------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal--in {
  opacity: 1;
  transform: none;
}

/* Responsive --------------------------------------------------------------- */
@media (max-width: 940px) {
  .hero__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      'copy'
      'form'
      'reassure';
  }
  /* Dissolve the wrapper so the form can sit between the copy and the badges. */
  .hero__copy {
    display: contents;
  }
  .hero__content { grid-area: copy; }
  .hero__form { grid-area: form; }
  .hero__reassure { grid-area: reassure; }
  .hero-video__inner {
    grid-template-columns: 1fr;
  }
  .hero-video__copy {
    max-width: 680px;
  }
  .hero__form,
  .hero__media {
    max-width: 560px;
    margin-inline: auto;
  }
  .hero__media {
    height: auto;
  }
  /* Stacked layout: go back to a natural 16:9 frame instead of filling height. */
  .ba-show,
  .ba-film,
  .ba {
    flex: none;
  }
  .ba {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  .benefits__grid,
  .services__grid,
  .testimonials__grid,
  .gallery__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  body {
    font-size: 16px;
  }
  .site-header__inner {
    height: 66px;
  }
  .header-phone span {
    display: none;
  }
  .brand__name {
    display: none;
  }
  .site-header__actions {
    gap: 12px;
  }
  .site-header__actions .btn {
    padding: 11px 16px;
    font-size: 0.76rem;
    white-space: nowrap;
  }
  .trustbar__inner {
    grid-template-columns: 1fr 1fr;
    gap: 26px 18px;
  }
  .trustbar__item:nth-child(2)::after {
    display: none;
  }
  .benefits__grid,
  .services__grid,
  .testimonials__grid {
    grid-template-columns: 1fr;
  }
  .hero__cta-row .btn,
  .final-cta__row .btn {
    flex: 1 1 100%;
  }

  /* Hero: center the copy on phones; the before/after stacks below it. */
  .hero__grid {
    text-align: center;
  }
  .hero--a .hero__headline {
    font-size: clamp(2.3rem, 8.5vw, 3rem);
    line-height: 1.08;
    max-width: none;
    margin-inline: auto;
  }
  .hero__sub {
    margin-inline: auto;
  }
  .hero__cta-row,
  .hero__proofs {
    justify-content: center;
  }
  /* The full-width badge spans 100%, so center its content to match the rest. */
  .hero__proof--break {
    justify-content: center;
  }
  .rating-pill {
    flex-direction: column;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding: 9px 20px;
    gap: 5px;
  }
  .rating-pill__text {
    font-size: 0.74rem;
    line-height: 1.2;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  /* Cancel the hero entrance entirely — animation-delay would otherwise hold
     elements at opacity 0 until each delay elapsed. */
  .hero__content > .rating-pill,
  .hero__headline,
  .hero__headline-accent,
  .hero__sub,
  .hero__cta-row,
  .hero__proofs,
  .hero__media,
  .hero__form {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* =========================================================================
   Conversion pass — inline hero funnel, standalone before/after, sticky
   mobile action bar, and mid-page CTAs.
   ========================================================================= */

/* Light-background outline button (the existing .btn--outline is white-on-dark). */
.btn--line {
  background: transparent;
  color: var(--text);
  border-color: rgba(26, 29, 31, 0.22);
}
.btn--line:hover {
  background: rgba(26, 29, 31, 0.05);
  border-color: rgba(26, 29, 31, 0.4);
  transform: translateY(-2px);
}

/* Hero — the form now occupies the right column, so the copy column carries
   the phone route instead of a second button. */
.hero__proofs {
  margin-bottom: 22px;
}
.hero__callout {
  font-size: 0.95rem;
  color: var(--on-dark);
  text-shadow: 0 1px 12px rgba(8, 10, 12, 0.8);
}
.hero__callout a {
  color: var(--primary-bright);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.hero__form {
  align-self: center;
}

/* Before / after, promoted out of the hero into its own section. */
.ba-section {
  background: var(--surface-2);
}
.ba-section__lead {
  margin-top: 14px;
  max-width: 54ch;
  color: var(--text-soft);
  font-size: 1.05rem;
}
.ba-section__media {
  margin-top: 40px;
}
/* Standalone context: natural 16:9, and a frame that reads on a light ground. */
.ba-section .ba {
  flex: none;
  aspect-ratio: 16 / 9;
  min-height: 0;
  border-color: rgba(26, 29, 31, 0.12);
  box-shadow:
    0 30px 60px -30px rgba(16, 19, 21, 0.5),
    0 0 0 1px rgba(26, 29, 31, 0.06);
}
.ba-section .ba::after {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.ba-section .ba-thumb img {
  opacity: 0.86;
}

/* Mid-page CTA band, used after the reviews. */
.section__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 48px;
}

/* Sticky mobile action bar ------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(20, 23, 25, 0.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-dark);
  transform: translateY(110%);
  transition: transform 0.28s var(--ease);
}
.sticky-cta--in {
  transform: none;
}
.sticky-cta__call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 34%;
  padding: 15px 12px;
  border-radius: 10px;
  border: 1.5px solid rgba(246, 248, 249, 0.28);
  background: rgba(246, 248, 249, 0.08);
  color: var(--on-dark);
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sticky-cta__icon {
  width: 17px;
  height: 17px;
  color: var(--primary-bright);
}
.sticky-cta__quote {
  flex: 1;
  padding: 15px 12px;
  font-size: 0.86rem;
}

@media (max-width: 940px) {
  .sticky-cta {
    display: flex;
  }
  /* Keep the bar from covering the last of the footer. */
  body {
    padding-bottom: 78px;
  }
  .hero__callout {
    text-align: center;
  }
  .ba-section__lead {
    margin-inline: auto;
  }
}

/* Four thumbnails stay on one row inside the standalone section. */
@media (max-width: 720px) {
  .ba-section .ba-thumbs {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
}

/* Hero stack on phones: trim the vertical run so question one is in the first
   screen rather than a swipe below it. */
@media (max-width: 680px) {
  .hero__grid {
    padding-block: 30px 44px;
    gap: 20px;
  }
  .hero--a .hero__headline {
    font-size: clamp(2rem, 7.6vw, 2.5rem);
    margin: 14px 0 12px;
  }
  .hero__sub {
    font-size: 0.98rem;
    margin-bottom: 0;
  }
  .hero__proofs {
    gap: 10px 18px;
    margin-bottom: 14px;
  }
  .hero__proofs li {
    font-size: 0.88rem;
  }
  .quiz--inline .quiz__body {
    min-height: 0;
  }
}


/* Phones: the page ran ~19 screens, which is why almost nobody reached the
   proof sections. Tighten the vertical rhythm without touching desktop. */
@media (max-width: 680px) {
  .section {
    padding-block: 56px;
  }
  .ba-section__media,
  .system__compare,
  .services__grid,
  .gallery__grid,
  .testimonials__grid {
    margin-top: 28px;
  }
  .section__cta,
  .system__cta,
  .gallery__cta {
    margin-top: 28px;
  }
  .pcards,
  .team__inner {
    gap: 18px;
  }
}

/* Grid tracks size to min-content by default, and the Phone/ZIP input row has a
   wide intrinsic minimum, so the hero column was blowing past the shell padding
   and the card hung off the right edge. Also re-declares the inline card width:
   the base `.quiz` rule is later in the file and was overriding `.quiz--inline`. */
.hero__grid > * {
  min-width: 0;
}
.quiz-form__row,
.quiz-field {
  min-width: 0;
}
.quiz-field input,
.quiz-field textarea {
  width: 100%;
  min-width: 0;
}
.quiz.quiz--inline {
  max-width: 470px;
}

/* Autofill: Chrome and Safari paint their own background over the field, which
   loses the border treatment and can drop contrast. Keep the field looking like
   the rest of the form while still reading as filled. */
.quiz-field input:-webkit-autofill,
.quiz-field input:-webkit-autofill:hover,
.quiz-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 40px var(--surface) inset;
  box-shadow: 0 0 0 40px var(--surface) inset;
  border-color: var(--primary-deep);
  caret-color: var(--text);
  transition: background-color 9999s ease-out;
}

/* =========================================================================
   Hero + card polish
   ========================================================================= */

@media (min-width: 941px) {
  .hero--a .hero__sub {
    margin-bottom: 0;
  }
  .hero__proofs {
    margin-bottom: 12px;
  }
}

/* Card: one heading, not two. Trims the dead vertical run. */
.quiz-q__trust {
  margin-top: 18px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-soft);
}
.quiz.quiz--inline .quiz__body {
  padding: clamp(20px, 2.4vw, 26px);
  min-height: 0;
}
.quiz--inline .quiz__title--q {
  font-size: clamp(1.3rem, 1.9vw, 1.55rem);
  line-height: 1.18;
}
.quiz--inline .quiz-options {
  margin-top: 16px;
}

@media (max-width: 680px) {
  /* Keep the accent phrase on one line — it read as a broken three-line stack. */
  .hero--a .hero__headline {
    font-size: clamp(1.75rem, 6.4vw, 2.25rem);
    margin: 12px 0 10px;
  }
  .hero__headline-accent {
    white-space: nowrap;
  }
  .hero__sub {
    font-size: 0.95rem;
  }
  .quiz-q__trust {
    margin-top: 14px;
    font-size: 0.74rem;
  }
}

/* The inline card must never become its own scroll container. `.quiz` caps its
   height and sets `overscroll-behavior: contain` because it was written for the
   modal, where trapping the scroll is correct. Inline in the hero that is the
   same bug as `touch-action: none` on the before/after slider: once the card
   overflows — the contact step on a short phone — a swipe that starts on it
   scrolls the card to its end and then stops dead instead of moving the page. */
.quiz.quiz--inline {
  max-height: none;
  overflow: visible;
  overscroll-behavior: auto;
}

/* Headline line structure: plain clause on line one, accent clause on line two.
   As an inline-block the accent wrapped mid-phrase, which stranded "5-Star" on
   its own line in one variant and ran "Floor" straight into "You'll" in the
   other. Sizes below keep the longest clause of either variant on one line from
   320px up. */
.hero__headline-accent {
  display: block;
}
.hero--a .hero__headline {
  max-width: 24ch;
  font-size: clamp(1.8rem, 2.9vw, 2.45rem);
}
@media (max-width: 680px) {
  .hero--a .hero__headline {
    /* Floor is set by the longest clause of either variant at 320px, so both
       headlines stay two lines on every phone width. */
    font-size: clamp(1.35rem, 6.8vw, 2.2rem);
    max-width: none;
  }
  .hero__headline-accent {
    white-space: normal;
  }
}