:root{--motion-ease:cubic-bezier(.16,1,.3,1)}

/* v47: A clear lens center with minimal frost and a defined optical rim.
   Backdrop layers stay behind the logo and controls so the artwork stays crisp. */
.floating-header{
  --header-glass-blur:1.2px;
  --glass-edge-blur:2.2px;
  --glass-glint-alpha:.045;
  --glass-surface-tint:rgba(224,241,255,.015);
  --glass-surface-brightness:1;
  --glass-rim-opacity:1;
  --header-ink:#142334;
  --header-link-accent:#0649a8;
  background:transparent;
  border:0;
  padding:1px;
  outline:0;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.floating-header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border:1px solid rgba(255,255,255,.56);
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025) 18%,rgba(255,255,255,0) 48%,rgba(30,90,145,.025)),var(--glass-surface-tint);
  outline:0;
  box-shadow:0 11px 26px rgba(7,30,52,.14),0 2px 5px rgba(7,19,32,.06),inset 0 2px 2px rgba(255,255,255,.82),inset 1px 0 1px rgba(255,255,255,.40),inset 0 -2px 3px rgba(5,27,48,.18),inset 0 0 0 1px rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(var(--header-glass-blur)) saturate(112%) brightness(var(--glass-surface-brightness));
  backdrop-filter:blur(var(--header-glass-blur)) saturate(112%) brightness(var(--glass-surface-brightness));
  transform-origin:center;
  transition:transform .42s var(--motion-ease),background-color .2s;
  pointer-events:none;
}
.floating-header::after{content:none;display:none;border:0;outline:0;box-shadow:none;background:none}
.floating-header.has-glass-capsule::after{
  content:"";
  display:block;
  position:absolute;
  inset:0;
  z-index:0;
  border:0;
  outline:0;
  border-radius:inherit;
  box-shadow:none;
  opacity:var(--glass-rim-opacity);
  background:radial-gradient(ellipse 360px 100px at var(--header-light-x,17%) var(--header-light-y,0%),rgba(255,255,255,.96),transparent 78%),linear-gradient(132deg,rgba(255,255,255,.94),rgba(255,255,255,.42) 24%,rgba(255,255,255,.07) 47%,rgba(255,255,255,.72) 76%,rgba(255,255,255,.28));
  -webkit-backdrop-filter:blur(var(--glass-edge-blur)) saturate(125%) brightness(1.06);
  backdrop-filter:blur(var(--glass-edge-blur)) saturate(125%) brightness(1.06);
  -webkit-mask-image:var(--glass-capsule-mask);
  mask-image:var(--glass-capsule-mask);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  transform-origin:center;
  transition:transform .42s var(--motion-ease);
  pointer-events:none;
}
.floating-header.has-glass-lens::before{
  -webkit-backdrop-filter:url("#mobil1-header-lens") saturate(112%) brightness(var(--glass-surface-brightness));
  backdrop-filter:url("#mobil1-header-lens") saturate(112%) brightness(var(--glass-surface-brightness));
}
.floating-header.has-glass-lens::after{-webkit-backdrop-filter:none;backdrop-filter:none}
.floating-header .header-inner{position:relative;z-index:1;border-radius:inherit}
.floating-header .header-inner::before{
  content:"";
  position:absolute;
  inset:2px;
  z-index:-1;
  border:0;
  border-radius:inherit;
  background:linear-gradient(to bottom,rgba(255,255,255,.06),transparent 32%),radial-gradient(ellipse 360px 80px at var(--header-light-x,var(--glass-light-x,42%)) var(--header-light-y,var(--glass-light-y,18%)),rgba(255,255,255,var(--glass-glint-alpha)),transparent 78%);
  pointer-events:none;
}
.floating-header.is-scrolled::before{outline:0}
.floating-header.is-glass-pressed::before,.floating-header.is-glass-pressed::after{transform:scale(1.006,1.025)}
.floating-header.glass-over-dark{
  --header-ink:#fff;
  --header-link-accent:#fff;
  --glass-surface-tint:rgba(8,24,44,.14);
  --glass-surface-brightness:1;
  --glass-rim-opacity:.88;
}
/* Reuse each page's footer artwork on dark backdrops without changing layout
   or restarting the regular logo's entrance animation. */
