/* ============================================================================
   A-T AUTO REPAIR — GRAPHITE
   Lifted from SDOT's at-auto-repair-GRAPHITE-v5.html mockup (2026-08-09) and
   adapted for the multi-page PHP build:
     · Google Fonts CDN  ->  self-hosted variable woff2 (@font-face below)
     · added the interior-page, form, hours-today and 404 classes the mockup
       (a single-page comp) had no need for
     · every motion is reduced-motion guarded
   The palette, texture, radii and display face are custom properties on
   :root. GRAPHITE's tokens are this first block; the FINAL skin, SHOP FLOOR,
   overrides them in the merged block at the end of this file. The staging
   ?theme= switcher is retired (see pages/theme.php).
   ========================================================================= */

/* ---------- self-hosted type (was fonts.googleapis.com in the comp) ------- */
/* Archivo ships as a variable font: one file covers 400-800. */
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-var-latin.woff2") format("woff2-variations"),
      url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}
/* Gurmukhi for the Punjabi lines — likewise variable, one file. */
@font-face{
  font-family:"Noto Sans Gurmukhi";
  src:url("../fonts/gurmukhi-var.woff2") format("woff2-variations"),
      url("../fonts/gurmukhi-var.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

/* Devanagari for the Hindi rendering. This claimed English/Punjabi visitors
   never paid for it; that was FALSE until 2026-08-26 — the language switcher
   put <a lang="hi"> on every page, which is enough for :lang(hi) to match and
   the browser to fetch all 118KB. True now, but only because the :lang rules
   below scope this face to pages that are actually in Hindi. */
@font-face{
  font-family:"Noto Sans Devanagari";
  src:url("../fonts/devanagari-var.woff2") format("woff2-variations"),
      url("../fonts/devanagari-var.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

/* SUBSET FACES — SD 2026-08-26.
   The comment above claimed Devanagari is "only downloaded when Hindi text is
   actually on the page". MEASURED: it was downloaded on EVERY page in EVERY
   language, because the language switcher carries <a lang="pa"> and
   <a lang="hi"> on all of them and :lang() matches those two words. That was
   151KB of font — about three times the hero image — to render "ਪੰਜਾਬੀ" and
   "हिन्दी" in a nav strip.
   These two faces hold ONLY the glyphs that can appear lang-tagged on a page
   written in another language (checked against the rendered HTML, not
   assumed): 12KB for the pair instead of 151KB. The full faces still load, but
   only on their own language's pages — see the :lang rules further down. */
@font-face{
  font-family:"AT Gurmukhi Sub";
  src:url("../fonts/gurmukhi-switch.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"AT Devanagari Sub";
  src:url("../fonts/devanagari-switch.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}

:root{
  /* ===== SURFACES — dark bands (hero, commitments, reviews, footer) ===== */
  --dark:#15181D;              --dark-rgb:21,24,29;
  --dark-2:#1C2027;
  --dark-3:#101317;            --dark-3-rgb:16,19,23;
  --dark-deepest:#000;
  --dark-line:#2C323B;         /* card + panel rules on dark   */
  --dark-line-2:#59616D;       /* hover state of the above     */
  --dark-line-soft:#23282F;    /* topbar + footer hairlines    */
  --d-raise:rgba(255,255,255,.03);    /* raised panel on dark  */
  --d-raise-2:rgba(255,255,255,.02);
  --d-field:rgba(255,255,255,.05);    /* form input on dark    */
  --header-bg:rgba(var(--dark-rgb),.94);

  /* ===== INK on dark bands ===== */
  --d-ink:#fff;                /* headings, emphasis          */
  --d-ink-btn:#EDEFF2;
  --d-nav:#D6DAE0;
  --d-cap:#E5E8EC;
  --d-ink-2:#C7CDD5;           /* links, body                 */
  --d-lead:#B8BFC9;            /* lead paragraphs             */
  --d-ink-3:#9AA2AD;           /* secondary                   */
  --d-ink-4:#8B93A0;           /* captions, labels            */
  --d-ink-5:#858D99;           /* faintest footer text — lifted to 4.5:1  */

  /* ===== SURFACES — light bands ===== */
  --bg:#F7F6F3; --card:#FFFFFF;
  --bg-2:#EFEDE7;             /* the tinted contact band            */
  --line:#E4E1DA; --line-2:#C9C4B8;
  --dots:#D8D3C7;              /* the hours leader dots       */
  --num-ghost:#DDD8CC;         /* the big ghosted card numeral */
  --ink:#191C21;               --ink-rgb:25,28,33;
  --ink-2:#575D66;

  /* ===== ACCENT ===== */
  --accent:#E8A33D;            --accent-rgb:232,163,61;
  --accent-deep:#D18F26;       --accent-deep-rgb:209,143,38;
  --accent-ink:#8F5B00;        /* accent, darkened to pass contrast on light */
  --accent-on:var(--dark);     /* ink that sits ON a filled accent surface   */
  --d-accent:var(--accent);    /* accent as TEXT/STROKE on a dark band.      */
  --art-grid:#262C35;          /* the grid drawn INSIDE the illustrations —  */
                               /* a skin that drops --tex-* must drop this   */
                               /* too, or the motif survives in the artwork  */
                               /* Split from --accent because a dark accent  */
                               /* legible as a fill is not legible as text   */
                               /* on near-black, and lifting the fill breaks */
                               /* the white sitting on it. See themes/.      */

  /* ===== STATES ===== */
  --warn:#E8734D; --warn-rgb:232,115,77; --warn-ink:#FFD9CB;

  /* ===== TYPE ===== */
  --font:"Archivo",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-disp:var(--font);     /* display face, if a theme adds one */
  --disp-w:800; --disp-lh:1.05; --disp-ls:-.6px; --disp-tt:none;

  /* ===== SHAPE — named by value so a theme can flatten the scale to 0 ===== */
  --r-4:4px; --r-6:6px; --r-8:8px; --r-9:9px; --r-10:10px; --r-12:12px;
  --r-pill:999px;
  --bw:1px; --bw-2:1.5px;

  /* ===== TEXTURE ===== */
  --tex-d:repeating-linear-gradient(0deg,transparent 0 47px,rgba(255,255,255,.035) 47px 48px),
          repeating-linear-gradient(90deg,transparent 0 47px,rgba(255,255,255,.035) 47px 48px);
  --tex-d-soft:repeating-linear-gradient(0deg,transparent 0 47px,rgba(255,255,255,.02) 47px 48px),
               repeating-linear-gradient(90deg,transparent 0 47px,rgba(255,255,255,.02) 47px 48px);
  --tex-l:repeating-linear-gradient(0deg,transparent 0 47px,rgba(var(--ink-rgb),.028) 47px 48px),
          repeating-linear-gradient(90deg,transparent 0 47px,rgba(var(--ink-rgb),.028) 47px 48px);
  --tex-pic:repeating-linear-gradient(0deg,transparent 0 47px,rgba(255,255,255,.03) 47px 48px),
            repeating-linear-gradient(90deg,transparent 0 47px,rgba(255,255,255,.03) 47px 48px);
  --hero-wash:radial-gradient(1100px 520px at 80% 12%,rgba(var(--accent-rgb),.16),transparent 62%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{font-family:var(--font);font-size:16px;line-height:1.65;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:var(--accent-on)}
img,svg{display:block}
a{color:var(--accent-ink)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* Script-specific faces. `:lang()` (not `[lang]`) so it inherits to every
   descendant when <html lang="pa"> switches the whole document. */
/* Full script face only when the PAGE itself is in that script — higher
   specificity, so it wins there. Everywhere else a lang-tagged fragment (in
   practice just the switcher, and the footer's "Service in English · ਪੰਜਾਬੀ")
   gets the tiny subset, and the full file is never requested at all. */
html:lang(pa) :lang(pa){font-family:"Noto Sans Gurmukhi",var(--font)}
html:lang(hi) :lang(hi){font-family:"Noto Sans Devanagari",var(--font)}
:lang(pa){font-family:"AT Gurmukhi Sub","Noto Sans Gurmukhi",var(--font)}
:lang(hi){font-family:"AT Devanagari Sub","Noto Sans Devanagari",var(--font)}
/* Gurmukhi and Devanagari have taller extenders than Latin — give the display
   sizes a little more room so ascenders don't clip against the line above. */
html[lang="pa"] h1,html[lang="hi"] h1,
html[lang="pa"] h2,html[lang="hi"] h2{line-height:1.25;letter-spacing:-.2px}
html[lang="pa"] .kicker,html[lang="hi"] .kicker{letter-spacing:1.4px}
html[lang="pa"] .stat b,html[lang="hi"] .stat b{font-size:19px}
/* Display TYPE guard for themed skins. A theme sets --disp-tt/--disp-ls to
   give its headings character (Shop Floor is condensed uppercase, Heritage is
   a slab). Neither Gurmukhi nor Devanagari has a case distinction, so the
   uppercase is a no-op — but the tight tracking that flatters condensed Latin
   caps pulls their conjuncts apart. Same reasoning as .svcline further down.
   The FACE itself needs no guard here: :lang() matches every element in the
   language, so at 0,1,0 it already outranks the bare h1/h2/h3 rule. */
:lang(pa) h1,:lang(pa) h2,:lang(pa) h3,
:lang(hi) h1,:lang(hi) h2,:lang(hi) h3{text-transform:none;letter-spacing:-.2px}
.wrap{max-width:1140px;margin-inline:auto;padding-inline:24px}

/* A grid track's automatic minimum is its item's min-content width, so one wide
   child (the hero .stat-row is width:max-content) inflates the whole column —
   at 390px the hero measured 755px wide and html{overflow-x:clip} hid the
   overspill instead of scrolling, so nothing looked wrong while a third of the
   headline sat off-screen. min-width:0 lets these tracks actually shrink. */
.hero-grid>*,.about-grid>*,.hl-grid>*,.cb-map>*,.spot-top>*,.spot-sub>*,
.mosaic>*,.mosaic .col>*,.grid-3>*,.grid-4>*,.svc-grid>*,.creds-in>*,.f-grid>*{min-width:0}
section{padding-block:clamp(60px,8vw,96px)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--dark);color:var(--d-ink);padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}

/* ===== SIGNATURE GRID TEXTURE ===== */
.texd{background-image:var(--tex-d)}
.texd-soft{background-image:var(--tex-d-soft)}
.texl{background-image:var(--tex-l)}

h1,h2,h3{font-family:var(--font-disp);font-weight:var(--disp-w);line-height:var(--disp-lh);letter-spacing:var(--disp-ls);text-transform:var(--disp-tt)}
h1{font-size:clamp(40px,5.6vw,64px)}
h2{font-size:clamp(28px,3.8vw,42px)}
h3{font-size:18.5px;font-weight:700;letter-spacing:-.2px}
.kicker{font-size:12.5px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;color:var(--accent-ink);margin-bottom:14px}
.on-dark .kicker{color:var(--d-accent)}
.lead{font-size:18px;color:var(--ink-2);max-width:58ch}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px;flex-wrap:wrap}
.sec-head p{color:var(--ink-2);max-width:46ch}
.on-dark h2{color:var(--d-ink)}
.on-dark .sec-head p{color:var(--d-lead)}

/* reveal-on-scroll: only ever applied once the JS flags itself in, so the
   no-JS page renders complete. */
html.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
html.js [data-reveal].in{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}

.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:16px;text-decoration:none;padding:14px 24px;border-radius:var(--r-6);transition:background-color .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s}
.btn-amber{background:var(--accent);color:var(--accent-on)}
.btn-amber:hover{background:var(--accent-deep);transform:translateY(-1px);box-shadow:0 10px 24px rgba(var(--accent-rgb),.3)}
.btn-line{border:var(--bw-2) solid var(--dark-line);color:var(--d-ink-btn)}
.btn-line:hover{border-color:var(--dark-line-2)}
.btn-lineamber{border:var(--bw-2) solid rgba(var(--accent-rgb),.55);color:var(--d-accent)}
.btn-lineamber:hover{border-color:var(--d-accent);background:rgba(var(--accent-rgb),.08)}
.btn-ghost{border:var(--bw-2) solid var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-dark{background:var(--dark);color:var(--d-ink)}
.btn-dark:hover{background:var(--dark-deepest)}
.icon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Drawn arrow + star. The font subset has neither U+2192 nor U+2605, so using
   the characters handed rendering to whatever the visitor's OS had. */
.ar{display:inline-block;width:1em;height:1em;vertical-align:-.12em;margin-left:.35em;flex:none}
.ar-sm{display:inline-block;width:.85em;height:.85em;vertical-align:-.08em;margin-inline:.25em;opacity:.75;flex:none}
.stars{display:inline-flex;align-items:center;gap:2px;color:var(--d-accent);line-height:1}
.stars .st{width:1em;height:1em;display:block;flex:none}
.rating-card .stars{justify-content:center;font-size:19px;margin-top:8px}
.stat b .stars{font-size:15px;vertical-align:-.1em}
.spot-top .stars{font-size:20px;margin-bottom:6px}
.spot-card .stars{font-size:15px}

/* ===== TOPBAR ===== */
.topbar{background:var(--dark-3);color:var(--d-ink-4);font-size:13px;border-bottom:1px solid var(--dark-line-soft)}
.topbar-in{display:flex;align-items:center;gap:20px;padding-block:8px;flex-wrap:wrap}
.topbar .sep{opacity:.4}
.topbar a{color:var(--d-ink-2);text-decoration:none;font-weight:600}
.topbar a:hover{color:var(--d-accent)}
.topbar .right{margin-left:auto}
.langsw{display:inline-flex;align-items:center;gap:2px}
.langsw a{padding:2px 8px;border-radius:var(--r-4);color:var(--d-ink-4);font-weight:600;text-decoration:none;transition:color .15s,background-color .15s}
.langsw a:hover{color:var(--d-accent);background:rgba(var(--accent-rgb),.1)}
.langsw a[aria-current]{color:var(--accent-on);background:var(--accent)}
.langsw .sep{opacity:.3}
/* the switcher is the one bit of chrome that must survive the mobile topbar
   being hidden, so it repeats in the header bar below 700px */
.langsw-m{display:none}
@media(max-width:700px){
  .langsw-m{display:inline-flex;order:4;width:100%;padding-top:4px;border-top:1px solid var(--dark-line);margin-top:4px}
  .langsw-m a{font-size:13px}
}
@media(max-width:819px){.topbar{display:none}}

/* ===== HEADER ===== */
header{position:sticky;top:0;z-index:50;background:rgba(var(--dark-rgb),.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--dark-line);transition:box-shadow .2s}
header.scrolled{box-shadow:0 6px 28px rgba(0,0,0,.35)}
.header-in{display:flex;align-items:center;gap:28px;padding-block:13px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--d-ink)}
.mark{width:44px;height:44px;flex:none}
.brand-name{font-weight:800;font-size:20px;letter-spacing:-.3px;line-height:1;display:block}
.brand-sub{font-size:10.5px;font-weight:600;letter-spacing:1.8px;color:var(--d-ink-3);text-transform:uppercase;margin-top:3px;display:block}
/* scoped to the header: the mobile call bar is a <nav> too */
header nav{display:flex;gap:26px;margin-left:auto;flex-wrap:wrap}
header nav a{text-decoration:none;color:var(--d-nav);font-weight:600;font-size:15px;padding-block:6px;border-bottom:2px solid transparent;transition:border-color .15s,color .15s}
header nav a:hover,header nav a[aria-current]{border-bottom-color:var(--d-accent);color:var(--d-ink)}
.header-call{white-space:nowrap}
@media(max-width:900px){header nav{margin-left:0;order:3;width:100%;gap:18px}.header-call{margin-left:auto}}
@media(max-width:560px){.header-call .btn-label{display:none}.header-call{padding:12px 14px}}

/* ===== MOBILE HEADER — SD 2026-08-26 =======================================
   The sticky bar was three stacked rows on a phone (brand+call / nav /
   language switcher), so ~150px of chrome was pinned to the top of every
   screen before a single word of content. Below 700px the sticky bar is now
   the brand+call row ONLY; nav and the switcher move into .hdr-mob, which
   sits directly underneath and scrolls away with the page.
   Both nav copies exist in the DOM but exactly one is ever displayed, so the
   accessibility tree still sees a single navigation landmark. */
.hdr-mob{display:none}
@media(max-width:819px){
  /* the in-header copies step aside for the scrolling strip */
  header nav,header .langsw-m{display:none}
  .header-in{gap:14px;padding-block:9px;flex-wrap:nowrap}
  .mark{width:36px;height:36px}
  .brand-name{font-size:17px}
  .brand-sub{font-size:9px;letter-spacing:1.4px;margin-top:2px}
  .header-call{margin-left:auto;padding:10px 13px}

  .hdr-mob{display:block;background:var(--dark-3);border-bottom:1px solid var(--dark-line)}
  /* SD 2026-08-26 (pm): "more separation between the page buttons and the
     language toggles". These were one flex row that wrapped only when it ran
     out of width — so on a narrow phone they stacked with 6px between them and
     on a wide one they sat shoulder to shoulder, and either way they read as a
     single row of seven buttons. The switcher now ALWAYS takes its own row,
     set off by a hairline and aligned right, so the two controls are visibly
     different things at every width. The extra row costs nothing off the
     pinned chrome: .hdr-mob scrolls away with the page. */
  .hdr-mob-in{display:block;padding-block:7px 7px}
  .hdr-mob nav{display:flex;gap:15px;flex-wrap:wrap}
  .hdr-mob nav a{text-decoration:none;color:var(--d-nav);font-weight:600;font-size:14px;
                 padding-block:4px;border-bottom:2px solid transparent}
  .hdr-mob nav a[aria-current]{border-bottom-color:var(--d-accent);color:var(--d-ink)}
  .langsw-s{display:flex;align-items:center;justify-content:flex-end;gap:2px;
            margin-top:8px;padding-top:8px;
            border-top:1px solid var(--dark-line-soft)}
  .langsw-s a{padding:2px 7px;border-radius:var(--r-4);color:var(--d-ink-4);font-weight:600;
              text-decoration:none;font-size:12.5px}
  .langsw-s a[aria-current]{color:var(--accent-on);background:var(--accent)}
  .langsw-s .sep{display:none}
}

/* ===== HERO ===== */
.hero{position:relative;background:var(--dark);color:var(--d-ink);padding-block:clamp(44px,5.5vw,72px) clamp(34px,4.5vw,58px);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:var(--hero-wash)}
.hero>.wrap{position:relative}
/* centred, not bottom-aligned: end-alignment left a large void above the
   artwork because the illustration is shorter than the copy column. */
/* The hero photograph used to render at ~460px — 24% of a 1728px screen — as
   a dark image on a near-black ground, so the right half of the first screen
   read as empty. It now runs to the right edge of the viewport.

   Column 1 reproduces .wrap's own geometry, so the copy still lines up exactly
   with the header and every section below it; column 3 takes what's left.
   The calc uses 100%, NOT 100vw, deliberately: 100vw includes the scrollbar,
   which would push the image a few pixels past the viewport edge — and
   html{overflow-x:clip} would silently hide that overflow instead of
   reporting it (see the min-width:0 note at the top of this file).
   The column gap is carried as padding on .hero-copy rather than as a grid
   gap, because a gap would also apply after column 1 and shove the copy out
   of alignment with the rest of the page. */
.hero>.wrap.hero-grid{max-width:none;padding-inline:0}
.hero-grid{display:grid;
  grid-template-columns:minmax(24px,calc((100% - 1140px)/2 + 24px)) minmax(0,1.06fr) minmax(0,1fr);
  column-gap:0;align-items:center}
.hero-grid>.hero-copy{grid-column:2;padding-right:clamp(24px,3.5vw,44px)}
.hero-grid>.hero-viz{grid-column:3}
@media(max-width:960px){
  .hero>.wrap.hero-grid{padding-inline:24px}
  .hero-grid{grid-template-columns:1fr}
  .hero-grid>.hero-copy{grid-column:1;padding-right:0}
  .hero-grid>.hero-viz{grid-column:1}
}
.hero-copy{padding-bottom:0}
.hero .lead{color:var(--d-lead)}
.hero h1{font-size:clamp(44px,6.2vw,84px);letter-spacing:-2.2px}
.hero h1 em{font-style:normal;color:var(--d-accent);position:relative;white-space:nowrap}
.hero h1 .swash{position:absolute;left:1%;bottom:-.18em;width:98%;height:.16em;fill:none;stroke:var(--d-accent);stroke-width:7;stroke-linecap:round;opacity:.85}
.cta-row{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero .textlink{display:inline-block;margin-top:20px;color:var(--d-accent)}
/* 2-up grid, not a wrapping max-content flex row: at hero-column widths the
   flex version broke 3+2 and left a dead cell hanging off the end. */
.stat-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:34px;border:var(--bw) solid var(--dark-line);border-radius:var(--r-10);background:var(--d-raise);max-width:520px;overflow:hidden}
.stat{padding:14px 20px;border-right:1px solid var(--dark-line);border-top:1px solid var(--dark-line)}
.stat:nth-child(2n){border-right:0}
.stat:nth-child(-n+2){border-top:0}
@media(max-width:420px){.stat-row{grid-template-columns:1fr}.stat{border-right:0;border-top:1px solid var(--dark-line)}.stat:first-child{border-top:0}}
.stat b{display:block;font-size:23px;font-weight:800;letter-spacing:-.5px;line-height:1.15;color:var(--d-ink)}
.stat b .stars{font-size:15px;letter-spacing:0}
/* DIRECT children only. As `.stat span` this also caught the <span data-count>
   and the <span class="stars"> nested inside the <b>, so the hero's two
   headline numbers rendered as 11px uppercase grey captions and the star row
   stacked vertically — "20" tiny above a large "+", and 4.4 with its stars
   collapsed. Same failure as .rating-card .stars further down: a loose
   descendant rule quietly overriding .stars{display:inline-flex}. */
.stat>span{display:block;margin-top:2px;font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--d-ink-4)}
.stars{color:var(--d-accent);letter-spacing:1.5px}
.hero-viz{position:relative}
/* The old 118%/-9% bleed was sized for a column that stopped short of the
   viewport edge. In the full-bleed column it would hang past the right edge —
   clipped, not scrolled, so nothing would report it. Fill the column instead. */
.hero-viz svg{width:100%;max-width:none;height:auto;margin-left:0}
@media(max-width:960px){.hero-viz{margin-top:28px}.hero-viz svg{width:100%;margin-left:0;max-width:560px;margin-inline:auto}}
.slot-chip{position:absolute;z-index:2;top:2px;left:2px;border:1.5px dashed rgba(var(--accent-rgb),.6);color:var(--d-accent);border-radius:var(--r-8);padding:6px 12px;font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;background:rgba(var(--dark-3-rgb),.7)}
@keyframes carbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
html.js .lift-car{animation:carbob 6.5s ease-in-out infinite}
.viz{position:relative;border:var(--bw) solid var(--dark-line);border-radius:var(--r-12);overflow:hidden;background:var(--dark-2)}
.viz svg{width:100%;height:auto}
.viz .cap{position:absolute;left:0;right:0;bottom:0;background:rgba(var(--dark-3-rgb),.82);border-top:1px solid var(--dark-line);padding:9px 16px;font-size:12px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--d-ink-3)}

/* services line strip */
.svcline{background:var(--dark-2);border-block:1px solid var(--dark-line);color:var(--d-ink-4);padding:12px 0;text-align:center;font-weight:600;font-size:14px;letter-spacing:2.4px;text-transform:uppercase;overflow:hidden;white-space:nowrap}
.svcline b{color:var(--d-accent);font-weight:600}
/* The strip now carries the translated service names. Gurmukhi and Devanagari
   join their letterforms, so tracking that flatters Latin small-caps pulls
   conjuncts apart in those scripts — and uppercase is a no-op there anyway. */
.svcline:lang(pa),.svcline:lang(hi){letter-spacing:0;text-transform:none;font-size:15px}

/* ===== FIRST-VISIT OFFER (coupon band) ===== */
.offer{background:var(--accent);color:var(--accent-on);border-block:2px dashed rgba(var(--dark-rgb),.35)}
.offer-in{display:flex;align-items:center;gap:16px;padding-block:15px;flex-wrap:wrap}
.offer .tkt{width:24px;height:24px;stroke:var(--dark);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.offer b{font-weight:800;font-size:13.5px;letter-spacing:1.8px;text-transform:uppercase;white-space:nowrap}
.offer p{font-size:15px;font-weight:600;line-height:1.4}
.offer .claim{margin-left:auto;font-weight:800;font-size:14px;color:var(--accent-on);text-decoration:none;border:2px solid var(--accent-on);border-radius:var(--r-6);padding:8px 16px;white-space:nowrap;transition:background-color .15s,color .15s}
.offer .claim:hover{background:var(--accent-on);color:var(--accent)}
@media(max-width:700px){.offer .claim{margin-left:0}}

/* ===== CREDENTIALS BAR ===== */
.creds{background:var(--card);border-bottom:1px solid var(--line);padding-block:26px}
/* auto-fit, not repeat(4): the certification tile is optional, so this band
   renders with 3 or 4 children and must stay balanced either way. */
.creds-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}
@media(max-width:560px){.creds-in{grid-template-columns:1fr}}
.cred{display:flex;align-items:center;gap:13px}
.cred .shield{width:40px;height:40px;flex:none;border-radius:var(--r-9);background:rgba(var(--accent-rgb),.14);display:grid;place-content:center}
.cred .shield svg{width:21px;height:21px;stroke:var(--accent-ink);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cred b{display:block;font-size:14.5px;letter-spacing:-.1px}
.cred span{font-size:12.5px;color:var(--ink-2)}

/* ===== TRUST PILLARS ===== */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid-3{grid-template-columns:1fr}}
.tcard{background:var(--card);border:var(--bw) solid var(--line);border-radius:var(--r-10);padding:28px 26px;transition:transform .18s,box-shadow .18s}
.tcard:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(var(--ink-rgb),.09)}
.tnum{font-weight:800;font-size:13px;letter-spacing:2px;color:var(--accent-ink);margin-bottom:12px}
.tcard h3{margin-bottom:10px}
.tcard p{color:var(--ink-2);font-size:15.5px}

/* ===== SERVICES ===== */
.svc-cat{display:flex;align-items:center;gap:14px;margin:34px 0 18px}
.svc-cat:first-of-type{margin-top:0}
.svc-cat b{font-size:13px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:var(--ink)}
.svc-cat .rule{flex:1;height:1.5px;background:var(--line)}
.svc-cat .tag{font-size:12px;font-weight:700;color:var(--accent-ink);letter-spacing:1px}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.svc-grid{grid-template-columns:1fr}}
.svc{background:var(--card);border:var(--bw) solid var(--line);border-radius:var(--r-10);padding:22px;position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s;display:flex;flex-direction:column}
.svc::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .2s}
.svc:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(var(--ink-rgb),.08)}
.svc:hover::after{transform:scaleY(1)}
.svc .num{font-weight:800;font-size:24px;letter-spacing:-1px;color:var(--num-ghost);line-height:1;margin-bottom:10px}
/* services.php promotes these to <h2> for a valid heading order — size them by
   the card, not by the global display scale. */
.svc h2,.svc h3{margin-bottom:5px;font-size:17px;font-weight:700;letter-spacing:-.2px;line-height:1.25}
.svc p{color:var(--ink-2);font-size:14.5px;line-height:1.6}
.svc .inc{margin-top:12px;padding-top:11px;border-top:1px dashed var(--line);font-size:12.5px;line-height:1.6;color:var(--accent-ink);font-weight:600}
.svc .inc b{color:var(--ink);font-weight:800;letter-spacing:1.2px;font-size:11px;text-transform:uppercase;display:block;margin-bottom:2px}
.svc-foot{margin-top:28px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:var(--ink-2)}
.textlink{font-weight:700;text-decoration:none;color:var(--accent-ink)}
.textlink:hover{text-decoration:underline;text-underline-offset:3px}

/* pending-services note */
.pending-note{margin-top:22px;font-size:13.5px;color:var(--ink-2);border-left:3px solid var(--line);padding-left:14px}

/* seasonal strip */
.season{margin-top:34px;background:linear-gradient(90deg,rgba(var(--accent-rgb),.14),rgba(var(--accent-rgb),.05));border:1px solid rgba(var(--accent-deep-rgb),.35);border-left:4px solid var(--accent);border-radius:var(--r-8);padding:18px 22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.season .icon-lg{width:26px;height:26px;stroke:var(--accent-ink);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.season p{font-size:15px;color:var(--ink)}
.season b{font-weight:800}
.season a{margin-left:auto;white-space:nowrap}

/* ===== COMMITMENTS ===== */
.commit{background:var(--dark);color:var(--d-ink)}
/* The commit band now carries only the fleet strip, so it is a band, not a
   section: section padding would leave it floating in empty dark. */
.fleetband{padding-block:30px}
.fleetband .fleet{margin-top:0}
.commit .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:960px){.commit .grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.commit .grid-4{grid-template-columns:1fr}}
.ccard{border:var(--bw) solid var(--dark-line);border-radius:var(--r-10);padding:24px;background:var(--d-raise-2)}
.ccard .cicon{width:42px;height:42px;border-radius:var(--r-9);background:rgba(var(--accent-rgb),.14);display:grid;place-content:center;margin-bottom:16px}
.ccard .cicon svg{width:22px;height:22px;stroke:var(--d-accent);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ccard h3{color:var(--d-ink);margin-bottom:8px;font-size:17px}
.ccard p{color:var(--d-lead);font-size:14.5px;line-height:1.6}
.fleet{margin-top:30px;border:1px dashed var(--dark-line);border-radius:var(--r-10);padding:16px 22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--d-ink-2);font-size:15px}
.fleet b{color:var(--d-ink)}
.fleet a{margin-left:auto}

/* ===== PHOTO STRIP (contact-sheet mosaic) ===== */
.strip{background:var(--bg)}
.mosaic{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;align-items:stretch}
.mosaic .col{display:grid;gap:20px;grid-template-rows:1fr 1fr}
@media(max-width:860px){.mosaic{grid-template-columns:1fr}.mosaic .col{grid-template-rows:none}}
.pic{position:relative;display:block;border:var(--bw) solid var(--line);border-radius:var(--r-12);overflow:hidden;background:var(--dark-2);transition:transform .18s,box-shadow .18s}
.pic::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:var(--tex-pic)}
.pic:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(var(--ink-rgb),.12)}
.pic .art{position:absolute;inset:0;width:100%;height:100%}
.pic-lg{min-height:440px}
.mosaic .col .pic{min-height:205px}
@media(max-width:860px){.pic-lg{min-height:320px}.mosaic .col .pic{min-height:230px}}
.pic .ix{position:absolute;z-index:2;top:20px;left:24px;font-weight:800;font-size:44px;line-height:1;letter-spacing:-1px;color:transparent;-webkit-text-stroke:1.6px rgba(var(--accent-rgb),.9)}
.pic .cm{position:absolute;z-index:2;width:16px;height:16px;border:0 solid rgba(var(--accent-rgb),.8)}
.pic .cm.tl{top:10px;left:10px;border-top-width:2px;border-left-width:2px}
.pic .cm.tr{top:10px;right:10px;border-top-width:2px;border-right-width:2px}
.pic .cm.bl{bottom:10px;left:10px;border-bottom-width:2px;border-left-width:2px}
.pic .cm.br{bottom:10px;right:10px;border-bottom-width:2px;border-right-width:2px}
.pic figcaption{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:36px 18px 13px;background:linear-gradient(transparent,rgba(var(--dark-3-rgb),.94) 60%);display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--d-cap)}
.pic figcaption span{color:var(--d-accent);font-size:10.5px;letter-spacing:1.8px}
.shotnote{margin-top:14px;font-size:12.5px;color:var(--ink-2);text-align:right}

