/* 5680 pass 10b: section punch list C8-C16 (hero, menu, upgrades, build, place, calculator, gallery, footer).
   Loaded after site-p10.css and uses its motion tokens (--e-enter, --e-ui, --d-ui, --d-micro, --label, --body).
   Motion is transform/opacity (plus stroke-dashoffset for drawn lines); every block has a reduced-motion final state
   in the last section of this file. */

/* ===== C8 Hero: eyebrow, title, one fact line, the play button; stats move to the strip below ===== */
.hero-shade{background:linear-gradient(to top,rgba(44,47,50,.85) 0%,rgba(44,47,50,0) 55%),linear-gradient(to bottom,rgba(29,32,33,.5),rgba(29,32,33,0) 18%)}
.hero-facts{display:block;font-size:15px;letter-spacing:.02em;color:var(--paper);white-space:nowrap}
.hero-facts>span{display:inline}
.hero-facts>span+span::before{content:none}
.hero-play{gap:10px}
.hero-play .snd-t{display:inline;white-space:nowrap}
.hp-prog{position:absolute;left:16px;right:16px;bottom:-9px;height:2px;border-radius:1px;background:rgba(215,232,188,.2);overflow:hidden;pointer-events:none}
.hp-prog i{position:absolute;inset:0;background:var(--acid);transform-origin:left;transform:scaleX(0)}
html.vid-off .hp-prog{display:none}

/* stat strip right under the hero: one row, hairline separators, the list price is the one acid number */
.hstats{border-bottom:1px solid var(--line)}
.hs-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding-block:22px}
.hs-l>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;min-width:0;padding:2px 14px}
.hs-l>div:first-child{padding-left:0}
.hs-l>div+div{border-left:1px solid var(--line-2)}
.hs-l dt{font:500 10px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--label)}
.hs-l dd{font:clamp(24px,4.4vw,40px)/1 var(--serif);color:var(--paper);font-variant-numeric:tabular-nums;white-space:nowrap}
.hs-k dd{color:var(--acid)}
@media (max-width:380px){.hs-l>div{padding-inline:10px}.hs-l dd{font-size:22px}}
@media (min-width:900px){.hs-l{padding-block:30px}.hs-l>div{padding-inline:clamp(20px,3vw,40px)}}

/* ===== C9 Menu: panel slides on a transform (500ms UI curve), backdrop fades with it, items stagger 50ms ===== */
.mp{transition:visibility 0s linear var(--d-ui)}
.mp::before{content:"";position:absolute;inset:0;background:rgba(29,32,33,.62);opacity:0;transition:opacity var(--d-ui) var(--e-ui)}
.mp.open::before{opacity:1}
html.js .mp-in,html.js .mp.open .mp-in{clip-path:none}
.mp-in{left:auto;width:min(100%,440px);background:rgba(44,47,50,.97)}
html.js .mp-in{transform:translate3d(100%,0,0);transition:transform var(--d-ui) var(--e-ui)}
html.js .mp.open .mp-in{transform:none}
.mp-t{font:34px/1.08 var(--serif)}
html.js .mp .mp-n,html.js .mp .mp-t,html.js .mp .mp-cn,html.js .mp .mp-foot{transform:translateY(16px);transition:opacity 400ms var(--e-enter),transform 500ms var(--e-enter)}
html.js .mp.open .mp-n,html.js .mp.open .mp-t,html.js .mp.open .mp-cn{transform:none;transition-delay:calc(120ms + var(--i,0) * 50ms)}
html.js .mp.open .mp-foot{transform:none;transition-delay:calc(120ms + var(--i,0) * 50ms)}
html.js .mp:not(.open) .mp-n,html.js .mp:not(.open) .mp-t,html.js .mp:not(.open) .mp-cn,html.js .mp:not(.open) .mp-foot{transition-delay:0s;transition-duration:200ms}
.mp-list a[aria-current]::after{width:7px;height:7px}
@media (max-height:640px) and (max-width:899px){.mp-t{font-size:28px}}
@media (min-width:900px){
  .mp::before{content:none}
  html.js .mp-in{transform:translate3d(0,-12px,0);opacity:0;transition:transform var(--d-ui) var(--e-ui),opacity var(--d-ui) var(--e-ui)}
  html.js .mp.open .mp-in{transform:none;opacity:1}
  .mp-in{width:auto}
  .mp-t{font-size:30px}
}

