/* House 10X Digital — navy + copper, from the trades template. */
:root {
  --navy-950: #07111f;
  --navy-900: #0c1b30;
  --navy-800: #14304c;
  --ink: #102033;
  --ink-soft: #3d5166;
  --muted: #5c6e82;
  --copper-300: #ffb088;
  --copper-400: #ff8a4c;
  --copper-500: #f26b2e;
  --copper-700: #9a3412;
  --sand-50: #fbf8f4;
  --sand-100: #f3eee6;
  --sand-200: #e7dfd3;
  --white: #ffffff;
  /* Sampled from images/house10x-logo.png */
  --logo-coral: #f04830;
  --logo-magenta: #d4207e;
  --logo-purple: #a3187a;
  --logo-pink-light: #ff7aa8;
  --logo-violet-light: #d08ae6;
  --accent-grad: linear-gradient(100deg, var(--copper-500) 0%, var(--logo-coral) 55%, var(--logo-magenta) 100%);
  --accent-text-grad: linear-gradient(95deg, var(--logo-coral) 0%, var(--logo-pink-light) 55%, var(--logo-violet-light) 100%);
  --line: #e4dcd0;
  --danger: #9f1d14;
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --shadow: 0 1px 2px rgb(7 17 31 / .05), 0 18px 40px -24px rgb(7 17 31 / .35);
  --font-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --header-h: 124px;
  --space: 20px;
}

*, *::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;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--sand-50);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.05; margin: 0; letter-spacing: -0.03em; }
p { margin: 0; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button, input, select, textarea { font: inherit; }

:focus-visible {
  outline: 3px solid var(--copper-500);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--space);
}

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

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 100;
  background: var(--copper-500);
  color: var(--navy-950);
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: 700 1rem/1.2 var(--font-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.99); }
.btn-lg { min-height: 56px; padding: 14px 26px; font-size: 1.05rem; }
.btn-sm { min-height: 48px; padding: 8px 14px; font-size: .95rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .7; cursor: progress; transform: none; }