/* ===== REVIEW WALL ===== */
/* Light band since 2026-08-17. SD asked for less black, and this was the
   dark section with the least reason to be dark: testimonials read as more
   credible on paper, and lifting it breaks the page's longest dark run
   (commitments -> photo strip -> reviews). The dark ink tokens below were
   swapped for their light twins in the same pass; the section also lost its
   `texd on-dark` classes in pages/reviews.php, and the inline --d-ink-4 on
   the translated-reviews note went with them. Revert = restore
   style.css.bak-20260817-tone AND reviews.php.bak-20260817-tone together. */
.spot{background:var(--bg-2);color:var(--ink)}
.spot .stars{color:var(--accent)}
.spot-top{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:center;margin-bottom:26px}
@media(max-width:860px){.spot-top{grid-template-columns:1fr}}
.rating-card{border:var(--bw) solid var(--line-2);background:var(--card);border-radius:var(--r-12);padding:30px;text-align:center}
.rating-card .big{font-weight:800;font-size:60px;letter-spacing:-2px;line-height:1;color:var(--ink)}
/* display:block here used to override the base .stars{display:inline-flex},
   which stacked the five SVG stars into a vertical column under the score.
   flex keeps them in a row AND still honours the justify-content:center set
   for this card further up the file. */
.rating-card .stars{display:flex;font-size:19px;margin-top:8px}
.rating-card p{color:var(--ink-2);font-size:14px;margin-top:10px}
.rating-card .btn{margin-top:18px}
.rating-card .leave{display:block;margin-top:12px;font-size:13px;color:var(--ink-2)}
.rating-card .leave a{color:var(--accent-ink)}
.rating-card .leave a:hover{color:var(--accent-deep)}
/* btn-lineamber is written for a dark ground; on paper it needs the light pair */
.spot .btn-lineamber{border-color:var(--line-2);color:var(--accent-ink)}
.spot .btn-lineamber:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.07)}
.spot blockquote{font-size:clamp(21px,2.6vw,28px);font-weight:600;line-height:1.45;letter-spacing:-.4px}
.spot .who{color:var(--ink-2);font-size:15px;margin-top:14px}
.spot .who b{color:var(--ink)}
.spot-sub{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
@media(max-width:900px){.spot-sub{grid-template-columns:1fr}}
.spot-card{background:var(--card);border:var(--bw) solid var(--line);border-radius:var(--r-10);padding:22px}
.spot-card p{color:var(--ink-2);font-size:15px;line-height:1.6;margin-top:10px}
.spot-card .who{font-size:13.5px;margin-top:12px}

/* ===== MEET THE MECHANIC ===== */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,5vw,64px);align-items:center}
@media(max-width:900px){.about-grid{grid-template-columns:1fr}}
.about p+p{margin-top:14px}
.about .body p{color:var(--ink-2)}
.badge-row{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.badge{border:var(--bw-2) solid var(--ink);border-radius:var(--r-6);padding:7px 13px;font-size:13px;font-weight:700;letter-spacing:.4px}
.area{margin-top:18px;font-size:14.5px;color:var(--ink-2)}
.area b{color:var(--ink)}
.langline{margin-top:14px;display:inline-flex;align-items:center;gap:10px;background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-deep-rgb),.35);border-radius:var(--r-8);padding:10px 16px;font-size:14.5px;font-weight:600}
.langline svg{width:19px;height:19px;stroke:var(--accent-ink);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ===== MAKES MARQUEE ===== */
.makes{background:var(--dark-2);border-block:1px solid var(--dark-line);padding-block:26px;overflow:hidden}
.makes .label{text-align:center;font-size:12px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;color:var(--d-ink-4);margin-bottom:16px}
.marquee{overflow:hidden}
.marquee-track{display:flex;gap:12px;width:max-content}
html.js .marquee-track{animation:mscroll 36s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes mscroll{to{transform:translateX(-50%)}}
.make{border:var(--bw) solid var(--dark-line);border-radius:var(--r-pill);padding:8px 18px;font-size:14px;font-weight:600;color:var(--d-ink-2);white-space:nowrap;background:var(--d-raise)}

/* ===== FAQ ===== */
.faq{max-width:800px;margin-inline:auto}
.faq details{background:var(--card);border:var(--bw) solid var(--line);border-radius:var(--r-10);margin-bottom:12px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:700;font-size:16px;padding:18px 22px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;font-weight:600;color:var(--accent-ink);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 22px 18px;color:var(--ink-2);font-size:15px}

/* ===== HOURS ===== */
.hl-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,64px)}
@media(max-width:860px){.hl-grid{grid-template-columns:1fr}}
.hours{background:var(--card);border:var(--bw) solid var(--line);border-radius:var(--r-10);padding:28px}
.hrow{display:flex;align-items:baseline;gap:10px;padding-block:7px;font-size:15.5px}
.hrow .d{font-weight:600}
.hrow .dots{flex:1;border-bottom:2px dotted var(--dots);transform:translateY(-4px)}
.hrow.closed .t,.hrow.closed .d{color:var(--ink-2);font-weight:500}
/* today's row — set server-side from date('N'), no JS */
.hrow.is-today{background:rgba(var(--accent-rgb),.13);border-radius:var(--r-6);margin-inline:-10px;padding-inline:10px}
.hrow.is-today .d,.hrow.is-today .t{font-weight:800;color:var(--ink)}
.today-tag{font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent-ink);border:1px solid rgba(var(--accent-deep-rgb),.5);border-radius:var(--r-4);padding:1px 6px;margin-left:8px}
.hours-note{margin-top:16px;font-size:12.5px;color:var(--ink-2)}
.addr{font-size:17px;margin-top:14px;line-height:1.55}
.phone-line{margin-top:26px;font-size:14px;color:var(--ink-2)}
.phone-line a{font-weight:800;font-size:30px;letter-spacing:-.5px;color:var(--ink);text-decoration:none;display:block;margin-top:2px}
.phone-line a:hover{color:var(--accent-ink)}
.phone-line .sms-line{display:inline-block;margin-top:10px;font-size:14px;font-weight:700;color:var(--accent-ink);text-decoration:none}
.phone-line .sms-line:hover{text-decoration:underline;text-underline-offset:3px}

