@import url('design-tokens.css');

@font-face{font-family:Manrope;src:url('assets/fonts/manrope-400.ttf') format('truetype');font-weight:400;font-display:swap} /* deslop-ignore 33 */
@font-face{font-family:Manrope;src:url('assets/fonts/manrope-600.ttf') format('truetype');font-weight:500 800;font-display:swap} /* deslop-ignore 33 */
@font-face{font-family:Unbounded;src:url('assets/fonts/unbounded-500.ttf') format('truetype');font-weight:400 500;font-display:swap}
@font-face{font-family:Unbounded;src:url('assets/fonts/unbounded-700.ttf') format('truetype');font-weight:600 800;font-display:swap}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + var(--space-4));scrollbar-color:var(--color-muted) var(--color-bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-bg);color:var(--color-ink);font:var(--text-base)/var(--leading-body) var(--font-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure,dl,dd{margin:0}
h1,h2,h3{font-family:var(--font-display);font-weight:var(--weight-bold);line-height:var(--leading-heading);letter-spacing:var(--tracking-display);text-wrap:balance}
h2{font-size:var(--text-3xl)}
h3{font-size:var(--text-xl)}
p{color:var(--color-muted);max-width:65ch;text-wrap:pretty}
a{color:inherit;text-decoration:none;text-underline-offset:var(--space-1)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a,button,summary,select{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
input{caret-color:var(--color-accent)}
img{display:block;max-width:100%;height:auto}
svg{width:var(--space-6);height:var(--space-6);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;pointer-events:none}
[hidden]{display:none!important}
::selection{background:var(--color-accent);color:var(--color-on-accent)}
:focus-visible{outline:var(--focus-width) solid var(--color-accent);outline-offset:var(--space-1)}
button:disabled{opacity:.5;cursor:not-allowed}
section[id]{scroll-margin-top:calc(var(--header-height) + var(--space-4))}

.icon-library{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.shell{width:calc(100% - var(--gutter)*2);max-width:var(--container-max);margin-inline:auto}
.section{padding-block:var(--section-space)}

/* Controls */
.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--space-12);padding:var(--space-3) var(--space-6);border-radius:var(--radius-pill);background:var(--color-accent);color:var(--color-on-accent);font-size:var(--text-sm);font-weight:var(--weight-semibold);white-space:nowrap;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard)}
.button svg{width:var(--space-5);height:var(--space-5);transition:transform var(--duration-base) var(--ease-out)}
.button:active,.icon-button:active,.product-open:active{transform:translateY(var(--press)) scale(.98)}
.button-dark{background:var(--color-ink);color:var(--color-surface)}
.button-white{background:var(--color-surface);color:var(--color-ink)}
.text-link{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--control-size);font-size:var(--text-sm);font-weight:var(--weight-semibold);text-decoration:underline;text-decoration-thickness:var(--hairline);text-underline-offset:var(--space-1)} /* deslop-ignore 09 */
.skip{position:fixed;inset:var(--space-3) auto auto var(--space-3);padding:var(--space-3);background:var(--color-accent);color:var(--color-on-accent);transform:translateY(-200%);z-index:100;border-radius:var(--radius-sm)}
.skip:focus{transform:none}

/* Header */
.store-home-notice{padding:var(--space-2) var(--gutter);background:var(--color-ink);color:var(--color-on-dark-muted);font-size:var(--text-xs);line-height:var(--leading-body);text-align:center}
.utility{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-1) var(--gutter);font-size:var(--text-xs);color:var(--color-muted);border-bottom:var(--border-width) solid var(--color-line)}
.utility span{font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label)}
.utility a{display:inline-flex;align-items:center;min-height:var(--space-8);text-decoration:underline;text-decoration-thickness:var(--hairline)} /* deslop-ignore 09 */
.header{height:var(--header-height);padding-inline:var(--gutter);display:flex;align-items:center;gap:var(--space-10);background:var(--color-bg);border-bottom:var(--border-width) solid var(--color-line);position:sticky;top:0;z-index:30}
.logo{display:block;width:var(--home-logo-width);height:var(--home-logo-width);flex-shrink:0;background:var(--color-surface);border:var(--border-width) solid var(--color-line);border-radius:var(--radius-sm);overflow:hidden}
.logo img{width:100%;height:100%;object-fit:contain;transform:scale(1.18)}
.store header.store-header .store-logo{width:var(--logo-width);height:var(--logo-width)}
.store header.store-header .store-logo img{width:100%;height:100%;object-fit:contain}
.desktop-nav{display:flex;gap:var(--space-8);font-size:var(--text-sm);font-weight:var(--weight-semibold)}
.desktop-nav a{position:relative;display:flex;align-items:center;min-height:var(--control-size)}
.desktop-nav a:after{content:"";position:absolute;left:0;right:0;bottom:var(--space-2);height:var(--focus-width);background:var(--color-accent);transform:scaleX(0);transform-origin:left;transition:transform var(--duration-base) var(--ease-out)}
.header-tools{display:flex;margin-left:auto;gap:var(--space-1)}
.icon-button,.menu-toggle{min-width:var(--control-size);min-height:var(--control-size);display:grid;place-items:center;position:relative;border-radius:var(--radius-pill);transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}
.icon-button svg{width:var(--space-5);height:var(--space-5)}
.count{position:absolute;right:var(--space-1);top:var(--space-1);min-width:var(--space-4);height:var(--space-4);padding-inline:var(--space-1);border-radius:var(--radius-pill);background:var(--color-detail);color:var(--color-on-accent);font-size:var(--text-2xs);line-height:var(--space-4);font-weight:var(--weight-bold);text-align:center}
.header-cta{background:var(--color-ink);color:var(--color-surface)}
.menu-toggle{display:none}
.mobile-menu{position:fixed;inset:auto 0 auto;z-index:29;background:var(--color-bg);padding:var(--space-2) var(--gutter) var(--space-6);box-shadow:var(--shadow-md);max-height:75dvh;overflow:auto;border-bottom:var(--border-width) solid var(--color-line)}
.mobile-menu a{display:flex;align-items:center;min-height:var(--space-12);border-bottom:var(--border-width) solid var(--color-line);font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--text-lg)}
.mobile-menu a:nth-child(n+6){font-family:var(--font-body);font-size:var(--text-sm);min-height:var(--control-size);color:var(--color-muted)}