.floating-header .brand{position:relative;background:transparent;box-shadow:none}
.floating-header .brand>:is(.brand-static-logo,.brand-animated-logo,.brand-dark-logo){transition:opacity .18s ease,visibility .18s ease}
.floating-header .brand>.brand-dark-logo{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;opacity:0;visibility:hidden;pointer-events:none}
.floating-header.glass-over-dark .brand>:is(.brand-static-logo,.brand-animated-logo){opacity:0;visibility:hidden}
.floating-header.glass-over-dark .brand>.brand-dark-logo{opacity:1;visibility:visible}
.floating-header .primary-nav>a:not(.button){
  position:relative;
  isolation:isolate;
  color:var(--header-ink);
  text-shadow:0 1px 2px rgba(255,255,255,.25);
  transition:color .2s,text-shadow .2s;
}
.floating-header.glass-over-dark .primary-nav>a:not(.button){text-shadow:0 1px 3px rgba(0,20,40,.28)}
.floating-header .primary-nav>a:not(.button)::before{
  content:"";
  position:absolute;
  inset:7px -7px;
  z-index:-1;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 2px 5px rgba(4,25,47,.05);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
}
.floating-header .primary-nav>a[aria-current=page]:not(.button){color:var(--header-link-accent);box-shadow:none}
.floating-header .primary-nav>a[aria-current=page]:not(.button)::before,.floating-header .primary-nav>a:not(.button):focus-visible::before{opacity:1}
.floating-header .button-header{
  border:1px solid rgba(255,255,255,.56);
  border-radius:999px;
  color:var(--header-ink);
  background:linear-gradient(to bottom,rgba(255,255,255,.10),rgba(255,255,255,.01)),rgba(255,255,255,.015);
  text-shadow:0 1px 2px rgba(255,255,255,.25);
  box-shadow:0 3px 8px rgba(4,25,47,.10),inset 0 1.5px 0 rgba(255,255,255,.76),inset 0 -1px 1px rgba(7,33,57,.13);
}
.floating-header.glass-over-dark .button-header{text-shadow:0 1px 3px rgba(0,20,40,.30)}
.floating-header .menu-button{
  border:1px solid rgba(255,255,255,.56);
  background:linear-gradient(to bottom,rgba(255,255,255,.10),rgba(255,255,255,.01)),rgba(255,255,255,.015);
  box-shadow:0 3px 8px rgba(4,25,47,.10),inset 0 1.5px 0 rgba(255,255,255,.76),inset 0 -1px 1px rgba(7,33,57,.13);
  color:var(--header-ink);
}
.header-glass-filters{position:absolute;left:0;top:0;width:0;height:0;overflow:hidden;pointer-events:none}

/* v51: Desktop links have their own order, labels and larger type.
   The original links retain the mobile menu's sequence and keyboard order. */
.floating-header .primary-nav>.desktop-header-coupons,.floating-header .primary-nav>.desktop-primary-link{display:none}
@media(min-width:1024px){
  .floating-header .header-inner{gap:clamp(24px,2.4vw,36px)}
  .floating-header .primary-nav{flex:1 1 auto;min-width:0;justify-content:space-between;gap:clamp(8px,.8vw,12px)}
  .floating-header .primary-nav>a:not(.button){flex:0 0 auto;font-size:clamp(15px,1.35vw,18px);font-weight:600;padding-inline:2px}
  .floating-header .primary-nav>.mobile-primary-link{display:none}
  .floating-header .primary-nav>.desktop-primary-link{display:block}
  .floating-header .primary-nav>.button-header{display:none}
}
/* v48: Blur only behind desktop navigation labels; preserve the clear rim.
   The mobile menu and the rest of the capsule keep the v47 treatment. */
