/* BELOW THE GARAGE: basement.studio's rhythm (one statement, a logo grid, big project cards, results, four service
   columns, contact, a giant wordmark), in our palette: near-black, bone, one rust accent */
.garage-page .b{max-width:1320px;margin:0 auto;padding:96px 20px 0}
@media(max-width:760px){.garage-page .b{padding-top:72px}}
.garage-page .b-h{margin:0 0 22px;font:500 clamp(26px,3.2vw,40px)/1.1 var(--sans);letter-spacing:-.03em;padding-bottom:16px;border-bottom:1px solid var(--line)}
.garage-page .b-intro{padding-top:110px}
.garage-page .b-intro h1,.garage-page .b-intro h2{margin:0;font:600 clamp(56px,10.5vw,168px)/.9 var(--sans);letter-spacing:-.055em}
.garage-page .b-lead{margin:26px 0 0;max-width:30ch;font:400 clamp(20px,2.2vw,28px)/1.25 var(--sans);letter-spacing:-.015em;color:var(--dim)}
/* the clients: a grid of cells, each name a way into that client's page */
.garage-page .b-clients .b-h{margin-bottom:0;border-bottom:0}
.garage-page .logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media(min-width:900px){.garage-page .logos{grid-template-columns:repeat(4,1fr)}}
@media(max-width:359px){.garage-page .logos{grid-template-columns:minmax(0,1fr)}} /* (page zoom on a small phone: one name a row) */
.garage-page .logos li{display:flex;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.garage-page .logos a{flex:1;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;min-height:clamp(88px,8.6vw,124px);padding:14px 14px 16px 16px;text-decoration:none;font:600 clamp(18px,1.85vw,26px)/1.12 var(--sans);letter-spacing:-.02em;color:rgba(239,233,221,.8);transition:color .25s,background-color .25s}
@media(max-width:899px){.garage-page .logos a{min-height:80px}}
@media(min-width:900px){.garage-page .logos a{padding:18px 18px 22px 22px}}
.garage-page .logos a::after{content:"\2192";content:"\2192"/"";align-self:flex-start;flex:none;font:400 15px/1 var(--mono);color:var(--faint);transition:color .25s,transform .25s}
.garage-page .logos a:hover{color:var(--bone);background-color:rgba(239,233,221,.045)}
.garage-page .logos a:hover::after{color:var(--rust-text);transform:translateX(3px)}
.garage-page .logos a:focus-visible{outline:2px solid var(--rust-text);outline-offset:-3px;color:var(--bone)}
/* the work: big pictures in browser frames (the first one wide), each with its name, one line and tags under it;
   the whole card opens that client's page */
.garage-page .cards{list-style:none;margin:0;padding:0;display:grid;gap:44px 24px}
@media(min-width:760px){.garage-page .cards{grid-template-columns:1fr 1fr;gap:56px 24px}.garage-page .cards>li:first-child{grid-column:1/-1}.garage-page .cards>li:first-child .card img{aspect-ratio:2.2/1}}
.garage-page .card{display:grid;gap:18px;align-content:start;text-decoration:none}
.garage-page .card-pic{display:block;border:1px solid var(--line);background:#151413;transition:border-color .3s}
.garage-page .card-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line);font:400 11px/1 var(--mono);color:rgba(239,233,221,.55)}
.garage-page .card-bar i{width:7px;height:7px;border-radius:50%;border:1px solid rgba(239,233,221,.3)}.garage-page .card-bar span{margin-left:10px;letter-spacing:.02em}
.garage-page .card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 0;background:#151413;transition:filter .35s;filter:saturate(.9)}
.garage-page .card:hover .card-pic{border-color:rgba(239,233,221,.34)}
.garage-page .card:hover img{filter:none}
.garage-page .card:focus-visible{outline:2px solid var(--rust-text);outline-offset:6px}
.garage-page .card-t{display:grid;align-content:start;gap:8px}
.garage-page .card-t h3{margin:0;display:flex;align-items:baseline;gap:10px;font:500 clamp(22px,2vw,28px)/1.1 var(--sans);letter-spacing:-.025em}
.garage-page .card-t h3::after{content:"\2192";content:"\2192"/"";font:400 .68em/1 var(--mono);color:var(--faint);transition:color .25s,transform .25s}
.garage-page .card:hover h3::after,.garage-page .card:focus-visible h3::after{color:var(--rust-text);transform:translateX(3px)}
.garage-page .card-t p{margin:0;color:var(--dim);font-size:16.5px;max-width:52ch}
.garage-page .card-t .tags{margin-top:6px}
.garage-page .tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.garage-page .tags li{font:400 11.5px/1 var(--mono);color:var(--dim);border:1px solid var(--line);padding:6px 8px}
/* results: four figures */
.garage-page .figs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
@media(min-width:760px){.garage-page .figs{grid-template-columns:repeat(4,1fr)}}
.garage-page .figs li{padding:22px 18px 26px 0;border-bottom:1px solid var(--line);display:grid;gap:8px;align-content:start}
@media(min-width:760px){.garage-page .figs li{border-bottom:0;border-right:1px solid var(--line);padding-left:18px}.garage-page .figs li:first-child{padding-left:0}.garage-page .figs li:last-child{border-right:0}}
.garage-page .figs b{font:500 clamp(40px,4.6vw,64px)/1 var(--sans);letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.garage-page .figs span{color:var(--dim);font-size:16.5px}
.garage-page .figs em{font:400 11.5px/1 var(--mono);font-style:normal;color:var(--rust-text);letter-spacing:.06em;text-transform:uppercase}
.garage-page .b-results .figs{border-top:0}
.garage-page .figs small{font:400 12px/1.5 var(--mono);color:rgba(239,233,221,.62);letter-spacing:.02em}
/* services: four columns (two on tablets), each under a drawing of the service on one shared plate */
.garage-page .caps{display:grid;gap:44px}
@media(min-width:640px){.garage-page .caps{grid-template-columns:repeat(2,1fr);gap:48px 22px}}
@media(min-width:1100px){.garage-page .caps{grid-template-columns:repeat(4,1fr);gap:22px}}
.garage-page .caps h3{margin:0 0 8px;font:500 19px/1.2 var(--sans);letter-spacing:-.01em}
.garage-page .caps p{margin:0 0 14px;color:var(--dim);font-size:16.5px}
/* contact */
.garage-page .b-contact{padding-bottom:110px}
@media(max-width:760px){.garage-page .b-contact{padding-bottom:88px}}
.garage-page .b-mail{display:inline-block;max-width:100%;overflow-wrap:anywhere;font:500 min(clamp(30px,5.6vw,80px),7.4vw)/1 var(--sans);letter-spacing:-.045em;text-decoration:none;border-bottom:2px solid var(--line);padding-bottom:6px;transition:border-color .25s}
.garage-page .b-mail:hover{border-color:var(--rust)}.garage-page .b-mail:focus-visible{border-color:var(--rust);outline:2px solid var(--rust-text);outline-offset:6px}
.garage-page .b-more{display:inline-block;margin-top:26px;font:500 15px/1.4 var(--sans);color:var(--bone);text-decoration:none;border-bottom:1px solid var(--line);padding:6px 0 4px;transition:border-color .25s}.garage-page .b-more:hover{border-color:var(--rust)}.garage-page .b-more:focus-visible{border-color:var(--rust);outline:2px solid var(--rust-text);outline-offset:4px}
.garage-page .b-work .b-more{margin-top:40px}
.garage-page .b-contact .b-more{display:table;margin-top:30px}
.garage-page .b-phone{margin:18px 0 0;color:var(--dim)}.garage-page .b-phone a{text-decoration:none}
/* the content under the room follows the area you're in (it fades over) */
.garage-page .b-main [data-area]{transition:opacity .35s ease-out}
.garage-page .b-main [data-area].off{display:none}
.garage-page .b-main.swap [data-area]{opacity:0}
/* the toolbox's experiments as cards */
.garage-page .exp-cards{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:760px){.garage-page .exp-cards{grid-template-columns:repeat(3,1fr)}}
.garage-page .exp-cards a{display:block;text-decoration:none}.garage-page .exp-cards img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#151413;border:1px solid var(--line);transition:filter .3s;filter:saturate(.9)}
.garage-page .exp-cards a:hover img{filter:none}.garage-page .exp-cards h3{margin:12px 0 4px;font:500 18px/1.2 var(--sans)}.garage-page .exp-cards p{margin:0;color:var(--dim);font-size:16px}
/* an area's own heading already names the section that follows it: that section's title is kept for screen readers only */
.garage-page .b-main[data-area=services] #h-caps,.garage-page .b-main[data-area=work] #h-work,.garage-page .b-main[data-area=contact] #h-contact{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* no 3D: the drawers' experiments need the room, so the Toolbox goes; an empty list never shows */
.garage-page .b-exps:has(.exp-cards:empty){display:none}
/* drawings (the gear, the service plates): each traces itself in the first time it is seen
   (below.js); without code, or for visitors who ask for less motion, they are simply there */
.garage-page .draw [pathLength]{stroke-dasharray:1 1;stroke-dashoffset:0}
.garage-page .draw.pre [pathLength]{stroke-dashoffset:1}
.garage-page .draw.pre .fade{opacity:0}
/* the planetary gear: large, beside the opening words and cut off by the right edge of the screen (the section runs
   edge to edge so the cut lands on the screen's edge; its words keep the page's column), turning slowly while seen */
.garage-page .has-gear{position:relative;max-width:none;padding-top:140px;padding-inline:max(20px,calc((100% - 1280px) / 2))}
.garage-page .has-gear h1{max-width:6.4ch;position:relative}.garage-page .has-gear .b-lead{position:relative}
.garage-page .gear{--g:clamp(330px,44vw,640px);position:absolute;right:0;top:calc(50% + 70px);width:calc(var(--g) * .8);height:var(--g);transform:translateY(-50%);overflow:hidden;pointer-events:none}
.garage-page .gear svg{display:block;width:var(--g);height:var(--g)}
.garage-page .gear .sun{animation:gg-spin 30s linear infinite paused}.garage-page .gear .carrier{animation:gg-spin 120s linear infinite paused}.garage-page .gear .planet{animation:gg-spin 40s linear infinite reverse paused}
.garage-page .gear.on .spin{animation-play-state:running}
@keyframes gg-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.garage-page .gear .spin{animation:none}}
/* (wide screens, once the screen's edge is further out than the cut: the whole gear, overhanging the column as much) */
@media(min-width:1536px){.garage-page .gear{width:var(--g);right:calc((100% - 1280px) / 2 - var(--g) * .2)}}
/* (phones: beside the name, its top just inside the section so it never reaches up over the garage above (Jake, 2026-10-26);
   half the screen wide at most, so its ring stays clear of the words below; cut far enough in to leave a gap) */