/* Hero */
.hero{padding-block:var(--space-10) var(--section-space)}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-12);align-items:stretch}
.hero-copy{display:flex;flex-direction:column;gap:var(--space-8);padding-block:var(--space-8) var(--space-2)}
.hero-facts{margin-top:auto}
.hero h1{font-size:var(--text-display);line-height:var(--leading-heading);max-width:12ch;hyphens:manual}
.hero-intro{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-8);max-width:38ch}
.hero-description{font-size:var(--text-lg);line-height:var(--leading-body)}
.hero-facts{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:start;gap:var(--space-10);padding-top:var(--space-6);border-top:var(--border-width) solid var(--color-line)}
.hero-facts div{display:flex;flex-direction:column-reverse;gap:var(--space-1)}
.hero-facts dt{font-size:var(--text-xs);color:var(--color-muted)}
.hero-facts dd{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-medium);font-variant-numeric:tabular-nums;white-space:nowrap}
.hero-stage{position:relative;grid-column:2;grid-row:1;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto minmax(0,1fr) auto auto;gap:var(--space-5);min-height:var(--hero-stage-min-height);padding:var(--space-8);background-color:var(--color-hero);background-image:linear-gradient(var(--color-grid) var(--grid-line),var(--color-clear) var(--grid-line)),linear-gradient(to right,var(--color-grid) var(--grid-line),var(--color-clear) var(--grid-line));background-size:var(--grid-step) var(--grid-step);border-radius:var(--radius-lg);overflow:hidden}
.stage-tag{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);font-size:var(--text-xs);color:var(--color-muted)}
.stage-tag span:first-child{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);background:var(--color-surface);border-radius:var(--radius-pill);font-weight:var(--weight-semibold);color:var(--color-ink)}
#hero-index{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero-product-image{grid-column:1/-1;display:grid;place-items:center;width:100%;min-height:0;padding:var(--space-4)}
.hero-product-image img{width:100%;height:100%;max-height:var(--hero-product-height);object-fit:contain;transition:transform var(--duration-slow) var(--ease-out)}
#hero-bike{mix-blend-mode:multiply}
.hero-spec{position:absolute;top:calc(var(--space-20) + var(--space-2));left:var(--space-8);display:flex;flex-direction:column;gap:0;color:var(--color-muted);font-size:var(--text-xs)}
.hero-spec span{font-family:var(--font-display);font-size:var(--text-figure);font-weight:var(--weight-medium);line-height:var(--leading-heading);color:var(--color-ink);font-variant-numeric:tabular-nums}
.hero-spec small{font-size:var(--text-xs)}
.hero-product-caption{grid-column:1/-1;display:flex;align-items:end;justify-content:space-between;gap:var(--space-6);border-top:var(--border-width) solid var(--color-grid);padding-top:var(--space-5)}
#hero-brand{display:block;font-size:var(--text-xs);color:var(--color-muted);letter-spacing:var(--tracking-label);text-transform:uppercase}
#hero-model{margin-top:var(--space-2);font-family:var(--font-display);font-size:var(--text-model);font-weight:var(--weight-bold);line-height:var(--leading-tight);letter-spacing:var(--tracking-display);text-transform:uppercase}
.hero-product-price{display:inline-flex;align-items:center;gap:var(--space-3);min-height:var(--space-12);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-5);background:var(--color-ink);color:var(--color-surface);border-radius:var(--radius-pill);font-family:var(--font-display);font-size:var(--text-base);font-weight:var(--weight-medium);white-space:nowrap;font-variant-numeric:tabular-nums;transition:background var(--duration-fast) var(--ease-standard)}
.hero-product-price svg{width:var(--space-8);height:var(--space-8);padding:var(--space-1);background:var(--color-surface);color:var(--color-ink);border-radius:var(--radius-pill);transition:transform var(--duration-base) var(--ease-out)}
.hero-controls{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.slide-dots,.slide-arrows{display:flex;gap:var(--space-2)}
.slide-dots button{display:grid;place-items:center;width:var(--space-12);height:var(--control-size)}
.slide-dots button:after{content:"";width:100%;height:var(--focus-width);background:var(--color-grid);border-radius:var(--radius-pill);background-color:var(--color-line);transition:background var(--duration-base) var(--ease-standard)}
.slide-dots button.active:after{background-color:var(--color-detail)}
.slide-arrows button{display:grid;place-items:center;width:var(--control-size);height:var(--control-size);background:var(--color-surface);border-radius:var(--radius-pill);transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}
.slide-arrows svg{width:var(--space-5);height:var(--space-5)}

/* Section heads */
.section-top{display:flex;justify-content:flex-end}
.section-top:empty{display:none}
.section-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24rem);align-items:end;gap:var(--space-10);margin-bottom:var(--space-12)}
.section-aside{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.section-aside p,.section-heading>p{font-size:var(--text-sm)}

/* Categories: one feature tile + four compact tiles */
.categories{padding-top:0}
.category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(15rem,auto);gap:var(--space-4)}
.category-card{position:relative;display:flex;flex-direction:column;gap:var(--space-2);min-width:0;padding:var(--space-6);background:var(--color-surface);border-radius:var(--radius-md);overflow:hidden;isolation:isolate;transition:background var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard)}
.category-card h3{font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--weight-semibold);letter-spacing:normal;line-height:var(--leading-compact)}
.category-card:not(.category-main) h3:after{content:"";display:block;width:var(--space-6);height:var(--focus-width);margin-top:var(--space-3);background:var(--color-line);transition:background var(--duration-fast) var(--ease-standard)}
.category-card p{font-size:var(--text-sm);max-width:32ch}
.category-card>img{width:100%;height:var(--category-image-height);margin-top:auto;object-fit:contain;mix-blend-mode:multiply;transition:transform var(--duration-slow) var(--ease-out)}
.category-main{grid-column:span 2;grid-row:span 2;padding:var(--space-10);background-color:var(--color-hero);background-image:linear-gradient(var(--color-grid) var(--grid-line),var(--color-clear) var(--grid-line)),linear-gradient(to right,var(--color-grid) var(--grid-line),var(--color-clear) var(--grid-line));background-size:var(--grid-step) var(--grid-step)}
.category-main h3{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--weight-bold);letter-spacing:var(--tracking-display)}
.category-main>img{flex:1;height:auto;max-height:22rem;min-height:0}
.category-bottom{display:inline-flex;align-items:center;gap:var(--space-3);align-self:flex-start;min-height:var(--space-12);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-5);background:var(--color-ink);color:var(--color-surface);border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:var(--weight-semibold)}
.category-bottom svg{width:var(--space-8);height:var(--space-8);padding:var(--space-1);background:var(--color-surface);color:var(--color-ink);border-radius:var(--radius-pill);transition:transform var(--duration-base) var(--ease-out)}
.more-categories{display:flex;gap:var(--space-6);flex-wrap:wrap;padding-block:var(--space-6);border-bottom:var(--border-width) solid var(--color-line);font-size:var(--text-sm)}
.more-categories>span{color:var(--color-muted)}
.more-categories>a,.service-full-link,.brand-strip>a,.footer-nav>a,.footer-socials>a,.footer-bottom>a,.footer-phone{display:inline-flex;align-items:center;min-height:var(--control-size);min-width:var(--control-size)}

