/* home.css: the home page's parts, placed and sized with system.css's tokens. */

/* ---------- hero: full-bleed field footage under a navy wash (kit rotate) ---------- */
.hero { position: relative; display: grid; align-items: center; min-height: clamp(640px, calc(100svh - 76px), 880px); overflow: hidden; isolation: isolate; background: var(--c-ink); color: var(--c-paper); }
.hero__slides { position: absolute; inset: 0; z-index: 0; }
[data-kit-scene="rotate"] [data-kit-slide] { position: absolute; inset: 0; margin: 0; visibility: hidden; overflow: hidden; }
[data-kit-scene="rotate"] [data-kit-slide][data-kit-on] { visibility: visible; z-index: 2; opacity: var(--kit-move, 1); transform: translateX(var(--kit-glide, calc((1 - var(--kit-move, 1)) * 4%))); } /* the kit gives the glide in whole device pixels */
[data-kit-scene="rotate"]:not(:has([data-kit-slide][data-prev])) [data-kit-slide][data-kit-on] { transform: none; opacity: 1; }
[data-kit-scene="rotate"] [data-kit-slide][data-prev] { visibility: visible; z-index: 1; }
[data-kit-scene="rotate"] [data-kit-slide] video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-kit-scene="rotate"]:not(:has([data-kit-slide][data-kit-on])) [data-kit-slide]:not([data-kit-slide] ~ [data-kit-slide]) { visibility: visible; }
[data-kit-scene="rotate"] [data-kit-slide] video { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; clip-path: inset(2px); } /* each clip reaches 1 px past its frame, so no still picture shows beside it; until it has shown its first frames, its first paint is cut 1 px inside the frame, so the first picture stays the largest paint */
[data-kit-scene="rotate"] [data-kit-slide] video[data-kit-shown] { clip-path: none; } /* the kit marks a clip once it has shown its first frames */
[data-kit-scene="rotate"] [data-kit-slide][data-prev] { opacity: clamp(0, (1 - var(--kit-move, 0)) * 1000, 1); } /* the picture that left goes once the new one covers it whole */
[data-kit-scene="rotate"] [data-kit-slide] img.kit-first { inset: -1px !important; width: calc(100% + 2px) !important; height: calc(100% + 2px) !important; max-width: none; } /* the first picture laid like its clip */
.hero__slide video, .hero__slide .kit-first { object-position: var(--pos, 62% 50%); filter: saturate(1.06) contrast(1.04); }
.hero__slide--flip video { transform: scaleX(-1); }
.hero__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 94%, transparent) 0%, color-mix(in srgb, var(--c-ink) 84%, transparent) 30%, color-mix(in srgb, var(--c-ink) 48%, transparent) 50%, color-mix(in srgb, var(--c-ink) 8%, transparent) 70%, transparent 86%),
    linear-gradient(0deg, color-mix(in srgb, var(--c-ink) 60%, transparent) 0%, transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 35%, transparent) 0%, transparent 18%); }
