/* Landeros Roofing — the logo's royal blue on deep navy */

:root {
  --black: #060b16;
  --panel: #0b1426;
  --panel-2: #111d34;
  --maroon: #0c2248;
  --red-deep: #0a4fb8;
  --red: #2a78ee;
  --red-lit: #9cc3ff;
  --ice: #c8d4e6;
  --chrome: #f5f8fd;
  --text: #e7edf7;
  --muted: #95a3ba;
  --line: rgba(255, 255, 255, 0.2);
  --line-soft: rgba(160, 185, 225, 0.15);

  --display: 'Exo 2', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shell: 1180px;
  --gutter: clamp(1.1rem, 4vw, 2rem);
  --radius: 14px;
  --header-h: 76px;
  --ease: cubic-bezier(0.22, 0.8, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font-family: var(--body);
  font-size: 1.02rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.menu-open { overflow: hidden; }

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

a { color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: balance;
}

h1 em, h2 em {
  font-style: italic;
  background: linear-gradient(100deg, #ffffff 0%, var(--red-lit) 40%, var(--red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.12em; /* italic overhang would clip under background-clip */
}

p { margin: 0; }

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

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  background: var(--red);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 8px;
}
.skip-link:focus { top: 1rem; }

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

/* --- Buttons ------------------------------------------------------------ */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 46px;
  padding: 0.7rem 1.3rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s, border-color 0.2s;
}

.button svg {
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.button-lg { min-height: 54px; padding: 0.85rem 1.6rem; font-size: 1.08rem; }

.button-red {
  background: linear-gradient(180deg, #ffffff 0%, var(--red) 100%);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset, 0 8px 28px -8px rgba(255, 255, 255, 0.9);
}
.button-red:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 12px 34px -8px rgba(255, 255, 255, 0.95);
}

.button-outline {
  border-color: rgba(185, 188, 196, 0.45);
  color: var(--chrome);
  background: rgba(19, 19, 22, 0.5);
}
.button-outline:hover { border-color: var(--red-lit); color: #fff; transform: translateY(-2px); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--red-lit);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 2px;
}
.text-link svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s var(--ease); }
.text-link:hover svg { transform: translateX(4px); }

/* --- Header ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--header-h);
}

.brand { display: block; flex: none; }
.brand img { height: 68px; width: auto; }

.desktop-nav {
  display: flex;
  gap: clamp(1rem, 2.4vw, 2rem);
  margin-left: auto;
}
.desktop-nav a {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ice);
  padding: 0.4rem 0;
  transition: color 0.2s;
}
.desktop-nav a:hover { color: #fff; }

.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  margin-left: auto;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px auto;
  background: var(--chrome);
  transition: transform 0.25s var(--ease), opacity 0.2s;
}
.menu-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.6rem var(--gutter) 1.4rem;
  background: var(--black);
  border-bottom: 1px solid var(--line);
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a:not(.button) {
  padding: 0.9rem 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.3rem;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-menu .button { margin-top: 1rem; }

/* --- Video toggle ------------------------------------------------------ */

.video-toggle {
  position: absolute;
  z-index: 3;
  top: 0.7rem;
  right: 0.7rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(228, 236, 240, 0.4);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.video-toggle:hover { background: var(--red); border-color: var(--red-lit); }
.video-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.video-toggle .icon-play { fill: currentColor; stroke-width: 1; display: none; }
.video-toggle.is-paused .icon-play { display: block; }
.video-toggle.is-paused .icon-pause { display: none; }

/* --- Sections ----------------------------------------------------------- */

.section { padding: clamp(3.6rem, 8vw, 6.4rem) 0; }

.section-panel {
  background:
    linear-gradient(180deg, var(--black) 0%, var(--panel) 12%, var(--panel) 88%, var(--black) 100%);
}

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head > p:last-child { margin-top: 1rem; color: var(--muted); font-size: 1.08rem; max-width: 38rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--red-lit);
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--red-lit));
  box-shadow: 0 0 10px var(--red-lit);
}

h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); }

.lead { margin-top: 1.1rem; color: var(--muted); font-size: 1.08rem; max-width: 34rem; }