/* Models */
.models{padding-top:0}
.model-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);margin-bottom:var(--space-8)}
.filters{display:inline-flex;flex-wrap:wrap;gap:var(--space-1);padding:var(--space-1);background:var(--color-surface);border:var(--border-width) solid var(--color-line);border-radius:var(--radius-pill)}
.filters button{min-height:var(--control-size);padding:var(--space-2) var(--space-5);font-size:var(--text-sm);font-weight:var(--weight-semibold);border-radius:var(--radius-pill);transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}
.filters button.active{background:var(--color-ink);color:var(--color-surface)}
.sort-control select{min-height:var(--control-size);padding:var(--space-2) var(--space-10) var(--space-2) var(--space-5);font-size:var(--text-sm);font-weight:var(--weight-semibold);border:var(--border-width) solid var(--color-line);border-radius:var(--radius-pill);background:var(--color-surface);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2c3b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:var(--select-arrow-position);background-size:var(--space-4) var(--space-4);background-repeat:var(--bg-single)}
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-10) var(--space-5)}
.product-card{display:flex;flex-direction:column;min-width:0}
.product-photo{position:relative;background:var(--color-soft);height:var(--product-height);border-radius:var(--radius-md);overflow:hidden}
.product-image-button{width:100%;height:100%;padding:var(--space-10) var(--space-4) var(--space-5)}
.product-image-button img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform var(--duration-slow) var(--ease-out)}
.product-label,.quick-view-label{display:none}
.product-actions{position:absolute;top:var(--space-3);right:var(--space-3);display:flex;gap:var(--space-1);z-index:1}
.product-actions button{display:grid;place-items:center;width:var(--control-size);height:var(--control-size);background:var(--color-surface);border-radius:var(--radius-pill);transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}
.product-actions svg{width:var(--space-5);height:var(--space-5)}
.product-open{display:grid;place-items:center;width:var(--control-size);height:var(--control-size);background:var(--color-ink);color:var(--color-surface);border-radius:var(--radius-pill);transition:background var(--duration-fast) var(--ease-standard),transform var(--duration-base) var(--ease-out)}
.product-open svg{width:var(--space-5);height:var(--space-5)}
[aria-pressed=true]{color:var(--color-accent)}
.product-actions [aria-pressed=true]{background:var(--color-accent);color:var(--color-on-accent)}
.product-actions [aria-pressed=true] svg{fill:currentColor}
.product-meta{display:flex;justify-content:space-between;margin-top:var(--space-5);font-size:var(--text-2xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);color:var(--color-muted)}
.product-meta>span:last-child{display:none}
.product-title-button{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-bold);letter-spacing:var(--tracking-display);text-align:left;padding:var(--space-1) 0;min-height:var(--control-size)}
.product-specs{display:flex;gap:var(--space-2);flex-wrap:wrap;font-size:var(--text-xs);color:var(--color-muted)}
.product-specs span{padding:var(--space-1) var(--space-2);border:var(--border-width) solid var(--color-line);border-radius:var(--radius-xs);font-variant-numeric:tabular-nums}
.product-bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-top:auto;padding-top:var(--space-5)}
.product-price{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-medium);font-variant-numeric:tabular-nums;white-space:nowrap}
.product-price small{font-family:var(--font-body);font-weight:var(--weight-regular);font-size:var(--text-sm);color:var(--color-muted)}
.model-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);margin-top:var(--space-12);padding-top:var(--space-6);border-top:var(--border-width) solid var(--color-line)}
.model-bottom p{font-size:var(--text-sm)}

