/* Geist and Geist Mono by Vercel, SIL Open Font License 1.1 (assets/fonts/Geist-OFL.txt). */
@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/geist-variable.woff2) format('woff2')}
@font-face{font-family:Geist;font-style:italic;font-weight:100 900;font-display:swap;src:url(../fonts/geist-italic-variable.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/geist-mono-variable.woff2) format('woff2')}
/* Xclusive Car Care, v3 "Studio after dark".
   Brand palette: charcoal #25292A, silver #C7CACF, cyan #04A4B2. Geist type.
   Dark by default, light theme available. Radii: 28/22 bezel, 16 fields, pill actions.
   Layers: grain 80, header 90, menu 88, progress 96, curtain 95, skip 100; dialogs use the top layer. */

:root,[data-theme=dark]{
 color-scheme:dark;
 --bg:#050607;--bg-2:#0a0c0d;--surface:#0e1113;--surface-2:#141719;--charcoal:#25292a;
 --ink:#f3f5f6;--ink-2:#dde1e4;--silver:#c7cacf;--muted:#949ba1;--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.15);
 --glass:rgba(255,255,255,.045);--glass-2:rgba(255,255,255,.08);
 --cyan:#04a4b2;--cyan-2:#34d5e1;--cyan-ink:#021417;--accent-text:#3fd9e4;--glow:rgba(4,164,178,.5);
 --error:#ff8a80;
 --gutter:clamp(18px,4.4vw,72px);--maxw:1560px;--nav-h:68px;
 --section:clamp(96px,11.5vw,184px);
 --r-outer:28px;--r-inner:22px;--r-field:16px;
 --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--ease-drawer:cubic-bezier(.32,.72,0,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
 --fs-display:clamp(54px,9.2vw,160px);--fs-h1:clamp(48px,7vw,116px);--fs-h2:clamp(42px,5.6vw,92px);--fs-h3:clamp(22px,1.9vw,30px);--fs-lead:clamp(16px,1.25vw,19px)
}
[data-theme=light]{
 color-scheme:light;
 --bg:#f2f3f3;--bg-2:#e8eaeb;--surface:#ffffff;--surface-2:#f7f8f8;
 --ink:#0b0e0f;--ink-2:#262b2e;--silver:#4d5357;--muted:#596167;--line:rgba(11,14,15,.09);--line-2:rgba(11,14,15,.17);
 --glass:rgba(11,14,15,.035);--glass-2:rgba(11,14,15,.06);--accent-text:#037882;--glow:rgba(4,164,178,.35);--error:#b3261e
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:110px;background:var(--bg)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.65 Geist,system-ui,-apple-system,"Segoe UI",sans-serif;font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
body:has(dialog[open]){overflow:hidden}
img,video,svg,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
button:disabled{cursor:default;opacity:.35}
p{margin:0 0 1.15em;color:var(--muted)}
p:last-child{margin-bottom:0}
h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:500;text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:.95;letter-spacing:-.055em}
h2{font-size:var(--fs-h2);line-height:.98;letter-spacing:-.05em}
h3{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.025em}
:is(h1,h2,.footer-claim,.hero-title) em{font-style:italic;font-weight:300;color:var(--accent-text);padding-right:.04em}
ul,ol{margin:0;padding:0;list-style:none}
address{font-style:normal}
::selection{background:var(--cyan);color:var(--cyan-ink)}
:focus-visible{outline:2px solid var(--cyan-2);outline-offset:4px;border-radius:6px}
.icon{width:20px;height:20px;flex:none}
.wrap{position:relative;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{position:relative;padding-block:var(--section);isolation:isolate;overflow-x:clip}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--muted);max-width:54ch}
.note{font-size:13px;line-height:1.7;color:var(--muted)}
.note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}
.skip-link{position:fixed;z-index:100;top:12px;left:12px;padding:12px 18px;border-radius:999px;background:var(--cyan);color:var(--cyan-ink);transform:translateY(-200%);transition:transform .25s var(--ease-out)}
.skip-link:focus{transform:none}

/* Eyebrow badge */
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;padding:7px 14px 7px 12px;border-radius:999px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line-2);font:500 11px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--silver)}
.eyebrow::before{content:"";width:7px;height:7px;background:var(--cyan);transform:rotate(45deg);box-shadow:0 0 12px var(--glow)}

/* Grain, progress, ambient light */
.grain{position:fixed;inset:-15%;z-index:80;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(5) infinite}
[data-theme=light] .grain{opacity:.035}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}}
.scroll-progress{position:fixed;left:0;top:0;z-index:96;width:100%;height:2px;background:linear-gradient(90deg,var(--cyan),var(--cyan-2));transform:scaleX(0);transform-origin:left;pointer-events:none;box-shadow:0 0 12px var(--glow)}
.ambient,.intro-glow,.footer-glow,.contact-glow{position:absolute;z-index:-1;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(4,164,178,.2),rgba(4,164,178,.06) 55%,transparent);width:min(70vw,960px);aspect-ratio:1;animation:drift 22s var(--ease-in-out) infinite alternate}
.ambient.is-left{left:-22vw;top:6%}
.ambient.is-right{right:-24vw;top:18%;animation-delay:-8s}
.intro-glow{right:-10vw;top:-30vw}
.contact-glow{left:-20vw;bottom:-30vw}
.footer-glow{left:50%;top:-40%;translate:-50% 0;width:min(110vw,1400px)}
[data-theme=light] :is(.ambient,.intro-glow,.contact-glow){background:radial-gradient(closest-side,rgba(4,164,178,.13),transparent)}
@keyframes drift{to{transform:translate(6vw,4vw) scale(1.08)}}

/* Buttons: pill with a nested icon capsule */
.btn{--btn-bg:var(--cyan);--btn-ink:var(--cyan-ink);--btn-icon-bg:rgba(2,20,23,.14);position:relative;display:inline-flex;align-items:center;gap:14px;height:54px;padding:0 6px 0 24px;border:0;border-radius:999px;background:var(--btn-bg);color:var(--btn-ink);font:500 15px/1 Geist,system-ui,sans-serif;letter-spacing:-.005em;white-space:nowrap;isolation:isolate;transition:transform 180ms var(--ease-out),background-color 400ms var(--ease-out),box-shadow 500ms var(--ease-out)}
.btn-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 40px -14px var(--glow)}
.btn-glass{--btn-bg:var(--glass-2);--btn-ink:var(--ink);--btn-icon-bg:var(--glass-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.hero .btn-glass,.site-footer .btn-glass,.lunaray-card .btn-glass{--btn-bg:rgba(5,6,7,.42);--btn-ink:#fff;--btn-icon-bg:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);}
.btn-sm{height:44px;padding:0 4px 0 18px;font-size:14px;gap:10px}
.btn-sm .btn-icon{width:36px;height:36px}
.btn-block{width:100%;justify-content:space-between}
.btn:active{transform:scale(.97)}
.btn-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:999px;background:var(--btn-icon-bg);transition:transform 500ms var(--ease-spring),background-color 300ms ease}
.btn .icon{width:18px;height:18px}
.btn-label{display:inline-block;overflow:hidden;line-height:1.25;height:1.25em}
.btn-label>span{display:block;position:relative;transition:transform 550ms var(--ease-out)}
.btn-label>span::after{content:attr(data-text);content:attr(data-text) / "";position:absolute;left:0;top:100%}
.button-row{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px}
@media (hover:hover) and (pointer:fine){
 .btn:hover .btn-label>span,a:hover>.btn .btn-label>span{transform:translateY(-100%)}
 .btn:hover .btn-icon,a:hover .btn .btn-icon{transform:translate(2px,-1px) scale(1.07)}
 .btn-primary:hover{background:var(--cyan-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 16px 50px -12px var(--glow)}
 .btn-glass:hover{--btn-bg:var(--glass-2);box-shadow:inset 0 0 0 1px var(--cyan)}
}
.link-arrow{display:inline-flex;align-items:center;gap:12px;min-height:44px;font:500 15px/1.2 Geist,system-ui,sans-serif;color:var(--ink);white-space:nowrap}
.link-text{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/100% 1px;padding-bottom:3px}
.link-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);transition:background-color 300ms ease,color 300ms ease,transform 450ms var(--ease-spring)}
.link-icon .icon{width:16px;height:16px}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:999px;color:var(--ink);transition:transform 160ms var(--ease-out),background-color 250ms ease}
.icon-btn:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){
 .link-arrow:hover .link-text{animation:underline-wipe 700ms var(--ease-out)}
 .link-arrow:hover .link-icon,a:hover .link-arrow .link-icon{background:var(--cyan);color:var(--cyan-ink);transform:rotate(45deg);box-shadow:none}
 .icon-btn:hover{background:var(--glass-2)}
}
@keyframes underline-wipe{0%{background-size:100% 1px;background-position:100% 100%}45%{background-size:0 1px;background-position:100% 100%}46%{background-position:0 100%}100%{background-size:100% 1px;background-position:0 100%}}

/* Double-bezel containers and spotlight borders */
.bezel{position:relative;padding:6px;border-radius:var(--r-outer);background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px var(--line)}
[data-theme=light] .bezel{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.5));box-shadow:inset 0 0 0 1px var(--line),0 30px 60px -40px rgba(11,14,15,.35)}
.bezel-core{position:relative;border-radius:var(--r-inner);overflow:hidden;background:var(--surface);isolation:isolate}
.bezel-core::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(255,255,255,.04)}
:is(.bezel,.step-card,.project-more,.benefit-tabs button,.faq details)::before{content:"";position:absolute;inset:0;z-index:6;border-radius:inherit;padding:1px;pointer-events:none;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(52,213,225,.85),rgba(52,213,225,.15) 40%,transparent 65%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity 450ms ease}
@media (hover:hover) and (pointer:fine){[data-spot]:hover :is(.bezel,.step-card)::before,:is(.step-card,.project-more,.benefit-tabs button,.faq details)[data-spot]:hover::before,.bezel[data-spot]:hover::before{opacity:1}}

