/* Precision Cleans homepage, "site v2" design (preview at /home-2.html).
   Ported from the Figma Make v2 project (Claude outputs/figma-make-v2) to
   plain CSS: same classes and look, no React or Tailwind. The base reset
   below stands in for the Tailwind reset that design was built on. */
@layer base {
  *, ::before, ::after { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; }
  html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; -webkit-tap-highlight-color: transparent; }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
  b, strong { font-weight: bolder; }
  small { font-size: 80%; }
  ol, ul, menu { list-style: none; }
  img, svg, video, canvas { display: block; vertical-align: middle; }
  img, video { max-width: 100%; height: auto; }
  button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; opacity: 1; }
  button { cursor: pointer; }
  [hidden] { display: none !important; }
}


:root {
  --ink: #061827;
  --ink-soft: #12344f;
  --lime: #168bff;
  --lime-deep: #0878e8;
  --cream: #f4f8fc;
  --white: #ffffff;
  --mist: #dceeff;
  --line: rgba(6, 24, 39, 0.14);
  --muted: #4d6272; /* 5.7:1 on cream */
  --display: "Barlow Condensed", sans-serif;
  --body: "DM Sans", sans-serif;
}

* {
  scroll-behavior: smooth;
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

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

.site-shell {
  overflow: hidden;
}

.nav-wrap {
  align-items: center;
  background: rgba(7, 27, 36, 0.93);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--white);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  height: 78px;
  left: 0;
  padding: 0 clamp(24px, 5vw, 76px);
  position: absolute;
  right: 0;
  top: 0;
  z-index: 20;
}

.brand {
  align-items: center;
  display: inline-flex;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.06em;
  width: fit-content;
}

.brand-logo {
  border: 2px solid rgba(255, 255, 255, 0.58);
  border-radius: 50%;
  height: 38px;
  margin-right: 10px;
  object-fit: cover;
  width: 38px;
}

.nav-links {
  align-items: center;
  display: flex;
  gap: 36px;
}

.nav-links a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  font-weight: 600;
  transition: color 180ms ease;
}

.nav-links a:hover {
  color: var(--lime);
}

/* six menu items: tighter spacing on narrower laptops so the logo stays on one line */
@media (min-width: 981px) and (max-width: 1180px) {
  .nav-links { gap: 22px; }
  .nav-links a { font-size: 14px; }
}
/* the "Get my free quote" button goes to the same place, so drop the duplicate link */
@media (min-width: 981px) and (max-width: 1100px) {
  .nav-links a[href="#quote"] { display: none; }
}
.brand span { white-space: nowrap; }

.nav-cta {
  align-items: center;
  display: flex;
  font-size: 15px;
  font-weight: 700;
  gap: 9px;
  justify-self: end;
  min-height: 44px;
}

.nav-cta svg {
  color: var(--lime);
  transition: transform 180ms ease;
}

.nav-cta:hover svg {
  transform: translateX(4px);
}

.menu-button {
  background: none;
  border: 0;
  color: var(--white);
  cursor: pointer;
  display: none;
}

.hero {
  background: var(--ink);
  color: var(--white);
  min-height: 860px;
  position: relative;
}

.hero-image,
.hero-shade,
.hero-grid {
  inset: 0;
  position: absolute;
}

.hero-image {
  animation: hero-in 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  /* Placeholder until your own hero video/photo is ready (no stock images). */
  background:
    linear-gradient(115deg, transparent 52%, rgba(255, 255, 255, 0.06) 58%, transparent 64%),
    linear-gradient(115deg, transparent 70%, rgba(255, 255, 255, 0.04) 74%, transparent 80%),
    radial-gradient(120% 90% at 82% 30%, #1d4f86 0%, #0d2a48 45%, #061827 100%);
}

.hero-shade {
  background: linear-gradient(90deg, rgba(7, 27, 36, 0.98) 0%, rgba(7, 27, 36, 0.88) 40%, rgba(7, 27, 36, 0.2) 76%, rgba(7, 27, 36, 0.12) 100%),
    linear-gradient(0deg, rgba(7, 27, 36, 0.55), transparent 55%);
}

.hero-grid {
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(90deg, black, transparent 68%);
}

.hero-content {
  max-width: 980px;
  padding: 190px clamp(24px, 8vw, 130px) 120px;
  position: relative;
  z-index: 2;
}

.eyebrow {
  align-items: center;
  color: var(--lime);
  display: flex;
  font-size: 14px;
  font-weight: 700;
  gap: 9px;
  letter-spacing: 0.01em;
}

.eyebrow.dark {
  color: #0069ce;
}

.hero-eyebrow {
  animation: rise-in 700ms 180ms ease both;
}

.status-dot {
  background: var(--lime);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(223, 255, 79, 0.14);
  height: 7px;
  width: 7px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.86;
  text-transform: uppercase;
}

h1 {
  animation: rise-in 800ms 260ms ease both;
  font-size: clamp(82px, 10.2vw, 154px);
  margin: 24px 0 28px;
}

h1 span,
h2 span {
  color: var(--lime);
}

.hero-content > p {
  animation: rise-in 800ms 350ms ease both;
  max-width: 34em;
  color: rgba(255, 255, 255, 0.8);
  font-size: 17px;
  line-height: 1.7;
  max-width: 570px;
}

.hero-actions {
  align-items: center;
  animation: rise-in 800ms 430ms ease both;
  display: flex;
  gap: 28px;
  margin-top: 38px;
}

.button {
  align-items: center;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  font-size: 16px;
  font-weight: 700;
  gap: 16px;
  justify-content: center;
  min-height: 56px;
  overflow: hidden;
  padding: 0 26px;
  position: relative;
  isolation: isolate;
  transition: background 180ms ease, transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease;
}

.button-primary {
  background: var(--lime);
  color: var(--ink);
  box-shadow: 0 12px 30px -12px rgba(22, 139, 255, 0.9);
}

.button-primary:hover {
  background: var(--white);
  transform: translateY(-2px);
}

.button svg {
  transition: transform 180ms ease;
}

.button:hover svg {
  transform: translateX(4px);
}

.text-link {
  align-items: center;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: 12px;
}

.circle-icon {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  display: flex;
  height: 39px;
  justify-content: center;
  width: 39px;
}

.hero-proof {
  align-items: center;
  bottom: 52px;
  display: flex;
  gap: 15px;
  position: absolute;
  right: clamp(24px, 6vw, 90px);
  z-index: 3;
}

.avatar-stack {
  display: flex;
}

.avatar-stack span,
.review-avatar {
  align-items: center;
  background: var(--mist);
  border: 2px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  display: flex;
  font-size: 9px;
  font-weight: 700;
  height: 38px;
  justify-content: center;
  margin-left: -9px;
  width: 38px;
}

.avatar-stack span:first-child {
  background: #e8b88f;
  margin-left: 0;
}

.avatar-stack span:nth-child(2) {
  background: #9cc6c7;
}

.stars {
  color: var(--lime);
  font-size: 12px;
  letter-spacing: 0.18em;
}

.hero-proof p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  margin: 5px 0 0;
}

.hero-proof strong {
  color: var(--white);
}

.scroll-cue {
  align-items: center;
  bottom: 45px;
  color: rgba(255, 255, 255, 0.45);
  display: flex;
  font-size: 13px;
  gap: 13px;
  left: clamp(24px, 8vw, 130px);
  position: absolute;
  z-index: 3;
}

.scroll-cue span {
  animation: bounce 1.8s ease-in-out infinite;
  color: var(--lime);
  font-size: 18px;
}

.marquee {
  background: var(--lime);
  overflow: hidden;
  padding: 18px 0;
}

.marquee-track,
.marquee-set {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  width: max-content;
}

.marquee-track {
  animation: marquee 24s linear infinite;
}

.marquee-set {
  gap: 34px;
  padding-right: 34px;
}

.marquee span {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.marquee b {
  font-size: 12px;
}

.section {
  padding: 128px clamp(24px, 8vw, 130px);
}

.services {
  background: var(--cream);
}

.section-heading {
  align-items: end;
  display: flex;
  justify-content: space-between;
  margin-bottom: 68px;
}

.section-heading h2,
.difference h2,
.quote-section h2 {
  font-size: clamp(62px, 7vw, 105px);
  margin: 18px 0 0;
}

.section-heading > p {
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 4px;
  max-width: 430px;
}

.service-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, 1fr);
}

.service-card {
  border: 0;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  background: var(--white);
  min-height: 420px;
  padding: 36px;
  position: relative;
  text-align: left;
  transition: background 250ms ease, color 250ms ease, transform 250ms ease;
  width: 100%;
}

.service-card:hover,
.service-card.is-active {
  background: var(--ink);
  color: var(--white);
  transform: translateY(-8px);
}

.service-number {
  color: var(--muted);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  position: absolute;
  right: 29px;
  top: 27px;
}

.service-icon {
  align-items: center;
  background: var(--lime);
  color: var(--ink);
  display: flex;
  height: 68px;
  justify-content: center;
  margin-bottom: 70px;
  width: 68px;
}

.service-card h3,
.step h3 {
  font-family: var(--display);
  font-size: 34px;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.service-card p,
.step p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.service-card:hover .service-number,
.service-card.is-active .service-number {
  color: rgba(255, 255, 255, 0.72);
}

.service-card:hover p,
.service-card.is-active p {
  color: rgba(255, 255, 255, 0.63);
}

.service-action {
  align-items: center;
  bottom: 33px;
  display: flex;
  font-size: 14px;
  font-weight: 700;
  gap: 10px;
  position: absolute;
}

.service-action svg {
  color: var(--lime);
  transition: transform 200ms ease;
}

.service-card:hover .service-action svg,
.service-card.is-active .service-action svg {
  transform: translateX(6px);
}

.service-process {
  background: var(--ink);
  color: var(--white);
  display: grid;
  grid-template-columns: 0.75fr 2.25fr;
  margin-top: 24px;
  min-height: 285px;
  overflow: hidden;
  position: relative;
}

.service-process::after {
  background: radial-gradient(circle, rgba(22, 139, 255, 0.28), transparent 68%);
  content: "";
  height: 340px;
  left: -120px;
  pointer-events: none;
  position: absolute;
  top: -160px;
  width: 340px;
}

.process-intro {
  animation: panel-copy-in 500ms ease both;
  border-right: 1px solid rgba(255, 255, 255, 0.13);
  padding: 38px;
  position: relative;
  z-index: 1;
}

.process-intro > span {
  background: var(--lime);
  color: var(--white);
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 10px;
}

.process-intro > p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin: 28px 0 5px;
}

.process-intro h3 {
  font-family: var(--display);
  font-size: 36px;
  line-height: 0.95;
  margin: 0;
  text-transform: uppercase;
}

.process-intro a {
  align-items: center;
  bottom: 36px;
  color: var(--lime);
  display: flex;
  font-size: 14px;
  font-weight: 700;
  gap: 9px;
  position: absolute;
}

.process-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.process-detail {
  animation: process-step-in 520ms ease both;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding: 42px 25px;
}

.process-detail:nth-child(2) {
  animation-delay: 70ms;
}

.process-detail:nth-child(3) {
  animation-delay: 140ms;
}

.process-detail:nth-child(4) {
  animation-delay: 210ms;
}

.process-detail > span {
  color: var(--lime);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
}

.process-detail h4 {
  font-family: var(--display);
  font-size: 21px;
  margin: 48px 0 10px;
  text-transform: uppercase;
}

.process-detail p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.difference {
  background: var(--ink);
  color: var(--white);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 780px;
  overflow: hidden;
  position: relative;
}

.difference-image {
  /* Replace this background with a real team photo/video poster when ready. */
  background: #0a2d49;
  margin: 50px 0 50px 50px;
  min-height: 600px;
  overflow: hidden;
  position: relative;
}

.work-placeholder {
  align-items: center;
  display: flex;
  justify-content: center;
}

.placeholder-grid {
  background-image: linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 54px 54px;
  inset: 0;
  position: absolute;
}

.window-shine {
  animation: window-shine 5s ease-in-out infinite;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.17) 48%, transparent 62%);
  inset: 0;
  position: absolute;
  transform: translateX(-100%);
}

.squeegee-motion {
  animation: squeegee-path 4.8s cubic-bezier(0.6, 0, 0.3, 1) infinite;
  background: var(--lime);
  height: 7px;
  opacity: 0.72;
  position: absolute;
  transform: rotate(-24deg);
  width: 150px;
}

.squeegee-motion::after {
  background: var(--white);
  content: "";
  height: 85px;
  left: 70px;
  position: absolute;
  top: 3px;
  width: 5px;
}

.squeegee-motion span {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22));
  height: 130px;
  left: 0;
  position: absolute;
  top: -130px;
  width: 150px;
}

.placeholder-copy {
  align-items: center;
  display: flex;
  flex-direction: column;
  max-width: 320px;
  padding: 30px;
  position: relative;
  text-align: center;
  z-index: 2;
}

.upload-icon {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  display: flex;
  font-size: 30px;
  font-weight: 300;
  height: 56px;
  justify-content: center;
  margin-bottom: 24px;
  width: 56px;
}

.placeholder-copy p {
  color: var(--lime);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 9px;
}

.placeholder-copy strong {
  font-family: var(--display);
  font-size: 34px;
  line-height: 1;
  text-transform: uppercase;
}

.placeholder-copy small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.6;
  margin-top: 16px;
}

.image-label {
  align-items: center;
  background: var(--white);
  bottom: 0;
  color: var(--ink);
  display: flex;
  font-size: 14px;
  font-weight: 700;
  gap: 12px;
  padding: 13px 18px 13px 13px;
  position: absolute;
  right: 0;
}