.btn-primary {
  background: var(--copper-500);
  background-image: linear-gradient(100deg, var(--copper-500) 0%, #f2603a 60%, #f25a6a 100%);
  color: var(--navy-950);
  box-shadow: 0 12px 24px -14px rgb(242 107 46 / .9);
}
.btn-primary:hover { background: var(--copper-400); background-image: linear-gradient(100deg, var(--copper-400) 0%, #ff7060 60%, var(--logo-pink-light) 100%); }

.btn-ghost {
  background: rgb(255 255 255 / .06);
  color: var(--white);
  border-color: rgb(255 255 255 / .28);
}
.btn-ghost:hover { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .55); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #060b1a;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgb(255 255 255 / .08);
  color: var(--white);
}
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "brand cta"
    "nav nav";
  align-items: center;
  column-gap: 12px;
  min-height: 64px;
  padding-top: 10px;
  padding-bottom: 8px;
}
.brand {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  text-decoration: none;
}
.brand-logo {
  height: 56px;
  width: auto;
  max-width: min(336px, calc(100vw - 200px));
  object-fit: contain;
  object-position: left center;
}
.header-cta { grid-area: cta; justify-self: end; }

.nav {
  grid-area: nav;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  padding: 2px 0 0;
}
.nav a {
  flex: none;
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
  color: rgb(255 255 255 / .78);
  padding: 8px 0;
  white-space: nowrap;
}
.nav a:hover { color: var(--logo-pink-light); }

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 10%, rgb(242 107 46 / .28), transparent 32%),
    radial-gradient(circle at 0% 100%, rgb(125 196 230 / .14), transparent 36%),
    var(--navy-950);
  color: var(--white);
  padding: 32px 0 48px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .035) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgb(255 255 255 / .035) 0 1px, transparent 1px 72px);
  mask-image: linear-gradient(to bottom, #000, transparent 92%);
}
.hero-grid { position: relative; display: grid; gap: 28px; align-items: center; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 8px 14px;
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  color: rgb(255 255 255 / .88);
  background: rgb(255 255 255 / .05);
}
.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 4px rgb(74 222 128 / .18);
  flex: none;
}
.hero-copy h1 {
  margin-top: 18px;
  max-width: 11em;
  font-size: clamp(2.35rem, 8.6vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: .98;
}
.hero h1 em {
  display: block;
  margin-top: .06em;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--copper-400);
  letter-spacing: -0.03em;
  /* Animated gradient technique copied from Absolute Wiring Template 2 (.spark + @keyframes current),
     recoloured to the logo accents only. */
  background: linear-gradient(90deg, var(--logo-coral), var(--logo-pink-light), var(--logo-violet-light), var(--logo-coral));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: current 5s linear infinite;
}
@keyframes current { to { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero h1 em { animation: none; background: var(--accent-text-grad); }
}
.hero-sub {
  margin-top: 16px;
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 3.6vw, 1.7rem);
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--copper-300);
}
.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 26px;
}
.hero-actions .btn { width: 100%; }
.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 24px;
  font-size: .95rem;
  font-weight: 600;
  color: rgb(255 255 255 / .82);
}
.hero-points li { display: inline-flex; align-items: center; gap: 8px; }
.hero-points li::before,
.include-list li::before {
  content: "";
  width: 18px; height: 18px;
  flex: none;
  border-radius: 50%;
  background: var(--copper-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-8' stroke='%2307111f' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}

.hero-photo, .panel-photo, .card-media, .shot {
  position: relative;
  overflow: hidden;
  background: var(--navy-800);
}
.hero-photo, .panel-photo {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 50px -28px rgb(0 0 0 / .7);
}
.hero-photo img,
.panel-photo img,
.card-media img,
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-photo img { object-position: center 42%; }
.shot img { height: auto; object-fit: contain; background: #0b0d15; }
.hero-photo figcaption,
.panel-photo figcaption {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgb(7 17 31 / .72);
  color: var(--white);
  font-size: .88rem;
  font-weight: 500;
  line-height: 1.35;
  backdrop-filter: blur(8px);
}
@media (hover: hover) {
  .hero-photo img,
  .panel-photo img,
  .card-media img { transition: transform .55s ease; }
  .hero-photo:hover img,
  .panel-photo:hover img,
  .card:hover .card-media img { transform: scale(1.04); }
}

.section { padding: 64px 0; }
.section-dark { background: var(--navy-900); color: var(--white); }
.section-tint { background: var(--sand-100); }
.section-head { max-width: 680px; margin-bottom: 28px; }
.kicker {
  margin-bottom: 10px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--logo-purple);
}
.kicker::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 3px;
  margin-right: 10px;
  vertical-align: middle;
  border-radius: 2px;
  background: var(--accent-grad);
}
.section-dark .kicker,
.section-quote .kicker { color: var(--copper-400); }
h2 { font-size: clamp(1.9rem, 7vw, 3.15rem); font-weight: 800; }
.lede { margin-top: 12px; font-size: 1.08rem; color: var(--ink-soft); max-width: 58ch; }
.section-dark .lede,
.section-quote .lede { color: rgb(255 255 255 / .78); }

.cards { display: grid; gap: 16px; }
.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
@media (hover: hover) {
  .card { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
  .card:hover {
    transform: translateY(-4px);
    border-color: rgb(242 107 46 / .45);
    box-shadow: 0 22px 40px -28px rgb(7 17 31 / .45);
  }
}
.card-media { aspect-ratio: 3 / 2; border-radius: 0; }
.card-body { padding: 18px 18px 22px; }
.card h3 { font-size: 1.28rem; font-weight: 800; }
.card p { margin-top: 6px; color: var(--muted); }

.how-grid, .results-grid, .include-grid, .quote-grid {
  display: grid;
  gap: 28px;
}
.why-list { display: grid; gap: 12px; }
.why-list li {
  display: flex;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius);
  background: rgb(255 255 255 / .05);
  border: 1px solid rgb(255 255 255 / .1);
}
.why-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--copper-400);
  min-width: 2ch;
}
.why-list h3 { font-size: 1.12rem; font-weight: 800; }
.why-list p { margin-top: 4px; color: rgb(255 255 255 / .74); font-size: .98rem; }