/* Help band */
.selection{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--space-10);padding:var(--space-16) var(--space-12);margin-bottom:var(--section-space);background-color:var(--color-accent);background-image:linear-gradient(var(--color-grid-on-dark) var(--grid-line),var(--color-clear) var(--grid-line)),linear-gradient(to right,var(--color-grid-on-dark) var(--grid-line),var(--color-clear) var(--grid-line));background-size:var(--grid-step) var(--grid-step);color:var(--color-on-accent);border-radius:var(--radius-lg);overflow:hidden}
.selection h2{font-size:var(--text-3xl);max-width:16ch;color:var(--color-on-accent)}
.selection p{margin-top:var(--space-5);color:var(--color-on-accent-muted);font-size:var(--text-lg)}
.selection>.button{flex-shrink:0;min-height:var(--space-16);padding-inline:var(--space-8);background:var(--color-surface);color:var(--color-ink);font-size:var(--text-base)}

/* Service ledger */
.service{background:var(--color-surface)}
.service-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--space-16)}
.service-copy{align-self:start;position:sticky;top:calc(var(--header-height) + var(--space-8))}
.service-copy p{margin-block:var(--space-6) var(--space-8);max-width:40ch;font-size:var(--text-lg)}
.service-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2) var(--space-6)}
.service-full-link{font-size:var(--text-sm);font-weight:var(--weight-semibold);text-decoration:underline;text-decoration-thickness:var(--hairline)} /* deslop-ignore 09 */
.service-accordion{border-top:var(--border-width) solid var(--color-line)}
.service-facts{display:grid;align-content:start;border-top:var(--border-width) solid var(--color-ink)}
.service-fact{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:var(--space-8);padding-block:var(--space-8);border-bottom:var(--border-width) solid var(--color-line)}
.service-figure{font-family:var(--font-display);font-size:var(--text-figure);font-weight:var(--weight-medium);line-height:var(--leading-heading);letter-spacing:var(--tracking-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.service-fact strong{display:block;font-size:var(--text-base);font-weight:var(--weight-semibold)}
.service-fact p{margin-top:var(--space-2);font-size:var(--text-sm)}

/* FAQ */
details{border-bottom:var(--border-width) solid var(--color-line)}
summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-6);min-height:var(--control-size);cursor:pointer;font-size:var(--text-lg);font-weight:var(--weight-semibold);list-style:none}
summary::-webkit-details-marker{display:none}
summary i,summary>span:last-child{display:grid;place-items:center;flex-shrink:0;width:var(--space-9);height:var(--space-9);border:var(--border-width) solid var(--color-line);border-radius:var(--radius-pill);font-style:normal;font-size:var(--text-lg);font-weight:var(--weight-regular);color:var(--color-ink);transition:transform var(--duration-base) var(--ease-out),background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}
details[open]>summary>span:last-child{transform:rotate(45deg);background:var(--color-ink);color:var(--color-surface);border-color:var(--color-ink)}
details p{padding-bottom:var(--space-4);font-size:var(--text-base)}
details .text-link{margin-bottom:var(--space-5)}

