/* Duluth Detail — its own look over the shared stylesheet (v1.7, 2026-10-30): a header that sits clear over the home
   photo, the photo drifting with a light passing across it like a reflection on paint, sections that rise into view,
   numbers that count up, a moving band of services, cards that catch the pointer.
   All of it is decoration. With no script every page reads fully drawn (anything hidden waits on the `js` class the
   head sets); with reduced motion asked for nothing moves. theme.js does the rest. */

:root{--ease:cubic-bezier(.2,.75,.2,1);--glow:184,36,43}

/* ---------- buttons: white on red, a light that sweeps across on hover ---------- */
.btn{color:#fff;position:relative;overflow:hidden;isolation:isolate;transition:background .2s,transform .2s var(--ease),box-shadow .25s,border-color .2s}
.btn::after{content:"";position:absolute;inset:-2px;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(-130%);transition:transform .8s var(--ease);pointer-events:none}
.btn:hover::after{transform:translateX(130%)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(var(--glow),.38)}
.btn.ghost,.btn.ghost-dark{isolation:auto}
.btn.ghost::after,.btn.ghost-dark::after{display:none}
.btn.ghost:hover,.btn.ghost-dark:hover{box-shadow:none}
.btn.ghost{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);background:rgba(255,255,255,.06)}

/* ---------- header: clear over the home photo, solid once the page moves or the menu opens (theme.js sets .solid).
   Keyed on :has() so the first paint is already right; a browser without it keeps the plain white header. ---------- */