/* ===== CALLBACK FORM + MAP ===== */
.cb-map{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;margin-top:clamp(36px,5vw,56px);align-items:stretch}
@media(max-width:860px){.cb-map{grid-template-columns:1fr}}
.cb-card{background:var(--dark);color:var(--d-ink);border:var(--bw) solid var(--dark-line);border-radius:var(--r-12);padding:30px 28px}
.cb-card h2,.cb-card h3{color:var(--d-ink);font-size:21px;letter-spacing:-.3px}
.cb-card .sub{color:var(--d-ink-3);font-size:14.5px;margin-top:8px;line-height:1.55}
.cb-form{display:grid;gap:16px;margin-top:22px}
.cb-fields{display:grid;gap:16px}
.cb-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.cb-2{grid-template-columns:1fr}}
.cb-form label,.cb-legend{display:block;font-size:11.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--d-ink-4);margin-bottom:7px}
.cb-set{border:0;padding:0;min-width:0}
.cb-form input,.cb-form textarea,.cb-form select{width:100%;background:var(--d-field);border:var(--bw) solid var(--dark-line);border-radius:var(--r-8);padding:12px 14px;color:var(--d-ink);font:inherit;font-size:15px;line-height:1.4}
.cb-form select option{background:var(--dark-2);color:var(--d-ink)}
.cb-form input[type=date]{color-scheme:dark}
.cb-form ::placeholder{color:var(--dark-line-2)}
.cb-form input:focus,.cb-form textarea:focus,.cb-form select:focus{outline:none;border-color:var(--d-accent)}
.cb-form input[aria-invalid="true"],.cb-form textarea[aria-invalid="true"],.cb-form select[aria-invalid="true"]{border-color:var(--warn)}
.cb-choices{display:flex;gap:8px;flex-wrap:wrap}
.chipopt{position:relative}
.chipopt input{position:absolute;opacity:0;pointer-events:none}
.chipopt span{display:inline-block;border:var(--bw) solid var(--dark-line);border-radius:var(--r-pill);padding:7px 15px;font-size:13.5px;font-weight:600;color:var(--d-ink-2);cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.chipopt span:hover{border-color:var(--dark-line-2)}
.chipopt input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--accent-on);font-weight:700}
.chipopt input:focus-visible+span{outline:3px solid var(--d-accent);outline-offset:2px}
.cb-form .btn{justify-content:center;border:0;cursor:pointer;font:inherit;font-weight:700}
.cb-note{font-size:12.5px;color:var(--d-ink-4);line-height:1.5}
/* server-rendered states (no JS needed) */
.cb-ok{display:flex;align-items:flex-start;gap:14px;border:1px solid rgba(var(--accent-rgb),.5);background:rgba(var(--accent-rgb),.1);border-radius:var(--r-10);padding:20px;margin-top:22px}
.cb-ok svg{width:26px;height:26px;stroke:var(--d-accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cb-ok b{display:block;font-size:16px}
.cb-ok span{font-size:13.5px;color:var(--d-ink-3);display:block;margin-top:4px}
.cb-err{border:1px solid rgba(var(--warn-rgb),.6);background:rgba(var(--warn-rgb),.12);border-radius:var(--r-10);padding:14px 18px;font-size:14px;color:var(--warn-ink);margin-top:18px}
.cb-err ul{margin:6px 0 0 18px}
.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.map{display:flex;flex-direction:column;border:var(--bw) solid var(--line);border-radius:var(--r-12);overflow:hidden;background:var(--card)}
.map iframe{display:block;border:0;width:100%;flex:1;min-height:320px;filter:grayscale(1) contrast(1.05)}
.mapcap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 18px;border-top:1px solid var(--line);font-size:11.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-2)}
.mapcap a{color:var(--accent-ink);text-decoration:none}
.mapcap a:hover{text-decoration:underline;text-underline-offset:3px}