.sub-head {
  margin: clamp(2.6rem, 5vw, 3.6rem) 0 1.2rem;
  font-size: 1.35rem;
  font-weight: 700;
}

/* --- Services ----------------------------------------------------------- */

.services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: start;
}

.service-card {
  position: relative;
  padding: 1.8rem 1.6rem 1.7rem;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  transition: border-color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s;
}
.service-card:hover {
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-4px);
  box-shadow: 0 20px 50px -24px rgba(255, 255, 255, 0.9);
}
.service-card.is-featured {
  border-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, #131416, var(--panel));
}

.service-flag {
  position: absolute;
  top: -0.7rem;
  right: 1.2rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.service-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 1.1rem;
  fill: none;
  stroke: var(--red-lit);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
}

.service-card h3 { font-size: 1.5rem; }
.service-card > p { margin-top: 0.6rem; color: var(--muted); }

.check-list { margin-top: 1.2rem; display: grid; gap: 0.55rem; }
.check-list li {
  position: relative;
  padding-left: 1.8rem;
  color: var(--text);
  font-weight: 500;
}
.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.22em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 72% no-repeat,
    var(--red);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

.check-list-lg { margin-top: 1.7rem; gap: 1rem; }
.check-list-lg li { color: var(--muted); font-weight: 400; }
.check-list-lg strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}

.services-note { margin-top: 1.8rem; color: var(--muted); }
.services-note a { color: var(--red-lit); font-weight: 600; }

/* --- Split -------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.4rem);
}
.split-media {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -30px rgba(255, 255, 255, 0.8);
}

/* --- Steps -------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  counter-reset: none;
}
.steps li {
  position: relative;
  padding: 1.5rem 1.4rem 1.6rem;
  border-top: 2px solid var(--red);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 70%);
}
.step-num {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: 3.4rem;
  line-height: 1;
  background: linear-gradient(180deg, #ffffff, #c9c9d0 45%, var(--red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.15em;
  width: max-content;
}
.steps h3 { margin-top: 0.9rem; font-size: 1.3rem; font-weight: 700; }
.steps p { margin-top: 0.5rem; color: var(--muted); }

/* --- Before / after ----------------------------------------------------- */

.ba {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 1.1rem clamp(1.1rem, 2.6vw, 2.4rem);
}
.ba-item {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-soft);
}
.ba-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ba-item figcaption {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(228, 236, 240, 0.3);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
}
.ba-item.is-after { border-color: rgba(255, 255, 255, 0.6); box-shadow: 0 0 40px -12px rgba(255, 255, 255, 0.8); }
.ba-item.is-after figcaption { background: var(--red); border-color: var(--red-lit); }
.ba-copy h3 { font-size: 1.7rem; }
.ba-copy p { margin: 0.8rem 0 1.3rem; color: var(--muted); }

/* --- Reels -------------------------------------------------------------- */

.reels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 260px));
  justify-content: center;
  gap: 1.1rem;
}
.reel {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
}
.reel video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; cursor: pointer; }
.reel figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.6rem 0.9rem 0.8rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
  font-weight: 600;
  font-size: 0.92rem;
  color: #fff;
  pointer-events: none;
}

/* --- Gallery ------------------------------------------------------------ */

.gallery {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.2fr 1fr;
  grid-template-rows: repeat(2, clamp(150px, 17vw, 215px));
  gap: 0.8rem;
}
.gallery figure {
  position: relative;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
}
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.gallery figure:hover img { transform: scale(1.04); }
.gallery figcaption {
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.75);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--chrome);
}
.g-tall { grid-row: span 2; }
.g-wide { grid-column: span 2; }
.g-right { grid-column: 4; grid-row: 1 / span 2; }

/* --- Quote -------------------------------------------------------------- */

.quote-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 4.4rem);
}