@media screen and (min-width:1024px){
  .floating-header .primary-nav>a{position:relative;isolation:isolate}
  .floating-header .primary-nav>a::after{
    content:"";
    position:absolute;
    inset:8px -6px;
    z-index:-1;
    border-radius:999px;
    background:rgba(237,246,253,.18);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    pointer-events:none;
  }
  .floating-header .primary-nav>a.button-header::after{inset:6px;border-radius:inherit}
  .floating-header.glass-over-dark .primary-nav>a::after{background:rgba(8,24,44,.24)}
  @media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
    .floating-header .primary-nav>a::after{display:none}
  }
}
/* v87: Keep counters in a responsive final-value frame, including after motion. */
.hero-proof strong>.count-value,.proof-grid strong>.count-value{display:inline-block;position:relative;white-space:nowrap;font:inherit;color:inherit;letter-spacing:inherit;font-variant-numeric:tabular-nums}
.count-value[data-count-final]::before{content:attr(data-count-final);visibility:hidden}
.hero-proof .count-value>.count-current,.proof-grid .count-value>.count-current{position:absolute;inset:0;font:inherit;color:inherit;letter-spacing:inherit;white-space:nowrap}

/* Each word keeps its natural wrapping; its letters rise through a mask. */
.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}

/* Original SVG geometry; outlines draw first, followed by color and lettering. */
.brand-animated-logo{display:none}
.brand.logo-entrance>.brand-static-logo{display:none}
.brand.logo-entrance>.brand-animated-logo{display:block}
.brand.logo-entrance .logo-draw-path{fill-opacity:1;stroke:var(--logo-stroke);stroke-width:2px;stroke-opacity:0;stroke-dasharray:1;stroke-dashoffset:0;animation:studio-logo-draw 1.5s ease var(--logo-delay,0s) both}
.brand.logo-entrance .logo-wordmark{opacity:1;animation:studio-logo-word .55s ease .95s both}
@keyframes studio-logo-draw{0%{stroke-dashoffset: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}}

/* Tiny Pegasus accents retain the original breathing and expanding pulse. */
.eyebrow i{position:relative;animation:studio-dot-breathe 3.2s ease-in-out infinite}
.eyebrow i::after{content:"";position:absolute;inset:0;background:url("/assets/pegasus-checklist-vector.svg") center/contain no-repeat;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}}

