/* Canterbury: the original file from the licence zip, served unchanged (the licence forbids modifying it). Hero name, category names, footer signature only. */
@font-face{font-family:"Canterbury";src:url(fonts/Canterbury.ttf) format("truetype");font-weight:400;font-display:block}   /* block, not swap: the name waits for its own font (preloaded, ~50 KB) instead of flashing in a stand-in serif */
/* Palette, each with its job:
   page   #F2F1EE  warm off-white floor, so the chrome greys read as metal, not as a cold UI
   chrome #C9CCD0  the bumper-chrome grey: the fabric, the open menu, tags
   steel  #8C9096  lines and borders only (2.8:1 on page, never text)
   ink    #111214  all reading text
   muted  #4F535A  secondary text (6.8:1 on page, 4.8:1 on chrome)
   blue   #1E6FD9  the soundwave in the shop's logo: the beat rim on the fabric and focus rings
   blue-ink #1959B0 the same blue darkened to 6.0:1 for links and buttons that carry text */
:root{
  --page:#F2F1EE; --chrome:#C9CCD0; --steel:#8C9096; --ink:#111214; --muted:#4F535A; --soft:#DADCDF;
  --blue:#1E6FD9; --blue-ink:#1959B0; --grey-lg:#5F636A; --edge:#767A80;   /* edge: control borders, 3.8:1 on page, 4.4:1 on white (non-text 3:1). grey-lg: names off the rail centre, 5.3:1 so any size passes */
  --go:#1D6B35; --low:#8A5A00; --red:#B3261E;
  --body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --script:"Canterbury","Old English Text MT",serif;
  --hh:56px; --top:calc(var(--hh) + env(safe-area-inset-top,0px));
  --ease:cubic-bezier(.16,1,.3,1);   /* fast start, soft stop, no bounce */
  --drawer:max(25vw,400px);   /* cart width on PC and Mac: a quarter of the screen, never under 400 px */
  color-scheme:light;
  font-synthesis:none;   /* no faux bold or italic */
}
*,*::before,*::after{box-sizing:border-box;touch-action:manipulation}   /* no double-tap zoom on iPhone; pinch zoom still works */
html{scroll-padding-top:calc(var(--top) + 24px);-webkit-text-size-adjust:100%;scrollbar-color:var(--blue) var(--page);scrollbar-gutter:stable}   /* bone track, blue thumb; the gutter stays even when scrolling is locked, so nothing jumps sideways */
::-webkit-scrollbar{width:12px;height:12px;background:var(--page)}::-webkit-scrollbar-thumb{background:var(--blue);border:3px solid var(--page);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:var(--blue-ink)}   /* browsers without scrollbar-color */
body{margin:0;background:var(--page);color:var(--ink);font:400 1.0625rem/1.5 var(--body);font-stretch:100%;overflow-x:clip}
@media (min-width:1024px){html{font-size:max(95%,calc(95% + (100vw - 1920px) * .006))}body{font-size:1.125rem}}   /* PC: the user's "zoom out 5%" (95% up to 1920 wide), then a gentle rise to about 19 px at 2560 so type keeps its proportion on big monitors. Every rem size (type, buttons, gaps) shrinks with it; full-screen sections stay full-screen */
img{display:block;max-width:100%;height:auto}
a{color:var(--blue-ink);text-underline-offset:.2em;text-decoration-thickness:1px}
@media (hover:hover){a:hover{text-decoration-thickness:2px}}
h1,h2,h3,p,dl,dd,figure,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
a[href],button:not(:disabled),label,select,summary,input[type=radio],input[type=checkbox],input[type=range]{cursor:pointer}
button:disabled,[aria-disabled="true"]{cursor:not-allowed}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:8px;top:8px;z-index:60;padding:12px 16px;background:var(--ink);color:var(--page);transform:translateY(-300%)}
.skip:focus{transform:none}
.wrap{width:100%;max-width:1320px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:620px){.wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}
/* desktop: no fixed column. The page runs to a gutter that grows with the screen (44 px at 1280, 65 at 1920, 87 at 2560), so the header's name, cart and menu
   sit near the edges and every section uses the width. Phones and tablets keep 16 and 32 px */
@media (min-width:1024px){.wrap{max-width:none;padding-left:max(clamp(32px,3.4vw,96px),env(safe-area-inset-left,0px));padding-right:max(clamp(32px,3.4vw,96px),env(safe-area-inset-right,0px))}}