/* ===== C10 Upgrades stepper ===== */
/* card change: 300ms crossfade, caption slides 12px */
.ups-s{transition:opacity 300ms linear,visibility 0s linear 300ms}
.ups-s.on{transition:opacity 300ms linear}
.ups-s.on .ups-cap,.ups-s.on .ups-endt{animation:upsCap 450ms var(--e-enter) 120ms both}
@keyframes upsCap{from{opacity:0;transform:translateY(12px)}}
/* zoom 1 -> 1.6 around the focus centre, transform only; will-change only while it runs */
.ups-z{will-change:auto}
.ups-s.zooming .ups-z{will-change:transform;transition:transform 700ms var(--e-enter)}
/* brackets: 14px legs, 2px acid, the frame scales 1.15 -> 1 and fades in over 350ms once the zoom settles */
.ups-f{box-shadow:none;transform:scale(1.15);transition:opacity 350ms var(--e-enter),transform 350ms var(--e-enter)}
.ups-f::before{content:none}
.ups-f i,.ups-s.drawn .ups-f i{width:14px;height:14px;transform:none;transition:none}
.ups-f .tl{left:0;top:0;border-width:2px 0 0 2px}
.ups-f .tr{right:0;top:0;border-width:2px 2px 0 0}
.ups-f .br{right:0;bottom:0;border-width:0 2px 2px 0}
.ups-f .bl{left:0;bottom:0;border-width:0 0 2px 2px}
.ups-s.drawn .ups-f{opacity:1;transform:none}
/* caption: small-caps acid label, 26px serif heading, two lines at most */
.ups-room{font-variant-caps:all-small-caps;font-size:13px;letter-spacing:.14em;text-transform:none}
.ups-cap{font:26px/1.15 var(--serif);max-width:24ch}
.ups-cap .ups-txt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
/* counter "2 / 17" with the auto-step ring timer; 17 hairline segments along the top edge */
.ups-n{display:inline-flex;align-items:center;gap:8px}
.ups-ring{width:14px;height:14px;transform:rotate(-90deg);display:none}
.ups-auto .ups-ring{display:block}
.ups-ring circle{fill:none;stroke-width:2.4}
.ups-ring0{stroke:rgba(215,232,188,.25)}
.ups-ring1{stroke:var(--acid);stroke-dasharray:1;stroke-dashoffset:1}
.ups-ring.run .ups-ring1{animation:upsRing 5s linear forwards}
@keyframes upsRing{to{stroke-dashoffset:0}}
.ups-bar{display:flex;gap:3px;height:2px;background:none;padding:0 2px}
.ups-bar i{flex:1;height:2px;background:rgba(215,232,188,.22);transform:none;transition:background-color var(--d-micro) linear}
.ups-bar i.on{background:var(--acid)}
.ups-bar i.on:not(.cur){background:rgba(233,240,86,.55)}
/* tap hint: a 3 s chip, once, on first entry */
.ups-hint{position:absolute;left:50%;top:50%;z-index:4;padding:9px 16px;border-radius:999px;background:rgba(29,32,33,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font:500 13px/1.3 var(--sans);color:var(--paper);white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,-50%) translateY(6px);transition:opacity 400ms var(--e-enter),transform 400ms var(--e-enter)}
.ups-hint.on{opacity:1;transform:translate(-50%,-50%)}
html:not(.js) .ups-hint{display:none}
.ups-close{margin-top:4px;padding-top:16px;border-top:1px solid var(--line)}
.ups-cap{max-width:30ch}
@media (max-width:600px){.ups-cap{max-width:none;right:20px}}
.ups-close [data-fact]{display:inline;margin:0;font:inherit;letter-spacing:normal;text-transform:none;color:inherit;vertical-align:baseline}