.proof-list { display: grid; gap: 18px; }
.proof-card {
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.proof-card header { margin-bottom: 14px; }
.proof-kicker {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--copper-700);
}
.proof-card h3 { margin-top: 4px; font-size: clamp(1.45rem, 4vw, 1.85rem); }
.proof-note { margin-top: 6px; color: var(--muted); font-size: .95rem; }
.ba { display: block; margin-top: 16px; }
.ba .shot img { width: 100%; height: auto; display: block; }
.shot {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--navy-950);
}

.example-flag {
  display: inline-block;
  margin-top: 16px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #fff4ec;
  border: 1.5px solid rgb(154 52 18 / .35);
  color: var(--copper-700);
  font-weight: 700;
  font-size: .98rem;
}
.example-list { display: grid; gap: 12px; }
.example-list article {
  padding: 18px 18px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.example-list h3 { font-size: 1.15rem; }
.example-label {
  display: inline-block;
  margin-bottom: 8px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--copper-700);
}
.example-list p { margin-top: 6px; color: var(--ink-soft); }

.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin: 0 0 8px;
}
.price-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.2rem, 12vw, 4.6rem);
  letter-spacing: -0.05em;
  line-height: .9;
  color: var(--navy-950);
}
.price-period { font-weight: 700; font-size: 1.15rem; color: var(--ink-soft); }
.price-note { color: var(--ink-soft); max-width: 42ch; }
.include-list { display: grid; gap: 12px; margin-top: 22px; }
.include-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 4px 10px;
  align-items: start;
}
.include-list li::before { grid-row: 1 / span 2; margin-top: 3px; }
.include-list h3 { font-size: 1.05rem; font-weight: 800; }
.include-list p { color: var(--muted); font-size: .98rem; }
.fine-print {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: .95rem;
  max-width: 62ch;
}

.section-quote {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: var(--navy-950);
  padding-top: 0;
}
.quote-bg {
  position: relative;
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center 62%;
}
.quote-scrim { display: none; }
.section-quote .quote-grid { padding-top: 28px; }
.quote-grid { position: relative; }

.quote-form {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 20px 16px 22px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.field-row { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-weight: 600; font-size: .98rem; }
.req { color: var(--copper-700); }
.field input,
.field select,
.field textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 12px 14px;
  font: 500 1rem/1.4 var(--font-body);
  color: var(--ink);
  background: var(--sand-50);
  border: 1.5px solid #cfc6b8;
  border-radius: var(--radius-sm);
  color-scheme: light;
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23102033' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}
.field textarea { resize: vertical; min-height: 128px; }
.field input::placeholder,
.field textarea::placeholder { color: #7d8794; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--navy-950);
  box-shadow: 0 0 0 4px rgb(242 107 46 / .28);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--danger); background: #fff8f7; }
.hint { font-size: .85rem; color: var(--muted); }
.error { font-size: .9rem; font-weight: 600; color: var(--danger); }
.error:empty { display: none; }
.form-note { font-size: .9rem; color: var(--muted); }
.hp {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.site-footer {
  background: var(--navy-950);
  color: rgb(255 255 255 / .82);
  padding: 48px 0 28px;
}
.footer-grid { display: grid; gap: 22px; }
.brand-footer { flex-wrap: wrap; gap: 0 12px; }
.brand-footer .brand-logo { height: 34px; max-width: 190px; }
.footer-name {
  flex: 1 0 100%;
  margin-top: 14px;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
}
.footer-place { margin-top: 4px; color: var(--copper-300); font-weight: 700; }
.footer-tag { margin-top: 10px; max-width: 36ch; }
.footer-contact { display: grid; gap: 8px; margin: 0; }
.footer-contact a {
  text-decoration: none;
  color: var(--white);
  font-weight: 600;
  padding: 6px 0;
}
.footer-contact a:hover { color: var(--logo-pink-light); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgb(255 255 255 / .12);
  font-size: .9rem;
  color: rgb(255 255 255 / .68);
}
.footer-bottom a { color: rgb(255 255 255 / .86); text-decoration: none; padding: 6px 0; }

.thanks {
  min-height: calc(100svh - 168px);
  display: grid;
  align-items: center;
  padding: 36px 0 56px;
}
.thanks h1 {
  max-width: 12em;
  font-size: clamp(2.4rem, 8vw, 4.2rem);
}
.hero .lede { color: rgb(255 255 255 / .82); max-width: 38ch; }
.footer-bottom.is-plain { margin-top: 0; border-top: 0; padding-top: 0; }
.thanks-grid { display: grid; gap: 28px; align-items: center; }
.thanks-photo {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy-800);
}
.thanks-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }

@media (max-width: 359px) {
  :root { --header-h: 164px; }
}

@media (min-width: 640px) {
  :root { --space: 28px; --header-h: 124px; }
  .brand-logo { height: 68px; max-width: 400px; }
  .hero { padding: 56px 0 72px; }
  .hero-actions { flex-direction: row; flex-wrap: wrap; }
  .hero-actions .btn { width: auto; }
  .field-row { grid-template-columns: 1fr 1fr; }
  .quote-form { padding: 28px; }
  .footer-grid { grid-template-columns: 1.2fr .8fr; align-items: end; }
  .thanks-grid { grid-template-columns: 1.1fr .9fr; }
  .proof-card { padding: 22px; }
}

@media (min-width: 960px) {
  :root { --header-h: 76px; }
  .header-inner {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand nav cta";
    min-height: var(--header-h);
    padding-bottom: 10px;
    column-gap: 22px;
  }
  .nav {
    justify-self: end;
    flex-wrap: nowrap;
    gap: 22px;
    padding: 0;
  }
  .section { padding: 96px 0; }
  .hero { padding: 72px 0 96px; }
  .hero-grid,
  .how-grid,
  .results-grid,
  .include-grid { grid-template-columns: .92fr 1.08fr; gap: 56px; align-items: center; }
  .section-quote { padding: 96px 0; }
  .section-quote .quote-grid { padding-top: 0; }
  .quote-bg {
    position: absolute;
    inset: 0;
    height: 100%;
  }
  .quote-scrim {
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(7 17 31 / .9) 0%, rgb(7 17 31 / .72) 40%, rgb(7 17 31 / .38) 100%);
  }
  .quote-grid { grid-template-columns: .82fr 1.18fr; gap: 48px; align-items: start; }
  .quote-intro { position: sticky; top: calc(var(--header-h) + 28px); }
  .include-grid { align-items: start; }
  .include-grid .panel-photo { position: sticky; top: calc(var(--header-h) + 24px); }
  .cards { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .card, .card-media img, .hero-photo img, .panel-photo img {
    transition: none;
  }
  .card:hover, .btn:hover,
  .hero-photo:hover img, .panel-photo:hover img, .card:hover .card-media img {
    transform: none;
  }
}