/* Brands */
.brand-strip{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));align-items:stretch;border-bottom:var(--border-width) solid var(--color-line)}
.brand-strip>span{align-self:center;padding-right:var(--space-10);font-size:var(--text-sm);color:var(--color-muted)}
.brand-strip>a{justify-content:center;padding-block:var(--space-12);border-left:var(--border-width) solid var(--color-line);font-family:var(--font-display);font-size:var(--text-wordmark);font-weight:var(--weight-bold);letter-spacing:var(--tracking-display);transition:color var(--duration-fast) var(--ease-standard),background var(--duration-base) var(--ease-standard)}

.faq{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--space-16)}
.faq-intro p{margin-top:var(--space-5);font-size:var(--text-lg)}
.faq-list{border-top:var(--border-width) solid var(--color-ink)}

/* Closing: pickup + footer share one dark surface */
.showroom{background:var(--color-ink);color:var(--color-surface)}
.showroom-grid{display:grid;grid-template-columns:1fr;gap:var(--space-20)}
.showroom-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);grid-template-rows:auto auto;align-items:end;column-gap:var(--space-12)}
.showroom-copy>h2{grid-row:1/3}
.showroom h2{font-size:var(--text-display);color:var(--color-surface)}
.showroom-copy>p{max-width:40ch;color:var(--color-on-dark-muted);font-size:var(--text-lg)}
.showroom .text-link{color:var(--color-surface);justify-self:start}
/* Route map: one dashed track, hollow stops, the last stop is the destination. */
.order-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none;counter-reset:none}
.order-steps li{position:relative;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-12) var(--space-8) 0 0}
.order-steps li:before{content:"";position:absolute;top:0;left:0;width:var(--space-5);height:var(--space-5);background:var(--color-ink);border:var(--focus-width) solid var(--color-on-dark-muted);border-radius:var(--radius-pill);transform:translateY(-50%);z-index:1;transition:border-color var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}
.order-steps li:after{content:"";position:absolute;top:0;left:var(--space-5);right:0;border-top:var(--focus-width) dashed var(--color-line-dark);transform:translateY(-50%)}
.order-steps li:last-child:before{background:var(--color-detail);border-color:var(--color-detail);outline:var(--space-2) solid var(--color-ink-raised)}
.order-steps li:last-child:after{display:none}
.order-steps strong{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-medium);letter-spacing:var(--tracking-display);line-height:var(--leading-compact)}
.order-steps span{max-width:26ch;font-size:var(--text-sm);color:var(--color-on-dark-muted)}
.order-steps li:last-child strong{color:var(--color-detail)}
.showroom-actions{display:flex;gap:var(--space-5);flex-wrap:wrap;margin-top:var(--space-8)}
.showroom-note{display:flex;gap:var(--space-3);margin-top:var(--space-8);font-size:var(--text-sm)}
.showroom-note svg{color:var(--color-accent)}
.address-card{display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-12);padding:var(--space-8);background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}
.address-top{font-size:var(--text-sm);color:var(--color-muted)}
.address-bottom h3{font-family:var(--font-display);font-size:var(--text-2xl)}
.address-bottom p{margin-top:var(--space-4);font-size:var(--text-sm)}
.address-bottom a{display:inline-flex;align-items:center;min-height:var(--control-size);margin-top:var(--space-6);text-decoration:underline} /* deslop-ignore 09 */

.footer{padding-block:var(--space-12) var(--space-6);background:var(--color-ink);color:var(--color-surface);border-top:var(--border-width) solid var(--color-line-dark)}
.footer p{color:var(--color-on-dark-muted)}
.footer-top,.footer-socials,.footer-nav,.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);flex-wrap:wrap}
.footer-phone{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-medium);letter-spacing:var(--tracking-display)}
.footer-socials{font-size:var(--text-sm)}
.footer-socials a{text-decoration:underline;text-decoration-thickness:var(--hairline)} /* deslop-ignore 09 */
.footer-logo{display:block;width:var(--space-16);height:var(--space-16);margin-block:var(--space-8);background:var(--color-surface);border-radius:var(--radius-sm);overflow:hidden}
.footer-logo img{width:100%;height:100%;object-fit:contain;transform:scale(1.18)}
.footer-nav{padding-bottom:var(--space-8);font-size:var(--text-sm)}
.footer-nav p{font-size:var(--text-sm)}
.footer-bottom{border-top:var(--border-width) solid var(--color-line-dark);padding-top:var(--space-6);font-size:var(--text-xs);color:var(--color-on-dark-muted)}
.agency-credit{display:flex;gap:var(--space-2);align-items:center}

