/* The home page's parts: their place and size. Only the tokens of system.css. */

/* ---------- hero: dark, the glow behind, the words and one button, the VSL ---------- */
.hero { position: relative; isolation: isolate; padding-block: clamp(2.5rem, 1.2rem + 4vw, 5rem) clamp(7.5rem, 6rem + 3vw, 9rem); overflow: hidden; }
.hero__glow { position: absolute; inset: -20% -10% 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 46% at 74% 42%, color-mix(in srgb, var(--glow-b) 46%, transparent), transparent 70%),
    radial-gradient(34% 40% at 22% 30%, color-mix(in srgb, var(--glow-a) 34%, transparent), transparent 72%),
    radial-gradient(60% 50% at 50% 100%, color-mix(in srgb, var(--glow-b) 18%, transparent), transparent 70%); }
.hero__glow::after { content: ''; position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(color-mix(in srgb, var(--c-on-ink) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--c-on-ink) 5%, transparent) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(60% 60% at 50% 40%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(60% 60% at 50% 40%, #000 20%, transparent 75%); }
.hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: clamp(2rem, 1rem + 3vw, 4.5rem); width: min(100% - 2 * var(--gutter), var(--max-w)); margin-inline: auto; }
.hero__title { font-size: var(--fs-display); font-weight: 800; letter-spacing: -0.035em; }
.hero__line { margin-top: var(--space-4); max-width: 30rem; font-size: var(--fs-lead); line-height: 1.55; color: var(--c-on-ink-soft); }
.hero__act { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-5); }
.hero__media { position: relative; }
.vsl { position: relative; }
.vsl__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-l); overflow: hidden; background: var(--c-night-2);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-on-ink) 14%, transparent), 0 40px 90px -30px color-mix(in srgb, var(--glow-b) 70%, transparent), 0 20px 60px -20px var(--c-night-0); }
.vsl__frame::before { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.5px; background: var(--grad-main); -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 exclude, linear-gradient(#000 0 0); pointer-events: none; }
.vsl__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vsl__frame::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--c-night-0) 70%, transparent) 100%); pointer-events: none; }
.vsl__play { position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-end; justify-content: flex-start; gap: 14px; padding: clamp(14px, 2.4vw, 26px); border: 0; background: none; color: var(--c-on-ink); cursor: pointer; text-align: left; }
.vsl__btn { position: relative; display: grid; place-items: center; width: clamp(56px, 6vw, 72px); height: clamp(56px, 6vw, 72px); border-radius: 50%; background: var(--grad-main); box-shadow: 0 10px 30px -8px var(--glow-a); transition: transform var(--dur-med) var(--ease-out); }
.vsl__btn::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--c-on-ink) 40%, transparent); animation: vsl-ring 2.6s var(--ease-out) infinite; }
@keyframes vsl-ring { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .vsl__btn::before { animation: none; opacity: .6; } }
.vsl__btn svg { width: 40%; height: 40%; fill: var(--c-on-brand); margin-left: 6%; }
.vsl__play:hover .vsl__btn { transform: scale(1.06); }
.vsl__label { display: flex; flex-direction: column; gap: 2px; font: 700 var(--fs-ui-l)/1.2 var(--font-ui); text-shadow: 0 1px 12px var(--c-night-0); }
.vsl__label b { font: 600 var(--fs-small)/1 var(--font-ui); color: var(--c-on-ink-soft); }
.vsl__frame iframe { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; border: 0; }
.vsl__caption { margin-top: var(--space-3); text-align: right; font: 600 var(--fs-small)/1.3 var(--font-display); letter-spacing: .02em; color: var(--c-on-ink-muted); }
.vsl__stage { position: relative; }
/* the notifications land on the frame's lower right (the mixer and the desk: no face), the feed hanging past its edge */
.hero__notes { position: absolute; right: clamp(-48px, calc((var(--max-w) - 100vw) / 2 + 8px), -14px); bottom: 46px; z-index: 5; width: min(300px, 46%); height: 110px; pointer-events: none; transition: opacity var(--dur-med); }
.hero__wyw { width: 100%; height: 100%; }
.hero__stop { top: 12px; right: 12px; }
.hero.is-playing .hero__notes, .hero.is-playing .hero__stop { opacity: 0; visibility: hidden; transition: opacity var(--dur-med), visibility 0s var(--dur-med); }
@media (max-width: 999px) {
  .hero { padding-block: var(--space-5) clamp(7.5rem, 6rem + 5vw, 9rem); }
  .hero__in { grid-template-columns: 1fr; }
  .hero__words { max-width: 40rem; }
  .hero__notes { right: -10px; }
  .vsl__caption { text-align: left; }
}
@media (max-width: 759px) { .hero__notes { display: none; } }
@media (max-width: 519px) { .hero__act .btn { width: 100%; } }