/* v67: compact shadows and restrained interaction, using the existing palette. */
.button{position:relative;transition:transform .22s var(--motion-ease),box-shadow .22s var(--motion-ease),background-color .22s,border-color .22s}
.hero-copy .button-primary,.page-intro .button-primary{animation:none}
.button-outline{background:#ffffff80;border-color:#ffffffcc;box-shadow:0 2px 6px rgba(14,35,58,.05);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.shop-card,.oil-card,.maintenance-card,.coupon-ticket,.visit-card,.comparison,.check-panel,.quote-card{position:relative;isolation:isolate;transition:transform .28s var(--motion-ease),box-shadow .28s var(--motion-ease),border-color .28s}
.shop-card,.oil-card,.maintenance-card,.visit-card{background:linear-gradient(135deg,#f4f8fc,#fff);box-shadow:0 6px 18px rgba(14,35,58,.035),inset 0 1px 0 #fff}
:is(.shop-card,.oil-card,.maintenance-card,.coupon-ticket,.visit-card,.comparison,.check-panel,.quote-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,#318bcc1f),transparent 80%);opacity:0;pointer-events:none;transition:opacity .4s}
.ink-section :is(.comparison,.check-panel,.quote-card){--spotlight-color:#76b4ec24}
:is(.shop-card,.oil-card,.maintenance-card,.coupon-ticket,.visit-card,.comparison,.check-panel,.quote-card):focus-within::before{opacity:1}
.benefit-icon>.icon{transition:translate .4s var(--motion-ease)}
.accordion summary>.icon{transition:transform .4s var(--motion-ease)}
.text-link>.icon,.button>.icon{transition:translate .4s var(--motion-ease)}

@media(hover:hover) and (pointer:fine){
.floating-header:hover{--glass-glint-alpha:.065}
.floating-header .primary-nav>a:not(.button):hover{color:var(--header-link-accent)}
.floating-header .primary-nav>a:not(.button):hover::before{opacity:1}
.floating-header .button-header:hover,.floating-header .button-header:focus-visible{border-color:rgba(255,255,255,.76);background:linear-gradient(to bottom,rgba(255,255,255,.16),rgba(255,255,255,.035)),rgba(255,255,255,.04);box-shadow:0 4px 10px rgba(4,25,47,.14),inset 0 1.5px 0 rgba(255,255,255,.86),inset 0 -1px 1px rgba(7,33,57,.13)}
.hero-copy .button-primary:hover,.page-intro .button-primary:hover{animation:none;box-shadow:0 4px 10px rgba(14,35,58,.14),inset 0 1px 0 rgba(255,255,255,.22)}
.button-outline:hover{border-color:#fff;box-shadow:0 4px 10px rgba(14,35,58,.08)}
.shop-card:hover,.oil-card:hover,.maintenance-card:hover,.coupon-ticket:hover,.visit-card:hover{transform:translateY(-2px);border-color:#b7cbdc;box-shadow:0 10px 24px rgba(14,35,58,.08),inset 0 1px 0 #fff}
.comparison:hover,.check-panel:hover{transform:translateY(-2px);border-color:#8fc4ec77;box-shadow:0 10px 24px rgba(14,35,58,.09)}
.quote-card:hover{border-color:#adcfe7;box-shadow:inset 0 0 0 1px #d5e8f6}
.ink-section .comparison:hover,.ink-section .check-panel:hover,.ink-section .quote-card:hover{border-color:#8fc4ec77;box-shadow:0 10px 24px rgba(0,0,0,.12)}
:is(.shop-card,.oil-card,.maintenance-card,.coupon-ticket,.visit-card,.comparison,.check-panel,.quote-card):hover::before{opacity:.35}
.benefit:hover .benefit-icon>.icon{translate:0 -3px}
.text-link:hover>.icon,.button:hover>.icon{translate:3px 0}
.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)}
.page-intro::before{content:"";position:absolute;z-index:-1;inset:-20%;background:radial-gradient(ellipse at 20% 35%,#318bcc26,transparent 42%),radial-gradient(ellipse at 75% 45%,#73baf32e,transparent 48%);filter:blur(32px);pointer-events:none;animation:studio-ambient 12s ease-in-out infinite alternate}
.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 -4px}}

@media(max-width:760px){
.floating-header .primary-nav{
  top:calc(100% + 8px);
  border:1px solid rgba(255,255,255,.34);
  border-radius:28px;
  background:linear-gradient(135deg,rgba(255,255,255,.38),rgba(255,255,255,.15)),rgba(227,235,242,.76);
  box-shadow:0 20px 46px rgba(4,25,47,.18),0 3px 9px rgba(4,25,47,.08),inset 0 1px 1px rgba(255,255,255,.52),inset 0 -2px 5px rgba(7,33,57,.07);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  backdrop-filter:blur(18px) saturate(145%);
  max-height:calc(100dvh - 120px - env(safe-area-inset-bottom));
  overscroll-behavior:contain;
}
.floating-header.glass-over-dark .primary-nav{background-color:rgba(31,39,49,.90);background-image:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.025))}
.floating-header .primary-nav>a:not(.button){color:var(--header-ink);border-bottom-color:transparent;margin-block:3px;text-shadow:0 1px 2px rgba(255,255,255,.50)}
.floating-header.glass-over-dark .primary-nav>a:not(.button){text-shadow:0 1px 2px rgba(0,20,40,.60)}
.floating-header .primary-nav>a:not(.button)::before{inset:2px 0;border:0;border-radius:14px;background:rgba(23,42,59,.025);box-shadow:none;opacity:.60}
.floating-header .primary-nav>a[aria-current=page]:not(.button){color:var(--header-link-accent)}
.floating-header .primary-nav>a[aria-current=page]:not(.button)::before{background:rgba(23,42,59,.07);border:0;opacity:1}

}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.floating-header::before{background:#edf3f8}
.floating-header.glass-over-dark::before{background:#1b2a3b}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
.floating-header,.floating-header.glass-over-dark,.floating-header .primary-nav,.floating-header.glass-over-dark .primary-nav{
  --header-ink:#142334;
  --header-link-accent:#0649a8;
  background:#f5faff;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border:0;
  outline:0;
  box-shadow:none;
}
.floating-header::before,.floating-header::after,.floating-header.has-glass-capsule::after,.floating-header .header-inner::before{display:none}
.floating-header .primary-nav>a:not(.button),.floating-header.glass-over-dark .primary-nav>a:not(.button){text-shadow:none;color:#142334}
.floating-header.glass-over-dark .brand>:is(.brand-static-logo,.brand-animated-logo){opacity:1;visibility:visible}
.floating-header.glass-over-dark .brand>.brand-dark-logo{opacity:0;visibility:hidden}
.floating-header .primary-nav>a[aria-current=page]:not(.button){color:#0649a8}
.floating-header .primary-nav>a:not(.button)::before{background:#e4eef9;border-color:#adc5df;box-shadow:none}
.floating-header .menu-button{background:#e4eef9;border-color:#adc5df}
}
.motion-paused .eyebrow i,.motion-paused .eyebrow i::after,.motion-paused .home-hero::before,.motion-paused .page-intro::before,.motion-paused .photo-stage,.motion-paused .hero-copy .button-primary,.motion-paused .page-intro .button-primary{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
.floating-header .brand>:is(.brand-static-logo,.brand-animated-logo,.brand-dark-logo){transition:none}
.brand.logo-entrance>.brand-static-logo{display:block}.brand.logo-entrance>.brand-animated-logo{display:none}
.brand.logo-entrance .logo-draw-path,.brand.logo-entrance .logo-wordmark{animation:none}
.eyebrow i,.eyebrow i::after,.home-hero::before,.page-intro::before,.photo-stage,.hero-copy .button-primary,.page-intro .button-primary{animation:none!important}
.eyebrow i::after{opacity:0}
.motion-word{clip-path:none}
.floating-header,.floating-header::before,.floating-header::after,.primary-nav>a,.button,.shop-card,.oil-card,.maintenance-card,.coupon-ticket,.visit-card,.comparison,.check-panel,.quote-card,.benefit-icon>.icon,.text-link>.icon,.button>.icon,.accordion summary>.icon{transition:none}
.text-link::after,:is(.shop-card,.oil-card,.maintenance-card,.coupon-ticket,.visit-card,.comparison,.check-panel,.quote-card)::before{display:none}
.button:hover,.shop-card:hover,.oil-card:hover,.maintenance-card:hover,.coupon-ticket:hover,.visit-card:hover,.comparison:hover,.check-panel:hover,.shop-photo:hover>img{transform:none}
.benefit:hover .benefit-icon>.icon,.text-link:hover>.icon,.button:hover>.icon{translate:none}
}
@media print{
.brand.logo-entrance>.brand-static-logo{display:block}.brand.logo-entrance>.brand-animated-logo{display:none}
.brand.logo-entrance .logo-draw-path,.brand.logo-entrance .logo-wordmark{animation:none}
.eyebrow i,.eyebrow i::after,.home-hero::before,.page-intro::before,.photo-stage,.hero-copy .button-primary,.page-intro .button-primary{animation:none!important}
.text-link::after,:is(.shop-card,.oil-card,.maintenance-card,.coupon-ticket,.visit-card,.comparison,.check-panel,.quote-card)::before{display:none}
.motion-word{display:inline;clip-path:none}.motion-letter{display:inline;transform:none!important}
.shop-card,.oil-card,.maintenance-card,.visit-card{background:#fff;box-shadow:none}
.proof-grid .count-value,.hero-proof .count-value{display:none}
.proof-grid strong>.sr-only,.hero-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;letter-spacing:inherit}
}