/* Proof: six equal square homepage tiles (3x2 desktop, 2 across tablet, 1 per row mobile) */
#proof.section { padding: 28px 0 48px; }
#proof .section-head { margin-bottom: 14px; }
#proof .container { max-width: 1280px; padding-left: 16px; padding-right: 16px; }
.proof-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.proof-tile { margin: 0; min-width: 0; }
.proof-tile-media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--navy-950);
  box-shadow: var(--shadow);
}
.proof-tile-media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; }
.proof-tile-media video.proof-video { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; background: var(--navy-950); }
.proof-tile figcaption { padding: 12px 4px 0; }
.proof-tile .proof-kicker { font-size: .72rem; letter-spacing: .12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proof-tile h3 { margin-top: 4px; font-size: 1.12rem; font-weight: 800; line-height: 1.15; text-wrap: balance; }
@media (min-width: 600px) {
  .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (min-width: 1024px) {
  .proof-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}

/* Logo nudged ~30mm left on wide screens */
@media (min-width: 1100px) { .brand { margin-left: -113px; } }

/* v2: three-line hero headline */
.hero-copy h1 { max-width: none; }
.hero-copy h1 .hl-1 { display: block; }
.hero-copy h1 .hl-3 { display: block; max-width: none; margin-top: 18px; }
@media (min-width: 640px) { .hero-copy h1 .hl-3 { white-space: nowrap; } }
@media (min-width: 960px) { .hero-copy h1 { font-size: clamp(2.35rem, 4.6vw, 4.1rem); } .hero-copy h1 .hl-1 { white-space: nowrap; } }

/* Low-res motion storyboard in hero (preview) */
.hero-photo img.hero-motion { object-fit: contain; background: #07111f; image-rendering: pixelated; }

/* 3D story hero (first pass, low-res). The GIF stays as the no-webgl / reduced-motion fallback. */
.hero-3d-story { position: absolute; inset: 0; background: #07111f; }
.hero-3d-story canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s ease; }
.hero-3d-story.is-ready canvas { opacity: 1; }
.hero-3d-story .hero-3d-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-3d-story.is-ready .hero-3d-fallback { display: none; }
.hero-3d-story.no-webgl canvas, .hero-3d-story.use-fallback canvas { display: none; }

/* Package block moved into "What we do" (2026-10-28) */
.work-package { margin-top: 72px; padding-top: 56px; border-top: 1px solid rgba(127,127,127,.18); scroll-margin-top: calc(var(--header-h) + 16px); }

/* v7.5 motion preview video in hero (2026-10-28). Replaces the live 3D canvas; js/story-hero.js kept on disk, unused. */
.hero-photo.hero-video { aspect-ratio: auto; background: #07111f; }
/* Caption sits under the video so it never covers the end-screen tagline. */
.hero-photo.hero-video figcaption { position: static; margin: 0; border-radius: 0; background: #07111f; backdrop-filter: none; }
.hero-photo video.hero-motion-video { display: block; width: 100%; height: auto; max-width: 100%; background: #07111f; }

/* Hero animation enlarged (2026-10-28 23:12): wider to the right, taller, sits lower, whole hero fits one screen on desktop. Caption line removed from HTML. */
@media (min-width: 960px) {
  .hero { padding: 40px 0 48px; min-height: calc(100vh - var(--header-h)); display: flex; align-items: center; }
  .hero > .hero-grid { grid-template-columns: .78fr 1.22fr; gap: 40px; align-items: end; }
  .hero-photo.hero-video { margin-right: calc(-1 * min(120px, (100vw - 1160px) / 2 + 24px)); margin-top: 48px; }
}

/* Floating call button: slim line style (2026-10-28 23:49) */
.float-call {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 12px; border-radius: 10px;
  background: rgb(7 17 31 / .78); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgb(255 255 255 / .85);
  font-weight: 600; font-size: .9rem; letter-spacing: .03em; line-height: 1.2; text-decoration: none;
  box-shadow: none;
  transition: border-color .15s ease, background .15s ease;
}
.float-call svg { flex: none; width: 15px; height: 15px; color: #F37050; }
.float-call:hover { border-color: #F37050; background: rgb(7 17 31 / .9); }
.float-call:focus-visible { outline: 2px solid #F37050; outline-offset: 3px; }
@media (max-width: 520px) { .float-call { right: 14px; bottom: 14px; padding: 7px 12px 7px 10px; font-size: .85rem; } }
@media (prefers-reduced-motion: reduce) { .float-call { transition: none; } }

/* Call button digits: each number in its own white-bordered black box (2026-10-28 23:50) */
.float-call .fc-num { display: inline-flex; gap: 6px; }
.float-call .fc-grp { display: inline-flex; gap: 2px; }
.float-call .fc-d {
  display: inline-grid; place-items: center;
  min-width: 1.15em; height: 1.5em; padding: 0 1px;
  background: #000; color: #fff; border: 1px solid #fff; border-radius: 3px;
  font-variant-numeric: tabular-nums; font-size: .9em; line-height: 1;
}
@media (max-width: 520px) { .float-call .fc-num { gap: 4px; } .float-call .fc-grp { gap: 1px; } }

/* Call button shape: clean rounded rectangle, not a pill (2026-10-28 23:51) */
.float-call { border-radius: 6px; padding: 8px 16px 8px 14px; }
@media (max-width: 520px) { .float-call { border-radius: 6px; padding: 8px 12px 8px 10px; } }

/* Call button shape matched to sample "Get a free quote" button (2026-10-28 23:53):
   14px radius, 50px min height, 12px 24px padding, 10px gap, 800 weight, soft top highlight + bottom inner edge */
.float-call { min-height: 50px; padding: 12px 24px; gap: 10px; border-radius: 14px; font-weight: 800; font-size: 1.02rem;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 -3px 0 rgb(0 0 0 / .28), 0 10px 24px -12px rgb(0 0 0 / .7);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.float-call svg { width: 18px; height: 18px; }
.float-call:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 -3px 0 rgb(0 0 0 / .28), 0 16px 30px -12px rgb(0 0 0 / .85); }
@media (max-width: 520px) { .float-call { min-height: 46px; padding: 10px 16px; gap: 8px; border-radius: 14px; font-size: .95rem; } }

/* Call button number: clean plain number, digit boxes removed (2026-10-28 23:55) */
.float-call .fc-num { display: inline-flex; gap: .38em; letter-spacing: .03em; font-variant-numeric: tabular-nums; color: #fff; font-weight: 800; font-size: 1.05rem; line-height: 1; }
.float-call .fc-grp { display: inline-flex; gap: 0; }
.float-call .fc-d { display: inline; min-width: 0; height: auto; padding: 0; background: none; border: 0; border-radius: 0; font-size: inherit; }
@media (max-width: 520px) { .float-call .fc-num { font-size: .98rem; gap: .32em; } }

/* Sound control for Zoomed In. Sits in the corner, then returns when that corner is hovered. */
.hero-sound-spot {
  position: absolute; right: 14px; bottom: 14px; z-index: 40;
  width: 44px; height: 44px;
}
.hero-sound-toggle {
  position: absolute; inset: 0; z-index: 40;
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0; margin: 0;
  border-radius: 50%; border: 1px solid rgb(255 255 255 / .55);
  background: rgb(7 17 31 / .55); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.hero-sound-spot.is-resting .hero-sound-toggle { opacity: 0; pointer-events: none; }
.hero-sound-spot.is-resting:hover .hero-sound-toggle,
.hero-sound-spot.is-resting:focus-within .hero-sound-toggle { opacity: 1; pointer-events: auto; }
.hero-sound-toggle svg { width: 20px; height: 20px; display: block; pointer-events: none; }
.hero-sound-toggle .ico-on { display: none; }
.hero-sound-toggle[aria-pressed="true"] .ico-on { display: block; }
.hero-sound-toggle[aria-pressed="true"] .ico-off { display: none; }
@media (hover: hover) { .hero-sound-toggle:hover { background: rgb(7 17 31 / .78); border-color: #F37050; } }
.hero-sound-toggle:focus { outline: none; }
.hero-sound-toggle:focus-visible { outline: 2px solid #F37050; outline-offset: 3px; }
@media (max-width: 520px) {
  .hero-sound-spot { right: 10px; bottom: 10px; width: 40px; height: 40px; }
  .hero-sound-toggle { width: 40px; height: 40px; }
  .hero-sound-toggle svg { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) { .hero-sound-toggle { transition: none; } }

/* v7.6j hero play button (shown when the hero is paused / finished) */
.hero-play-btn {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  width: 76px; height: 76px; margin: -38px 0 0 -38px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 2px solid rgb(255 255 255 / .85);
  background: rgb(7 17 31 / .55); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transform: scale(.9);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s, background .2s ease, border-color .2s ease;
}
.hero-play-btn.is-visible { opacity: 1; visibility: visible; transform: scale(1); transition: opacity .3s ease, transform .3s ease, visibility 0s, background .2s ease, border-color .2s ease; }
.hero-play-btn svg { width: 32px; height: 32px; margin-left: 4px; display: block; pointer-events: none; }
@media (hover: hover) { .hero-play-btn:hover { background: #F37050; border-color: #F37050; } }
.hero-play-btn:focus { outline: none; }
.hero-play-btn:focus-visible { outline: 2px solid #F37050; outline-offset: 4px; }
@media (max-width: 520px) { .hero-play-btn { width: 60px; height: 60px; margin: -30px 0 0 -30px; } .hero-play-btn svg { width: 26px; height: 26px; } }

/* Phone hero only. Desktop (960px and up) is left as it is.
   The animation sits under the headline. Buttons and ticks sit under the animation.
   The italic line stays words plus a thin accent, never a filled gradient block. */
@media (max-width: 959px) {
  .header-inner { row-gap: 0; padding-bottom: 2px; }
  .nav {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }
  .nav a {
    font-size: clamp(.68rem, 2.85vw, .84rem);
    padding: 2px 0 8px;
    letter-spacing: -0.025em;
  }
  .hero { padding: 14px 0 32px; }
  .hero-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .hero-copy { display: contents; }
  .hero .eyebrow { order: 1; align-self: flex-start; }
  .hero-copy h1 { order: 2; margin-top: 0; }
  .hero-photo.hero-video { order: 3; width: 100%; margin-top: 16px; }
  .hero-actions { order: 4; margin-top: 18px; }
  .hero-points { order: 5; margin-top: 16px; }
  .hero .eyebrow {
    position: relative;
    z-index: 3;
    background: rgb(7 17 31 / .92);
    color: #fff;
    border-color: rgb(255 255 255 / .28);
    white-space: nowrap;
    max-width: 100%;
  }
  .hero h1 em {
    animation: none;
    background: none;
    color: #ff8aa4;
    -webkit-text-fill-color: #ff8aa4;
    font-size: .78em;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin-top: .14em;
  }
  .hero h1 em::after {
    content: "";
    display: block;
    height: 2px;
    width: 8.2em;
    max-width: 68%;
    margin-top: .32em;
    border-radius: 99px;
    background: linear-gradient(90deg, transparent, #f37050 16%, #d4207e 52%, #d08ae6 84%, transparent);
    box-shadow: 0 0 12px rgb(212 32 126 / .5);
  }
}
@media (prefers-reduced-motion: reduce) { .hero-play-btn { transition: none; } }

/* Phone only: the cartoon video stays out of the hero window until the iPhone
   films finish. Hiding the element (not just covering it) keeps iOS from
   painting the cartoon on top of the phone. The window keeps its 16:9 size. */
@media (max-width: 959px) {
  .hero-photo.hero-video:not(.is-cartoon) { aspect-ratio: 16 / 9; }
  .hero-photo.hero-video:not(.is-cartoon) video.hero-motion-video { display: none; }
}