/* ===== C11 Build: Section A-A draws on view; one callout scheme 1-7; tappable key; plan-to-room slider ===== */
.bp5.run .dr{transition:stroke-dashoffset var(--d,1400ms) var(--e-enter) var(--t,0s)}
.bp5.run .fd{transition:opacity var(--d,700ms) var(--e-enter) var(--t,0s)}
.bp5.run .wp,.bp5.run .wpu{transition:clip-path var(--d,1400ms) var(--e-enter) var(--t,0s)}
.bp5.run .pop{transition:opacity 300ms var(--e-enter) var(--t,0s),transform 450ms cubic-bezier(.3,1.6,.5,1) var(--t,0s)}
/* spray foam: acid outline draws last, then its fill fades in over 400ms */
.bp5:is(.pre,.run) .fo.dr{stroke-width:calc(1px*var(--k,1))}
.bp5.pre .fo{fill-opacity:0}
.bp5.run .fo{transition:stroke-dashoffset 1400ms var(--e-enter) var(--t,0s),fill-opacity 400ms linear calc(var(--t,0s) + 1400ms)}
/* callouts: 18px on screen */
.bp5 .cb{transform-box:fill-box;transform-origin:center;transform:scale(var(--kb,1))}
.bp5 .pop[data-c]{cursor:pointer}
.bp5 .pop .bb{transition:fill var(--d-micro) linear}
.bp5 .pop.hl .bb{fill:var(--acid);stroke:var(--acid)}
.bp5 .pop.hl .tn{fill:var(--ink)}
/* key under the drawing: each row is a button that lights its callout */
.bp5-fig .bp5-key{margin:14px 0 0}
.bp5-key li{display:block;padding:0}
.bp5-key button{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;width:100%;min-height:44px;padding:11px 0;text-align:left;font-size:15px;line-height:1.5;color:var(--body);transition:color var(--d-micro) linear}
.bp5-key button:hover b,.bp5-key button[aria-pressed="true"] b{color:var(--acid)}
.bp5-key .bp5-n{width:18px;height:18px;margin-top:2px;font-size:10px;border-color:var(--text);transition:background-color var(--d-micro) linear,color var(--d-micro) linear}
.bp5-key button[aria-pressed="true"] .bp5-n{background:var(--acid);border-color:var(--acid);color:var(--ink)}
.bp5-also{padding:12px 0 0 30px;border-top:1px solid var(--line-2);font-size:15px;line-height:1.5;color:var(--body)}
.bp5-also b{display:block;font-weight:500;color:var(--paper)}

/* plan-to-room slider: 44px thumb, end labels */
.bp-handle span{width:44px;height:44px}
.bp-handle span::before{font-size:17px}
.bp-end{position:absolute;bottom:12px;z-index:2;padding:4px 9px;border-radius:999px;background:rgba(29,32,33,.78);font:500 10px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--paper);pointer-events:none}
.bp-end-l{left:12px}
.bp-end-r{right:12px}

