/* Original generated workshop scenes, layered with the independently animated Shoe-Car. */
.brand small{font-size:.75rem!important;letter-spacing:.025em}
.hero{min-height:590px;border:1px solid #b78c47;box-shadow:0 18px 50px #3a1b241a;background:#25191a;grid-template-rows:auto auto}
.city-scenes{position:absolute;inset:0;pointer-events:none;z-index:0}.city-scene{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center;transition:opacity .8s ease}.city-la{opacity:0}.hero[data-city=la] .city-la{opacity:1}.hero[data-city=la] .city-vegas{opacity:0}
.city-scenes:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#22111bed 0%,#22111ba3 36%,transparent 72%),linear-gradient(0deg,#22111bcc,transparent 30%)}
.hero-copy{padding-top:54px}.hero-copy p{font-size:1rem!important;text-shadow:0 2px 8px #000}.hero .hero-tagline{font-size:clamp(3.3rem,5.4vw,5.25rem);text-shadow:0 3px 18px #0008}.hero-cta{align-self:start;padding-bottom:104px}
.hero-car-wrap{width:112%;margin-top:85px;margin-left:-3%}.hero-car{filter:drop-shadow(0 18px 12px #0009)}.car-stage-bottom{bottom:90px;left:9%;right:5%;flex-direction:row;align-items:center}.car-stage-bottom p{color:#f7eee7!important;text-shadow:0 1px 5px #000}.drive-button{color:#ffdf84;background:#291a23c9;border:1px solid #ae844d;border-radius:9px;padding:10px 14px;white-space:nowrap}
.city-selector{position:absolute;left:50px;right:36px;bottom:24px;z-index:7;display:flex;align-items:center;gap:22px;border-top:1px solid #e2bc7b5c;padding-top:16px}.city-label{font-size:.75rem;color:#e7d5c3}.city-selector [role=group]{display:flex;gap:8px}.city-selector button{color:#f5e9db;font-size:.875rem;background:#22121d9c;border:1px solid #92775e;border-radius:24px;min-height:44px;padding:10px 17px}.city-selector button[aria-pressed=true]{background:#e1b756;color:#2c1920;border-color:#e1b756}
.service-row{flex-direction:column;align-items:stretch;padding:18px 22px 23px;min-height:290px;background:linear-gradient(140deg,#fffcf6,#ede1cd);border-color:#d2bfa3;box-shadow:inset 0 0 0 5px #ffffff30}.service-thumbnail{width:100%;height:142px;flex:none;overflow:visible}.service-thumbnail img{height:100%;width:100%;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 8px 6px #43241625)}.service-card-copy{padding-top:10px;width:100%}.service-row h3{font-size:1.45rem}.service-row p{margin:8px 0 15px}.service-card-link{font-size:.875rem;text-decoration:underline;text-underline-offset:5px;font-weight:600}@media(hover:hover){.service-row:hover{box-shadow:inset 0 0 0 5px #ffffff30,var(--lift-shadow)}}@media(hover:hover) and (prefers-reduced-motion:no-preference){.service-row:hover .category-icon{transform:translateY(-4px) rotate(-2deg)}}.category-icon{transition:transform .3s}
.page-head-art.isolated-art{left:56%;inset-block:-14px;background:radial-gradient(ellipse,#dcc5a3,transparent 65%)}.page-head-art.isolated-art img{object-fit:contain;padding:18px;max-width:540px}.page-head-art.isolated-art:after{background:linear-gradient(90deg,#eee7dc,transparent 35%)}
.page-detail-art{position:absolute;right:0;top:0;width:35%;height:100%;overflow:hidden;border-radius:12px}.page-detail-art img{width:100%;height:100%;object-fit:cover}.page-detail-art:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--paper),#faf7f02b)}.page-head:has(.page-detail-art) .page-head-copy{width:68%}.page-head:has(.page-detail-art){min-height:300px}
.chapter-intro{background:linear-gradient(100deg,#321723f2,#321723d9),url('/assets/details/city-los-angeles-1672.webp') center/cover;color:#fff1df;border:1px solid #b98c50;position:relative;box-shadow:inset 0 0 0 7px #2c151b,inset 0 0 0 8px #b98c5060}.chapter-intro .eyebrow,.chapter-intro .text-link,.large-year{color:#ebc573}.chapter-intro .history-picker button,.history-map,.history-hint{color:#e4cfc1!important}.chapter-intro .history-picker button[aria-pressed=true]{color:#ffdf84;border-bottom-color:#e8ba62}.chapter-intro .history-picker{border-color:#a17b60}.history-description{min-height:270px}
.visit{background:linear-gradient(90deg,#381825f5,#381825e8 65%,#381825cf),url('/assets/details/workshop-detail-1672.webp') right center/cover;box-shadow:inset 0 0 0 6px #311421,inset 0 0 0 7px #c5975b88;border-color:#c5975b}.visit-grid{position:relative;z-index:1}
.footer{background:linear-gradient(90deg,#25101ff7,#25101ff5),url('/assets/details/city-las-vegas-768.webp') center/cover}
.filter{display:flex;align-items:center;gap:8px;padding:6px 16px}.filter img{width:32px;height:32px;object-fit:contain}.filter[aria-pressed=true] img{filter:drop-shadow(0 1px 2px #0009)}
.repair-picker legend{font-size:.875rem}.repair-options button{display:flex;gap:10px;align-items:center;border-radius:12px;text-align:left;min-height:68px}.repair-options img{width:48px;height:48px;object-fit:contain}.repair-options span{flex:1}.photo-guide{margin:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#efe5d5}.photo-guide img{width:100%;aspect-ratio:1.7;object-fit:cover}.photo-guide figcaption{padding:14px 18px;font-size:.875rem}
.coupon{border:1px dashed #b89253;box-shadow:inset 0 0 0 6px #fff9ee,inset 0 0 0 7px #d6b785}.coupon:before{content:'';position:absolute;top:15px;right:16px;width:14px;height:14px;background:radial-gradient(circle at 35% 25%,#f9e4ae,#b28742 60%,#805424);border-radius:50%;box-shadow:0 2px 3px #8a633d55}.coupon small{font-size:.875rem}.review-profile{background:linear-gradient(135deg,#fffdf8,#ede2d1);border-color:#cdb58e;box-shadow:inset 0 0 0 5px #ffffff50}@media(hover:hover){.review-profile:hover{box-shadow:inset 0 0 0 5px #ffffff50,var(--lift-shadow)}}.profile-name{font-size:.875rem!important}
.information-nav{background:linear-gradient(150deg,#f7efe2,#e8d7ba);border:1px solid #d0b994;box-shadow:inset 0 0 0 5px #ffffff40}.information-layout .long-copy h2{border-left:3px solid var(--brass);padding-left:16px}.contact-info-panel{background:linear-gradient(140deg,#f4ecdf,#e7d6b9)}.journey-card{box-shadow:inset 0 0 0 5px #fff9ef;border:1px solid #d5bd97}
@media(max-width:1100px){.hero .hero-tagline{font-size:3.8rem}.hero-copy{padding-left:32px}.hero-cta{padding-left:32px}.city-selector{left:32px;right:28px}.hero-car-wrap{width:125%;margin-top:110px}.car-stage-bottom{left:10%;flex-direction:column;align-items:start;gap:12px}.service-row{padding:18px}.service-row h3{font-size:1.4rem}.hero{min-height:565px}}
@media(max-width:850px){.hero{grid-template-columns:1fr 1fr;min-height:565px}.hero .hero-tagline{font-size:3.5rem}.hero-copy p{max-width:30ch}.hero-car-wrap{width:143%;margin-left:0;margin-top:100px}.city-selector{gap:12px;justify-content:space-between}.city-label{max-width:18ch}.city-selector button{padding:9px 12px}.service-row{flex-direction:row;gap:16px;min-height:240px}.service-thumbnail{width:35%;flex:0 0 35%;height:160px}.service-row p{font-size:1rem}.page-detail-art{width:36%}.page-head:has(.page-detail-art) .page-head-copy{width:70%}}
@media(max-width:600px){.hero{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto auto;min-height:0;width:calc(100% - 24px);margin-top:12px;border-radius:14px}.city-scenes{bottom:auto;height:278px}.city-scene{object-position:70% center}.city-scenes:after{background:linear-gradient(0deg,#281723 0,transparent 42%),linear-gradient(90deg,#24131d44,transparent)}.shoe-car-stage{grid-row:1;grid-column:1;height:270px;min-height:270px}.hero-car-wrap{width:110%;margin-left:2%;margin-top:35px;max-width:none}.car-stage-bottom{bottom:8px;left:20px;right:18px;flex-direction:row;align-items:center;gap:12px}.car-stage-bottom p{max-width:18ch;font-size:.75rem!important}.drive-button{font-size:.75rem!important;padding:8px 10px;white-space:normal;max-width:135px}.hero-copy{grid-row:2;padding:22px 24px 0}.hero .hero-tagline{font-size:3.55rem}.hero-copy p{max-width:none;font-size:1rem!important;margin-top:18px}.hero-cta{grid-row:3;padding:24px 24px 26px}.hero-proof{margin-top:16px}.city-selector{position:relative;grid-row:4;left:auto;right:auto;bottom:auto;margin:0 24px 20px;padding-top:16px;display:block}.city-label{display:block;max-width:none;margin-bottom:10px}.city-selector [role=group]{gap:8px}.city-selector button{flex:1;padding:10px 8px;font-size:.875rem}
 .service-row{flex-direction:column;min-height:0;padding:15px 16px 22px;gap:6px}.service-thumbnail{width:100%;height:115px;flex:none}.service-row h3{font-size:1.25rem}.service-card-copy{padding:0}.service-row p{font-size:1rem!important}.service-card-link{font-size:.875rem}.service-cards{gap:12px}.service-row:hover{translate:none}
 .page-head.with-art .page-head-copy{width:100%}.page-head-art{position:relative;inset:auto!important;margin:22px 0 0;height:190px;width:100%;min-width:0;border-radius:14px;opacity:1}.page-head-art:after{display:none}.page-head-art:not(.isolated-art),.page-detail-art{outline:1px solid var(--image-outline);outline-offset:-1px}.page-head-art.isolated-art img{padding:6px}.page-head.with-art .wrap{display:flex;flex-direction:column}.page-head.with-art{padding-bottom:24px;min-height:0}.page-head h1{font-size:2.6rem}.page-head p{font-size:1rem!important}.page-head .hero-actions{margin-top:22px}.page-head .button{font-size:.875rem!important}.page-detail-art{position:relative;width:100%;height:135px;margin-top:22px}.page-detail-art:after{display:none}.page-head:has(.page-detail-art) .page-head-copy{width:100%}.page-head:has(.page-detail-art){min-height:0}
 body[data-page=request-form] .page-head-art,body[data-page=privacy] .page-detail-art,body[data-page=accessibility] .page-detail-art{display:none}body[data-page=request-form] .page-head{padding-bottom:10px}
 .brand small{font-size:.75rem!important}.brand strong{font-size:1.9rem}.header-inner{gap:8px}.menu-toggle{padding:8px 12px}.filter{padding:6px 12px;gap:4px}.filter img{width:28px;height:28px}.gallery-controls{gap:8px}.repair-options button{padding:8px;font-size:.875rem!important;gap:5px;min-height:70px}.repair-options img{width:36px;height:36px}.photo-guide{margin-top:12px}.contact-card{padding:22px 22px 22px 77px}.contact-symbol{left:20px}.contact-card h2{font-size:1.7rem}.chapter-intro{padding:28px 24px}.history-description{min-height:290px}.visit{padding:30px 26px}.story{grid-template-columns:1fr}.story-picture{grid-column:1;grid-row:1;max-width:150px}.story-picture img{height:175px}.story-copy{grid-column:1;grid-row:2}.story-signoff{grid-row:3;margin:0}.story-copy h2{font-size:2rem}.story-copy .eyebrow{font-size:.75rem!important}.work figcaption{display:block}.work figcaption>span{display:block;font-size:.75rem;margin-top:4px}.journey-card{padding:24px}.footer nav a{min-height:44px}
}
@media(max-width:360px){.hero .hero-tagline{font-size:3.15rem}.hero-copy,.hero-cta{padding-left:20px;padding-right:20px}.city-selector{margin-left:20px;margin-right:20px}.shoe-car-stage{height:245px;min-height:245px}.city-scenes{height:245px}.hero-car-wrap{margin-top:20px}.city-selector button{font-size:.75rem}.brand small{font-size:.75rem!important}.brand strong{font-size:1.65rem}.header-inner{gap:5px}.menu-toggle{padding:8px}.service-row{flex-direction:row;gap:14px;align-items:center}.service-thumbnail{width:32%;height:130px;flex:0 0 32%}.service-row h3{font-size:1.25rem}.service-row p{font-size:1rem}.repair-options{grid-template-columns:1fr}.repair-options img{width:40px;height:40px}}
.motion-paused .city-scene{transition:none}.motion-paused .category-icon{transition:none}
@media(prefers-reduced-motion:reduce){.category-icon{transition:none}}
@media(min-width:851px){.car-stage-bottom{bottom:24px}.hero-car-wrap{margin-top:42px;width:105%}.city-selector{padding-right:47%;left:50px}.city-label{max-width:18ch}}
@media(min-width:601px) and (max-width:850px){.car-stage-bottom p{display:none}.car-stage-bottom{bottom:100px;right:24px;left:auto}.hero-car-wrap{width:125%;margin-top:65px}.hero .hero-tagline{font-size:3.2rem}.city-selector{flex-wrap:wrap}.hero-copy{padding-right:10px}}

/* Repair preparation and consistent current workshop details. */
.repair-preparation{margin-top:2rem;padding:1.5rem;border:1px solid var(--line,#d8cbc0);border-radius:1rem;background:rgba(255,255,255,.35)}
.repair-preparation h2{margin-top:.5rem}.repair-preparation p:last-of-type{margin-bottom:1.25rem}.footer address{font-style:normal;font-size:1rem;line-height:1.6;color:inherit}

@media(max-width:600px){.chapter-intro{background-image:linear-gradient(100deg,#321723f2,#321723d9),url("/assets/details/city-los-angeles-768.webp")}.visit{background-image:linear-gradient(90deg,#381825f5,#381825e8 65%,#381825cf),url("/assets/details/workshop-detail-768.webp")}}
/* WCAG AA on cream: captions use the muted ink; the gold link tint is only for the dark About sections. */
.media-caption{color:var(--muted)}
[data-page=about] .journey .text-link{color:var(--wine)}
/* QA pass: comfortable targets everywhere and no one-word last lines. */
h1,h2,h3,.hero-tagline,.hero-title,.eyebrow,.page-head-copy p,.section-head p{text-wrap:balance}
p,li,figcaption,summary,blockquote{text-wrap:pretty}
.top a,.top .lang-switch{display:inline-flex;align-items:center;min-height:32px;padding:0}
.footer nav a,.footer-bottom a,.related a{display:inline-flex;align-items:center}
.related a{min-height:44px}
@media(min-width:601px){.footer nav{gap:4px}.footer nav a,.footer-bottom a{min-height:28px}}
.footer-bottom div{align-items:center}
.faq-list details{padding:6px 0}
.faq-list summary{display:block;padding:10px 35px 10px 0;min-height:44px;box-sizing:border-box}
.faq-list summary:after{top:8px}
.faq-list p{margin:2px 30px 12px 0}
@media(max-width:600px){
 .top .wrap{min-height:40px}
 .top a,.top .lang-switch{min-height:40px}
 .footer-bottom a{min-height:40px}
 .footer-bottom div{gap:4px 18px}
}
.hero-proof a{display:inline-flex;align-items:center;min-height:24px}
.business-card .features a{display:inline-flex;align-items:center;min-height:32px}
@media(max-width:600px){.business-card .features a{min-height:44px}}
.nowrap{white-space:nowrap}
.top a{column-gap:.3em}
.hero-proof span{display:inline-flex;align-items:center;min-height:24px}
/* Service cards: copy fills the card so "Explore repairs" lines up across a row. */
.service-row{align-items:stretch}
.service-card-copy{display:flex;flex-direction:column;flex:1 1 auto}
.service-card-link{margin-top:auto;align-self:flex-start}
/* Phones: the sticky call/estimate bar steps aside while the page's own buttons are on screen. */
@media(max-width:600px){
 .mobile-contact{transition:transform .25s ease-out,opacity .2s ease-out}
 .primary-actions-visible .mobile-contact{transform:translateY(110%);opacity:0;pointer-events:none}
}
/* Phones: full-width hero buttons so neither label wraps. */
@media(max-width:430px){.hero-cta .hero-actions,.page-head .hero-actions{flex-wrap:wrap}.hero-cta .button,.page-head .hero-actions .button{flex:1 1 100%}}
/* The estimate page is the destination of the bar's own button: keep the form's Send button clear. */
@media(max-width:600px){[data-page=request-form] .mobile-contact{display:none}[data-page=request-form] .footer{padding-bottom:34px}}
/* Photo picker: a real button instead of the browser's "Choose Files / No file chosen". */
.field-label{font-size:.875rem;font-weight:550}
.file-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip-path:inset(50%)}
.field .photo-button{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 20px;border:1px solid #b79460;border-radius:999px;background:#fffdf8;color:var(--wine);font-size:.875rem!important;font-weight:600;cursor:pointer}
.field .photo-button:before{content:'+';font:1.25rem/1 var(--serif)}
.file-input:focus-visible+.photo-button{outline:3px solid #ac742b;outline-offset:4px}
.file-input:disabled+.photo-button{opacity:.5;cursor:not-allowed}
.photo-count:empty{display:none}
.photo-count{color:var(--ink);font-weight:550}
@media(hover:hover){.field .photo-button:hover{background:#f3ebe1}}
/* Gallery lightbox: the photo fills the dialog on every screen. */
#image-dialog{width:min(1000px,94vw)}
#image-dialog img{display:block;width:100%;height:auto;max-height:72vh;object-fit:contain;background:#efe7da;border-radius:10px}
/* Phones: the Shoe-Car sits above its caption instead of under it. */
@media(max-width:600px){
 .shoe-car-stage{height:330px;min-height:330px}
 .city-scenes{height:338px}
 .hero-car-wrap{width:100%;margin-left:0;margin-top:18px}
 .car-stage-bottom p{max-width:24ch}
}
@media(max-width:360px){.shoe-car-stage{height:300px;min-height:300px}.city-scenes{height:308px}.hero-car-wrap{margin-top:14px}}
.drive-button{white-space:nowrap}
@media(max-width:360px){.car-stage-bottom{gap:10px}.car-stage-bottom p{font-size:.7rem!important}}
/* Tablets: stack section headings over their intro so short headings don't break. */
@media(min-width:601px) and (max-width:900px){.section-head{display:block}.section-head p{margin-top:14px;max-width:52ch}.section-head h2{max-width:none}}
/* Story section: body copy on the dark photo needs light ink (was muted grey, about 2.9:1). */
.chapter-intro p,.history-panel p{color:#e2d3c9}
.photo-field{position:relative}
.field input.file-input{position:absolute;left:0;top:0;width:1px;height:1px;min-height:0;padding:0;margin:0;border:0;opacity:0;overflow:hidden;clip-path:inset(50%)}
@media(min-width:768px){.phrase{white-space:nowrap}}
.contact-symbol{color:var(--wine)!important}
/* Gallery captions: title with the category as a quiet label (beside it on wide screens, beneath on phones). */
.gallery-item figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.gallery-item figcaption>span{flex:none;color:var(--muted);font-size:.85em}
@media(max-width:600px){.gallery-item figcaption{flex-direction:column;align-items:flex-start;gap:2px}}
@media(max-width:600px){.hero-proof a{padding:11px 0;margin:-11px 0}}

/* Instagram feed: same cards as the archive, with a play/count badge and a dialog that holds videos and carousels. */
.ig-feed{padding-top:8px}.ig-feed .section-head a{text-decoration:underline;text-underline-offset:4px}.archive{padding-top:0}.ig-item button{position:relative;cursor:pointer}.ig-item img{aspect-ratio:4/5;object-fit:cover}
.ig-badge{position:absolute;right:10px;bottom:10px;padding:4px 10px;border-radius:20px;background:#1e1119c8;color:#fff;font-size:.75rem;font-weight:650;line-height:1.4;backdrop-filter:blur(6px)}
.ig-more{display:flex;margin:28px auto 0}.ig-more[hidden]{display:none}.archive-head{padding-bottom:0}.archive-head .section-head{margin-bottom:0}
#dialog-media{display:flex;gap:12px}#dialog-media:empty{display:none}#dialog-media>*{display:block;flex:0 0 100%;width:100%;height:auto;max-height:72vh;object-fit:contain;background:#1e1119;border-radius:10px}
#dialog-media.carousel{overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}#dialog-media.carousel>*{scroll-snap-align:center;background:#efe7da}
@media(max-width:600px){.ig-badge{right:7px;bottom:7px;font-size:.75rem;padding:3px 8px}}
#dialog-image[hidden]{display:none}
/* A single photo or reel sizes the dialog to itself, so portrait reels get no black side bars. */
#image-dialog:has(#dialog-media:not(.carousel):not(:empty)){width:fit-content}
#dialog-media:not(.carousel)>*{flex:none;height:auto;max-width:100%;max-height:72vh;margin:0 auto}
#image-dialog:has(#dialog-media:not(.carousel):not(:empty)) #dialog-caption{width:0;min-width:100%}
/* Homepage proof grid of Instagram reels: 3×2 beside the intro, 2 per row on phones. */
.work-grid .ig-item img{aspect-ratio:4/5}
.work-grid .ig-item figcaption{padding:12px 14px;font-size:.875rem}
@media(max-width:600px){.work-grid:has(.ig-item){grid-template-columns:repeat(2,1fr);gap:12px}.work-grid .ig-item figcaption{padding:10px}}
.work-grid .ig-item figcaption{display:block}.work-grid .ig-item figcaption>span{display:block;margin-top:2px}
/* Craft sketches (scripts/prepare_sketches.py): a faint pencil drawing cropped into one corner of each card/section.
   The ::before box is the crop window; the drawing is larger than it, so the edge cuts it off. --sketch-shift is the
   scroll parallax from script.js (background moves, the crop window stays). Decorative only. */
.service-row,.work,.process-section,.faq-layout,.chapter-intro,.visit,.footer,.repair-preparation,.ig-feed,.contact-layout,
body[data-page=request-form] .detail-layout,.journey,.review-profile-grid,body[data-page=coupons] .long-copy,
body:is([data-page=services],[data-page=leather-goods]) .page-head+.section{position:relative;isolation:isolate}
:is(.service-row,.work,.process-section,.faq-layout,.chapter-intro,.visit,.footer,.repair-preparation,.ig-feed,.contact-layout,
body[data-page=request-form] .detail-layout,.journey,.review-profile-grid,body[data-page=coupons] .long-copy,
body:is([data-page=services],[data-page=leather-goods]) .page-head+.section)::before{content:'';position:absolute;z-index:-1;pointer-events:none;
 right:0;bottom:0;width:var(--sk-w,300px);height:var(--sk-h,230px);opacity:var(--sk-o,.09);
 background:var(--sketch) no-repeat;background-size:var(--sk-size,380px) auto;
 background-position:var(--sk-x,left) calc(var(--sk-y,0px) + var(--sketch-shift,0px))}
.service-row{--sk-w:190px;--sk-h:150px;--sk-size:240px;--sk-o:.1}
.service-row[href="/shoe-repair"]{--sketch:url(/assets/sketches/last-awl-pencil.webp)}
.service-row[href="/leather-repair"]{--sketch:url(/assets/sketches/needle-thread-pencil.webp)}
.service-row[href="/luggage-repair"]{--sketch:url(/assets/sketches/wheel-zipper-pencil.webp);--sk-size:200px}
.service-row[href="/furniture-repair"]{--sketch:url(/assets/sketches/tacks-webbing-pencil.webp)}
.work,.ig-feed{--sketch:url(/assets/sketches/seam-pencil.webp);--sk-w:460px;--sk-h:200px;--sk-size:520px;--sk-o:.08}
.work::before,.ig-feed::before{right:auto;left:-16px;bottom:-10px}
.process-section,body:is([data-page=services],[data-page=leather-goods]) .page-head+.section,.review-profile-grid{--sketch:url(/assets/sketches/spool-scissors-pencil.webp)}
.faq-layout,body[data-page=request-form] .detail-layout{--sketch:url(/assets/sketches/hammer-nails-pencil.webp)}
.faq-layout::before{right:auto;left:0}
.journey{--sketch:url(/assets/sketches/high-heel-pencil.webp)}
body[data-page=coupons] .long-copy{--sketch:url(/assets/sketches/tacks-webbing-pencil.webp)}
.contact-layout{--sketch:url(/assets/sketches/needle-thread-pencil.webp)}
body[data-page=shoe-repair] .repair-preparation{--sketch:url(/assets/sketches/last-awl-pencil.webp)}
body[data-page=leather-repair] .repair-preparation{--sketch:url(/assets/sketches/needle-thread-pencil.webp)}
body[data-page=luggage-repair] .repair-preparation{--sketch:url(/assets/sketches/wheel-zipper-pencil.webp)}
body[data-page=furniture-repair] .repair-preparation{--sketch:url(/assets/sketches/tacks-webbing-pencil.webp)}
/* Dark sections: the same drawings in cream. */
.chapter-intro{--sketch:url(/assets/sketches/high-heel-cream.webp);--sk-o:.1}
.visit{--sketch:url(/assets/sketches/last-awl-cream.webp);--sk-o:.1}
.footer{--sketch:url(/assets/sketches/needle-thread-cream.webp);--sk-o:.08}
@media(max-width:600px){
 :is(.work,.process-section,.faq-layout,.chapter-intro,.visit,.footer,.repair-preparation,.ig-feed,.contact-layout,body[data-page=request-form] .detail-layout,.journey,.review-profile-grid,body[data-page=coupons] .long-copy,body:is([data-page=services],[data-page=leather-goods]) .page-head+.section){--sk-w:190px;--sk-h:150px;--sk-size:240px}
 .work,.ig-feed{--sk-w:280px;--sk-h:120px;--sk-size:320px}
 .service-row{--sk-w:120px;--sk-h:100px;--sk-size:160px}
 .service-row[href="/luggage-repair"]{--sk-size:135px}
}
.faq-layout,.process-section{--sk-o:.07}
/* John's face sits ~62% across the landscape photo; in the narrow arch a centred crop split his face. 70% keeps it whole at every width. */
.story .story-picture img{object-position:70% 18%}
@media(min-width:601px) and (max-width:850px){.story .story-picture img{height:240px;object-position:70% 18%}}
/* Service cards: colourful product renders on top, a detailed sepia pencil scene (scripts/prepare_card_art.py)
   filling the lower right of the card, clearly visible but behind the text. */
/* Sized through the variables the shared sketch rule reads (it is more specific than any card selector);
   the drawing spans the card width at the bottom, and a radial mask fades its top-left so no edge ever shows. */
.service-row{--sk-w:84%;--sk-h:44%;--sk-size:100%;--sk-x:right;--sk-y:100%;--sk-o:.4}
.service-row::before{background-size:contain!important;-webkit-mask-image:radial-gradient(130% 130% at 100% 100%,#000 62%,transparent 100%);mask-image:radial-gradient(130% 130% at 100% 100%,#000 62%,transparent 100%)}
.service-row[href="/shoe-repair"]{--sketch:url(/assets/sketches/card-shoes.webp)}
.service-row[href="/leather-repair"]{--sketch:url(/assets/sketches/card-leather.webp)}
.service-row[href="/luggage-repair"]{--sketch:url(/assets/sketches/card-luggage.webp)}
.service-row[href="/furniture-repair"]{--sketch:url(/assets/sketches/card-furniture.webp)}
@media(max-width:600px){.service-row{--sk-w:100%;--sk-h:40%;--sk-o:.36}}
.service-row p{color:#4e4446}
/* From PR #1: 44px touch targets for small text links on touch-width screens, including phones held sideways (601-850px). */
@media(max-width:850px){.footer nav a,.footer-bottom a{display:flex;align-items:center;min-height:44px}.top a,.top .lang-switch{display:inline-flex;align-items:center;min-height:44px}.hero-proof a{display:inline-flex;align-items:center;min-height:44px}}

/* From PR #1: menu sheet extras (phone/tablet only) and a page that stays put while the sheet is open. */
.nav-extra{display:none}
@media(max-width:850px){html.menu-open{overflow:hidden}.nav-extra{display:grid;gap:10px;padding:16px 0 6px}.header .nav-extra .button{display:flex;width:100%}.nav-extra .nav-phone{border:0;min-height:44px;font-weight:650}.nav-extra p{margin:0;font-size:.875rem}}
/* Gallery dialog: previous/next under the photo. */
.dialog-steps{display:flex;justify-content:space-between;gap:12px;margin-top:14px}.dialog-steps[hidden]{display:none}
.dialog-steps button{min-height:44px;padding:9px 18px;border:1px solid #b79460;border-radius:8px;background:transparent;color:var(--wine);font-weight:650}
/* Quick-facts links (business info) and the services list keep full-size tap areas. */
#quick-facts a{display:inline-flex;align-items:center;min-height:24px}
@media(max-width:850px){.business-card .features a,#quick-facts a{display:inline-flex;align-items:center;min-height:44px}}
/* Reels as the main proof (home, service pages, request form, about, gallery): muted in-view previews over the poster, a conversion footer in the dialog. */
.reel-section{padding-top:12px;padding-bottom:12px}.reel-section .section-head h2{max-width:24ch}
.reel-strip{display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:16px;max-width:calc(var(--n,6)*240px)}
.reel-strip .ig-item figcaption{display:block;min-height:0;padding:10px 12px;font-size:.8rem}.reel-strip .ig-item figcaption>span{display:block;margin-top:2px}
.ig-badge{z-index:1}.ig-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease-out;pointer-events:none}.previewing>.ig-preview{opacity:1}
html.motion-paused .ig-preview{display:none}@media(prefers-reduced-motion:reduce){.ig-preview{display:none}}
.reels-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:20px}.reels-actions .text-link b{font-weight:700}
.reels-proof .work-intro p{font-size:.9rem;margin:14px 0 0}.reels-proof .work-intro .reels-actions .button{margin:0}
.brand-row{grid-column:1/-1;margin-top:10px;padding-top:24px;border-top:1px solid var(--line)}.brand-row h3{margin:0 0 14px;font-size:1.3rem}
.brand-chips{display:flex;flex-wrap:wrap;gap:8px}.brand-chip{display:inline-flex;flex:none;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border:1px solid #d5c7b5;border-radius:30px;font-size:.85rem;font-weight:600;transition:border-color .15s ease-out,background-color .15s ease-out}
.brand-chip span{color:var(--muted);font-size:.75rem;font-weight:500}.brand-chip:hover{border-color:var(--wine);background:#fffcf6}.brand-note{margin:12px 0 0;color:var(--muted);font-size:.75rem}
.ig-cta-tile{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;padding:26px;border-radius:16px;background:var(--wine);color:#fff}
.ig-cta-tile .eyebrow{margin:0;color:#edcb79}.ig-cta-tile h3{margin:0;color:#fff;font-size:1.6rem;line-height:1.15}.ig-cta-tile .button{margin-top:8px}.ig-cta-tile .text-link{color:#fff}
.ig-grid[hidden],.ig-empty[hidden]{display:none}.ig-empty{margin:0;color:var(--muted)}.brand-filter{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 18px;font-weight:650}
.aside-reels{margin-bottom:22px}.aside-reels h3{margin:0 0 12px;font-size:1.5rem}.aside-reels .text-link{display:inline-block;margin-top:12px}
.reel-strip.compact{gap:10px;max-width:none}.reel-strip.compact .ig-item figcaption{padding:8px;font-size:.72rem}.reel-strip.compact .ig-badge{right:6px;bottom:6px;padding:2px 7px}
#image-dialog{--media-h:max(45vh,min(72vh,calc(100vh - 350px)))}#image-dialog img,#dialog-media>*,#dialog-media:not(.carousel)>*{max-height:var(--media-h)}
.dialog-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:12px}#image-dialog:has(#dialog-media:not(.carousel):not(:empty)) .dialog-cta{width:0;min-width:100%}
.dialog-cta .button{flex:1 1 auto;width:auto;min-height:44px;margin:0;padding:10px 18px}.dialog-cta .button.gold{flex-basis:100%}.dialog-follow{font-size:.85rem}
#image-dialog.video-ended .dialog-cta .button.gold{box-shadow:0 0 0 4px #f0cc5566;animation:cta-nudge .6s ease-out}
@keyframes cta-nudge{40%{transform:scale(1.03)}}html.motion-paused #image-dialog .button.gold{animation:none}@media(prefers-reduced-motion:reduce){#image-dialog.video-ended .dialog-cta .button.gold{animation:none}}
@media(max-width:850px){.reel-strip:not(.compact){display:flex;max-width:none;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin-inline:-24px;padding:0 24px 8px;scroll-padding-inline:24px}.reel-strip:not(.compact)>.ig-item{flex:0 0 min(42vw,230px);scroll-snap-align:start}}
@media(max-width:600px){.reel-strip:not(.compact),.reel-strip.compact{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding:0 16px 8px;scroll-padding-inline:16px;gap:12px}.reel-strip>.ig-item{flex:0 0 42vw;scroll-snap-align:start}
 .brand-chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding:0 16px 6px}.ig-cta-tile{padding:16px;gap:8px}.ig-cta-tile h3{font-size:1.15rem}.ig-cta-tile .button{padding:10px 12px}
 #image-dialog{padding:16px;--media-h:min(70vh,calc(100vh - 345px))}.dialog-cta{gap:8px 14px}.dialog-follow{display:none}#image-dialog:has(#dialog-media:not(.carousel):not(:empty)){width:94vw}.dialog-cta .button{font-size:.8rem;padding:10px 12px}}
/* Wide screens: a single reel or photo sits left, the caption, actions and previous/next stack beside it, so the whole dialog fits without scrolling. */
@media(min-width:851px){#image-dialog[open]:has(#dialog-media:not(.carousel):not(:empty)){--media-h:min(80vh,calc(100vh - 110px));display:grid;grid-template-columns:auto 270px;grid-template-rows:auto auto auto 1fr;column-gap:24px;align-items:start}
 #image-dialog[open]:has(#dialog-media:not(.carousel):not(:empty)) #dialog-media{grid-column:1;grid-row:1/5}
 #image-dialog[open]:has(#dialog-media:not(.carousel):not(:empty)) .close{grid-column:2;grid-row:1;margin:0 0 18px auto}
 #image-dialog[open]:has(#dialog-media:not(.carousel):not(:empty)) #dialog-caption{grid-column:2;grid-row:2;width:auto;min-width:0;margin:0;font-size:1.05rem;font-weight:650}
 #image-dialog[open]:has(#dialog-media:not(.carousel):not(:empty)) .dialog-cta{grid-column:2;grid-row:3;width:auto;min-width:0;flex-direction:column;align-items:stretch;margin-top:18px}
 #image-dialog[open]:has(#dialog-media:not(.carousel):not(:empty)) .dialog-follow{align-self:flex-start;margin-top:4px}
 #image-dialog[open]:has(#dialog-media:not(.carousel):not(:empty)) .dialog-steps{grid-column:2;grid-row:4;align-self:end;margin:0}}
/* Phones: on service pages with reels, the real work replaces the illustration as the first thing after the page-head actions. */
@media(max-width:600px){body:has(#see-the-work) .page-head-art{display:none}body:has(#see-the-work) .page-head{padding-bottom:16px}}
/* Home hero: the Shoe-Car is a static illustration (no arrival fade, idle bob or pointer parallax), so it never holds back first paint. */
.hero-car-wrap,.hero-car{animation:none}.hero-car-parallax{transform:none;transition:none;will-change:auto}
/* Desktop header shows the number beside the estimate button once there is room for it. */
.header-phone{display:none}
@media(min-width:851px){.header-phone{display:inline-flex;align-items:center;min-height:44px;font-weight:650;white-space:nowrap;color:var(--wine)}.header-phone:hover{text-decoration:underline;text-underline-offset:4px}.header-inner>.header-phone{margin-left:auto;margin-right:-8px}}
/* Open-now line, filled by script.js from the fixed hours (America/Los_Angeles). */
.open-status{display:inline-flex;align-items:center;gap:7px;font-weight:600}.open-status:before{content:'';width:8px;height:8px;border-radius:50%;background:#9a8a8f;flex:none}.open-status.is-open:before{background:#5fc48a;box-shadow:0 0 0 3px #5fc48a33}
.hero-proof .open-status{color:#fff8ef}.hero-proof .open-status[hidden]+span{border-left:0;padding-left:0}.visit .open-status{margin:4px 0 8px;font-size:.875rem;color:#f7eee7}
.process-links{margin-top:10px}.section-cta{grid-column:1/-1;margin-top:34px}
/* Sticky bar: directions sit between call and estimate as a narrower, outlined link. */
.mobile-contact a.sticky-directions{flex:0 0 auto;padding:0 14px;background:transparent;color:var(--wine);border:1px solid #b79460}
@media(max-width:360px){.mobile-contact{gap:6px;padding-inline:10px}.mobile-contact a.sticky-directions{padding:0 10px}}
/* Phones: words and actions first, the illustration after them (it sits on the Las Vegas scene at the bottom of the hero). */
@media(max-width:600px){
 .hero-copy{grid-row:1}.hero-cta{grid-row:2}
 .shoe-car-stage{grid-row:3;height:190px;min-height:190px}
 .city-scenes{top:auto;bottom:0;height:210px}
 .city-scenes:after{background:linear-gradient(180deg,#281723 0,transparent 45%),linear-gradient(90deg,#24131d44,transparent)}
 .hero-car-wrap{width:78%;margin:0 auto}
 .car-stage-bottom{display:none}
}
@media(max-width:360px){.shoe-car-stage{height:165px;min-height:165px}.city-scenes{height:185px}.hero-car-wrap{margin-top:0}}
.process-links{display:flex;flex-wrap:wrap;gap:6px 16px}.process-note{margin-top:10px;font-size:.875rem;color:var(--muted,#6f5f63)}
.process-note .text-link{display:inline}
@media(max-width:380px){html .mobile-contact a{font-size:.78rem!important;line-height:1.2;text-align:center}}
/* Service cards: real reel posters / archive photos instead of illustrations, plus the top jobs. */
.service-thumbnail.photo{position:relative;overflow:hidden;border-radius:12px;background:#e6dccb;outline:1px solid var(--image-outline);outline-offset:-1px}
.service-thumbnail.photo img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center 40%;filter:none;padding:0}
.service-thumbnail.photo .ig-badge span{font-weight:500}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.service-thumbnail.photo img{transition:scale .3s ease-out}.service-row:hover .service-thumbnail.photo img{scale:1.04}}
.service-jobs{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.service-jobs li{padding:3px 10px;border:1px solid #d5c7b5;border-radius:20px;font-size:.75rem;line-height:1.4;background:#fffcf680}
/* Service pages: related services, estimate links and the price explainer / owner price table. */
.prep-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0}
.prep-links .text-link{display:inline-flex;align-items:center;min-height:44px}
.price-section .estimate-steps{margin-top:8px}
.price-section .section-cta{margin-top:28px}
.price-table-wrap{overflow-x:auto;margin-bottom:34px;border:1px solid var(--line);border-radius:14px;background:#fffcf6}
.price-table{width:100%;border-collapse:collapse;font-size:.9rem}
.price-table th,.price-table td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--line)}
.price-table thead th{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:#f4eee3}
.price-table tbody tr:last-child>*{border-bottom:0}
.price-table tbody th{font-weight:600}
@media(max-width:600px){.price-table th,.price-table td{padding:11px 12px}.service-jobs{display:none}}
/* Conversion/trust stage: compact repair chips, three review profiles, click-to-load embeds, 404 service tiles, folded legacy links. */
.repair-options.chip-set{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.repair-options.chip-set button{min-height:48px;padding:6px 12px;gap:8px;border-radius:26px}.repair-options.chip-set img{width:30px;height:30px}
@media(max-width:600px){.repair-options.chip-set{grid-template-columns:repeat(2,minmax(0,1fr))}.repair-options.chip-set button{font-size:.8125rem!important;padding:6px 10px}.repair-options.chip-set img{width:26px;height:26px}}
.review-profiles-3{grid-template-columns:repeat(3,1fr)}@media(max-width:850px){.review-profiles-3{grid-template-columns:1fr}}
.map-embed{margin:28px 0 8px;padding:22px;border:1px dashed #cdb58e;border-radius:16px;background:#fbf4e8;text-align:center}.map-embed p{font-size:.875rem!important;color:var(--muted);margin:10px 0 0}
.embed-frame{border-radius:18px;overflow:hidden;background:#1d1216;border:1px solid var(--line)}.embed-frame iframe{display:block;width:100%;height:100%;border:0}.embed-frame.is-video{aspect-ratio:16/9}.embed-frame.is-map{height:340px;margin:28px 0 8px}
.contact-card .open-status{margin:8px 0 0;font-size:.875rem}
.former-policies{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}.former-policies summary{cursor:pointer;font-weight:600;font-size:.875rem;min-height:44px;display:flex;align-items:center}
.lost-services{padding-top:0}.lost-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.lost-tile{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 14px;border:1px solid var(--line);border-radius:18px;background:#fffcf7;text-align:center;font-weight:600;transition:translate 150ms ease-out,box-shadow 150ms ease-out}.lost-tile img{width:64px;height:64px;object-fit:contain}@media(hover:hover){.lost-tile:hover{translate:0 var(--lift);box-shadow:var(--lift-shadow)}}@media(max-width:600px){.lost-grid{grid-template-columns:1fr 1fr;gap:12px}}
/* Repair stage: grid children may shrink below their scrollers' min-content (reel strips, brand chips) so phones never scroll sideways. */
.detail-layout>*{min-width:0}
/* Home: the reels block ends in an action on phones/tablets (the intro's CTA sits above the grid there); the short brand row links to the full list. */
.reels-cta-narrow{display:none}@media(max-width:850px){.reels-cta-narrow{display:flex}}
.brand-more{align-self:center;white-space:nowrap;font-size:.85rem}
/* Tablet: two picker columns so labels fit beside their icons. */
@media(min-width:601px) and (max-width:850px){.repair-options.chip-set{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Phones: 44px hit areas for breadcrumb and footer phone links without moving the layout. */
@media(max-width:600px){.breadcrumb a,.footer address a[href^=tel]{display:inline-block;padding-block:14px;margin-block:-14px}}
/* Feed captions stack title over job, so long Spanish job lines wrap inside the card. */
.ig-grid .ig-item figcaption{display:block}.ig-grid .ig-item figcaption>span{display:block;margin-top:2px}
/* From 851px: header phone + four nav labels + estimate button on one line (compact up to 1250px; Spanish labels leave no room for the phone below 960px, the top bar keeps it). */
@media(min-width:851px){.nav a{white-space:nowrap}}
@media(min-width:851px) and (max-width:1250px){.header-inner{gap:6px}.nav{gap:14px}.nav a,.header .button,.header-inner>.header-phone{white-space:nowrap;font-size:.8rem}.header .button{padding-inline:14px}.header-inner>.header-phone{margin-right:6px}}
@media(min-width:851px) and (max-width:959px){html[lang=es] .header-inner>.header-phone{display:none}}
/* Hero: the service headline leads; the pun follows as a small gold sign-off. */
.hero .hero-copy .hero-title{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,3vw,3rem);letter-spacing:-.03em;line-height:1.06;max-width:19ch;margin:14px 0 0;text-shadow:0 3px 18px #0008}
.hero .hero-copy .hero-tagline{font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.25;margin-top:14px;color:var(--gold);text-shadow:0 2px 8px #0009}
.hero .hero-copy .hero-tagline br{display:none}.hero .hero-copy .hero-tagline em{margin-left:.25em}
.hero .hero-copy .hero-tagline+p{margin-top:12px}
@media(max-width:850px){.hero .hero-copy .hero-title{font-size:2.35rem}}
@media(max-width:600px){.top .top-status span{display:none}.hero .hero-copy .hero-title{font-size:2.15rem;max-width:none}.hero .hero-copy .hero-tagline{font-size:1.1rem}}
@media(max-width:360px){.hero .hero-copy .hero-title{font-size:1.85rem}}
/* Top bar: live open/closed status with a green dot while the shop is open. */
.top .top-status{font-weight:600;font-size:inherit;white-space:nowrap}.top .top-status.is-open{color:#a6e7bf}
.top .top-status:before{width:7px;height:7px}
@media(min-width:601px){.top .location{margin-right:auto}}
@media(max-width:600px){.top .top-status:not([hidden])+.location{display:none}}
/* Repair help: hub, problem pages and mail-in (structure from Mobbin refs in design-reference/mobbin-refs.md) */
.quick-facts{margin:0 0 34px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fffdf8}
.quick-facts>div{display:grid;grid-template-columns:minmax(150px,36%) 1fr;gap:16px;padding:14px 20px;border-top:1px solid var(--line)}
.quick-facts>div:first-child{border-top:0}
.quick-facts dt{font-weight:650;color:var(--wine);font-size:.9rem}
.quick-facts dd{margin:0;font-size:.94rem}
.diagnosis{display:grid;gap:16px;margin:18px 0 34px}
.diagnosis section{border-left:3px solid var(--brass);padding:2px 0 2px 18px}
.diagnosis h3{margin:0 0 6px;font-size:1.05rem}
.diagnosis p{margin:0;font-size:.94rem}
.dont-list{list-style:none;padding:0;margin:12px 0 30px}
.dont-list li{position:relative;padding:8px 0 8px 28px;font-size:.94rem}
.dont-list li::before{content:"✕";position:absolute;left:2px;top:8px;color:#9b3b3b;font-weight:700}
.how-steps{counter-reset:step;list-style:none;padding:0;margin:16px 0 34px}
.how-steps li{counter-increment:step;position:relative;padding:3px 0 0 46px;margin:0 0 18px;min-height:32px;font-size:.94rem}
.how-steps li::before{content:counter(step);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--wine);color:#fff;display:grid;place-items:center;font-size:.85rem;font-weight:650}
.help-photos{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;margin:18px 0 30px}
.brand-note{font-size:.82rem;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-top:24px}
.help-aside .form-compact{margin-top:0}
@media(min-width:851px){.help-aside{position:sticky;top:96px;align-self:start}}
.help-links{display:grid;gap:10px}
.help-link{display:block;border:1px solid var(--line);border-radius:14px;padding:14px 18px;background:#fffdf8;color:inherit;text-decoration:none;transition-property:border-color,translate;transition-duration:150ms;transition-timing-function:ease-out}
.help-link b{display:block;color:var(--wine);font-weight:650}
.help-link>span{display:block;font-size:.85rem;color:var(--muted);margin-top:3px}
@media(hover:hover){.help-link:hover{border-color:var(--brass);translate:0 var(--lift)}}
.help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.help-card{border:1px solid var(--line);border-radius:var(--radius);background:#f4efe6;padding:26px;display:flex;flex-direction:column;gap:16px}
.help-card-head{display:flex;align-items:center;gap:14px}
.help-card-head .category-icon{width:56px;height:56px;object-fit:contain;flex:none}
.help-card h2{margin:0;font-size:1.5rem}
.help-card-contact{background:var(--wine);border-color:var(--wine);color:#fff;justify-content:center}
.help-card-contact h2{color:#fff}
.help-card-contact p{color:#f3e9e0;margin:0}
.help-card-contact .button.outline{color:#fff;border-color:#ffffff99}
.related-problems .help-links{grid-template-columns:repeat(3,minmax(0,1fr))}
.common-problems{margin:28px 0 8px}
.common-problems h2{font-size:1.35rem}
.common-problems ul{list-style:none;padding:0;margin:12px 0 14px;display:flex;flex-wrap:wrap;gap:8px}
.common-problems a{display:inline-flex;align-items:center;min-height:40px;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.88rem;color:var(--wine);text-decoration:none;background:#fffdf8}
.steps{list-style:none;padding:0;margin:0;display:grid;max-width:760px}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:18px;position:relative;padding-bottom:22px}
.steps li:not(:last-child)::after{content:"";position:absolute;left:21px;top:48px;bottom:4px;width:2px;background:var(--line)}
.steps .number{display:grid!important;place-items:center;width:44px;height:44px;margin:0;border-radius:50%;background:var(--wine);color:#fff;font:650 .9rem/1 var(--sans)}
.steps h3{margin:9px 0 4px}
.steps p{margin:0;color:var(--muted);font-size:.94rem}
.mobile-contact a{white-space:nowrap}
@media(max-width:850px){.help-grid,.related-problems .help-links{grid-template-columns:1fr}}
@media(max-width:600px){.quick-facts>div{grid-template-columns:1fr;gap:4px;padding:12px 16px}.help-card{padding:20px}.help-card h2{font-size:1.3rem}.mobile-contact{gap:8px}.mobile-contact a{font-size:.8rem}}
.rating-card{border:1px solid var(--line);border-radius:var(--radius);background:#fffdf8;padding:26px 28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px}
.rating-card .eyebrow{flex-basis:100%;margin:0}
.rating-line{margin:0;display:flex;flex-direction:column;gap:4px}
.rating-line b{font:1.5rem/1.2 var(--serif);color:var(--wine);font-weight:400}
.rating-line span{color:var(--muted);font-size:.92rem}
.rating-card .hero-actions{margin:0;align-items:center}
/* Generated illustrations: repair-help cards, problem headers, contact cards */
.help-link{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center}
.help-link .help-icon{width:72px;height:72px;object-fit:contain;border-radius:12px;background:#fff}
.help-link-copy{display:block;min-width:0}
.help-link-copy>span{display:block;font-size:.85rem;color:var(--muted);margin-top:3px}
.help-art .help-head-icon{width:min(100%,360px);height:auto;aspect-ratio:1;object-fit:contain;border-radius:var(--radius);background:#fff;box-shadow:0 12px 30px #4b2a2114}
.contact-card .contact-icon{display:block;width:72px;height:72px;object-fit:contain;border-radius:14px;background:#fff;margin-bottom:14px}
@media(max-width:600px){.help-link{grid-template-columns:60px 1fr;gap:12px}.help-link .help-icon{width:60px;height:60px}.help-art .help-head-icon{width:min(70vw,260px)}}
@media(max-width:600px){.contact-card{position:relative}.contact-card .contact-icon{position:absolute;left:14px;top:18px;width:50px;height:50px;margin:0;border-radius:10px}}
.play-glyph{display:inline-block;width:.62em;height:.74em;vertical-align:-.04em}
.video-play .play-glyph{width:.8em;height:.95em;margin-left:.12em}

/* ===== Halloween (html.halloween — set by season_script() in build_site.py, Oct 1–31 Las Vegas time or ?theme=halloween) ===== */
.hw-hat{display:none}
html.halloween{--hw-orange:#ff8a2b;--hw-purple:#5b2a86;--hw-web:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%235b2a86' stroke-width='1.1' opacity='.3'%3E%3Cpath d='M0 0L120 120M0 0L120 40M0 0L40 120M0 0L120 0M0 0L0 120'/%3E%3Cpath d='M0 26Q12 20 24 0M0 52Q26 40 50 0M0 80Q40 62 78 0M0 108Q55 86 108 0M24 120Q60 70 120 24M60 120Q86 92 120 60'/%3E%3C/svg%3E")}
html.halloween .car-ready>.hw-hat{display:block;position:absolute;z-index:3;left:1.5%;top:-4%;width:22%;aspect-ratio:420/264;background:url(/assets/seasonal/witch-hat-420.webp) center/contain no-repeat;transform:rotate(-8deg);filter:drop-shadow(0 8px 8px #0008);pointer-events:none}
html.halloween .top{background:linear-gradient(100deg,#2a1036,#4a1f63 50%,#7a3413)}
html.halloween .hero{border-color:var(--hw-orange);box-shadow:0 0 0 1px #ff8a2b55,0 18px 60px #5b2a8640}
html.halloween .hero .eyebrow{color:#ffb35c}
html.halloween .hero-tagline em{color:#ffb35c}
html.halloween .city-scenes:after{background:linear-gradient(90deg,#1b0d24ed 0%,#1b0d24a3 36%,transparent 72%),linear-gradient(0deg,#1b0d24cc,transparent 30%)}
html.halloween .button.gold{box-shadow:0 0 0 3px #ff8a2b55,0 0 22px #ff8a2b55}
html.halloween .page-head:after{content:'';position:absolute;top:0;right:0;width:150px;height:150px;background:var(--hw-web) top right/contain no-repeat;transform:scaleX(-1);pointer-events:none;z-index:0}
html.halloween .visit{background-image:linear-gradient(90deg,#1e0f2af5,#2a1236e8 65%,#2a1236cf),url('/assets/seasonal/halloween-las-vegas-1672.webp');border-color:var(--hw-orange);box-shadow:inset 0 0 0 6px #22102c,inset 0 0 0 7px #ff8a2b88}
html.halloween .footer{background:linear-gradient(90deg,#160a1ff7,#1a0c25f2),url('/assets/seasonal/halloween-las-vegas-768.webp') center/cover}
html.halloween .mobile-contact{border-top:2px solid var(--hw-orange)}
@media(max-width:850px){html.halloween .hw-hat{width:23%;top:-5%}}
@media(max-width:600px){html.halloween .city-scenes:after{background:linear-gradient(0deg,#1d0f26 0,transparent 42%),linear-gradient(90deg,#1d0f2644,transparent)}html.halloween .page-head:after{width:96px;height:96px}html.halloween .visit{background-image:linear-gradient(90deg,#1e0f2af5,#2a1236e8 65%,#2a1236cf),url('/assets/seasonal/halloween-las-vegas-768.webp')}}
/* The hat rises above the car; give it room so the stage (overflow:hidden) doesn't crop it on phones/tablets. */
@media(max-width:600px){html.halloween .shoe-car-stage{box-sizing:content-box;padding-top:8vw}html.halloween .city-scenes{height:calc(210px + 8vw)}}@media(max-width:360px){html.halloween .city-scenes{height:calc(185px + 8vw)}}@media(min-width:431px) and (max-width:600px){html.halloween .shoe-car-stage{padding-top:calc(30vw - 95px)}html.halloween .city-scenes{height:calc(115px + 30vw)}}

/* ===== Halloween loader overlay (html.qsr-loading — added by loader_script() in build_site.py, at most LOADER_PER_DAY page loads per visitor per day) ===== */
.qsr-overlay{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,#3a1747 0,#1d0d24 60%,#12071a 100%);transition:opacity .3s ease;cursor:pointer}
.qsr-overlay.out{opacity:0;pointer-events:none}
.qsr-overlay{padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));box-sizing:border-box;overscroll-behavior:contain;touch-action:none}
.qsr-overlay .qsr-loader{--qsr-size:min(76vw,300px,52vh)}
@media(min-width:900px){.qsr-overlay .qsr-loader{--qsr-size:min(360px,28vw,52vh)}}
html.qsr-loading,html.qsr-loading body{overflow:hidden}
.qsr-loader{--qsr-size:260px;width:var(--qsr-size);font-size:calc(var(--qsr-size) / 16.25);text-align:center;color:#faf2e4}
.qsr-loader svg{display:block;width:100%;height:auto;overflow:visible}
.qsr-loader .ink{stroke:#2a1420;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.qsr-word{margin-top:.25em;font:400 2.6em/1 'DM Serif Display',Georgia,serif;letter-spacing:.01em;display:inline-flex;align-items:flex-end}
.qsr-word svg{width:.42em;margin:0 0 .06em .08em}
.qsr-sub{margin-top:.55em;font:700 .62em/1 'DM Sans',Arial,sans-serif;letter-spacing:.24em;color:#e9dcf5}
.qsr-loading{margin-top:.9em;font:700 .7em/1 'DM Sans',Arial,sans-serif;letter-spacing:.2em;color:#f0cc55}
.qsr-loading i{display:inline-block;width:.55em;height:.16em;margin-left:.22em;border-radius:.1em;background:#f0cc55;opacity:.2;vertical-align:.12em;animation:qsr-stitch 1.2s steps(1) infinite}
.qsr-loading i:nth-child(2){animation-delay:.3s}.qsr-loading i:nth-child(3){animation-delay:.6s}
@keyframes qsr-stitch{0%,74%{opacity:1}75%,100%{opacity:.2}}

.qsr-car{animation:qsr-bounce .6s ease-in-out infinite;transform-origin:170px 162px}
@keyframes qsr-bounce{0%,100%{transform:translateY(0) scale(1.02,.98)}30%{transform:translateY(-6px) rotate(-1.5deg) scale(.99,1.02)}60%{transform:translateY(0) rotate(.5deg) scale(1.01,.99)}}
.qsr-wheel{animation:qsr-spin .6s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes qsr-spin{to{transform:rotate(360deg)}}
.qsr-hat{animation:qsr-hat .6s ease-in-out .08s infinite;transform-origin:76px 30px}
@keyframes qsr-hat{0%,100%{transform:rotate(-4deg)}35%{transform:rotate(7deg)}70%{transform:rotate(-2deg)}}
.qsr-road{stroke-dasharray:14 10;animation:qsr-road .6s linear infinite}
@keyframes qsr-road{to{stroke-dashoffset:48}}
.qsr-speed{stroke-dasharray:22 60;animation:qsr-road2 .3s linear infinite}
@keyframes qsr-road2{to{stroke-dashoffset:82}}
.qsr-ghost{opacity:0;animation:qsr-ghost 1.2s ease-out infinite}
.qsr-ghost.g2{animation-delay:-.6s}
@keyframes qsr-ghost{0%{opacity:0;transform:translate(0,0) scale(.3)}15%{opacity:1}100%{opacity:0;transform:translate(-36px,-18px) scale(1.15)}}
.qsr-bat{animation:qsr-batfly 2.4s ease-in-out infinite}
@keyframes qsr-batfly{0%,100%{transform:translate(0,0)}50%{transform:translate(26px,-8px)}}
.qsr-wing{animation:qsr-flap .2s ease-in-out infinite alternate;transform-box:fill-box}
.qsr-wing.l{transform-origin:right center}.qsr-wing.r{transform-origin:left center}
@keyframes qsr-flap{from{transform:scaleY(1)}to{transform:scaleY(-.35)}}
.qsr-glow{animation:qsr-glow 1.2s ease-in-out infinite}
@keyframes qsr-glow{0%,100%{opacity:.75}50%{opacity:1}}
.qsr-light{animation:qsr-glow .6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.qsr-loader *{animation:none!important}.qsr-ghost{opacity:.8}}

/* Google / Yelp marks on the review links */
.review-link{display:inline-flex;align-items:center;gap:.6em}
.review-link .review-logo{width:1.35em;height:1.35em;flex:none}
.text-link.review-link{text-decoration:none}
.text-link.review-link span{text-decoration:underline;text-underline-offset:.25em}

/* Sticky contact bar icons */
.mobile-contact a{display:inline-flex;align-items:center;justify-content:center;gap:.45em}
.mobile-contact .mc-icon{width:1.25em;height:1.25em;flex:none}
@media(max-width:350px){.mobile-contact .mc-icon{width:1.05em;height:1.05em}.mobile-contact a{gap:.3em}}

/* ===== Hero: icon buttons, four proof points, directions (mobile layout from the owner's mockup; desktop keeps two columns) ===== */
.top .top-phone{display:inline-flex;align-items:center;gap:.45em}
.top .top-phone .hx-icon{width:1.15em;height:1.15em;flex:none}
.hero-cta .button{display:inline-flex;align-items:center;justify-content:center;gap:.55em}
.hero-cta .button .hx-icon{width:1.25em;height:1.25em;flex:none}
.hero-points{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,auto));justify-content:start;max-width:560px}
.hero-points li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:0 18px;font-size:.84rem;line-height:1.25;color:#fff8ef;font-weight:500}
.hero-points li:first-child{padding-left:0}
.hero-points li+li{border-left:1px solid #f0cc5540}
.hero-points .hx-icon{width:26px;height:26px;color:#f0cc55;flex:none}
.hero-points a{color:inherit;text-decoration:none}
.hero-points a:hover{text-decoration:underline;text-underline-offset:3px}
.hero-points .open-status{display:block;color:#fff8ef;font-weight:500}
.hero-points .open-status:before{display:none}
.hero-points .os-sep{display:none}
.hero-points .os-detail{display:block;margin-top:2px;font-size:.78em;font-weight:400;color:#d9c8cf}
.hero-points .os-detail::first-letter{text-transform:uppercase}
.hero-points .open-status.is-open .os-detail{color:#a6e7bf}
.hero-points li.hp-status:has([data-open-status][hidden]){display:none}
.hero-points li.hp-status:has([data-open-status][hidden])+li{border-left:0;padding-left:0}
.hero-directions{display:inline-flex;align-items:center;gap:.5em;margin-top:18px;min-height:44px;color:#fff8ef;font-size:.9rem;font-weight:500}
.hero-directions span{text-decoration:underline;text-underline-offset:4px;text-decoration-color:#f0cc5599}
.hero-directions .hx-icon{width:1.3em;height:1.3em;color:#f0cc55;flex:none}
@media(max-width:600px){
 .shoe-car-hero .hero-copy{text-align:center}
 .shoe-car-hero .hero-copy .eyebrow{display:flex;align-items:center;justify-content:center;gap:12px}
 .shoe-car-hero .hero-copy .eyebrow:before,.shoe-car-hero .hero-copy .eyebrow:after{content:'';flex:0 1 32px;height:1px;background:currentColor;opacity:.7}
 .shoe-car-hero .hero-copy .hero-title{margin-inline:auto}
 .shoe-car-hero .hero-tagline br{display:none}
 .shoe-car-hero .hero-copy p{margin-inline:auto}
 .shoe-car-hero .hero-cta{text-align:center}
 .shoe-car-hero .hero-cta .hero-actions{display:grid;grid-template-columns:1.12fr 1fr;gap:10px;flex-wrap:nowrap}
 .shoe-car-hero .hero-cta .button{flex:none;min-width:0;padding-inline:10px;font-size:.88rem;white-space:nowrap}
 .shoe-car-hero .hero-cta .button.gold{flex-basis:auto}
 .hero-points{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;margin-top:20px}
 .hero-points li{padding:0 4px;font-size:.78rem}
 .hero-points li:first-child{padding-left:4px}
 .hero-points:has(li.hp-status [hidden]){grid-template-columns:repeat(3,minmax(0,1fr))}
 .hero-points .hx-icon{width:24px;height:24px}
 .hero-directions{margin-top:12px;font-size:.88rem}
}
@media(max-width:350px){.shoe-car-hero .hero-cta .hero-actions{grid-template-columns:1fr}}
@media(max-width:600px){
 .shoe-car-hero .hero-copy .eyebrow{font-size:.66rem!important;letter-spacing:.12em;white-space:nowrap;gap:10px}
 .shoe-car-hero .hero-copy .eyebrow:before,.shoe-car-hero .hero-copy .eyebrow:after{flex:1 1 26px;max-width:40px;min-width:8px}
 .shoe-car-hero .hero-cta{padding-inline:16px}
 .shoe-car-hero .hero-cta .hero-actions{grid-template-columns:1.15fr 1fr;gap:8px}
 .shoe-car-hero .hero-cta .button{padding-inline:8px;font-size:.86rem;gap:.45em}
 .hero-points{grid-template-columns:1.3fr 1fr 1fr 1.1fr}
 .hero-points li{font-size:.76rem}
 .hero-points .open-status{white-space:nowrap}
}
@media(max-width:600px){.shoe-car-hero .hero-cta .button{white-space:normal;line-height:1.15;text-align:left}.shoe-car-hero .hero-cta .button span{min-width:0}}
@media(max-width:600px){html[lang=en] .shoe-car-hero .hero-cta .button{white-space:nowrap}html[lang=es] .shoe-car-hero .hero-cta .hero-actions{grid-template-columns:1.4fr 1fr}}
@media(max-width:600px){html[lang=en] .shoe-car-hero .hero-cta .button{font-size:.84rem;gap:.4em;justify-content:center}}
html.halloween .hero-car-parallax:not(.car-ready) .hw-hat{opacity:0}
html.halloween .hw-hat{transition:opacity .2s}