/* Overlays */
dialog{border:0;border-radius:var(--radius-lg);padding:0;width:min(var(--dialog-width),calc(100% - var(--gutter)*2));max-height:90dvh;background:var(--color-surface);color:var(--color-ink);box-shadow:var(--shadow-md)}
dialog::backdrop{background:var(--color-backdrop)}
dialog[open]{animation:dialog-in var(--duration-base) var(--ease-out)}
.dialog-close{position:absolute;right:var(--space-4);top:var(--space-4);display:grid;place-items:center;width:var(--control-size);height:var(--control-size);z-index:2;background:var(--color-soft);border-radius:var(--radius-pill);transition:background var(--duration-fast) var(--ease-standard)}
.utility-content,.utility-inner,.search-inner{padding:var(--space-12)}
.utility-inner>p,.search-inner>p{margin-block:var(--space-5)}
.search-inner h2{font-size:var(--text-2xl)}
.search-inner>label{display:block;margin-top:var(--space-3);font-size:var(--text-sm);color:var(--color-muted)}
.contact-context{margin-block:var(--space-6);color:var(--color-muted)}
.contact-method{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) 0;border-bottom:var(--border-width) solid var(--color-line)}
.contact-method strong,.contact-method small{display:block}
.contact-method small{color:var(--color-muted);font-size:var(--text-sm)}
.contact-note{margin-top:var(--space-6);font-size:var(--text-sm)}
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-10);padding:var(--space-12)}
.detail-gallery-main{width:100%;aspect-ratio:1;object-fit:contain;background:var(--color-soft);border-radius:var(--radius-md);mix-blend-mode:multiply}
.detail-gallery-thumbs{display:flex;gap:var(--space-2);margin-top:var(--space-3)}
.detail-gallery-thumbs button{width:var(--space-16);min-height:var(--control-size);border:var(--border-width) solid var(--color-line);border-radius:var(--radius-sm);overflow:hidden}
.detail-gallery-thumbs button.active{border-color:var(--color-accent)}
.detail-info h2{font-size:var(--text-3xl);text-transform:uppercase}
.detail-info>p{margin-block:var(--space-5)}
.detail-specs div{display:flex;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-3);border-bottom:var(--border-width) solid var(--color-line);font-size:var(--text-sm)}
.detail-price{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--weight-medium);margin-block:var(--space-6);font-variant-numeric:tabular-nums}
.detail-secondary{display:flex;gap:var(--space-4);margin-block:var(--space-4)}
.detail-secondary button{display:flex;align-items:center;gap:var(--space-2);min-height:var(--control-size);font-size:var(--text-sm);font-weight:var(--weight-semibold)}
.gallery-hint,.detail-disclaimer{font-size:var(--text-xs)}
.search-input-wrap{display:flex;gap:var(--space-3);align-items:center;padding-inline:var(--space-5);border:var(--border-width) solid var(--color-line);border-radius:var(--radius-pill);margin-block:var(--space-5);background:var(--color-surface)}
.search-input-wrap:focus-within{border-color:var(--color-accent)}
.search-input-wrap input{width:100%;min-height:var(--space-12);border:0;background:var(--color-surface);outline:0}
.search-result{display:flex;align-items:center;gap:var(--space-4);width:100%;padding:var(--space-3);text-align:left;border-radius:var(--radius-md);transition:background var(--duration-fast) var(--ease-standard)}
.search-result img,.saved-image{width:var(--space-24);background:var(--color-soft);border-radius:var(--radius-sm);mix-blend-mode:multiply}
.search-result small{display:block;color:var(--color-muted)}
.empty-state{padding-block:var(--space-8)}
.compare-tray{position:fixed;bottom:var(--space-4);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:var(--space-5);padding:var(--space-3) var(--space-3) var(--space-3) var(--space-6);background:var(--color-ink);color:var(--color-surface);border-radius:var(--radius-pill);z-index:40;max-width:calc(100% - var(--gutter)*2);box-shadow:var(--shadow-md)}
.compare-tray small{display:block;font-size:var(--text-xs);color:var(--color-on-dark-muted)}
.tray-clear{display:grid;place-items:center;min-width:var(--control-size);min-height:var(--control-size);border-radius:var(--radius-pill)}
.toast{position:fixed;bottom:var(--space-6);left:50%;transform:translate(-50%,var(--space-6));background:var(--color-ink);color:var(--color-surface);padding:var(--space-3) var(--space-6);border-radius:var(--radius-pill);font-size:var(--text-sm);z-index:60;opacity:0;pointer-events:none;max-width:calc(100% - var(--gutter)*2);box-shadow:var(--shadow-md);transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out)}
.toast.show{opacity:1;transform:translateX(-50%)}
.noscript-note{padding:var(--space-6);background:var(--color-soft)}