.contact-rows { margin-top: 2rem; border-top: 1px solid var(--line-soft); }
.contact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
}
.contact-row span {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-row strong {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: #fff;
  overflow-wrap: anywhere;
  transition: color 0.2s;
}
a.contact-row:hover strong { color: var(--red-lit); }
.area-note { margin-top: 1.1rem; color: var(--muted); font-size: 0.95rem; }

.quote-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: clamp(1.4rem, 3vw, 2.1rem);
  background: linear-gradient(180deg, #131416, var(--panel) 70%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px -36px rgba(255, 255, 255, 0.95);
}
.quote-form h3 { grid-column: 1 / -1; font-size: 1.45rem; margin-bottom: 0.2rem; }
.field { display: grid; gap: 0.4rem; align-content: start; }
.field-full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 0.92rem; color: var(--chrome); }
.field label small { font-weight: 400; font-size: 0.82rem; color: var(--muted); margin-left: 0.3rem; }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(185, 188, 196, 0.32);
  border-radius: 10px;
  color: #fff;
  font: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { resize: vertical; min-height: 96px; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4046' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 1.1rem; padding-right: 2.4rem; }
.field select option { background: #131316; color: #fff; }
.field ::placeholder { color: #7c7c86; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--red-lit);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}
.field input.is-invalid { border-color: #ffffff; }

.form-error { grid-column: 1 / -1; color: #ffffff; font-size: 0.94rem; }
.form-done { color: var(--chrome); font-weight: 600; text-align: center; }
[hidden] { display: none !important; }

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  padding: 3rem 0 2.4rem;
  border-top: 1px solid var(--line-soft);
  background: radial-gradient(50% 120% at 50% 0%, rgba(255, 255, 255, 0.2), transparent 70%), var(--black);
}
.footer-inner { display: grid; justify-items: center; gap: 1.1rem; text-align: center; }
.footer-inner img { width: 190px; }
.footer-inner .tagline { justify-content: center; }
.footer-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.6rem; }
.footer-contact a {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  text-decoration: none;
}
.footer-contact a:hover { color: var(--red-lit); }
.footer-legal { color: var(--muted); font-size: 0.88rem; }

/* --- Mobile call bar ---------------------------------------------------- */

.call-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  display: none;
  gap: 0.6rem;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.call-bar .button { flex: 1; padding-inline: 0.6rem; font-size: 0.95rem; }
.call-bar .button-red { flex: 1.5; }

/* --- Toast -------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 5.4rem;
  z-index: 120;
  transform: translateX(-50%);
  max-width: calc(100vw - 2rem);
  padding: 0.8rem 1.2rem;
  border-radius: 999px;
  background: #fff;
  color: #111111;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 14px 40px -10px rgba(0, 0, 0, 0.8);
}

/* --- Reveal ------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay { transition-delay: 0.12s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .button, .service-card, .gallery img { transition: none; }
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 980px) {
  .desktop-nav, .header-cta { display: none; }
  .menu-toggle { display: block; }


  .services, .steps { grid-template-columns: minmax(0, 1fr); }
  .split, .quote-layout { grid-template-columns: minmax(0, 1fr); }

  .ba { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ba-copy { grid-column: 1 / -1; }

  .call-bar { display: flex; }
  body { padding-bottom: 4.6rem; }
}

@media (max-width: 720px) {
  :root { --header-h: 66px; }
  .brand img { height: 52px; }


  .hero-actions .button { width: 100%; }

  /* Three across, no sideways scrolling anywhere on the page */
  .reels { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
  .reel { border-radius: 10px; }
  .reel figcaption { padding: 1.6rem 0.45rem 0.5rem; font-size: 0.7rem; line-height: 1.25; }
  /* Small corner badge: tapping the video itself also plays/pauses */
  .reel .video-toggle { top: 0.3rem; right: 0.3rem; width: 26px; height: 26px; background: rgba(0, 0, 0, 0.45); border-color: rgba(228, 236, 240, 0.25); }
  .reel .video-toggle svg { width: 11px; height: 11px; }

  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: 42vw;
  }
  .g-tall { grid-row: span 2; }
  .g-wide { grid-column: span 2; order: -1; }
  .g-right { grid-column: auto; grid-row: span 2; }

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

/* --- Hero: full-bleed reel behind the copy ------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(calc(100svh - var(--header-h)), 820px);
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  background: var(--black);
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 48%, rgba(0, 0, 0, 0.15) 100%),
    linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.35) 34%, transparent 60%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.22), transparent 55%);
  pointer-events: none;
}
.hero-bg .video-toggle { top: auto; bottom: 1rem; right: 1rem; }

.hero-inner { position: relative; z-index: 1; }
.hero-copy { max-width: 62rem; }

.tagline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--chrome);
}
.tagline i {
  width: 5px;
  height: 5px;
  background: var(--red-lit);
  transform: rotate(45deg);
  box-shadow: 0 0 10px var(--red-lit);
}

.hero h1 {
  margin-top: 1rem;
  font-size: clamp(2.5rem, min(7.4vw, 11.5svh), 6rem);
  font-weight: 900;
  line-height: 0.94;
  text-transform: uppercase;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
}
.hero h1 em { display: block; }

.hero-intro {
  max-width: 33rem;
  margin-top: 1.3rem;
  font-size: 1.12rem;
  color: var(--text);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.8rem; }

.hero-stars { display: flex; gap: 0.35rem; margin-bottom: 1rem; }
.hero-stars svg { width: 22px; height: 22px; fill: var(--red-lit); filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)); }

/* --- Ticker ------------------------------------------------------------- */

.ticker {
  overflow: hidden;
  background: var(--red);
  border-block: 1px solid rgba(255, 255, 255, 0.5);
  transform: rotate(-1deg) scale(1.02);
  margin-block: -0.4rem 0;
  position: relative;
  z-index: 2;
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 26s linear infinite;
}
.ticker-track span {
  padding: 0.6rem 1.1rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.ticker-track span::after { content: '★'; margin-left: 2.2rem; font-style: normal; color: #000; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* --- Before / after clips ----------------------------------------------- */

.ba-item video { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; cursor: pointer; }

/* --- Work grid ---------------------------------------------------------- */

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}
.work-grid figure {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line-soft);
  transition: border-color 0.25s;
}
.work-grid figure:hover { border-color: rgba(255, 255, 255, 0.6); }
.work-grid img,
.work-grid video { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.work-grid video { cursor: pointer; }
.work-grid figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.4rem 0.9rem 0.8rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
  font-weight: 600;
  font-size: 0.92rem;
  color: #fff;
  pointer-events: none;
}

/* --- About -------------------------------------------------------------- */

.about {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.4rem);
}
.about-card {
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius);
  background: linear-gradient(160deg, #131416, var(--panel) 65%);
  box-shadow: 0 30px 80px -36px rgba(255, 255, 255, 0.95);
}
.about-card h3 { font-size: 1.5rem; }
.about-card p { margin: 0.7rem 0 1.3rem; color: var(--muted); }
.about-card .button { width: 100%; }

@media (max-width: 980px) {
  .about { grid-template-columns: minmax(0, 1fr); }
  /* The fixed call bar covers the bottom 4.6rem, so the hero ends above it */
  .hero { align-items: flex-end; min-height: min(calc(100svh - var(--header-h) - 4.6rem), 600px); padding: 1.5rem 0 1.6rem; }
}
@media (max-width: 720px) {
  .hero-bg::after {
    background:
      linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.72) 42%, rgba(0, 0, 0, 0.25) 100%),
      linear-gradient(120deg, rgba(255, 255, 255, 0.2), transparent 55%);
  }
  .hero-bg video { object-position: 50% 30%; }
  .hero-stars { margin-bottom: 0.7rem; }
  .hero-intro { margin-top: 1rem; font-size: 1.02rem; }
  .hero-actions { margin-top: 1.3rem; gap: 0.6rem; }
  .hero-bg .video-toggle { top: 0.8rem; bottom: auto; right: 0.8rem; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .work-grid figcaption { padding: 1.8rem 0.6rem 0.6rem; font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* ==========================================================================
   AGENCY PREVIEW REMINDER — NOT part of the client's site.
   Delete this section, its markup, and its script once Wayman's Detail Co. signs.
   ========================================================================== */

.agency-pop {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.78);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.26s ease;
}
.agency-pop[hidden] { display: none !important; }
.agency-pop.is-open { opacity: 1; pointer-events: auto; }

.agency-card {
  position: relative;
  width: min(100%, 460px);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 2rem 1.6rem 1.4rem;
  background: linear-gradient(180deg, #131416, #0b0b0d 70%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 18px;
  box-shadow: 0 40px 100px -20px rgba(255, 255, 255, 0.9);
  text-align: center;
}
.agency-card img { width: 130px; margin: 0 auto 0.8rem; }
.agency-card h2 { font-size: 1.5rem; }
.agency-card p { margin-top: 0.8rem; color: var(--text); }
.agency-card .agency-note { color: var(--muted); font-size: 0.96rem; }
.agency-card .agency-note strong { color: #fff; }
.agency-actions { display: grid; gap: 0.6rem; margin-top: 1.3rem; }
.agency-close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  color: var(--ice);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
.agency-close:hover { color: #fff; }
.agency-dismiss {
  margin-top: 0.9rem;
  padding: 0.6rem;
  background: none;
  border: 0;
  color: var(--red-lit);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.agency-dismiss:hover { color: #fff; }


/* --- Full-width service card (7th service) ------------------------------ */
.service-card.is-wide { grid-column: 1 / -1; }
.service-card.is-wide .check-list { columns: 2; column-gap: 1.6rem; }
@media (max-width: 760px) {
  .service-card.is-wide .check-list { columns: 1; }
}


/* --- Reviews ------------------------------------------------------------ */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: start;
}
.review-card {
  margin: 0;
  padding: 1.6rem 1.5rem 1.5rem;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-soft);
  border-top: 2px solid var(--red);
  transition: border-color 0.25s, transform 0.25s var(--ease);
}
.review-card:hover {
  border-color: rgba(255, 255, 255, 0.45);
  border-top-color: var(--red-lit);
  transform: translateY(-3px);
}
.review-stars {
  color: var(--red-lit);
  font-size: 0.95rem;
  letter-spacing: 0.18em;
}
.review-card h3 {
  margin-top: 0.8rem;
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--chrome);
}
.review-card p {
  margin: 0.7rem 0 1.1rem;
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.65;
}
.review-card figcaption {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ice);
}
.reviews-grid .review-card:nth-child(4),
.reviews-grid .review-card:nth-child(5) { grid-column: span 1; }

@media (max-width: 900px) {
  .reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .reviews-grid { grid-template-columns: minmax(0, 1fr); }
}


/* --- Monochrome accent: the accent is now light, so anything sitting ON it
       needs dark ink instead of white. ------------------------------------ */
.skip-link { color: #0b0b0c; }
.button-red {
  background: linear-gradient(180deg, #ffffff 0%, var(--red) 100%);
  color: #0b0b0c;
  box-shadow: 0 0 0 1px rgba(190, 215, 255, 0.55) inset, 0 10px 30px -10px rgba(0, 0, 0, 0.95);
}
.button-red:hover {
  box-shadow: 0 0 0 1px rgba(190, 215, 255, 0.9) inset, 0 14px 36px -10px rgba(42, 120, 238, 0.45);
}
.button-red svg { stroke: #0b0b0c; }
.service-flag { color: #0b0b0c; }
.ba-item.is-after figcaption { color: #0b0b0c; }
.ticker-track span { color: #0b0b0c; }
.check-list li::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 72% no-repeat,
    var(--red);
  box-shadow: 0 0 10px rgba(42, 120, 238, 0.5);
}

/* --- Pricing strip ------------------------------------------------------ */
.pricing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 2rem;
}
.price-card {
  padding: 1.7rem 1.6rem;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--red);
}
.price-card .price-label {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ice);
}
.price-card .price-figure {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  line-height: 1;
  color: #fff;
}
.price-card p { margin: 0.7rem 0 0; color: var(--muted); font-size: 0.95rem; }
.pricing-note { margin-top: 1.4rem; color: var(--muted); font-size: 0.95rem; }
@media (max-width: 700px) {
  .pricing { grid-template-columns: minmax(0, 1fr); }
}


/* --- Reels grid: four clips, wrapping down on smaller screens ----------- */
@media (max-width: 1100px) {
  .reels { grid-template-columns: repeat(2, minmax(0, 300px)); }
}
@media (max-width: 620px) {
  .reels { grid-template-columns: minmax(0, 1fr); }
}


/* --- Round badge logo sits better with a little breathing room ---------- */
.brand img { border-radius: 50%; }
.site-footer img,
.agency-card img { border-radius: 50%; }

/* ==== KIT ==== */

/* ==========================================================================
   PRICE TAGS
   ========================================================================== */

.price-tag {
  margin: -0.35rem 0 0.1rem !important;
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(1.9rem, 5vw, 2.5rem);
  line-height: 1;
  color: var(--red-lit);
}

.price-tag small {
  font-family: var(--body);
  font-style: normal;
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-left: 3px;
}

/* ==========================================================================
   BEFORE / AFTER COMPARE SLIDER
   The frame owns the aspect ratio so the images can never drive the height,
   and the after-pane's image is pinned to the frame width so both halves
   stay in register as the handle moves.
   ========================================================================== */

.cmp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(1.1rem, 3vw, 1.9rem);
}

.cmp { margin: 0; display: grid; gap: 0.75rem; }

.cmp-frame {
  --pos: 50%;
  position: relative;
  width: 100%;
  aspect-ratio: var(--cmp-ratio, 4 / 3);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--panel-2);
  touch-action: pan-y;
  isolation: isolate;
}

.cmp-frame > img,
.cmp-after img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* The "before" image is the base layer, so everything LEFT of the handle is
   before. The after pane is anchored to the right edge and grows leftwards,
   which keeps the Before/After tags honest. */
.cmp-after {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  height: 100%;
  width: calc(100% - var(--pos));
  overflow: hidden;
  will-change: width;
}

/* Pinned to the frame's right edge, not the pane, so the two halves stay in
   register instead of squashing as the pane resizes. */
.cmp-after img {
  left: auto;
  right: 0;
  width: var(--cmp-w, 100%);
  max-width: none;
}

.cmp-tag {
  position: absolute;
  top: 10px;
  z-index: 3;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  pointer-events: none;
}

.cmp-tag-before { left: 10px; background: rgba(8, 12, 20, 0.74); color: #fff; }
.cmp-tag-after { right: 10px; background: var(--red); color: var(--black); }

.cmp-range {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none;
  background: transparent;
}

.cmp-range:focus-visible { outline: none; }
.cmp-range:focus-visible ~ .cmp-handle { box-shadow: 0 0 0 4px var(--red-lit); }

.cmp-handle {
  position: absolute;
  top: 50%;
  left: var(--pos);
  z-index: 4;
  translate: -50% -50%;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: var(--black);
  pointer-events: none;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}

.cmp-handle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* The seam between the two halves, on the pane's leading edge */
.cmp-after::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: var(--red);
}

.cmp figcaption { color: var(--muted); font-size: 0.92rem; }

/* ==========================================================================
   WIDE CONTACT ROW STRIP (under the booking wizard)
   ========================================================================== */

.contact-rows-wide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  margin-top: clamp(1.4rem, 4vw, 2.2rem);
}

/* Stacked label-above-value, so a long email gets the full column width
   instead of being squeezed next to its label and broken mid-word. */
.contact-rows-wide .contact-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.contact-rows-wide .contact-row strong {
  min-width: 0;
  font-size: 0.95rem;
  text-align: left;
  overflow-wrap: break-word;
}

/* ==========================================================================
   BOOKING WIZARD
   Uses the palette tokens defined at the top of this file, so it themes
   itself to whichever site it is dropped into.
   ========================================================================== */

.booking-shell {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(1.1rem, 3vw, 2rem);
  box-shadow: 0 40px 90px -60px rgba(0, 0, 0, 0.9);
}

/* ── progress rail ─────────────────────────────────────────── */
.bk-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: clamp(1.2rem, 3vw, 1.8rem);
}

.bk-rail-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 4px 11px;
  border-top: 3px solid var(--line-soft);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  min-width: 0;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.bk-rail-step.is-on,
.bk-rail-step.is-done { border-top-color: var(--red); color: var(--text); }

.bk-rail-num {
  flex: none;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--line-soft);
  color: var(--muted);
  font-size: 0.74rem;
}