/* ---------- stats: four figures across the hero's foot ---------- */
.stats { position: relative; z-index: 2; padding: 0; margin-top: clamp(-5.5rem, -4.6rem - 1vw, -4.5rem); }
.stats__list { display: grid; grid-template-columns: repeat(4, 1fr); width: min(100% - 2 * var(--gutter), var(--max-w)); margin: 0 auto; padding: 0; list-style: none; border: 1px solid var(--c-night-line); border-radius: var(--radius-l); background: color-mix(in srgb, var(--c-night-2) 78%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-l); }
.stats__item { position: relative; display: flex; flex-direction: column; gap: 6px; padding: clamp(18px, 1.6vw, 26px) clamp(18px, 2.2vw, 32px); }
.stats__item + .stats__item::before { content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c-spark) 45%, transparent), transparent); }
.stats__fig { font: 800 var(--fs-stat)/1 var(--font-display); letter-spacing: -0.03em; color: var(--c-brand-on-ink); background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stats__label { font: 600 var(--fs-small)/1.35 var(--font-ui); color: var(--c-on-ink-soft); }
@media (max-width: 760px) {
  .stats { margin-top: -5rem; }
  .stats__list { grid-template-columns: repeat(2, 1fr); }
  .stats__item:nth-child(3)::before { display: none; }
  .stats__item:nth-child(n + 3) { border-top: 1px solid var(--c-night-line); }
}

/* ---------- the Easy & Fast Process: a timeline over a pinned dusk clip ---------- */
.process { position: relative; isolation: isolate; padding-block: 0; margin-top: var(--section-y); }
.process__bg { position: absolute; inset: 0; z-index: -1; }
.process__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.process__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.process__pin::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--c-ink) 0%, color-mix(in srgb, var(--c-ink) 62%, transparent) 20%, color-mix(in srgb, var(--c-ink) 52%, transparent) 60%, var(--c-ink) 100%), radial-gradient(50% 60% at 15% 50%, color-mix(in srgb, var(--c-ink) 70%, transparent), transparent 80%); }
.process__in { padding-block: var(--section-y); }
.process__stop { top: var(--space-5); right: var(--gutter); }
.tl { position: relative; --p: 0; }
.tl__track { position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--c-on-ink) 14%, transparent); }
.tl__fill { position: absolute; inset: 0 0 auto; height: calc(var(--p) * 100%); border-radius: inherit; background: var(--grad-main); box-shadow: 0 0 14px var(--glow-a); }
.tl__list { display: grid; gap: clamp(1.25rem, 0.8rem + 1.6vw, 2.5rem); margin: 0; padding: 0; list-style: none; }
.tl__item { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: clamp(14px, 2vw, 28px); }
.tl__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font: 700 var(--fs-ui)/1 var(--font-display); color: var(--c-on-ink-soft); background: var(--c-night-2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-on-ink) 18%, transparent); transition: color var(--dur-med), box-shadow var(--dur-med), background var(--dur-med); }
.tl__item.is-reached .tl__dot { color: var(--c-on-brand); background: var(--grad-main); box-shadow: 0 0 0 5px color-mix(in srgb, var(--glow-a) 25%, transparent), 0 8px 26px -6px var(--glow-a); }
.tl__card { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(1.25rem, 0.6rem + 2.4vw, 3rem); padding: clamp(20px, 2.4vw, 34px); border: 1px solid var(--c-night-line); border-radius: var(--radius-l); background: color-mix(in srgb, var(--c-night-2) 62%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tl__time { display: inline-flex; align-items: center; gap: 8px; font: 700 var(--fs-small)/1 var(--font-ui); color: var(--c-spark-text); }
.tl__time::before { content: ''; width: 7px; height: 7px; transform: rotate(45deg); background: var(--c-spark); }
.tl__title { margin-top: var(--space-2); font-size: var(--fs-h3); }
.tl__line { margin-top: var(--space-2); color: var(--c-on-ink-soft); }
.tl__stage { position: relative; display: grid; align-items: center; }
.tl__stage .scene { width: 100%; }
.tl__stage--goal .scene { max-width: 420px; min-height: 252px; margin-inline: auto; }
.tl__stage--launch .scene { max-width: 420px; min-height: 284px; margin-inline: auto; }
.tl__stage--estimate .scene { min-height: 340px; padding-top: 6px; }
.tl__stage--fillcal .scene { min-height: 260px; }
.process .sec__act { margin-left: calc(56px + clamp(14px, 2vw, 28px)); }
@media (max-width: 819px) {
  .tl__track { left: 21px; }
  .tl__item { grid-template-columns: 44px minmax(0, 1fr); }
  .tl__dot { width: 44px; height: 44px; }
  .tl__card { grid-template-columns: 1fr; }
  .tl__stage { min-height: 0; }
  .tl__stage--goal .scene { min-height: 273px; }
  .tl__stage--launch .scene { min-height: 330px; }
  .process .sec__act { margin-left: 0; }
}
@media (max-width: 479px) {
  .tl__track { display: none; }
  .tl__item { grid-template-columns: 1fr; }
  .tl__dot { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; }
  .tl__card { padding: 18px 16px; }
  .tl__text { padding-right: 48px; }
}

/* ---------- the services in four groups ---------- */
.svcs .sec__in { padding-top: 0; }
.svcs__stop { top: 0; right: 0; }
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px); }
.svc { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--c-night-line); border-radius: var(--radius-l); background: var(--c-night-2); transition: border-color var(--dur-med); }
.svc:hover { border-color: color-mix(in srgb, var(--c-brand-light) 36%, transparent); }
.svc__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-night-3); }
.svc__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c-night-0) 12%, transparent), transparent 40%, color-mix(in srgb, var(--c-night-2) 85%, transparent) 100%); pointer-events: none; }
.svc__scene { position: absolute; z-index: 2; top: 18px; width: min(340px, 62%); }
.svc--found .svc__scene { right: 18px; }
.svc--click .svc__scene { left: 50%; transform: translateX(-50%); top: 14px; width: min(360px, 74%); }
.svc--picked .svc__scene { left: 18px; }
.svc--leads .svc__scene { left: 18px; }
.svc--found .svc__video { object-position: 30% 50%; }
.svc__body { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; padding: 0 clamp(20px, 2vw, 30px) clamp(22px, 2.2vw, 30px); margin-top: -10px; }
.svc__icon { display: grid; place-items: center; width: 48px; height: 48px; font-size: 24px; color: var(--c-on-brand); border-radius: 14px; background: var(--grad-main); box-shadow: 0 8px 22px -8px var(--glow-a); transform: rotate(45deg) scale(.86); }
.svc__icon .ico { transform: rotate(-45deg) scale(1.1); stroke-width: 1.9; }
.svc__title { font-size: var(--fs-h3); }
.svc__line { grid-column: 1 / -1; margin-top: var(--space-3); color: var(--c-on-ink-soft); }
.svc__list { grid-column: 1 / -1; display: grid; gap: 10px; margin: var(--space-4) 0 0; padding: var(--space-4) 0 0; list-style: none; border-top: 1px solid var(--c-night-line); }
.svc__list li { display: flex; align-items: flex-start; gap: 12px; font: 600 var(--fs-ui)/1.4 var(--font-ui); color: var(--c-on-ink); }
.svc__list .ico { width: 20px; height: 20px; margin-top: 1px; color: var(--c-brand-on-ink); }
.svcs__more { margin-top: var(--space-5); }
@media (max-width: 899px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc__media { aspect-ratio: 4 / 3; }
}
@media (max-width: 519px) {
  .svc__media { aspect-ratio: 4 / 4.2; }
  .svc__scene, .svc--click .svc__scene { width: calc(100% - 28px); top: 14px; }
  .svc--found .svc__scene { right: 14px; }
  .svc--picked .svc__scene, .svc--leads .svc__scene { left: 14px; }
}