@keyframes dialog-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:no-preference){
  .hero-copy>*,.hero-stage{animation:rise var(--duration-slow) var(--ease-out) both}
  .hero-intro{animation-delay:var(--duration-fast)}
  .hero-facts{animation-delay:calc(var(--duration-fast)*2)}
  .hero-stage{animation-delay:calc(var(--duration-fast)*1.5)}
  @supports(animation-timeline:view()){
    .category-card,.product-card,.service-fact,.order-steps li,.selection,.faq-list details,.brand-strip>a{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
  }
}

@media(hover:hover){
  .button:hover{background:var(--color-accent-hover);color:var(--color-on-accent)}
  .button:hover svg{transform:translateX(var(--space-1))}
  .button-dark:hover,.header-cta:hover{background:var(--color-accent)}
  .button-white:hover{background:var(--color-soft);color:var(--color-ink)}
  .selection>.button:hover{background:var(--color-ink);color:var(--color-surface)}
  a:hover,.icon-button:hover{color:var(--color-accent)}
  .icon-button:hover{background:var(--color-soft)}
  .desktop-nav a:hover:after{transform:scaleX(1)}
  .category-card:hover{box-shadow:var(--shadow-lift);color:var(--color-ink)}
  .category-card:hover>img{transform:scale(1.05) translateY(var(--lift))}
  .category-card:hover h3:after{background:var(--color-accent)}
  .category-card:hover .category-bottom svg,.hero-product-price:hover svg{transform:translateX(var(--space-1))}
  .hero-product-price:hover{background:var(--color-accent);color:var(--color-surface)}
  .hero-product-image:hover img{transform:scale(1.03)}
  .filters button:hover:not(.active){background:var(--color-soft)}
  .slide-arrows button:hover{background:var(--color-ink);color:var(--color-surface)}
  .product-actions button:hover{background:var(--color-soft)}
  .product-actions [aria-pressed=true]:hover{background:var(--color-accent-hover);color:var(--color-on-accent)}
  .product-card:hover .product-image-button img{transform:scale(1.05)}
  .product-open:hover{background:var(--color-accent);color:var(--color-on-accent);transform:rotate(90deg)}
  .product-title-button:hover{color:var(--color-accent)}
  summary:hover>span:last-child{background:var(--color-soft)}
  details[open]>summary:hover>span:last-child{background:var(--color-accent);border-color:var(--color-accent)}
  .brand-strip>a:hover{background:var(--color-surface);color:var(--color-accent)}
  .showroom a:hover,.footer a:hover{color:var(--color-on-accent-muted)}
  .dialog-close:hover{background:var(--color-line)}
  .search-result:hover{background:var(--color-soft)}
}
@media(max-width:1100px){
  .header{gap:var(--space-5)}
  .desktop-nav{gap:var(--space-5)}
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--space-8)}
  .hero-facts{gap:var(--space-6)}
  .hero-stage{min-height:calc(var(--hero-stage-min-height)*.9);padding:var(--space-6)}
  .hero-spec{left:var(--space-6)}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-grid,.faq,.showroom-grid{gap:var(--space-10)}
  .service-fact{grid-template-columns:1fr;gap:var(--space-3)}
  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .category-main{grid-row:span 1}
  .category-main>img{max-height:16rem}
  .order-steps li{padding-right:var(--space-5)}
}
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-stage{grid-column:1;grid-row:auto}
  .hero h1{max-width:14ch}
  .section-heading{grid-template-columns:1fr;gap:var(--space-5);margin-bottom:var(--space-8)}
  .service-grid,.faq,.showroom-grid{grid-template-columns:1fr}
  .service-copy{position:static}
  .selection{grid-template-columns:1fr;align-items:start;padding:var(--space-10) var(--space-8)}
  .selection>.button{justify-self:start}
  .brand-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .brand-strip>span{grid-column:1/-1;padding-block:var(--space-6) 0}
  .brand-strip>a{padding-block:var(--space-8)}
  .brand-strip>span+a{border-left:0}
  .showroom-grid{gap:var(--space-12)}
  .showroom-copy{grid-template-columns:1fr;row-gap:var(--space-5)}
  .showroom-copy>h2{grid-row:auto}
  .order-steps{grid-template-columns:1fr}
  .order-steps li{padding:0 0 var(--space-10) var(--space-12)}
  .order-steps li:last-child{padding-bottom:0}
  .order-steps li:before{top:var(--space-1);transform:none}
  .order-steps li:after{top:calc(var(--space-1) + var(--space-5));bottom:0;left:calc(var(--space-2) + var(--hairline));right:auto;border-top:0;border-left:var(--focus-width) dashed var(--color-line-dark);transform:none}
}
@media(max-width:700px){
  .utility{display:none}
  .header{gap:var(--space-2);height:calc(var(--header-height) - var(--space-3))}
  .logo{width:var(--home-logo-width-mobile);height:var(--home-logo-width-mobile)}
  .desktop-nav,.header-cta{display:none}
  .header-tools{gap:0}
  .menu-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--space-1)}
  .menu-toggle span{width:var(--space-5);height:var(--focus-width);background:var(--color-ink);border-radius:var(--radius-pill);transition:transform var(--duration-base) var(--ease-out)}
  .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3px) rotate(45deg)}
  .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3px) rotate(-45deg)}
  .hero{padding-top:var(--space-6)}
  .hero-grid{gap:var(--space-6)}
  .hero-copy{gap:var(--space-6);padding-block:0}
  .hero h1{font-size:var(--text-display-mobile);max-width:none}
  .hero-intro{gap:var(--space-5)}
  .hero-intro .button{width:100%}
  .hero-description{font-size:var(--text-base)}
  .hero-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);padding-top:var(--space-4)}
  .hero-facts dd{font-size:var(--text-base)}
  .hero-facts dt{font-size:var(--text-2xs)}
  .hero-stage{min-height:0;padding:var(--space-5);gap:var(--space-4);border-radius:var(--radius-md)}
  .hero-spec{top:calc(var(--space-16) + var(--space-1));left:var(--space-5)}
  .hero-spec span{font-size:var(--text-xl)}
  .hero-product-image{min-height:calc(var(--product-height)*.95);padding-top:var(--space-12)}
  .hero-product-image img{max-height:var(--product-height)}
  .hero-product-caption{align-items:flex-start;flex-direction:column;gap:var(--space-4)}
  .hero-product-price{width:100%;justify-content:space-between}
  #hero-model{font-size:var(--text-2xl)}
  .section-heading{margin-bottom:var(--space-6)}
  h2,.selection h2{font-size:var(--text-h2-mobile)}
  .category-grid{grid-auto-rows:auto;gap:var(--space-3)}
  .category-card{padding:var(--space-4);min-height:var(--space-32)}
  .category-card h3{font-size:var(--text-sm)}
  .category-card>img{height:calc(var(--category-image-height)*.75)}
  .category-main{grid-column:1/-1;padding:var(--space-6)}
  .category-main h3{font-size:var(--text-xl)}
  .category-main>img{height:calc(var(--category-image-height)*1.2);flex:none}
  .model-toolbar{align-items:stretch;flex-direction:column;gap:var(--space-3)}
  .filters{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .filters button{flex-shrink:0;padding-inline:var(--space-4)}
  .sort-control select{width:100%}
  .product-grid{gap:var(--space-8) var(--space-3)}
  .product-photo{height:calc(var(--product-height)*.68);border-radius:var(--radius-sm)}
  .product-image-button{padding:var(--space-12) var(--space-2) var(--space-3)}
  .product-actions{top:var(--space-1);right:var(--space-1);gap:0}
  .product-actions button{background:var(--color-clear)}
  .product-title-button{font-size:var(--text-base)}
  .product-price{font-size:var(--text-sm)}
  .product-price small{font-size:var(--text-xs)}
  .product-specs span{padding:0;border:0}
  .product-open{width:var(--space-9);height:var(--space-9);min-width:var(--control-size);min-height:var(--control-size);background:var(--color-clear);color:var(--color-ink);border:var(--border-width) solid var(--color-line)}
  .model-bottom{align-items:flex-start;flex-direction:column}
  .selection{padding:var(--space-8) var(--space-6);border-radius:var(--radius-md)}
  .selection>.button{width:100%;min-height:var(--space-12)}
  .selection p{font-size:var(--text-base)}
  .service-copy p,.faq-intro p,.showroom-copy>p{font-size:var(--text-base)}
  .service-fact{padding-block:var(--space-6)}
  .brand-strip{grid-template-columns:1fr}
  .brand-strip>a{justify-content:flex-start;padding-block:var(--space-5);border-left:0;border-top:var(--border-width) solid var(--color-line)}
  .brand-strip>span+a{border-top:0}
  summary{font-size:var(--text-base)}
  .showroom h2{font-size:var(--text-display-mobile)}
  .address-card{padding:var(--space-6)}
  .footer-top{align-items:flex-start;flex-direction:column;gap:var(--space-2)}
  .footer-socials{gap:var(--space-4)}
  .footer-nav{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-4)}
  .footer-nav p{grid-column:1/-1;margin-bottom:var(--space-3)}
  .footer-bottom{align-items:flex-start;flex-direction:column;gap:var(--space-3)}
  dialog{width:100%;max-width:100%;max-height:92dvh;margin:auto auto 0;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
  .utility-content,.utility-inner,.search-inner{padding:var(--space-12) var(--space-5) var(--space-6)}
  .product-detail{grid-template-columns:1fr;gap:var(--space-6);padding:var(--space-12) var(--space-5) var(--space-6)}
  .compare-tray{width:calc(100% - var(--gutter)*2);gap:var(--space-2);padding-left:var(--space-5)}
  .compare-tray small{display:none}
  .compare-tray .button{padding-inline:var(--space-4)}
}
@media(max-width:380px){
  .hero-controls{flex-wrap:wrap;gap:var(--space-1)}
  .slide-dots button{width:var(--space-10)}
  .slide-arrows{gap:var(--space-1)}
  .hero-facts dt{font-size:var(--text-2xs)}
  .models h2{font-size:var(--text-xl)}
  .footer-nav{grid-template-columns:1fr}
  .category-card:not(.category-main) h3{font-size:var(--text-xs)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