/* type: 1.25 scale from a 17px body. caption, body, h3, h2, display: five levels */
h2{font:700 clamp(2rem,1.3rem + 3.2vw,3.6rem)/1 var(--body);font-stretch:112%;letter-spacing:-.015em;text-wrap:balance}
h3{font:650 1.33rem/1.15 var(--body);text-wrap:balance}
p{text-wrap:pretty}
.lead{max-width:44ch;color:var(--muted)}
.cap{font-size:.875rem;line-height:1.4;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
/* open items the owner still has to give: dashed chrome tag naming what is missing */
.need{display:inline-block;padding:1px 7px;border:1.5px dashed var(--muted);background:var(--soft);color:var(--ink);font:600 .85rem/1.4 var(--body);font-stretch:90%;white-space:nowrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:0;border-radius:2px;background:var(--blue-ink);color:#fff;
  font:650 1rem/1.1 var(--body);font-stretch:108%;text-decoration:none;text-align:center;transition:background .15s,transform .1s}
@media (hover:hover){.btn:hover{background:#134A94;text-decoration:none}}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
@media (hover:hover){.btn.ghost:hover{background:var(--soft)}}
.btn:disabled{background:var(--soft);color:var(--muted);transform:none}

/* header: A1's bar, mirrored. The name on the left, cart and menu on the right */
.hdr{--hb:var(--page);position:fixed;inset:0 0 auto;z-index:30;padding-top:env(safe-area-inset-top,0px);background:var(--hb);border-bottom:1px solid var(--chrome);transition:background .3s var(--ease),border-color .3s var(--ease)}
.bar{display:flex;align-items:center;gap:2px;height:var(--hh)}
/* the mark: only the shadow the name casts (the user's direction, round 11). The letters themselves are transparent, so on any bar colour
   the shadow alone draws the whole logo: a close, fairly crisp cast that reads as the letters, and a wider soft one under it, falling down-right from the hero's light.
   --k: fabric.js sets 0 to 1 on each beat while the hero plays, and the shadow softens (a rumble), never moves. Pressed, it sharpens */
.brand{display:inline-flex;align-items:center;min-height:44px;margin-right:auto;padding-right:8px;font:400 clamp(2.05rem,1.7rem + 1.2vw,2.6rem)/1 var(--script);font-stretch:normal;letter-spacing:0;color:transparent;text-decoration:none;
  --kw:1;text-shadow:var(--ghost)}
.brand,.brand .up,.brand .blur-copy{--ghost:2px 3px calc(1.2px + 2.2px*(var(--k,0)*var(--kw) + var(--h,0))) rgba(38,46,58,.6),4px 7px calc(10px + 8px*(var(--k,0)*var(--kw) + var(--h,0))) rgba(38,46,58,.16);text-shadow:var(--ghost)}
@property --h{syntax:"<number>";inherits:true;initial-value:0}   /* inherits: the capitals' spans read the hover too */
/* PC and Mac (a2.js adds .lens): a small soft spot of blur follows the pointer. a2.js sets --mx/--my (the spot, trailing the pointer) and --lr (its radius: swells with speed, 0 away) */
@property --lr{syntax:"<length>";inherits:true;initial-value:0px}
.brand.lens{display:inline-grid;align-items:center}   /* both copies share one grid cell, so they line up exactly */
.brand.lens>span{grid-area:1/1;padding:6px 16px 18px 6px;margin:-6px -16px -18px -6px}   /* room for the shadow inside the mask */
.brand.lens>span:first-child{-webkit-mask:radial-gradient(circle max(var(--lr),.01px) at var(--mx,50%) var(--my,50%),#0000,#000);mask:radial-gradient(circle max(var(--lr),.01px) at var(--mx,50%) var(--my,50%),#0000,#000)}
.brand.lens>.blur-copy{--h:1.6;pointer-events:none;-webkit-mask:radial-gradient(circle max(var(--lr),.01px) at var(--mx,50%) var(--my,50%),#000,#0000);mask:radial-gradient(circle max(var(--lr),.01px) at var(--mx,50%) var(--my,50%),#000,#0000)}   /* the beat only blurs it: the shadow stays where it is, so the name rumbles in place instead of bouncing down. Without --k (away from the hero, other pages) it rests crisp */
.brand:active{--k:-.5!important}   /* !important beats the inline --k fabric.js sets */
.icon-btn{display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;background:none;color:var(--ink);transition:color .15s,transform .1s}
@media (hover:hover){.icon-btn:hover{color:var(--blue-ink)}}
.icon-btn:active{transform:scale(.95)}
.burger{margin-right:-12px}
.bars{display:grid;gap:5.5px;width:24px}
.bars i{display:block;height:2.5px;background:currentColor;transition:transform .3s var(--ease),opacity .2s;will-change:transform}   /* 2.5 + 5.5 = the 8px the X folds by; will-change keeps one weight before, during and after the fold */
.burger[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* cart: open-top basket with the count inside, two digits at most (99) */
.cart{width:52px}
.cart svg{width:36px;height:32px;overflow:visible}
.cart .s{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:miter;stroke-linecap:square}
.cart text{fill:currentColor;font:700 15px var(--body);font-variant-numeric:tabular-nums;text-anchor:middle}
.cart text.two{font-size:12px;letter-spacing:-.6px}

/* menu: drops from the bar and turns chrome; the header joins it */
.menu{position:fixed;left:0;right:0;top:var(--top);bottom:0;z-index:29;overflow-y:auto;overscroll-behavior:contain;background:var(--chrome);color:var(--ink);
  padding-bottom:env(safe-area-inset-bottom,0px);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .4s var(--ease),visibility 0s linear .4s}
.menu[data-open="true"]{clip-path:inset(0);visibility:visible;transition:clip-path .4s var(--ease)}
@media (min-width:1024px){.menu{bottom:auto;border-bottom:1px solid var(--steel)}}
.menu-in{display:grid;gap:32px;padding-block:12px 40px}
@media (min-width:1024px){.menu-in{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:64px;padding-block:24px 48px}}
.menu-main a{display:flex;align-items:center;gap:.5em;padding-block:10px;border-bottom:1px solid rgba(17,18,20,.22);text-decoration:none;color:var(--ink);
  font:750 clamp(1.45rem,1.1rem + 1.4vw,2rem)/1.1 var(--body);font-stretch:115%;transition:padding .2s var(--ease),color .15s}
.mi{flex:none;width:.95em;height:.95em;fill:currentColor;transition:color .15s}
.mi.big{width:1.15em;height:1.15em;margin-inline:-.1em}   /* the console is tall and narrow: a bigger box so it weighs the same as the others, without moving the label */
.menu-main a.go{color:var(--blue-ink)}   /* the one thing to do: Book a consultation is the only blue item */
@media (hover:hover){.menu-main a:hover{padding-left:8px}.menu-main a:not(.go):hover .mi{color:var(--blue-ink)}}
.menu-side{display:grid;gap:8px;align-content:start;justify-items:end;text-align:right;color:#3C4046}   /* address, hours, phone, Instagram: set to the right edge */
.menu-side a{color:var(--ink);font-weight:650}
.ig{display:inline-flex;align-items:center;gap:8px}
.ig svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2}.ig .dot{fill:currentColor;stroke:none}   /* the Instagram glyph after the handle */
.menu a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
body:has(.menu[data-open="true"]) .hdr{--hb:var(--chrome);border-bottom-color:rgba(17,18,20,.22)}
@media (prefers-reduced-motion:reduce){.menu,.menu[data-open="true"],.hdr,.brand{transition:none}}
/* maps bubble: grows out of the tapped point (--tx is that point inside the bubble); the tail points back at it */
.mapb{position:fixed;z-index:60;display:grid;min-width:13.5rem;padding:6px;border-radius:14px;--mb:#2A2D32;background:var(--mb);box-shadow:0 0 0 1px rgba(255,255,255,.16),0 12px 32px rgba(17,18,20,.3);transform-origin:var(--tx) 100%}   /* a step lighter than ink, with a hairline, so it also reads on the ink footer */
.mapb[data-up="false"]{transform-origin:var(--tx) 0}
.mapb::after{content:"";position:absolute;left:var(--tx);top:calc(100% - 1px);width:16px;height:9px;margin-left:-8px;background:var(--mb);clip-path:polygon(0 0,100% 0,50% 100%)}
.mapb[data-up="false"]::after{top:auto;bottom:calc(100% - 1px);clip-path:polygon(50% 0,100% 100%,0 100%)}
.mapb a{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 16px 0 10px;border-radius:9px;color:#fff;font-weight:650;text-decoration:none}
.mapb a+a{border-top:1px solid rgba(255,255,255,.16);border-radius:0 0 9px 9px}
.mapb a:active{background:rgba(255,255,255,.14)}
.mapb svg{flex:none;width:22px;height:22px;fill:currentColor}
.mapb :focus-visible{outline-color:#6EA8FF}
@media (hover:hover){.mapb a:hover{background:rgba(255,255,255,.14)}}

main{padding-top:var(--top);overflow-x:clip}   /* the content clips its own sides: iPhones let a diagonal swipe pan the page sideways to anything poking past the edge (the carousel's hidden side cards), even with the body clipped. clip, not hidden, so the sticky sections still stick */
body>footer{overflow-x:clip}

/* 1. hero: the name pressed up through a rubber sheet */
.hero{position:relative;z-index:0;height:calc(100svh - var(--top));min-height:440px;overflow:hidden;background:var(--page)}   /* own stacking context: the rising photo slides over the tagline, not under it */
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s var(--ease)}
.hero.gl canvas{opacity:1}
/* without WebGL (or before it starts): the same name as letterpress */
.press{position:absolute;inset:0 16px 22%;display:grid;place-content:center;text-align:center;font:400 clamp(3.4rem,1rem + 11vw,11rem)/.95 var(--script);
  color:#3C4046;text-shadow:0 1px 0 #fff,0 -1px 0 rgba(17,18,20,.35);transition:opacity .6s var(--ease)}
.press span{display:block}
@media (min-width:620px) and (min-aspect-ratio:13/10){.press span{display:inline}}
.hero.gl .press{opacity:0}
.js .hero:not(.nogl) .press{visibility:hidden}   /* JS on: no plain name flashing before the cloth; fabric.js adds .nogl only when the 3D can't run */
.tagline{position:absolute;left:0;right:0;bottom:10%;z-index:2;text-align:center;padding-inline:16px;
  font:750 clamp(1.35rem,.9rem + 2.4vw,2.6rem)/1.05 var(--body);font-stretch:122%;letter-spacing:-.01em;text-wrap:balance}

/* 2. the image that rises: slot for the owner's sound-logo animation */
.rise{position:relative;z-index:1;padding-top:16px;margin-bottom:16px}
@media (min-width:620px){.rise{padding-top:24px;margin-bottom:24px}}
.rise-fig{position:relative;margin-inline:auto;width:min(100% - 32px,1200px)}
.rise-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 60%}
@media (min-width:620px){.rise-fig img{object-position:50% 75%}}   /* the '66 Impala: whole car, both bumpers, inside the 16:9 crop */
@media (max-width:619px){.rise-fig{width:100%}.rise-fig img{aspect-ratio:4/5}}
.rise-fig figcaption{margin-top:10px;padding-inline:16px 0}
@media (min-width:620px){.rise-fig figcaption{padding-inline:0}}

/* 3. intro */
.intro{padding-block:72px 56px}
@media (min-width:1024px){.intro{padding-block:120px 96px}}
.intro p{max-width:34ch;font:500 clamp(1.4rem,1rem + 1.6vw,2.15rem)/1.25 var(--body);font-stretch:104%;letter-spacing:-.005em}
.intro .cap{margin-top:20px;max-width:none;font-size:.95rem}

/* 4. rolling menu: the client's categories in three bands. a2.js rolls them; swipe, drag or trackpad moves a band; every name is a link */
.marq{position:relative;z-index:2;padding-block:8px 0;border-block:1px solid var(--chrome)}   /* z-index: the chip hangs over the top of the next section */
/* "Tap me" with a pointing hand, dead centre on the middle band. a2.js shows it 1.5 s after the bands come into view, once per visit.
   Concave corners (scooped by the mask) so it reads as a tag laid on the band, not a button */
.marq-hint{position:absolute;inset:0;z-index:1;width:max-content;height:max-content;margin:auto;display:none;align-items:center;gap:7px;padding:11px 18px 11px 14px;
  background:var(--ink);color:var(--page);font:650 .95rem/1 var(--body);font-stretch:100%;pointer-events:none;
  -webkit-mask:radial-gradient(circle 9px at 0 0,#0000 98%,#000) top left/51% 51% no-repeat,radial-gradient(circle 9px at 100% 0,#0000 98%,#000) top right/51% 51% no-repeat,radial-gradient(circle 9px at 0 100%,#0000 98%,#000) bottom left/51% 51% no-repeat,radial-gradient(circle 9px at 100% 100%,#0000 98%,#000) bottom right/51% 51% no-repeat;
  mask:radial-gradient(circle 9px at 0 0,#0000 98%,#000) top left/51% 51% no-repeat,radial-gradient(circle 9px at 100% 0,#0000 98%,#000) top right/51% 51% no-repeat,radial-gradient(circle 9px at 0 100%,#0000 98%,#000) bottom left/51% 51% no-repeat,radial-gradient(circle 9px at 100% 100%,#0000 98%,#000) bottom right/51% 51% no-repeat}
.marq-hint.show{display:flex}
.marq-hint svg{flex:none;fill:currentColor}
@media (prefers-reduced-motion:no-preference){.marq-hint.show svg{animation:tap-nudge .6s ease-in-out .2s 2}}
@keyframes tap-nudge{50%{transform:translateY(-3px)}}
.band{position:relative;overflow:hidden;padding-block:6px;border-bottom:1px solid var(--chrome)}
.band:last-of-type{border-bottom:0}
.track{display:flex;width:max-content}
.track>div{display:flex;align-items:baseline;gap:.42em;padding-right:.42em;font-size:clamp(2.2rem,1.4rem + 3.6vw,4.8rem);line-height:1.08;white-space:nowrap;text-transform:uppercase}
.track b{font-weight:inherit}
.band{touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.band.dragging{cursor:grabbing}
.track{will-change:transform}
.track a{padding-block:3px;color:inherit;text-decoration:none;cursor:pointer;-webkit-user-drag:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
@media (hover:hover){.track a:hover{color:var(--blue-ink)}}
/* tap: blue floods the letters from the tapped point. a2.js sets --tx, --ty (the point) and --rr (the reach), then opens the link */
@property --r{syntax:"<length>";inherits:false;initial-value:0px}
.track a.tap{background:radial-gradient(circle at var(--tx) var(--ty),var(--blue) var(--r),currentColor calc(var(--r) + 1px));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:tap-fill .22s ease-out forwards}
@keyframes tap-fill{to{--r:var(--rr)}}
.track a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.band.main .track>div{font-size:clamp(3rem,1.6rem + 6vw,7.5rem)}   /* Center consoles: the biggest band */
@media (prefers-reduced-motion:reduce){.track{flex-wrap:wrap;width:auto}.track>div{flex-wrap:wrap;white-space:normal}.band{cursor:auto}}

/* 5. five makes, synced to scroll */
.makes{position:relative}
.mk-head{padding-block:56px 20px}
.mk-head .lead{margin-top:10px}
.mk-name{display:block;padding:0;border:0;background:none;text-align:left;font:400 clamp(3.1rem,1.6rem + 5.4vw,6.4rem)/1 var(--script);color:var(--ink);transition:color .35s var(--ease)}
.mk-info{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-top:8px}
.mk-models{font:600 1.05rem/1.3 var(--body);font-stretch:108%;color:var(--muted)}
.mk-info a{display:inline-flex;align-items:center;min-height:44px;font-weight:650}
.mk-fig{position:relative;margin:0}
.mk-fig img,.mk-fig .slot{width:100%;aspect-ratio:4/3;object-fit:cover}
.slot{display:grid;place-content:center;justify-items:center;gap:10px;padding:16px;background:var(--soft);text-align:center;box-shadow:inset 0 0 0 1.5px var(--edge)}
.slot .need{font-size:1rem;white-space:normal}
.mk-fig figcaption{margin-top:8px}
/* plain list: no JS, reduced motion, or before the script runs */
.mk-list{display:grid;gap:56px;padding-bottom:72px}
@media (min-width:768px){.mk-list>li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:'name fig' 'info fig';column-gap:40px}
  .mk-list .mk-name{grid-area:name;align-self:end}.mk-list .mk-info{grid-area:info;align-self:start}.mk-list .mk-fig{grid-area:fig}}
@media (max-width:767px){.mk-list>li{display:flex;flex-direction:column;gap:8px}.mk-list .mk-fig{order:-1;margin-bottom:8px}}
/* synced: sticky stage, the rail notches one name at a time. a2.js sets each name's offset from the scroll position */
.sync .makes{height:390svh}   /* 0.35 screen of pre-roll, then about 0.6 screen per name; the last one holds .35 */
html.mk-snapping{scroll-snap-type:y proximity}
.mk-snap{position:absolute;left:0;width:1px;height:1px;scroll-snap-align:start;pointer-events:none}
#rides-h{color:var(--blue-ink)}
.sync .mk-stage{position:sticky;top:var(--top);height:calc(100svh - var(--top));overflow:hidden}
.sync .mk-grid{display:grid;height:100%;grid-template-rows:auto minmax(0,1fr);gap:12px;padding-block:16px 12px}
.sync .mk-head{padding:0}
.sync .mk-head .lead{display:none}
.sync .mk-list{position:relative;display:block;height:100%;padding:0}
.sync .mk-list>li{display:block}
.sync .mk-name{position:absolute;left:0;top:0;z-index:2;white-space:nowrap;transform-origin:0 0;will-change:transform,opacity}
.sync .mk-name:not(.on){color:var(--grey-lg)}
.sync .mk-info{position:absolute;left:0;top:0;z-index:2;margin:0;opacity:0;visibility:hidden}
.sync .mk-fig{position:absolute;left:0;right:0;top:0;height:44%;display:flex;flex-direction:column;opacity:0;will-change:transform,opacity}
.sync .mk-fig img,.sync .mk-fig .slot{flex:1;min-height:0;height:auto;aspect-ratio:auto}
/* phones: Shop parts rises over the empty bottom of the make stage (a2.js sets its margin and lift); a rule grows from the middle once past Pontiac */
@media (max-width:767px){
  .sync #parts{position:sticky;z-index:3;padding-top:20px;border-top:0;background:var(--page)}   /* the section rule is replaced by the one that grows */
  .sync #parts::before{content:"";position:absolute;left:16px;right:16px;top:0;height:1.5px;background:var(--ink);transform:scaleX(0);transition:transform .5s var(--ease)}
  .sync #parts.ln::before{transform:none}
}
@media (min-width:768px){.sync .mk-fig{left:46%;top:6%;height:88%}}
@media (max-width:767px){.sync .mk-fig{padding-bottom:20px}}   /* phone: the blackletter ascenders of the name above the selected one rise past its box; keep them off the photo */
#parts{padding-top:40px}
@media (min-width:1024px){#parts{padding-top:48px}}

/* 6. shop: grid, sort, 3/4 per row toggle (2/3 on phones) */
/* each section opens on a full-bleed hairline, the same rule the rolling bands use; the big heading sits 48/64px under it */
main > .sec{border-top:1px solid var(--chrome)}
.sec{padding-block:48px 56px}
@media (min-width:1024px){.sec{padding-block:64px 72px}}
.sec-head{display:grid;gap:12px;margin-bottom:28px}
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;min-height:60px;margin-bottom:20px;border-block:1px solid var(--chrome)}
.count{margin-right:auto;font:600 .95rem/1 var(--body);color:var(--muted)}
.sort{display:flex;align-items:center;gap:8px}
.lab{font:600 .95rem/1.3 var(--body);color:var(--muted)}
.select{appearance:none;min-height:46px;padding:0 34px 0 12px;border:1.5px solid var(--edge);border-radius:2px;color:var(--ink);font:500 1rem var(--body);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111214' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center}
@media (hover:hover){.select:hover{border-color:var(--ink)}}
.grid-btn{width:46px;height:46px;border:1.5px solid var(--edge);border-radius:2px;background:#fff}
.grid-btn svg{width:22px;height:22px;fill:currentColor}
.grid{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:36px 14px}
@media (min-width:768px){.grid{gap:48px 24px}}
.card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;transform-origin:0 0;min-width:0}
/* the name is the card's one link, stretched over the whole card: the photo, price and stock open the part's page. The button sits above it and keeps its own job */
.card-link{color:inherit;text-decoration:none}
.card-link::after{content:"";position:absolute;inset:0}
.card-link:focus-visible{outline:none}.card-link:focus-visible::after{outline:2px solid var(--blue);outline-offset:4px}
@media (hover:hover) and (pointer:fine){.card:hover .card-link{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.15em}}
.card h3{font-size:1.1rem;min-height:2.3em}
.tile{position:relative;width:100%;aspect-ratio:4/3;margin-bottom:6px;background:var(--soft);overflow:hidden}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
@media (hover:hover){.card:hover .tile img{transform:scale(1.04)}}
.card .cat{font:600 .85rem/1.3 var(--body);color:var(--muted)}
.stock{display:inline-flex;align-items:center;gap:8px;min-height:24px;font:600 .9rem/1 var(--body)}
.stock::before{content:"";flex:none;width:10px;height:10px}
.stock.in{color:var(--go)}.stock.in::before{background:var(--go)}
.stock.low{color:var(--low)}.stock.low::before{box-shadow:inset 0 0 0 1.5px var(--low);background:linear-gradient(90deg,var(--low) 50%,transparent 50%)}
.stock.special{color:var(--go)}.stock.special::before{box-shadow:inset 0 0 0 1.5px var(--go)}
.stock.out{color:var(--red)}   /* red is only ever out of stock */
.card .need{margin-bottom:8px}
.tile .slot{position:absolute;inset:0}
.card .price{font:700 1.05rem/1.3 var(--body);margin-bottom:8px}
.card .btn{position:relative;z-index:1;margin-top:auto;width:100%;min-height:44px;padding:0 10px;font-size:.95rem}
.grid.dense{gap:28px 10px}
.grid.dense .card h3{font-size:.98rem}
.grid.dense .card .btn{font-size:.85rem}
@media (max-width:767px){.grid.dense .card .cat{display:none}.grid.dense .stock,.grid.dense .need{font-size:.8rem}}
.empty-grid{grid-column:1/-1;padding:32px 0;color:var(--muted)}
.all{margin-top:40px}
#parts .sec-head{display:flex;flex-wrap:nowrap;align-items:baseline;gap:16px;container-type:inline-size}
#parts-h{flex:none;font-size:min(clamp(4.2rem,1.4rem + 13vw,13.5rem),18.5vw,(100cqw - 5.75rem) / 4.1)}   /* "SHOP PARTS" is 4.04 times its size wide: it never grows past the room beside "Shop all", so the two always share a line */
.all-link{flex:none}
@media (min-width:1024px){#parts .sec-head{justify-content:space-between}}   /* PC: Shop all at the right edge, above the column toggle */
.all-link{display:inline-flex;align-items:center;min-height:44px;font:650 1.125rem/1 var(--body);color:var(--blue-ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.2em}   /* Shop all: plain blue text beside the heading */
.fitband{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:20px;padding:14px 16px;background:var(--soft)}
.fitband p{margin-right:auto}

/* 7. builds: one photo centred, the next and last peeking */
.builds{overflow:hidden;padding-bottom:40px}
@media (min-width:1024px){.builds{padding-bottom:40px}}
.builds .sec-head{margin-bottom:24px}
/* about 70vw on phones, so roughly 45px of each neighbour shows past an 8px gap */
.car-track{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
  --sw:min(70vw,940px,(100svh - var(--top) - 230px) * 1.5);padding-inline:calc((100% - var(--sw)) / 2);padding-block:4px 0}
@media (min-width:620px){.car-track{gap:16px}}
@media (min-width:1600px){.car-track{--sw:min(62vw,1120px,(100svh - var(--top) - 230px) * 1.5)}}
.car-track::-webkit-scrollbar{display:none}
.car-track:focus-visible{outline-offset:-2px}
.car-track.drag{scroll-snap-type:none;cursor:grabbing;user-select:none}
.slide{flex:0 0 var(--sw);scroll-snap-align:center;margin:0}
.slide-in{transform-origin:50% 50%;will-change:transform}
.slide figcaption{transition:opacity .25s}
.js .slide:not(.on) figcaption{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}   /* only the centred slide's caption shows, so no faded text */
.slide img{width:100%;aspect-ratio:3/2;object-fit:cover;-webkit-user-drag:none;user-select:none}
@media (max-width:619px){.slide img{aspect-ratio:4/5}}
/* caption: the title wraps on the left, "See the post" always sits on the right, never on top of it */
.slide figcaption{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px;margin-top:6px}
.slide figcaption span{padding-top:12px;font:500 .95rem/1.3 var(--body)}
.slide figcaption a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;white-space:nowrap}
.car-ctl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:8px}
/* the gallery button: nine upright blocks, three by three */
.gal-btn{width:52px;height:52px}
.blocks{display:grid;grid-template-columns:repeat(3,5px);grid-auto-rows:7px;gap:2px}
.blocks i{display:block;background:currentColor}
.arrow{width:52px;height:52px;border:1.5px solid var(--ink);border-radius:50%;background:none}
@media (hover:hover){.arrow:hover{background:var(--ink);color:var(--page)}}
.arrow:disabled{border-color:var(--chrome);color:var(--steel);background:none}
.arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}

/* 6b. CAROUSEL TEST (start): curved, looping, auto-spinning row. Delete this block with the test code in a2.js.
   Square corners, no filters, no fades. The arc is a small rotateY plus depth per card, set in a2.js. */
.ctest .car-ctl{margin-top:8px}
.ct{--gap:8px;--cw:62vw;position:relative;height:calc(var(--cw) * 1.25 + 120px)   /* photo, its caption, and room for the lowered side cards' captions */;margin-top:4px;perspective:calc(var(--cw) * 4);touch-action:pan-y;user-select:none;-webkit-user-select:none;overflow:hidden}
@media (min-width:620px){.ct{--gap:28px;--cw:300px}}
@media (min-width:1600px){.ct{--gap:38px;--cw:380px}}   /* wide screens: a bigger Carousel Test, like the slider. Its depth (perspective, 4 card widths) grows with the cards, so the tilted side cards never spread into each other */
.ct:focus-visible{outline-offset:-2px}
.ct.drag{cursor:grabbing}
.ct-card{position:absolute;left:calc(50% - var(--cw) / 2);top:0;width:var(--cw);aspect-ratio:auto;height:auto;margin:0;overflow:hidden;border-radius:0;background:none;backface-visibility:hidden}
.ct-card img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:var(--soft);-webkit-user-drag:none;user-select:none;pointer-events:none}
/* the caption sits under the photo on the page colour, so the contrast is exact */
.ct-strip{position:static;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:0 10px 0 12px;background:none;color:var(--ink);font:600 .95rem/1.2 var(--body)}
.ct-strip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-strip a{display:inline-flex;align-items:center;min-height:44px;color:var(--blue-ink);text-decoration:underline;white-space:nowrap}
/* CAROUSEL TEST (end) */

/* 7b. full gallery: the Wall Layout Kit's wall on a logo-blue floor. The header stays on top */
html.gal-open{overflow:hidden}
.gal{position:fixed;left:0;right:0;top:var(--top);bottom:0;z-index:25;background:var(--blue);color:#fff;overflow:hidden}
.wall{position:absolute;left:0;right:0;top:0;height:calc(100vh - var(--top));height:calc(100lvh - var(--top));overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.wall:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.wall-plane{position:absolute;inset:0;transform-origin:50% 50%;perspective:520px;will-change:transform}
/* explicit resets, never all:unset (the kit measured that it doubles the per-frame cost) */
.wall-cell{appearance:none;margin:0;border:0;outline:0;font:inherit;color:inherit;text-align:inherit;letter-spacing:inherit;text-transform:inherit;cursor:inherit;box-sizing:border-box;
  position:absolute;left:0;top:0;display:flex;flex-direction:column;width:var(--cw);height:var(--ch);padding:calc(var(--ch) * .05) calc(var(--cw) * .06) 0;
  border-right:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);background:var(--blue);-webkit-tap-highlight-color:transparent;transition:background-color .5s;backface-visibility:hidden}
.wall-cell.on{background:#1A62C4}   /* white text 5.9:1 */
.wall-img{flex:1;min-height:0;overflow:hidden;border-radius:0;background:var(--c,#174f9c)}
.wall-img img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.wall-img img.ld{opacity:1}
.wall-cell.out img{visibility:hidden}
.wall-cap{display:flex;justify-content:space-between;align-items:center;gap:8px;height:calc(var(--ch) * .19);font:500 12px/1 var(--body);color:#fff;white-space:nowrap}
.wall-cap b{overflow:hidden;text-overflow:ellipsis;font-weight:650}
.wall-cap span{flex:none}
.wall-load{position:absolute;left:0;right:0;top:40%;text-align:center;color:#fff;font-size:1rem}
@media (max-width:619px){.wall-cap span{display:none}}
/* the page-coloured cover starts as the whole gallery and shrinks into the Back button: the white page becomes the button, the rest turns blue */
.gal-cover{position:absolute;inset:0;z-index:3;background:var(--page);pointer-events:none}
.gal-cover[hidden]{display:none}
.back{position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:4;translate:-50% 0;display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 20px 0 14px;border:0;border-radius:999px;background:var(--page);color:var(--ink);font:650 1.05rem/1 var(--body);box-shadow:0 6px 18px rgba(8,20,40,.22)}   /* the shadow lifts it off the photos */
.back.bare{background:none;box-shadow:none}
.back:active{transform:translateY(1px)}
.back-arrow{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
@media (hover:hover){.back:hover span{text-decoration:underline;text-underline-offset:.2em}}
/* white X at the top right, above an open photo too (it closes the photo first); the dark disc keeps it visible over photos */
.gal-x{position:fixed;top:calc(var(--top) + 12px);right:max(12px,env(safe-area-inset-right,0px));left:auto;z-index:303;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:999px;background:rgba(9,16,32,.32);color:#fff}
.gal-x svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.4}
@media (hover:hover){.gal-x:hover{background:rgba(9,16,32,.5)}}
.gal-x:active{transform:scale(.94)}
/* photo flights: carousel photos fly into their wall tiles. Above the gallery (25), under the header (30) */
.fly{position:fixed;left:0;top:0;z-index:26;overflow:hidden;transform-origin:0 0;will-change:transform,clip-path;pointer-events:none}
.fly img{width:100%;height:100%;object-fit:cover}
/* the open photo (kit .pop*): the page darkens, the caption is white text under the photo */
.pop{position:fixed;inset:0;z-index:300;touch-action:none;-webkit-tap-highlight-color:transparent}
.pop[hidden]{display:none}
.pop-shield{position:fixed;inset:0;z-index:301;touch-action:none;-webkit-tap-highlight-color:transparent}
.pop-shield[hidden]{display:none}
.pop::before{content:"";position:absolute;inset:0;background:rgba(9,13,22,.84);opacity:0;transition:opacity .45s}
.pop.in::before{opacity:1}
.pop-frame{position:absolute;margin:0;overflow:hidden;background:#174f9c;transform-origin:0 0;will-change:transform,clip-path}
.pop-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pop-frame .hi{opacity:0;transition:opacity .35s}
.pop-frame .hi.ld{opacity:1}
.pop-cap{position:fixed;z-index:302;margin:0;padding:0;overflow:hidden;background:none;color:#fff}   /* the caption slides out from behind the photo: its box starts at the photo's bottom edge */
.pop-cap-in{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:52px;padding:8px 2px;font:600 1rem/1.3 var(--body);translate:0 -100%;opacity:0;transition:translate .3s cubic-bezier(.4,0,1,1),opacity .2s}
.pop-cap.in .pop-cap-in{translate:0 0;opacity:1;transition:translate .26s .06s cubic-bezier(.2,.7,0,1),opacity .18s .06s}
.pop-cap a{display:inline-flex;align-items:center;min-height:44px;color:#fff;text-decoration:underline;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.pop-cap-in,.pop-cap.in .pop-cap-in,.pop::before{transition:none}}

/* 7c. category pages (parts.html): vehicle boxes, option cards, colour swatches */
.cat-body{margin-top:28px}
.veh{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0;margin:0 0 32px;padding:0;border:0}
@media (min-width:900px){.veh{grid-template-columns:repeat(var(--n),minmax(0,1fr))}}
.veh-box{position:relative;display:block}
.veh-box input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.veh-box span{display:grid;align-content:center;gap:4px;height:100%;min-height:96px;padding:14px 16px;border:1.5px solid var(--edge);border-radius:2px;background:#fff;color:var(--ink)}
.veh-box b{font:400 clamp(1.7rem,1.3rem + 1.4vw,2.6rem)/1 var(--script)}
.veh-box small{font:600 .9rem/1.3 var(--body);color:var(--muted)}
.veh-box input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--page)}
.veh-box input:checked+span small{color:#C3C7CD}
.veh-box input:focus-visible+span{outline:2px solid var(--blue);outline-offset:3px}
@media (hover:hover){.veh-box:hover span{border-color:var(--ink)}}
.cat-grid{display:grid;gap:24px}
.cat-grid>div>p:first-child{margin:0 0 16px}   /* the Price / Products tag above its buttons */
@media (min-width:900px){.cat-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px;align-items:start}}
.cat-fig{margin:0}
.cat-fig img,.cat-fig .slot{width:100%;aspect-ratio:4/3;object-fit:cover}
/* a part's own page (parts.html?p=): the build pages' photo-and-details grid; the name in the headings' face */
.part{display:grid;gap:14px;justify-items:start;align-content:start}
.part-h{font:800 clamp(2.6rem,1.4rem + 3vw,4.6rem)/.92 "Big Shoulders Display",var(--body);text-transform:uppercase;letter-spacing:.005em;text-wrap:balance}
.part .cat{font:600 1rem/1.3 var(--body);color:var(--muted)}
.part .price{font:700 1.6rem/1.2 var(--body);font-variant-numeric:tabular-nums}
.part .btn{min-width:min(100%,18rem)}
@media (max-width:899px){.part .btn{width:100%}}   /* phones: full width, like the other main buttons */
.cat-body:has(>.part-back){margin-top:8px}   /* a part page starts with its back link, not a gap */
.part-book{font-weight:600}
.part-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:-8px 0 16px;color:var(--ink);font-weight:650;text-decoration:none}
.part-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
@media (hover:hover){.part-back:hover{color:var(--blue-ink)}}
/* the picked colour crossfades in over the real photo (offline pixel recolours of the same shot) */
.tint{position:relative}
.tint-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .16s ease-out}
.tint-v.on{opacity:1}
@media (prefers-reduced-motion:reduce){.tint-v{transition:none}}
.opts{display:grid;gap:10px}
@media (min-width:560px){.opts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.opt{position:relative;display:block}
.opt[hidden]{display:none}
.opt input{position:absolute;inset:0;opacity:0;margin:0}
.opt span{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:60px;padding:12px 16px;border:1.5px solid var(--edge);border-radius:2px;background:#fff;font:650 1.05rem/1.2 var(--body)}
.opt b{font:700 1.15rem/1 var(--body);font-variant-numeric:tabular-nums}
.opt input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--page)}
.opt input:focus-visible+span{outline:2px solid var(--blue);outline-offset:3px}
@media (hover:hover){.opt:hover span{border-color:var(--ink)}}
.tick{display:flex;align-items:center;gap:12px;min-height:44px;font:600 1rem/1.3 var(--body)}
.tick{position:relative}
.tick input{position:absolute;left:0;top:50%;width:24px;height:24px;margin:-12px 0 0;opacity:0;cursor:pointer}
.tick-box{flex:none;display:grid;place-items:center;width:24px;height:24px;border:2px solid var(--ink);border-radius:3px;background:#fff;transition:background .15s,transform .15s}
.tick-box svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .22s cubic-bezier(.65,0,.35,1) .04s}
.tick input:checked+.tick-box{background:var(--ink);transform:scale(1.06)}
.tick input:checked+.tick-box svg{stroke-dashoffset:0}
.tick input:focus-visible+.tick-box{outline:2px solid var(--blue);outline-offset:3px}
@media (hover:hover){.tick:hover .tick-box{border-color:var(--blue-ink)}}
@media (prefers-reduced-motion:reduce){.tick-box,.tick-box svg{transition:none}}
.swatches{display:flex;flex-wrap:wrap;gap:14px}
.sw{position:relative;display:grid;justify-items:center;gap:6px;font:500 .85rem/1.2 var(--body);color:var(--muted)}
.sw input{position:absolute;inset:0;opacity:0;margin:0}
.sw i{display:grid;place-items:center;width:48px;height:48px;border-radius:2px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.sw input:checked~i{outline:2px solid var(--ink);outline-offset:3px}
.sw input:focus-visible~i{outline:2px solid var(--blue);outline-offset:3px}
.sw.custom i{background:conic-gradient(#d32f2f,#fbc02d,#388e3c,#1976d2,#7b1fa2,#d32f2f)}
.sw.custom i::after{content:"";width:22px;height:22px;border-radius:50%;background:no-repeat center/12px 2px linear-gradient(var(--ink),var(--ink)),no-repeat center/2px 12px linear-gradient(var(--ink),var(--ink)),#fff}   /* a plus sign on a white dot */
.sw.custom.picked i{background:var(--c)}
.hex{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.total{display:flex;justify-content:space-between;align-items:baseline;padding-top:16px;border-top:1px solid var(--chrome);font-weight:650}
.total output{font:700 1.6rem/1 var(--body);font-variant-numeric:tabular-nums}
.fact{font-weight:600;color:var(--muted)}
.chips-row{display:flex;flex-wrap:wrap;gap:10px}
.build .after[hidden],.build fieldset[hidden]{display:none}
.build .after{display:grid;gap:32px}
.colors{gap:20px}

/* 8. book: one action block on the page colour */
.split{display:grid;gap:32px}
#book{padding-top:48px}
@media (min-width:1024px){#book{padding-top:64px}}
/* desktop: the form column grows gently with the screen (578 px at 1280, 758 at 1920, 990 at 2560); the photo fills the rest of the row, up to one screen tall. The form stays the taller side, so the section never scrolls further */
@media (min-width:1024px){.split{grid-template-columns:minmax(0,1fr) minmax(0,clamp(38rem,30vw + 12rem,52rem));gap:clamp(40px,4vw,72px);align-items:start}.split .side figure img{width:100%;max-height:calc(100svh - var(--top) - 72px)}.split .form{gap:24px}.split>.side{position:sticky;top:calc(var(--top) + 32px)}}
.side figure{margin-top:24px}
.side figure img{aspect-ratio:4/3;object-fit:cover}
.side figcaption{margin-top:8px}
.form{display:grid;gap:32px}
fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:12px}
legend,.field>label,.time-l{padding:0;margin-bottom:10px;font:650 1.15rem/1.2 var(--body);font-stretch:108%}
#book-form legend,#book-form .field>label,.time-l{display:block;font:750 1.375rem/1.15 var(--body);font-stretch:112%;margin-bottom:12px}   /* block: an inline label drops its bottom margin */
.input{width:100%;min-height:48px;padding:0 14px;border:1.5px solid var(--edge);border-radius:2px;background:#fff;font-size:1rem;transition:border-color .15s}
textarea.input{min-height:96px;padding:12px 14px;resize:vertical}
@media (hover:hover){.input:hover{border-color:var(--ink)}}
.input:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-color:var(--ink)}
/* PC and Mac: Your ride opens its list under the field (a2.js), not over it as the Mac's own menu does */
.pick{position:relative}
.pick-btn{display:block;padding-right:40px;text-align:left;color:var(--ink);font:500 1rem var(--body);cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111214' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center}
.pick-btn[aria-expanded="true"],.pick-btn:hover{border-color:var(--ink)}
.pick-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:6;max-height:min(24rem,55vh);overflow:auto;overscroll-behavior:contain;padding:6px 0;background:#fff;border:1.5px solid var(--ink);border-radius:2px;box-shadow:0 14px 34px rgba(17,18,20,.18)}
.pick-list:focus{outline:none}
.pick-list:focus-visible .pick-o.on{outline:2px solid var(--blue);outline-offset:-2px}
.pick-g{padding:10px 14px 4px;font:650 .82rem/1.2 var(--body);color:var(--muted)}
.pick-o{padding:10px 14px;cursor:pointer}
.pick-o.on{background:var(--soft)}
.pick-o[aria-selected="true"]{font-weight:700;color:var(--blue-ink)}
.input[aria-invalid="true"]{border-color:var(--red)}
.two{display:grid;gap:20px}
@media (min-width:620px){.two{grid-template-columns:1fr 1fr}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex;flex:none}
.chip input{position:absolute;inset:0;opacity:0;margin:0}
.chip span{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px 0 13px;border:1.5px solid var(--edge);border-radius:2px;background:#fff;font:500 1rem/1 var(--body);transition:border-color .15s,background .15s}
.chip span::before{content:"";flex:none;width:10px;height:10px;border:1.5px solid currentColor}
@media (hover:hover){.chip:hover span{border-color:var(--ink)}}
.chip input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--page)}
.chip input:checked+span::before{background:var(--page);border-color:var(--page)}
.chip input:focus-visible+span{outline:2px solid var(--blue);outline-offset:3px}
/* booking: four big tiles, then More as a small chip with a plus (it opens a note field), so the choice reads at a glance */
#wants{display:grid;grid-template-columns:1fr 1fr}
#wants .chip{display:flex}
#wants .chip span{flex:1;min-height:56px;font:600 1.0625rem/1.1 var(--body)}
#wants .chip:last-child{grid-column:1/-1;justify-self:start}
#wants .chip:last-child span{flex:none;min-height:44px;padding-right:18px}
#more-chip+span::before,#more-chip:checked+span::before{width:11px;height:11px;border:0;background:linear-gradient(currentColor,currentColor) center/11px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 11px no-repeat;transition:transform .2s var(--ease)}   /* a plus, drawn like the custom swatch's */
#more-chip:checked+span::before{transform:rotate(45deg)}   /* open: the plus turns to an x */
/* calendar */
.cal{max-width:30rem}
.cal-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.cal-top h3{font-size:1.1rem}
.cal-nav{width:44px;height:44px;border:1.5px solid var(--edge);border-radius:2px;background:#fff}
.cal-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
@media (hover:hover){.cal-nav:not(:disabled):not([aria-disabled="true"]):hover{border-color:var(--ink)}}
.cal-nav:disabled,.cal-nav[aria-disabled="true"]{color:var(--steel);border-color:var(--chrome)}   /* aria-disabled: the time arrows stay focusable at the ends */
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-dow{padding-block:4px;text-align:center;font:600 .85rem/1 var(--body);color:var(--muted)}
.day{position:relative;display:grid;place-items:center;min-height:46px;padding:0;border:1.5px solid transparent;border-radius:2px;background:#fff;font-weight:600;font-variant-numeric:tabular-nums}
@media (hover:hover){.day:not(:disabled):hover{border-color:var(--ink)}}
.day:disabled{background:none;color:#9A9EA4;font-weight:400}
.day.appt{background:var(--soft);color:var(--ink)}
.day.appt::after{content:"";position:absolute;left:50%;bottom:6px;width:14px;height:2px;margin-left:-7px;background:var(--muted)}
.day[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--page)}
.cal-key{margin-top:10px}
/* time: built from the calendar's parts, so it reads as the same form. The header is the calendar's (arrows either side, the readout in the middle, over the needle);
   the scale is a white strip like the inputs; the picked time turns ink like the picked day. a2.js fills .tune with one .tslot per half hour (not .slot: that is the photo placeholder) */
.time{display:grid;gap:0;max-width:30rem}
@media (min-width:1024px){.cal,.time{max-width:none}}   /* desktop: the calendar and time fill the form's column like its other fields */
.time,.tuner{min-width:0}   /* grid children: without this the 16 slots stretch the whole page wide on a phone */
.roll{display:flex;font:700 1.6rem/1 var(--body);font-stretch:112%;font-variant-numeric:tabular-nums}
.reel{display:inline-block;height:1em;overflow:hidden}
.tuner{position:relative;border-radius:2px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--edge)}
.tuner:has(.tune:focus-visible){outline:2px solid var(--blue);outline-offset:3px}
.tune{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;--tw:64px;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
/* spacers, not padding: every time (the first and last too) can stop dead centre under the needle. They carry pale ticks so the scale runs on past both ends */
.tune::before,.tune::after{content:"";flex:0 0 calc(50% - var(--tw)/2);background:linear-gradient(90deg,transparent calc(var(--tw)/2 - 1px),var(--chrome) calc(var(--tw)/2 - 1px) calc(var(--tw)/2 + 1px),transparent calc(var(--tw)/2 + 1px)) 0 14px/var(--tw) 12px repeat-x}
.tune::before{background-position:right 0 top 14px}
.tune::-webkit-scrollbar{display:none}
.tune:focus-visible{outline:none}   /* the ring is drawn on .tuner, outside the faded mask */
.tune.drag{scroll-snap-type:none;cursor:grabbing}
@media (pointer:coarse){.tune{touch-action:pan-y}}   /* phones: a2.js drives the sideways swipe (1:1, then an inertia glide onto a notch); up and down still scroll the page */
.tslot{flex:0 0 var(--tw);display:grid;justify-items:center;align-content:start;gap:6px;height:68px;padding:14px 0 0;border:0;background:none;color:var(--ink);scroll-snap-align:center;cursor:pointer;font:650 1rem/1 var(--body);font-variant-numeric:tabular-nums}
.tslot i{width:2px;height:12px;border-radius:1px;background:var(--steel);transition:background .15s}
.tslot.hr i{height:20px;background:var(--ink)}
.tslot:not(.hr) i{margin-bottom:8px}   /* :30 labels sit level with the hour labels */
.tslot span{padding:3px 5px;border-radius:2px;transition:background .15s,color .15s}
.tslot:not(.hr) span{font-size:.75rem;color:var(--muted)}
.tslot small{margin-left:.14em;font-size:1em;font-stretch:62%;font-weight:600}   /* AM/PM the same height as the hour, set narrow so it reads as a unit */
.tslot.on span,.tslot.on:not(.hr) span{background:var(--ink);color:var(--page)}   /* the picked time in ink, like the picked day */
.tslot.on i{background:var(--blue-ink)}
.tune-needle{position:absolute;left:50%;top:0;height:34px;width:2px;margin-left:-1px;background:var(--blue-ink);pointer-events:none}   /* from the strip's top edge down over the picked tick, clear of the label */
.tune-needle::before{content:"";position:absolute;left:50%;top:0;width:10px;height:6px;margin-left:-5px;background:var(--blue-ink);clip-path:polygon(0 0,100% 0,50% 100%)}
@media (max-width:619px){.tune{--tw:56px}}
.strip{display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.2,.9,.25,1.12)}
.strip b{display:block;height:1em;font-weight:inherit}
@media (prefers-reduced-motion:reduce){.strip{transition:none}}
.deposit{display:grid;gap:4px;padding:14px 0 0;border-top:1px solid var(--chrome)}
.when{font:700 1rem/1.2 var(--body);font-stretch:108%;font-variant-numeric:tabular-nums}
   /* the picked day and time, the last look before paying */
.msg:empty{display:none}
.msg{padding:12px 14px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--blue-ink)}
.msg.err{box-shadow:inset 0 0 0 1.5px var(--red);color:var(--red)}
.form .btn{justify-self:start}
.field-err{color:var(--red);font-size:.95rem}
.field-err:empty{display:none}

/* 9. visit: phone reads heading, photo (inside the margins), facts. Desktop keeps the photo left, facts right */
.visit{display:grid;gap:24px;grid-template-areas:"h" "fig" "facts" "how"}
.visit>h2{grid-area:h}.visit>figure{grid-area:fig}.visit-facts{grid-area:facts}.getting{grid-area:how}
.visit figure img{aspect-ratio:1;object-fit:cover}
@media (min-width:1024px){.visit{grid-template-columns:minmax(0,1fr) minmax(0,clamp(32rem,22vw + 14rem,44rem));grid-template-rows:auto 1fr;grid-template-areas:"h h" "fig facts" "how how";column-gap:72px;row-gap:24px;align-items:start}.visit>h2{align-self:end}}
/* visit facts: labels in the body face, the address, phone and days in the display face of the headings, details in Archivo */
.facts{display:grid;border-top:1.5px solid var(--ink)}
.facts .f{display:grid;gap:6px;align-content:center;padding-block:14px;border-bottom:1px solid var(--chrome)}
.facts dt{font:650 1.125rem/1.2 var(--body);font-stretch:108%;color:var(--muted)}
.facts dd{color:var(--ink)}
.facts .big{display:block;font:800 clamp(2rem,1.3rem + 2.2vw,2.9rem)/1 "Big Shoulders Display",var(--body);text-transform:uppercase;letter-spacing:.005em}
.facts .big a{color:var(--blue-ink);text-decoration-thickness:2px;text-underline-offset:.1em}
.facts .sub{display:block;margin-top:6px;font:650 1.25rem/1.3 var(--body);font-stretch:108%}
.facts .note{display:block;margin-top:2px;font:500 1.0625rem/1.4 var(--body);color:var(--muted)}
.facts dd>a{display:inline-flex;align-items:center;min-height:44px;margin-block:-4px -10px;font:650 1.125rem/1 var(--body)}
.svc{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.svc li{padding:6px 10px;border-radius:2px;background:var(--soft);font:600 .95rem/1.1 var(--body);font-stretch:104%}
/* wide screens: the four rows share the photo's full height, each centred in its share */
@media (min-width:1024px){.visit-facts{align-self:stretch;display:flex;flex-direction:column}.facts{flex:1;align-content:stretch}}
/* desktop: the photo fills the width the facts leave, at least 16:10, and grows with the facts when they run longer, so the two always end together */
@media (min-width:1024px){.visit>figure{position:relative;align-self:stretch}.visit>figure::before{content:"";display:block;padding-top:62.5%}.visit>figure img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}}
.dir{width:.62em;height:.62em;margin-left:.3em;vertical-align:.08em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}   /* Directions: a small arrow up and to the right, the way out */
/* copy: two clipboards after an address or phone link (a2.js draws them). --cut is the surface behind: it cuts the lines out of the front board and parts it from the back one */
.copy{display:inline-grid;place-items:center;position:relative;top:-.08em;width:44px;height:44px;margin:-12px 0;padding:0;border:0;border-radius:2px;background:none;color:inherit;vertical-align:middle;cursor:pointer}   /* middle centres it on the lowercase; -.08em lifts it to the middle of the capitals and digits (Archivo: cap .686, x-height .526) */
.copy:empty{display:none}   /* no JS: no icon, and nothing to copy with */
.copy svg{width:21px;height:21px;fill:currentColor}
.copy:active{transform:scale(.95)}
.menu-side .copy{--cut:var(--chrome);margin-right:-11.5px}   /* the icon, not its 44 px box, meets the right edge */
footer .copy{--cut:var(--ink)}
@media (hover:hover){.copy:hover{color:var(--blue-ink)}footer .copy:hover{color:#6EA8FF}}
.copy .c-ok,.copy.done .c-ln{display:none}
.copy.done .c-ok{display:inline}
.copy.done{color:var(--go)}
footer .copy.done{color:#7FD49B}
.visit figcaption{margin-top:8px}
/* getting here: two numbered steps under the photo and facts, full width. Side by side on wide screens, sized so both pictures share one height */
.getting{display:grid;gap:18px 24px;margin-top:16px;padding-top:24px;border-top:1.5px solid var(--ink)}
@media (max-width:767px){.getting{margin-top:0;padding-top:8px;border-top:0}}   /* phones: one rule (the grey one under Services) is enough */
.getting h3{grid-column:1/-1}
.visit .getting img{width:100%;aspect-ratio:auto;border-radius:2px;box-shadow:0 0 0 1px rgba(17,18,20,.12)}   /* whole pictures: the Visit photo rule crops square */
.getting figcaption{display:flex;align-items:center;gap:10px;margin-top:12px;font-weight:600}
.getting figcaption b{flex:none;font:800 1.25rem/1 var(--body);font-variant-numeric:tabular-nums;color:var(--ink)}
.getting figcaption b span{color:var(--blue)}   /* the step's period, in the site's blue */
@media (min-width:768px){.getting{grid-template-columns:2.45fr 1.86fr}}
/* about us: labelled slots until the owner sends his words and a photo */
.about{display:grid;gap:24px}
.about-ph{aspect-ratio:4/3}
@media (min-width:1024px){.about{grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:72px;align-items:start}.about>h2{grid-column:1/-1}}

/* 10. stories: placeholders until the shop writes them */
.stories{display:grid;gap:20px}
@media (min-width:620px){.stories{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.stories{grid-template-columns:5fr 4fr 4fr}}
.story{display:grid;gap:10px;align-content:start}
.story .ph{display:grid;place-items:center;aspect-ratio:16/9;background:var(--soft);box-shadow:inset 0 0 0 1.5px var(--edge)}
@media (min-width:1024px){.story .ph{aspect-ratio:4/3}.story:first-child .ph{aspect-ratio:4/3.4}}
.more{margin-top:32px}

#visit,#stories,body>footer{content-visibility:auto;contain-intrinsic-size:auto 900px}   /* PC speed: no layout or paint until near the screen */

/* 11. footer */
footer{padding-block:72px calc(40px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--chrome)}
footer .mark{font:400 clamp(3rem,1rem + 10vw,10rem)/.9 var(--script);color:var(--page);margin-bottom:36px}
.foot{display:grid;gap:24px}
@media (min-width:768px){.foot{grid-template-columns:repeat(3,minmax(0,1fr))}}
footer a{color:var(--page);display:inline-flex;align-items:center;min-height:0;padding-block:12px;margin-block:-12px}
footer :focus-visible{outline-color:#6EA8FF}
.sig{margin-top:40px;color:var(--steel)}
.sig a{color:var(--chrome)}

/* cart sheet: native modal dialog */
.sheet{position:fixed;inset:0 0 0 auto;margin:0;width:min(100%,var(--drawer));max-width:none;height:100%;max-height:none;padding:0;border:0;border-left:1px solid var(--chrome);background:var(--page);color:var(--ink)}
.sheet[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.sheet::backdrop{background:rgba(17,18,20,.55)}
@media (max-width:599px){.sheet{width:100%;border-left:0}}   /* phones: the whole screen */
#cart-title:focus{outline:none}   /* the sheet opens with focus on its title (read out first), not on the close button */
.sheet-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:env(safe-area-inset-top,0px) 8px 0 20px;border-bottom:1px solid var(--chrome)}
.sheet-top h2{font-size:1.6rem}
.x svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.8}
.lines{overflow:auto;padding:4px 20px 16px}
/* a cart line: photo, then the name with the price under it, then trash − 1 + on the same row. The name gets two lines at most and ends in … after that */
.line{display:grid;grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:"thumb nm qty";column-gap:12px;align-items:center;padding-block:14px;border-bottom:1px solid var(--chrome)}
.line .t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.25}
.line .nm{grid-area:nm;display:grid;gap:4px;justify-items:start;min-width:0}   /* start: the Price tag keeps its own width */
.line .thumb{grid-area:thumb;width:56px;aspect-ratio:4/3;object-fit:cover}
.line .nm small{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font:500 .85rem/1.3 var(--body);color:var(--muted)}
.line .nm .price{display:block;margin-top:2px}
.line .thumb.slot{display:block;background:var(--soft);box-shadow:inset 0 0 0 1.5px var(--edge)}
.qty{grid-area:qty;display:flex;align-items:center;gap:2px}
.qty button{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1.5px solid var(--edge);border-radius:2px;background:#fff;font-size:1.2rem;transition:border-color .15s,transform .1s}
@media (hover:hover){.qty button:not(:disabled):hover{border-color:var(--ink)}}
.qty button:disabled{color:var(--steel);border-color:var(--chrome);background:var(--page)}   /* − at 1: the line stays; the trash removes it */
/* the trash: borderless, so it reads apart from the − 1 + stepper. Its lid tips open on its left hinge when pointed at or focused */
.qty .del{margin-right:2px;border-color:transparent;background:none;color:var(--ink)}
.qty .del svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;overflow:visible}
.qty .del .lid{transform-origin:4px 6.5px;transition:transform .16s var(--ease)}
@media (hover:hover) and (pointer:fine){.qty .del:not(:disabled):hover{border-color:transparent}.qty .del:hover .lid{transform:rotate(-14deg)}}   /* beats the stepper's hover border */
.qty .del:focus-visible .lid{transform:rotate(-14deg)}
.qty .del:active{transform:scale(.95)}
@media (prefers-reduced-motion:reduce){.qty .del .lid{transition:none}}
.qty button:active{transform:translateY(1px)}
.qty span{min-width:2.2ch;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.empty{display:grid;gap:14px;justify-items:start;padding-top:20px}
.sheet-bottom{display:grid;gap:14px;padding:16px 20px calc(18px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--chrome);background:var(--soft)}
.sheet-bottom legend{font-size:1rem;margin-bottom:8px}
.sheet-bottom .btn{width:100%}
.subtotal{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:600}
/* under the checkout button: a lock and Secure checkout, then the marks Square's checkout takes, one ink colour, sized to the same visual weight */
.secure{display:grid;justify-items:center;gap:10px}
.secure p{display:flex;align-items:center;gap:6px;font:650 .9rem/1.2 var(--body);color:var(--ink)}
.secure p svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.pay-marks{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px;margin:0;padding:0;list-style:none;color:#3C4046}
.pay-marks svg{display:block;width:auto;fill:currentColor}
.toast{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;max-width:420px;margin-inline:auto;padding:16px 18px;background:var(--ink);color:var(--page);font-weight:600}

.page-top{padding-top:44px}
.page-h{font:750 clamp(2.4rem,1.4rem + 4vw,4.2rem)/1 var(--body);font-stretch:118%;letter-spacing:-.015em}

/* tap areas: rail names next to the selected one get 6px more above and below (still 44px+ once scaled to .78); only the centred Carousel Test card's link is live */
.sync .mk-name::before{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px}
.ct-card:not(.on) .ct-strip a{pointer-events:none}

/* section titles as page breakers: big condensed caps */
.brk{font:800 min(clamp(4.2rem,1.4rem + 13vw,13.5rem),18.5vw)/.84 "Big Shoulders Display",var(--body);letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
#book .brk{margin-bottom:28px}
#book .lead{margin-bottom:28px;font:500 clamp(1.25rem,1rem + 1vw,1.75rem)/1.35 var(--body);color:var(--ink);max-width:34ch}