/* ---------- the calculator ---------- */
.worth .sec__in { position: relative; }
.worth__stop { top: 0; right: 0; }
/* Where the heading runs the full width, it keeps clear of the stop icon at its right. */
@media (max-width: 899px) { .svcs .sec__head, .worth .sec__head { padding-right: 52px; } }
.worth__box { --calc-ink: var(--c-on-ink); --calc-ink-soft: var(--c-on-ink-soft); --calc-track: color-mix(in srgb, var(--c-on-ink) 14%, transparent); --calc-fill: color-mix(in srgb, var(--c-brand) 45%, var(--c-accent)); --calc-thumb: var(--c-on-ink); --calc-thumb-edge: var(--c-brand-light); --calc-thumb-shadow: 0 0 0 6px color-mix(in srgb, var(--glow-a) 30%, transparent), 0 4px 14px var(--c-night-0); --calc-focus: var(--c-focus); --calc-surface: transparent; --calc-font: var(--font-ui); --calc-font-figure: var(--font-display);
  /* the figures and the total sized by their own box, under the frame's fit (its widest value needs 6.2 em and 6.9 em):
     squeezed by the fit, a figure re-measured itself on every frame and never settled on the phone */
  --calc-figure-size: min(var(--fs-h2), 15.5cqi); --calc-total-size: min(var(--fs-display), 13.5cqi);
  /* its own layer: drawn once, so the anti-aliased edges at its fractional place (a slider's end, the ring) no longer
     shift by a shade from one frame to the next */
  will-change: transform;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2.6vw, 4rem); align-items: start; padding: clamp(20px, 3vw, 44px); border: 1px solid var(--c-night-line); border-radius: var(--radius-l);
  background: radial-gradient(70% 90% at 85% 50%, color-mix(in srgb, var(--glow-b) 18%, transparent), transparent 70%), var(--c-night-2); }