.hero__stop { position: absolute; top: 22px; right: max(var(--gutter), calc((100% - var(--max-w)) / 2)); z-index: 4; }
.hero__in { position: relative; z-index: 3; padding-block: 56px 64px; }
.hero__copy { max-width: 660px; }
.hero__title { font-size: clamp(2.4rem, 1.2rem + 3.3vw, 4rem); line-height: 1.02; letter-spacing: -.028em; }
.hero__say { display: block; }
.hero__l1, .hero__l2 { display: block; white-space: nowrap; }
.hero__word { display: inline-block; white-space: nowrap; opacity: calc(1 - var(--kit-swap, 0)); transform: translateY(calc(var(--kit-swap, 0) * -.16em)); background: linear-gradient(var(--c-gold), var(--c-gold)) 0 100% / calc((1 - var(--kit-swap, 0)) * 100%) .075em no-repeat; padding-bottom: .04em; }
.hero__line { max-width: 540px; margin: 22px 0 28px; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.55; color: color-mix(in srgb, var(--c-paper) 88%, transparent); }
.hero__line b { color: var(--c-paper); font-weight: 700; }
.hero__card { position: absolute; right: max(var(--gutter), calc((100% - var(--max-w)) / 2)); bottom: 15%; display: flex; align-items: center; gap: 14px; min-width: 300px; max-width: 360px; padding: 15px 20px 15px 15px; opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 16px)) scale(calc(.97 + var(--kit-in, 1) * .03)); }
.hero__tick { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--c-teal); }
.hero__tick svg { width: 20px; height: 20px; fill: none; stroke: var(--c-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hero__card-text { display: grid; gap: 3px; font-family: var(--font-ui); line-height: 1.25; }
.hero__card-text b { font-size: 1.0625rem; font-weight: 700; }
.hero__card-text span { font-size: .9375rem; color: color-mix(in srgb, var(--c-paper) 78%, transparent); }

@media (max-width: 860px) {
  .hero { display: block; min-height: 0; }
  .hero__slides { position: relative; inset: auto; height: clamp(220px, 34svh, 320px); }
  .hero__shade { top: 0; bottom: auto; height: clamp(220px, 34svh, 320px); background: linear-gradient(0deg, var(--c-ink) 0%, color-mix(in srgb, var(--c-ink) 30%, transparent) 26%, transparent 55%); }
  .hero__slide video, .hero__slide .kit-first { object-position: var(--pos-phone, 60% 45%); }
  .hero__card { right: var(--gutter); bottom: 34px; min-width: 0; max-width: calc(100% - 2 * var(--gutter)); padding: 11px 14px 11px 11px; gap: 10px; }
  .hero__tick { width: 34px; height: 34px; }
  .hero__card-text b { font-size: .9375rem; }
  .hero__card-text span { font-size: .8125rem; }
  .hero__stop { top: 12px; right: var(--gutter); }
  .hero__in { padding-block: 6px 40px; margin-top: -8px; }
  .hero__title { font-size: min(2.7rem, 8.4vw); }
  .hero__line { margin: 14px 0 20px; }
}

/* ---------- plan: the free plan tour over golden-hour footage ---------- */
.plan__wrap { display: flex; flex-direction: column; }
.tour { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 28px; align-items: stretch; }
.tour__tabs { display: flex; flex-direction: column; gap: 10px; }
.tour__tab { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 4px; align-content: center; width: 100%; padding: 20px 22px; border: 1px solid color-mix(in srgb, var(--c-paper) 14%, transparent); border-radius: var(--radius-m); background: color-mix(in srgb, var(--c-ink) 42%, transparent); color: var(--c-paper); text-align: left; cursor: pointer; overflow: hidden; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color var(--dur-fast), border-color var(--dur-fast); }
.tour__tab:hover { border-color: color-mix(in srgb, var(--c-gold) 55%, transparent); }
.tour__tab[aria-selected="true"] { background: color-mix(in srgb, var(--c-navy-2) 82%, transparent); border-color: color-mix(in srgb, var(--c-gold) 70%, transparent); box-shadow: 0 20px 40px -24px var(--c-black); }
.tour__num { grid-row: span 2; align-self: start; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--c-gold) 55%, transparent); color: var(--c-gold); font: 700 .9375rem/1 var(--font-display); font-stretch: 100%; }
.tour__tab[aria-selected="true"] .tour__num { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-ink); }
.tour__name { font: 800 1.1875rem/1.2 var(--font-display); font-stretch: 104%; letter-spacing: -.01em; }
.tour__sub { font: 500 .9375rem/1.35 var(--font-ui); color: color-mix(in srgb, var(--c-paper) 74%, transparent); }
.tour__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--c-gold); transform-origin: 0 50%; transform: scaleX(0); }
.tour__tabs[data-kit-on] .tour__tab[aria-selected="true"] .tour__bar { transform: scaleX(var(--kit-fill, 0)); }
.tour__stage { position: relative; min-height: clamp(460px, 40vw, 530px); display: grid; }
.tour__panel { display: grid; place-items: center; padding: 56px 28px 28px; }
.tour__panel:focus-visible { outline-offset: -6px; }
.tour__panel .scene { width: 100%; }
.tour__stop { position: absolute; top: 14px; right: 14px; z-index: 3; }
@media (max-width: 900px) {
  .tour { grid-template-columns: 1fr; gap: 14px; }
  /* the three tabs stand whole, one under another: each its number and its name */
  .tour__tabs { gap: 6px; }
  .tour__tab { padding: 10px 14px; column-gap: 12px; }
  .tour__num { grid-row: auto; align-self: center; width: 30px; height: 30px; font-size: .8125rem; }
  .tour__name { font-size: 1rem; }
  .tour__sub { display: none; }
  .tour__stage { min-height: 440px; }
  .tour__panel { padding: 52px 12px 16px; }
}

/* ---------- how: the three steps over the desk (scene track) ---------- */
.how__track { max-width: 1160px; margin-inline: auto; }