/* ===== INTERIOR PAGES (not in the single-page comp) ===== */
.page-hero{background:var(--dark);color:var(--d-ink);padding-block:clamp(48px,6vw,76px)}
.page-hero h1{max-width:18ch}
.page-hero .lead{color:var(--d-lead);margin-top:18px}
.page-hero .crumb{font-size:13px;color:var(--d-ink-4);margin-bottom:16px}
.page-hero .crumb a{color:var(--d-ink-2);text-decoration:none}
.page-hero .crumb a:hover{color:var(--d-accent)}
.prose{max-width:66ch}
.prose p{margin-top:16px;color:var(--ink-2);font-size:16.5px}
.prose p:first-child{margin-top:0}
.pullquote{margin:32px 0;padding:24px 28px;background:var(--card);border:var(--bw) solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r-10);font-size:19px;font-weight:600;color:var(--ink);line-height:1.5}
.photo-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
@media(max-width:760px){.photo-row{grid-template-columns:1fr}}
.oops{text-align:center;max-width:56ch;margin-inline:auto}
.oops .big{font-size:clamp(72px,14vw,140px);font-weight:800;letter-spacing:-4px;line-height:1;color:var(--accent)}
.oops p{margin-top:16px;color:var(--ink-2)}
.oops .cta-row{justify-content:center}