/* Brand curtain: intro and page transitions */
.curtain{position:fixed;inset:0;z-index:95;display:grid;place-items:center;background:#050607;visibility:hidden;transform:translateY(101%);pointer-events:none}
.curtain-glow{position:absolute;width:min(90vw,900px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(4,164,178,.3),transparent);opacity:.7}
.curtain-logo{position:relative;width:min(420px,64vw);height:auto;overflow:visible}
.curtain-bar{position:absolute;left:50%;bottom:12vh;width:min(220px,40vw);height:1px;translate:-50% 0;background:rgba(255,255,255,.12);overflow:hidden}
.curtain-bar span{position:absolute;inset:0;background:var(--cyan-2);transform:scaleX(0);transform-origin:left}
html.intro .curtain,html.arriving .curtain{visibility:visible;transform:none}
html.arriving .curtain-bar{display:none}
html.intro .curtain .logo-x{fill:rgba(4,164,178,0);stroke:#34d5e1;stroke-width:7;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
html.intro .curtain .logo-word{opacity:0}
html.leaving .curtain{visibility:visible;transform:none;transition:transform 620ms var(--ease-drawer)}
html.leaving .curtain-logo{animation:logo-in 620ms var(--ease-out) both}
@keyframes logo-in{from{opacity:0;transform:translateY(20px) scale(.96)}}

/* Floating navigation island */
.nav-shell{position:fixed;top:14px;left:0;right:0;z-index:90;display:flex;justify-content:center;padding-inline:14px;pointer-events:none;transition:transform 650ms var(--ease-drawer)}
.nav-shell.is-hidden{transform:translateY(-140%)}
.nav-pill{pointer-events:auto;display:flex;align-items:center;gap:26px;width:max-content;max-width:100%;height:var(--nav-h);padding:0 8px 0 20px;border-radius:999px;background:rgba(10,12,13,.55);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.08),0 20px 50px -24px rgba(0,0,0,.6);color:#f3f5f6;transition:background-color 400ms ease}
[data-theme=light] .nav-shell.is-scrolled .nav-pill{background:rgba(255,255,255,.72);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2),0 20px 50px -30px rgba(11,14,15,.35)}
.brand{display:block;width:98px;height:46px;flex:none}
.brand img{width:100%;height:100%;object-fit:contain}
.brand .logo-on-light{display:none}
[data-theme=light] .nav-shell.is-scrolled .brand .logo-on-dark{display:none}
[data-theme=light] .nav-shell.is-scrolled .brand .logo-on-light{display:block}
.nav{display:flex;align-items:center;gap:4px}
.nav-link{position:relative;padding:10px 14px;border-radius:999px;font-size:14px;color:inherit;opacity:.78;transition:opacity 250ms ease,background-color 250ms ease}
.nav-link[aria-current=page]{opacity:1;background:rgba(255,255,255,.1)}
[data-theme=light] .nav-shell.is-scrolled .nav-link[aria-current=page]{background:var(--glass-2)}
@media (hover:hover) and (pointer:fine){.nav-link:hover{opacity:1;background:rgba(255,255,255,.08)}}
.nav-actions{display:flex;align-items:center;gap:4px}
.nav-actions .icon-btn{color:inherit}
.menu-toggle{display:none}
.menu-lines{position:relative;width:20px;height:12px}
.menu-lines span{position:absolute;left:0;right:0;height:1.5px;background:currentColor;border-radius:2px;transition:transform 450ms var(--ease-drawer),top 450ms var(--ease-drawer)}
.menu-lines span:first-child{top:0}.menu-lines span:last-child{top:10px}
.menu-toggle[aria-expanded=true] .menu-lines span:first-child{top:5px;transform:rotate(45deg)}
.menu-toggle[aria-expanded=true] .menu-lines span:last-child{top:5px;transform:rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:88;display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:calc(var(--nav-h) + 44px) var(--gutter) calc(28px + env(safe-area-inset-bottom));background:rgba(5,6,7,.84);-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);overflow:auto;color:#f3f5f6}
.mobile-menu nav{display:grid}
.mobile-menu nav a{display:flex;justify-content:space-between;align-items:center;padding-block:12px;border-bottom:1px solid rgba(255,255,255,.1);font-size:clamp(34px,9.5vw,56px);font-weight:500;letter-spacing:-.045em;line-height:1.1;overflow:hidden}
.mobile-menu nav a span{display:block}
.mobile-menu nav a .icon{width:26px;height:26px;opacity:.5}
.mobile-menu nav a[aria-current=page]{color:var(--cyan-2)}
.mobile-menu-foot{display:grid;gap:14px;justify-items:start;font-size:15px;color:rgba(243,245,246,.75)}
.mobile-menu.is-open nav a>*{animation:menu-in 800ms var(--ease-out) both;animation-delay:calc(var(--i)*55ms + 80ms)}
.mobile-menu.is-open .mobile-menu-foot{animation:fade-up 800ms 400ms var(--ease-out) both}
@keyframes menu-in{from{opacity:0;transform:translateY(110%)}}
@keyframes fade-up{from{opacity:0;transform:translateY(16px)}}

/* Hero */
.hero{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto;align-content:end;color:#f3f5f6;isolation:isolate;overflow:clip;background:#050607}
.hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden;transform-origin:50% 30%;will-change:transform}
.hero-poster,.hero-poster img,.hero-video{position:absolute;inset:0;width:100%;height:100%}
.hero-poster img,.hero-video{object-fit:cover}
.hero-veil{position:absolute;inset:0;background:#050607;opacity:0;pointer-events:none}
.hero-video{opacity:0;transition:opacity 1.1s var(--ease-out)}
.hero-video.is-playing{opacity:1}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,7,.62) 0%,rgba(5,6,7,.06) 26%,rgba(5,6,7,.18) 52%,rgba(5,6,7,.94) 100%),linear-gradient(90deg,rgba(5,6,7,.6) 0%,rgba(5,6,7,0) 62%)}
.hero-inner{align-self:end;display:grid;justify-items:start;padding-top:calc(var(--nav-h) + 80px)}
.hero .eyebrow{background:rgba(5,6,7,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:#e6e9eb;}
.hero-title{font-size:var(--fs-display);font-weight:500;line-height:.9;letter-spacing:-.062em;color:#fff;max-width:11ch}
.hero-title em{color:var(--cyan-2)}
.hero-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px 48px;width:100%;margin-top:clamp(28px,3.4vw,52px)}
.hero-lead{margin:0;max-width:36ch;font-size:clamp(16px,1.35vw,20px);line-height:1.55;color:rgba(243,245,246,.8)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-meta{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:clamp(28px,3.6vw,56px);padding-block:18px clamp(18px,2.4vw,28px);border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:rgba(243,245,246,.7)}
.hero-place{display:inline-flex;align-items:center;gap:8px}
.hero-place .icon{width:16px;height:16px;color:var(--cyan-2)}
.media-toggle{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px;border-radius:999px;background:rgba(5,6,7,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);font-size:13px;color:#fff;transition:background-color 250ms ease}
.media-toggle:hover{background:rgba(255,255,255,.16)}
.media-toggle.is-overlay{position:absolute;right:16px;bottom:16px;z-index:4}
.media-toggle-icon{position:relative;width:11px;height:11px}
.media-toggle-icon::before,.media-toggle-icon::after{content:"";position:absolute;top:0;bottom:0;width:3px;border-radius:1px;background:currentColor;transition:clip-path 300ms var(--ease-out),width 300ms var(--ease-out)}
.media-toggle-icon::before{left:1px}.media-toggle-icon::after{right:1px}
.media-toggle[data-state=paused] .media-toggle-icon::before{width:11px;left:0;clip-path:polygon(0 0,100% 50%,0 100%)}
.media-toggle[data-state=paused] .media-toggle-icon::after{width:0}

/* Marquee (the single marquee on the page) */
.marquee{position:relative;overflow:hidden;padding-block:clamp(18px,2.4vw,32px);border-block:1px solid var(--line);user-select:none;background:var(--bg)}
.marquee-track{display:flex;width:max-content;animation:marquee 52s linear infinite}
.marquee-run{display:flex;align-items:center;gap:clamp(22px,2.4vw,40px);padding-right:clamp(22px,2.4vw,40px);font-size:clamp(34px,4.8vw,80px);font-weight:500;letter-spacing:-.055em;line-height:1;white-space:nowrap}
.is-outline{color:transparent;-webkit-text-stroke:1.2px color-mix(in srgb,var(--ink) 55%,transparent)}
.marquee-run img{width:auto;height:.5em;filter:drop-shadow(0 0 18px var(--glow))}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Section heads */
.section-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px 64px;align-items:end;margin-bottom:clamp(44px,5.4vw,88px)}
.section-head .lead{margin:0 0 .4em}
.section-head.is-center{grid-template-columns:1fr;text-align:center;justify-items:center}
.section-head.is-center .lead{margin-inline:auto}
.row-heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 24px;margin-bottom:clamp(32px,4vw,56px)}

/* Services: expanding deck */
.svc-deck{display:grid;grid-template-columns:3.4fr 1fr 1fr 1fr;gap:12px;height:clamp(540px,74vh,780px);transition:grid-template-columns 950ms var(--ease-drawer)}
.svc-deck:has(.svc:nth-child(2).is-active){grid-template-columns:1fr 3.4fr 1fr 1fr}
.svc-deck:has(.svc:nth-child(3).is-active){grid-template-columns:1fr 1fr 3.4fr 1fr}
.svc-deck:has(.svc:nth-child(4).is-active){grid-template-columns:1fr 1fr 1fr 3.4fr}
.svc{position:relative;min-width:0;border-radius:var(--r-outer);overflow:hidden;background:var(--surface);isolation:isolate;box-shadow:inset 0 0 0 1px var(--line)}
.svc-media{position:absolute;inset:0;z-index:-2}
.svc-media picture,.svc-media img{width:100%;height:100%}
.svc-media img{object-fit:cover;object-position:var(--focus,50% 60%);transform:scale(1.12);filter:saturate(.5) brightness(.5);transition:transform 1.4s var(--ease-out),filter 900ms var(--ease-out)}
.svc.is-active .svc-media img{transform:scale(1);filter:none}
.svc-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,6,7,.35),rgba(5,6,7,0) 30%,rgba(5,6,7,.25) 55%,rgba(5,6,7,.92));transition:opacity 600ms ease}
/* On phones the text covers most of the photo: a deeper shade keeps it legible over light photos. */
@media (max-width:700px){.svc-shade{background:linear-gradient(180deg,rgba(5,6,7,.6),rgba(5,6,7,.5) 35%,rgba(5,6,7,.62) 60%,rgba(5,6,7,.94))}}
.svc-trigger{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:22px;text-align:left;color:#fff;border-radius:inherit}
.svc-trigger:focus-visible{outline-offset:-4px}
.svc-index{font:500 12px/1 'Geist Mono',monospace;letter-spacing:.12em;color:rgba(255,255,255,.7)}
.svc-name{font-size:clamp(20px,1.7vw,26px);font-weight:500;letter-spacing:-.03em;line-height:1.1;writing-mode:vertical-rl;transform:rotate(180deg);transition:opacity 400ms ease}
.svc.is-active .svc-name{writing-mode:horizontal-tb;transform:none;font-size:14px;letter-spacing:.02em;opacity:.8}
.svc-plus{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:999px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);transition:transform 600ms var(--ease-spring),background-color 300ms ease}
.svc-plus::before,.svc-plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:#fff;translate:-50% -50%}
.svc-plus::after{transform:rotate(90deg)}
.svc.is-active .svc-plus{transform:rotate(45deg);background:var(--cyan);box-shadow:none}
.svc.is-active .svc-plus::before,.svc.is-active .svc-plus::after{background:var(--cyan-ink)}
.svc-body{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px 40px;align-items:end;padding:clamp(24px,3vw,44px);color:#fff;opacity:0;transform:translateY(30px);transition:opacity 500ms ease,transform 800ms var(--ease-out);pointer-events:none}
.svc.is-active .svc-body{opacity:1;transform:none;transition-delay:350ms;pointer-events:auto}
.svc-body h3{grid-row:span 3;font-size:clamp(32px,3.4vw,58px);font-weight:500;line-height:1;letter-spacing:-.05em;color:#fff;max-width:12ch}
.svc-body p{margin:0;font-size:16px;color:rgba(243,245,246,.82);max-width:42ch}
.svc-body .svc-detail{font-size:13px;color:rgba(243,245,246,.6)}
.svc-body .link-arrow{color:#fff}
.svc-body .link-icon{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
@media (hover:hover) and (pointer:fine){.svc:not(.is-active):hover .svc-media img{filter:saturate(.8) brightness(.72);transform:scale(1.06)}}

/* LUNARAY teaser */
.lunaray-teaser{padding-bottom:var(--section)}
.lunaray-card{display:block}
.lunaray-image{height:clamp(440px,60vw,820px);background:#04172e}
.lunaray-image picture,.lunaray-image img{width:100%;height:100%}
.lunaray-image img{object-fit:cover;object-position:center 62%}
.lunaray-copy{position:absolute;left:0;bottom:0;z-index:3;display:grid;justify-items:start;gap:14px;max-width:640px;padding:clamp(24px,4vw,56px);color:#fff}
.lunaray-copy::before{content:"";position:absolute;inset:-40% -60% 0 0;z-index:-1;background:radial-gradient(closest-side at 30% 70%,rgba(2,10,20,.85),transparent)}
.lunaray-copy .eyebrow{margin:0;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:#e6e9eb}
.lunaray-copy h2{color:#fff;font-size:clamp(44px,6vw,96px)}
.lunaray-copy p{margin:0;color:rgba(243,245,246,.82);font-size:var(--fs-lead)}
[data-zoom]{overflow:hidden}
[data-zoom] img{will-change:transform}

/* Projects */
.projects{position:relative;padding-top:var(--section);overflow:hidden}
.projects-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 48px;align-items:end;margin-bottom:clamp(36px,4vw,60px)}
.projects-viewport{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);cursor:grab}
.projects-viewport::-webkit-scrollbar{display:none}
.projects-viewport.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.projects-viewport.is-dragging a{pointer-events:none}
.projects-track{display:flex;align-items:flex-start;gap:clamp(14px,1.6vw,26px);width:max-content}
.project-card{width:clamp(270px,27vw,440px);scroll-snap-align:start}
.project-card.is-wide{width:clamp(320px,40vw,660px)}
.project-card .card-media{aspect-ratio:4/5}
.project-card.is-wide .card-media{aspect-ratio:4/3}
.project-more{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:24px;width:clamp(240px,22vw,340px);aspect-ratio:4/5;padding:28px;border-radius:var(--r-outer);background:linear-gradient(160deg,rgba(4,164,178,.28),rgba(4,164,178,.04) 60%),var(--surface);box-shadow:inset 0 0 0 1px var(--line-2);scroll-snap-align:start;font-size:clamp(20px,1.6vw,26px);font-weight:500;letter-spacing:-.03em;line-height:1.15;transition:transform 500ms var(--ease-out)}
.project-more-title{font-size:clamp(34px,3.2vw,52px);font-weight:500;letter-spacing:-.045em;line-height:1;color:var(--accent-text)}
.project-more-icon{align-self:flex-end;display:grid;place-items:center;width:52px;height:52px;border-radius:999px;background:var(--cyan);color:var(--cyan-ink);transition:transform 500ms var(--ease-spring)}
@media (hover:hover) and (pointer:fine){.project-more:hover .project-more-icon{transform:rotate(45deg) scale(1.08)}}
.projects-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:32px 0}
.projects-progress{position:relative;flex:1;max-width:560px;height:2px;border-radius:2px;background:var(--line-2);overflow:hidden}
.projects-progress span{position:absolute;inset:0;background:linear-gradient(90deg,var(--cyan),var(--cyan-2));transform:scaleX(var(--p,0));transform-origin:left}
.projects-controls{display:flex;gap:6px}
.projects-controls .icon-btn{box-shadow:inset 0 0 0 1px var(--line-2)}
.projects.is-pinned{padding-top:0;--card-h:clamp(250px,44svh,570px)}
.projects.is-pinned .projects-viewport{overflow:visible;scroll-snap-type:none;cursor:auto}
.projects.is-pinned .projects-controls{display:none}
.projects.is-pinned .projects-pin{height:100svh;min-height:680px;display:flex;flex-direction:column;justify-content:center;padding-block:calc(var(--nav-h) + 30px) 24px}
.projects.is-pinned .projects-head{margin-bottom:clamp(18px,3svh,40px)}
.projects.is-pinned .projects-head h2{font-size:clamp(40px,min(5vw,7.6svh),84px)}
.projects.is-pinned .eyebrow{margin-bottom:14px}
.projects.is-pinned .project-card{width:calc(var(--card-h)*.8)}
.projects.is-pinned .project-card.is-wide{width:calc(var(--card-h)*1.3333)}
.projects.is-pinned .project-more{width:calc(var(--card-h)*.64);height:var(--card-h);aspect-ratio:auto}
.projects.is-pinned .projects-foot{padding-top:clamp(14px,2.4svh,28px)}

/* Cards */
.album-card{display:block;min-width:0}
.card-media{aspect-ratio:4/3;background:var(--surface-2)}
.card-media picture,.card-media img{width:100%;height:100%}
.card-media img{object-fit:cover;object-position:50% 64%;transition:transform 1300ms var(--ease-out),filter 600ms ease}
.card-hover{position:absolute;left:14px;bottom:14px;z-index:4;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 8px 0 16px;border-radius:999px;background:rgba(5,6,7,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#fff;font-size:13px;opacity:0;transform:translateY(10px);transition:opacity 400ms ease,transform 600ms var(--ease-out)}
.card-hover .icon{width:16px;height:16px}
.card-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 6px 0}
.card-meta h3{font-size:19px;font-weight:500;letter-spacing:-.02em;line-height:1.3}
.card-meta p{font-size:13px;margin:4px 0 0}
.card-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);flex:none;transition:background-color 300ms ease,color 300ms ease,transform 500ms var(--ease-spring)}
.card-icon .icon{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){.album-card:hover .card-media img{transform:scale(1.06)}.album-card:hover .card-hover{opacity:1;transform:none}.album-card:hover .card-icon{background:var(--cyan);color:var(--cyan-ink);transform:rotate(45deg);box-shadow:none}}

/* Product spotlight */
.spotlight-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:48px clamp(40px,6vw,110px);align-items:center}
.spotlight-copy .lead{margin:28px 0 32px}
.maker-logos{display:flex;align-items:center;gap:14px;margin-bottom:36px}
.maker-logos a{display:grid;place-items:center;height:64px;padding:0 24px;border-radius:999px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow 300ms ease}
.maker-logos a:hover{box-shadow:inset 0 0 0 1px var(--cyan)}
.stek-logo{width:92px;height:auto;filter:brightness(0) invert(1)}
[data-theme=light] .stek-logo{filter:brightness(0)}
.gtechniq-logo{display:inline-block;font-size:24px;font-weight:600;letter-spacing:-.05em;line-height:1;color:var(--ink)}
.gtechniq-logo span{display:block;margin-top:4px;font-size:7.5px;font-weight:500;letter-spacing:.16em}
[data-tilt]{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform 700ms var(--ease-out);transform-style:preserve-3d}
[data-tilt].is-tilting{transition:transform 120ms linear}
.glare{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(520px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.22),transparent 45%);mix-blend-mode:soft-light;opacity:0;transition:opacity 500ms ease}
[data-tilt]:hover .glare{opacity:1}
.finish-stage{aspect-ratio:2/1;background:#05080a}
.finish-sample,.finish-sample img{width:100%;height:100%}
.finish-sample img{object-fit:contain;transition:opacity 500ms var(--ease-out),filter 500ms var(--ease-out),transform 800ms var(--ease-out)}
.finish-stage.is-changing .finish-sample img{opacity:0;filter:blur(12px);transform:scale(1.04)}
.finish-options{position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin-top:14px;padding:5px;border-radius:999px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line)}
.finish-options button{position:relative;z-index:1;height:46px;border-radius:999px;font-size:14px;color:var(--muted);transition:color 300ms ease}
.finish-options button[aria-pressed=true]{color:var(--cyan-ink)}
.finish-indicator{position:absolute;top:5px;bottom:5px;left:0;width:var(--w,33%);border-radius:999px;background:var(--cyan);box-shadow:0 8px 24px -10px var(--glow);transform:translateX(var(--x,5px));transition:transform 650ms var(--ease-drawer),width 650ms var(--ease-drawer)}
.finish-info{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:22px 8px 0}
.finish-name{margin:0 0 6px;font-size:clamp(26px,2.4vw,38px);font-weight:500;letter-spacing:-.04em;line-height:1.1;color:var(--ink)}
.finish-description{margin:0;font-size:14px}
.finish-info>div{transition:opacity 400ms var(--ease-out),transform 500ms var(--ease-out)}
.finish-explorer.is-changing .finish-info>div{opacity:0;transform:translateY(8px)}

/* Comparison */
.compare{margin:0}
.compare-stage{aspect-ratio:2752/1536;background:#05080a;touch-action:pan-y;user-select:none}
.compare-stage picture,.compare-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.compare-handle{position:absolute;top:0;bottom:0;left:var(--split);z-index:3;width:2px;translate:-1px 0;background:var(--cyan-2);box-shadow:0 0 18px var(--glow),0 0 2px #fff;pointer-events:none}
.compare-handle span{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:62px;height:62px;border-radius:999px;background:var(--cyan);color:var(--cyan-ink);box-shadow:0 0 0 8px rgba(4,164,178,.18),0 10px 30px -8px var(--glow);translate:-50% -50%;transition:transform 250ms var(--ease-spring)}
.compare-stage.is-active .compare-handle span{transform:scale(.9)}
.compare-tag{position:absolute;top:18px;z-index:3;padding:8px 14px;border-radius:999px;font:500 11px/1 'Geist Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(5,6,7,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);pointer-events:none}
.compare-tag.is-before{left:18px}.compare-tag.is-after{right:18px}
.compare-stage input{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.compare-stage:has(input:focus-visible){outline:2px solid var(--cyan-2);outline-offset:3px}
.compare-hint{display:flex;align-items:center;gap:10px;padding-top:22px;font-size:13px;color:var(--muted)}
.compare-hint .icon{width:18px;color:var(--accent-text)}

/* Water demonstration */
.water-demo{margin:0}
.water-stage{aspect-ratio:16/9;background:#05080a}
.water-stage video{width:100%;height:100%;object-fit:cover}
.water-labels{position:absolute;top:16px;left:16px;right:16px;z-index:3;display:flex;justify-content:space-between;gap:12px;pointer-events:none}
.water-labels span{padding:8px 14px;border-radius:999px;font:500 11px/1 'Geist Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(5,6,7,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);}
.water-labels span+span{box-shadow:inset 0 0 0 1px var(--cyan-2);color:var(--cyan-2)}
.water-explainer{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:stretch;padding-top:18px}
.water-card{display:grid;gap:10px;align-content:start;height:100%;padding:clamp(22px,2.4vw,32px)}
.water-card-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:999px;background:var(--glass-2);color:var(--ink);margin-bottom:6px}
.water-card.is-accent .water-card-icon{background:var(--cyan);color:var(--cyan-ink);box-shadow:0 0 24px -4px var(--glow)}
.water-card h3{font-size:19px}
.water-card p{margin:0;font-size:15px}
.water-link{display:flex;align-items:flex-end;padding:0 8px 8px 20px}

/* Kinetic type band */
.bike-feature{position:relative;padding-block:clamp(40px,5vw,90px) var(--section);background:linear-gradient(180deg,var(--bg),var(--bg-2) 30%,var(--bg))}
.bike-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px clamp(40px,6vw,110px);align-items:center;padding-top:clamp(24px,3vw,48px)}
.bike-visual .bezel-core{aspect-ratio:16/10}
.bike-visual picture,.bike-visual img{width:100%;height:100%}
/* Two real portrait photographs side by side (Bike Care feature on the home page). */
.bike-duo{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.bike-duo picture{min-height:0}
.bike-visual img{object-fit:cover}
.bike-grid .lead{margin:24px 0 32px}

/* Process */
.process-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px clamp(40px,7vw,120px);align-items:start}
.process-head{position:sticky;top:calc(var(--nav-h) + 60px)}
.process-head p{margin:28px 0 0;max-width:34ch;font-size:var(--fs-lead)}
.process-rail{position:relative;height:2px;border-radius:2px;background:var(--line-2);margin-top:44px;max-width:320px;overflow:hidden}
.process-rail span{position:absolute;inset:0;background:linear-gradient(90deg,var(--cyan),var(--cyan-2));transform:scaleX(0);transform-origin:left}
.process-list{display:grid;gap:12px}
.step-card{position:relative;display:grid;grid-template-columns:auto 1fr;gap:10px 22px;align-items:start;padding:clamp(22px,2.6vw,36px);border-radius:var(--r-outer);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow 600ms ease,background-color 600ms ease}
[data-theme=light] .step-card{background:var(--surface)}
.step-card>div{grid-column:2}
.process-index{grid-row:1;font:500 12px/1 'Geist Mono',monospace;letter-spacing:.1em;color:var(--muted);padding-top:14px;transition:color 500ms ease}
.step-icon{grid-row:1;grid-column:2;justify-self:end;display:grid;place-items:center;width:46px;height:46px;border-radius:999px;background:var(--glass-2);color:var(--ink);transition:background-color 500ms ease,color 500ms ease,box-shadow 500ms ease}
.step-card h3{font-size:clamp(26px,2.4vw,38px);font-weight:500;letter-spacing:-.04em;margin-bottom:10px}
.step-card p{margin:0;font-size:16px;max-width:44ch}
.process-list li.is-reached .step-card{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cyan) 55%,transparent),0 30px 60px -40px var(--glow)}
.process-list li.is-reached .process-index{color:var(--accent-text)}
.process-list li.is-reached .step-icon{background:var(--cyan);color:var(--cyan-ink);box-shadow:0 0 24px -6px var(--glow)}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px clamp(40px,7vw,120px);align-items:start}
.faq-head{position:sticky;top:calc(var(--nav-h) + 60px);display:grid;justify-items:start;gap:28px}
.faq-head .eyebrow{margin-bottom:0}
.faq{display:grid;gap:10px}
.faq details{position:relative;border-radius:var(--r-inner);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow 400ms ease}
[data-theme=light] .faq details{background:var(--surface)}
.faq details[open]{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cyan) 45%,transparent)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:78px;padding:20px 22px 20px 26px;cursor:pointer;list-style:none;font-size:18px;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq-icon{position:relative;flex:none;width:38px;height:38px;border-radius:999px;background:var(--glass-2);transition:transform 600ms var(--ease-spring),background-color 300ms ease}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:currentColor;translate:-50% -50%}
.faq-icon::after{transform:rotate(90deg)}
.faq details[open] .faq-icon{transform:rotate(45deg);background:var(--cyan);color:var(--cyan-ink)}
.faq-answer{overflow:hidden}
.faq-answer p{padding:0 70px 26px 26px;font-size:16px;max-width:62ch}

/* Contact */
.contact{overflow:clip}
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px clamp(40px,7vw,120px);align-items:start}
.contact-info .lead{margin:28px 0 40px}
.contact-details{display:grid;gap:10px;justify-items:start;font-size:16px}
.contact-details a{color:var(--ink)}
.contact-phone{font-size:clamp(30px,2.8vw,44px);font-weight:500;letter-spacing:-.04em;line-height:1.1}
.contact-details address{color:var(--muted);margin-top:10px}
.quote-form{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px;padding:clamp(22px,3vw,40px)}
.field{display:grid;gap:8px;align-content:start;min-width:0}
/* Grid items default to their min-content width: a select with a long option pushed the contact column past 360 px screens. */
.contact-grid>*,.quote-form>*{min-width:0}
.field select{min-width:0;max-width:100%;text-overflow:ellipsis}
.field.full,.quote-form .btn,.form-note,.form-result{grid-column:1/-1}
.field label{font-size:13px;font-weight:500;color:var(--ink-2)}
.field input,.field select,.field textarea{width:100%;min-height:54px;padding:14px 16px;border:0;border-radius:var(--r-field);background:var(--glass);box-shadow:inset 0 0 0 1px var(--line-2);font-size:16px;color:var(--ink);transition:box-shadow 300ms ease,background-color 300ms ease;-webkit-appearance:none;appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-repeat:no-repeat;background-position:calc(100% - 22px) 55%,calc(100% - 16px) 55%;background-size:6px 6px;padding-right:44px;cursor:pointer}
.field select option{background:var(--surface);color:var(--ink)}
.field textarea{min-height:120px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--cyan-2),0 0 0 4px rgba(4,164,178,.18)}
.field.has-error input{box-shadow:inset 0 0 0 1px var(--error),0 0 0 4px color-mix(in srgb,var(--error) 18%,transparent)}
.field-error{font-size:13px;color:var(--error)}
.field-error:empty{display:none}
.form-note{font-size:13px;margin:-4px 0 0}
.form-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.form-result{display:grid;gap:14px;justify-items:start;padding:22px;border-radius:var(--r-field);background:var(--glass);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cyan) 50%,transparent)}
.form-result p{margin:0;color:var(--ink);font-size:16px}
.form-result.is-in{animation:fade-up 600ms var(--ease-out) both}

