/* Reference motion timing and interactions, adapted to Lube Cube colors. */
/* The existing fonts remain the source of both HTML and SVG text. */
.motion-word,.motion-letter{font:inherit;color:inherit;letter-spacing:inherit}
.motion-word{display:inline-block;white-space:nowrap;clip-path:inset(-.18em -.08em -.22em -.08em)}
.motion-letter{display:inline-block}
.count-value{display:inline-block;font-variant-numeric:tabular-nums}

/* Both logos draw once and retain the same artwork after the entrance. */
.logo-entrance .logo-draw-path{fill-opacity:1;stroke:var(--logo-stroke);stroke-width:var(--logo-line-width,2px);stroke-opacity:0;stroke-dasharray:1;stroke-dashoffset:0;animation:studio-logo-draw 1.5s ease var(--logo-delay,0s) both}
.logo-entrance .logo-wordmark{opacity:1;animation:studio-logo-word .55s ease .95s both}
@keyframes studio-logo-draw{0%{stroke-dashoffset:var(--logo-path-distance,1);stroke-opacity:1;fill-opacity:0}45%{stroke-dashoffset:0;stroke-opacity:1;fill-opacity:0}72%{fill-opacity:1;stroke-opacity:1}100%{stroke-dashoffset:0;stroke-opacity:0;fill-opacity:1}}
@keyframes studio-logo-word{from{opacity:0}to{opacity:1}}

.eyebrow i{position:relative;animation:studio-dot-breathe 3.2s ease-in-out infinite}
.eyebrow i::after{content:"";position:absolute;inset:-4px;border:1px solid currentColor;border-radius:50%;opacity:0;pointer-events:none;animation:studio-dot-halo 3.2s cubic-bezier(.25,.46,.45,.94) infinite}
@keyframes studio-dot-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes studio-dot-halo{0%{transform:scale(.7);opacity:.45}72%,100%{transform:scale(1.9);opacity:0}}