/* ===== CALL BAND / FOOTER ===== */
.callband{background:var(--dark);color:var(--d-ink);text-align:center}
.callband h2{max-width:24ch;margin-inline:auto}
.callband p{color:var(--d-ink-3);margin-top:14px}
.callband .cta-row{margin-top:28px;justify-content:center}
footer{background:var(--dark-3);color:var(--d-ink-3)}
.f-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:34px;padding-block:56px}
@media(max-width:960px){.f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.f-grid{grid-template-columns:1fr}}
footer .brand-name{color:var(--d-ink)}
/* h2 not h4 — keeps the document heading order valid for the W3C checker */
footer .f-h{color:var(--d-ink);font-size:13.5px;letter-spacing:1.8px;text-transform:uppercase;margin-bottom:14px;font-weight:700}
footer p,footer li{font-size:15px;line-height:1.9}
footer ul{list-style:none}
footer a{color:var(--d-ink-2);text-decoration:none}
footer a:hover{color:var(--d-ink);text-decoration:underline;text-underline-offset:3px}
.f-tag{margin-top:14px;font-size:14px;color:var(--d-ink-5);max-width:30ch}
.f-lang{margin-top:10px;font-size:13.5px;color:var(--d-ink-4)}
.f-bottom{border-top:1px solid var(--dark-line-soft);padding-block:18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--d-ink-5)}

