/* Home "living world" sections (outside walkthrough). Scoped to body.home */
body.home{
  --glow-warm:radial-gradient(ellipse 80% 60% at 70% 20%,rgba(242,197,138,.22),transparent 65%);
  --glow-cool:radial-gradient(ellipse 70% 50% at 15% 80%,rgba(11,61,145,.35),transparent 70%);
  --depth-1:0 12px 40px -8px rgba(0,0,0,.45);
  --depth-2:0 24px 60px -12px rgba(0,0,0,.55);
  --depth-3:0 36px 80px -16px rgba(0,0,0,.6);
}
body.home .living-section{position:relative;overflow:hidden;isolation:isolate;padding:clamp(72px,12vw,108px) 0}
body.home section.intro.living-section{padding:calc(var(--intro-header) + 16px) var(--pad) max(16px,env(safe-area-inset-bottom))}
body.home .living-section::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--glow-warm),var(--glow-cool);opacity:.85;z-index:0}
body.home .living-backdrop{position:absolute;inset:-8% -5%;z-index:-1;pointer-events:none}
body.home .living-backdrop img{width:100%;height:100%;object-fit:cover;filter:blur(28px) saturate(1.15) brightness(.42);transform:scale(1.08);opacity:.55}
body.home .living-backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,11,24,.75) 0%,rgba(5,11,24,.88) 45%,rgba(5,11,24,.94) 100%)}
body.home .living-inner{position:relative;z-index:2}
body.home .living-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:.55}
body.home .living-prop{position:absolute;right:5%;top:18%;width:min(28vw,160px);z-index:1;pointer-events:none;transform:translate3d(var(--px,0),var(--py,0),0);filter:drop-shadow(0 18px 28px rgba(0,0,0,.45))}
body.home .living-prop img{width:100%;height:auto;display:block;animation:prop-float 7s var(--ease) infinite alternate}
body.home .living-prop::after{content:"";position:absolute;left:15%;right:15%;bottom:-8%;height:12%;background:radial-gradient(ellipse,rgba(242,197,138,.25),transparent 70%);filter:blur(6px)}
@keyframes prop-float{0%{transform:translateY(0) rotate(-2deg)}100%{transform:translateY(-10px) rotate(3deg)}}
body.home .door-wipe{position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,rgba(242,197,138,.5),transparent);opacity:.6;z-index:3}
/* Reveals */
body.home .reveal{opacity:0;transform:translateY(18px);filter:blur(6px);transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease)}
body.home .reveal.is-in{opacity:1;transform:none;filter:none}
body.home .reveal-line{display:block;overflow:hidden}
body.home .reveal-line>span{display:block;transform:translateY(110%);transition:transform .75s var(--ease)}
body.home .reveal-line.is-in>span{transform:none}
body.home .reveal-stagger>*{transition-delay:calc(var(--i,0) * 80ms)}
/* Tilt + sheen */
body.home .tilt-card{--rx:0deg;--ry:0deg;--sheen-x:50%;--sheen-y:50%;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .2s var(--ease),box-shadow .3s}
body.home .tilt-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(280px circle at var(--sheen-x) var(--sheen-y),rgba(255,255,255,.18),transparent 55%);z-index:3}
body.home .tilt-card.tilt-on::after{opacity:1}
/* Intro: first viewport hero, vertically centered below fixed header (Safari svh/dvh) */
body.home .intro{
  --intro-header:calc(60px + max(14px,env(safe-area-inset-top)));
  box-sizing:border-box;
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:radial-gradient(110% 90% at 85% 0%,rgba(11,61,145,.4),transparent 60%),var(--ink);
}
body.home .intro .living-inner{width:100%;max-width:1160px;margin:0 auto;padding:0}
@media (max-width:820px),(max-aspect-ratio:4/5){
  body.home .intro{--intro-header:calc(60px + max(14px,env(safe-area-inset-top)))}
}
/* Quote */
body.home .quote{padding:clamp(72px,9vw,96px) 0;background:var(--ink)}
body.home .quote .living-prop{left:1.5%;top:auto;bottom:12%;width:min(9vw,120px)}
body.home .quote-grid{align-items:stretch}
body.home .quote-price{margin-top:8px;padding:clamp(22px,4vw,32px);text-align:center}
body.home .price-from{font-size:clamp(28px,4vw,40px);font-weight:700;margin:0 0 6px;letter-spacing:-.02em}
body.home .price-from .price-num{color:var(--warm)}
body.home .price-note{font-size:14px;color:var(--slate);margin:0 0 18px}
body.home .magnetic-wrap{display:inline-block;width:100%}
/* How sticky stack */
body.home .how{padding:clamp(72px,9vw,96px) 0;background:var(--ink)}
body.home .how .living-prop{right:5%;top:22%;width:min(24vw,140px)}
body.home .how-pin{position:relative}
body.home .how-head{margin-bottom:28px;max-width:28ch}
body.home .how-stack{display:flex;flex-direction:column;gap:0;padding-bottom:12vh}
body.home .how-step{position:sticky;top:calc(72px + env(safe-area-inset-top) + var(--stack,0) * 14px);margin-bottom:18px;padding:22px 24px;border-radius:22px;background:var(--glass);border:1px solid var(--line);box-shadow:var(--depth-2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body.home .how-step h3{font-size:clamp(20px,2.5vw,26px);margin:0 0 6px}
body.home .how-step p{margin:0;color:var(--light);font-size:15px;line-height:1.5;max-width:48ch}
body.home .how-step .step-tag{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--warm);margin-bottom:8px;display:block}
body.home .how-step:nth-child(1){--stack:0;z-index:1}
body.home .how-step:nth-child(2){--stack:1;z-index:2}
body.home .how-step:nth-child(3){--stack:2;z-index:3}
body.home .how-step:nth-child(4){--stack:3;z-index:4}
body.home .how-more{margin-top:20px;font-size:15px}
body.home .how-more a{color:#fff;text-underline-offset:3px}
/* Areas */
body.home .areas{padding:clamp(72px,9vw,96px) 0;background:var(--ink)}
body.home .areas .living-prop{left:1.5%;top:auto;bottom:18%;width:min(9vw,120px)}
body.home .area-chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 28px;padding:0;list-style:none}
body.home .area-chips li{opacity:.45;transform:translateY(4px);transition:opacity .45s var(--ease),transform .45s var(--ease),box-shadow .45s}
body.home .area-chips li.lit{opacity:1;transform:none}
body.home .area-chips a{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;text-decoration:none;border:1px solid var(--line);background:rgba(255,255,255,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
body.home .area-chips li.lit a{border-color:rgba(242,197,138,.45);box-shadow:0 0 20px rgba(242,197,138,.15),inset 0 1px 0 rgba(255,255,255,.2)}
body.home .area-glow-line{height:2px;margin:8px 0 24px;border-radius:2px;background:linear-gradient(90deg,rgba(11,61,145,.2),rgba(242,197,138,.55),rgba(11,61,145,.2));transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease)}
body.home .area-glow-line.is-in{transform:scaleX(1)}
body.home .area-cards .card p{font-size:14px}
/* FAQ accordion */
body.home .faq{padding:clamp(72px,9vw,96px) 0;background:var(--ink)}
body.home .faq .living-prop{right:6%;bottom:14%;width:min(20vw,110px)}
body.home .faq-acc{display:grid;gap:12px;margin-top:20px}
body.home .faq-acc details.card{border-radius:18px;padding:0;overflow:hidden;transition:box-shadow .35s var(--ease),border-color .35s}
body.home .faq-acc details[open]{box-shadow:0 0 28px rgba(242,197,138,.12);border-color:rgba(242,197,138,.35)}
body.home .faq-acc summary{list-style:none;cursor:pointer;padding:18px 20px;font-weight:600;font-size:17px;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
body.home .faq-acc summary::-webkit-details-marker{display:none}
body.home .faq-acc summary::after{content:"+";font-size:22px;font-weight:500;color:var(--warm);flex-shrink:0;transition:transform .3s var(--ease)}
body.home .faq-acc details[open] summary::after{transform:rotate(45deg)}
body.home .faq-acc .faq-a{padding:0 20px 18px;color:var(--light);font-size:15px;line-height:1.55}
body.home .faq-acc .faq-a p{margin:0}
/* Reviews + blog */
body.home .reviews{padding:clamp(72px,9vw,96px) 0}
body.home .home-blog{padding:clamp(72px,9vw,96px) 0}
body.home .home-blog .living-prop{left:1.5%;top:20%;width:min(9vw,100px)}
body.home .post-card{overflow:hidden;padding:0}
body.home .post-card .post-frame{aspect-ratio:16/10;overflow:hidden}
body.home .post-card .post-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) brightness(.85)}
body.home .post-card .post-body{padding:18px 20px 20px}
body.home .post-card h3{font-size:18px;margin:0}
body.home .post-card .kicker{margin-bottom:8px}
body.home .foot-living{position:relative;padding-top:48px;overflow:hidden}
body.home .foot-living .living-backdrop{opacity:.35}
body.home .foot-living .wrap{position:relative;z-index:2}
@media (max-width:820px){
  body.home .living-prop{max-width:100px}
  body.home .living-section:not(.intro) .living-prop{display:none}
  body.home .how-step{top:calc(64px + env(safe-area-inset-top) + var(--stack,0) * 10px);padding:16px 18px}
  body.home .area-chips{gap:6px}
  body.home .area-chips a{font-size:12px;padding:6px 10px}
}
@media (prefers-reduced-motion:reduce){
  body.home .reveal,body.home .reveal-line>span{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  body.home .living-prop img{animation:none!important}
  body.home .tilt-card{transform:none!important}
  body.home .area-chips li{opacity:1!important;transform:none!important}
  body.home .area-glow-line{transform:scaleX(1)!important}
  body.home .living-dust{display:none!important}
}
/* Phone walkthrough layout (Will 2026-10-27 3:25 PM CT): bigger film, card + nav anchored to the bottom of the VISIBLE viewport.
   Stage follows the dynamic viewport (dvh) so no black band appears when Safari's toolbars collapse. The film keeps a stable
   svh based height (its canvas buffer is sized once by app.js) and shifts down by half of any toolbar delta to stay balanced. */
@media (max-width:820px),(max-aspect-ratio:4/5){
  body.home .stage{height:100vh;height:100dvh;--fh:min(calc(62vh - 64px),calc(100vh - 358px))}
  @supports (height:100svh){body.home .stage{--fh:min(calc(62svh - 64px),calc(100svh - 358px));--tb:calc((100dvh - 100svh) * .5)}}
  body.home .stage .poster img,body.home .stage #film{top:calc(64px + var(--tb,0px));height:var(--fh)}
  body.home .stage .shade{top:calc(64px + var(--tb,0px));height:calc(var(--fh) + 2px)}
  body.home .stage .cap-result{top:calc(64px + var(--tb,0px) + var(--fh) + 14px)}
  body.home .stage .cap:not(.cap-hero):not(.cap-result){bottom:calc(76px + env(safe-area-inset-bottom))!important}
}
.rev-links [hidden]{display:none!important}

/* Skip walkthrough (Will, 2026-10-31): a quiet pill, horizontally centered at the top of the stage, clear of the captions and the header CTA.
   The button is the 44px tap target; the visible pill is its ::before. Shown only while the walkthrough is in view (app.js). */
.skip-walk{position:absolute;z-index:6;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 15px;margin:0;
  border:0;background:none;cursor:pointer;font:600 12px/1 "Montserrat",system-ui,sans-serif;letter-spacing:.03em;color:#CBD5E1;border-radius:999px;
  left:50%;right:auto;top:84px;bottom:auto;transform:translateX(-50%);opacity:1;transition:opacity .3s ease,color .2s ease;-webkit-tap-highlight-color:transparent;isolation:isolate}
.skip-walk::before{content:"";position:absolute;inset:7px 0;border-radius:999px;z-index:-1;pointer-events:none;
  background:rgba(26,26,26,.55);border:1px solid rgba(203,213,225,.22);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s ease,border-color .2s ease}
.skip-walk:hover{color:#fff}.skip-walk:hover::before{background:rgba(26,26,26,.72);border-color:rgba(203,213,225,.4)}
.skip-walk:focus{outline:none}
.skip-walk:focus-visible{outline:2px solid #CBD5E1;outline-offset:-3px}
.skip-walk.off{opacity:0;pointer-events:none}
.skip-walk.off:focus-visible{opacity:1;pointer-events:auto}
html[data-theme="light"] .skip-walk{color:#0B3D91}
html[data-theme="light"] .skip-walk::before{background:rgba(255,255,255,.78);border-color:rgba(11,61,145,.35)}
html[data-theme="light"] .skip-walk:hover{color:#0B3D91}html[data-theme="light"] .skip-walk:hover::before{background:#fff;border-color:rgba(11,61,145,.6)}
html[data-theme="light"] .skip-walk:focus-visible{outline-color:#0B3D91}
/* Centered (Will, 2026-10-31): top center on both. Desktop: 9px under the 75px header, clear of the left captions, the right rail
   and the bottom center SCROLL hint (bottom center would sit on that hint during the repair steps). Phones: just under the header,
   over the faded top of the picture; the caption cards sit below the picture and the arrows at the bottom. */
@media (max-width:820px),(max-aspect-ratio:4/5){
  .skip-walk{top:calc(64px + var(--tb,0px) + 10px);padding:0 13px;font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){.skip-walk,.skip-walk::before{transition:none}}
/* The section the skip lands on takes focus for keyboard and screen reader users; no ring on the whole section */
.living-section[tabindex="-1"]:focus{outline:none}

/* One real review: center a single card instead of a 3-up grid or phone carousel */
.rev-track.rev-one{grid-template-columns:minmax(0,600px);justify-content:center}
@media (max-width:820px){.rev-track.rev-one{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:minmax(0,1fr);overflow:visible;margin:0;padding:0}}
.rev-one .rev blockquote p{margin:0}
/* Reviews heading centered to match the centered card and buttons (Will, Oct 31) */
body.home #reviews .kicker,body.home #reviews h2{text-align:center;margin-left:auto;margin-right:auto}