@media(max-width:760px){.garage-page .has-gear{padding-top:52px}.garage-page .has-gear .b-lead{max-width:88%}.garage-page .has-gear h1{font-size:min(17vw,90px)}.garage-page .gear{--g:min(50vw,206px);top:calc(var(--g) / 2 + 12px);width:calc(var(--g) * .55)}}
/* services: one plate per column, the same size and dot grid for all four, drawn with the same three line weights */
.garage-page .sch{display:block;width:100%;height:auto;aspect-ratio:16/10;margin:0 0 20px;border:1px solid var(--line)}
@media(prefers-reduced-motion:reduce){.garage-page .logos a::after,.garage-page .card-t h3::after{transition:none}}

/* Tools: platform marks below the room. */
.garage-page .b-tools .b-h{margin-bottom:8px}
.garage-page .tool-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 24px}
.garage-page .tool-logos li{min-width:0;border-bottom:1px solid var(--line)}
.garage-page .tool-logos a{min-height:112px;padding:20px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-decoration:none;color:var(--bone);opacity:.64;transition:opacity .2s ease}
.garage-page .tool-logos img{display:block;width:var(--tool-w);height:var(--tool-h);max-width:100%;object-fit:contain}
.garage-page .tool-logos img.tool-backing{background:var(--bone);padding:4px 8px;border-radius:2px;box-sizing:content-box;max-width:calc(100% - 16px)}
.garage-page .tool-logos span{font:400 12px/1.2 var(--sans);white-space:nowrap}
.garage-page .tool-logos a:hover,.garage-page .tool-logos a:focus-visible{opacity:1}
.garage-page .tool-logos a:focus-visible{outline:2px solid var(--rust-text);outline-offset:-3px}
@media(max-width:899px){.garage-page .tool-logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px}.garage-page .tool-logos a{min-height:100px;padding:18px 6px}.garage-page .tool-logos img{width:min(var(--tool-w),100%);height:var(--tool-h)}}
@media(max-width:359px){.garage-page .tool-logos{gap:0 6px}.garage-page .tool-logos a{padding-inline:4px}.garage-page .tool-logos span{font-size:11px}}
@media(prefers-reduced-motion:reduce){.garage-page .tool-logos a{transition:none}}
/* the footer's trademark line (the tool logos above belong to their companies) */
.garage-page .ft-tm{margin:14px 0 0;font:400 12px/1.4 var(--sans);color:var(--dim);opacity:.8}