.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60}
.callbar a{display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 12px;font-weight:800;font-size:15.5px;text-decoration:none}
.callbar .c{flex:1.5;background:var(--accent);color:var(--accent-on)}
.callbar .t{flex:1;background:var(--dark-3);color:var(--d-accent);border-left:1px solid var(--dark-line-soft)}
/* SD 2026-08-26: the sticky bar is the CALL button only. The Text half was
   dropped from this bar because it halved the tap target for the action that
   actually matters on a phone, and because the shop's ability to receive SMS
   on that line has never been confirmed. `Text the shop` still appears in the
   page body, so nothing is lost if it turns out to work. Padding trimmed
   15px->11px; body padding-bottom must track the bar's real height or the
   last line of the footer hides underneath it. */
/* SD 2026-08-26 (pm): a full-bleed red band across the bottom of every phone
   screen read as an alert rather than an offer, and it never went away. It is
   now a single small pill: the red is carried by the border and the lettering
   instead of by roughly forty times that area, and site.js slides it out of
   the way while the visitor is reading down the page and brings it back the
   moment they scroll up. Without JS it simply stays put — the old behaviour,
   never worse. Revert = style.css.bak-20260826-mobilechrome. */
@media(max-width:819px){
  .callbar{display:flex;justify-content:center;background:none;
           padding:0 12px calc(10px + env(safe-area-inset-bottom,0px));
           /* the strip itself must not swallow taps meant for the page */
           pointer-events:none;
           transition:transform .22s ease,opacity .22s ease,visibility 0s}
  .callbar .t{display:none}
  .callbar a.c{flex:0 0 auto;pointer-events:auto;
               min-height:44px;padding:10px 20px;gap:8px;
               font-size:14.5px;font-weight:700;letter-spacing:.2px;
               border-radius:999px;
               background:rgba(var(--dark-3-rgb),.94);
               -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
               border:1.5px solid rgba(var(--accent-rgb),.62);
               color:var(--d-accent);
               box-shadow:0 6px 20px rgba(0,0,0,.34)}
  .callbar a.c:hover{border-color:var(--d-accent);
                     background:rgba(var(--accent-rgb),.14)}
  /* visibility keeps the hidden button out of the tab order — opacity alone
     leaves an off-screen control that a keyboard or switch user can still
     land on. */
  .callbar.is-away{opacity:0;transform:translateY(130%);visibility:hidden;
                   transition:transform .22s ease,opacity .22s ease,
                              visibility 0s .22s}
  body{padding-bottom:62px}
}
@media(prefers-reduced-motion:reduce){
  .callbar,.callbar.is-away{transition:none}
}