.worth__controls { display: grid; gap: var(--space-4); align-content: start; }
.worth__controls .calc-total { padding-bottom: var(--space-4); border-bottom: 1px solid var(--c-night-line); }
.worth__controls .calc-total__value { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.worth__foot { grid-column: 1 / -1; padding-top: var(--space-3); border-top: 1px solid var(--c-night-line); text-align: center; }
.worth__result { display: grid; justify-items: stretch; gap: var(--space-4); text-align: center; align-content: center; }
.worth__result .calc-fit { justify-items: center; }
.worth__picture { width: min(100%, 380px); justify-self: center; }
.ring { display: block; width: 100%; height: auto; overflow: visible; }
.ring__stop-a { stop-color: var(--c-brand-light); }
.ring__stop-b { stop-color: var(--c-accent-light); }
/* the glow behind the ring grows with the year (--kit-size); drawn by CSS, as an SVG gradient it shimmered by a shade
   from one frame to the next, so the built picture never held still */
.worth__picture { background: radial-gradient(circle closest-side, color-mix(in srgb, var(--glow-b) calc(15.75% + var(--kit-size, .4) * 29.25%), transparent), transparent 75%); }
.ring__track { fill: none; stroke: color-mix(in srgb, var(--c-on-ink) 10%, transparent); stroke-width: 22; }
/* A month lights as it lands, on the kit's own step (--kit-in), never a transition: once built, nothing moves. */
.ring__seg { fill: url(#ring-grad); opacity: .18; }
.ring__seg[data-kit-on] { opacity: calc(.18 + .82 * var(--kit-in, 1)); }
.ring__dot { fill: var(--c-on-ink); }
.ring__dot.is-new { fill: var(--c-spark); }
.ring__lbl { font: 600 17px/1 var(--font-ui); fill: var(--c-on-ink-soft); text-anchor: middle; }
.ring__gem { fill: none; stroke: var(--c-spark); stroke-width: 2; stroke-linejoin: round; }
.ring__cap { font: 600 17px/1 var(--font-ui); fill: var(--c-on-ink-soft); text-anchor: middle; }
.ring__legend { display: none; margin: var(--space-2) 0 0; font: 600 var(--fs-small)/1.3 var(--font-ui); color: var(--c-on-ink-soft); }
@media (max-width: 899px) { .worth__box { grid-template-columns: 1fr; } .worth__picture { width: min(100%, 320px); } }
/* On the narrowest phones the ring draws under 306 px: its numbers grow to stay 13 px or more as shown, and the
   caption leaves the ring for a line under it. */
.worth__picture { container-type: inline-size; }
@container (max-width: 305px) {
  .ring__lbl { font-size: 21.5px; }
  .ring__cap { display: none; }
  .ring__gem { transform: translateY(30px); }
  .ring__legend { display: block; }
}

/* ---------- compare: drag the line ---------- */
.cmp__box { position: relative; aspect-ratio: 16 / 8; min-height: 440px; border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--c-night-line); touch-action: pan-y; }
.cmp__side { position: absolute; inset: 0; }
.cmp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.before .cmp__img { filter: grayscale(1) brightness(.62) contrast(.95); }
.after { clip-path: inset(0 0 0 calc(var(--kit-v, .5) * 100%)); }
.after .cmp__img { object-position: 60% 40%; }
.cmp__side::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.before::after { background: linear-gradient(90deg, color-mix(in srgb, var(--c-night-0) 70%, transparent), transparent 55%); }
.after::after { background: linear-gradient(270deg, color-mix(in srgb, var(--c-night-0) 72%, transparent), transparent 55%); }
.cmp__cards { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); display: grid; gap: 10px; width: min(300px, 36%); }
.before .cmp__cards { left: clamp(14px, 3vw, 40px); }
.after .cmp__cards { right: clamp(14px, 3vw, 40px); }
.cmp__tag { justify-self: start; padding: 8px 14px; border-radius: 999px; font: 700 var(--fs-small)/1 var(--font-ui); color: var(--c-on-ink); background: color-mix(in srgb, var(--c-night-0) 70%, transparent); border: 1px solid color-mix(in srgb, var(--c-on-ink) 20%, transparent); }
.cmp__tag--us { color: var(--c-on-brand); background: var(--grad-main); border-color: transparent; }
.cmp__card { display: grid; gap: 3px; padding: 14px 16px; border-radius: var(--radius-m); border: 1px solid color-mix(in srgb, var(--c-on-ink) 16%, transparent); background: color-mix(in srgb, var(--c-night-1) 74%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.cmp__card b { font: 700 var(--fs-ui-l)/1.25 var(--font-display); }
.cmp__card span { font-size: var(--fs-small); color: var(--c-on-ink-soft); }
.before .cmp__card b { color: var(--c-on-ink-soft); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--c-on-ink) 55%, transparent); text-decoration-thickness: 2px; }
.after .cmp__card { border-color: color-mix(in srgb, var(--c-brand-light) 34%, transparent); }
[data-kit-whole] { transition: opacity .2s, visibility 0s; }
[data-kit-under] { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.cmp__box input[type="range"] { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.handle { position: absolute; z-index: 4; top: 0; bottom: 0; left: calc(var(--kit-v, .5) * 100%); width: 0; pointer-events: none; opacity: clamp(0, calc((min(var(--kit-v, .5), 1 - var(--kit-v, .5)) - 0.03) * 14), 1); }
.cmp__box input:focus-visible + .handle { opacity: 1; }
.handle__line { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: linear-gradient(180deg, var(--c-brand-light), var(--c-spark), var(--c-accent-light)); box-shadow: 0 0 18px var(--glow-a); }
.handle__knob { position: absolute; top: 22px; left: -26px; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; color: var(--c-on-brand); background: var(--grad-main); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-ink) 60%, transparent), 0 10px 26px -8px var(--glow-a); }
.handle__knob .ico { width: 16px; height: 16px; stroke-width: 2.4; }
.handle__knob .ico:first-child { transform: scaleX(-1); }
.handle__hint { position: absolute; top: 82px; left: -30px; width: 60px; text-align: center; font: 700 var(--fs-small)/1 var(--font-ui); color: var(--c-on-ink); text-shadow: 0 1px 8px var(--c-night-0); }
.cmp__box[data-kit-touched] .handle__hint { opacity: 0; }
.cmp__promises { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.cmp__promises li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--c-night-line); border-radius: var(--radius-m); font: 600 var(--fs-ui)/1.35 var(--font-ui); background: color-mix(in srgb, var(--c-night-2) 60%, transparent); }
.cmp__promises .ico { width: 22px; height: 22px; color: var(--c-spark); }
@media (max-width: 899px) { .cmp__promises { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 699px) {
  .cmp__box { aspect-ratio: auto; height: 620px; min-height: 0; }
  .cmp__cards { top: auto; bottom: 16px; transform: none; width: calc(50% - 22px); gap: 8px; }
  .before .cmp__cards { left: 12px; }
  .after .cmp__cards { right: 12px; }
  .cmp__card { padding: 10px 11px; }
  .cmp__card b { font-size: var(--fs-small); }
  .cmp__card span { font-size: 13px; }
  .cmp__tag { padding: 7px 10px; font-size: 13px; }
  .handle__knob { top: 16px; }
  .handle__hint { top: 74px; }
}
@media (max-width: 479px) { .cmp__promises { grid-template-columns: 1fr; } }

/* ---------- who we help: a bento of seven tiles ---------- */
.who-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(190px, 16vw, 240px); gap: clamp(12px, 1.4vw, 18px); }
.tile { position: relative; isolation: isolate; display: flex; align-items: flex-end; overflow: hidden; border-radius: var(--radius-l); border: 1px solid var(--c-night-line); color: var(--c-on-ink); text-decoration: none; background: var(--c-night-2); }
.tile--roofing { grid-column: span 2; grid-row: span 2; }
.tile--foundation-repair { grid-column: span 2; }
.tile__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.tile::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--c-night-0) 88%, transparent) 100%); }
.tile:hover .tile__img { transform: scale(1.04); }
.tile__text { display: grid; gap: 4px; padding: clamp(16px, 1.6vw, 24px); }
.tile__name { font: 700 var(--fs-h3)/1.15 var(--font-display); letter-spacing: -0.02em; }
.tile__line { font-size: var(--fs-small); color: var(--c-on-ink-soft); }
.tile--more { grid-column: span 2; background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--glow-b) 40%, transparent), transparent 60%), radial-gradient(90% 90% at 0% 100%, color-mix(in srgb, var(--glow-a) 30%, transparent), transparent 60%), var(--c-night-2); border-color: color-mix(in srgb, var(--c-brand-light) 30%, transparent); }
.tile--more::before { display: none; }
.tile__go { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-2); font: 700 var(--fs-ui)/1 var(--font-ui); color: var(--c-brand-on-ink); }
.tile__go .ico { width: 18px; height: 18px; stroke-width: 2.2; }
.tile--foundation-repair .tile__img { object-position: 30% 50%; }
.tile--hvac .tile__img { object-position: 30% 50%; }
@media (hover: hover) { .tile::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; opacity: 0; transition: opacity var(--dur-med); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-brand-light) 60%, transparent); pointer-events: none; } .tile:hover::after { opacity: 1; } }
@media (max-width: 899px) {
  .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 210px; }
  .tile--roofing { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 519px) {
  .who-grid { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .tile--roofing, .tile--foundation-repair, .tile--more { grid-column: auto; }
}

/* ---------- FAQ ---------- */
.faq__in { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--space-5); align-items: start; }
.faq .sec__head { position: sticky; top: calc(var(--header-h) + 24px); }
@media (max-width: 899px) { .faq__in { grid-template-columns: 1fr; } .faq .sec__head { position: static; margin-bottom: 0; } }

/* ---------- sections' rhythm ---------- */
.svcs, .worth, .cmp, .who, .faq { padding-block: var(--section-y); }
.process + .svcs { padding-top: calc(var(--section-y) * 0.6); }