.top{transition:background .35s,border-color .35s,box-shadow .35s}
.top.solid{box-shadow:0 8px 30px rgba(20,20,22,.08)}
.js body:has(>main>.hero) .top{margin-bottom:-76px}
.js body:has(>main>.hero) .top:not(.solid){background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.js body:has(>main>.hero) .top:not(.solid) .brand img{filter:brightness(0) invert(1)}
.js body:has(>main>.hero) .top:not(.solid) :is(.top-phone,.burger){color:#fff}
.js body:has(>main>.hero) .top:not(.solid) :is(.top-phone,.burger):hover{background:rgba(255,255,255,.12)}
.brand img{transition:filter .35s}
@media (max-width:960px){.js body:has(>main>.hero) .top{margin-bottom:-66px}}
@media (min-width:961px){
  .js body:has(>main>.hero) .top:not(.solid) :is(.nav>a,.menu-btn,.phone-link){color:rgba(255,255,255,.92)}
  .js body:has(>main>.hero) .top:not(.solid) :is(.nav>a,.menu-btn):hover{color:#fff}
  .js body:has(>main>.hero) .top:not(.solid) :is(.nav>a,.menu-btn)::after{background:#fff}
  .nav>a,.menu-btn{position:relative;border-bottom:0}
  .nav>a::after,.menu-btn::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
  .nav>a:hover::after,.menu-btn:hover::after,.nav>a[aria-current="page"]::after{transform:scaleX(1)}
}
.dropdown{transform-origin:top left}
.menu-btn[aria-expanded="true"]+.dropdown{animation:drop .22s var(--ease)}
@keyframes drop{from{opacity:0;transform:translateY(-6px) scale(.98)}}
@media (max-width:960px){.nav.open{animation:sheet .3s var(--ease)}}
@keyframes sheet{from{opacity:0;transform:translateY(-10px)}}

/* ---------- home hero ---------- */
.hero{min-height:min(100svh,900px);overflow:hidden}
.hero-pic::after{content:"";position:absolute;left:0;right:0;top:0;height:160px;background:linear-gradient(180deg,rgba(var(--tint),.55),transparent)}
.js .hero-pic img{animation:drift 24s var(--ease) both}
@keyframes drift{from{transform:scale(1.16) translate3d(-1.5%,1%,0)}to{transform:scale(1.03)}}
/* a reflection crossing the paint */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.07) 47%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.07) 53%,transparent 58%);background-size:320% 100%;background-position:130% 0;animation:sheen 10s 1.4s ease-in-out infinite}
@keyframes sheen{0%{background-position:130% 0}45%,100%{background-position:-30% 0}}
.js .hero-in>*{animation:rise .95s var(--ease) backwards}
.js .hero-in>:nth-child(1){animation-delay:.15s}
.js .hero-in>:nth-child(2){animation-delay:.28s}
.js .hero-in>:nth-child(3){animation-delay:.42s}
.js .hero-in>:nth-child(4){animation-delay:.56s}
.js .hero-in>:nth-child(5){animation-delay:.7s}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}
.hero .eyebrow.light{color:#fff;opacity:.9;display:inline-flex;align-items:center;gap:10px}
.hero .eyebrow.light::before{content:"";width:28px;height:2px;background:var(--sky);border-radius:2px;flex:none}
.hero h1{max-width:13ch;font-size:clamp(44px,7.6vw,92px);line-height:1.02;letter-spacing:-.02em}
.hero h1 em{font-style:normal;display:inline-block;background:linear-gradient(100deg,#fff 0%,#fff 38%,#ffb3b6 48%,#fff 58%,#fff 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 18px rgba(0,0,0,.35));animation:glint 7s 1.6s ease-in-out infinite}
@keyframes glint{0%{background-position:100% 0}35%,100%{background-position:0 0}}
.hero-proof li{padding:8px 15px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero-proof svg{color:var(--sky)}
.scroll-cue{position:absolute;z-index:2;right:var(--pad);bottom:clamp(36px,6vw,64px);display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(255,255,255,.7);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;writing-mode:vertical-rl}
.scroll-cue i{width:2px;height:56px;background:rgba(255,255,255,.2);position:relative;overflow:hidden;border-radius:2px}
.scroll-cue i::after{content:"";position:absolute;left:0;right:0;top:0;height:40%;background:#fff;animation:fall 2s ease-in-out infinite}
@keyframes fall{from{transform:translateY(-100%)}to{transform:translateY(260%)}}
@media (max-width:1100px){.scroll-cue{display:none}}

/* ---------- stats ---------- */
.stats{background:radial-gradient(900px 260px at 15% 0%,rgba(var(--glow),.35),transparent 65%),radial-gradient(700px 240px at 100% 100%,rgba(var(--glow),.18),transparent 60%),var(--navy);border-top:0}
.stats-in{padding-top:clamp(28px,4vw,44px);padding-bottom:clamp(28px,4vw,44px);gap:clamp(12px,2vw,20px)}
.stat{border-left:0;padding:20px 20px 18px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);position:relative;overflow:hidden;transition:transform .35s var(--ease),border-color .3s,background .3s}
.stat::before{content:"";position:absolute;left:20px;top:0;width:44px;height:3px;border-radius:0 0 3px 3px;background:var(--brand)}
.js .stat:not(.in)::before{transform:scaleX(0)}
.stat::before{transform-origin:left;transition:transform .8s var(--ease) calc(var(--d,0ms) + .25s)}
.stat:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06)}
.stat .n{font-size:clamp(38px,4.6vw,58px);font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff 30%,#ffc9cc);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:4px}
@media (max-width:800px){.stat{padding:16px 14px 14px}.stat::before{left:14px}}

/* ---------- the moving band of services ---------- */
.marquee{overflow:hidden;background:var(--navy);padding:clamp(14px,2vw,22px) 0;border-top:1px solid rgba(255,255,255,.06);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content}
.js .marquee-track{animation:marq 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{display:inline-flex;align-items:center;white-space:nowrap;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(30px,4.4vw,58px);line-height:1.1;color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.5)}
.marquee span:nth-child(odd){color:#fff;-webkit-text-stroke:0}
.marquee span::after{content:"";width:.26em;height:.26em;border-radius:50%;background:var(--brand);margin:0 .7em;box-shadow:0 0 18px rgba(var(--glow),.9)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- sections rise into view ---------- */
.js [data-reveal]{opacity:0}
.js [data-reveal].in{opacity:1;animation:reveal .85s var(--ease) var(--d,0ms) backwards}
@keyframes reveal{from{opacity:0;transform:translateY(30px)}}
.js [data-reveal].pic.in img{animation:unveil 1.2s var(--ease) var(--d,0ms) backwards}
@keyframes unveil{from{clip-path:inset(14% 10% 14% 10% round 28px);transform:scale(1.14)}to{clip-path:inset(0 0 0 0 round 0)}}
.pic-stack,.band-pic{position:relative}
.pic-stack .fig{margin:0;will-change:transform;transform:translate3d(0,var(--py,0px),0)}
.pic-stack img,.band-pic img{border-radius:20px}
.pic-stack figcaption,.pic-stack .fig figcaption{font-size:14px;color:var(--muted);margin-top:10px}
.pic-stack .fig{position:relative;isolation:isolate}
/* the plate sits behind the photo, not its caption (34px under it) */
.pic-stack .fig::before{content:"";position:absolute;inset:18px -14px 20px 18px;border-radius:22px;background:linear-gradient(135deg,var(--brand),var(--brand-deep));z-index:-1;opacity:.92}
.band-pic::before{content:"";position:absolute;inset:18px -14px -14px 18px;border-radius:22px;background:linear-gradient(135deg,var(--brand),var(--brand-deep));z-index:-1;opacity:.92}
.split>.pic-stack,.band-pic{isolation:isolate}
@media (max-width:860px){.band-pic::before{inset:12px -8px -8px 12px}.pic-stack .fig::before{inset:12px -8px 26px 12px}}
.sec{position:relative}
.sec.alt{background:linear-gradient(180deg,#F8F5F5,#F3EEEE)}
.sec-head h2{letter-spacing:-.02em}
.sec-head .eyebrow,.band .eyebrow,.split .eyebrow{display:inline-flex;align-items:center;gap:10px}
.sec-head .eyebrow::before,.band .eyebrow::before,.split .eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px;flex:none}

/* a light that follows the pointer across cards */
.glow{position:relative;isolation:isolate}
.glow::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,-30%),rgba(var(--glow),.11),transparent 45%)}
.glow:hover::before{opacity:1}

/* service cards */
.card{overflow:hidden;border-radius:18px;transition:transform .35s var(--ease),box-shadow .35s,border-color .3s}
.card:hover{transform:translateY(-6px);border-color:rgba(var(--glow),.4)}
.card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--sky));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.card:hover::after{transform:scaleX(1)}
.card-ic{border-radius:14px;background:rgba(var(--glow),.08);transition:transform .5s var(--ease),background .3s,color .3s}
.card:hover .card-ic{background:var(--brand);color:#fff;transform:rotate(-8deg) scale(1.06)}
.card .more svg{transition:transform .25s var(--ease)}
.card:hover .more svg{transform:translateX(5px)}

/* reviews */
.review{position:relative;border-radius:18px;transition:transform .35s var(--ease),box-shadow .35s}
.review:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.review::after{content:"\201C";position:absolute;right:18px;top:4px;font-family:Georgia,"Times New Roman",serif;font-size:92px;line-height:1;color:rgba(var(--glow),.12);pointer-events:none}
.review .stars{color:#F5A623}
.js .review.in .stars svg{animation:pop .5s var(--ease) backwards}
.js .review.in .stars svg:nth-child(1){animation-delay:calc(var(--d,0ms) + .3s)}
.js .review.in .stars svg:nth-child(2){animation-delay:calc(var(--d,0ms) + .38s)}
.js .review.in .stars svg:nth-child(3){animation-delay:calc(var(--d,0ms) + .46s)}
.js .review.in .stars svg:nth-child(4){animation-delay:calc(var(--d,0ms) + .54s)}
.js .review.in .stars svg:nth-child(5){animation-delay:calc(var(--d,0ms) + .62s)}
@keyframes pop{from{opacity:0;transform:scale(.3) rotate(-30deg)}60%{transform:scale(1.25)}}

/* ceramic packages: the middle one carries a turning edge */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
.plan{border-radius:18px;transition:transform .35s var(--ease),box-shadow .35s}
.plan:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.plan.hot{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--a),var(--brand),#ff9aa0,var(--brand-deep),#ff9aa0,var(--brand)) border-box;animation:turn 6s linear infinite;box-shadow:0 22px 50px rgba(var(--glow),.16)}
@keyframes turn{to{--a:360deg}}
.plan .from{font-size:40px}

/* steps: red numbers joined by a line that draws down */
.steps li::before{background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:#fff;box-shadow:0 8px 18px rgba(var(--glow),.35)}
.steps li:not(:last-child)::after{content:"";position:absolute;left:18px;top:44px;bottom:-12px;width:2px;border-radius:2px;background:linear-gradient(var(--brand),rgba(var(--glow),.08));transform-origin:top;transition:transform .9s var(--ease) calc(var(--d,0ms) + .35s)}
.js .steps li:not(.in)::after{transform:scaleY(0)}

/* why */
.why-item{padding:22px;border-radius:18px;border:1px solid transparent;transition:background .3s,border-color .3s,transform .35s var(--ease),box-shadow .35s}
.why-item:hover{background:#fff;border-color:var(--line);transform:translateY(-4px);box-shadow:var(--shadow)}
.why-item svg{width:54px;height:54px;padding:14px;border-radius:15px;background:rgba(var(--glow),.09);color:var(--brand);transition:background .3s,color .3s,transform .5s var(--ease)}
.why-item:hover svg{background:var(--brand);color:#fff;transform:rotate(-8deg)}
.why-grid{gap:8px 12px}

/* tiles, chips */
.tile{border-radius:16px;transition:border-color .3s,transform .35s var(--ease),box-shadow .35s}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(var(--glow),.4)}
.tile-ic{transition:background .3s,color .3s,transform .5s var(--ease)}
.tile:hover .tile-ic{background:var(--brand);color:#fff;transform:rotate(-8deg)}
.chip{transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease)}
.chip:hover{background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-2px)}

/* map: the towns drop in */
.map-wrap{border-radius:20px}
.js .map-wrap.in .map-pins circle{animation:pin .55s var(--ease) backwards}
.js .map-wrap.in .map-pins circle:nth-of-type(2n){animation-delay:.15s}
.js .map-wrap.in .map-pins circle:nth-of-type(3n){animation-delay:.3s}
@keyframes pin{from{opacity:0;transform:translateY(-14px)}}
.map-pins circle{transform-box:fill-box;transform-origin:center}

/* FAQ */
details.faq{border-radius:14px;transition:border-color .25s,box-shadow .25s}
details.faq:hover{border-color:var(--line-strong)}
details.faq[open]{border-color:rgba(var(--glow),.35);box-shadow:var(--shadow)}
details.faq summary::after{transition:transform .3s var(--ease)}
details.faq[open] summary::after{content:"+";transform:rotate(45deg)}
details.faq[open]>div{animation:drop .35s var(--ease)}

/* inner pages: a warm wash behind the title band, the copy and photo arriving on load */
.band{background:radial-gradient(800px 400px at 88% 0%,rgba(var(--glow),.09),transparent 62%),linear-gradient(180deg,#FBF8F8,#fff)}
.js .band-copy>*{animation:rise .8s var(--ease) backwards}
.js .band-copy>:nth-child(2){animation-delay:.1s}
.js .band-copy>:nth-child(3){animation-delay:.2s}
.js .band-copy>:nth-child(4){animation-delay:.3s}
.js .band-pic img{animation:unveil 1.2s .15s var(--ease) backwards}
.post-card{border-radius:18px;transition:transform .35s var(--ease),box-shadow .35s}
.post-card img{transition:transform .8s var(--ease)}
.post-card:hover img{transform:scale(1.06)}
.post-card:hover{transform:translateY(-5px)}
.read-bar{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;background:linear-gradient(90deg,var(--brand),var(--sky));transform:scaleX(0);transform-origin:left}
.quote{border-radius:20px}
.quote input:focus,.quote select:focus,.quote textarea:focus{box-shadow:0 0 0 4px rgba(var(--glow),.15)}

/* ---------- the closing band ---------- */
.cta-band{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(120deg,var(--brand-deep),var(--brand) 45%,#cf3a42 60%,var(--brand-deep));background-size:260% 260%;animation:flow 16s ease-in-out infinite}
@keyframes flow{50%{background-position:100% 50%}}
.cta-band::before,.cta-band::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(10px)}
.cta-band::before{width:520px;height:520px;right:-140px;top:-260px;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 65%);animation:orb 14s ease-in-out infinite alternate}
.cta-band::after{width:420px;height:420px;left:-120px;bottom:-240px;background:radial-gradient(circle,rgba(0,0,0,.22),transparent 65%);animation:orb 18s ease-in-out infinite alternate-reverse}
@keyframes orb{to{transform:translate(-80px,60px) scale(1.15)}}
.cta-band h2{font-size:clamp(30px,4.2vw,48px)}
.cta-band p a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.cta-band .btn:not(.ghost):not(.ghost-dark){background:#fff;border-color:#fff;color:var(--brand-deep)}
.cta-band .btn:not(.ghost):not(.ghost-dark):hover{background:#fff;box-shadow:0 14px 34px rgba(0,0,0,.25)}
.cta-band .btn:not(.ghost):not(.ghost-dark)::after{background:linear-gradient(110deg,transparent 30%,rgba(var(--glow),.16) 50%,transparent 70%)}

/* footer: a thin red line on top */
.foot{position:relative}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--brand),transparent)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important}
  .js [data-reveal]{opacity:1}
  .js .stat:not(.in)::before,.js .steps li:not(.in)::after{transform:none}
}
@media print{.js [data-reveal]{opacity:1}.marquee{display:none}}

/* the second header button (My account) and the eyebrow over the photo */
.js body:has(>main>.hero) .top:not(.solid) .btn.ghost-dark{color:#fff;border-color:rgba(255,255,255,.55)}
.js body:has(>main>.hero) .top:not(.solid) .btn.ghost-dark:hover{background:rgba(255,255,255,.1);border-color:#fff}
@media (max-width:700px){.hero .eyebrow.light::before{display:none}.hero .eyebrow.light{font-size:13px}}
.cta-band .btn.ghost-dark{color:#fff;border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06)}
.cta-band .btn.ghost-dark:hover{background:rgba(255,255,255,.14);border-color:#fff}

/* ===================== v1.8 (2026-10-31): a second pass, still decoration only ===================== */

/* headings are wiped on by a red squeegee blade as they arrive */
.sec-head h2{width:fit-content;margin-left:auto;margin-right:auto;position:relative}
.sec-head.left h2{margin-left:0}
.js .sec-head[data-reveal]:not(.in) h2{clip-path:inset(0 100% 0 0)}
.js .sec-head.in h2{animation:wipe 1.15s var(--ease) .12s both}
.js .sec-head.in h2::after{content:"";position:absolute;top:0;bottom:0;left:-4px;width:4px;border-radius:4px;background:var(--brand);box-shadow:0 0 16px rgba(var(--glow),.9);animation:blade 1.15s var(--ease) .12s both;pointer-events:none}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -6px 0 -6px)}}
@keyframes blade{from{left:-4px;opacity:1}85%{opacity:1}to{left:calc(100% - 4px);opacity:0}}

/* the polisher's light on the home photo (theme.js moves --sx/--sy) */
.hero-shine{z-index:0;pointer-events:none;-webkit-mask-image:radial-gradient(circle clamp(140px,22vw,300px) at var(--sx,72%) var(--sy,30%),#000 0,rgba(0,0,0,.75) 35%,transparent 72%);mask-image:radial-gradient(circle clamp(140px,22vw,300px) at var(--sx,72%) var(--sy,30%),#000 0,rgba(0,0,0,.75) 35%,transparent 72%)}
.hero-shine img{filter:contrast(1.2) saturate(1.5) brightness(1.5)}
.hero-shine::after{content:"";position:absolute;inset:0;background:radial-gradient(circle clamp(60px,9vw,120px) at var(--sx,72%) var(--sy,30%),rgba(255,255,255,.3),transparent 70%);mix-blend-mode:screen}

/* the reviews drift past in two rows on the home page */
.reviews.drift{display:flex;flex-direction:column;gap:18px;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:6px 0 10px}
.rv-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);padding:8px 0}
.rv-track{display:flex;gap:18px;width:max-content;animation:marq 70s linear infinite}
.rv-row.rev .rv-track{animation-direction:reverse}
.rv-row:is(:hover,:focus-within) .rv-track{animation-play-state:paused}
.reviews.drift .review{width:min(380px,80vw);flex:none;margin:0}
.reviews.drift .review:hover{transform:translateY(-4px) rotate(-.4deg)}

/* ceramic on the home page: a dark garage, water beading on the paint behind the packages */
.sec.garage{background:radial-gradient(900px 420px at 12% 0%,rgba(var(--glow),.28),transparent 62%),radial-gradient(800px 380px at 100% 100%,rgba(var(--glow),.16),transparent 60%),linear-gradient(180deg,#141416,#1c1c20);color:rgba(255,255,255,.82);overflow:hidden;isolation:isolate}
.sec.garage .beads{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.sec.garage::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(112deg,transparent 40%,rgba(255,255,255,.05) 50%,transparent 60%);background-size:300% 100%;animation:sheen 12s 2s ease-in-out infinite}
.sec.garage h2{color:#fff}
.sec.garage .eyebrow{color:#ff8f95}
.sec.garage .lede,.sec.garage .center{color:rgba(255,255,255,.78)}
.sec.garage .center a{color:#ff9aa0}
.sec.garage .plan{color:var(--ink-soft,#3a3a40);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.sec.garage .plan.hot{box-shadow:0 0 0 1px rgba(var(--glow),.3),0 26px 70px rgba(var(--glow),.35)}

/* suds rising through the closing band */
.suds{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.suds i{position:absolute;left:var(--x);bottom:calc(var(--s) * -1.2);width:var(--s);height:var(--s);border-radius:50%;border:1px solid rgba(255,255,255,.4);background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.7) 0,rgba(255,255,255,.15) 18%,transparent 40%),radial-gradient(circle at 70% 75%,rgba(160,220,255,.22),transparent 45%),radial-gradient(circle,transparent 58%,rgba(255,190,255,.18) 72%,rgba(255,255,255,.28) 100%);animation:bubble var(--t) var(--d) linear infinite}
@keyframes bubble{0%{transform:translate(0,0) scale(.7);opacity:0}10%{opacity:1}50%{transform:translate(calc(var(--w) * -.5),-220px) scale(1)}85%{opacity:.9}100%{transform:translate(var(--w),-480px) scale(1.08);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .js .sec-head[data-reveal]:not(.in) h2{clip-path:none}
  .js .sec-head.in h2::after{display:none}
}
@media print{.js .sec-head h2{clip-path:none!important}.sec-head h2::after,.suds,.beads,.hero-shine{display:none!important}}