.bk-rail-step.is-on .bk-rail-num,
.bk-rail-step.is-done .bk-rail-num { background: var(--red); color: var(--black); }

.bk-rail-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── layout ────────────────────────────────────────────────── */
.bk-body {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2rem);
  align-items: start;
}

.bk-step { display: grid; gap: 1rem; }
.bk-step h3 { font-size: clamp(1.25rem, 3vw, 1.6rem); }

.bk-sub {
  margin: 0.4rem 0 -0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.bk-note { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* ── service cards ─────────────────────────────────────────── */
.bk-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }

.bk-service {
  position: relative;
  display: grid;
  gap: 5px;
  align-content: start;
  text-align: left;
  padding: 16px 16px 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), background 0.2s var(--ease);
}

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

.bk-service.is-on {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 13%, var(--panel-2));
  box-shadow: inset 0 0 0 1px var(--red);
}

.bk-service strong { font-size: 1.02rem; color: #fff; }
.bk-service span { font-size: 0.88rem; color: var(--muted); line-height: 1.45; }
.bk-service b { margin-top: 4px; color: var(--red-lit); font-size: 0.92rem; }

.bk-flag {
  position: absolute;
  top: -9px;
  right: 12px;
  background: var(--red);
  color: var(--black);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}

/* ── chips ─────────────────────────────────────────────────── */
.bk-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.bk-chip {
  display: grid;
  gap: 1px;
  padding: 9px 15px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}

.bk-chip small { font-size: 0.72rem; color: var(--muted); font-weight: 500; }
.bk-chip:hover { border-color: var(--red); }

.bk-chip.is-on {
  border-color: var(--red);
  background: var(--red);
  color: var(--black);
}

.bk-chip.is-on small { color: color-mix(in srgb, var(--black) 72%, transparent); }

/* ── fields ────────────────────────────────────────────────── */
.bk-field { display: grid; gap: 6px; }
.bk-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.bk-full { grid-column: 1 / -1; }

.bk-label {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.bk-label small { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 0.78rem; opacity: 0.8; }

.bk-field input,
.bk-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.bk-field textarea { resize: vertical; min-height: 84px; }

.bk-field input:focus,
.bk-field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 26%, transparent);
}