.image-label span {
  align-items: center;
  background: var(--lime);
  display: flex;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.difference-copy {
  align-self: center;
  padding: 80px clamp(40px, 8vw, 130px);
}

.difference-copy .lead {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.75;
  margin: 30px 0 38px;
  max-width: 520px;
}

.check-list {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.check-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  gap: 18px;
  padding: 22px 0;
}

.check-item > span {
  align-items: center;
  background: var(--lime);
  color: var(--ink);
  display: flex;
  flex-shrink: 0;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.check-item h3 {
  font-size: 16px;
  margin-bottom: 5px;
}

.check-item p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  margin: 0;
}

.process {
  background: var(--white);
}

.section-heading.centered {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-bottom: 90px;
  text-align: center;
}

.section-heading.centered h2 {
  margin-bottom: 22px;
}

.section-heading.centered > p {
  margin: 0;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 auto;
  max-width: 1100px;
}

.step {
  padding: 0 45px;
  position: relative;
  text-align: center;
}

.step-number {
  color: #5f7180;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
}

.step-icon {
  align-items: center;
  background: var(--lime);
  display: flex;
  height: 64px;
  justify-content: center;
  margin: 18px auto 26px;
  transform: rotate(3deg);
  width: 64px;
}

.step-icon svg {
  transform: rotate(-3deg);
}

.step h3 {
  font-size: 24px;
}

.step-line {
  border-top: 1px dashed #b8c0c1;
  position: absolute;
  right: -18%;
  top: 61px;
  width: 36%;
}

.testimonial {
  align-items: center;
  background: #e8f3ff;
  display: flex;
  flex-direction: column;
  padding: 110px 24px;
  position: relative;
  text-align: center;
}

.quote-mark {
  color: var(--lime-deep);
  font-family: Georgia, serif;
  font-size: 190px;
  left: 9%;
  line-height: 1;
  opacity: 0.75;
  position: absolute;
  top: 18px;
}

blockquote {
  font-family: var(--display);
  font-size: clamp(36px, 4.5vw, 65px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 auto 38px;
  max-width: 1050px;
  text-transform: uppercase;
}

.review-author {
  align-items: center;
  display: flex;
  gap: 12px;
  text-align: left;
}

.review-avatar {
  background: #dfad84;
  border: 0;
  height: 43px;
  margin: 0;
  width: 43px;
}

.review-author strong,
.review-author span {
  display: block;
  font-size: 11px;
}

.review-author span {
  color: var(--muted);
  margin-top: 3px;
}

.review-author .stars {
  border-left: 1px solid var(--line);
  color: #0069ce;
  margin-left: 14px;
  padding-left: 25px;
}

.quote-section {
  background: var(--ink);
  color: var(--white);
  display: grid;
  gap: 72px;
  grid-template-columns: 0.55fr 1.45fr;
  align-items: center;
  padding: 130px clamp(24px, 8vw, 130px);
}

.quote-copy > p {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.75;
  margin: 30px 0 40px;
  max-width: 450px;
}

.contact-note {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  display: flex;
  gap: 16px;
  max-width: 360px;
  padding-top: 25px;
}

.contact-note > svg {
  color: var(--lime);
}

.contact-note span {
  color: rgba(255, 255, 255, 0.7);
  display: block;
  font-size: 13px;
  margin-bottom: 3px;
}
.contact-note strong {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
}

.contact-note a {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
}

.quote-form {
  align-self: center;
  background: var(--white);
  color: var(--ink);
  min-height: 500px;
  padding: 42px;
}

.field-row {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 1fr;
}

.quote-form label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.quote-form input,
.quote-form select,
.quote-form textarea {
  background: #f2f4f1;
  border: 1px solid transparent;
  border-radius: 0;
  color: var(--ink);
  display: block;
  font-size: 13px;
  margin-top: 8px;
  outline: none;
  padding: 15px;
  text-transform: none;
  transition: border 160ms ease, background 160ms ease;
  width: 100%;
}

.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  background: var(--white);
  border-color: var(--lime);
}

.quote-form textarea {
  resize: vertical;
}

.form-button {
  width: 100%;
}

.form-note {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 10px;
  gap: 7px;
  justify-content: center;
  margin: 14px 0 0;
}

.success-message {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 416px;
  text-align: center;
}

.success-message > span {
  align-items: center;
  background: var(--lime);
  display: flex;
  height: 70px;
  justify-content: center;
  margin-bottom: 25px;
  width: 70px;
}

.success-message h3 {
  font-family: var(--display);
  font-size: 34px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.success-message p {
  color: var(--muted);
}

.success-message button {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  margin-top: 16px;
  padding: 6px 0;
  text-transform: uppercase;
}

footer {
  align-items: center;
  background: #041318;
  color: rgba(255, 255, 255, 0.64);
  display: grid;
  gap: 25px;
  grid-template-columns: auto 1fr auto auto;
  padding: 35px clamp(24px, 5vw, 76px);
}

.footer-brand {
  color: var(--white);
  font-size: 18px;
}

.footer-brand .brand-logo {
  height: 32px;
  width: 32px;
}

footer p,
.copyright {
  font-size: 14px;
  margin: 0;
}

.footer-links {
  display: flex;
  gap: 26px;
}

.footer-links a {
  font-size: 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.js .reveal {
  opacity: 0;
  transform: translateY(28px);
}

.js .reveal:not(.is-settled) {
  transition: opacity 700ms var(--delay, 0ms) ease, transform 700ms var(--delay, 0ms) ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js .reveal h2,
.js .reveal blockquote {
  clip-path: inset(0 0 100% 0);
  transform: translateY(18px);
  transition: clip-path 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible h2,
.reveal.is-visible blockquote {
  clip-path: inset(0 0 0 0);
  transform: translateY(0);
}

.reveal > p,
.reveal .lead {
  transition: opacity 700ms 180ms ease, transform 700ms 180ms ease;
}

.js .reveal:not(.is-visible) > p,
.js .reveal:not(.is-visible) .lead {
  opacity: 0;
  transform: translateY(12px);
}

h1 span,
h2 span {
  background: linear-gradient(90deg, #168bff 0%, #70b9ff 45%, #168bff 100%);
  background-clip: text;
  background-size: 220% auto;
  color: transparent;
  animation: text-glow 6s linear infinite;
}

/* Hero headline: a squeegee blade sweeps across every 6s and a glint of
   light travels through the letters with it. */
.hero h1 {
  position: relative;
  width: fit-content;
  background: linear-gradient(100deg, #ffffff 0%, #ffffff 44%, #cfe8ff 48%, #ffffff 50%, #bfe0ff 52%, #ffffff 56%, #ffffff 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rise-in 800ms 260ms ease both, headline-shine 6s 2.4s cubic-bezier(.45, 0, .2, 1) infinite;
}
.hero h1 span {
  background: linear-gradient(100deg, #168bff 0%, #4aa6ff 42%, #e8f4ff 48%, #ffffff 50%, #d6ecff 52%, #4aa6ff 58%, #168bff 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: headline-shine 6s 2.4s cubic-bezier(.45, 0, .2, 1) infinite;
}
.hero h1::after {
  content: "";
  position: absolute;
  inset: -6% 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 48.6%, rgba(190, 225, 255, 0.25) 49.2%, rgba(235, 247, 255, 0.95) 49.8%, rgba(235, 247, 255, 0.95) 50.2%, rgba(120, 190, 255, 0.35) 50.8%, transparent 52%);
  filter: drop-shadow(0 0 10px rgba(22, 139, 255, 0.8));
  opacity: 0;
  transform: translateX(-60%);
  animation: headline-blade 6s 2.4s cubic-bezier(.45, 0, .2, 1) infinite;
}
@keyframes headline-shine {
  0% { background-position: 100% 0; }
  30%, 100% { background-position: 0% 0; }
}
@keyframes headline-blade {
  0% { opacity: 0; transform: translateX(-60%); }
  4% { opacity: 1; }
  27% { opacity: 1; }
  31%, 100% { opacity: 0; transform: translateX(60%); }
}

@keyframes hero-in {
  from {
    opacity: 0;
    transform: scale(1.06);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(-3px);
  }
  50% {
    transform: translateY(4px);
  }
}

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

@keyframes panel-copy-in {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes process-step-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes text-glow {
  to {
    background-position: -220% center;
  }
}

@keyframes window-shine {
  0%,
  22% {
    transform: translateX(-110%);
  }
  70%,
  100% {
    transform: translateX(110%);
  }
}

@keyframes squeegee-path {
  0%,
  12% {
    opacity: 0;
    transform: translate(-180px, -100px) rotate(-24deg);
  }
  22% {
    opacity: 0.72;
  }
  62% {
    opacity: 0.72;
    transform: translate(160px, 100px) rotate(-24deg);
  }
  75%,
  100% {
    opacity: 0;
    transform: translate(160px, 100px) rotate(-24deg);
  }
}

/* ===================== Upgrades (v2) ===================== */
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

/* scroll progress: a thin squeegee line across the top */
.scroll-line { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; pointer-events: none; }
.scroll-line span { display: block; height: 100%; background: linear-gradient(90deg, var(--lime-deep), #7cc0ff); box-shadow: 0 0 12px rgba(22, 139, 255, 0.8); transform-origin: left; transform: scaleX(0); }

/* droplet ripple on press */
.ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.45); transform: scale(0); animation: ripple 0.6s ease-out forwards; pointer-events: none; z-index: -1; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
.button::after { content: ""; position: absolute; inset: -40% auto -40% -60%; width: 40%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; }
.button:hover::after { animation: glint 0.8s ease; }
@keyframes glint { 0% { transform: translateX(0) skewX(-18deg); opacity: 1; } 100% { transform: translateX(420%) skewX(-18deg); opacity: 0; } }

/* hero: video placeholder label, trust row, misted glass */
.hero-ph { position: absolute; right: clamp(24px, 6vw, 90px); bottom: 52px; z-index: 3; max-width: 380px; display: flex; gap: 10px; padding: 12px 14px; border: 1.5px dashed rgba(124, 192, 255, 0.6); background: rgba(0, 0, 0, 0.45); color: rgba(255, 255, 255, 0.78); font-size: 13px; line-height: 1.45; }
.hero-ph span { color: #7cc0ff; }
.hero-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; animation: rise-in 800ms 520ms ease both; }
.hero-trust-note { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.88); }
.hero-trust-note svg { color: var(--lime); }
.rating-chip { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 16px 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.78); font-size: 15px; transition: background 200ms ease, border-color 200ms ease; }
.rating-chip:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.3); }
.rating-chip strong { color: var(--white); }
.rating-chip.dark { background: var(--white); border-color: var(--line); color: var(--muted); }
.rating-chip.dark strong { color: var(--ink); }
.star-row { display: inline-flex; gap: 2px; color: #f2b53a; }
.mist { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.mist-blade { position: absolute; top: -5%; bottom: -5%; left: 0; width: 20px; z-index: 5; pointer-events: none; opacity: 0; }
.mist-blade::before { content: ""; position: absolute; inset: 0 7px 0 5px; border-radius: 6px; background: linear-gradient(90deg, #1b2b3d, #3a5672 40%, #cfe6ff 55%, #2c4560); box-shadow: 0 0 30px rgba(22, 139, 255, 0.7); }

/* services: progress line lights the four steps one after another */
.process-track { position: relative; }
.process-progress { position: absolute; left: 25px; right: 25px; top: 30px; height: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.process-progress::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--lime), #7cc0ff); box-shadow: 0 0 10px var(--lime); transform-origin: left; animation: progress-fill 1.6s 200ms cubic-bezier(.4,0,.2,1) both; }
@keyframes progress-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.process-detail { position: relative; }
.process-dot { position: absolute; top: 25px; left: 25px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 2px solid rgba(255, 255, 255, 0.3); animation: dot-on 300ms calc(200ms + var(--i) * 400ms) ease both; }
@keyframes dot-on { to { background: var(--lime); border-color: #bfe0ff; box-shadow: 0 0 0 5px rgba(22, 139, 255, 0.25), 0 0 14px var(--lime); } }
.process-detail > span:not(.process-dot) { display: block; margin-top: 18px; }

/* before / after */
.compare { background: var(--cream); }
.ba { position: relative; max-width: 1100px; margin: 0 auto; height: clamp(320px, 50vw, 600px); overflow: hidden; user-select: none; touch-action: pan-y; box-shadow: 0 40px 80px -40px rgba(6, 24, 39, 0.5); }
.ba-pane { position: absolute; inset: 0; display: grid; padding: 24px; }
.ba-after { background: radial-gradient(90% 120% at 70% 20%, #4aa6ff 0%, #145aa8 50%, #0a2d49 100%); place-items: end end; }
.ba-after::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.2) 47%, transparent 54%), linear-gradient(120deg, transparent 62%, rgba(255, 255, 255, 0.1) 66%, transparent 70%); }
.ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); background: radial-gradient(90% 120% at 70% 20%, #5b6168 0%, #383d43 50%, #1c1f23 100%); place-items: end start; }
.ba-before::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(120, 105, 85, 0.35)), repeating-linear-gradient(90deg, transparent 0 37px, rgba(170, 155, 130, 0.12) 37px 40px, transparent 40px 83px), radial-gradient(circle at 18% 28%, rgba(175, 160, 135, 0.4), transparent 22%), radial-gradient(circle at 42% 70%, rgba(160, 145, 120, 0.35), transparent 26%), radial-gradient(circle at 80% 40%, rgba(165, 150, 125, 0.32), transparent 24%); }
.ph-note { position: relative; max-width: 30ch; padding: 10px 14px; background: rgba(0, 0, 0, 0.5); border: 1.5px dashed rgba(124, 192, 255, 0.6); color: rgba(255, 255, 255, 0.85); font-size: 13px; line-height: 1.4; }
.ba-tag { position: absolute; top: 20px; z-index: 3; padding: 8px 14px; font-weight: 700; font-size: 14px; color: var(--white); background: rgba(0, 0, 0, 0.55); }
.ba-tag-before { left: 20px; }
.ba-tag-after { right: 20px; background: var(--lime); color: var(--ink); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 4px; margin-left: -2px; z-index: 3; background: var(--white); box-shadow: 0 0 24px rgba(22, 139, 255, 0.9); pointer-events: none; }
.ba-knob { position: absolute; top: 50%; left: 50%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; background: var(--white); color: var(--ink); display: grid; place-items: center; box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.18), 0 10px 30px rgba(0, 0, 0, 0.4); transition: transform 200ms ease; }
.ba:hover .ba-knob { transform: scale(1.08); }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 4; }
.ba:has(.ba-range:focus-visible) { outline: 3px solid var(--lime); outline-offset: 4px; }

/* plans: savings picker */
.plans { background: var(--white); }
.plan-picker { max-width: 900px; margin: 0 auto; }
.plan-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px; background: var(--cream); border: 1px solid var(--line); }
.plan-tabs button { position: relative; min-height: 56px; border: 0; background: transparent; cursor: pointer; font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--muted); text-transform: uppercase; transition: background 200ms ease, color 200ms ease; }
.plan-tabs button em { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 3px 8px; background: var(--lime); color: var(--ink); font: 700 11px/1.2 var(--body); font-style: normal; white-space: nowrap; text-transform: none; }
.plan-tabs button.is-on { background: var(--ink); color: var(--white); }
.plan-card { margin-top: 18px; padding: 40px; background: var(--ink); color: var(--white); position: relative; overflow: hidden; animation: panel-copy-in 450ms ease both; }
.plan-card::after { content: ""; position: absolute; width: 380px; height: 380px; right: -140px; top: -180px; background: radial-gradient(circle, rgba(22, 139, 255, 0.35), transparent 68%); pointer-events: none; }
.plan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.plan-head h3 { font-family: var(--display); font-size: 40px; text-transform: uppercase; margin: 0; }
.plan-head p { color: rgba(255, 255, 255, 0.75); margin: 4px 0 0; }
/* top right of the plan card: the details link, with Most popular under it */
.plan-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }
.plan-details { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid rgba(124, 192, 255, 0.45); color: #9fd0ff; font-size: 14px; font-weight: 700; white-space: nowrap;
  transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease; }
.plan-details:hover, .plan-details:focus-visible { border-color: #7cc0ff; color: var(--white); background-color: rgba(22, 139, 255, 0.14); }
.plan-details svg { flex: none; animation: pd-nudge 4s cubic-bezier(.45, 0, .2, 1) var(--beat, 0s) infinite; }
/* a squeegee blade wipes across every 4 seconds, the same beat as the arrow */
.plan-details::before { content: ""; position: absolute; inset: -2px auto -2px 0; width: 46%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(124, 192, 255, 0.18) 38%, rgba(235, 247, 255, 0.9) 50%, rgba(124, 192, 255, 0.18) 62%, transparent 100%);
  transform: translateX(-120%); animation: pd-glint 4s cubic-bezier(.45, 0, .2, 1) var(--beat, 0s) infinite; }
@keyframes pd-glint { 0% { transform: translateX(-120%); } 22%, 100% { transform: translateX(240%); } }
@keyframes pd-nudge { 0%, 8% { transform: none; } 16% { transform: translateX(4px); } 26%, 100% { transform: none; } }
@media (max-width: 520px) {
  /* not enough room beside the title: the link takes the top right corner on its own row */
  .plan-head { flex-direction: column-reverse; gap: 14px; }
  .plan-head-side { flex-direction: row-reverse; align-items: center; justify-content: space-between; width: 100%; margin-top: -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-details::before, .plan-details svg { animation: none; }
  .plan-details::before { display: none; }
}
.plan-badge { padding: 6px 12px; background: var(--lime); color: var(--ink); font-weight: 700; font-size: 14px; }
.plan-save { display: flex; flex-wrap: wrap; gap: 20px 56px; margin: 30px 0; padding: 26px 0; border-block: 1px solid rgba(255, 255, 255, 0.14); }
.plan-save > div { display: grid; gap: 2px; }
.plan-save span { color: rgba(255, 255, 255, 0.75); font-size: 15px; }
.plan-save strong { font-family: var(--display); font-size: 76px; line-height: 0.9; color: var(--white); font-variant-numeric: tabular-nums; }
.plan-year strong { color: #7cc0ff; }
.plan-same { font-size: 52px !important; }
.plan-card ul { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 12px; }
.plan-card li { display: flex; gap: 12px; align-items: flex-start; color: rgba(255, 255, 255, 0.88); }
.plan-card li svg { color: var(--lime); flex: none; margin-top: 2px; }
.plan-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; position: relative; z-index: 1; }
.plan-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--lime); border-bottom: 2px solid currentColor; }
.plans .plan-link { color: #7cc0ff; }

/* reviews */
.reviews { background: #e8f3ff; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review-card { margin: 0; display: flex; flex-direction: column; gap: 18px; padding: 32px; background: var(--white); box-shadow: 0 24px 50px -32px rgba(6, 24, 39, 0.45); transition: transform 300ms ease, box-shadow 300ms ease; }
.review-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(6, 24, 39, 0.55); }
.review-card blockquote { margin: 0; flex: 1; font: 400 17px/1.6 var(--body); text-transform: none; letter-spacing: 0; max-width: none; color: var(--ink); clip-path: none !important; transform: none !important; }
.review-card figcaption { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.review-card figcaption strong { display: block; font-size: 16px; }
.review-card figcaption small { display: block; color: var(--muted); font-size: 14px; }
.review-initial { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--white); font-weight: 700; }
.reviews-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 44px; }
.reviews-cta .plan-link { color: #0058b0; }

/* tap-the-windows estimator */
.estimator { display: grid; grid-template-columns: 1.05fr 0.95fr; background: var(--white); color: var(--ink); }
.est-house { padding: 28px; display: grid; gap: 16px; align-content: start; background: linear-gradient(180deg, #eaf4ff, #f7fbff); }
.est-storeys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.est-storeys button, .est-house-actions > button, .est-extra button { min-height: 44px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font: 600 15px/1 var(--body); cursor: pointer; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; }
.est-storeys button.is-on { background: var(--ink); color: var(--white); border-color: var(--ink); }
.house { width: 100%; height: auto; max-height: 440px; overflow: visible; }
.house-roof { fill: #12344f; }
.house-chimney { fill: #0c2740; }
.house-body { fill: #ffffff; stroke: #c9d6e2; stroke-width: 2; }
.house-floor { stroke: #dbe5ee; stroke-width: 2; }
.house-door { fill: #12344f; }
.win { cursor: pointer; outline: none; }
.win-frame { fill: #ffffff; stroke: #9fb3c4; stroke-width: 2; transition: stroke 200ms ease; }
.win:hover .win-frame, .win:focus-visible .win-frame { stroke: var(--lime); stroke-width: 3; }
.win:focus-visible .win-frame { stroke-dasharray: 4 3; }
.win-grime { fill: none; stroke: rgba(70, 60, 45, 0.55); stroke-width: 2.5; stroke-linecap: round; }
.win-shine { stroke: rgba(255, 255, 255, 0.85); stroke-width: 3; stroke-linecap: round; }
.win-bar { stroke: #ffffff; stroke-width: 3; }
.win.is-clean rect:nth-of-type(2) { animation: glass-pop 450ms ease; }
@keyframes glass-pop { 0% { opacity: 0.4; } 100% { opacity: 1; } }
.win-burst path { fill: #ffd76a; animation: burst 700ms ease-out forwards; }
@keyframes burst { from { opacity: 1; transform: translate(0, 0) scale(0.6); } to { opacity: 0; transform: translate(var(--bx), var(--by)) scale(1.2); } }
.win-burst path { transform-box: fill-box; transform-origin: center; }
.est-house-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.est-house-actions > button { padding: 0 16px; }
.est-extra { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.est-extra button { width: 44px; display: grid; place-items: center; padding: 0; }
.est-extra button:disabled { opacity: 0.4; cursor: default; }
.est-extra output { min-width: 28px; text-align: center; font: 700 20px/1 var(--display); color: var(--ink); }
.est-panel { padding: 32px; display: flex; flex-direction: column; gap: 16px; border-left: 1px solid var(--line); }
.est-label { margin: 0; font-size: 14px; color: var(--muted); }
.est-count { margin: 0; font-family: var(--display); font-size: 26px; font-weight: 700; text-transform: uppercase; }
.est-count span { font-size: 56px; line-height: 0.9; color: var(--lime-deep); font-variant-numeric: tabular-nums; }
.est-toggle { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; cursor: pointer; }
.est-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.est-switch { width: 46px; height: 26px; flex: none; border-radius: 999px; background: #c9d6e2; position: relative; transition: background 200ms ease; }
.est-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); transition: transform 200ms ease; }
.est-toggle input:checked + .est-switch { background: var(--lime-deep); }
.est-toggle input:checked + .est-switch::after { transform: translateX(20px); }
.est-toggle input:focus-visible + .est-switch { outline: 3px solid var(--lime); outline-offset: 3px; }
.est-price { padding: 20px; background: var(--ink); color: var(--white); display: grid; gap: 4px; }
.est-price .est-label { color: rgba(255, 255, 255, 0.75); }
.est-price strong { font-family: var(--display); font-size: 52px; line-height: 1; font-variant-numeric: tabular-nums; }
.est-price .est-hint { font-size: 30px; color: rgba(255, 255, 255, 0.75); }
.est-note { margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.75); }
.est-cta { width: 100%; }
.est-proof .rating-chip { font-size: 14px; white-space: nowrap; background: var(--cream); border-color: var(--line); color: var(--muted); }
.est-proof .rating-chip strong { color: var(--ink); }
.est-contact { margin: 0; font-size: 15px; color: var(--muted); }
.est-contact a { color: #0058b0; font-weight: 700; text-decoration: underline; }


@media (max-width: 980px) {
  .nav-wrap {
    grid-template-columns: 1fr auto;
  }

  .nav-links {
    align-items: flex-start;
    background: var(--ink);
    display: none;
    flex-direction: column;
    gap: 24px;
    left: 0;
    padding: 30px;
    position: absolute;
    right: 0;
    top: 77px;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    font-size: 16px;
  }

  .nav-cta {
    display: none;
  }

  .menu-button {
    display: block;
  }

  .hero {
    min-height: 800px;
  }

  .hero-content {
    padding-top: 180px;
  }

  .hero-proof, .hero-ph {
    display: none;
  }
  .estimator { grid-template-columns: 1fr; }
  .est-panel { border-left: 0; border-top: 1px solid var(--line); }
  .review-grid { grid-template-columns: 1fr; }

  .service-card {
    padding: 28px;
  }

  .service-process {
    grid-template-columns: 0.9fr 2.1fr;
  }

  .process-track {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-detail {
    padding: 28px 22px;
  }

  .process-detail h4 {
    margin-top: 22px;
  }

  .difference {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .difference-image {
    margin: 35px 0 35px 35px;
  }

  .quote-section {
    gap: 50px;
  }
}

@media (max-width: 760px) {
  .hero {
    min-height: 760px;
  }

  .hero-shade {
    background: linear-gradient(90deg, rgba(7, 27, 36, 0.96), rgba(7, 27, 36, 0.65)),
      linear-gradient(0deg, rgba(7, 27, 36, 0.8), transparent);
  }

  .hero-content {
    padding: 160px 24px 110px;
  }

  h1 {
    font-size: clamp(68px, 21vw, 100px);
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .scroll-cue {
    bottom: 28px;
  }

  .section {
    padding: 90px 24px;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 28px;
  }

  .section-heading h2,
  .difference h2,
  .quote-section h2 {
    font-size: clamp(57px, 18vw, 82px);
  }

  .service-grid {
    grid-template-columns: 1fr;
  }

  .service-process {
    grid-template-columns: 1fr;
  }

  .process-intro {
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
    border-right: 0;
    min-height: 230px;
    padding: 28px;
  }

  .process-intro a {
    bottom: 28px;
  }

  .process-track {
    grid-template-columns: 1fr;
  }

  .process-detail {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 0;
    padding: 28px;
  }

  .process-detail h4 {
    margin: 18px 0 8px;
  }

  .service-card {
    min-height: 360px;
  }

  .service-icon {
    margin-bottom: 48px;
  }

  .difference {
    grid-template-columns: 1fr;
  }

  .difference-image {
    margin: 24px;
    min-height: 480px;
  }

  .difference-copy {
    padding: 70px 24px 90px;
  }

  .steps {
    gap: 55px;
    grid-template-columns: 1fr;
  }

  .step-line {
    border-left: 1px dashed #b8c0c1;
    border-top: 0;
    bottom: -48px;
    height: 42px;
    left: 50%;
    right: auto;
    top: auto;
    width: 1px;
  }

  .quote-mark {
    font-size: 100px;
    left: 3%;
  }

  .testimonial {
    padding: 90px 24px;
  }

  .review-author {
    flex-wrap: wrap;
    justify-content: center;
  }

  .review-author .stars {
    flex-basis: 100%;
    margin: 8px 0 0;
    padding: 0;
    text-align: center;
  }

  .quote-section {
    grid-template-columns: 1fr;
    padding: 90px 24px;
  }

  .quote-form {
    padding: 28px 20px;
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  footer {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding-bottom: 110px;
  }
  .plan-tabs { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
  .plan-card { padding: 26px 22px; }
  .plan-save strong { font-size: 60px; }
  .plan-head h3 { font-size: 32px; }
  .est-house, .est-panel { padding: 20px; }
  .process-progress, .process-dot { display: none; }
  .process-detail > span:not(.process-dot) { margin-top: 0; }
  .reviews-cta .button, .plan-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .mist, .mist-blade { display: none; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* screen-reader-only text (star ratings on reviews) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ===================== Pinned bar + phone menu ===================== */
/* The bar stays at the top as you scroll, and tightens up once you've left the hero. */
html { scroll-padding-top: 84px; }
.nav-wrap {
  position: fixed; top: 0; z-index: 70;
  padding-top: env(safe-area-inset-top);
  height: calc(78px + env(safe-area-inset-top));
  transition: height 300ms cubic-bezier(.2, .8, .2, 1), background-color 300ms ease, box-shadow 300ms ease;
}
.nav-wrap.is-scrolled {
  height: calc(66px + env(safe-area-inset-top));
  background: rgba(6, 24, 39, 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.8);
}
.brand-logo { transition: width 300ms ease, height 300ms ease; }
.nav-wrap.is-scrolled .brand-logo { width: 34px; height: 34px; }
.scroll-line { z-index: 80; }

/* the three lines: a full 360 spin on every tap */
.menu-button {
  position: relative; width: 44px; height: 44px; place-items: center; justify-self: end;
  border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06);
  transition: background-color 200ms ease, border-color 200ms ease;
}
.menu-button:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); }
.menu-button > span { position: absolute; inset: 0; display: grid; place-items: center; }
.menu-button svg { width: 22px; height: 22px; }
.menu-button.spin { animation: menu-spin 520ms cubic-bezier(.5, 0, .2, 1); }
@keyframes menu-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.menu {
  position: fixed; inset: 0; z-index: 65;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: calc(104px + env(safe-area-inset-top)) clamp(20px, 6vw, 48px) calc(28px + env(safe-area-inset-bottom));
  background: radial-gradient(90% 60% at 100% 0%, rgba(22, 139, 255, 0.22), transparent 70%), rgba(6, 24, 39, 0.97);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  color: var(--white); overflow-y: auto; overscroll-behavior: contain;
  /* pulls down from under the bar */
  clip-path: inset(0 0 100% 0);
  transition: clip-path 560ms cubic-bezier(.7, 0, .2, 1);
}
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu-links { display: flex; flex-direction: column; }
.menu-links a {
  display: flex; align-items: baseline; gap: 16px; padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font: 800 clamp(38px, 11vw, 56px)/1 var(--display); text-transform: uppercase; letter-spacing: 0.01em;
  opacity: 0; transform: translateY(-14px);
  transition: color 200ms ease, opacity 360ms ease, transform 460ms cubic-bezier(.2, .8, .2, 1);
}
.menu-links a:hover, .menu-links a:focus-visible { color: var(--lime); }
.menu-num { font: 700 14px/1 var(--body); color: var(--lime); letter-spacing: 0; min-width: 22px; }
.menu-actions { display: grid; gap: 12px; opacity: 0; transform: translateY(14px); transition: opacity 360ms ease, transform 460ms cubic-bezier(.2, .8, .2, 1); }
.menu.is-open .menu-links a, .menu.is-open .menu-actions { opacity: 1; transform: none; }
.menu.is-open .menu-links a:nth-child(1) { transition-delay: 160ms; }
.menu.is-open .menu-links a:nth-child(2) { transition-delay: 210ms; }
.menu.is-open .menu-links a:nth-child(3) { transition-delay: 260ms; }
.menu.is-open .menu-links a:nth-child(4) { transition-delay: 310ms; }
.menu.is-open .menu-links a:nth-child(5) { transition-delay: 360ms; }
.menu.is-open .menu-actions { transition-delay: 420ms; }
.menu-quote { width: 100%; }
.menu-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.menu-contact-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.06); font-weight: 700; transition: background-color 200ms ease, border-color 200ms ease; }
.menu-contact-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); }
.menu-contact-btn svg { color: var(--lime); }
body.menu-open { overflow: hidden; }

@media (min-width: 981px) {
  .menu { display: none !important; }
}
@media (max-width: 980px) {
  .menu-button { display: grid; }
  .nav-links, .nav-links.open { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-button.spin { animation: none; }
}

/* ===================== Hero tag: frosted pill with a live dot ===================== */
.hero-eyebrow {
  position: relative; overflow: hidden; width: fit-content;
  gap: 10px; padding: 9px 16px 9px 14px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(22, 139, 255, 0.16), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(124, 192, 255, 0.35);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 30px -14px rgba(22, 139, 255, 0.7);
  color: #ffffff; font-size: 14px; letter-spacing: 0.02em;
}
/* a glint of light travels across now and then */
.hero-eyebrow::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-18deg); animation: eyebrow-glint 5s 2.2s ease-in-out infinite;
}
@keyframes eyebrow-glint { 0% { left: -40%; } 22%, 100% { left: 130%; } }
.hero-eyebrow .status-dot {
  position: relative; width: 8px; height: 8px; flex: none;
  background: #3ee08f; box-shadow: 0 0 10px rgba(62, 224, 143, 0.9);
}
.hero-eyebrow .status-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #3ee08f; animation: dot-ping 2s ease-out infinite;
}
@keyframes dot-ping { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(3.2); opacity: 0; } }
.eyebrow-sep { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.28); }
.eyebrow-sub { color: #9fd0ff; font-weight: 600; }
.hero-eyebrow > span { white-space: nowrap; }
@media (max-width: 480px) {
  .hero-eyebrow { font-size: 12.5px; letter-spacing: 0; gap: 7px; padding: 8px 12px 8px 11px; }
}
/* very narrow phones: just the place, so it never wraps */
@media (max-width: 374px) {
  .eyebrow-sep, .eyebrow-sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow::after, .hero-eyebrow .status-dot::after { animation: none; display: none; }
}

/* ===================== Three steps: cards that pop and take you there ===================== */
.step { display: block; padding: 0 22px; color: inherit; -webkit-tap-highlight-color: transparent; }
.step-card {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 26px 22px 24px; background: transparent; border: 1px solid transparent;
  transition: transform 380ms cubic-bezier(.2, .9, .25, 1.25), background-color 300ms ease, box-shadow 380ms ease, border-color 300ms ease;
}
.step-icon { transition: transform 420ms cubic-bezier(.2, .9, .25, 1.4), box-shadow 300ms ease; }
.step-go {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px;
  font-weight: 700; font-size: 15px; color: #0058b0; border-bottom: 2px solid currentColor;
  transition: gap 200ms ease;
}
.step h3 { transition: color 250ms ease; }
/* the pop: mouse hover, keyboard focus, a finger press, or (on phones) the card in the middle of the screen */
.step:hover .step-card, .step:focus-visible .step-card, .step.is-current .step-card {
  transform: translateY(-10px) scale(1.05);
  background: #ffffff; border-color: rgba(22, 139, 255, 0.35);
  box-shadow: 0 30px 60px -28px rgba(6, 24, 39, 0.45), 0 0 0 4px rgba(22, 139, 255, 0.08);
}
.step:hover .step-icon, .step:focus-visible .step-icon, .step.is-current .step-icon {
  transform: rotate(-6deg) scale(1.18);
  box-shadow: 0 14px 28px -10px rgba(22, 139, 255, 0.9);
}
.step:hover h3, .step:focus-visible h3, .step.is-current h3 { color: #0058b0; }
.step:hover .step-go, .step:focus-visible .step-go { gap: 13px; }
.step:active .step-card { transform: translateY(-4px) scale(0.98); transition-duration: 120ms; }
.step:focus-visible { outline: none; }
.step:focus-visible .step-card { outline: 3px solid var(--lime); outline-offset: 4px; }
@media (hover: none) {
  /* no hover on phones: the card nearest the middle of the screen pops instead */
  .step:hover .step-card { transform: none; background: transparent; border-color: transparent; box-shadow: none; }
  .step:hover .step-icon { transform: rotate(3deg); box-shadow: none; }
  .step:hover h3 { color: inherit; }
  .step.is-current .step-card { transform: translateY(-6px) scale(1.04); background: #ffffff; border-color: rgba(22, 139, 255, 0.35); box-shadow: 0 30px 60px -28px rgba(6, 24, 39, 0.45); }
  .step.is-current .step-icon { transform: rotate(-6deg) scale(1.18); box-shadow: 0 14px 28px -10px rgba(22, 139, 255, 0.9); }
  .step.is-current h3 { color: #0058b0; }
}
@media (max-width: 760px) {
  .step { padding: 0; }
  .step-card { padding: 22px 18px; }
}

/* ===================== Reviews: one at a time, fading through ===================== */
.rv { max-width: 980px; margin: 0 auto; --rv-time: 7000ms; }
.rv-stage { position: relative; padding-bottom: 26px; }
/* two cards peeking out behind, so it reads as a stack you can flick through */
.rv-ghost { position: absolute; left: 0; right: 0; top: 0; bottom: 26px; background: #ffffff; box-shadow: 0 24px 50px -32px rgba(6, 24, 39, 0.45); transition: transform 600ms cubic-bezier(.2, .8, .2, 1); }
.rv-ghost-1 { transform: translateY(13px) scale(0.965); opacity: 0.7; }
.rv-ghost-2 { transform: translateY(26px) scale(0.93); opacity: 0.4; }
.rv.is-moving .rv-ghost-1 { transform: translateY(6px) scale(0.985); }
.rv.is-moving .rv-ghost-2 { transform: translateY(16px) scale(0.955); }
.rv-card {
  position: relative; z-index: 1; margin: 0; display: flex; flex-direction: column; gap: 20px;
  min-height: var(--rv-h, 0px); padding: 46px 52px 34px;
  background: #ffffff; box-shadow: 0 30px 60px -30px rgba(6, 24, 39, 0.55);
  border-top: 4px solid var(--lime); overflow: hidden; touch-action: pan-y;
}
.rv-mark { position: absolute; right: 34px; top: -18px; font: 800 190px/1 var(--display); color: rgba(22, 139, 255, 0.12); pointer-events: none; transition: transform 700ms cubic-bezier(.2, .8, .2, 1); }
.rv.is-moving .rv-mark { transform: translateY(-10px) rotate(-6deg); }
.rv-stars .star-row { gap: 4px; }
.rv-quote { margin: 0; flex: 1; font: 500 clamp(18px, 2.1vw, 23px)/1.6 var(--body); color: var(--ink); text-transform: none; letter-spacing: 0; clip-path: none !important; transform: none !important; }
.rv-who { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.rv-who strong { display: block; font-size: 17px; }
.rv-who small { display: block; color: var(--muted); font-size: 14px; }
/* the swap: old words drift up and fade, new words rise in one after another */
.rv-word { display: inline-block; white-space: pre; }
.rv-card.is-out .rv-stars, .rv-card.is-out .rv-quote, .rv-card.is-out .rv-who { opacity: 0; transform: translateY(-12px) !important; filter: blur(4px); transition: opacity 280ms ease, transform 320ms ease, filter 280ms ease; }
.rv-card.is-in .rv-word { animation: rv-word-in 520ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--w) * 14ms); }
.rv-card.is-in .rv-stars, .rv-card.is-in .rv-who { animation: rv-word-in 520ms cubic-bezier(.2, .8, .2, 1) both; }
.rv-card.is-in .rv-who { animation-delay: 260ms; }
@keyframes rv-word-in { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.rv-card.is-in .rv-stars svg { animation: rv-star 420ms cubic-bezier(.2, .9, .3, 1.5) both; }
.rv-card.is-in .rv-stars svg:nth-child(2) { animation-delay: 60ms; }
.rv-card.is-in .rv-stars svg:nth-child(3) { animation-delay: 120ms; }
.rv-card.is-in .rv-stars svg:nth-child(4) { animation-delay: 180ms; }
.rv-card.is-in .rv-stars svg:nth-child(5) { animation-delay: 240ms; }
@keyframes rv-star { from { transform: scale(0) rotate(-40deg); } to { transform: none; } }

.rv-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.rv-btn { width: 48px; height: 48px; display: grid; place-items: center; background: #ffffff; border: 1px solid var(--line); color: var(--ink); transition: background-color 200ms ease, color 200ms ease, transform 150ms ease; }
.rv-btn:hover { background: var(--ink); color: #ffffff; }
.rv-btn:active { transform: scale(0.92); }
.rv-dots { display: flex; align-items: center; gap: 4px; padding: 0 8px; }
/* each dot is a 44px tap target; the visible bar fills while that review is showing */
.rv-dot { position: relative; width: 44px; height: 44px; display: grid; place-items: center; }
.rv-dot i { position: relative; display: block; width: 26px; height: 5px; overflow: hidden; background: rgba(6, 24, 39, 0.18); transition: width 300ms ease; }
.rv-dot[aria-current="true"] i { width: 40px; }
.rv-dot i::after { content: ""; position: absolute; inset: 0; background: var(--lime-deep); transform-origin: left; transform: scaleX(0); }
.rv-dot.is-done i::after { transform: scaleX(1); }
.rv-dot[aria-current="true"] i::after { transform: scaleX(1); }
.rv.is-playing .rv-dot[aria-current="true"] i::after { animation: rv-fill var(--rv-time) linear both; }
.rv.is-paused .rv-dot[aria-current="true"] i::after { animation-play-state: paused; }
@keyframes rv-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 760px) {
  .rv-card { padding: 34px 22px 26px; gap: 16px; }
  .rv-mark { font-size: 140px; right: 14px; top: -12px; }
  .rv-quote { font-size: 17px; }
  .rv-controls { gap: 6px; }
  .rv-dot { width: 36px; }
  .rv-dot i { width: 20px; }
  .rv-dot[aria-current="true"] i { width: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-card.is-out .rv-stars, .rv-card.is-out .rv-quote, .rv-card.is-out .rv-who { filter: none; transform: none !important; }
}

/* ===================== House windows: a "tap me" wiggle, one at a time ===================== */
.win { transform-box: fill-box; transform-origin: 50% 100%; }
.win.nudge { animation: win-nudge 760ms cubic-bezier(.36, .07, .19, .97) both; }
@keyframes win-nudge {
  0% { transform: none; }
  15% { transform: translateY(-4px) scale(1.07) rotate(-5deg); }
  32% { transform: translateY(-4px) scale(1.07) rotate(4deg); }
  48% { transform: translateY(-2px) scale(1.05) rotate(-3deg); }
  64% { transform: translateY(-1px) scale(1.03) rotate(1.5deg); }
  100% { transform: none; }
}
.win.nudge .win-frame { stroke: var(--lime); stroke-width: 3; }
@media (hover: hover) {
  .win:hover { transform: translateY(-3px) scale(1.06); transition: transform 200ms cubic-bezier(.2, .9, .3, 1.4); }
}
@media (prefers-reduced-motion: reduce) {
  .win.nudge { animation: none; }
}

/* ===================== Plans: animated tabs and card ===================== */
/* the dark block glides between tabs */
.plan-tabs { position: relative; }
.plan-glider { position: absolute; left: 0; top: 0; z-index: 0; background: var(--ink); box-shadow: 0 10px 24px -12px rgba(6, 24, 39, 0.8); pointer-events: none; opacity: 0; transition: transform 480ms cubic-bezier(.65, 0, .25, 1), width 480ms cubic-bezier(.65, 0, .25, 1), height 480ms ease; }
.plan-tabs.has-glider .plan-glider { opacity: 1; }
.plan-tabs button { z-index: 1; transition: color 300ms ease 80ms, transform 160ms ease; }
.plan-tabs.has-glider button.is-on { background: transparent; }
.plan-tabs button:not(.is-on):hover { color: var(--ink); }
.plan-tabs button:active { transform: scale(0.96); }
.plan-tabs button em { z-index: 2; animation: badge-bob 2.6s ease-in-out infinite; }
@keyframes badge-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -3px); } }

/* the card: a soft glow that drifts, and a fresh entrance on every switch */
.plan-card { animation: none; isolation: isolate; }
.plan-card > * { position: relative; z-index: 1; }
.plan-card::after { z-index: 0; animation: glow-drift 9s ease-in-out infinite alternate; }
@keyframes glow-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-90px, 60px) scale(1.25); } }
.plan-card.pc-enter { animation: pc-card 560ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes pc-card { from { transform: scale(0.985); box-shadow: 0 0 0 0 rgba(22, 139, 255, 0); } 40% { box-shadow: 0 0 0 4px rgba(22, 139, 255, 0.35); } to { transform: none; box-shadow: 0 0 0 0 rgba(22, 139, 255, 0); } }
/* a band of light wipes across, like a squeegee pass */
.pc-sweep { position: absolute !important; top: -20%; bottom: -20%; left: -30%; width: 22%; z-index: 2 !important; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(124, 192, 255, 0.22), rgba(255, 255, 255, 0.28), transparent); transform: skewX(-16deg); opacity: 0; }
.pc-enter .pc-sweep { animation: pc-sweep 900ms 80ms cubic-bezier(.5, 0, .3, 1) both; }
@keyframes pc-sweep { 0% { left: -30%; opacity: 1; } 100% { left: 120%; opacity: 1; } }
/* content slides in from the side of the tab you picked, one piece after another */
.pc-enter .plan-head, .pc-enter .plan-save > div, .pc-enter li, .pc-enter .plan-actions { animation: pc-in 560ms cubic-bezier(.2, .8, .2, 1) both; }
.pc-enter .plan-head { animation-delay: 60ms; }
.pc-enter .plan-save > div:nth-child(1) { animation-delay: 140ms; }
.pc-enter .plan-save > div:nth-child(2) { animation-delay: 220ms; }
.pc-enter li { animation-delay: calc(320ms + var(--i) * 80ms); }
.pc-enter .plan-actions { animation-delay: 560ms; }
@keyframes pc-in { from { opacity: 0; transform: translateX(var(--dx, 24px)); } to { opacity: 1; transform: none; } }
.pc-enter .plan-badge { animation: badge-pop 520ms 300ms cubic-bezier(.2, .9, .3, 1.5) both; }
@keyframes badge-pop { from { transform: scale(0.4) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
/* divider lines draw themselves */
.plan-save { border-block-color: transparent; position: relative; }
.plan-save::before, .plan-save::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, 0.14); transform-origin: left; }
.plan-save::before { top: -1px; }
.plan-save::after { bottom: -1px; }
.pc-enter .plan-save::before { animation: line-draw 700ms 120ms cubic-bezier(.6, 0, .2, 1) both; }
.pc-enter .plan-save::after { animation: line-draw 700ms 260ms cubic-bezier(.6, 0, .2, 1) both; }
@keyframes line-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* the savings numbers glow once they land */
.plan-save strong { display: inline-block; }
.plan-save strong.is-counted { animation: num-land 700ms ease both; }
@keyframes num-land { 0% { transform: scale(1); text-shadow: none; } 35% { transform: scale(1.06); text-shadow: 0 0 28px rgba(124, 192, 255, 0.8); } 100% { transform: scale(1); text-shadow: 0 0 0 rgba(124, 192, 255, 0); } }
/* ticks draw on */
.plan-card li svg path { stroke-dasharray: 22; stroke-dashoffset: 0; }
.pc-enter li svg path { animation: tick-draw 420ms ease both; animation-delay: calc(460ms + var(--i) * 80ms); }
@keyframes tick-draw { from { stroke-dashoffset: 22; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .plan-card::after, .plan-tabs button em { animation: none; }
  .plan-glider { transition: none; }
}

/* ===================== Service steps: a line that travels step to step ===================== */
.process-progress { display: none !important; }
.pt-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.pt-bg { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.pt-fg { fill: none; stroke: var(--lime); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(22, 139, 255, 0.9)); }
.pt-drop { fill: #ffffff; filter: drop-shadow(0 0 6px #7cc0ff) drop-shadow(0 0 12px var(--lime)); transition: opacity 400ms ease; }
.pt-drop.is-done { opacity: 0; }
.process-detail > * { position: relative; z-index: 1; }
.process-dot { position: absolute !important; z-index: 2 !important; animation: none; transition: background-color 250ms ease, border-color 250ms ease, box-shadow 250ms ease; }
.process-detail.is-lit .process-dot { background: var(--lime); border-color: #bfe0ff; box-shadow: 0 0 0 5px rgba(22, 139, 255, 0.25), 0 0 14px var(--lime); animation: dot-arrive 520ms cubic-bezier(.2, .9, .3, 1.5); }
@keyframes dot-arrive { 0% { transform: scale(1); } 40% { transform: scale(1.8); } 100% { transform: scale(1); } }
.process-detail > span:not(.process-dot) { transition: color 300ms ease, text-shadow 300ms ease; }
.process-detail:not(.is-lit) > span:not(.process-dot) { color: rgba(255, 255, 255, 0.75); }
.process-detail.is-lit > span:not(.process-dot) { text-shadow: 0 0 12px rgba(22, 139, 255, 0.8); }
@media (max-width: 760px) {
  /* phones: dots down the left with the line running between them */
  .process-dot { display: block !important; top: 31px; left: 28px; }
  .process-detail { padding-left: 62px; }
}

/* ===================== Service cards: livelier, and no overlapping text ===================== */
/* the link sits at the bottom of the card's flow instead of floating over the text */
.service-card { display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; isolation: isolate; --mx: 50%; --my: 30%;
  transition: background-color 300ms ease, color 300ms ease, transform 420ms cubic-bezier(.2, .9, .3, 1.2), box-shadow 420ms ease; }
.service-card > * { position: relative; z-index: 1; }
.service-card .service-number { position: absolute; z-index: 1; }
.service-action { position: static; margin-top: auto; padding-top: 22px; }
.service-card p { margin-bottom: 0; }

/* hover is a lighter lift with a spotlight; only the chosen card goes dark */
.service-card:hover:not(.is-active) { background: #f3f9ff; color: var(--ink); transform: translateY(-8px); box-shadow: 0 30px 60px -34px rgba(6, 24, 39, 0.5); }
.service-card:hover:not(.is-active) p { color: var(--muted); }
.service-card:hover:not(.is-active) .service-number { color: var(--lime-deep); }
.service-card::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 300ms ease;
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(22, 139, 255, 0.14), transparent 65%); }
.service-card.is-active::before { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(22, 139, 255, 0.28), transparent 65%); }
.service-card:hover::before, .service-card.is-active::before { opacity: 1; }
/* a blue bar grows along the bottom of the chosen card */
.service-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 1; background: linear-gradient(90deg, var(--lime-deep), #7cc0ff); transform: scaleX(0); transform-origin: left; transition: transform 600ms cubic-bezier(.65, 0, .25, 1); }
.service-card.is-active::after { transform: scaleX(1); }
.service-card:active { transform: translateY(-4px) scale(0.985); transition-duration: 120ms; }

/* the number slides and glows */
.service-number { transition: transform 400ms cubic-bezier(.2, .9, .3, 1.4), color 250ms ease; }
.service-card:hover .service-number, .service-card.is-active .service-number { transform: translateY(4px) scale(1.25); }
.service-card.is-active .service-number { color: #7cc0ff; }

/* a line draws under the title */
.service-card h3 { position: relative; line-height: 1.02; text-wrap: balance; } /* two-line card titles sit together */
.service-card h3::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 46px; height: 3px; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform 420ms cubic-bezier(.2, .8, .2, 1) 80ms; }
.service-card:hover h3::after, .service-card.is-active h3::after { transform: scaleX(1); }

/* the arrow points down to the open steps */
.service-card.is-active .service-action svg { transform: rotate(90deg); }

/* ---------- the icon: pops out, wiggles, settles back ---------- */
.service-icon { position: relative; transition: box-shadow 300ms ease, transform 300ms ease; box-shadow: 0 10px 22px -14px rgba(22, 139, 255, 0.9); }
.service-icon svg { transform-origin: 50% 60%; }
.service-icon::before { content: ""; position: absolute; inset: 0; border: 2px solid var(--lime); opacity: 0; pointer-events: none; }
.service-icon::after { content: ""; position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%); background-size: 250% 100%; background-position: 120% 0; opacity: 0; }
.service-card:hover .service-icon, .service-icon.is-popping { box-shadow: 0 18px 30px -12px rgba(22, 139, 255, 1); }
.service-card:hover .service-icon svg, .service-icon.is-popping svg { animation: icon-pop 900ms cubic-bezier(.3, .7, .3, 1) both; }
.service-card:hover .service-icon::before, .service-icon.is-popping::before { animation: icon-ring 800ms ease-out both; }
.service-card:hover .service-icon::after, .service-icon.is-popping::after { animation: icon-shine 900ms ease both; }
@keyframes icon-pop {
  0% { transform: none; }
  22% { transform: translateY(-12px) scale(1.28) rotate(-12deg); }
  40% { transform: translateY(-8px) scale(1.22) rotate(10deg); }
  56% { transform: translateY(-5px) scale(1.15) rotate(-6deg); }
  72% { transform: translateY(-2px) scale(1.08) rotate(3deg); }
  86% { transform: translateY(1px) scale(0.98) rotate(-1deg); }
  100% { transform: none; }
}
@keyframes icon-ring { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes icon-shine { 0% { background-position: 120% 0; opacity: 1; } 90% { opacity: 1; } 100% { background-position: -40% 0; opacity: 0; } }
/* each icon's own little detail */
.service-card:hover .service-icon svg path:nth-child(2), .service-icon.is-popping svg path:nth-child(2) { animation: icon-detail 900ms 120ms ease both; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes icon-detail { 0%, 100% { transform: none; } 35% { transform: scaleY(1.25); } 60% { transform: scaleY(0.9); } }
[data-service="1"]:hover .service-icon svg path, [data-service="1"] .service-icon.is-popping svg path { transform-box: fill-box; transform-origin: center; animation: twinkle 900ms ease both; }
[data-service="1"]:hover .service-icon svg path:nth-child(2), [data-service="1"] .service-icon.is-popping svg path:nth-child(2) { animation-delay: 180ms; }
@keyframes twinkle { 0%, 100% { transform: none; opacity: 1; } 30% { transform: scale(1.35) rotate(25deg); opacity: 0.6; } 60% { transform: scale(0.85); opacity: 1; } }
[data-service="2"] .service-icon svg path:nth-child(2) { stroke-dasharray: 16; }
[data-service="2"]:hover .service-icon svg path:nth-child(2), [data-service="2"] .service-icon.is-popping svg path:nth-child(2) { animation: tick-draw-16 600ms 250ms ease both; transform: none; }
@keyframes tick-draw-16 { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
/* a full spin when you pick a card */
.service-icon.is-spinning svg { animation: icon-spin 700ms cubic-bezier(.5, 0, .2, 1) both !important; }
@keyframes icon-spin { 0% { transform: none; } 50% { transform: rotate(200deg) scale(1.25); } 100% { transform: rotate(360deg); } }
/* drop in when the cards first appear */
.js .service-card.reveal .service-icon { transform: translateY(-26px) scale(0.6); opacity: 0; transition: transform 700ms cubic-bezier(.2, .9, .3, 1.5) calc(var(--delay, 0ms) + 250ms), opacity 400ms ease calc(var(--delay, 0ms) + 250ms), box-shadow 300ms ease; }
.js .service-card.reveal.is-visible .service-icon { transform: none; opacity: 1; }

@media (hover: none) {
  .service-card:hover:not(.is-active) { background: var(--white); transform: none; box-shadow: none; }
  .service-card:hover:not(.is-active) .service-icon svg { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .service-icon svg, .service-icon::before, .service-icon::after, .service-icon svg path { animation: none !important; }
  .js .service-card.reveal .service-icon { transform: none; opacity: 1; }
}

/* ===================== Why us: livelier, plus a "Don't believe us?" contact card ===================== */
/* a soft light drifts behind the section */
.difference::before { content: ""; position: absolute; width: 640px; height: 640px; right: -180px; top: -200px; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(22, 139, 255, 0.22), transparent 65%); animation: why-drift 14s ease-in-out infinite alternate; }
@keyframes why-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-260px, 360px) scale(1.3); } }
.difference > * { position: relative; z-index: 1; }

/* the photo panel tilts gently toward the mouse; its label floats */
.difference-image { transition: transform 500ms cubic-bezier(.2, .8, .2, 1), box-shadow 500ms ease; transform-style: preserve-3d; will-change: transform; }
.difference-image:hover { box-shadow: 0 40px 80px -40px rgba(22, 139, 255, 0.6); }
.image-label { animation: label-float 4.5s ease-in-out infinite; box-shadow: 0 16px 30px -16px rgba(0, 0, 0, 0.6); }
@keyframes label-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.image-label span { animation: label-spark 4.5s ease-in-out infinite; }
@keyframes label-spark { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-14deg) scale(1.15); } 86% { transform: rotate(10deg) scale(1.1); } }

/* checklist: rows slide in one by one, boxes pop, ticks draw on; rows light up on hover */
.check-item { position: relative; transition: background-color 300ms ease, padding 300ms ease; }
.check-item::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 3px; background: var(--lime); transform: scaleY(0); transform-origin: top; transition: transform 300ms ease; }
.check-item:hover { background: rgba(22, 139, 255, 0.07); padding-left: 16px; }
.check-item:hover::before { transform: scaleY(1); }
.check-item > span { transition: transform 400ms cubic-bezier(.2, .9, .3, 1.5); }
.check-item:hover > span { transform: rotate(-8deg) scale(1.15); }
.check-item svg path { stroke-dasharray: 20; stroke-dashoffset: 0; }
.js .difference-copy.reveal .check-item { opacity: 0; transform: translateX(34px); transition: opacity 600ms ease, transform 700ms cubic-bezier(.2, .8, .2, 1), background-color 300ms ease, padding 300ms ease; }
.js .difference-copy.reveal.is-visible .check-item { opacity: 1; transform: none; }
.js .difference-copy.reveal.is-visible .check-item:nth-child(1) { transition-delay: 500ms, 500ms, 0ms, 0ms; }
.js .difference-copy.reveal.is-visible .check-item:nth-child(2) { transition-delay: 640ms, 640ms, 0ms, 0ms; }
.js .difference-copy.reveal.is-visible .check-item:nth-child(3) { transition-delay: 780ms, 780ms, 0ms, 0ms; }
.js .difference-copy.reveal.is-visible .check-item > span { animation: box-pop 520ms cubic-bezier(.2, .9, .3, 1.5) both; }
.js .difference-copy.reveal.is-visible .check-item svg path { animation: tick-in 420ms ease both; }
.js .difference-copy.reveal.is-visible .check-item:nth-child(1) > span, .js .difference-copy.reveal.is-visible .check-item:nth-child(1) svg path { animation-delay: 700ms; }
.js .difference-copy.reveal.is-visible .check-item:nth-child(2) > span, .js .difference-copy.reveal.is-visible .check-item:nth-child(2) svg path { animation-delay: 840ms; }
.js .difference-copy.reveal.is-visible .check-item:nth-child(3) > span, .js .difference-copy.reveal.is-visible .check-item:nth-child(3) svg path { animation-delay: 980ms; }
@keyframes box-pop { from { transform: scale(0) rotate(-45deg); } to { transform: none; } }
@keyframes tick-in { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }

/* ---------- the contact card ---------- */
.trust-call { position: relative; margin: -10px 0 40px; padding: 22px; max-width: 520px; overflow: hidden; isolation: isolate;
  background: linear-gradient(150deg, rgba(22, 139, 255, 0.16), rgba(255, 255, 255, 0.04)); border: 1px solid rgba(124, 192, 255, 0.3);
  box-shadow: 0 24px 50px -30px rgba(22, 139, 255, 0.7); }
/* a light runs round the edge */
.trust-call::before { content: ""; position: absolute; inset: -1px; z-index: -1; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--tc-angle, 0deg), transparent 0 70%, rgba(124, 192, 255, 0.9) 80%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: tc-spin 5s linear infinite; }
@property --tc-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes tc-spin { to { --tc-angle: 360deg; } }
.trust-call-top { display: flex; align-items: center; gap: 16px; }
.trust-faces { display: flex; flex: none; }
.trust-faces span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--ink); font: 800 20px/1 var(--display); border: 3px solid var(--ink); }
.trust-faces span + span { margin-left: -12px; background: #7cc0ff; }
.trust-call-title { margin: 0; font: 800 28px/1 var(--display); text-transform: uppercase; color: var(--white); }
.trust-call-sub { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }
.trust-call-actions { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; margin-top: 18px; }
.trust-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 16px; font-weight: 700; font-size: 15px; white-space: nowrap; }
.trust-btn-text { position: relative; overflow: hidden; color: var(--white); border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.06); transition: background-color 200ms ease, border-color 200ms ease; }
.trust-btn-text:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.5); }
.trust-ico { position: relative; display: grid; place-items: center; }
/* the phone gives a little ring every few seconds */
.trust-ico-call svg { animation: phone-ring 4s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes phone-ring { 0%, 76%, 100% { transform: none; } 79% { transform: rotate(-18deg); } 82% { transform: rotate(16deg); } 85% { transform: rotate(-14deg); } 88% { transform: rotate(10deg); } 91% { transform: rotate(-5deg); } }
.trust-ico-call::before { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid rgba(6, 24, 39, 0.45); opacity: 0; animation: ring-wave 4s ease-out infinite; pointer-events: none; }
@keyframes ring-wave { 0%, 76% { transform: scale(0.6); opacity: 0; } 80% { opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } }
/* the text bubble shows someone typing */
.trust-ico-text svg { color: #7cc0ff; }
.trust-dots { position: absolute; left: 50%; top: 42%; display: flex; gap: 2px; transform: translate(-50%, -50%); }
.trust-dots b { width: 3px; height: 3px; border-radius: 50%; background: #7cc0ff; animation: dot-type 1.4s ease-in-out infinite; }
.trust-dots b:nth-child(2) { animation-delay: 160ms; }
.trust-dots b:nth-child(3) { animation-delay: 320ms; }
@keyframes dot-type { 0%, 60%, 100% { transform: none; opacity: 0.4; } 30% { transform: translateY(-2px); opacity: 1; } }
/* card slides up after the paragraph */
.js .difference-copy.reveal .trust-call { opacity: 0; transform: translateY(18px) scale(0.98); transition: opacity 600ms ease 300ms, transform 700ms cubic-bezier(.2, .8, .2, 1) 300ms; }
.js .difference-copy.reveal.is-visible .trust-call { opacity: 1; transform: none; }

@media (max-width: 520px) {
  .trust-call { padding: 18px; }
  .trust-call-title { font-size: 24px; }
  .trust-call-actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .difference::before, .image-label, .image-label span, .trust-call::before, .trust-ico-call svg, .trust-ico-call::before, .trust-dots b { animation: none !important; }
  .difference-image { transform: none !important; }
}

/* ===================== Contact card: compact, with new motion ===================== */
.trust-call { margin: -14px 0 32px; padding: 14px 14px 14px 16px; max-width: 460px; transition: transform 350ms cubic-bezier(.2, .9, .3, 1.3), box-shadow 350ms ease; }
.trust-call:hover { transform: translateY(-3px); box-shadow: 0 28px 50px -26px rgba(22, 139, 255, 0.9); }
.trust-call-top { gap: 12px; }
.trust-faces span { width: 34px; height: 34px; font-size: 16px; border-width: 2px; }
.trust-faces span + span { margin-left: -9px; }
.trust-call-title { font-size: 21px; }
.trust-call-sub { margin-top: 3px; font-size: 13px; }
.trust-call-actions { grid-template-columns: 1.4fr 1fr; gap: 8px; margin-top: 12px; }
.trust-btn { min-height: 44px; padding: 0 12px; font-size: 14px; gap: 8px; }
.trust-btn svg { width: 18px; height: 18px; }
.trust-ico-call::before { width: 24px; height: 24px; margin: -12px 0 0 -12px; }

/* the two faces take turns bobbing, like they're chatting */
.trust-faces span { animation: face-chat 3.2s ease-in-out infinite; }
.trust-faces span + span { animation-delay: 1.6s; }
@keyframes face-chat { 0%, 30%, 100% { transform: none; } 10% { transform: translateY(-4px) rotate(-6deg); } 20% { transform: translateY(0) rotate(3deg); } }
/* a speech bubble pops from the faces now and then */
.trust-faces { position: relative; }
.trust-faces::after { content: "Hi!"; position: absolute; left: 50%; top: -14px; padding: 2px 6px; background: #ffffff; color: var(--ink); font: 700 10px/1.2 var(--body); white-space: nowrap; transform-origin: 0 100%; opacity: 0; animation: say-hi 6s ease-in-out 1.5s infinite; }
@keyframes say-hi { 0%, 8%, 30%, 100% { opacity: 0; transform: scale(0.4) translateY(4px); } 12%, 26% { opacity: 1; transform: none; } }
/* buttons slide in from either side when the card appears */
.js .difference-copy.reveal .trust-btn-call { opacity: 0; transform: translateX(-24px); }
.js .difference-copy.reveal .trust-btn-text { opacity: 0; transform: translateX(24px); }
.js .difference-copy.reveal .trust-btn { transition: opacity 500ms ease 650ms, transform 650ms cubic-bezier(.2, .9, .3, 1.3) 650ms, background-color 200ms ease, border-color 200ms ease; }
.js .difference-copy.reveal.is-visible .trust-btn { opacity: 1; transform: none; }
/* a glint sweeps across the Call button every few seconds */
.trust-btn-call::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -40%; width: 30%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent); transform: skewX(-18deg); animation: call-glint 4s ease-in-out 2s infinite; opacity: 1; }
@keyframes call-glint { 0%, 60% { left: -40%; } 85%, 100% { left: 130%; } }
.trust-btn:hover svg { transform: scale(1.15); transition: transform 200ms ease; }
@media (max-width: 520px) {
  .trust-call { padding: 14px; }
  .trust-call-title { font-size: 20px; }
  .trust-call-actions { grid-template-columns: 1fr 1fr; }
  .trust-num { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .trust-faces span, .trust-faces::after, .trust-btn-call::after { animation: none !important; }
  .trust-faces::after { display: none; }
}

/* ===================== Footer: bigger, with contact, socials (coming soon) ===================== */
footer.ft { display: block; position: relative; overflow: hidden; isolation: isolate; padding: 0 clamp(24px, 5vw, 76px) 28px; background: #041318; color: rgba(255, 255, 255, 0.72); text-align: left; }
/* giant faded name across the bottom, with a light sweeping through it */
.ft-watermark { position: absolute; left: 50%; bottom: -0.18em; z-index: -1; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font: 800 clamp(80px, 15vw, 230px)/1 var(--display); letter-spacing: 0.02em; color: transparent; -webkit-text-stroke: 1px rgba(124, 192, 255, 0.14);
  background: linear-gradient(100deg, transparent 40%, rgba(124, 192, 255, 0.35) 50%, transparent 60%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text;
  animation: ft-sweep 7s ease-in-out infinite; }
@keyframes ft-sweep { 0% { background-position: 120% 0; } 60%, 100% { background-position: -40% 0; } }
footer.ft::before { content: ""; position: absolute; width: 700px; height: 700px; left: -250px; top: -300px; z-index: -1; pointer-events: none; background: radial-gradient(circle, rgba(22, 139, 255, 0.16), transparent 65%); animation: why-drift 16s ease-in-out infinite alternate; }

/* call to action strip */
.ft-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; margin: 0 auto; max-width: 1240px; padding: 56px 0 46px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.ft-cta-kicker { margin: 0 0 6px; color: var(--lime); font-weight: 700; font-size: 14px; }
.ft-cta-title { margin: 0; font: 800 clamp(34px, 4.6vw, 58px)/0.95 var(--display); text-transform: uppercase; color: var(--white); }
.ft-cta-title span { background: linear-gradient(90deg, #168bff 0%, #70b9ff 45%, #168bff 100%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: text-glow 6s linear infinite; }
.ft-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.ft-cta-call { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; color: var(--white); font-weight: 700; border-bottom: 2px solid rgba(124, 192, 255, 0.5); transition: border-color 200ms ease; }
.ft-cta-call:hover { border-color: var(--lime); }
.ft-cta-call svg { color: var(--lime); animation: phone-ring 4s ease-in-out 1s infinite; }

/* columns */
.ft-grid { display: grid; grid-template-columns: 1.25fr 0.8fr 1fr 1.35fr; gap: 40px; max-width: 1240px; margin: 0 auto; padding: 50px 0 54px; }
.ft-col { min-width: 0; }
.ft-about .footer-brand { font-size: 22px; margin-bottom: 16px; }
.ft-about p { margin: 0 0 18px; font-size: 14px; line-height: 1.7; max-width: 32ch; }
.ft-chip { font-size: 14px; }
.ft-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; font: 800 20px/1 var(--display); text-transform: uppercase; color: var(--white); letter-spacing: 0.02em; }
.ft-links { display: grid; gap: 4px; }
.ft-links a { position: relative; display: inline-flex; align-items: center; min-height: 34px; font-size: 15px; color: rgba(255, 255, 255, 0.72); transition: color 200ms ease, transform 250ms ease; }
.ft-links a::before { content: ""; width: 0; height: 2px; margin-right: 0; background: var(--lime); transition: width 250ms ease, margin 250ms ease; }
.ft-links a:hover { color: var(--white); }
.ft-links a:hover::before { width: 14px; margin-right: 8px; }
.ft-contact { display: grid; gap: 10px; }
.ft-contact a, .ft-static, .ft-email-soon { display: flex; align-items: center; gap: 12px; min-height: 48px; color: var(--white); font-weight: 600; font-size: 15px; }
.ft-contact small { display: block; font: 500 12px/1.2 var(--body); color: rgba(255, 255, 255, 0.6); }
.ft-ci { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: rgba(22, 139, 255, 0.14); border: 1px solid rgba(124, 192, 255, 0.3); color: #7cc0ff; transition: background-color 250ms ease, color 250ms ease, transform 350ms cubic-bezier(.2, .9, .3, 1.5); }
.ft-contact a:hover .ft-ci { background: var(--lime); color: var(--ink); transform: rotate(-8deg) scale(1.08); }
.ft-email-soon > span:last-child > span { color: rgba(255, 255, 255, 0.6); font-weight: 500; }

/* socials: coming soon, but make it exciting */
.ft-soon-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; background: rgba(62, 224, 143, 0.12); border: 1px solid rgba(62, 224, 143, 0.4); color: #8ff0bf; font: 700 11px/1 var(--body); text-transform: none; letter-spacing: 0; }
.ft-soon-pill i { width: 7px; height: 7px; border-radius: 50%; background: #3ee08f; box-shadow: 0 0 8px #3ee08f; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }
.ft-social-note { margin: 0 0 16px; font-size: 14px; line-height: 1.6; }
.soc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.soc { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px 8px 8px; overflow: hidden; isolation: isolate;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--white); font-weight: 700; font-size: 14px; cursor: default; outline-offset: 3px; }
.soc-ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); color: #ffffff; transition: transform 400ms cubic-bezier(.2, .9, .3, 1.5), background-color 300ms ease; }
.soc-name { flex: 1; min-width: 0; }
.soc-badge { padding: 3px 7px; background: rgba(124, 192, 255, 0.16); color: #9fd0ff; font: 700 10px/1.2 var(--body); text-transform: uppercase; letter-spacing: 0.06em; }
/* each tile shimmers in turn, like it's loading up */
.soc-soon::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(124, 192, 255, 0.16) 50%, transparent 70%); background-size: 250% 100%; animation: soc-shimmer 4s ease-in-out infinite; animation-delay: calc(var(--k) * 0.5s); }
@keyframes soc-shimmer { 0% { background-position: 130% 0; } 50%, 100% { background-position: -30% 0; } }
.soc-soon .soc-badge { animation: badge-blink 4s ease-in-out infinite; animation-delay: calc(var(--k) * 0.5s); }
@keyframes badge-blink { 0%, 100% { background: rgba(124, 192, 255, 0.16); } 12% { background: rgba(124, 192, 255, 0.45); color: #ffffff; } 24% { background: rgba(124, 192, 255, 0.16); } }
/* brand colour on hover/focus, and a "Coming soon" note slides up */
.soc-soon::after { content: "Coming soon"; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(4, 19, 24, 0.92); color: var(--white); font: 800 16px/1 var(--display); text-transform: uppercase; letter-spacing: 0.05em; transform: translateY(101%); transition: transform 300ms cubic-bezier(.2, .8, .2, 1); }
.soc-soon:hover::after, .soc-soon:focus-visible::after { transform: none; }
.soc-soon:nth-child(1) .soc-ico { background: rgba(24, 119, 242, 0.25); }
.soc-soon:nth-child(2) .soc-ico { background: linear-gradient(135deg, rgba(254, 218, 117, 0.35), rgba(214, 41, 118, 0.35), rgba(79, 91, 213, 0.35)); }
.soc-soon:nth-child(3) .soc-ico { background: rgba(255, 255, 255, 0.1); box-shadow: -2px 0 0 rgba(37, 244, 238, 0.6), 2px 0 0 rgba(254, 44, 85, 0.6); }
.soc-soon:nth-child(4) .soc-ico { background: rgba(255, 0, 0, 0.25); }
.soc:hover .soc-ico { transform: rotate(-10deg) scale(1.1); }
.soc-live { cursor: pointer; border-color: rgba(242, 181, 58, 0.45); transition: background-color 250ms ease; }
.soc-live .soc-ico { background: rgba(242, 181, 58, 0.2); color: #f2b53a; }
.soc-live:hover { background: rgba(242, 181, 58, 0.1); }
.soc-badge-live { background: rgba(62, 224, 143, 0.16); color: #8ff0bf; }

/* bottom bar */
.ft-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; max-width: 1240px; margin: 0 auto; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.ft-base .copyright { font-size: 13px; }
.ft-top { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.2); color: var(--white); font-weight: 700; transition: background-color 200ms ease, border-color 200ms ease; }
.ft-top:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.4); }
.ft-top svg { transition: transform 300ms cubic-bezier(.2, .9, .3, 1.5); }
.ft-top:hover svg { transform: translateY(-4px); }

/* columns rise in one after another */
.js .ft .ft-cta, .js .ft .ft-col { opacity: 0; transform: translateY(26px); transition: opacity 700ms ease, transform 800ms cubic-bezier(.2, .8, .2, 1); }
.js .ft.is-in .ft-cta, .js .ft.is-in .ft-col { opacity: 1; transform: none; }
.js .ft.is-in .ft-col:nth-child(1) { transition-delay: 150ms; }
.js .ft.is-in .ft-col:nth-child(2) { transition-delay: 260ms; }
.js .ft.is-in .ft-col:nth-child(3) { transition-delay: 370ms; }
.js .ft.is-in .ft-col:nth-child(4) { transition-delay: 480ms; }
.js .ft.is-in .soc-grid .soc { animation: soc-pop 520ms cubic-bezier(.2, .9, .3, 1.5) both; animation-delay: calc(650ms + var(--k) * 90ms); }
@keyframes soc-pop { from { opacity: 0; transform: scale(0.85) translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 1100px) { .ft-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  footer.ft { padding-bottom: 110px; text-align: left; justify-items: stretch; }
  .ft-cta { padding: 46px 0 36px; }
  .ft-cta-actions, .ft-cta-actions .button { width: 100%; }
  .ft-grid { grid-template-columns: 1fr; gap: 34px; padding: 40px 0; }
  .ft-links { grid-template-columns: 1fr 1fr; }
  .ft-base { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-watermark, footer.ft::before, .ft-cta-title span, .ft-cta-call svg, .ft-soon-pill i, .soc-soon::before, .soc-soon .soc-badge { animation: none !important; }
}
/* badge tucked into the tile's corner so names never collide */
.soc { padding-right: 14px; }
.soc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-soon .soc-badge { position: absolute; top: 0; right: 0; padding: 2px 6px; font-size: 9px; }
.soc-soon::after { background: #062033; }

/* ===================== Rating badges: stars load up to 5, then the score goes wild ===================== */
.rating-chip strong { display: inline-block; min-width: 1.9em; text-align: center; font-variant-numeric: tabular-nums; }
.rating-chip .star-row svg { transition: color 200ms ease; }
/* waiting to play: dim, small stars */
.rating-chip.rc-ready .star-row svg { color: rgba(255, 255, 255, 0.22); transform: scale(0.6); }
.rating-chip.dark, .est-proof .rating-chip { --rc-dim: rgba(6, 24, 39, 0.2); }
.rating-chip.dark.rc-ready .star-row svg, .est-proof .rating-chip.rc-ready .star-row svg { color: var(--rc-dim); }
.rating-chip.dark.rc-play strong, .est-proof .rating-chip.rc-play strong { --rc-gold: #c98a00; }
/* each star pops in gold, one after another */
.rating-chip.rc-play .star-row svg { animation: rc-star 420ms cubic-bezier(.2, .9, .3, 1.6) both; animation-delay: calc(var(--s) * 150ms); }
@keyframes rc-star {
  0% { color: var(--rc-dim, rgba(255, 255, 255, 0.22)); transform: scale(0.5) rotate(-35deg); }
  55% { color: #ffd76a; transform: scale(1.45) rotate(12deg); filter: drop-shadow(0 0 6px rgba(242, 181, 58, 0.9)); }
  100% { color: #f2b53a; transform: none; filter: none; }
}
/* then the 5.0 shakes like crazy */
.rating-chip.rc-play strong { animation: rc-shake 800ms cubic-bezier(.36, .07, .19, .97) 860ms both; }
@keyframes rc-shake {
  0% { transform: none; }
  8% { transform: translate(-3px, 1px) rotate(-12deg) scale(1.35); color: var(--rc-gold, #ffd76a); text-shadow: 0 0 14px rgba(242, 181, 58, 0.95); }
  16% { transform: translate(3px, -2px) rotate(11deg) scale(1.4); }
  24% { transform: translate(-3px, 2px) rotate(-10deg) scale(1.38); }
  32% { transform: translate(3px, -1px) rotate(9deg) scale(1.35); }
  40% { transform: translate(-2px, 1px) rotate(-8deg) scale(1.32); }
  48% { transform: translate(2px, -2px) rotate(7deg) scale(1.28); }
  56% { transform: translate(-2px, 1px) rotate(-5deg) scale(1.22); }
  64% { transform: translate(1px, 0) rotate(4deg) scale(1.16); }
  76% { transform: translate(-1px, 0) rotate(-2deg) scale(1.08); text-shadow: 0 0 10px rgba(242, 181, 58, 0.6); }
  100% { transform: none; text-shadow: none; }
}
/* the whole chip gives a little bump as the score lands */
.rating-chip.rc-play { animation: rc-bump 500ms ease 860ms both; }
@keyframes rc-bump { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 181, 58, 0); } 40% { box-shadow: 0 0 0 4px rgba(242, 181, 58, 0.3); } }
@media (prefers-reduced-motion: reduce) {
  .rating-chip.rc-ready .star-row svg { color: #f2b53a; transform: none; }
  .rating-chip.rc-play, .rating-chip.rc-play strong, .rating-chip.rc-play .star-row svg { animation: none !important; }
}
.rating-chip.rc-ready strong { opacity: 0.3; }

/* ===================== Tap your windows: storey sweep, house rebuild, livelier panel ===================== */
/* storey buttons: a dark block glides to the one picked */
.est-storeys { position: relative; }
.est-glider { position: absolute; left: 0; top: 0; z-index: 0; background: var(--ink); pointer-events: none; opacity: 0; box-shadow: 0 10px 22px -12px rgba(6, 24, 39, 0.8); transition: transform 480ms cubic-bezier(.65, 0, .25, 1), width 480ms ease, height 480ms ease; }
.est-storeys.has-glider .est-glider { opacity: 1; }
.est-storeys button { position: relative; z-index: 1; transition: color 250ms ease 100ms, background-color 180ms ease, border-color 180ms ease, transform 150ms ease; }
.est-storeys.has-glider button.is-on { background: transparent; border-color: transparent; }
.est-storeys button:active { transform: scale(0.95); }

/* the house grows and shrinks smoothly */
.house-stage { position: relative; overflow: hidden; margin: 0 -8px; padding: 0 8px; }
.house { transition: height 650ms cubic-bezier(.65, 0, .25, 1); }

/* the big sweep: a blue squeegee band with the new storey count crosses the house */
.est-swipe { position: absolute; top: -4px; bottom: -4px; left: -70%; right: -70%; z-index: 3; display: grid; place-items: center; pointer-events: none; transform: translateX(-90%) skewX(-8deg);
  background: linear-gradient(90deg, transparent 0%, rgba(22, 139, 255, 0.4) 14%, #168bff 26%, #0a6fd6 66%, rgba(10, 111, 214, 0.8) 76%, transparent 86%); }
/* the white rubber blade on its leading edge, and droplets flicking off it */
.est-swipe::before { content: ""; position: absolute; top: 0; bottom: 0; right: 24%; width: 6px; background: linear-gradient(180deg, #ffffff, #cfe6ff, #ffffff); box-shadow: 0 0 18px rgba(255, 255, 255, 0.95), 0 0 40px rgba(124, 192, 255, 0.9); }
.est-swipe::after { content: ""; position: absolute; top: 0; bottom: 0; right: 20%; width: 30px;
  background: radial-gradient(circle at 30% 20%, #fff 0 2px, transparent 3px), radial-gradient(circle at 70% 45%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 40% 70%, #fff 0 2px, transparent 3px), radial-gradient(circle at 80% 88%, #fff 0 1.5px, transparent 2.5px); opacity: 0.85; }
.est-swipe-label { position: absolute; left: 50%; top: 50%; z-index: 4; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; font: 800 clamp(40px, 7vw, 64px)/1 var(--display); text-transform: uppercase; color: #ffffff; letter-spacing: 0.02em; text-shadow: 0 6px 24px rgba(6, 24, 39, 0.45); white-space: nowrap; }
.house-stage.is-swiping .est-swipe { animation: est-swipe 1050ms cubic-bezier(.5, 0, .3, 1) both; }
.house-stage.is-swiping .est-swipe-label { animation: est-label 1050ms ease both; }
@keyframes est-swipe { 0% { transform: translateX(-90%) skewX(-8deg); } 100% { transform: translateX(90%) skewX(-8deg); } }
@keyframes est-label { 0%, 33% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); } 42%, 55% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 64%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); } }

/* the rebuild: floors flow up from the ground one after another, then the roof drops on */
.h-floor, .h-roof { transform-box: fill-box; transform-origin: 50% 100%; }
.house.is-building .h-floor { animation: floor-up 620ms cubic-bezier(.2, .9, .3, 1.25) both; animation-delay: calc(var(--f) * 160ms + 60ms); }
@keyframes floor-up { 0% { opacity: 0; transform: translateY(70px); } 50% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.house.is-building .h-roof { animation: roof-drop 700ms cubic-bezier(.2, .9, .3, 1.45) both; animation-delay: calc(var(--n) * 160ms + 60ms); }
@keyframes roof-drop { 0% { opacity: 0; transform: translateY(-60px) rotate(-4deg); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.house.is-building .house-door { animation: door-pop 500ms cubic-bezier(.2, .9, .3, 1.6) 420ms both; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes door-pop { from { transform: scaleY(0); } to { transform: none; } }
.house.is-building .win { animation: win-pop 420ms cubic-bezier(.2, .9, .3, 1.6) both; animation-delay: calc(var(--f, 0) * 160ms + 300ms); }
.house.is-building .h-floor .win { animation-delay: inherit; }
@keyframes win-pop { from { transform: scale(0.3); opacity: 0; } to { transform: none; opacity: 1; } }

/* window count bounces, the price shines when it changes */
#est-count { display: inline-block; }
#est-count.bump { animation: est-bump 420ms cubic-bezier(.2, .9, .3, 1.6); }
@keyframes est-bump { 40% { transform: scale(1.3) translateY(-4px); color: #4aa6ff; } }
.est-price { position: relative; overflow: hidden; }
.est-price::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(124, 192, 255, 0.35), transparent); transform: skewX(-16deg); opacity: 0; }
.est-price.is-new::after { animation: price-shine 800ms ease both; }
@keyframes price-shine { 0% { left: -40%; opacity: 1; } 100% { left: 130%; opacity: 1; } }
.est-price.is-new strong { animation: price-pop 520ms cubic-bezier(.2, .9, .3, 1.5); }
@keyframes price-pop { 40% { transform: scale(1.06); text-shadow: 0 0 22px rgba(124, 192, 255, 0.7); } }
.est-price strong { display: inline-block; transform-origin: left center; }

/* springy switch and steppers */
.est-switch::after { transition: transform 360ms cubic-bezier(.2, .9, .3, 1.6), width 200ms ease; }
.est-toggle:active .est-switch::after { width: 26px; }
.est-extra button { transition: transform 150ms ease, background-color 180ms ease; }
.est-extra button:active:not(:disabled) { transform: scale(0.88); }
#est-extra.bump { animation: est-bump 380ms cubic-bezier(.2, .9, .3, 1.6); display: inline-block; }
/* a glint crosses the main button every few seconds */
.est-cta::after { animation: cta-glint 5s ease-in-out 2s infinite; }
@keyframes cta-glint { 0%, 70% { transform: translateX(0) skewX(-18deg); opacity: 0; } 72% { opacity: 1; } 92%, 100% { transform: translateX(420%) skewX(-18deg); opacity: 0; } }
/* the promise shield pulses softly */
.contact-note svg { animation: shield-pulse 3s ease-in-out infinite; }
@keyframes shield-pulse { 0%, 100% { transform: none; filter: none; } 50% { transform: scale(1.12); filter: drop-shadow(0 0 8px rgba(22, 139, 255, 0.9)); } }

@media (prefers-reduced-motion: reduce) {
  .house, .est-glider { transition: none; }
  .est-swipe { display: none; }
  .est-cta::after, .contact-note svg { animation: none !important; }
}

/* ===================== Tap your windows: compact, fits on one screen ===================== */
.quote-section { padding: 84px clamp(24px, 6vw, 110px); gap: 56px; }
.quote-copy > p { margin: 22px 0 26px; }
.house-stage { display: flex; justify-content: center; }
.house { margin: 0 auto; transition: height 650ms cubic-bezier(.65, 0, .25, 1), width 650ms cubic-bezier(.65, 0, .25, 1); }
.est-house { padding: 18px 20px; gap: 12px; }
.est-storeys button { min-height: 42px; }
.est-house-actions { flex-wrap: nowrap; gap: 10px; }
.est-house-actions > button { min-height: 42px; padding: 0 14px; white-space: nowrap; }
.est-extra { gap: 6px; font-size: 13px; white-space: nowrap; }
.est-extra button { width: 42px; min-height: 42px; }
/* panel: count beside the switch, rating beside the contact line */
.est-panel { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "label label" "count toggle" "price price" "cta cta" "proof contact"; align-items: center; gap: 10px 16px; padding: 20px 22px; }
.est-panel > .est-label:first-child { grid-area: label; }
.est-panel > .est-count { grid-area: count; }
.est-panel > .est-toggle { grid-area: toggle; justify-self: end; font-size: 14px; min-height: 44px; }
.est-panel > .est-price { grid-area: price; padding: 14px 18px; }
.est-panel > .est-cta { grid-area: cta; min-height: 52px; }
.est-panel > .est-proof { grid-area: proof; }
.est-panel > .est-contact { grid-area: contact; justify-self: end; text-align: right; font-size: 13px; }
.est-count span { font-size: 48px; }
.est-price strong { font-size: 42px; }
.est-price .est-hint { font-size: 26px; }
.est-note { font-size: 13px; }
.est-proof .rating-chip { font-size: 13px; min-height: 44px; padding: 6px 12px 6px 10px; }

/* mid-size screens: heading above, house and price side by side */
@media (min-width: 761px) and (max-width: 1100px) {
  .quote-section { grid-template-columns: 1fr; gap: 28px; padding: 70px clamp(24px, 5vw, 60px); }
  .quote-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "eye eye" "h2 p" "h2 note"; column-gap: 40px; align-items: end; }
  .quote-copy > .eyebrow { grid-area: eye; }
  .quote-copy > h2 { grid-area: h2; align-self: start; }
  .quote-copy > p { grid-area: p; margin: 0 0 12px; max-width: none; }
  .quote-copy > .contact-note { grid-area: note; padding-top: 14px; max-width: none; }
  .estimator { grid-template-columns: 1.05fr 0.95fr; }
  .est-panel { border-left: 1px solid var(--line); border-top: 0; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .quote-section h2 { font-size: clamp(48px, 7vw, 72px); }
}
/* phones: tighter still */
@media (max-width: 760px) {
  .quote-section { padding: 64px 16px; gap: 26px; }
  .quote-copy > p { margin: 14px 0 0; }
  .quote-copy .contact-note { display: none; }
  .est-house { padding: 14px; gap: 10px; }
  .est-house-actions { justify-content: space-between; }
  .est-house-actions > button { padding: 0 12px; font-size: 14px; }
  .est-panel { padding: 14px; gap: 8px 12px; grid-template-areas: "label label" "count toggle" "price price" "cta cta" "proof proof"; }
  .est-panel > .est-contact { display: none; }
  .est-count span { font-size: 40px; }
  .est-count { font-size: 20px; }
  .est-panel > .est-toggle { font-size: 13px; gap: 8px; }
  .est-price strong { font-size: 34px; }
  .est-price .est-hint { font-size: 22px; }
  .est-panel > .est-price { padding: 12px 14px; }
  .est-panel > .est-cta { min-height: 50px; }
  .est-proof { justify-self: center; }
}
.est-panel > .est-toggle { white-space: nowrap; }
.est-panel { min-width: 0; }
.estimator > * { min-width: 0; }
@media (max-width: 760px) {
  .est-house-actions { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
  .est-panel > .est-toggle { white-space: normal; }
}
.est-panel { grid-template-columns: auto minmax(0, 1fr); }
.est-panel > .est-toggle { white-space: normal; text-align: left; }
.est-panel > .est-contact { white-space: nowrap; }
@media (max-width: 760px) { .est-panel > .est-proof { display: none; } }
@media (min-width: 761px) {
  .estimator { grid-template-columns: 1fr 1fr !important; }
  .est-panel { grid-template-areas: "label label" "count toggle" "price price" "cta cta" "proof contact"; grid-template-columns: auto minmax(0, 1fr); }
  .est-panel > .est-toggle { white-space: nowrap; }
}
/* narrower panels: rating and contact line stack */
@media (min-width: 761px) and (max-width: 1280px) {
  .est-panel { grid-template-areas: "label label" "count toggle" "price price" "cta cta" "proof proof" "contact contact"; }
  .est-panel > .est-contact { justify-self: start; text-align: left; }
}
@media (min-width: 761px) {
  .est-panel { grid-template-areas: "label label" "count toggle" "price price" "cta cta" "proof proof" "contact contact"; }
  .est-panel > .est-contact { justify-self: start; text-align: left; margin-top: -2px; }
}

/* ===================== Price hint: "Tap a window to start" takes turns with TAP TAP TAP ===================== */
.est-price strong.est-tap-loop { display: grid; align-items: center; min-height: 1.15em; overflow: hidden; }
.est-tap-loop > * { grid-area: 1 / 1; }
/* one 6.4s loop: hint shows, slides up and away, TAP TAP TAP flows in with the finger, then the hint slides back */
.est-hint-text { animation: est-hint-cycle 6.4s cubic-bezier(.65, 0, .25, 1) infinite; }
@keyframes est-hint-cycle {
  0%, 34% { opacity: 1; transform: none; filter: none; }
  40%, 86% { opacity: 0; transform: translateY(-110%); filter: blur(3px); }
  86.1% { opacity: 0; transform: translateY(110%); }
  94%, 100% { opacity: 1; transform: none; filter: none; }
}
.est-tap { display: flex; align-items: center; gap: 12px; color: #ffffff; pointer-events: none; }
.est-tap b { font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0; transform: translateY(110%) scale(0.8); }
.est-tap b:nth-of-type(1) { animation: est-tap-word-1 6.4s cubic-bezier(.2, .9, .3, 1.5) infinite; }
.est-tap b:nth-of-type(2) { animation: est-tap-word-2 6.4s cubic-bezier(.2, .9, .3, 1.5) infinite; }
.est-tap b:nth-of-type(3) { animation: est-tap-word-3 6.4s cubic-bezier(.2, .9, .3, 1.5) infinite; color: #7cc0ff; }
@keyframes est-tap-word-1 { 0%, 44% { opacity: 0; transform: translateY(110%) scale(0.8); } 48%, 80% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; transform: translateY(-110%); } }
@keyframes est-tap-word-2 { 0%, 54% { opacity: 0; transform: translateY(110%) scale(0.8); } 58%, 80% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; transform: translateY(-110%); } }
@keyframes est-tap-word-3 { 0%, 64% { opacity: 0; transform: translateY(110%) scale(0.8); } 68%, 80% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; transform: translateY(-110%); } }
/* the finger comes in, then presses down once for each TAP with a ripple */
.est-finger-wrap { position: relative; display: grid; place-items: center; width: 34px; height: 34px; flex: none; color: #7cc0ff; opacity: 0; animation: est-finger-show 6.4s ease infinite; }
@keyframes est-finger-show { 0%, 40% { opacity: 0; transform: translateX(-16px); } 45%, 80% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; transform: translateY(-110%); } }
.est-finger { animation: est-finger-tap 6.4s ease infinite; transform-origin: 40% 20%; }
@keyframes est-finger-tap {
  0%, 46% { transform: none; }
  48% { transform: translateY(3px) scale(0.88); } 51% { transform: none; }
  58% { transform: translateY(3px) scale(0.88); } 61% { transform: none; }
  68% { transform: translateY(3px) scale(0.88); } 71%, 100% { transform: none; }
}
.est-ripple { position: absolute; left: 6px; top: 0; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #7cc0ff; opacity: 0; animation: est-ripple 6.4s ease-out infinite; }
@keyframes est-ripple {
  0%, 47% { opacity: 0; transform: scale(0.4); } 48% { opacity: 1; transform: scale(0.6); } 54% { opacity: 0; transform: scale(2.2); }
  57% { opacity: 0; transform: scale(0.4); } 58% { opacity: 1; transform: scale(0.6); } 64% { opacity: 0; transform: scale(2.2); }
  67% { opacity: 0; transform: scale(0.4); } 68% { opacity: 1; transform: scale(0.6); } 74%, 100% { opacity: 0; transform: scale(2.2); }
}
@media (prefers-reduced-motion: reduce) { .est-tap { display: none; } .est-hint-text { animation: none; } }

/* ---- faster, bigger, more urgent TAP TAP TAP (4.2s loop) ---- */
.est-price strong.est-tap-loop { min-height: 48px; }
.est-hint-text { animation: est-hint-cycle2 4.2s cubic-bezier(.7, 0, .3, 1) infinite; }
@keyframes est-hint-cycle2 {
  0%, 20% { opacity: 1; transform: none; filter: none; }
  25%, 82% { opacity: 0; transform: translateX(-60%) skewX(-12deg); filter: blur(4px); }
  82.1% { opacity: 0; transform: translateX(60%) skewX(-12deg); }
  88%, 100% { opacity: 1; transform: none; filter: none; }
}
.est-tap { gap: 10px; font: 800 40px/1 var(--display); }
.est-tap b { font-weight: 800; color: #3d9bff; letter-spacing: 0.02em; text-shadow: 0 0 18px rgba(22, 139, 255, 0.75); opacity: 0; }
.est-tap b:nth-of-type(3) { color: #6cb6ff; }
.est-tap b:nth-of-type(1) { animation: est-slam-1 4.2s cubic-bezier(.2, .9, .3, 1.3) infinite; }
.est-tap b:nth-of-type(2) { animation: est-slam-2 4.2s cubic-bezier(.2, .9, .3, 1.3) infinite; }
.est-tap b:nth-of-type(3) { animation: est-slam-3 4.2s cubic-bezier(.2, .9, .3, 1.3) infinite; }
/* each word slams in from the right with a blur, then all shake together */
@keyframes est-slam-1 {
  0%, 25% { opacity: 0; transform: translateX(140%) skewX(-20deg); filter: blur(6px); }
  30% { opacity: 1; transform: translateX(-6%) skewX(6deg) scale(1.15); filter: none; }
  34% { transform: none; }
  50% { transform: none; } 53% { transform: translate(-3px, 1px) rotate(-6deg) scale(1.1); } 56% { transform: translate(3px, -1px) rotate(6deg) scale(1.12); } 59% { transform: translate(-2px, 0) rotate(-4deg) scale(1.08); } 62% { transform: none; }
  66% { transform: none; } 68% { transform: scale(1.12); } 71% { transform: none; }
  76% { opacity: 1; transform: none; filter: none; } 81%, 100% { opacity: 0; transform: translateX(-140%) skewX(-20deg); filter: blur(6px); }
}
@keyframes est-slam-2 {
  0%, 32% { opacity: 0; transform: translateX(140%) skewX(-20deg); filter: blur(6px); }
  37% { opacity: 1; transform: translateX(-6%) skewX(6deg) scale(1.15); filter: none; }
  41% { transform: none; }
  50% { transform: none; } 53% { transform: translate(3px, -1px) rotate(6deg) scale(1.1); } 56% { transform: translate(-3px, 1px) rotate(-6deg) scale(1.12); } 59% { transform: translate(2px, 0) rotate(4deg) scale(1.08); } 62% { transform: none; }
  66% { transform: none; } 68% { transform: scale(1.12); } 71% { transform: none; }
  76% { opacity: 1; transform: none; filter: none; } 81%, 100% { opacity: 0; transform: translateX(-140%) skewX(-20deg); filter: blur(6px); }
}
@keyframes est-slam-3 {
  0%, 39% { opacity: 0; transform: translateX(140%) skewX(-20deg); filter: blur(6px); }
  44% { opacity: 1; transform: translateX(-6%) skewX(6deg) scale(1.2); filter: none; }
  48% { transform: none; }
  50% { transform: none; } 53% { transform: translate(-3px, 1px) rotate(-8deg) scale(1.15); } 56% { transform: translate(3px, -1px) rotate(8deg) scale(1.18); } 59% { transform: translate(-2px, 0) rotate(-5deg) scale(1.1); } 62% { transform: none; }
  66% { transform: none; } 68% { transform: scale(1.15); } 71% { transform: none; }
  76% { opacity: 1; transform: none; filter: none; } 81%, 100% { opacity: 0; transform: translateX(-140%) skewX(-20deg); filter: blur(6px); }
}
.est-finger-wrap { width: 42px; height: 42px; color: #3d9bff; animation: est-finger-show2 4.2s ease infinite; }
@keyframes est-finger-show2 { 0%, 22% { opacity: 0; transform: translateX(30px) scale(0.6); } 27%, 76% { opacity: 1; transform: none; } 81%, 100% { opacity: 0; transform: translateX(-40px); } }
.est-finger { animation: est-finger-tap2 4.2s ease infinite; filter: drop-shadow(0 0 8px rgba(22, 139, 255, 0.8)); }
@keyframes est-finger-tap2 {
  0%, 28% { transform: none; }
  30% { transform: translateY(4px) scale(0.85); } 33% { transform: none; }
  37% { transform: translateY(4px) scale(0.85); } 40% { transform: none; }
  44% { transform: translateY(4px) scale(0.85); } 47% { transform: none; }
  53% { transform: translateY(4px) scale(0.85); } 56% { transform: none; }
  68% { transform: translateY(4px) scale(0.85); } 71%, 100% { transform: none; }
}
.est-ripple { left: 7px; top: 1px; width: 16px; height: 16px; border-color: #3d9bff; animation: est-ripple2 4.2s ease-out infinite; }
@keyframes est-ripple2 {
  0%, 29% { opacity: 0; transform: scale(0.4); } 30% { opacity: 1; transform: scale(0.6); } 35% { opacity: 0; transform: scale(2.6); }
  36% { opacity: 0; transform: scale(0.4); } 37% { opacity: 1; transform: scale(0.6); } 42% { opacity: 0; transform: scale(2.6); }
  43% { opacity: 0; transform: scale(0.4); } 44% { opacity: 1; transform: scale(0.6); } 49% { opacity: 0; transform: scale(2.6); }
  52% { opacity: 0; transform: scale(0.4); } 53% { opacity: 1; transform: scale(0.6); } 58% { opacity: 0; transform: scale(2.6); }
  67% { opacity: 0; transform: scale(0.4); } 68% { opacity: 1; transform: scale(0.6); } 74%, 100% { opacity: 0; transform: scale(2.6); }
}
/* the whole price box flashes blue with each shake, so it reads as urgent */
.est-price:has(.est-tap-loop) { animation: est-urgent 4.2s ease infinite; }
@keyframes est-urgent { 0%, 49%, 64%, 100% { box-shadow: inset 0 0 0 0 rgba(22, 139, 255, 0); } 53%, 58% { box-shadow: inset 0 0 0 2px rgba(61, 155, 255, 0.9), 0 0 26px -4px rgba(22, 139, 255, 0.8); } }
@media (max-width: 760px) { .est-tap { font-size: 34px; gap: 8px; } .est-finger-wrap { width: 36px; height: 36px; } }
@media (prefers-reduced-motion: reduce) { .est-price:has(.est-tap-loop) { animation: none; } }

/* ===================== Live site: hide the "photo/video goes here" notes until real media is ready ===================== */
/* The designed placeholders (gradients, animated window, before/after) stay; only the notes to the owner are hidden. */
.hero-ph, .placeholder-copy, .ph-note { display: none !important; }

/* tiny admin login at the very bottom of the footer */
.ft-admin { max-width: 1240px; margin: 14px auto 0; text-align: right; font-size: 11px; line-height: 1; }
.ft-admin a { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 6px; color: rgba(255, 255, 255, 0.45); transition: color 200ms ease; }
.ft-admin a:hover, .ft-admin a:focus-visible { color: var(--white); }
@media (max-width: 760px) { .ft-admin { text-align: left; } .ft-admin a { min-height: 44px; } }

/* ===================== Phone layout: everything important in the first screen (designed in Figma, 23 Oct) ===================== */
.hero-proofs, .hero-quick { display: none; }
@media (max-width: 760px) {
  /* hero sizes to its content instead of a fixed 760px */
  .hero { min-height: 0; }
  .hero-content { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: calc(96px + env(safe-area-inset-top)) 20px 28px; }
  .hero-eyebrow { order: 1; }
  .hero h1 { order: 2; margin: 2px 0 0; font-size: clamp(52px, 18.4vw, 76px); line-height: 0.88; white-space: nowrap; }
  .hero-trust { order: 3; margin-top: 0; }
  .hero-trust-note { display: none; }
  .hero-content > p { order: 4; margin: 0; font-size: 15.5px; line-height: 1.55; }
  .hero-proofs { order: 5; }
  .hero-actions { order: 6; width: 100%; margin-top: 4px; }
  .hero-quick { order: 7; }
  .scroll-cue, .hero-actions .text-link { display: none; }
  .hero-actions .button-primary { width: 100%; min-height: 58px; font-size: 17px; }
  .hero-trust .rating-chip { min-height: 44px; padding: 7px 14px 7px 12px; font-size: 14px; }

  .hero-proofs { display: flex; flex-wrap: wrap; gap: 8px; }
  .hero-proofs li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px 7px 10px; font-size: 13px; font-weight: 600; color: #ffffff; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); }
  .hero-proofs svg { color: var(--lime); flex: none; }

  .hero-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
  .hero-quick a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; font-size: 15px; font-weight: 600; color: #ffffff; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.24); transition: background-color 200ms ease, transform 150ms ease; }
  .hero-quick a svg { color: var(--mist); }
  .hero-quick a:active { transform: scale(0.96); background: rgba(255, 255, 255, 0.12); }

  /* tighter sections and headings */
  .section { padding: 60px 20px; }
  .section-heading, .section-heading.centered { gap: 16px; margin-bottom: 26px; }
  .section-heading.centered h2 { margin-bottom: 0; }
  .service-card h3 { font-size: 30px; }
  .step-go { justify-self: start; }
  .section-heading h2, .difference h2, .quote-section h2 { font-size: clamp(44px, 13.4vw, 56px); }

  /* services: swipe cards with the next one peeking in */
  .service-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -20px; padding: 6px 20px 14px; scroll-padding-left: 20px; -webkit-overflow-scrolling: touch; }
  .service-grid::-webkit-scrollbar { display: none; }
  .service-card { flex: 0 0 80%; min-height: 248px; padding: 22px 20px; scroll-snap-align: start; }
  .service-card:not(.is-active) { border: 1px solid var(--line); }
  .service-card.is-active, .service-card:hover:not(.is-active), .service-card:active { transform: none; }
  .service-icon { margin-bottom: 18px; }
  .svc-dots { display: flex; justify-content: center; gap: 6px; margin: 2px 0 18px; }
  .svc-dots span { width: 6px; height: 4px; background: rgba(6, 24, 39, 0.2); transition: width 300ms ease, background-color 300ms ease; }
  .svc-dots span.is-on { width: 22px; background: var(--lime); }

  /* the process under the cards: a compact list */
  .process-intro { min-height: 0; padding: 20px; }
  .process-intro a { position: static; display: inline-flex; margin-top: 10px; }
  .process-detail { padding: 14px 18px 14px 56px; }
  .process-detail h4 { margin: 2px 0 2px; }
  .process-dot { top: 19px; left: 22px; }

  /* team photo placeholder: no longer a full screen */
  .difference-image { margin: 16px; min-height: 230px; }
  .difference-copy { padding: 44px 20px 60px; }

  /* three steps: icon on the left, words on the right */
  .steps { gap: 0; }
  .step { text-align: left; }
  .step-line { display: none; }
  .step-card { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; align-items: start; padding: 18px 4px; border: 0; border-top: 1px solid var(--line); }
  .step-card > * { grid-column: 2; }
  .step-card .step-icon { grid-column: 1; grid-row: 1 / span 4; width: 48px; height: 48px; margin: 0; }
  .step-card h3 { font-size: 22px; margin: 2px 0 4px; }
  .step-card p { margin: 0; }
  .step-go { margin-top: 2px; min-height: 40px; }
  .step.is-current .step-card { transform: none; box-shadow: none; background: #ffffff; border-color: var(--line); }
}
@media (max-width: 360px) {
  .hero-quick a { font-size: 14px; gap: 6px; }
}
/* phones, motion allowed: the points and buttons pop in one after another */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .hero-proofs li, .hero-quick a { animation: chip-pop 520ms cubic-bezier(.2, .9, .3, 1.4) both; }
  .hero-proofs li:nth-child(1) { animation-delay: 620ms; }
  .hero-proofs li:nth-child(2) { animation-delay: 700ms; }
  .hero-proofs li:nth-child(3) { animation-delay: 780ms; }
  .hero-quick a:nth-child(1) { animation-delay: 900ms; }
  .hero-quick a:nth-child(2) { animation-delay: 980ms; }
  .hero-quick a:nth-child(3) { animation-delay: 1060ms; }
  .hero-trust { animation-delay: 420ms; }
}
@keyframes chip-pop { from { opacity: 0; transform: translateY(10px) scale(0.92); } to { opacity: 1; transform: none; } }

/* ===================== Services swipe row: hint + card load-in (phones) ===================== */
.svc-hint { display: none; }
@media (max-width: 760px) {
  .svc-dots { margin: 2px 0 4px; }
  .svc-hint { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; margin: 0 0 18px; padding: 0; background: none; border: 0; color: var(--ink); font: 700 14px/1 var(--body); cursor: pointer; }
  .svc-hint-arrow { display: grid; place-items: center; width: 30px; height: 30px; background: var(--lime); color: var(--ink); box-shadow: 0 8px 18px -8px rgba(22, 139, 255, 0.9); }
  .svc-hint.is-end { flex-direction: row-reverse; }
  .svc-hint.is-end .svc-hint-arrow svg { transform: rotate(180deg); }
  .svc-hint:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
  .service-card > .svc-wipe {
    position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transform: translateX(-110%);
    background: linear-gradient(100deg, transparent 36%, rgba(124, 192, 255, 0.3) 45%, rgba(255, 255, 255, 0.9) 50%, rgba(124, 192, 255, 0.3) 55%, transparent 64%);
  }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .svc-hint-arrow { animation: svc-nudge 1.4s ease-in-out infinite; }
  .svc-hint.is-end .svc-hint-arrow { animation-name: svc-nudge-back; }
  .service-card.is-arriving > .svc-wipe { animation: svc-wipe 820ms cubic-bezier(.6, .05, .3, 1) both; }
  .service-card.is-arriving .service-icon,
  .service-card.is-arriving h3,
  .service-card.is-arriving p,
  .service-card.is-arriving .service-action { animation: svc-rise 620ms cubic-bezier(.2, .8, .2, 1) both; }
  .service-card.is-arriving h3 { animation-delay: 90ms; }
  .service-card.is-arriving p { animation-delay: 170ms; }
  .service-card.is-arriving .service-action { animation-delay: 250ms; }
}
@keyframes svc-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes svc-nudge-back { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }
@keyframes svc-wipe { from { opacity: 1; transform: translateX(-110%); } to { opacity: 1; transform: translateX(110%); } }
@keyframes svc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ===================== Process steps: words, then a full-step animation, then the words again ===================== */
/* home-2.js adds .is-playing (box shows, words hide) and .is-anim (scene runs) for about 3 seconds per step */
.process-track .process-detail > .step-show {
  position: absolute; inset: 50px 0 0 0; z-index: 2; overflow: hidden; pointer-events: none;
  opacity: 0; filter: blur(8px); transform: translateY(-8px) scale(0.98); container-type: size;
  transition: opacity 520ms cubic-bezier(.2, .8, .2, 1), filter 520ms ease, transform 600ms cubic-bezier(.2, .8, .2, 1);
  background: radial-gradient(120% 120% at 50% 40%, rgba(22, 139, 255, 0.18), rgba(6, 24, 39, 0) 72%);
}
.process-track .process-detail.is-playing > .step-show { opacity: 1; filter: none; transform: none; transition-delay: 180ms; }
.process-track .process-detail > h4,
.process-track .process-detail > p,
.process-track .process-detail > span:not(.process-dot) { transition: color 300ms ease, text-shadow 300ms ease; }
.process-track .process-detail.is-playing > h4,
.process-track .process-detail.is-playing > p,
.process-track .process-detail.is-playing > span:not(.process-dot) { opacity: 0; transform: translateY(-12px); filter: blur(4px);
  transition: opacity 300ms ease, transform 340ms ease, filter 300ms ease, color 300ms ease, text-shadow 300ms ease; }
/* words come back one after another, like the review slideshow */
.process-track .process-detail .sw { display: inline-block; white-space: pre; }
.process-track .process-detail.is-back .sw { animation: rv-word-in 560ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(260ms + var(--w) * 24ms); }
.process-track .process-detail.is-back > span:not(.process-dot) { animation: rv-word-in 560ms 200ms cubic-bezier(.2, .8, .2, 1) both; }
@media (max-width: 760px) { .process-track .process-detail > .step-show { inset: 0 0 0 46px; } }
.step-show > * { position: absolute; }
.step-show svg { display: block; width: 100%; height: 100%; }
.step-show .sh-icon { left: 50%; top: 50%; width: auto; height: 74%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.sh-draw, .sh-tick { stroke-dasharray: 100 100; stroke-dashoffset: 100; }
/* shared sparkle */
.sh-spark { width: min(26px, 13cqh); height: min(26px, 13cqh); color: #ffffff; opacity: 0; filter: drop-shadow(0 0 6px #7cc0ff); }
.sh-s1 { left: 18%; top: 20%; } .sh-s2 { left: 70%; top: 62%; } .sh-s3 { left: 82%; top: 22%; }
.sh-s4 { left: 30%; top: 68%; } .sh-s5 { left: 52%; top: 34%; } .sh-s6 { left: 88%; top: 74%; }

/* inspect: googly eyes fade in and look around */
.sh-eyes { inset: 0; display: flex; align-items: center; justify-content: center; gap: 6cqw; }
.sh-eye { position: relative; width: min(30cqw, 70cqh); aspect-ratio: 1; border-radius: 50%; background: #ffffff; box-shadow: inset 0 -6px 0 rgba(6, 24, 39, 0.12), 0 12px 30px -10px rgba(22, 139, 255, 0.9); }
.sh-eye i { position: absolute; left: 28%; top: 28%; width: 44%; height: 44%; border-radius: 50%; background: #061827; }
.sh-eye i::after { content: ""; position: absolute; right: 16%; top: 14%; width: 30%; height: 30%; border-radius: 50%; background: #ffffff; }
.is-anim .sh-eye { animation: sh-eye 2.9s cubic-bezier(.2, .9, .3, 1.3) both; }
.is-anim .sh-eye i { animation: sh-look 2.9s ease-in-out both; }

/* purify: a wave of water rolls over the whole step */
.sh-water { inset: 0; background: #1683f0; transform: translateX(-115%); }
.sh-water::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(6, 24, 39, 0.25)); }
.sh-crest { position: absolute; top: 0; bottom: 0; right: -30px; width: 31px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='64' viewBox='0 0 32 64'%3E%3Cpath d='M0 0H10C26 8 26 24 10 32C-6 40-6 56 10 64H0Z' fill='%231683f0'/%3E%3Cpath d='M10 0C26 8 26 24 10 32C-6 40-6 56 10 64' fill='none' stroke='%23bfe0ff' stroke-width='3'/%3E%3C/svg%3E") repeat-y 0 0 / 31px 64px; }
.sh-ripple { position: absolute; left: 10%; top: 34%; width: 46%; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.5); }
.sh-r2 { left: 34%; top: 66%; width: 38%; }
.sh-bubble { bottom: -16px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.85); opacity: 0; }
.sh-b1 { left: 16%; } .sh-b2 { left: 34%; width: 8px; height: 8px; } .sh-b3 { left: 52%; width: 16px; height: 16px; } .sh-b4 { left: 70%; } .sh-b5 { left: 86%; width: 9px; height: 9px; }
.is-anim .sh-water { animation: sh-wave 2.9s cubic-bezier(.55, 0, .35, 1) both; }
.is-anim .sh-crest { animation: sh-crest 600ms linear infinite; }
.is-anim .sh-ripple { animation: sh-ripple 1.4s ease-in-out infinite alternate; }
.is-anim .sh-bubble { animation: sh-bubble 2.9s ease-out both; }
.is-anim .sh-b2 { animation-delay: 120ms; } .is-anim .sh-b3 { animation-delay: 240ms; } .is-anim .sh-b4 { animation-delay: 80ms; } .is-anim .sh-b5 { animation-delay: 300ms; }

/* clean: dirty glass, then a squeegee wipes it clean edge to edge */
.sh-dirty { inset: 0; background:
  radial-gradient(circle at 18% 30%, rgba(160, 138, 96, 0.9) 0 5%, transparent 6%),
  radial-gradient(circle at 72% 62%, rgba(160, 138, 96, 0.8) 0 7%, transparent 8%),
  radial-gradient(circle at 46% 82%, rgba(140, 120, 84, 0.75) 0 4%, transparent 5%),
  radial-gradient(circle at 86% 22%, rgba(150, 130, 90, 0.75) 0 3.5%, transparent 4.5%),
  radial-gradient(circle at 34% 50%, rgba(150, 130, 90, 0.5) 0 9%, transparent 10%),
  repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.06) 0 5px, transparent 5px 16px),
  linear-gradient(160deg, #3b4a52, #26333b); }
.sh-clean { inset: 0; background: linear-gradient(135deg, #5fb3ff 0%, #168bff 50%, #0d63c9 100%); clip-path: inset(0 100% 0 0); }
.sh-shine { position: absolute; top: -20%; bottom: -20%; left: -30%; width: 22%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent); transform: skewX(-18deg); }
.sh-blade { top: -6%; bottom: -6%; left: 0; width: 10px; margin-left: -5px; background: #ffffff; box-shadow: 0 0 18px rgba(255, 255, 255, 0.9), 0 0 4px #7cc0ff; opacity: 0; }
.is-anim .sh-dirty { animation: sh-fade-in 400ms ease both; }
.is-anim .sh-clean { animation: sh-reveal 2.9s cubic-bezier(.6, 0, .3, 1) both; }
.is-anim .sh-blade { animation: sh-blade 2.9s cubic-bezier(.6, 0, .3, 1) both; }
.is-anim .sh-shine { animation: sh-shine 2.9s ease-in-out both; }
.is-anim .show-clean .sh-spark { animation: sh-spark 1s 1.9s both; }
.is-anim .show-clean .sh-s2 { animation-delay: 2.05s; } .is-anim .show-clean .sh-s3 { animation-delay: 2.2s; } .is-anim .show-clean .sh-s4 { animation-delay: 2.3s; }

/* air dry: gusts sweep across and blow the last drops away */
.sh-drop { width: min(18px, 12cqh); height: min(18px, 12cqh); border-radius: 50% 50% 50% 0; background: #dceeff; box-shadow: 0 0 10px rgba(124, 192, 255, 0.8); opacity: 0; transform: rotate(-45deg); }
.sh-d1 { left: 30%; top: 38%; } .sh-d2 { left: 56%; top: 64%; } .sh-d3 { left: 76%; top: 28%; }
.sh-gust { left: 0; height: 3px; width: 40cqw; border-radius: 3px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 60%); opacity: 0; }
.sh-g1 { top: 22%; } .sh-g2 { top: 40%; width: 30cqw; } .sh-g3 { top: 56%; } .sh-g4 { top: 70%; width: 26cqw; } .sh-g5 { top: 84%; width: 34cqw; }
.sh-g1::after, .sh-g3::after { content: ""; position: absolute; right: -9px; top: -10px; width: 12px; height: 12px; border: 3px solid #ffffff; border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(45deg); }
.is-anim .sh-drop { animation: sh-blow 2.9s ease-in-out both; }
.is-anim .sh-d2 { animation-delay: 150ms; } .is-anim .sh-d3 { animation-delay: 300ms; }
.is-anim .sh-gust { animation: sh-gust 1s linear 2 both; }
.is-anim .sh-g1 { animation-delay: 250ms; } .is-anim .sh-g2 { animation-delay: 450ms; } .is-anim .sh-g3 { animation-delay: 600ms; } .is-anim .sh-g4 { animation-delay: 800ms; } .is-anim .sh-g5 { animation-delay: 950ms; }

/* protect + final check: a big icon draws itself */
.is-anim .sh-icon { animation: sh-icon 2.9s ease both; }
.is-anim .sh-draw { animation: sh-draw 900ms 200ms ease-out both; }
.is-anim .sh-tick { animation: sh-draw 450ms 1000ms ease-out both; }
.sh-drip { top: -6%; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #bfe0ff; opacity: 0; }
.sh-p1 { --dx: -26px; left: calc(50% - 26px); } .sh-p2 { --dx: 22px; } .sh-p3 { --dx: 30px; left: calc(50% + 26px); }
.is-anim .sh-drip { animation: sh-drip 1s 1.3s ease-in 2 both; }
.is-anim .sh-p2 { animation-delay: 1.5s; } .is-anim .sh-p3 { animation-delay: 1.7s; }
.show-check .sh-spark { left: 50%; top: 52%; }
.show-check .sh-s1 { --x: -32cqw; --y: -30cqh; } .show-check .sh-s2 { --x: 30cqw; --y: -34cqh; } .show-check .sh-s3 { --x: -38cqw; --y: 10cqh; }
.show-check .sh-s4 { --x: 36cqw; --y: 14cqh; } .show-check .sh-s5 { --x: -18cqw; --y: 36cqh; } .show-check .sh-s6 { --x: 20cqw; --y: 38cqh; }
.is-anim .show-check .sh-spark { animation: sh-burst 1s 1.4s ease-out both; }

/* detail: a magnifier glides across, leaving sparkles */
.sh-mag { left: 0; top: 22%; height: 56%; aspect-ratio: 1; }
.is-anim .sh-mag { animation: sh-mag 2.7s 150ms ease-in-out both; }
.show-detail .sh-s1 { left: 16%; top: 28%; } .show-detail .sh-s2 { left: 36%; top: 64%; } .show-detail .sh-s3 { left: 56%; top: 24%; } .show-detail .sh-s4 { left: 74%; top: 60%; } .show-detail .sh-s5 { left: 88%; top: 30%; }
.is-anim .show-detail .sh-spark { animation: sh-spark 1s 0.8s both; }
.is-anim .show-detail .sh-s2 { animation-delay: 1.2s; } .is-anim .show-detail .sh-s3 { animation-delay: 1.6s; } .is-anim .show-detail .sh-s4 { animation-delay: 2s; } .is-anim .show-detail .sh-s5 { animation-delay: 2.3s; }

/* reset: a brush sweeps the dust along the track */
.sh-track { left: 6%; right: 6%; bottom: 16%; height: 34%; border: 4px solid #7cc0ff; border-top: 0; }
.sh-dust { bottom: calc(16% + 8px); width: 8px; height: 8px; border-radius: 50%; background: #b89f73; }
.sh-u1 { left: 20%; } .sh-u2 { left: 34%; width: 6px; height: 6px; } .sh-u3 { left: 48%; width: 10px; height: 10px; } .sh-u4 { left: 62%; } .sh-u5 { left: 76%; width: 7px; height: 7px; }
.sh-brush { left: 0; bottom: calc(16% + 4px); height: min(52cqh, 40cqw); aspect-ratio: 60 / 80; }
.is-anim .sh-brush { animation: sh-brush 2.4s 200ms linear both; }
.is-anim .sh-dust { animation: sh-puff 500ms 600ms ease-out both; }
.is-anim .sh-u2 { animation-delay: 870ms; } .is-anim .sh-u3 { animation-delay: 1140ms; } .is-anim .sh-u4 { animation-delay: 1410ms; } .is-anim .sh-u5 { animation-delay: 1680ms; }

/* choose: three options, a tap picks one */
.sh-opts { inset: 0; display: flex; align-items: center; justify-content: center; gap: 3cqw; padding: 0 4cqw; }
.sh-opts span { flex: 1; max-width: 32cqw; min-height: 42px; display: grid; place-items: center; border: 2px solid rgba(124, 192, 255, 0.6); color: #ffffff; font: 700 clamp(12px, 4.6cqw, 16px)/1 var(--body); opacity: 0; }
.sh-finger { left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.25); opacity: 0; }
.is-anim .sh-opts span { animation: sh-rise 400ms 100ms ease-out both; }
.is-anim .sh-opts span:nth-child(2) { animation: sh-rise 400ms 200ms ease-out both, sh-pick 2.9s ease both; }
.is-anim .sh-opts span:nth-child(3) { animation-delay: 300ms; }
.is-anim .sh-finger { animation: sh-finger 2.9s ease-in-out both; }

/* schedule: a week of days, visits tick off */
.sh-days { inset: 0; display: flex; align-items: center; justify-content: center; gap: 2.5cqw; padding: 0 5cqw; }
.sh-days span { position: relative; flex: 1; max-width: 15cqw; max-height: 60cqh; aspect-ratio: 1; display: grid; place-items: center; border: 2px solid rgba(124, 192, 255, 0.55); color: #dceeff; font: 700 clamp(12px, 4cqw, 16px)/1 var(--display); opacity: 0; }
.sh-days .sh-on::after { content: ""; position: absolute; left: 30%; top: 30%; width: 40%; height: 20%; border-left: 3px solid #ffffff; border-bottom: 3px solid #ffffff; transform: rotate(-45deg) scale(0); }
.is-anim .sh-days span { animation: sh-rise 350ms ease-out both; }
.is-anim .sh-days span:nth-child(2) { animation-delay: 50ms; } .is-anim .sh-days span:nth-child(3) { animation-delay: 100ms; }
.is-anim .sh-days span:nth-child(4) { animation-delay: 150ms; } .is-anim .sh-days span:nth-child(5) { animation-delay: 200ms; } .is-anim .sh-days span:nth-child(6) { animation-delay: 250ms; }
.is-anim .sh-days .sh-on { animation: sh-rise 350ms 50ms ease-out both, sh-day 450ms 700ms ease-out both; }
.is-anim .sh-days .sh-on:nth-child(4) { animation-delay: 150ms, 1200ms; }
.is-anim .sh-days .sh-on:nth-child(6) { animation-delay: 250ms, 1700ms; }
.is-anim .sh-days .sh-on::after { animation: sh-tickpop 350ms 850ms ease-out both; }
.is-anim .sh-days .sh-on:nth-child(4)::after { animation-delay: 1350ms; }
.is-anim .sh-days .sh-on:nth-child(6)::after { animation-delay: 1850ms; }

/* remind: the phone buzzes and a reminder text types in */
.sh-phone { left: 8%; top: 14%; height: 72%; aspect-ratio: 9 / 16; border: 3px solid #7cc0ff; border-radius: 10px; background: rgba(22, 139, 255, 0.14); transform-origin: 50% 60%; }
.sh-phone::before { content: ""; position: absolute; left: 35%; right: 35%; top: 6%; height: 3px; border-radius: 2px; background: #7cc0ff; }
.sh-msg { left: calc(12% + 41cqh); right: 6%; top: 50%; display: grid; align-items: center; min-height: 42px; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: #168bff; color: #ffffff; font: 600 clamp(12px, 4.4cqw, 15px)/1.3 var(--body); transform: translateY(-50%); transform-origin: 0 100%; opacity: 0; }
.sh-msg > * { grid-area: 1 / 1; }
.sh-typing { display: inline-flex; gap: 5px; }
.sh-typing b { width: 7px; height: 7px; border-radius: 50%; background: #ffffff; }
.sh-text { opacity: 0; }
.is-anim .sh-phone { animation: sh-buzz 2.9s ease-in-out both; }
.is-anim .sh-msg { animation: sh-msg 2.9s cubic-bezier(.2, .9, .3, 1.2) both; }
.is-anim .sh-typing { animation: sh-typing 2.9s ease both; }
.is-anim .sh-typing b { animation: sh-dot 600ms ease-in-out infinite; }
.is-anim .sh-typing b:nth-child(2) { animation-delay: 120ms; } .is-anim .sh-typing b:nth-child(3) { animation-delay: 240ms; }
.is-anim .sh-text { animation: sh-text 2.9s ease both; }

/* maintain: the sun arcs over a sparkling window */
.sh-frame { inset: 12% 8%; border: 3px solid #7cc0ff; background: linear-gradient(135deg, rgba(95, 179, 255, 0.35), rgba(22, 139, 255, 0.1)); }
.sh-frame::before, .sh-frame::after { content: ""; position: absolute; background: #7cc0ff; }
.sh-frame::before { left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; }
.sh-frame::after { left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; }
.sh-sun { left: 0; top: 0; width: 16cqh; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #ffe07a 0 55%, #ffc83d 56%); box-shadow: 0 0 20px 6px rgba(255, 200, 61, 0.55); opacity: 0; }
.is-anim .sh-sun { animation: sh-sun 2.7s 100ms ease-in-out both; }
.is-anim .show-maintain .sh-spark { animation: sh-spark 1s 0.9s both; }
.is-anim .show-maintain .sh-s2 { animation-delay: 1.4s; } .is-anim .show-maintain .sh-s3 { animation-delay: 1.9s; }

/* tall boxes (the computer layout's columns): stack things instead */
@container (max-width: 260px) {
  .sh-opts { flex-direction: column; padding: 0 12cqw; }
  .sh-opts span { flex: none; width: 100%; max-width: none; }
  .sh-days { flex-wrap: wrap; align-content: center; padding: 0 12cqw; }
  .sh-days span { flex: 0 0 26%; max-width: none; }
  .sh-phone { left: 50%; top: 8%; height: 40%; margin-left: -11.25cqh; }
  .sh-msg { left: 8%; right: 8%; top: 70%; }
}

@keyframes sh-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sh-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sh-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes sh-spark { 0% { opacity: 0; transform: scale(0); } 40% { opacity: 1; transform: scale(1.25) rotate(45deg); } 70% { transform: scale(0.85) rotate(70deg); } 100% { opacity: 1; transform: scale(1) rotate(90deg); } }
@keyframes sh-eye { 0% { opacity: 0; transform: scale(0.3); } 14% { opacity: 1; transform: scale(1.06); } 20%, 64% { transform: scale(1); } 68% { transform: scaleY(0.08); } 72%, 100% { opacity: 1; transform: scale(1); } }
@keyframes sh-look { 0%, 22% { transform: translate(0, 0); } 32%, 42% { transform: translate(-55%, -10%); } 52%, 60% { transform: translate(55%, -10%); } 76% { transform: translate(20%, 45%); } 88% { transform: translate(-40%, 30%); } 100% { transform: translate(0, 0); } }
@keyframes sh-wave { 0% { transform: translateX(-115%); } 32%, 70% { transform: translateX(0); } 100% { transform: translateX(118%); } }
@keyframes sh-crest { from { background-position: 0 0; } to { background-position: 0 64px; } }
@keyframes sh-ripple { from { transform: translateX(-12%); } to { transform: translateX(30%); } }
@keyframes sh-bubble { 0%, 28% { opacity: 0; transform: translateY(0); } 38% { opacity: 1; } 76%, 100% { opacity: 0; transform: translateY(-115cqh); } }
@keyframes sh-reveal { 0%, 18% { clip-path: inset(0 100% 0 0); } 62%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes sh-blade { 0%, 16% { left: 0; opacity: 0; } 18% { left: 0; opacity: 1; } 62% { left: 100%; opacity: 1; } 68%, 100% { left: 100%; opacity: 0; } }
@keyframes sh-shine { 0%, 66% { left: -30%; } 90%, 100% { left: 120%; } }
@keyframes sh-blow { 0% { opacity: 0; transform: rotate(-45deg) scale(0.4); } 10%, 35% { opacity: 1; transform: rotate(-45deg) scale(1); } 55% { opacity: 1; transform: translate(30px, -6px) rotate(-45deg) scale(0.8); } 75%, 100% { opacity: 0; transform: translate(60px, -10px) rotate(-45deg) scale(0); } }
@keyframes sh-gust { 0% { opacity: 0; transform: translateX(-45cqw); } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(110cqw); } }
@keyframes sh-icon { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } 12%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes sh-drip { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 1; } 45% { transform: translate(0, 20cqh); } 70% { transform: translate(var(--dx, 20px), 10cqh); } 100% { opacity: 0; transform: translate(calc(var(--dx, 20px) * 2), 44cqh); } }
@keyframes sh-burst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) scale(1) rotate(90deg); } }
@keyframes sh-mag { 0% { transform: translate(-60cqh, 0); } 25% { transform: translate(14cqw, -8cqh); } 50% { transform: translate(40cqw, 8cqh); } 75% { transform: translate(64cqw, -6cqh); } 100% { transform: translate(110cqw, 0); } }
@keyframes sh-brush { from { transform: translateX(-20cqw); } to { transform: translateX(105cqw); } }
@keyframes sh-puff { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate(26px, -20px) scale(1.8); } }
@keyframes sh-pick { 0%, 44% { background: transparent; border-color: rgba(124, 192, 255, 0.6); transform: scale(1); } 50% { background: #168bff; border-color: #168bff; transform: scale(1.08); } 58%, 100% { background: #168bff; border-color: #168bff; transform: scale(1); } }
@keyframes sh-finger { 0%, 18% { opacity: 0; transform: translate(40cqw, 40cqh); } 28% { opacity: 1; } 42% { transform: none; } 46% { transform: scale(0.7); } 52% { transform: none; } 70% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: none; } }
@keyframes sh-day { 0% { background: transparent; transform: scale(1); } 50% { background: #168bff; color: transparent; transform: scale(1.12); } 100% { background: #168bff; border-color: #168bff; color: transparent; transform: scale(1); } }
@keyframes sh-tickpop { from { transform: rotate(-45deg) scale(0); } to { transform: rotate(-45deg) scale(1); } }
@keyframes sh-buzz { 0%, 6%, 22%, 100% { transform: rotate(0); } 9% { transform: rotate(-8deg); } 12% { transform: rotate(8deg); } 15% { transform: rotate(-6deg); } 18% { transform: rotate(4deg); } }
@keyframes sh-msg { 0%, 14% { opacity: 0; transform: translateY(-50%) scale(0.4); } 24%, 100% { opacity: 1; transform: translateY(-50%) scale(1); } }
@keyframes sh-typing { 0%, 50% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes sh-dot { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes sh-text { 0%, 52% { opacity: 0; transform: translateY(4px); } 60%, 100% { opacity: 1; transform: none; } }
@keyframes sh-sun { 0% { opacity: 0; transform: translate(4cqw, 60cqh); } 15%, 85% { opacity: 1; } 50% { transform: translate(44cqw, 4cqh); } 100% { opacity: 0; transform: translate(86cqw, 60cqh); } }


/* ===================== Reviews on phones: review, reviewer and arrows all in one screen ===================== */
@media (max-width: 760px) {
  .reviews.section { padding-top: 30px; padding-bottom: 44px; }
  .reviews .section-heading { gap: 10px; margin-bottom: 14px; }
  .reviews .section-heading h2 { font-size: clamp(30px, 10vw, 40px); white-space: nowrap; margin: 4px 0 0; }
  .reviews .section-heading .rating-chip { min-height: 44px; padding: 6px 13px 6px 11px; font-size: 14px; }
  .rv-stage { padding-bottom: 16px; }
  .rv-ghost { bottom: 16px; }
  .rv-ghost-1 { transform: translateY(8px) scale(0.97); }
  .rv-ghost-2 { transform: translateY(16px) scale(0.94); }
  .rv-card { padding: 20px 18px 16px; gap: 10px; }
  .rv-mark { font-size: 96px; right: 12px; top: -8px; }
  .rv-stars svg { width: 15px; height: 15px; }
  .rv-quote { font-size: 15.5px; line-height: 1.5; }
  .rv-who { gap: 10px; padding-top: 10px; }
  .rv-who .review-initial { width: 34px; height: 34px; font-size: 14px; }
  .rv-who strong { font-size: 15px; }
  .rv-who small { font-size: 13px; }
  .rv-controls { margin-top: 6px; }
  .rv-btn { width: 44px; height: 44px; }
  .reviews-cta { margin-top: 22px; }
}

/* ===================== Why-us tick list: each tick fades up and lights green, then its words fade in ===================== */
.check-item > span { width: 30px; height: 30px; border-radius: 50%; background: #22c55e; color: #ffffff; box-shadow: 0 8px 18px -8px rgba(34, 197, 94, 0.9); }
.check-item svg path { stroke-width: 2.6; }
@media (prefers-reduced-motion: no-preference) {
  /* the rows stay put; the tick and the words animate on their own */
  .js .difference-copy.reveal .check-item { opacity: 1; transform: none; }
  .js .difference-copy.reveal:not(.is-visible) .check-item > span { opacity: 0; transform: translateY(12px) scale(0.8); background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.22); }
  .js .difference-copy.reveal:not(.is-visible) .check-item svg path { stroke-dashoffset: 20; }
  .js .difference-copy.reveal:not(.is-visible) .check-item h3,
  .js .difference-copy.reveal:not(.is-visible) .check-item p { opacity: 0; }
  .check-list .check-item:nth-child(1) { --t0: 450ms; }
  .check-list .check-item:nth-child(2) { --t0: 1000ms; }
  .check-list .check-item:nth-child(3) { --t0: 1550ms; }
  .js .difference-copy.reveal.is-visible .check-list .check-item > span {
    animation: tick-rise 520ms cubic-bezier(.2, .8, .2, 1) backwards, tick-green 760ms ease backwards, tick-glow 4.5s ease-in-out infinite;
    animation-delay: var(--t0), calc(var(--t0) + 320ms), calc(var(--t0) + 2400ms);
  }
  .js .difference-copy.reveal.is-visible .check-list .check-item svg path { animation: tick-in 440ms ease backwards; animation-delay: calc(var(--t0) + 480ms); }
  .js .difference-copy.reveal.is-visible .check-list .check-item h3 { animation: rv-word-in 600ms cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--t0) + 620ms); }
  .js .difference-copy.reveal.is-visible .check-list .check-item p { animation: rv-word-in 600ms cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--t0) + 760ms); }
}
@keyframes tick-rise { from { opacity: 0; transform: translateY(12px) scale(0.8); } to { opacity: 1; transform: none; } }
@keyframes tick-green {
  0% { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.22), 0 0 0 0 rgba(34, 197, 94, 0.7); }
  40% { background: #22c55e; box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 0 rgba(34, 197, 94, 0.7); }
  100% { background: #22c55e; box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 14px rgba(34, 197, 94, 0); }
}
@keyframes tick-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0), 0 8px 18px -8px rgba(34, 197, 94, 0.9); } 50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.18), 0 8px 24px -6px rgba(34, 197, 94, 1); } }

/* ===================== Polish (25 Oct): tidier wrapping, spacing and plan card ===================== */
/* no lonely last words in headings and intros */
.hero h1, .section-heading h2, .difference h2, .quote-section h2, .step-card h3 { text-wrap: balance; }
.section p, .difference p, .hero p { text-wrap: pretty; }
/* plans and the three steps share a white background, so close the double gap between them */
.plans + .process { padding-top: 40px; }
/* the tab above already says "Most popular", so the card doesn't repeat it */
.plan-head .plan-badge { display: none; }
/* hide the email row until there's an address to show */
.ft-contact li:has(> #footer-email-soon:not([hidden])) { display: none; }

/* ===================== Real footage (27 Oct 2026) ===================== */
/* Hero reel: a tall "window" of real job footage beside the headline on desktop,
   under the buttons on phones. One caption per clip, wiped on like a squeegee pass. */
.hero-reel { position: absolute; z-index: 3; top: 150px; right: clamp(24px, 6vw, 96px); width: clamp(280px, 27vw, 410px); margin: 0; animation: rise-in 900ms 520ms ease both; }
.reel-frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #0a2d49 url("/media/hero-reel-poster.webp") center / cover; border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.85), 0 0 0 8px rgba(255, 255, 255, 0.04); }
.reel-video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* dark fade at the foot so the white caption always reads */
.reel-frame::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, transparent, rgba(6, 24, 39, 0.88)); pointer-events: none; }
.reel-captions { position: absolute; left: 22px; right: 64px; bottom: 20px; z-index: 2; min-height: 2.1em; font-family: var(--display); font-size: clamp(26px, 2.3vw, 34px); font-weight: 800; line-height: 1.02; letter-spacing: -0.01em; text-transform: uppercase; }
.reel-cap { position: absolute; left: 0; bottom: 0; margin: 0; color: var(--white); opacity: 0; clip-path: inset(0 100% 0 0); }
.reel-cap.is-on { opacity: 1; clip-path: inset(0 0 0 0); transition: clip-path 620ms cubic-bezier(.65, 0, .25, 1), opacity 0ms; }
/* the blue blade that leads the wipe */
.reel-cap::after { content: ""; position: absolute; top: -6%; bottom: -6%; left: 0; width: 4px; background: var(--lime); box-shadow: 0 0 14px var(--lime); opacity: 0; }
.reel-cap.is-on::after { animation: reel-blade 620ms cubic-bezier(.65, 0, .25, 1) both; }
@keyframes reel-blade { 0% { left: 0; opacity: 1; } 90% { left: 100%; opacity: 1; } 100% { left: 100%; opacity: 0; } }
.reel-pause { position: absolute; right: 14px; bottom: 16px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--white); background: rgba(6, 24, 39, 0.55); border: 1px solid rgba(255, 255, 255, 0.35); backdrop-filter: blur(6px); transition: background-color 180ms ease; }
.reel-pause:hover { background: var(--lime); }
.reel-pause:focus-visible { outline: 3px solid #7cc0ff; outline-offset: 3px; }
.reel-pause .ico-play, .reel-pause.is-paused .ico-pause { display: none; }
.reel-pause.is-paused .ico-play { display: block; }
.reel-note { display: flex; align-items: center; gap: 9px; margin-top: 14px; color: rgba(255, 255, 255, 0.7); font-size: 13px; font-weight: 600; }
/* until the video plays (or when it never will), the first caption sits there still */
.hero-reel:not(.is-playing) .reel-cap.is-on { transition: none; }
.hero-reel:not(.is-playing) .reel-cap.is-on::after { animation: none; }
/* the old placeholder grid is no longer needed behind real footage */
.hero-grid { mask-image: linear-gradient(90deg, black, transparent 48%); }

@media (max-width: 1180px) and (min-width: 981px) {
  /* keep the headline clear of the reel on small laptops */
  .hero-content { max-width: 64vw; }
  h1 { font-size: clamp(76px, 8.6vw, 110px); }
}
@media (max-width: 980px) {
  .hero { display: flex; flex-direction: column; }
  .hero-content { padding-bottom: 36px; }
  .hero-reel { position: relative; top: auto; right: auto; order: 2; width: min(100% - 48px, 440px); margin: 0 24px 104px; }
}
@media (max-width: 760px) {
  .hero-content { padding-bottom: 28px; }
  .hero-reel { width: calc(100% - 48px); margin-bottom: 92px; }
  .reel-captions { font-size: clamp(25px, 7.4vw, 32px); left: 18px; bottom: 18px; }
}

/* Option cards: a real photo across the top, the icon sitting on its bottom edge */
.service-card { --pad-x: 36px; --pad-y: 36px; }
.service-media { display: block; width: calc(100% + 2 * var(--pad-x)); margin: calc(-1 * var(--pad-y)) calc(-1 * var(--pad-x)) 0; aspect-ratio: 4 / 3; overflow: hidden; background: #0a2d49; }
.service-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(.2, .8, .2, 1), filter 300ms ease; }
.service-card:hover .service-media img, .service-card.is-active .service-media img { transform: scale(1.05); }
.service-card.is-active .service-media img { filter: saturate(1.08) brightness(0.92); }
.service-card .service-number { z-index: 2; color: var(--white); background: rgba(6, 24, 39, 0.6); padding: 3px 8px; top: 14px; right: 14px; }
.service-card .service-icon { margin-top: -34px; margin-bottom: 26px; z-index: 2; }
.service-card { min-height: 0; }
@media (max-width: 980px) { .service-card { --pad-x: 28px; --pad-y: 28px; } }
@media (max-width: 760px) {
  .service-card { --pad-x: 20px; --pad-y: 22px; }
  .service-media { aspect-ratio: 16 / 10; }
  .service-card .service-icon { width: 56px; height: 56px; margin-top: -28px; margin-bottom: 14px; }
}

/* About: the real photo fills the frame; the label still floats on top */
.difference-image.has-photo { background: #0a2d49; }
.difference-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; }
.difference-image.has-photo .image-label { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .hero-reel { animation: none; }
  .reel-cap.is-on { transition: none; }
  .reel-cap.is-on::after { animation: none; }
  .service-media img { transition: none; }
  .service-card:hover .service-media img, .service-card.is-active .service-media img { transform: none; }
}
/* waiting for a tap (motion off, data saver, Low Power Mode): a big play button in the middle */
.hero-reel:not(.is-playing) .reel-pause.is-paused { right: 50%; bottom: 50%; transform: translate(50%, 50%); width: 72px; height: 72px; background: var(--lime); border-color: rgba(255, 255, 255, 0.6); box-shadow: 0 14px 34px -10px rgba(22, 139, 255, 0.9); }
.hero-reel:not(.is-playing) .reel-pause.is-paused svg { width: 26px; height: 26px; margin-left: 3px; }

/* ===================== Phones: plan card and price tool each fit on one screen (27 Oct 2026) ===================== */
/* Room left between the top menu and the bottom quote bar is about 500px on a small phone.
   Same animations; only sizes and spacing change. */
@media (max-width: 760px) {
  /* plans: the four tabs on one row, the card tightened */
  .plan-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; row-gap: 4px; padding: 4px; margin-top: 10px; }
  .plan-tabs button { min-height: 46px; padding: 0 2px; font-size: clamp(14px, 4.3vw, 17px); letter-spacing: 0; }
  .plan-tabs button em { top: -10px; padding: 2px 6px; font-size: 10px; }
  .plan-card { margin-top: 10px; padding: 18px 18px 14px; }
  .plan-head h3 { font-size: 28px; }
  .plan-head p { margin-top: 2px; font-size: 14px; }
  .plan-save { margin: 12px 0; padding: 12px 0; gap: 8px 28px; }
  .plan-save span { font-size: 13px; }
  .plan-save strong { font-size: 50px; }
  .plan-same { font-size: 38px !important; }
  .plan-card ul { gap: 6px; margin-bottom: 12px; }
  .plan-card li { gap: 9px; font-size: 14px; line-height: 1.4; }
  .plan-actions { gap: 2px; }
  .plan-actions .button { min-height: 48px; }

  /* price tool: a smaller house, its two controls on one row */
  .est-house { padding: 12px; gap: 8px; }
  .house { max-width: 300px; margin: 0 auto; }
  .est-house-actions { flex-wrap: nowrap; justify-content: space-between; gap: 8px; }
  .est-house-actions > button { padding: 0 10px; font-size: 13px; white-space: nowrap; }
  .est-extra { gap: 4px; font-size: 12px; }
  .est-extra button { width: 40px; }
  .est-panel { padding: 12px 14px; gap: 6px 12px; }
  .est-panel > .est-cta { min-height: 48px; }
}
@media (max-width: 760px) {
  /* price tool, round two: the + button no longer runs off the edge, and the box loses ~60px */
  .house { max-width: 270px; }
  .est-extra > span { max-width: 54px; line-height: 1.15; white-space: normal; }
  .est-extra button { width: 38px; }
  .est-panel > .est-label { display: none; }   /* "0 WINDOWS" already says it */
  .est-panel > .est-price { padding: 10px 12px; gap: 2px; }
  .est-note { font-size: 12px; line-height: 1.35; }
  /* the smallest phones: a little more room for the plan card and reviews */
  .plan-save strong { font-size: 46px; }
  .reviews .section-heading { margin-bottom: 10px; }
  .rv-card { gap: 8px; padding: 16px 16px 14px; }
  .rv-stage { padding-bottom: 12px; }
}
/* short laptop screens: plan card and reviews fit between the menu and the bottom of the window */
@media (min-width: 761px) and (max-height: 820px) {
  .plan-card { padding: 28px 36px; }
  .plan-save { margin: 18px 0; padding: 16px 0; }
  .plan-save strong { font-size: 62px; }
  .plan-card ul { margin-bottom: 18px; gap: 9px; }
  .reviews .section-heading { margin-bottom: 30px; }
  .rv-card { padding: 34px 44px 26px; gap: 14px; }
  .rv-stage { padding-bottom: 18px; }
  .rv-controls { margin-top: 10px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  /* the smallest phones */
  .plan-card { padding-top: 14px; padding-bottom: 10px; }
}

/* ===================== Photos: a squeegee pass reveals each one (27 Oct 2026) ===================== */
/* As a photo scrolls in, a blue blade sweeps across it and the photo is wiped clean behind it,
   settling from a soft, slightly zoomed blur to sharp. Keyframes (not transitions) so the hover
   zoom on the option cards keeps its own timing once the pass is done. */
.service-media { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal:not(.is-visible) .service-media img,
  .js .difference-image.reveal:not(.is-visible) .difference-photo { clip-path: inset(0 100% 0 0); }
  .js .service-card.reveal.is-visible .service-media img,
  .js .difference-image.reveal.is-visible .difference-photo { animation: photo-wipe 1300ms cubic-bezier(.65, 0, .25, 1) calc(var(--delay, 0ms) + 200ms) backwards; }
  .service-media::after, .difference-image.has-photo::after {
    content: ""; position: absolute; top: -2%; bottom: -2%; left: 0; z-index: 1; width: 5px; pointer-events: none;
    background: linear-gradient(180deg, #bfe0ff, var(--lime) 30%, var(--lime) 70%, #bfe0ff);
    box-shadow: 0 0 18px 2px rgba(22, 139, 255, 0.85), 0 0 2px #ffffff; opacity: 0;
  }
  .js .service-card.reveal.is-visible .service-media::after,
  .js .difference-image.reveal.is-visible.has-photo::after { animation: photo-blade 1300ms cubic-bezier(.65, 0, .25, 1) calc(var(--delay, 0ms) + 200ms) both; }
}
@keyframes photo-wipe {
  0% { clip-path: inset(0 100% 0 0); transform: scale(1.14); filter: blur(10px) saturate(0.5) brightness(1.15); }
  55% { clip-path: inset(0 0 0 0); filter: blur(3px) saturate(0.85) brightness(1.08); }
  100% { clip-path: inset(0 0 0 0); transform: scale(1); filter: none; }
}
@keyframes photo-blade {
  0% { left: 0; opacity: 0; }
  6% { opacity: 1; }
  55% { left: calc(100% - 5px); opacity: 1; }
  70%, 100% { left: calc(100% - 5px); opacity: 0; }
}
/* the guarantee made the tick list four long: the fourth tick follows the third */
.js .difference-copy.reveal.is-visible .check-item:nth-child(4) { transition-delay: 920ms, 920ms, 0ms, 0ms; }

/* ===================== Reviews: long ones show what fits, with "Read the full review" (27 Oct 2026) ===================== */
/* The card is sized to the longest review, so one long review made every review card too tall
   for one screen. Each review now shows as many lines as fit the screen; the rest opens in place. */
.rv-quote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--rv-lines, 7); overflow: hidden; }
.rv-card.is-open .rv-quote { display: block; -webkit-line-clamp: unset; overflow: visible; }
.rv-card.is-open .rv-quote { animation: rv-open 420ms ease both; }
@keyframes rv-open { from { opacity: 0.55; } to { opacity: 1; } }
.rv-more { align-self: flex-start; min-height: 44px; margin: -8px 0 -6px; padding: 0; border: 0; background: none; color: #0058b0; font: 700 15px/1 var(--body); cursor: pointer; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.rv-more:hover { color: var(--lime-deep); }
.rv-more:focus-visible { outline: 3px solid #7cc0ff; outline-offset: 3px; }
@media (min-width: 761px) and (max-height: 820px) { .rv { --rv-lines: 5; } }
@media (max-width: 760px) {
  .rv { --rv-lines: 8; }
  .rv-more { font-size: 14px; margin: -4px 0 -8px; }
}
@media (max-width: 760px) and (max-height: 700px) { .rv { --rv-lines: 6; } }
@media (prefers-reduced-motion: reduce) { .rv-card.is-open .rv-quote { animation: none; } }
@media (min-width: 761px) and (max-height: 700px) { .rv { --rv-lines: 4; } }

/* ===================== Animation add-ons (28 Oct 2026) =====================
   Spec: Figma "Homepage animation add-ons". Each plays once; nothing moves
   for people who ask their device for reduced motion. The heading wipe was
   tried and dropped: headings keep their original slide-up. */

/* Counting rating: fixed-width digits so the badge doesn't wobble */
.rating-chip strong, .rating-chip strong + span { font-variant-numeric: tabular-nums; }
/* while a badge waits to count, hide its numbers so "5.0" doesn't flash then drop to 0 */
.rating-chip.rc-ready strong, .rating-chip.rc-ready strong + span { visibility: hidden; }

/* Staggered service cards (tablet and computer): fade and rise one after
   another; once settled (is-settled) the cards' own hover and press timing applies. */
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .js .service-card.reveal:not(.is-visible) { opacity: 0; transform: translateY(40px); }
  .js .service-card.reveal:not(.is-settled) {
    transition: opacity 750ms cubic-bezier(.2, .8, .2, 1) var(--delay, 0ms), transform 750ms cubic-bezier(.2, .8, .2, 1) var(--delay, 0ms), background-color 300ms ease, color 300ms ease, box-shadow 420ms ease;
  }
}

/* Button feedback: lift on hover (mouse), press down on tap or click.
   The mouse-follow drift uses `translate`, so it no longer cancels these. */
.button-primary, .nav-cta {
  transition: background 180ms ease, color 180ms ease, transform 200ms cubic-bezier(.2, .8, .2, 1), box-shadow 200ms ease, translate 260ms cubic-bezier(.2, .8, .2, 1);
}
.button-primary:hover { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .button-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -14px rgba(22, 139, 255, 0.95); }
  .nav-cta:hover { transform: translateY(-2px); }
}
.button-primary:active, .nav-cta:active {
  transform: translateY(1px) scale(0.97);
  transition-duration: 90ms;
}
.button-primary:active { box-shadow: 0 6px 16px -10px rgba(22, 139, 255, 0.8); }
.js .difference-copy.reveal .trust-btn { transition: opacity 500ms ease 650ms, transform 650ms cubic-bezier(.2, .9, .3, 1.3) 650ms, background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, translate 260ms cubic-bezier(.2, .8, .2, 1); }
/* the Call button lifts and presses like the quote buttons; once it has slid in,
   it drops the 650ms entrance delay so hover and press respond at once */
.js .difference-copy.reveal.is-settled .trust-btn { transition: opacity 500ms ease, transform 200ms cubic-bezier(.2, .8, .2, 1), background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, translate 260ms cubic-bezier(.2, .8, .2, 1); }
@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) and (pointer: fine) {
    .js .difference-copy.reveal.is-visible .trust-btn-call:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -14px rgba(22, 139, 255, 0.95); }
  }
  .js .difference-copy.reveal.is-visible .trust-btn-call:active { transform: translateY(1px) scale(0.97); box-shadow: 0 6px 16px -10px rgba(22, 139, 255, 0.8); transition-duration: 90ms; }
}
@media (prefers-reduced-motion: reduce) {
  .button-primary:hover, .nav-cta:hover, .button-primary:active, .nav-cta:active { transform: none; }
}

/* Scroll progress bar: fills with --p (0 to 1); a bright squeegee tip
   rides the leading edge. */
.scroll-line span { transform: scaleX(var(--p, 0)); }
.scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(calc(var(--p, 0) * 100% - 100%));
  background: linear-gradient(90deg, transparent calc(100% - 4px), #eaf5ff calc(100% - 4px));
  filter: drop-shadow(0 0 4px #7cc0ff);
  opacity: min(1, calc(var(--p, 0) * 200));
  pointer-events: none;
}

/* ---------- "Other windows": the type-in box and its full-screen editor (home-2.js) ---------- */
.est-extra .est-extra-box { position: relative; width: auto; min-width: 76px; min-height: 52px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 2px solid var(--ink); background: var(--white); color: var(--ink); cursor: text; transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.est-extra .est-extra-box output { min-width: 0; font: 800 26px/1 var(--display); font-variant-numeric: tabular-nums; }
.est-extra-box .est-pencil { color: var(--muted); transition: transform 220ms ease, color 180ms ease; }
@media (hover: hover) { .est-extra .est-extra-box:hover { border-color: var(--lime); box-shadow: 0 0 0 4px rgba(22, 139, 255, 0.14); } .est-extra-box:hover .est-pencil { color: var(--lime); transform: rotate(-12deg); } }
.est-extra .est-extra-box:active { transform: scale(0.96); }
.est-extra .est-extra-box.has-value { border-color: var(--lime); }
.est-extra-box.is-landed { animation: est-land 520ms cubic-bezier(.2, .9, .3, 1.4); }
@keyframes est-land { 0% { box-shadow: 0 0 0 0 rgba(22, 139, 255, 0.6); } 100% { box-shadow: 0 0 0 14px rgba(22, 139, 255, 0); } }

.est-fs { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background-color: #061827; color: var(--white);
  background-image: radial-gradient(90% 60% at 80% -10%, rgba(22, 139, 255, 0.32), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: auto, 64px 64px, 64px 64px; }
.est-fs::backdrop { background: transparent; }
.est-fs-in { box-sizing: border-box; height: 100%; max-width: 560px; margin: 0 auto; padding: calc(28px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; }
/* the content arrives once the box has grown, and leaves before it shrinks */
.est-fs.is-open .est-fs-in > * { animation: est-fs-in 420ms cubic-bezier(.2, .8, .2, 1) backwards; }
.est-fs.is-open .est-fs-in > :nth-child(1) { animation-delay: 160ms; }
.est-fs.is-open .est-fs-in > :nth-child(2) { animation-delay: 220ms; }
.est-fs.is-open .est-fs-in > :nth-child(3) { animation-delay: 280ms; }
.est-fs.is-open .est-fs-in > :nth-child(n+4) { animation-delay: 320ms; }
.est-fs.is-closing .est-fs-in > * { animation: est-fs-out 160ms ease-in forwards; }
@keyframes est-fs-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes est-fs-out { to { opacity: 0; transform: translateY(8px); } }
.est-fs-title { margin: 0; font: 800 clamp(44px, 12vw, 72px)/0.9 var(--display); text-transform: uppercase; letter-spacing: -0.02em; }
.est-fs-sub { margin: 12px 0 0; max-width: 34em; color: rgba(255, 255, 255, 0.78); font-size: 16px; line-height: 1.55; }
.est-fs-count { margin: auto 0 0; padding-top: 28px; display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; align-items: stretch; gap: 12px; }
.est-fs-count button { min-height: 96px; border: 1px solid rgba(124, 192, 255, 0.4); background: rgba(255, 255, 255, 0.04); color: var(--white); display: grid; place-items: center; cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, transform 150ms ease; }
@media (hover: hover) { .est-fs-count button:hover:not(:disabled) { border-color: #7cc0ff; background: rgba(22, 139, 255, 0.16); } }
.est-fs-count button:active:not(:disabled) { transform: scale(0.92); }
.est-fs-count button:disabled { opacity: 0.35; cursor: default; }
.est-fs-field { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid var(--lime); background: rgba(22, 139, 255, 0.1); cursor: text;
  box-shadow: 0 0 0 0 rgba(22, 139, 255, 0.5); transition: box-shadow 200ms ease; }
.est-fs-field:focus-within { box-shadow: 0 0 0 6px rgba(22, 139, 255, 0.22); }
.est-fs-field input { width: 100%; padding: 8px 0 0; border: 0; outline: 0; background: transparent; color: var(--white); text-align: center; caret-color: #7cc0ff;
  font: 800 clamp(84px, 26vw, 132px)/0.9 var(--display); font-variant-numeric: tabular-nums; }
.est-fs-field input::placeholder { color: rgba(255, 255, 255, 0.35); }
.est-fs-field input.bump { animation: est-bump 380ms cubic-bezier(.2, .9, .3, 1.6); }
.est-fs-field span { padding-bottom: 10px; color: rgba(255, 255, 255, 0.7); font-size: 14px; }
.est-fs-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.est-fs-quick button { min-height: 52px; border: 1px solid rgba(255, 255, 255, 0.2); background: transparent; color: var(--white); font: 700 16px/1 var(--body); cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease; }
@media (hover: hover) { .est-fs-quick button:hover { border-color: #7cc0ff; background: rgba(22, 139, 255, 0.14); } }
.est-fs-quick button:active { transform: scale(0.95); }
.est-fs-max { min-height: 22px; margin: 10px 0 0; color: #ffd58a; font-size: 14px; text-align: center; }
.est-fs-done { width: 100%; margin-top: auto; min-height: 60px; justify-content: center; font-size: 18px; }
.est-fs-count + .est-fs-quick + .est-fs-max + .est-fs-done { margin-top: 18px; }
@media (min-height: 760px) { .est-fs-count { margin-top: 12vh; } .est-fs-done { margin-top: auto; } }
@media (prefers-reduced-motion: reduce) {
  .est-fs.is-open .est-fs-in > *, .est-fs.is-closing .est-fs-in > *, .est-extra-box.is-landed, .est-fs-field input.bump { animation: none; }
}

/* ---------- Areas we cover: right under Tap your windows, same navy and heading style ---------- */
.areas-section { position: relative; display: grid; grid-template-columns: 0.55fr 1.45fr; gap: 72px; align-items: start;
  padding: 0 clamp(24px, 6vw, 110px) 110px; background: var(--ink); color: var(--white); }
.areas-section::before { content: ""; position: absolute; top: 0; left: clamp(24px, 6vw, 110px); right: clamp(24px, 6vw, 110px); height: 1px; background: rgba(255, 255, 255, 0.13); }
.areas-copy { padding-top: 84px; }
.areas-section h2 { font-size: clamp(62px, 7vw, 105px); margin: 18px 0 0; }
.areas-copy > p { color: rgba(255, 255, 255, 0.78); line-height: 1.75; margin: 30px 0 0; max-width: 450px; }
.areas-grid { list-style: none; margin: 0; padding: 84px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.areas-grid li:first-child { grid-column: 1 / -1; }
.area-card { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 6px 16px; align-items: end;
  min-height: 132px; padding: 22px 22px 20px; border: 1px solid rgba(124, 192, 255, 0.24); background: rgba(255, 255, 255, 0.03); color: var(--white); text-decoration: none;
  transition: border-color 220ms ease, background-color 220ms ease, transform 260ms cubic-bezier(.2, .8, .2, 1); }
.area-card.is-main { min-height: 168px; border-color: rgba(124, 192, 255, 0.45);
  background: radial-gradient(120% 140% at 100% 0%, rgba(22, 139, 255, 0.28), transparent 60%), rgba(255, 255, 255, 0.04); }
.area-name { grid-column: 1; font: 800 clamp(30px, 3.2vw, 44px)/0.95 var(--display); text-transform: uppercase; letter-spacing: -0.01em; }
.area-card.is-main .area-name { font-size: clamp(40px, 4.4vw, 62px); }
.area-subs { grid-column: 1; font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.7); }
.area-tag { position: absolute; top: 18px; left: 22px; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #8ff0bf; }
.area-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3ee08f; box-shadow: 0 0 8px #3ee08f; animation: pulse 1.6s ease-in-out infinite; }
.area-go { grid-column: 2; grid-row: 1 / span 2; align-self: end; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(124, 192, 255, 0.4); color: #7cc0ff;
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease; }
.area-go svg { transition: transform 300ms cubic-bezier(.2, .9, .3, 1.4); }
/* a squeegee glint wipes across the card when you point at it or tap it */
.area-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(124, 192, 255, 0.22) 47%, rgba(235, 247, 255, 0.5) 50%, rgba(124, 192, 255, 0.22) 53%, transparent 62%);
  background-size: 300% 100%; background-position: 100% 0; transition: background-position 0s; }
.area-card:hover::before, .area-card:focus-visible::before, .area-card:active::before { background-position: 0% 0; transition: background-position 700ms cubic-bezier(.65, 0, .25, 1); }
.area-card:hover, .area-card:focus-visible { border-color: #7cc0ff; background-color: rgba(22, 139, 255, 0.1); transform: translateY(-3px); }
.area-card:hover .area-go, .area-card:focus-visible .area-go { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.area-card:hover .area-go svg, .area-card:focus-visible .area-go svg { transform: translateX(4px); }
.area-card:active { transform: scale(0.99); }
@media (max-width: 1100px) {
  .areas-section { grid-template-columns: 1fr; gap: 0; padding: 0 clamp(24px, 5vw, 60px) 70px; }
  .areas-section::before { left: clamp(24px, 5vw, 60px); right: clamp(24px, 5vw, 60px); }
  .areas-copy { padding-top: 64px; }
  .areas-section h2 { font-size: clamp(48px, 7vw, 72px); }
  .areas-grid { padding-top: 32px; }
}
@media (max-width: 640px) {
  .areas-section { padding: 0 16px 60px; }
  .areas-section::before { left: 16px; right: 16px; }
  .areas-copy { padding-top: 56px; }
  .areas-section h2 { font-size: clamp(44px, 13.4vw, 56px); }
  .areas-copy > p { margin-top: 20px; }
  .areas-grid { grid-template-columns: 1fr; gap: 10px; padding-top: 26px; }
  .area-card { min-height: 0; padding: 18px; }
  .area-card.is-main { min-height: 0; padding-top: 48px; }
  .area-tag { top: 16px; left: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .area-card, .area-go svg { transition: none; }
  .area-card::before, .area-tag::before { display: none; animation: none; }
}

/* comfortable tap targets (44px tall) for the logo, menu links and small text links */
.brand { min-height: 44px; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; }
.text-link { min-height: 44px; }
.scroll-cue { min-height: 44px; display: inline-flex; align-items: center; }



/* ---------- services swipe row on phones: steady while scrolling, with a clear "more" arrow ---------- */
.svc-edge { display: none; }
@media (max-width: 760px) {
  /* the cards stay put: no rise-in as the page scrolls past, no drift on a diagonal scroll */
  .js .service-grid .service-card.reveal { opacity: 1; transform: none; transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease; }
  .service-grid { overscroll-behavior-x: contain; }
  .svc-rail { position: relative; }
  .svc-edge { position: absolute; z-index: 4; right: -6px; top: calc(50% - 4px); display: grid; width: 46px; height: 46px; place-items: center; transform: translateY(-50%);
    border: 0; background: var(--lime); color: var(--ink); box-shadow: 0 10px 24px -8px rgba(22, 139, 255, 0.95), 0 0 0 6px rgba(255, 255, 255, 0.7); cursor: pointer;
    transition: opacity 260ms ease, transform 260ms ease; }
  .svc-edge.is-gone { opacity: 0; pointer-events: none; transform: translateY(-50%) scale(0.6); }
  .svc-edge:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
  .svc-count { padding: 4px 8px; background: rgba(6, 24, 39, 0.07); font: 700 12.5px/1 var(--body); color: var(--ink); font-variant-numeric: tabular-nums; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .svc-edge:not(.is-gone) svg { animation: svc-nudge 1.4s ease-in-out infinite; }
  .svc-edge:not(.is-gone)::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--lime); animation: svc-ping 1.8s ease-out infinite; pointer-events: none; }
}
@keyframes svc-ping { 0% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }

/* the floating phone booking bar is gone, so the footer no longer needs room for it */
@media (max-width: 760px) { footer.ft { padding-bottom: calc(28px + env(safe-area-inset-bottom)); } }

/* ---------- Other windows editor: half the screen (phones) or a centred panel, grown from the box ---------- */
.est-fs { background: transparent; background-image: none; overflow: hidden; }
.est-fs::backdrop { background: rgba(6, 24, 39, 0.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.est-fs.is-open::backdrop { animation: est-dim 360ms ease both; }
.est-fs.is-closing::backdrop { animation: est-undim 480ms ease forwards; }
@keyframes est-dim { from { opacity: 0; } }
@keyframes est-undim { to { opacity: 0; } }
.est-fs-in { position: absolute; inset: 0 0 var(--kb, 0px) 0; margin: auto; width: min(520px, calc(100vw - 32px)); height: fit-content;
  max-height: calc(100dvh - var(--kb, 0px) - 32px); padding: 22px 18px 18px; overflow-y: auto; transform-origin: 0 0;
  background-color: var(--ink);
  background-image: radial-gradient(90% 70% at 80% -10%, rgba(22, 139, 255, 0.32), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px; border: 1px solid rgba(124, 192, 255, 0.34); border-top: 4px solid var(--lime);
  box-shadow: 0 0 0 1px rgba(6, 24, 39, 0.6), 0 0 60px -10px rgba(22, 139, 255, 0.45), 0 40px 90px -30px rgba(0, 0, 0, 0.85); transition: bottom 200ms ease; }
.est-fs-title { font-size: clamp(32px, 9vw, 46px); }
.est-fs-sub { margin-top: 8px; font-size: 14.5px; line-height: 1.5; }
.est-fs-count { margin-top: 18px; padding-top: 0; grid-template-columns: 64px minmax(0, 1fr) 64px; }
.est-fs-count button { min-height: 76px; }
.est-fs-field input { font-size: clamp(56px, 17vw, 84px); }
.est-fs-max { min-height: 0; margin-top: 8px; }
.est-fs-max:empty { display: none; }
.est-fs-done { margin-top: 14px; min-height: 56px; }
.est-fs-count + .est-fs-quick + .est-fs-max + .est-fs-done { margin-top: 14px; }
@media (min-height: 760px) { .est-fs-count { margin-top: 18px; } }
@media (min-width: 761px) { .est-fs-in { padding: 26px 26px 24px; } }
/* contents arrive once the panel has grown, and leave before it shrinks */
.est-fs.is-open .est-fs-in > *, .est-fs.is-open .est-fs-in > :nth-child(1) { animation-delay: 300ms; }
.est-fs.is-open .est-fs-in > :nth-child(2) { animation-delay: 340ms; }
.est-fs.is-open .est-fs-in > :nth-child(3) { animation-delay: 380ms; }
.est-fs.is-open .est-fs-in > :nth-child(n+4) { animation-delay: 420ms; }
.est-fs.is-closing .est-fs-in > * { animation: est-fs-out 120ms ease-in forwards; }
@media (prefers-reduced-motion: reduce) {
  .est-fs.is-open::backdrop, .est-fs.is-closing::backdrop { animation: none; }
  .est-fs-in { transition: none; }
}

/* Other windows card: a close button in its corner */
.est-fs-top { position: relative; padding-right: 52px; }
.est-fs-x { position: absolute; top: -8px; right: -6px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.04); color: var(--white); cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease; }
.est-fs-x svg { transition: transform 300ms cubic-bezier(.2, .9, .3, 1.4); }
@media (hover: hover) { .est-fs-x:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.5); } .est-fs-x:hover svg { transform: rotate(90deg); } }
.est-fs-x:active { transform: scale(0.94); }
.est-fs-x:focus-visible { outline: 3px solid #7cc0ff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .est-fs-x svg { transition: none; } }

/* very large screens: dim the page without blurring it (blurring that much screen is costly) */
@media (min-width: 1700px) { .est-fs::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(6, 24, 39, 0.72); } }