/* Footer (always after dark) */
.site-footer{position:relative;overflow:clip;isolation:isolate;padding-block:clamp(90px,11vw,170px) 28px;background:#030404;color:#f3f5f6;--ink:#f3f5f6;--muted:#949ba1;--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.15);--glass:rgba(255,255,255,.045);--glass-2:rgba(255,255,255,.08);--accent-text:#3fd9e4}
.footer-cta{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:32px 64px;padding-bottom:clamp(60px,7vw,110px);border-bottom:1px solid var(--line)}
.footer-claim{margin:0;font-size:clamp(46px,6.4vw,112px);font-weight:500;line-height:.95;letter-spacing:-.058em;color:#fff}
.footer-actions{display:flex;flex-wrap:wrap;gap:12px}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px 64px;padding-block:56px}
.footer-brand p{max-width:34ch;font-size:15px}
.footer-brand address{font-size:14px;color:var(--muted)}
.footer-links,.footer-contact{display:grid;gap:12px;align-content:start;font-size:15px}
.footer-links a,.footer-contact a{width:fit-content;color:#f3f5f6;opacity:.85;transition:opacity 200ms ease,color 200ms ease}
.footer-social{display:inline-flex;align-items:center;gap:10px}
.footer-social .icon{width:18px;height:18px}
.footer-bike{display:grid;gap:12px;margin-top:8px;padding-top:18px;border-top:1px solid var(--line)}
.footer-bike-title{margin:0;font:500 11px/1.2 'Geist Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (hover:hover) and (pointer:fine){.footer-links a:hover,.footer-contact a:hover{opacity:1;color:var(--cyan-2)}}
.footer-mark{position:relative;padding-block:10px 36px}
.footer-logo{display:block;width:100%;height:auto;overflow:visible}
.footer-logo.is-dim{opacity:.1}
.footer-logo.is-lit{position:absolute;inset:10px 0 36px;height:auto;-webkit-mask-image:radial-gradient(360px circle at var(--mx,50%) var(--my,40%),#000,transparent 72%);mask-image:radial-gradient(360px circle at var(--mx,50%) var(--my,40%),#000,transparent 72%);opacity:.95;filter:drop-shadow(0 0 30px rgba(4,164,178,.45))}
.footer-legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.footer-legal p{margin:0;font-size:12px}

/* Inner pages */
.page-intro{position:relative;overflow:clip;isolation:isolate;padding-block:calc(var(--nav-h) + clamp(70px,9vw,140px)) clamp(44px,5vw,80px)}
.page-intro h1{max-width:18ch}
.page-intro .lead{margin-top:30px}
.breadcrumb{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(26px,3.4vw,44px);font-size:13px;color:var(--muted)}
.breadcrumb a{transition:color 200ms ease}
.breadcrumb a:hover{color:var(--ink)}
.count{margin:0 0 26px;font:500 12px/1 'Geist Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.catalog-toolbar,.gallery-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-bottom:24px;padding:10px;border-radius:26px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line)}
.filter-list,.view-switch{display:flex;flex-wrap:wrap;gap:6px}
.filter-button{height:42px;padding:0 18px;border-radius:999px;font-size:14px;color:var(--muted);box-shadow:inset 0 0 0 1px transparent;transition:color 250ms ease,background-color 300ms ease,box-shadow 300ms ease}
.filter-button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
@media (hover:hover) and (pointer:fine){.filter-button:not([aria-pressed=true]):hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}}
.search-field{position:relative;display:block;width:min(100%,320px)}
.search-field input{width:100%;height:46px;padding:0 18px 0 46px;border:0;border-radius:999px;background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--line);font-size:15px;color:var(--ink);-webkit-appearance:none;appearance:none;transition:box-shadow 300ms ease}
.search-field input:focus{outline:none;box-shadow:inset 0 0 0 1px var(--cyan-2),0 0 0 4px rgba(4,164,178,.16)}
.search-field input::placeholder{color:var(--muted);opacity:1}
.search-field .icon{position:absolute;left:16px;top:13px;width:20px;height:20px;color:var(--muted);pointer-events:none}
.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,4.4vw,72px) clamp(14px,1.6vw,26px)}
.product-card{display:block;min-width:0}
.product-art{position:relative;aspect-ratio:4/3;display:grid;place-items:center;background:var(--surface-2);overflow:hidden}
.product-art>picture,.product-art>picture img{width:100%;height:100%}
.product-art>picture img{object-fit:cover;transition:transform 1300ms var(--ease-out)}
.product-art.is-official{background:#05080a}
.product-art.is-official.is-contain>picture img{object-fit:contain}
.product-body{padding:20px 6px 0}
.product-meta{margin:0 0 8px;font:500 11px/1.4 'Geist Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.product-card h3{font-size:clamp(24px,2vw,30px);letter-spacing:-.035em;overflow-wrap:anywhere}
.product-card p:not(.product-meta){margin:12px 0 16px;font-size:15px;max-width:46ch}
@media (hover:hover) and (pointer:fine){.product-card:hover .product-art>picture img,.product-card:hover .product-card:hover .product-card:hover .link-icon{background:var(--cyan);color:var(--cyan-ink);transform:rotate(45deg);box-shadow:none}}
.load-more-row{display:flex;justify-content:center;padding-top:56px}
.load-more-row:has(>[hidden]){display:none}
.catalog-note{margin-top:56px}
.empty{display:grid;justify-items:center;gap:12px;padding:80px 0;text-align:center}
.product-hero{position:relative;overflow:clip;isolation:isolate;padding-block:calc(var(--nav-h) + 60px) var(--section)}
.product-detail{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px clamp(40px,6vw,110px);align-items:center}
.product-detail-art .product-art{aspect-ratio:1.1}
.product-detail h1{font-size:clamp(48px,6vw,100px);overflow-wrap:anywhere}
.product-detail .lead{margin:26px 0 22px}
.product-brand{margin-bottom:28px}
.product-brand .stek-logo{width:110px}
.spec-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.spec-pills span{padding:9px 14px;border-radius:999px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line-2);font:500 12px/1 'Geist Mono',monospace;letter-spacing:.06em;color:var(--ink-2)}
.product-explain-band{background:linear-gradient(180deg,var(--bg),var(--bg-2),var(--bg))}
.product-explain{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px clamp(40px,7vw,120px)}
.product-explain .lead{margin-top:28px}
.benefits{display:grid;gap:12px;margin-top:36px}
.benefits li{display:flex;gap:14px;align-items:center;font-size:16px;color:var(--ink)}
.benefit-check{display:grid;place-items:center;width:30px;height:30px;border-radius:999px;background:var(--cyan);color:var(--cyan-ink)}
.benefit-check .icon{width:16px;height:16px}
.product-steps{display:grid;gap:12px;align-content:start}
.step-panel{padding:clamp(22px,2.4vw,32px)}
.step-panel h3{font-size:21px;margin-bottom:10px}
.select-field{display:grid;gap:6px;font:500 11px/1 'Geist Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-width:210px}
.select-field select{height:46px;padding:0 44px 0 18px;border:0;border-radius:999px;background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--line);background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-repeat:no-repeat;background-position:calc(100% - 22px) 55%,calc(100% - 16px) 55%;background-size:6px 6px;font:400 15px Geist,system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--ink);-webkit-appearance:none;appearance:none;cursor:pointer}
.select-field select option{background:var(--surface);color:var(--ink)}
.select-field select:focus{outline:none;box-shadow:inset 0 0 0 1px var(--cyan-2)}

/* Gallery */
.gallery-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px}
.album-context{margin:0 0 32px}
.album-context h2{font-size:clamp(34px,3.4vw,54px)}
.album-context p{margin-top:12px}
.albums-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(38px,4vw,64px) clamp(14px,1.6vw,26px)}
.photos-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,.9vw,14px)}
.photo-button{position:relative;display:block;width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:18px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.photo-button img,.photo-button video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1100ms var(--ease-out)}
.photo-button video{opacity:0;transition:opacity 500ms ease}
.photo-button video.is-playing{opacity:1}
.video-badge{position:absolute;left:10px;bottom:10px;display:grid;place-items:center;width:34px;height:34px;border-radius:999px;background:rgba(5,6,7,.55);color:#fff;}
.video-badge .icon{width:14px;height:14px}
@media (hover:hover) and (pointer:fine){.photo-button:hover img{transform:scale(1.06)}}
.photos-grid .is-entering{animation:tile-in 700ms var(--ease-out) both;animation-delay:calc(var(--i,0)*35ms)}
@keyframes tile-in{from{opacity:0;transform:translateY(18px) scale(.98)}}
.viewer{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:rgba(5,6,7,.96);color:#f3f5f6}
.viewer[open]{display:grid;grid-template-rows:auto 1fr auto;animation:viewer-in 380ms var(--ease-out)}
.viewer::backdrop{background:rgba(5,6,7,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
@keyframes viewer-in{from{opacity:0;transform:scale(.985)}}
.viewer .icon-btn{color:#f3f5f6;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.viewer-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px var(--gutter)}
.viewer-header h2{font-size:18px;font-weight:500;letter-spacing:-.01em;color:#fff}
.viewer-header p{margin:2px 0 0;font-size:12px;color:#949ba1}
.viewer-stage{position:relative;min-height:0;display:grid;place-items:center;overflow:auto;padding-inline:var(--gutter)}
.viewer-stage picture{display:block;width:100%;height:100%;min-height:0}
.viewer-stage img,.viewer-stage video{width:100%;height:100%;object-fit:contain;border-radius:14px;animation:media-in 500ms var(--ease-out)}
@keyframes media-in{from{opacity:0}}
.viewer-stage img{cursor:zoom-in}
.viewer-stage.zoomed{display:block}
.viewer-stage.zoomed picture{width:auto;height:auto}
.viewer-stage.zoomed img{width:auto;height:auto;max-width:none;border-radius:0;cursor:zoom-out}
.viewer-loading{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:#949ba1;pointer-events:none}
.viewer-nav{display:flex;justify-content:center;align-items:center;gap:24px;padding:12px}
.viewer-counter{min-width:90px;text-align:center;font:500 12px/1 'Geist Mono',monospace;letter-spacing:.08em;color:#949ba1;font-variant-numeric:tabular-nums}

/* LUNARAY page */
.lunaray-intro .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:0 64px;align-items:end}
.lunaray-intro .breadcrumb,.lunaray-intro .eyebrow,.lunaray-intro h1{grid-column:1}
.lunaray-intro .eyebrow{justify-self:start}
.lunaray-intro-side{grid-column:2;grid-row:3;padding-bottom:10px}
.lunaray-intro-side .lead{margin-bottom:14px}
.lunaray-hero,.lunaray-pet-image{margin:0}
.lunaray-hero .bezel-core,.lunaray-pet-image .bezel-core{background:#04172e}
.lunaray-hero img,.lunaray-pet-image img{width:100%;height:auto;max-height:880px;object-fit:cover}
.split-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px clamp(40px,7vw,120px);align-items:start}
.split-copy .lead{margin-bottom:24px}
.benefit-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:14px}
.benefit-tabs button{position:relative;display:grid;justify-items:center;gap:14px;min-height:140px;padding:22px 10px;border-radius:var(--r-inner);background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;color:var(--muted);transition:color 300ms ease,box-shadow 300ms ease,background-color 300ms ease}
.benefit-tabs button img{width:44px;height:44px;object-fit:contain;filter:brightness(0) invert(1);opacity:.5;transition:opacity 300ms ease,transform 500ms var(--ease-spring)}
[data-theme=light] .benefit-tabs button img{filter:brightness(0)}
.benefit-tabs button[aria-selected=true]{color:var(--ink);background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--cyan-2),0 20px 40px -30px var(--glow)}
.benefit-tabs button[aria-selected=true] img{opacity:1;transform:translateY(-3px) scale(1.06)}
.benefit-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px clamp(40px,6vw,100px);align-items:center;padding:clamp(24px,4vw,56px)}
.benefit-image img{width:100%;height:auto}
.benefit-panels [role=tabpanel]{min-height:170px}
.benefit-panels [role=tabpanel]:not([hidden]){animation:panel-in 650ms var(--ease-out)}
@keyframes panel-in{from{opacity:0;transform:translateY(14px);filter:blur(6px)}}
.benefit-count{display:block;margin-bottom:16px;font:500 12px/1 'Geist Mono',monospace;letter-spacing:.12em;color:var(--accent-text)}
.benefit-panels h3{font-size:clamp(32px,3vw,50px);font-weight:500;letter-spacing:-.045em;margin-bottom:16px}
.benefit-panels p{font-size:var(--fs-lead);max-width:36ch}
.lunaray-pet{padding-bottom:0}
.lunaray-consult .note{margin-bottom:28px}

/* Bike page */
.bike-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px clamp(40px,7vw,120px);align-items:end}
.bike-intro .lead{margin-bottom:32px}
.bike-services{padding-top:0}
.duo-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.duo-card{display:grid;gap:18px;align-content:start;height:100%;padding:clamp(28px,4vw,60px)}
.duo-card h2{font-size:clamp(38px,3.6vw,60px)}
.duo-brand{min-height:40px;display:flex;align-items:center}

/* Error and privacy */
.error-page{min-height:100svh;display:grid;align-content:center}
.error-code{margin:0 0 10px;font-size:clamp(100px,18vw,280px);font-weight:500;letter-spacing:-.07em;line-height:.85;color:transparent;-webkit-text-stroke:1.5px var(--line-2)}
.error-page .button-row{margin-top:40px}
.privacy-copy{max-width:860px;padding-bottom:var(--section)}
.privacy-copy h2{font-size:clamp(28px,2.6vw,40px);letter-spacing:-.035em;margin:56px 0 18px}
.privacy-copy h2:first-child{margin-top:0}
.privacy-copy p{font-size:17px;line-height:1.7}
.privacy-copy a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* Motion initial states: only while motion.js is expected; removed by a fail-safe. */
html.motion [data-split],html.motion:not(.intro):not(.arriving) [data-hero-title]{visibility:hidden}
html.motion [data-reveal]{opacity:0;transform:translateY(34px)}
html.motion [data-hero-side]{opacity:0}
html.motion .hero .eyebrow{opacity:0}
html.motion [data-media-reveal]{clip-path:inset(100% 0 0 0 round var(--r-outer))}
.split-line{display:block}
.split-line-mask{padding-bottom:.14em;margin-bottom:-.14em}

/* Responsive */
@media (max-width:1180px){
 .nav{gap:0}
 .nav-link{padding:10px 10px;font-size:13px}
 .nav-pill{gap:14px}
}
@media (max-width:1000px){
 :root{--nav-h:60px}
 .nav,.theme-toggle{display:none}
 .menu-toggle{display:inline-grid}
 .nav-pill{width:100%;justify-content:space-between;padding:0 6px 0 16px}
 .brand{width:84px;height:40px}
 .section-head,.spotlight-grid,.process-grid,.faq-grid,.contact-grid,.product-detail,.product-explain,.split-copy,.bike-intro,.benefit-content,.bike-grid,.projects-head{grid-template-columns:1fr}
 .lunaray-intro .wrap{grid-template-columns:1fr}
 .lunaray-intro-side{grid-column:1;grid-row:auto;padding-top:20px}
 .process-head,.faq-head{position:static}
 .svc-deck{grid-template-columns:1fr;grid-template-rows:460px 88px 88px 88px;height:auto;transition:grid-template-rows 850ms var(--ease-drawer)}
 .svc-deck:has(.svc:nth-child(2).is-active){grid-template-columns:1fr;grid-template-rows:88px 460px 88px 88px}
 .svc-deck:has(.svc:nth-child(3).is-active){grid-template-columns:1fr;grid-template-rows:88px 88px 460px 88px}
 .svc-deck:has(.svc:nth-child(4).is-active){grid-template-columns:1fr;grid-template-rows:88px 88px 88px 460px}
 .svc{border-radius:var(--r-inner)}
 .svc-trigger{flex-direction:row;justify-content:flex-start;align-items:flex-start;gap:14px;padding:22px 70px 22px 20px}
 .svc-index{padding-top:6px}
 .svc-name,.svc.is-active .svc-name{writing-mode:horizontal-tb;transform:none;font-size:20px}
 .svc.is-active .svc-name{font-size:14px}
 .svc-plus{top:24px;transform:translateY(0)}
 .svc-body{grid-template-columns:1fr;gap:12px;padding:22px}
 .svc-body h3{grid-row:auto;font-size:32px}
 .catalog-grid,.albums-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .photos-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .benefit-tabs{grid-template-columns:repeat(3,1fr)}
 .footer-grid{grid-template-columns:1fr 1fr}
 .footer-brand{grid-column:1/-1}
 .water-explainer{grid-template-columns:1fr 1fr}
 .water-link{grid-column:1/-1;padding:10px 4px 0}
}
@media (max-width:700px){
 :root{--section:clamp(76px,19vw,110px)}
 .hero{min-height:100svh}
 .hero-title{font-size:clamp(50px,14.5vw,76px)}
 .hero-row{margin-top:24px}
 .hero-cta{width:100%}
 .hero-cta .btn{flex:1;justify-content:space-between}
 .hero-meta{font-size:12px}
 .btn{height:52px}
 .nav-actions .btn-sm{height:40px;padding:0 4px 0 14px;font-size:13px}
 .nav-actions .btn-sm .btn-icon{width:32px;height:32px}
 .marquee-run{font-size:clamp(32px,9.5vw,46px)}
 .project-card{width:78vw}
 .project-card.is-wide{width:86vw}
 .project-more{width:64vw}
 .projects-foot{flex-wrap:wrap}
 .projects-foot .link-arrow{width:100%}
 .compare-stage{aspect-ratio:1/1}
 .compare-tag{top:12px;font-size:10px;padding:6px 10px}
 .compare-tag.is-before{left:12px}.compare-tag.is-after{right:12px}
 .compare-handle span{width:50px;height:50px}
 .water-labels{top:auto;bottom:10px;left:10px;right:10px}
 .media-toggle.is-overlay{top:10px;bottom:auto;right:10px;height:34px;padding:0 12px;font-size:12px}
 .water-labels span{font-size:9.5px;padding:6px 9px}
 .water-explainer{grid-template-columns:1fr}
 .step-card{grid-template-columns:1fr;gap:12px}
 .step-card>div,.step-icon{grid-column:1}
 .step-icon{grid-row:1;justify-self:end;margin-top:-4px}
 .process-index{grid-row:1;padding-top:14px}
 .faq summary{font-size:16px;min-height:70px;padding:16px 16px 16px 20px}
 .faq-answer p{padding:0 20px 22px}
 .quote-form{grid-template-columns:1fr}
 .catalog-grid,.albums-grid{grid-template-columns:1fr}
 .photos-grid{grid-template-columns:1fr 1fr}
 .catalog-toolbar,.gallery-bar{border-radius:22px;align-items:stretch;flex-direction:column}
 .gallery-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:10px}
 .gallery-toolbar .search-field{grid-column:1/-1}
 .search-field{width:100%}
 .select-field{min-width:0}
 .benefit-tabs button{min-height:118px;font-size:12px;padding:16px 4px;gap:10px}
 .benefit-tabs button img{width:36px;height:36px}
 .duo-grid{grid-template-columns:1fr}
 .footer-grid{grid-template-columns:1fr}
 .footer-cta{align-items:flex-start;flex-direction:column}
 .footer-legal{flex-direction:column}
 .lunaray-image{height:auto;aspect-ratio:4/5}
 .lunaray-image img{object-position:64% center}
 :root{--r-outer:24px;--r-inner:18px}
}

/* Reduced motion: keep feedback, remove travel and ambient loops. */
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 .marquee-track,.grain,.ambient,.intro-glow,.footer-glow,.contact-glow{animation:none}
}

/* Floating WhatsApp shortcut */
.wa-fab{position:fixed;right:calc(18px + env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));z-index:85;display:flex;align-items:center;gap:0;padding:5px;border-radius:999px;background:rgba(12,14,15,.9);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 18px 40px -14px rgba(0,0,0,.7);color:#f3f5f6;text-decoration:none;transition:transform 450ms var(--ease-out),opacity 300ms var(--ease-out),gap 450ms var(--ease-out)}
.wa-fab-icon{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:999px;background:#25d366;color:#fff;box-shadow:0 8px 24px -6px rgba(37,211,102,.55)}
.wa-fab-icon::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid rgba(37,211,102,.7);opacity:0;animation:wa-ping 2.8s var(--ease-out) 2.5s infinite}
.wa-glyph{width:28px;height:28px}
.wa-fab-label{max-width:0;overflow:hidden;white-space:nowrap;font:500 12px/1 'Geist Mono',monospace;letter-spacing:.12em;text-transform:uppercase;opacity:0;transition:max-width 450ms var(--ease-out),opacity 300ms var(--ease-out),padding 450ms var(--ease-out)}
.wa-fab:active{transform:scale(.96)}
.wa-fab:focus-visible{outline:2px solid #25d366;outline-offset:3px}
@media (hover:hover) and (pointer:fine){.wa-fab:hover{gap:10px}.wa-fab:hover .wa-fab-label{max-width:140px;opacity:1;padding-left:14px}.wa-fab:hover .wa-fab-icon{transform:rotate(-8deg)}.wa-fab-icon{transition:transform 450ms var(--ease-spring)}}
@keyframes wa-ping{0%{transform:scale(1);opacity:.8}70%,100%{transform:scale(1.55);opacity:0}}
@media (max-width:700px){.wa-fab{padding:4px}.wa-fab-icon{width:50px;height:50px}}
@media (prefers-reduced-motion:reduce){.wa-fab-icon::after{animation:none}.wa-fab,.wa-fab-label,.wa-fab-icon{transition:none}}


.spec-pills .is-finish{background:var(--cyan);color:var(--cyan-ink);box-shadow:none}

.product-body>p:not(.product-meta){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}

/* Bottom-right dock: support assistant + WhatsApp */
.dock{position:fixed;right:calc(18px + env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));z-index:85;display:flex;align-items:center;gap:10px;pointer-events:none}
.dock>*{pointer-events:auto}
.dock .wa-fab{position:relative;inset:auto}
.dock>.assist-fab,.dock>.wa-fab{transition:transform 450ms var(--ease-out),opacity 300ms var(--ease-out)}
html.intro .dock>*,html.arriving .dock>*,body:has(.mobile-menu:not([hidden])) .dock>*,body:has(dialog[open]) .dock>*{opacity:0;pointer-events:none;transform:translateY(12px) scale(.9)}
.assist-fab{display:flex;align-items:center;padding:5px;border-radius:999px;background:rgba(12,14,15,.9);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 18px 40px -14px rgba(0,0,0,.7);color:#f3f5f6;cursor:pointer}
.assist-fab[hidden]{display:none}
.assist-fab-icon{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:999px;background:linear-gradient(150deg,#34d5e1,#04a4b2 70%);color:#021417;box-shadow:0 8px 24px -6px rgba(4,164,178,.6);transition:transform 450ms var(--ease-spring)}
.assist-fab-icon .icon{width:27px;height:27px;stroke-width:1.7}
.assist-fab-label{max-width:0;overflow:hidden;white-space:nowrap;font:500 12px/1 'Geist Mono',monospace;letter-spacing:.12em;text-transform:uppercase;opacity:0;transition:max-width 450ms var(--ease-out),opacity 300ms var(--ease-out),padding 450ms var(--ease-out)}
.assist-fab[aria-expanded=true] .assist-fab-icon{transform:rotate(-8deg) scale(.94);box-shadow:0 0 0 3px rgba(52,213,225,.28),0 8px 24px -6px rgba(4,164,178,.6)}
.assist-fab:active{transform:scale(.96)}
.assist-fab:focus-visible{outline:2px solid var(--cyan-2);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.assist-fab:hover .assist-fab-label{max-width:140px;opacity:1;padding:0 12px 0 14px}.assist-fab:hover .assist-fab-icon{transform:rotate(-8deg)}}
.assist-teaser{position:absolute;right:0;bottom:calc(100% + 12px);display:flex;align-items:center;gap:2px;padding:4px 4px 4px 14px;border-radius:16px 16px 4px 16px;background:rgba(10,12,13,.86);box-shadow:inset 0 0 0 1px rgba(52,213,225,.35),0 20px 40px -16px rgba(0,0,0,.8);color:#f3f5f6;opacity:0;transform:translateY(8px) scale(.96);transform-origin:bottom right;transition:opacity 300ms var(--ease-out),transform 450ms var(--ease-drawer);white-space:nowrap}
.assist-teaser.is-visible{opacity:1;transform:none}
.assist-teaser[hidden]{display:none}
.assist-teaser-text{padding:6px 0;font-size:13.5px;color:inherit}
.assist-teaser-close{display:grid;place-items:center;width:32px;height:32px;border-radius:999px;color:rgba(243,245,246,.7)}
.assist-teaser-close .icon{width:16px;height:16px}

/* Assistant panel */
.assistant{--assist-bg:rgba(10,12,13,.9);position:fixed;right:calc(18px + env(safe-area-inset-right));bottom:calc(92px + env(safe-area-inset-bottom));z-index:86;display:flex;width:min(410px,calc(100vw - 36px));height:min(650px,max(380px,calc(100dvh - 92px - var(--nav-h) - 44px)));opacity:0;transform:translateY(18px) scale(.97);transform-origin:bottom right;transition:opacity 260ms var(--ease-out),transform 480ms var(--ease-drawer);pointer-events:none}
[data-theme=light] .assistant{--assist-bg:rgba(255,255,255,.93)}
.assistant[hidden]{display:none}
.assistant.is-open{opacity:1;transform:none;pointer-events:auto}
.assistant-shell{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0;border-radius:26px;background:var(--assist-bg);-webkit-backdrop-filter:blur(24px) saturate(1.2);backdrop-filter:blur(24px) saturate(1.2);box-shadow:inset 0 0 0 1px var(--line-2),inset 0 1px 0 rgba(255,255,255,.08),0 44px 90px -30px rgba(0,0,0,.75);overflow:hidden;color:var(--ink)}
.assistant-head{display:flex;align-items:center;gap:12px;padding:14px 10px 14px 16px;border-bottom:1px solid var(--line)}
.assistant-avatar{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:999px;background:#0a0c0d;box-shadow:inset 0 0 0 1px rgba(4,164,178,.5),0 0 22px -6px rgba(4,164,178,.7)}
.assistant-avatar img{width:22px;height:auto}
.assistant-heading{flex:1;min-width:0}
.assistant-heading h2{font-size:16px;line-height:1.2;letter-spacing:-.015em}
.assistant-tools{display:flex;gap:2px}
.assistant-tools .icon-btn{width:38px;height:38px;box-shadow:none;color:var(--muted);transition:color 200ms ease,background-color 200ms ease,transform 160ms var(--ease-out)}
.assistant-tools .icon-btn:hover{color:var(--ink);background:var(--glass-2)}
.assistant-tools .icon-btn:active{transform:scale(.92)}
.assistant-tools .icon{width:19px;height:19px}
.assistant-log{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:18px 14px 10px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.assistant-log:focus-visible{outline:2px solid var(--cyan-2);outline-offset:-4px}
.msg{max-width:88%;padding:11px 14px;border-radius:18px;font-size:14.5px;line-height:1.55;overflow-wrap:anywhere;animation:msg-in 380ms var(--ease-out) both}
.msg p{margin:0 0 .55em;color:inherit}
.msg p:last-child{margin-bottom:0}
.msg ul,.msg ol{margin:.15em 0 .55em;padding-left:1.15em}
.msg li+li{margin-top:.25em}
.msg strong{font-weight:600;color:inherit}
.msg a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
.msg.is-user{align-self:flex-end;background:var(--cyan);color:var(--cyan-ink);border-bottom-right-radius:6px}
.msg.is-model{align-self:flex-start;background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);border-bottom-left-radius:6px}
.msg.is-error{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--error) 45%,transparent)}
.msg-action{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:8px 14px 8px 11px;border-radius:999px;background:#25d366;color:#04200f!important;font-size:13px;font-weight:500;text-decoration:none!important;transition:transform 160ms var(--ease-out),filter 200ms ease}
.msg-action:hover{filter:brightness(1.06)}
.msg-action:active{transform:scale(.96)}
.msg-action .icon{width:16px;height:16px;stroke-width:1.8}
.msg.is-followup{padding-block:9px;font-size:14px;color:var(--muted)}
.assistant-chips .is-human{display:inline-flex;align-items:center;gap:7px;background:rgba(37,211,102,.12);box-shadow:inset 0 0 0 1px rgba(37,211,102,.45);color:var(--ink)}
.assistant-chips .is-human:hover{background:rgba(37,211,102,.2);box-shadow:inset 0 0 0 1px rgba(37,211,102,.7)}
.assistant-chips .is-human .icon{width:16px;height:16px;color:#25d366}
.typing{display:inline-flex;gap:4px;padding:4px 0}
.typing i{width:6px;height:6px;border-radius:999px;background:var(--muted);animation:typing 1.1s var(--ease-in-out) infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@keyframes msg-in{from{opacity:0;transform:translateY(8px)}}
.assistant-chips{display:flex;flex-wrap:wrap;gap:7px;padding:2px 14px 12px}
.assistant-chips[hidden]{display:none}
.assistant-chips button{flex:none;padding:7px 12px;border-radius:999px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line-2);font-size:13px;color:var(--ink-2);white-space:nowrap;transition:background-color 200ms ease,box-shadow 200ms ease,transform 160ms var(--ease-out)}
.assistant-chips button:hover{background:var(--glass-2);box-shadow:inset 0 0 0 1px rgba(52,213,225,.5)}
.assistant-chips button:active{transform:scale(.96)}
.assistant-form{display:flex;align-items:flex-end;gap:8px;margin:0 12px 12px;padding:5px 5px 5px 16px;border-radius:22px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow 200ms ease}
.assistant-form:focus-within{box-shadow:inset 0 0 0 1px var(--cyan-2),0 0 0 4px rgba(4,164,178,.14)}
.assistant-form textarea{flex:1;min-width:0;max-height:132px;padding:9px 0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:15px;line-height:1.45;resize:none;outline:none}
.assistant-form textarea::placeholder{color:var(--muted)}
.assistant-send{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:999px;background:var(--cyan);color:var(--cyan-ink);transition:transform 160ms var(--ease-out),opacity 200ms ease}
.assistant-send:disabled{opacity:.4;cursor:default}
.assistant-send:not(:disabled):active{transform:scale(.92)}
.assistant-send .icon{width:20px;height:20px;stroke-width:2}
@media (max-width:700px){
 .dock{right:calc(14px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom))}
 .assist-fab{padding:4px}.assist-fab-icon{width:50px;height:50px}
 .assistant{inset:0;z-index:92;width:auto;height:100dvh;transform:translateY(28px);transform-origin:bottom center}
 .assistant-shell{border-radius:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
 .assistant-form textarea{font-size:16px}
 html.assistant-open,html.assistant-open body{overflow:hidden}
 html.assistant-open .dock{opacity:0;pointer-events:none}
}
@media (prefers-reduced-motion:reduce){.assistant,.assist-teaser,.assist-fab-icon,.dock>*{transition:none}.msg{animation:none}.typing i{animation:none;opacity:.7}}

/* Keep the hero video control clear of the bottom-right dock */
.hero-meta{padding-right:max(var(--gutter),168px)}
@media (max-width:700px){.hero-meta{flex-direction:column;align-items:flex-start;gap:10px;padding-right:136px}}

/* Bike Care direct line */
.bike-line{padding-top:0}
.bike-line-card{display:grid;grid-template-columns:minmax(0,1.5fr) auto;gap:28px 56px;align-items:end;padding:clamp(28px,4vw,60px)}
.bike-line-card h2{margin:16px 0 18px;font-size:clamp(34px,4.2vw,64px);line-height:1;letter-spacing:-.045em}
.bike-line-card .lead{max-width:56ch;margin:0}
.bike-line-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.bike-line-phone{display:inline-flex;align-items:center;gap:10px;font:500 14px/1 'Geist Mono',monospace;letter-spacing:.06em;color:var(--ink-2);text-decoration:none}
.bike-line-phone .icon{width:18px;height:18px;color:var(--accent-text)}
.bike-line-phone:hover{color:var(--ink)}
@media (max-width:800px){.bike-line-card{grid-template-columns:1fr;align-items:start}}

/* Contact: Bike Care line */
.contact-bike{display:grid;gap:6px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.contact-bike-label{font:500 11px/1.3 'Geist Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.contact-bike a{display:inline-flex;align-items:center;gap:10px;font-size:clamp(20px,1.7vw,26px);font-weight:500;letter-spacing:-.03em;color:var(--ink);text-decoration:none;transition:color 200ms ease}
.contact-bike a .icon{width:22px;height:22px;color:#25d366}
.contact-bike a:hover{color:var(--accent-text)}

/* Announcement pill: under the navigation, only near the top of the page; dismissal remembered (theme.js). */
.announce{position:fixed;top:calc(14px + var(--nav-h) + 10px);left:50%;z-index:87;display:none;align-items:center;gap:2px;max-width:calc(100% - 28px);padding:4px;border-radius:999px;background:rgba(10,12,13,.62);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 16px 40px -20px rgba(0,0,0,.6);color:#f3f5f6;font-size:13px;line-height:1.3;transform:translateX(-50%);transition:opacity 400ms var(--ease-out),transform 500ms var(--ease-out),visibility 0s}
.has-announce .announce{display:flex}
.announce.is-away{opacity:0;visibility:hidden;transform:translate(-50%,-10px);transition:opacity 300ms var(--ease-out),transform 400ms var(--ease-out),visibility 0s linear 400ms}
[data-theme=light] body:not([data-page=home]) .announce{background:rgba(255,255,255,.78);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2),0 16px 40px -24px rgba(11,14,15,.35)}
.announce-link{display:flex;align-items:center;gap:10px;min-height:32px;min-width:0;padding:0 6px 0 10px;border-radius:999px;color:inherit}
.announce-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--cyan-2);box-shadow:0 0 0 4px rgba(52,213,225,.18)}
.announce-long,.announce-short{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.announce-short{display:none}
.announce-cta{display:inline-flex;align-items:center;gap:4px;font-weight:500;color:var(--cyan-2);white-space:nowrap}
[data-theme=light] body:not([data-page=home]) .announce-cta{color:var(--accent-text)}
.announce-cta .icon{width:15px;height:15px;transition:transform 250ms var(--ease-out)}
.announce-close{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:inherit;opacity:.7;transition:opacity 200ms ease,background-color 200ms ease}
.announce-close .icon{width:16px;height:16px}
@media (hover:hover){.announce-link:hover .announce-cta .icon{transform:translateX(3px)}.announce-close:hover{opacity:1;background:rgba(127,127,127,.16)}}
@media (max-width:640px){.announce-long,.announce-cta-text{display:none}.announce-short{display:inline}}
/* Inner pages leave room under the navigation while the pill is shown. */
.has-announce:has(.announce) .page-intro{padding-top:calc(var(--nav-h) + clamp(110px,11vw,170px))}
.has-announce:has(.announce) .product-hero{padding-top:calc(var(--nav-h) + 104px)}

/* Back to top, with a ring that fills as the page scrolls (bottom left, clear of the contact dock). */
.to-top{position:fixed;left:calc(18px + env(safe-area-inset-left));bottom:calc(18px + env(safe-area-inset-bottom));z-index:84;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(12,14,15,.84);color:#f3f5f6;box-shadow:0 18px 40px -16px rgba(0,0,0,.7);opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);transition:opacity 300ms var(--ease-out),transform 450ms var(--ease-out),visibility 0s linear 450ms}
.to-top.is-visible{opacity:1;visibility:visible;transform:none;transition:opacity 300ms var(--ease-out),transform 450ms var(--ease-out),visibility 0s}
.to-top>.icon{position:relative;width:20px;height:20px;transition:transform 250ms var(--ease-out)}
.to-top-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.to-top-ring circle{fill:none;stroke-width:2;stroke:rgba(255,255,255,.14)}
.to-top-ring .to-top-progress{stroke:var(--cyan-2);stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--p,0))}
@media (hover:hover){.to-top:hover>.icon{transform:translateY(-3px)}}
.to-top:active{transform:scale(.94)}

/* Toast for short confirmations (copied, link shared). */
.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));z-index:97;max-width:calc(100% - 32px);padding:11px 18px;border-radius:999px;background:rgba(12,14,15,.94);color:#f3f5f6;font-size:14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 18px 40px -16px rgba(0,0,0,.7);opacity:0;transform:translate(-50%,10px);pointer-events:none;transition:opacity 250ms var(--ease-out),transform 350ms var(--ease-out)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* Contact: copy buttons and directions (Google Maps and Waze). */
.copy-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.contact-details .copy-row:has(address){margin-top:10px}
.contact-details .copy-row address{flex:0 1 auto;min-width:0;margin-top:0}
.copy-row{max-width:100%}
.copy-row>a{min-width:0;overflow-wrap:anywhere}
.copy-btn{flex:none;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-2);transition:color 200ms ease,background-color 200ms ease,box-shadow 200ms ease,transform 160ms var(--ease-out)}
.copy-btn .icon{width:17px;height:17px}
@media (hover:hover){.copy-btn:hover{color:var(--ink);background:var(--glass-2)}}
.copy-btn:active{transform:scale(.92)}
.copy-btn.is-done{color:var(--accent-text);box-shadow:inset 0 0 0 1px var(--cyan)}
.directions{display:flex;flex-wrap:wrap;gap:0 24px}
.hours{display:grid;gap:6px;margin:8px 0 0;font-size:15px}
.hours div{display:flex;justify-content:space-between;gap:20px;min-width:min(100%,320px)}
.hours dt{color:var(--muted)}
.hours dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums}

/* iPhone zooms into any field under 16 px when it gets focus: catalogue and gallery filters stay at 16 px on touch screens. */
@media (pointer:coarse){.search-field input,.select-field select{font-size:16px}}

/* Mobile menu: theme switch (the navigation hides the theme button below 1000 px). */
.menu-theme{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#f3f5f6;font-size:15px}
.menu-theme .icon{width:19px;height:19px}

/* Site search (dialog in the top layer; full screen on phones). */
.site-search{width:min(680px,calc(100% - 32px));max-width:none;max-height:min(640px,calc(100dvh - 120px));margin:clamp(64px,12vh,120px) auto auto;padding:0;border:0;border-radius:var(--r-outer);background:transparent;color:var(--ink);overflow:visible}
.site-search[open]{display:flex;animation:dialog-in 300ms var(--ease-out)}
.site-search::backdrop,.confirm::backdrop{background:rgba(5,6,7,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.site-search-shell{display:flex;flex-direction:column;width:100%;max-height:inherit;border-radius:inherit;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2),0 40px 90px -30px rgba(0,0,0,.7);overflow:hidden}
.site-search-field{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 20px;border-bottom:1px solid var(--line)}
.site-search-glyph .icon{width:20px;height:20px;color:var(--muted)}
.site-search-field input{flex:1;min-width:0;height:48px;border:0;background:transparent;font-size:18px;color:var(--ink);outline:none;-webkit-appearance:none;appearance:none}
.site-search-field input::placeholder{color:var(--muted);opacity:1}
.site-search-field input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.site-search-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:10px}
.site-search-results{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.site-search-results a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 16px;padding:12px 14px;border-radius:16px;transition:background-color 150ms ease}
.site-search-title{font-weight:500;color:var(--ink)}
.site-search-kind{grid-column:2;grid-row:1;align-self:center;font:500 10.5px/1.4 'Geist Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.site-search-desc{grid-column:1/-1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;line-height:1.5;color:var(--muted)}
.site-search-results [aria-selected=true] a{background:var(--glass-2);box-shadow:inset 0 0 0 1px rgba(52,213,225,.4)}
@media (hover:hover){.site-search-results a:hover{background:var(--glass)}}
.site-search-suggest,.site-search-empty{display:grid;gap:12px;padding:12px 10px 14px;font-size:14px;color:var(--muted)}
.site-search-suggest[hidden],.site-search-empty[hidden]{display:none}
.site-search-suggest>span{font:500 11px/1 'Geist Mono',monospace;letter-spacing:.12em;text-transform:uppercase}
.site-search-empty p{margin:0}
.site-search-empty strong{color:var(--ink);font-weight:500}
.site-search-chips{display:flex;flex-wrap:wrap;gap:8px}
.site-search-chip{display:inline-flex;align-items:center;min-height:38px;padding:0 15px;border-radius:999px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line-2);font-size:14px;color:var(--ink-2);transition:background-color 200ms ease,box-shadow 200ms ease,transform 160ms var(--ease-out)}
@media (hover:hover){.site-search-chip:hover{background:var(--glass-2);box-shadow:inset 0 0 0 1px rgba(52,213,225,.5)}}
.site-search-chip:active{transform:scale(.96)}
.site-search-foot{display:flex;align-items:center;gap:6px;margin:0;padding:10px 20px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.site-search-foot kbd{min-width:22px;padding:2px 6px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line-2);font:500 11px/1.4 'Geist Mono',monospace;text-align:center;color:var(--ink-2)}
.site-search-foot kbd:nth-of-type(3),.site-search-foot kbd:nth-of-type(4){margin-left:10px}
@media (hover:none){.site-search-foot{display:none}}
@media (max-width:640px){
 .site-search{width:100%;height:100dvh;max-height:none;margin:0;border-radius:0}
 .site-search-shell{height:100%;max-height:none;border-radius:0;box-shadow:none}
 .site-search-field{padding-top:calc(10px + env(safe-area-inset-top))}
}

/* Confirmation modal. */
.confirm{width:min(420px,calc(100% - 32px));max-width:none;padding:0;border:0;border-radius:var(--r-outer);background:transparent;color:var(--ink)}
.confirm[open]{animation:dialog-in 260ms var(--ease-out)}
.confirm-shell{display:grid;gap:10px;padding:26px;border-radius:inherit;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2),0 40px 90px -30px rgba(0,0,0,.7)}
.confirm h2{font-size:20px;font-weight:600;line-height:1.25;letter-spacing:-.02em}
.confirm p{margin:0;font-size:15px;color:var(--muted)}
.confirm-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:12px}
@keyframes dialog-in{from{opacity:0;transform:translateY(-8px) scale(.98)}}

/* Gallery photos shimmer softly until they load. */
.photo-button{isolation:isolate}
#gallery-grid :is(.card-media,.photo-button):not(.is-loaded)::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.07) 50%,transparent 70%);transform:translateX(-100%);animation:shimmer 1.5s var(--ease-in-out) infinite;pointer-events:none}
[data-theme=light] #gallery-grid :is(.card-media,.photo-button):not(.is-loaded)::before{background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%)}
@keyframes shimmer{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){#gallery-grid :is(.card-media,.photo-button)::before{animation:none!important}}

/* Client checklist, 2026-09-28 --------------------------------------------------------------- */
/* Contact: Instagram and Facebook at the end of the details. */
.contact-social{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:6px}
.contact-social a{display:inline-flex;align-items:center;gap:8px;min-height:40px;color:var(--ink);font-size:15px;transition:color 200ms ease}
.contact-social .icon{width:19px;height:19px;color:var(--accent-text)}
@media (hover:hover){.contact-social a:hover{color:var(--accent-text)}}

/* Ceramic family: three options by warranty. Three across on computers, stacked on phones. */
.product-intro{margin:14px 0 0;max-width:58ch;color:var(--ink-2)}
.product-detail-copy .spec-pills{margin-top:26px}
.ceramic-options{padding-bottom:clamp(56px,7vw,110px)}
.option-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.option-card .bezel-core{display:flex;flex-direction:column;height:100%}
.option-media .product-art{aspect-ratio:16/10}
/* The 4:3 image fills the wider frame from its centre (in the grid it kept its own height and lost the bottom). */
.option-media .product-art>picture{position:absolute;inset:0}
.option-body{display:flex;flex-direction:column;flex:1;padding:clamp(20px,2.2vw,30px)}
.option-years{align-self:flex-start;padding:6px 12px;border-radius:999px;background:var(--cyan);color:var(--cyan-ink);font:600 11px/1 'Geist Mono',monospace;letter-spacing:.12em;text-transform:uppercase}
.option-body h3{margin-top:16px;font-size:clamp(22px,1.8vw,28px);letter-spacing:-.035em}
.option-body p{margin:10px 0 16px;font-size:15px;color:var(--ink-2)}
.option-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 20px;padding:0;list-style:none}
.option-tags li{padding:7px 11px;border-radius:999px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line-2);font:500 11px/1 'Geist Mono',monospace;letter-spacing:.05em;color:var(--ink-2)}
.option-body .link-arrow{margin-top:auto}
.option-grid.is-series{grid-template-columns:repeat(2,minmax(0,1fr))}
.series-card .option-body h3{margin-top:18px;font-size:clamp(40px,4.2vw,68px);font-weight:500;letter-spacing:-.055em;line-height:1}
.series-card .option-body .series-tagline{margin:12px 0 0;font-size:clamp(17px,1.4vw,20px);font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.series-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:auto}
.series-actions .link-arrow{margin-top:0}
@media (max-width:760px){.option-grid.is-series{grid-template-columns:1fr}}

/* NEX: official shades graphic, values per shade and The Skin Cancer Foundation seal. */
.nex-shades-figure{margin:0}
.nex-shades-figure img{width:100%;height:auto}
.nex-shades-foot{max-width:860px;margin-top:clamp(18px,2vw,28px)}
/* A pane of sky seen through the film: the darker the shade, the less light passes. */
.scf-core{display:flex;gap:18px;align-items:center;padding:clamp(18px,2vw,26px)}
.scf-core img{flex:none;width:72px;height:auto}
.scf-core p{margin:0;font-size:14.5px;color:var(--ink-2)}
.scf-core strong{display:block;margin-bottom:4px;color:var(--ink);font-weight:600}
/* LUNARAY: the NEX+ and ACTION+ shades side by side, then the foundation's recommendation. */
.lunaray-shades-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.lunaray-scf{margin-top:clamp(14px,1.6vw,24px);max-width:860px}
@media (max-width:900px){.lunaray-shades-grid{grid-template-columns:1fr}}

/* Bike Care page: the Bike Care reel and real photographs from the studio. */
.bike-showcase-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
.bike-reel{grid-row:span 2;margin:0}
.bike-reel .bezel-core{position:relative;height:100%;min-height:100%}
.bike-reel video{width:100%;height:100%;object-fit:cover}
.bike-shot{margin:0}
.bike-shot .bezel-core{aspect-ratio:3/4}
.bike-shot picture,.bike-shot img{width:100%;height:100%}
.bike-shot img{object-fit:cover}

/* VINYL inside Services: description, quote button and its real work (client, 2026-10-01). */
.vinyl-showcase{margin-top:clamp(56px,7vw,110px);scroll-margin-top:110px}
.vinyl-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(40px,6vw,110px);align-items:end;margin-bottom:clamp(24px,3vw,40px)}
.vinyl-head h3{margin-top:18px;font-size:clamp(36px,4.4vw,72px);font-weight:500;letter-spacing:-.055em;line-height:1}
.vinyl-head .lead{margin:0 0 24px}
.vinyl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
.vinyl-shot{display:block}
.vinyl-shot .bezel-core{aspect-ratio:3/4;overflow:hidden}
.vinyl-shot picture,.vinyl-shot img{width:100%;height:100%}
.vinyl-shot img{object-fit:cover;transition:transform 1.1s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.vinyl-shot:hover img{transform:scale(1.04)}}
@media (max-width:900px){.vinyl-head{grid-template-columns:1fr}.vinyl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* LUNARAY page: the installation photographed in the studio. */
.lunaray-band{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,14px);margin-bottom:clamp(14px,1.6vw,22px)}
.lunaray-shot{margin:0}
.lunaray-shot .bezel-core{aspect-ratio:3/4}
.lunaray-shot picture,.lunaray-shot img{width:100%;height:100%}
.lunaray-shot img{object-fit:cover}

@media (max-width:1000px){
 .option-grid{grid-template-columns:1fr}
 .bike-showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .bike-reel{grid-column:1/-1;grid-row:auto}
 .bike-reel .bezel-core{aspect-ratio:9/16;height:auto;max-height:78svh;margin-inline:auto}
 .lunaray-band{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media print{.bike-reel{display:none}}

/* Print: a clean, ink-friendly page with the content and the contact details. */
@media print{
 @page{margin:14mm 14mm 16mm}
 :root,[data-theme]{--bg:#fff;--bg-2:#fff;--surface:#fff;--surface-2:#fff;--ink:#000;--ink-2:#111;--silver:#333;--muted:#444;--line:#ccc;--line-2:#bbb;--glass:transparent;--glass-2:transparent;--accent-text:#025d66}
 html,body{background:#fff!important;color:#000!important}
 body{font-size:11pt;line-height:1.5}
 *,*::before,*::after{animation:none!important;transition:none!important;box-shadow:none!important;text-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
 .nav-shell,.mobile-menu,.curtain,.grain,.scroll-progress,.dock,.assistant,.to-top,.toast,.announce,.site-search,.confirm,.viewer,.skip-link,.hero-media,.hero-shade,.hero-veil,.media-toggle,.marquee,.footer-mark,.footer-glow,.intro-glow,.contact-glow,.ambient,.card-hover,.glare,.form-bezel,.footer-cta,.copy-btn,[data-share],video,.btn-icon,.link-icon{display:none!important}
 [data-reveal],[data-split],[data-hero-side],[data-hero-title],[data-media-reveal],.split-line,.eyebrow,.hero-inner{opacity:1!important;visibility:visible!important;transform:none!important;filter:none!important;clip-path:none!important}
 .hero{min-height:0!important;padding:0 0 8mm;color:#000!important;background:#fff!important}
 .hero-inner{padding-top:0!important}
 .section,.page-intro,.product-hero,.has-announce:has(.announce) .page-intro,.has-announce:has(.announce) .product-hero{padding-block:6mm!important}
 h1{font-size:26pt!important}h2{font-size:18pt!important}h3{font-size:13pt!important}
 h1,h2,h3{color:#000!important;break-after:avoid}
 .bezel,.product-card,.album-card,.step-panel,details,li,figure,img{break-inside:avoid}
 img{filter:none!important}
 details::details-content{display:block;content-visibility:visible}
 details>:not(summary){display:block!important}
 .btn{height:auto;padding:4px 0;background:none!important;color:#000!important;text-decoration:underline}
 a[href^="http"]:not(.btn):not([href*="wa.me"])::after{content:" (" attr(href) ")";font-size:9pt;color:#444;word-break:break-all}
 .site-footer{margin-top:8mm;padding-top:6mm;border-top:1px solid #ccc;background:#fff!important;color:#000!important}
 .site-footer *{color:#000!important;background:transparent!important}
 :is(.card-media,.product-art,.bezel-core){background:#fff!important}
}