.bk-field input.is-bad { border-color: #e2756f; box-shadow: 0 0 0 3px rgba(226, 117, 111, 0.22); }
.bk-field input::placeholder,
.bk-field textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.bk-field input[type='date'] { color-scheme: dark; }

.bk-stepper {
  display: grid;
  grid-template-columns: 46px 1fr 46px;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: var(--panel-2);
  overflow: hidden;
}

.bk-stepper button {
  height: 46px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 1.25rem;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.bk-stepper button:hover { background: var(--red); color: var(--black); }
.bk-stepper output { text-align: center; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.bk-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── summary rail ──────────────────────────────────────────── */
.bk-summary {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  display: grid;
  gap: 9px;
  align-content: start;
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-2);
}

.bk-sum-title {
  margin: 0 0 2px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--red-lit);
}

.bk-sum-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.88rem;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line-soft);
}

.bk-sum-row span { color: var(--muted); flex: none; }
.bk-sum-row strong { text-align: right; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }

.bk-estimate {
  display: grid;
  gap: 3px;
  margin-top: 6px;
  padding: 14px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--red) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 40%, transparent);
}

.bk-estimate span { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.bk-estimate strong { font-size: 1.1rem; color: #fff; }
.bk-estimate small { font-size: 0.74rem; color: var(--muted); line-height: 1.4; }

/* ── nav + errors ──────────────────────────────────────────── */
.bk-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 1.2rem; flex-wrap: wrap; }
.bk-nav .button { margin: 0; }

.bk-error {
  margin: 0.8rem 0 0;
  padding: 11px 14px;
  border-radius: 10px;
  background: rgba(226, 117, 111, 0.14);
  border: 1px solid rgba(226, 117, 111, 0.4);
  color: #ffd9d6;
  font-size: 0.9rem;
  font-weight: 600;
}

/* ── confirmation ──────────────────────────────────────────── */
.bk-done { display: grid; gap: 12px; justify-items: center; text-align: center; padding: clamp(1.4rem, 5vw, 3rem) 1rem; }

.bk-done svg {
  width: 54px;
  height: 54px;
  padding: 13px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--red) 20%, transparent);
  border: 1px solid var(--red);
  fill: none;
  stroke: var(--red-lit);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bk-done h3 { font-size: clamp(1.4rem, 4vw, 2rem); }