/* ---------- worth: the calculator, its year as the rising node line ---------- */
.worth__box {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); overflow: hidden;
  border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-paper); box-shadow: var(--shadow-l);
  --calc-ink: var(--c-ink); --calc-ink-soft: var(--c-ink-soft); --calc-track: var(--c-line); --calc-fill: var(--c-ink);
  --calc-thumb: var(--c-gold); --calc-thumb-edge: var(--c-ink); --calc-focus: var(--c-brand-text); --calc-surface: var(--c-paper);
  --calc-thumb-size: 30px; --calc-track-size: 8px; --calc-track-radius: 4px; --calc-value-size: 1.625rem; --calc-gap: 30px;
}
.worth__controls { display: flex; flex-direction: column; justify-content: center; padding: 44px; }
.worth__result {
  position: relative; display: flex; flex-direction: column; gap: 16px; padding: 34px 40px 28px; color: var(--c-paper);
  background: radial-gradient(120% 90% at 100% 0%, var(--c-navy-3) 0%, var(--c-ink) 62%);
  --calc-ink: var(--c-paper); --calc-ink-soft: color-mix(in srgb, var(--c-paper) 76%, transparent); --calc-focus: var(--c-gold);
  --calc-surface: var(--c-ink); --calc-total-size: clamp(2.5rem, 1.5rem + 2.6vw, 3.75rem); --calc-figure-size: 1.75rem;
}
.worth__stop { position: absolute; z-index: 2; top: 18px; right: 18px; }
.worth__result .calc-total { padding-right: 56px; }
.worth__result .calc-total__value { color: var(--c-gold); }
.worth__result .calc-total__label { color: color-mix(in srgb, var(--c-paper) 88%, transparent); }
.worth__result .calc-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.worth__result .calc-figure { padding: 14px 16px; border: 1px solid var(--c-glass-line); border-radius: var(--radius-m); background: color-mix(in srgb, var(--c-paper) 6%, transparent); }
.worth__result .calc-figure__label { color: color-mix(in srgb, var(--c-paper) 82%, transparent); }
.worth__result .calc-note { margin: 0; font-size: var(--fs-small); color: color-mix(in srgb, var(--c-paper) 74%, transparent); }
.worth__picture { position: relative; padding-bottom: 26px; }
.yr { position: relative; aspect-ratio: 640 / 300; }
.yr__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.yr-grid line { stroke: color-mix(in srgb, var(--c-paper) 14%, transparent); stroke-width: 1; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; }
.yr-grid .yr-base { stroke: color-mix(in srgb, var(--c-paper) 34%, transparent); stroke-dasharray: none; }
.yr-stop-a { stop-color: var(--c-gold); stop-opacity: .45; }
.yr-stop-b { stop-color: var(--c-gold); stop-opacity: 0; }
.yr-area { fill: url(#yr-fill); transition: d .5s var(--ease-out); }
.yr-line, .yr-arrow { fill: none; stroke: var(--c-gold); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c-gold) 55%, transparent)); transition: d .5s var(--ease-out); }
.yr-arrow { opacity: 0; transition: opacity .4s, d .5s var(--ease-out); }
.yr[data-built] .yr-arrow { opacity: 1; }
.yr-node { opacity: 0; transition: transform .5s var(--ease-out), opacity .3s; }
.yr-node[data-kit-on] { opacity: 1; }
.yr-stem { stroke: color-mix(in srgb, var(--c-gold) 42%, transparent); stroke-width: 1.5; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; transform-origin: 0 0; transition: transform .5s var(--ease-out); }
.yr-ring { fill: var(--c-ink); stroke: var(--c-gold); stroke-width: 3; transform-box: fill-box; transform-origin: center; transform: scale(calc(.3 + .7 * var(--kit-in, 1))); }
.yr-dot { fill: var(--c-gold); }
.yr__flag {
  position: absolute; left: calc(var(--yr-tip-x, .93) * 100%); top: calc(var(--yr-tip-y, .3) * 100%); transform: translate(-100%, calc(-100% - 12px));
  padding: 7px 13px; border-radius: 999px; background: var(--c-gold); color: var(--c-ink); box-shadow: var(--glow-gold);
  font-family: var(--font-display); font-stretch: var(--stretch-display); font-size: 1rem; font-weight: 800; line-height: 1.1; white-space: nowrap;
  opacity: 0; transition: opacity .4s, left .5s var(--ease-out), top .5s var(--ease-out);
}
.yr[data-built] .yr__flag { opacity: 1; }
.yr__axis { position: absolute; inset: 0; pointer-events: none; font-family: var(--font-ui); font-size: 13px; font-weight: 600; line-height: 1; color: color-mix(in srgb, var(--c-paper) 74%, transparent); }
.yr__axis span { position: absolute; top: 100%; margin-top: 8px; transform: translateX(-50%); white-space: nowrap; }
.yr__axis span:first-child { left: calc(65 / 640 * 100%); }
.yr__axis span:last-child { left: calc(560 / 640 * 100%); }
@media (prefers-reduced-motion: reduce) { .yr-area, .yr-line, .yr-arrow, .yr-node, .yr-stem, .yr__flag { transition: none; } }
@media (max-width: 900px) {
  .worth__box { grid-template-columns: 1fr; }
  .worth__controls { padding: 28px 22px 30px; }
  .worth__result { padding: 26px 22px 22px; }
  .yr__flag { padding: 5px 10px; font-size: .875rem; transform: translate(-100%, calc(-100% - 8px)); }
}