/* ===== DEDICATED SERVICE PAGES — SD 2026-08-26 =============================
   brakes.php / transmissions.php / exhaust.php / diagnostics.php. Reuses the
   existing .inc and .svc-foot styling so these pages inherit any future skin
   change along with the rest of the site. */
.svc-page{max-width:760px}
.svc-block{margin-bottom:clamp(28px,4vw,44px)}
.svc-block h2{font-size:clamp(21px,2.4vw,27px);margin-bottom:12px}
.svc-block p{line-height:1.75}
.svc-signs{margin:14px 0 0;padding-left:0;list-style:none}
.svc-signs li{position:relative;padding-left:24px;margin-bottom:10px;line-height:1.65}
.svc-signs li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--accent)}
.svc-more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:14.5px}

/* ===== MOTION POLICY =====
   One place, at the end, so nothing below can re-introduce movement. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js [data-reveal]{opacity:1;transform:none;transition:none}
  html.js .lift-car{animation:none}
  html.js .marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
}

/* ===== DROP-IN PHOTO SLOTS =================================================
   The layout rules above target `svg` because every slot shipped as an
   illustration. Once a real photograph is dropped into assets/img/, at_slot()
   emits an <img> instead — these give the <img> the identical box so the
   page is pixel-identical whichever one is in the slot. */
/* The H1 <em> is white-space:nowrap and bleeds toward the gutter, so the photo
   used to be inset 10% to keep the two apart. That inset is gone: the copy
   now carries its own padding-right in the hero grid above, which does the
   same job without shrinking the picture. */
.hero-viz img{display:block;width:100%;max-width:none;height:auto;
  border-radius:var(--r-12) 0 0 12px;
  /* A warm hairline on the two edges that meet the page. A dark photograph on
     the near-black hero ground has no edge of its own to sit against. */
  border:1px solid rgba(var(--accent-rgb),.16);border-right:0}
@media(max-width:960px){.hero-viz img{width:100%;max-width:560px;margin-inline:auto;border-radius:var(--r-12);border-right-width:1px}}
.viz img{width:100%;height:auto}
/* .pic .art already pins the tile to inset:0 — a photo additionally needs to
   crop rather than squash, matching the SVG's preserveAspectRatio="slice". */
.pic img.art{object-fit:cover;object-position:center}

/* ---- booking page (book.php) ------------------------------------------- */
.book-points{color:var(--d-ink-2);font-size:14.5px;letter-spacing:.3px;margin-top:12px}
.book-area{color:var(--ink-2);font-size:14.5px;margin-top:26px;padding-top:18px;border-top:1px dashed var(--line)}


/* ================================================================
   SHOP FLOOR — the FINAL skin, merged from themes/shopfloor.css at
   productionisation (2026-08-16). Later declarations at equal
   specificity override the GRAPHITE base tokens above, exactly as
   the separate stylesheet did. The staging theme layer is retired.
   ================================================================ */

/* ============================================================================
   A-T AUTO REPAIR — SHOP FLOOR
   Enamel signage and a service invoice, not a software product.

   Bone paper, ink black, one safety red. Condensed caps for anything that
   would be stencilled or printed. Square corners throughout — the rounded
   card is the single strongest "app" signal in the GRAPHITE build, so it is
   the first thing to go. No grid texture: the tech grid reads as a schematic
   overlay, which is the opposite of a shop that fixes cars.

   Restates the :root tokens defined in style.css. Anything not listed here is
   inherited from that file unchanged.
   ========================================================================= */

/* Oswald: a condensed grotesque of the kind used on shop frontage and parts
   bins. Variable, latin subset, self-hosted like every other face here.
   SIL Open Font License 1.1. */
@font-face{
  font-family:"Oswald";
  src:url("../fonts/oswald-var-latin.woff2") format("woff2-variations"),
      url("../fonts/oswald-var-latin.woff2") format("woff2");
  font-weight:200 700;
  font-style:normal;
  font-display:swap;
}

:root{
  /* ===== dark bands — pressed ink, lifted off black 2026-08-17 =====
     SD: "they don't want to be too dark". Every ground here moved up ~6
     points at the same hue. The ceiling is not taste, it is --d-accent
     (#E85F45) sitting as text on these grounds: --dark-2 carries the
     services strip separators and is the tightest, so it sets the limit.
     Measured after the lift — hero 4.81:1, strip 4.54:1, topbar/footer
     5.15:1, all still clear of 4.5. Do not lift further without lifting
     --d-accent with it. Revert = style.css.bak-20260817-tone. */
  --dark:#1C1F24;              --dark-rgb:28,31,36;
  --dark-2:#212429;
  --dark-3:#16191E;            --dark-3-rgb:22,25,30;
  --dark-line:#3B434C;
  --dark-line-2:#646E7B;
  --dark-line-soft:#2C323A;

  /* ===== light bands — bone paper, warmer and flatter than newsprint ===== */
  --bg:#EFEDE7;
  --bg-2:#E6E2D8;
  --card:#FBFAF6;
  --line:#D6D1C4;
  --line-2:#B8B2A2;
  --dots:#C6C0AF;
  --num-ghost:#D2CCBB;
  --ink:#14161A;               --ink-rgb:20,22,26;
  --ink-2:#4E535C;

  /* ===== accent — safety red. Warm and slightly earthy, closer to a painted
     lift post than to an alert state. ===== */
  --accent:#B4341F;            --accent-rgb:180,52,31;
  --accent-deep:#93280F;       --accent-deep-rgb:147,40,15;
  --accent-ink:#8E2314;        /* 7.5:1 on the bone ground */
  --accent-on:#FFFFFF;         /* white on red, never near-black */
  /* The brick above is a FILL colour. As text on a dark band it measures
     2.92:1 — the emphasised half of the headline, the kicker and every accent
     link failed. Lifting the fill instead would drop white-on-red from 6.08
     to 3.93, so the foreground lifts on its own. This is the least lift that
     clears 4.5:1 on all four dark grounds (hero 5.21, strip 4.73, topbar
     5.58, photo caption 5.46). */
  --d-accent:#E85F45;

  /* ===== type — condensed caps for display, Archivo still doing the reading ===== */
  --font-disp:"Oswald",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --disp-w:600;
  --disp-lh:1.06;
  --disp-ls:.4px;              /* condensed caps want air, not negative track */
  --disp-tt:uppercase;

  /* ===== shape — square. Everything. ===== */
  --r-4:0; --r-6:0; --r-8:0; --r-9:0; --r-10:0; --r-12:0;
  --r-pill:2px;                /* the marquee chips read as stamped tags */
  --bw:1.5px;
  --bw-2:2px;

  /* ===== texture — none. A drawn grid is a schematic, not a workshop. ===== */
  --art-grid:transparent;      /* the same grid, drawn inside the illustrations */
  --tex-d:none;
  --tex-d-soft:none;
  --tex-l:none;
  --tex-pic:none;
  /* Flat. The radial glow is a screen effect; a painted sign is one
     coat of colour and nothing else. */
  --hero-wash:none;
}