.bk-done p { margin: 0; max-width: 46ch; color: var(--muted); }

.bk-ref {
  display: inline-grid;
  gap: 2px;
  margin-top: 4px !important;
  padding: 11px 24px;
  border-radius: 11px;
  border: 1px dashed var(--red);
  background: color-mix(in srgb, var(--red) 11%, transparent);
}

.bk-ref span { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.bk-ref strong { font-size: 1.3rem; color: #fff; font-family: var(--display); letter-spacing: 0.04em; }

.bk-done-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

/* ── responsive ────────────────────────────────────────────── */
@media (max-width: 860px) {
  .bk-body { grid-template-columns: 1fr; }
  .bk-summary { position: static; order: -1; }
  .bk-rail-label { display: none; }
  .bk-rail { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .bk-rail-step { justify-content: center; padding: 9px 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-service, .bk-chip, .bk-stepper button, .bk-field input, .bk-field textarea { transition: none; }
}

/* ==========================================================================
   KND PERFORMANCE — template adjustments
   ========================================================================== */

/* The base template's logo was a circle; this one is a hex badge, so the
   50% radius would slice its corners off. */
.brand img,
.site-footer img,
.agency-card img { border-radius: 0; }

/* The hero is a still from the shop rather than a video clip. */
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}

@media (max-width: 720px) {
  .hero-bg img { object-position: 50% 42%; }
}

/* ── five promises instead of three steps ─────────────────────────── */
.steps.steps-five { grid-template-columns: repeat(auto-fit, minmax(192px, 1fr)); }

@media (max-width: 980px) {
  .steps.steps-five { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
}

@media (max-width: 560px) {
  .steps.steps-five { grid-template-columns: minmax(0, 1fr); }
}

/* ── a four-up variant of the photo grid ──────────────────────────── */
.work-grid.work-grid-wide { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }

@media (max-width: 720px) {
  .work-grid.work-grid-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
}

/* ==== LANDEROS ==== */
/* Solid royal-blue buttons with white labels: a white->blue fade washes out white text. */
.button-red { background: linear-gradient(180deg, #4b8ff5 0%, #0a56c8 100%); color: #fff; }
.button-red:hover { box-shadow: 0 0 0 1px rgba(190, 215, 255, 0.7) inset, 0 14px 36px -10px rgba(42, 120, 238, 0.6); }
.button-red svg { stroke: #fff; }
.skip-link { color: #fff; }
.service-flag, .ticker-track span, .ba-item.is-after figcaption { color: #fff; }
.bk-chip.is-on, .bk-chip.is-on small { color: #fff; }
.bk-rail-step.is-on .bk-rail-num, .bk-rail-step.is-done .bk-rail-num { color: #fff; }
.check-list li::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 72% no-repeat,
    var(--red);
}

.brand img, .site-footer img, .agency-card img { border-radius: 0; }
.brand img { height: 54px; }
.site-footer img { width: min(260px, 70%); height: auto; }
.agency-card img { width: 190px; height: auto; margin-inline: auto; }
@media (max-width: 720px) { .brand img { height: 44px; } }

.hero-bg img { object-position: 50% 26%; }
@media (max-width: 720px) { .hero-bg img { object-position: 50% 40%; } }

/* tall phone photos: keep the work grid even */
.work-grid figure img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; height: auto; }
.work-grid-wide figure img { aspect-ratio: 4 / 5; }

.review-card figcaption { color: var(--muted); }
.area-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.area-chips span { padding: .5rem .95rem; border: 1px solid var(--line-soft); border-radius: 999px; background: var(--panel-2); font-weight: 600; font-size: .95rem; }