/* ===== C12 Place: segmented control, crossfading panels, pins, distances ===== */
.seg3{border-block:1px solid var(--line)}
.seg3-in{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:520px}
.seg3-t{display:grid;place-items:center;height:44px;padding:0 8px;font:500 13px/1 var(--sans);letter-spacing:.04em;color:var(--label);text-decoration:none;white-space:nowrap;transition:color var(--d-micro) linear;-webkit-tap-highlight-color:transparent}
.seg3-t[aria-selected="true"]{color:var(--paper)}
.seg3-t:focus-visible{outline-offset:-4px}
.seg3-u{position:absolute;left:0;bottom:-1px;width:100px;height:2px;background:var(--acid);transform-origin:0 50%;transform:scaleX(0)}
.seg3-u.mv{transition:transform 350ms var(--e-ui)}
html:not(.tabs-on) .seg3-u{display:none}
html:not(.tabs-on) .seg3-t{color:var(--paper)}
/* crossfade between panels, 400ms */
.stages{position:relative}
.stages.xf{overflow:clip}
.stage.st-out{position:absolute;inset:0 0 auto;opacity:0;transition:opacity 400ms linear;pointer-events:none}
.stage.st-in{animation:stIn 400ms linear both}
@keyframes stIn{from{opacity:0}}
html.tabs-on .stage{padding-top:clamp(36px,6vw,72px)}
/* pins: scale .6 -> 1 + opacity, 60ms stagger (map.js sets --d) */
.pin .drop{transform-box:view-box;transform-origin:0 0;transition:transform 500ms var(--e-enter) var(--d,0s),opacity 400ms var(--e-enter) var(--d,0s)}
html.js .map:not(.in) .pin .drop{transform:scale(.6);opacity:0}
/* distances: drive miles and minutes as one tabular pair per row */
.dp{display:inline-grid;grid-template-columns:auto 4.5em;gap:0 14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.dp-mi{text-align:right}
.dp-min{text-align:right;color:var(--text)}
.dist-n{display:block;margin-top:2px;font-size:12px;color:var(--label)}
.sheet-min{font-size:16px;font-variant-numeric:tabular-nums}
@media (max-width:600px){.dp{grid-template-columns:5em 4.5em}.dp-mi,.dp-min{text-align:left}}
.dist-t caption{display:block;width:100%}

/* ===== C13 Calculator ===== */
.cf-mode{border-top:0;padding-top:0}
.seg-mode span{min-width:112px;min-height:44px}
.calc-cash .cf-loan,.calc-cash .mt-loan{display:none}
.cf-rg{display:grid;gap:2px;min-width:0}
.cf-mm{display:flex;justify-content:space-between;font-size:12px;color:var(--label);font-variant-numeric:tabular-nums}
.cf-rate{grid-template-columns:minmax(0,1fr) 128px}
.cf-rate label{grid-column:1}
.cf-rate input{grid-column:2;grid-row:1}
.cf-term .seg span{min-width:72px;min-height:44px}
/* the big monthly figure: serif 56px, acid, tabular, rolling digits */
.mt-v{margin-top:8px;font:56px/1 var(--serif);color:var(--acid);font-variant-numeric:tabular-nums;white-space:nowrap}
.rd-w{display:inline-flex;align-items:flex-start;height:1em;overflow:hidden}
.rd{display:inline-block;height:1em;overflow:hidden}
.rd-s{display:flex;flex-direction:column;transition:transform 500ms var(--e-enter)}
.rd-s i{display:block;height:1em;font-style:normal;text-align:center}
.mt-l{font:500 12px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:rgba(215,232,188,.6)}
/* breakdown rows: label left, sage 60%, 12px caps; value right, 16px */
.mt-rows dt,.calc-m dt{font:500 12px/1.35 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:rgba(215,232,188,.6)}
.mt-rows dd{font-size:16px;color:var(--paper);font-variant-numeric:tabular-nums}
.calc-m dd{font-variant-numeric:tabular-nums}
/* one small footnote for the whole section */
#calc .calc-src{max-width:880px;margin-top:40px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;line-height:1.55;color:var(--label)}
.cf-rate label:first-child{grid-column:1;grid-row:1}

/* ===== C15 Gallery: tile labels 11px / .12em, sage 80%, over a bottom gradient; lightbox morph 550ms ===== */
.gt::after{height:50%;background:linear-gradient(to top,rgba(29,32,33,.82),rgba(29,32,33,0))}
.gc{font:500 11px/1.3 var(--sans);letter-spacing:.12em;color:rgba(215,232,188,.8)}
::view-transition-group(lbimg){animation-duration:550ms;animation-timing-function:var(--e-enter)}
html[data-vt="lb"]::view-transition-old(root),html[data-vt="lb"]::view-transition-new(root){animation-duration:550ms;animation-timing-function:var(--e-enter)}

/* ===== C16 Footer: the arc becomes a real ring that draws on view (1600ms) around the final CTA ===== */
.final-ctas{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:min(340px,86vw);aspect-ratio:1;margin-inline:auto}
.final-ctas .btn{min-width:200px}
.fin-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(-90deg);pointer-events:none}
.fin-ring circle{fill:none}   /* no non-scaling stroke: it breaks pathLength dashes in Chrome */
.fin-r0{stroke:var(--line-2);stroke-width:.6}
.fin-r1{stroke:var(--acid);stroke-width:.9;stroke-dasharray:1;stroke-dashoffset:1}
html.js .final-ctas.in .fin-r1{stroke-dashoffset:0;transition:stroke-dashoffset 1600ms var(--e-enter)}
html:not(.js) .fin-r1{stroke-dashoffset:0}
/* footer: name, three links (phone, Inquire, More from Maysoon), legal at 11px >= 4.5:1 */
.sfoot-nav{gap:.25rem 2rem}
.sfoot-nav .sfoot-tel{font-size:inherit;letter-spacing:inherit}
.sfoot-nav a{color:var(--text)}
.sfoot-nav .sfoot-acid{color:var(--acid);opacity:1}
.sfoot-legal,.sfoot-x{font-size:11px;line-height:1.5;color:var(--label);opacity:1}

/* ===== Reduced motion: final states, no transitions on anything this pass touched ===== */
@media (prefers-reduced-motion:reduce){
  .mp,.mp::before,html.js .mp-in,html.js .mp .mp-n,html.js .mp .mp-t,html.js .mp .mp-cn,html.js .mp .mp-foot{transition:none!important}
  .ups-s,.ups-s.on,.ups-f,.ups-s.zooming .ups-z,.ups-hint,.ups-bar i{transition:none!important}
  .ups-s.on .ups-cap,.ups-s.on .ups-endt,.ups-ring.run .ups-ring1{animation:none!important}
  .bp5 .pop .bb,.bp5-key button,.bp5-key .bp5-n{transition:none!important}
  .seg3-u,.seg3-u.mv,.seg3-t,.stage.st-out{transition:none!important}
  .stage.st-in{animation:none!important}
  .pin .drop{transition:none!important}
  html.js .map:not(.in) .pin .drop{transform:none;opacity:1}
  .rd-s{transition:none!important}
  html.js .fin-r1,html.js .final-ctas.in .fin-r1{stroke-dashoffset:0;transition:none!important}
}