/* --- the hero headline is set tight for Archivo; Oswald caps need the
       opposite treatment or the words collide. -------------------------- */
.hero h1{letter-spacing:.5px;font-size:clamp(40px,5.6vw,74px);line-height:1.02}
.hero h1 em{letter-spacing:.5px}

/* THE HEADLINE IS ONE COLOUR. No red can do both jobs here: white on the CTA
   needs the red dark (>=4.5:1 wants it below ~0.175 luminance), red text on
   the near-black hero needs it light (above ~0.216). The ranges do not
   overlap, so a two-tone headline forces two visibly different reds side by
   side with the button. A painted sign solves it the same way — cream
   lettering, and the red carried by a solid block and a rule. */
.hero h1 em{color:var(--d-ink)}
.hero h1 .swash{stroke-width:5;bottom:-.14em;opacity:1;stroke-linecap:butt}

/* --- a painted shop uses flat colour blocks and hard rules, not shadows --- */
.tcard:hover,.svc:hover,.pic:hover{transform:none;box-shadow:none}
.tcard:hover,.svc:hover{border-color:var(--ink)}
.btn-amber:hover{transform:none;box-shadow:none;background:var(--accent-deep)}
header.scrolled{box-shadow:0 2px 0 var(--accent)}

/* --- the left rule on a service card becomes a full-height stripe, the way
       a bin label is colour-coded ------------------------------------------ */
.svc::after{width:5px}
.svc .num{font-family:var(--font-disp);font-size:28px;letter-spacing:.5px;color:var(--line-2)}

/* --- section headings sit on a rule, like a printed form ----------------- */
.svc-cat .rule{height:2px;background:var(--ink);opacity:.16}
.badge{border-radius:0;border-width:2px}

/* --- stat block: a stamped plate rather than a translucent card ---------- */
.stat-row{background:rgba(255,255,255,.04);border-color:var(--dark-line)}
.stat b{font-family:var(--font-disp);letter-spacing:.5px;font-size:26px}

/* --- keep the reading copy in Archivo; only display type is condensed ---- */
.lead,.prose p,.svc p,.tcard p,.spot blockquote{font-family:var(--font)}

/* --- the focus ring is the one accent use that lands on BOTH grounds, so it
       cannot come from a single token; lift it inside the dark bands ------- */
header :focus-visible,.topbar :focus-visible,.hero :focus-visible,
.commit :focus-visible,.callband :focus-visible,
.page-hero :focus-visible,.cb-card :focus-visible,.callbar :focus-visible,
footer :focus-visible{outline-color:var(--d-accent)}

/* --- a red tint on bone paper turns pink. The bilingual notice reads as a
       printed slip instead: darker stock, ink rule, red only in the mark. --- */
.langline{background:var(--bg-2);border-color:var(--line-2);border-width:var(--bw)}

/* ---- the place: drawn property + live Street View (contact / about) ------ */
.place-band{padding-block:64px 76px;background:var(--bg)}
.place-h{font-family:var(--font-disp);font-weight:var(--disp-w);letter-spacing:var(--disp-ls);text-transform:var(--disp-tt);line-height:var(--disp-lh);font-size:clamp(24px,3vw,34px);margin-bottom:22px}
.place-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
@media(max-width:880px){.place-grid{grid-template-columns:1fr}}
.place-art{margin:0;display:flex}
.place-art img{width:100%;height:100%;object-fit:cover;border:var(--bw) solid var(--line-2)}
.place-sv{display:flex;flex-direction:column}
.place-sv iframe{width:100%;flex:1;min-height:320px;border:var(--bw) solid var(--line-2)}
.place-note{color:var(--ink-2);font-size:13.5px;margin-top:8px}
.hero-place{margin:38px 0 0}
.hero-place img{width:100%;height:auto;border:var(--bw) solid var(--dark-line)}

/* ===== REAL-PHOTO BANDS + FRAMES (2026-08-21 shoot; toned same day) =====
   SD's browser review: the photos must sit flush with the charcoal theme.
   The files were regraded at source (saturation and contrast down — never
   CSS filter:), and each placement gets a charcoal overlay and/or a mat
   frame. Overlays are rgba of the theme dark, not pure black. */
.photoband{margin:0;background:var(--dark);position:relative}
.photoband img{display:block;width:100%;height:clamp(240px,34vw,420px);object-fit:cover;object-position:center}
.photoband::after{content:"";position:absolute;inset:0;background:rgba(22,24,27,.38);pointer-events:none}
/* Roadside arrival under the directions CTA: matted like a print, quiet
   overlay to sit it back into the page. ::after inset matches the padding. */
.hl-photo{position:relative;margin:24px 0 0;padding:10px;background:var(--bg);border:var(--bw) solid var(--line-2);border-radius:var(--r-12);overflow:hidden}
.hl-photo img{display:block;width:100%;height:auto}
.hl-photo::after{content:"";position:absolute;inset:10px;background:rgba(22,24,27,.22);pointer-events:none}
/* About-page drive-up: dark mat + overlay, same reasoning. */
.hero-place{position:relative;background:var(--dark-2);border:1px solid var(--dark-line);border-radius:var(--r-12);padding:clamp(10px,1.5vw,18px)}
.hero-place img{display:block;width:100%;border:0}
.hero-place::after{content:"";position:absolute;inset:clamp(10px,1.5vw,18px);background:rgba(22,24,27,.26);pointer-events:none}
/* Hero sign: SD asked for a ground around the photo — a dark mat behind it.
   Padding sits inside the hairline border; the right-edge bleed rides along. */
.hero-viz img{padding:clamp(10px,1.2vw,16px);background:var(--dark-2)}
/* The mosaic tiles and the contact street photo get the same charcoal
   veil as every other placement (SD's review: darker, flush with the
   theme). Tile captions are z-index 2 and stay above it.

   2026-08-24, SD's pick in the Design Studio: the "max" option — a 52% flat
   charcoal over the whole tile plus a stronger gradient behind the caption,
   lifting to 38% on hover so the tile still feels alive. Charcoal (22,24,27),
   never pure black: on this palette pure black reads blue-grey. */
.pic::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(to top,rgba(22,24,27,.88) 0%,rgba(22,24,27,.15) 55%,rgba(22,24,27,0) 100%),rgba(22,24,27,.52);
  transition:background .22s ease}
.pic:hover::after{background:linear-gradient(to top,rgba(22,24,27,.88) 0%,rgba(22,24,27,.15) 55%,rgba(22,24,27,0) 100%),rgba(22,24,27,.38)}
@media(prefers-reduced-motion:reduce){.pic::after{transition:none}}
.place-art{position:relative}
.place-art::after{content:"";position:absolute;inset:0;background:rgba(22,24,27,.18);pointer-events:none}
/* The .viz cell now holds a real photograph (the bilingual door sign): kill
   the inline-image baseline gap the illustrations never had. The 34px bottom
   margin that used to sit here cleared the caption bar off the sign's phone
   number — the caption went 2026-08-24, so the gap goes with it. */
.viz img{display:block}

/* Conversion round 2026-08-28: the "best time" chips are the only control on
   the forms smaller than a fingertip. On touch widths, grow them to a proper
   tap target for customers who are not phone-confident. Appended LAST on
   purpose -- this file resolves top-to-bottom and the skin blocks above win
   otherwise. */
@media (max-width:720px){
  .chipopt span{padding:12px 18px;font-size:15px}
}