/* ---------- outcomes: every road leads to your door (scene warren over the aerial clip) ---------- */
.outcomes__stage { position: relative; aspect-ratio: 1240 / 580; overflow: hidden; border: 1px solid var(--c-glass-line); border-radius: var(--radius-l); background: var(--c-navy-2); box-shadow: var(--shadow-l); }
.outcomes__stage video.outcomes__clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.outcomes__wash { position: absolute; inset: 0; background: radial-gradient(70% 80% at 50% 58%, color-mix(in srgb, var(--c-ink) 50%, transparent), color-mix(in srgb, var(--c-ink) 82%, transparent)); }
.outcomes__scene { position: absolute; inset: 0; }
.outcomes__stop { position: absolute; z-index: 3; top: 16px; right: 16px; }
.outcomes__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.outcomes__list li { position: relative; padding-top: 26px; border-top: 1px solid var(--c-glass-line); }
.outcomes__node { position: absolute; top: -8px; left: 0; width: 15px; height: 15px; border: 3px solid var(--c-gold); border-radius: 50%; background: var(--c-ink); box-shadow: var(--glow-gold); }
.outcomes__list h3 { color: var(--c-paper); }
.outcomes__list p { margin: 10px 0 6px; font-size: var(--fs-small); line-height: 1.55; color: color-mix(in srgb, var(--c-paper) 84%, transparent); }
@media (min-width: 700px) and (max-width: 1099px) {
  .outcomes .wrap { display: grid; grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); column-gap: 40px; align-items: center; }
  .outcomes .section-head { grid-column: 1 / -1; }
  .outcomes__stage { aspect-ratio: 360 / 560; }
  .outcomes__list { grid-template-columns: 1fr; gap: 26px; margin: 0; }
}
@media (max-width: 699px) {
  .outcomes__stage { max-width: 440px; margin-inline: auto; aspect-ratio: 360 / 560; }
  .outcomes__list { grid-template-columns: 1fr; gap: 26px; }
}
@media (min-width: 520px) and (max-width: 699px) { .outcomes__list { grid-template-columns: 1fr 1fr; } }
/* the narrow board fills its stage from 40% to 50% with nothing at its right edge: the stop sits there, clear of the cards */
@media (max-width: 1099px) { .outcomes__stop { top: 41%; right: 10px; } }

/* ---------- close: the closing band, the words in its lower half ---------- */
.close { display: flex; align-items: flex-end; min-height: min(90svh, 880px); }
.close__media::after { background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 34%, transparent) 0%, color-mix(in srgb, var(--c-ink) 20%, transparent) 30%, color-mix(in srgb, var(--c-ink) 76%, transparent) 60%, color-mix(in srgb, var(--c-ink) 96%, transparent) 100%); }
.close__wrap { width: 100%; text-align: center; }
.close h2 { font-size: var(--fs-h1); color: var(--c-paper); }
.close__line { max-width: 560px; margin: 16px auto 28px; font-size: 1.1875rem; line-height: 1.5; color: color-mix(in srgb, var(--c-paper) 90%, transparent); }
.close .picker { max-width: 640px; margin-inline: auto; text-align: left; }

/* ---------- plan: the estimate drops in from above its own box, so its box reaches up (and down) to hold the whole fall ---------- */
#plan [data-scene="estimate"] { padding-block: 120px 40px; margin-block: -120px -40px; }

/* ---------- who on the phone: the lawyer's whole face, and the masked face clear of its title ---------- */
@media (max-width: 600px) {
  .tile { min-height: 240px; }
  /* both photos stand tall: their tiles grow so each face sits whole above the words */
  .tile--law { min-height: 380px; }
  .tile--law .tile__photo { object-position: 50% 0%; }
  .tile--health { min-height: 340px; }
  .tile--health .tile__photo { object-position: 50% 35%; }
}