.btn{position:relative;transition:transform .4s var(--motion-ease),box-shadow .4s var(--motion-ease),background-color .4s,border-color .4s}
.hero-copy .btn-dark,.page-hero .btn-dark{animation:studio-button-pulse 3s ease-out infinite}
@keyframes studio-button-pulse{0%,100%{box-shadow:inset 0 1px 0 #ffffff66,0 8px 24px #80610033,0 0 0 0 #f2c51d3d}60%{box-shadow:inset 0 1px 0 #ffffff66,0 8px 24px #80610033,0 0 0 12px #f2c51d00}}
.btn-outline{background:#ffffff80;border-color:#ffffffcc;box-shadow:0 4px 16px #211d100d;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
:is(.mini-offer,.essentials-panel,.full-service-card,.quote-card,.location-card,.pricing-card){position:relative;isolation:isolate;transition:transform .4s var(--motion-ease),box-shadow .4s var(--motion-ease),border-color .4s}
:is(.mini-offer,.essentials-panel,.full-service-card,.quote-card,.location-card,.pricing-card)::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;background:radial-gradient(300px circle at var(--spotlight-x,50%) var(--spotlight-y,0%),var(--spotlight-color,#f2c51d1c),transparent 80%);opacity:0;pointer-events:none;transition:opacity .4s}
[data-header-tone="dark"] :is(.full-service-card,.location-card,.quote-card){--spotlight-color:#f2c51d1c}
:is(.mini-offer,.essentials-panel,.full-service-card,.quote-card,.location-card,.pricing-card):focus-within::before{opacity:1}
.why-card-icon>.studio-icon,.text-link>.studio-icon,.btn>.studio-icon{transition:translate .4s var(--motion-ease)}

@media(hover:hover) and (pointer:fine){
 .floating-header:hover{--glass-glint-alpha:.10}
 .floating-header .site-nav>a:not(.btn):hover{color:var(--header-link-accent)}
 .floating-header .site-nav>a:not(.btn):hover::before{opacity:1}
 .floating-header .nav-call:hover,.floating-header .nav-call:focus-visible{border-color:rgba(255,255,255,.52);background:rgba(255,255,255,.22);box-shadow:0 3px 10px rgba(58,32,43,.12),inset 0 1px 0 rgba(255,255,255,.38)}
 .hero-copy .btn-dark:hover,.page-hero .btn-dark:hover{animation:none;box-shadow:inset 0 1px 0 #ffffff99,0 12px 32px #80610040}
 .btn-outline:hover{border-color:#fff;box-shadow:0 8px 24px #80610014}
 .mini-offer:hover,.essentials-panel:hover{transform:translateY(-6px);border-color:#c4b56c;box-shadow:0 24px 48px #80610014,inset 0 1px 0 #fff}
 .full-service-card:hover,.location-card:hover,.pricing-card:hover{transform:translateY(-4px);border-color:#bca45b66;box-shadow:0 24px 48px #211d101f}
 .quote-card:hover{border-color:#c4b56c;box-shadow:inset 0 0 0 1px #e8e2c5}
 [data-header-tone="dark"] :is(.full-service-card,.location-card,.quote-card):hover{border-color:#bca45b66;box-shadow:0 24px 48px #00000026}
 :is(.mini-offer,.essentials-panel,.full-service-card,.quote-card,.location-card,.pricing-card):hover::before{opacity:1}
 .why-card:hover .why-card-icon>.studio-icon{translate:0 -3px}
 .text-link:hover>.studio-icon,.btn:hover>.studio-icon{translate:3px 0;transform:none}
 .text-link{position:relative}
 .text-link::after{content:"";position:absolute;left:0;right:30px;bottom:4px;height:1px;background:currentColor;opacity:.5;transform:scaleX(0);transform-origin:left;pointer-events:none;transition:transform .4s var(--motion-ease)}
 .text-link:hover::after,.text-link:focus-visible::after{transform:scaleX(1)}
 .studio-hero::before,.page-hero::before{content:"";position:absolute;z-index:-1;inset:-20%;background:radial-gradient(ellipse at 20% 35%,#f2c51d12,transparent 42%),radial-gradient(ellipse at 75% 45%,#d7b13412,transparent 48%);filter:blur(32px);pointer-events:none;animation:studio-ambient 12s ease-in-out infinite alternate}
 .studio-photo-stage{animation:studio-photo-drift 12s ease-in-out infinite alternate}
}
@keyframes studio-ambient{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(0,-24px,0) scale(1.05)}}
@keyframes studio-photo-drift{from{translate:0 0}to{translate:0 -10px}}
.motion-paused .eyebrow i,.motion-paused .eyebrow i::after,.motion-paused .studio-hero::before,.motion-paused .page-hero::before,.motion-paused .studio-photo-stage,.motion-paused .hero-copy .btn-dark,.motion-paused .page-hero .btn-dark{animation-play-state:paused}

@media(prefers-reduced-motion:reduce){
 .logo-entrance .logo-draw-path,.logo-entrance .logo-wordmark{animation:none}
 .eyebrow i,.eyebrow i::after,.studio-hero::before,.page-hero::before,.studio-photo-stage,.hero-copy .btn-dark,.page-hero .btn-dark{animation:none!important}
 .eyebrow i::after{opacity:0}
 .motion-word{clip-path:none}
 .btn,.mini-offer,.essentials-panel,.full-service-card,.quote-card,.location-card,.pricing-card,.why-card-icon>.studio-icon,.text-link>.studio-icon,.btn>.studio-icon{transition:none}
 .text-link::after,:is(.mini-offer,.essentials-panel,.full-service-card,.quote-card,.location-card,.pricing-card)::before{display:none}
 .btn:hover,.mini-offer:hover,.essentials-panel:hover,.full-service-card:hover,.location-card:hover,.pricing-card:hover{transform:none}
 .why-card:hover .why-card-icon>.studio-icon,.text-link:hover>.studio-icon,.btn:hover>.studio-icon{translate:none;transform:none}
}
@media print{
 .logo-entrance .logo-draw-path,.logo-entrance .logo-wordmark,.eyebrow i,.eyebrow i::after,.studio-hero::before,.page-hero::before,.studio-photo-stage,.hero-copy .btn-dark,.page-hero .btn-dark{animation:none!important}
 .text-link::after,:is(.mini-offer,.essentials-panel,.full-service-card,.quote-card,.location-card,.pricing-card)::before{display:none}
 .motion-word{display:inline;clip-path:none}.motion-letter{display:inline;transform:none!important}
 .studio-proof .count-value{display:none}
 .studio-proof strong>.sr-only{position:static;width:auto;height:auto;margin:0;padding:0;overflow:visible;clip:auto;white-space:normal;font:inherit;color:inherit}
}

/* The raster mark is retained; the wordmark outline uses the original fonts. */
.brand[data-logo-entrance]{position:relative}
.brand .outlined-brand-logo .logo-draw-path{fill:currentColor;--logo-stroke:currentColor;--logo-line-width:.65px;--logo-path-distance:1;stroke-dasharray:1}
.footer .brand{width:max-content;max-width:100%}

/* Letter wrappers inherit Shell Heavy or Roboto at the original text size. */
.studio-hero .hero-copy h1>.hero-line{display:block;line-height:inherit;letter-spacing:inherit}
.studio-hero .hero-copy h1>.hero-line-one{color:var(--ink)}
.studio-hero .hero-copy h1>.hero-line-two{color:var(--gold-dark)}
.studio-hero .hero-copy h1 :is(.motion-word,.motion-letter){display:inline-block;font:inherit;color:inherit;line-height:inherit;letter-spacing:inherit}
.studio-hero,.page-hero{position:relative;isolation:isolate}
.studio-hero .studio-photo-stage{transform:none}
.studio-hero .btn-outline{border-color:#d6d8ce;background:#ffffff99}
.cube-kicker{position:relative}
.cube-kicker::before{animation:studio-dot-breathe 3.2s ease-in-out infinite}
.cube-kicker::after{content:"";position:absolute;left:4px;top:calc(50% - 4px);width:8px;height:8px;border:1px solid currentColor;border-radius:50%;opacity:0;pointer-events:none;animation:studio-dot-halo 3.2s cubic-bezier(.25,.46,.45,.94) infinite}
.motion-paused .cube-kicker::before,.motion-paused .cube-kicker::after{animation-play-state:paused}
.studio-visit-details>.visit-steps{margin:24px 0 27px}
.studio-visit-details>.visit-steps li{padding-block:17px;border-color:#ffffff26}
.studio-visit-details>.visit-steps li::before{top:19px;background:transparent;border-color:#ffffff40;color:#fff}
.studio-visit-details>.visit-steps strong{font-size:13px;color:#fff}
.studio-visit-details>.visit-steps span,.studio-visit-details>p:not(.visit-address){font-size:13px;line-height:1.85;color:#bec3bf}

/* Coupons and complete weekly hours now directly follow the hero. */
.studio-essentials{background:#fff;color:var(--ink);padding:0 0 43px}
.essentials-row{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.essentials-panel{min-width:0;padding:28px 0 25px;border-radius:0}
.essentials-panel h2{font-size:24px;line-height:1.23;letter-spacing:-.025em;margin:12px 0 22px;max-width:none}
.essentials-panel .eyebrow{font-size:11px}
.essentials-panel .text-link{font-size:12px;gap:16px;min-height:38px;padding:7px 0}
.essentials-offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.essentials-coupons .mini-offer{display:flex;align-items:flex-start;gap:12px;flex-direction:column;min-height:96px;padding:0;border:0;max-width:100%}
.essentials-coupons .mini-offer+ .mini-offer{border-left:1px solid var(--line);padding-left:26px}
.essentials-coupons .mini-offer>strong{font-size:39px;line-height:1.12;letter-spacing:-.04em;color:var(--ink);flex:0 0 auto;white-space:nowrap}
.essentials-coupons .mini-offer>strong small{display:inline-block;vertical-align:middle;margin-left:3px;font-size:10px;color:var(--gold-dark);letter-spacing:0}
.essentials-coupons .mini-offer>span{font-size:13px;line-height:1.5;font-weight:600;max-width:210px}
.essentials-coupons .offer-note{margin:13px 0 6px;font-size:11px;line-height:1.75;color:var(--muted)}
.essentials-visit-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:29px;align-items:start}
.essentials-hours .hours-list{margin:0;font-size:12px;line-height:1.5;min-width:0}
.essentials-hours .hours-list>div{padding:9px 0;gap:10px;border-color:var(--line)}
.essentials-hours .hours-list>div:first-child{padding-top:0}
.essentials-hours .hours-list dd{font-weight:600}
.essentials-address>p{margin:0 0 4px;font-size:12px;line-height:1.8;color:var(--muted)}
.essentials-phone{display:block;min-height:35px;padding:6px 0;font-size:12px;line-height:1.5;text-decoration:underline;text-underline-offset:4px}
.studio-brands{padding-bottom:48px}
.studio-brands .container{border-top:0;padding-top:0}
@media(hover:hover) and (pointer:fine){
 .essentials-panel:hover{transform:none;box-shadow:none;border-color:transparent}
 .essentials-coupons .mini-offer:hover{transform:translateY(-3px);box-shadow:none}
 .essentials-panel::before{border-radius:18px}
 .studio-visit-details>.visit-steps li:hover::before{border-color:var(--gold);color:var(--gold)}
}
@media(max-width:1199px){
 .essentials-row{gap:35px}
 .essentials-visit-layout{grid-template-columns:1fr;gap:12px}
 .essentials-address{display:flex;flex-wrap:wrap;align-items:center;gap:2px 19px}
 .essentials-address>p{flex-basis:100%;margin-bottom:2px}
}
@media(max-width:1050px){
 .studio-hero{padding-top:40px;padding-bottom:34px}
}
@media(max-width:800px){
 .essentials-row{grid-template-columns:1fr;gap:0}
 .essentials-panel{padding:25px 0}
 .essentials-panel+ .essentials-panel{border-top:1px solid var(--line)}
 .essentials-panel h2{font-size:26px;margin-bottom:23px}
 .essentials-visit-layout{grid-template-columns:1.1fr 1fr;gap:32px}
 .essentials-address{display:block}
 .essentials-address>p{margin-bottom:5px}
 .essentials-hours .hours-list{font-size:13px}
 .essentials-offers{gap:28px}
 .essentials-coupons .mini-offer+ .mini-offer{padding-left:28px}
 .studio-essentials{padding-bottom:35px}
}
@media(max-width:600px){
 .studio-hero{padding-top:29px;padding-bottom:31px}
 .studio-hero .hero-copy>p{font-size:14px;line-height:1.85}
 .essentials-panel h2{font-size:24px;line-height:1.25;margin:12px 0 23px}
 .essentials-panel .eyebrow{font-size:10px}
 .essentials-coupons .mini-offer>strong{font-size:36px}
 .essentials-coupons .mini-offer>span{font-size:12px;line-height:1.65}
 .essentials-offers{gap:20px}
 .essentials-coupons .mini-offer+ .mini-offer{padding-left:20px}
 .essentials-coupons .offer-note{font-size:10px;margin-top:16px}
 .essentials-panel .text-link,.essentials-phone{font-size:11px}
 .essentials-visit-layout{grid-template-columns:1fr;gap:17px}
 .essentials-hours .hours-list{font-size:13px}
 .essentials-hours .hours-list>div{padding:11px 0}
 .essentials-address{display:grid;grid-template-columns:1.15fr 1fr;gap:0 17px;align-items:start}
 .essentials-address>p{grid-row:1 / span 2;grid-column:1;margin:3px 0 0;font-size:11px;line-height:1.9}
 .essentials-address>.text-link,.essentials-address>.essentials-phone{grid-column:2}
 .essentials-address>.text-link{padding-top:0;min-height:30px}
 .essentials-address>.essentials-phone{padding:1px 0 0;min-height:27px}
 .studio-essentials{padding-bottom:33px}
 .page-hero-copy p,.intro-note{font-size:14px;line-height:1.85}
 .full-service-heading p{font-size:14px}
 .full-service-list li{font-size:13px}
 .service-list span{font-size:14px}
 .studio-visit-details>.visit-steps strong{font-size:13px}
 .studio-visit-details>.visit-steps span{font-size:12px}
 .studio-visit-details>p:not(.visit-address){font-size:13px}
}
@media(max-width:359px){
 .essentials-coupons .mini-offer>strong{font-size:33px}
 .essentials-offers{gap:16px}
 .essentials-coupons .mini-offer+ .mini-offer{padding-left:16px}
 .essentials-address{grid-template-columns:1fr 1fr;gap:0 12px}
}
@media(prefers-reduced-motion:reduce){
 .cube-kicker::before,.cube-kicker::after{animation:none!important}
 .cube-kicker::after{display:none}
}
@media print{
 .cube-kicker::before,.cube-kicker::after{animation:none!important}
 .cube-kicker::after{display:none}
 .studio-proof .count-value,.reviews-action-rating .count-value{display:none}
 .studio-proof strong>.sr-only,.reviews-action-rating strong>.sr-only{position:static;width:auto;height:auto;margin:0;padding:0;overflow:visible;clip:auto;white-space:normal;font:inherit;color:inherit}
}


/* One outlined lockup stays mounted before, during, and after either draw.
   Shell Heavy and Roboto 500 are retained as paths, preventing font swaps and
   the old SVG-to-HTML baseline change at the end of the entrance. */
.brand[data-logo-entrance]>.outlined-brand-logo{position:static;inset:auto;display:block;width:170.994px;height:48px;max-height:none;flex:0 0 auto;overflow:visible;pointer-events:none;color:inherit;opacity:1;visibility:visible;transition:none}
.floating-header .header-brand-logo .header-logo-cube{color:var(--gold-dark)}
.floating-header.glass-over-dark .header-brand-logo .header-logo-cube{color:var(--gold)}
.footer .brand>.footer-brand-logo{width:192.36825px;height:54px}
.footer .footer-brand-logo .footer-logo-cube{color:var(--gold)}
.footer .footer-brand-logo>.logo-wordmark{color:#bec3bf;opacity:1}
.brand.logo-entrance :is(.header-logo-mark,.footer-logo-mark){animation:studio-logo-word .7s ease .15s both}
@media(max-width:600px){.floating-header .brand>.header-brand-logo{width:153.1821px;height:43px}}
@media(max-width:359px){.floating-header .brand>.header-brand-logo{width:142.495px;height:40px}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
 .floating-header.glass-over-dark .header-brand-logo .header-logo-cube{color:var(--gold-dark)}
}
@media(prefers-reduced-motion:reduce){
 .brand.logo-entrance :is(.header-logo-mark,.footer-logo-mark){animation:none}
}
@media print{
 .brand.logo-entrance :is(.header-logo-mark,.footer-logo-mark){animation:none}
}

/* Readable supporting copy at every screen size. */
@media screen{
 .studio-hero .hero-copy>p,
 .section-heading-note>p,
 .page-hero-copy p,.intro-note,
 .faq-page-layout .page-hero-copy p,
 .studio-difference .home-why-benefits p,
 .full-service-heading p,
 .service-list span,.full-service-list li,
 .why-card p,.logo-card p,.pricing-card p,
 .coupon-guide p,.reviews-action-band p,.reviews-action-rating p,
 .shop-visit-copy>p,.shop-info-grid .essentials-card p,
 .contact-copy p,.contact-copy address,
 .faq-answer p,
 .studio-visit-details>p:not(.visit-address){font-size:16px;line-height:1.75}

 .faq-item summary{font-size:16px}
 .visit-steps strong,.visit-steps span,
 .studio-visit-details>.visit-steps strong,
 .studio-visit-details>.visit-steps span{font-size:15px;line-height:1.7}
 .essentials-hours .hours-list,.shop-info-grid .hours-list,
 .location-card .hours-list,.studio-visit-details .hours-list{font-size:15px;line-height:1.6}
 .essentials-address>p{font-size:15px;line-height:1.7}
 .essentials-coupons .mini-offer>span{font-size:15px;line-height:1.6}

 .eyebrow,.studio-hero .hero-copy>.eyebrow,
 .essentials-panel .eyebrow{font-size:13px;line-height:1.65}
 .text-link,.essentials-panel .text-link,.essentials-phone,
 .studio-review-layout .section-head>.text-link,
 .studio-brand-heading h2,.studio-brand-heading .text-link,
 .studio-visit-call{font-size:14px;line-height:1.6}
 .essentials-coupons .offer-note,.studio-coupons>.container>.offer-note,
 .service-note,.location-card .location-policy{font-size:14px;line-height:1.75}
 .offer-switcher>a>span{font-size:14px;line-height:1.6}
 .offer-switcher small,.essentials-coupons .mini-offer>strong small,
 .studio-coupon-grid .mini-offer strong small,.panel-head>span{font-size:13px}

 .proof-number>span{font-size:13px;line-height:1.55;max-width:76px}
 .photo-stage-top{font-size:12px;line-height:1.6}
 .studio-photo-stage>figcaption,
 .shop-photo figcaption,.shop-gallery-photo figcaption{font-size:13px;line-height:1.65}
 .studio-visit-photo p{font-size:14px;line-height:1.75}
 .studio-review-track .review-author,
 .reviews-page .quote-card .review-author{font-size:15px;line-height:1.6}
 .studio-review-track .review-meta,
 .reviews-page .quote-card .review-meta{font-size:13px;line-height:1.6}

 .footer-nav{font-size:14px;line-height:1.6}
 .footer-contact{font-size:14px;line-height:1.7}
 .footer-meta{font-size:12px;line-height:1.7}
 .coupon-print-btn,.jump-panel a{font-size:14px}
}

@media screen and (max-width:800px){
 .studio-proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
 .proof-number{flex-direction:column;align-items:flex-start;gap:6px;max-width:none}
 .proof-number>span{max-width:none}
 .proof-number+ .proof-number{padding-left:20px}
 .studio-brand-heading{flex-wrap:wrap;row-gap:8px}
}

@media screen and (max-width:600px){
 .studio-hero .hero-actions .btn,
 .contact-copy .hero-actions .btn,
 .closing-cta-actions .btn{font-size:14px}
 .studio-hero .hero-actions .btn{padding-inline:14px;gap:8px}
 .fixed-actions .btn{font-size:14px;gap:6px;padding-inline:8px}
 .essentials-address{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
 .essentials-address>p{min-width:0}
 .essentials-address>.text-link{gap:8px}
 .studio-photo-stage>figcaption{flex-wrap:wrap;row-gap:8px}
}

@media screen and (max-width:359px){
 .studio-hero .hero-actions .btn{padding-inline:11px;gap:6px}
 .studio-hero .hero-actions .studio-icon,
 .fixed-actions .studio-icon{display:none}
 .studio-proof{gap:14px}
 .proof-number+ .proof-number{padding-left:14px}
}