:root{
    --bg:#FFFFFF;
    --card:#FFFFFF;
    --soft:#F4F7EE;         /* faint green-tinted band */
    --ink:#0B0B0B;          /* logo black */
    --ink-2:#1D1F1B;
    --green:#99C66B;        /* logo green: swoosh + phone */
    --lime:#C9D85F;         /* logo lime: PAINT/BODY */
    --green-dk:#3F7A1E;     /* deep green: text + CTAs on white */
    --green-dp:#2E5D12;     /* deep green hover */
    --yellow:#F6EF64;       /* logo spray-gun yellow */
    --star:#E7A100;
    --muted:#5F6357;
    --line:rgba(11,11,11,.12);
    --line-dk:rgba(255,255,255,.16);
    --snap-navy:#062D4E;    /* Snap Finance brand navy: partner card only */
    --nav-h:82px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{font-family:"Barlow",system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  img{max-width:100%;display:block}
  .wrap{max-width:1180px;margin:0 auto;padding:0 22px}
  a{color:inherit;text-decoration:none}
  .eyebrow{font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

  /* ================= STICKY HEADER (black, matches logo plate) ================= */
  header{position:sticky;top:0;z-index:70;background:#000;border-bottom:3px solid var(--green);box-shadow:0 2px 16px rgba(11,11,11,.22)}
  .nav{display:flex;align-items:center;gap:20px;height:var(--nav-h);padding:0 clamp(18px,3.5vw,44px)}
  .brand-link{flex:none;display:block;line-height:0}
  .nav-logo{height:62px;width:auto}
  /* desktop tagline sits to the RIGHT of the logo */
  .nav-tag{display:flex;flex-direction:column;justify-content:center;padding-left:20px;border-left:2px solid rgba(255,255,255,.18);min-width:0}
  .nav-tag .t1{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:1.02rem;line-height:1.05;letter-spacing:.01em;color:#fff;white-space:nowrap}
  .nav-tag .t1 .u{color:var(--lime)}
  /* the insurance claim is the strongest thing the shop can say in the
     header, so it carries the same Anton weight and size as the promo
     line under it rather than sitting in small muted grey. Lime, not
     green, so it reads as its own line instead of merging with .t3. */
  .nav-tag .t2{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:.84rem;line-height:1.1;
    letter-spacing:.07em;color:var(--lime);white-space:nowrap;margin-top:3px}
  /* the third line is the promo, so it carries the logo green instead of the
     muted grey; it is narrower than .t1, so it costs the block no width */
  .nav-tag .t3{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:.84rem;line-height:1.1;
    letter-spacing:.07em;color:var(--green);white-space:nowrap;margin-top:3px}
  .nav-right{display:flex;align-items:center;gap:18px;margin-left:auto}
  .nav-links{display:flex;align-items:center;gap:20px}
  .nav-links a{font-weight:600;font-size:.92rem;color:#E9ECE1}
  .nav-links a:hover{color:var(--lime)}
  .nav-phone{font-family:"Space Mono",monospace;font-weight:700;font-size:.88rem;white-space:nowrap;color:var(--green)}
  .lang{display:inline-flex;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:3px;flex:none}
  .lang button{font-family:"Barlow",sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.03em;color:#C3C7B9;background:transparent;border:0;cursor:pointer;padding:8px 13px;border-radius:999px;transition:background .15s,color .15s;min-height:36px}
  .lang button.on{background:var(--green);color:var(--ink)}
  .nav-cta{background:var(--green);color:var(--ink);padding:12px 20px;border-radius:4px;font-weight:700;font-size:.9rem;white-space:nowrap;transition:background .16s}
  .nav-cta:hover{background:var(--lime)}
  .nav-call{display:none}
  /* facebook: borrows the EN/ES pill's shell so the two sit together cleanly */
  .fb-ico{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;
    border-radius:999px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);
    color:var(--green);transition:background .16s,border-color .16s,color .16s}
  .fb-ico svg{width:19px;height:19px;display:block;fill:currentColor}
  .fb-ico:hover{background:var(--green);border-color:var(--green);color:var(--ink)}

  /* ========== PROMO STRIP: slim green bar riding under the nav ==========
     it lives inside the sticky header element, so it sticks with the menu. It
     sits between the black nav plate and the black logo band and is painted in
     the logo green, which means it reads as the header's separating rule made
     thick enough to hold a line of type; no new colour enters the page, and
     the header's own 3px green border merges straight into it. */
  .promo{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
    gap:11px;min-height:31px;padding:5px 14px;background:var(--green);color:var(--ink);text-align:center}
  .promo .free{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:.95rem;line-height:1;
    letter-spacing:.07em;animation:promoPulse 2.4s ease-in-out infinite}
  /* the middle clause and its separator drop together on a phone */
  .promo .mid{display:contents}
  .promo .sep{font-weight:700;font-size:.8rem;opacity:.42}
  .promo .sub{font-weight:700;font-size:.78rem;letter-spacing:.04em;opacity:.86;white-space:nowrap}
  .promo .tel{font-family:"Space Mono",monospace;font-weight:700;font-size:.78rem;white-space:nowrap}
  /* a slow sheen sweep rather than a hard blink: it reads as "live" from the
     corner of the eye, and at ~0.4Hz it stays well under the flash threshold */
  .promo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);
    transform:translateX(-100%);animation:promoSheen 5.4s ease-in-out infinite}
  .promo:hover{background:var(--lime)}
  /* the shared header outline is green, which would vanish on this bar */
  .promo:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
  @keyframes promoPulse{0%,100%{opacity:1}50%{opacity:.52}}
  @keyframes promoSheen{0%{transform:translateX(-100%)}58%,100%{transform:translateX(100%)}}
  @media (prefers-reduced-motion: reduce){
    .promo .free{animation:none}
    .promo::after{display:none}
  }
  /* the strip adds ~34px to the sticky header, so nav jumps need the offset
     or the section heading lands underneath it */
  section[id]{scroll-margin-top:calc(var(--nav-h) + 42px)}

  /* ========== LOGO BAND: full-width black plate, logo centred at its own size ==========
     the logo art is black-backed, so it melts into the band instead of being stretched */
  /* the plate stays PURE black under the logo; the art has black baked in
     (black letter fills, black "& COLLISION" on the white banner), so any
     tint here would show as a hard rectangle around it. The fade lives in
     its own strip below, clear of the art. */
  /* the bottom padding is deliberately shorter than the top: the fade strip
     below opens on pure #000, so pulling the boundary up just trades dead
     black for the start of the fade and takes height off the header */
  .logo-band{background:#000;display:grid;place-items:center;padding:clamp(20px,3.2vw,36px) 22px clamp(8px,1.4vw,16px)}
  .logo-band img{width:min(560px,74vw);height:auto}

  /* ========== SKY FADE: carries the black plate down into the photo's sky ==========
     end stop is #D1D1D1, sampled off the top rows of storefront.jpg as cropped,
     so the strip and the photo meet with no visible seam */
  .sky-fade{height:clamp(78px,10vw,132px);
    background:linear-gradient(180deg,#000 0%,#080C11 16%,#1A222B 34%,#3D4853 54%,#6E7A84 72%,#A8B0B4 87%,#D1D1D1 100%)}

  /* ========== STOREFRONT BANNER: the frame, trimmed top and bottom ==========
     the photo is a portrait phone shot, cropped 1100x1488 -> 1100x1115: the
     wet lot cut just under the neon reflections so the empty asphalt below
     them is gone, and the sky cut to ~35px above the right-hand canopy so the
     grey strip overhead reads as the same sky, not a separate band. Full-bleed
     cover would eat most of it, so it is shown whole and centred. The two side
     fills are vertical gradients whose stops are sampled straight off the
     photo's own left and right edge columns (sky -> treeline -> red wall ->
     wet asphalt) and re-registered to the crop, so each side continues the
     photo at its own height instead of framing it. */
  .sf-band{--sf-h:min(78vh,669px);--sf-w:min(100%,660px,calc(var(--sf-h)*.9865));
    position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;
    background:#8A8F8C;border-bottom:4px solid var(--green);overflow:hidden}
  .sf-band::before,.sf-band::after{content:"";position:absolute;top:0;bottom:0;z-index:0}
  .sf-band::before{left:0;right:50%;background:linear-gradient(180deg,#D6D6D6 0%,#D5D5D5 3%,#6E746D 14%,#4F5A51 24%,#3F3F2B 34%,#6F6349 45%,#7D5847 56%,#A69878 66%,#86896F 76%,#81816F 86%,#7A7B69 97%,#787867 100%)}
  .sf-band::after{left:50%;right:0;background:linear-gradient(180deg,#CCCDCB 0%,#C5C6C3 3%,#40423C 14%,#343530 24%,#3A232C 34%,#947A7B 45%,#8B3A34 56%,#92795C 66%,#8E7D73 76%,#7B6D67 86%,#73655E 97%,#71645D 100%)}
  /* sized off the viewport so the frame fills the fold without pushing the
     hero off it; width follows from the 1100:1115 ratio, and the 669px cap is
     exactly where that ratio hits the 660px max-width below (no letterboxing) */
  /* the last few px of each edge feather into the side fill, so the join is a
     soft transition instead of a hard vertical line */
  .sf-band img{position:relative;z-index:1;display:block;width:auto;height:var(--sf-h);
    max-width:min(100%,660px);object-fit:contain;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%)}
  /* caption tracks the photo's rendered width (1100/1115 = .9865) so its
     scrim never spills onto the side fills */
  .sf-band figcaption{position:absolute;z-index:2;left:50%;transform:translateX(-50%);bottom:0;width:var(--sf-w);
    display:flex;align-items:center;justify-content:flex-end;gap:9px;
    padding:40px clamp(14px,2.2vw,20px) 13px;font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.08em;
    text-transform:uppercase;color:#EDEFE6;background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.25) 52%,rgba(0,0,0,0));pointer-events:none}
  .sf-band figcaption .pin{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none;box-shadow:0 0 0 4px rgba(153,198,107,.24)}

  /* ================= HERO ================= */
  .hero{padding:clamp(40px,6vw,62px) 0 clamp(8px,2vw,16px)}
  .hero-copy{max-width:900px}
  .hero h1{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(2.3rem,5vw,4.1rem);line-height:.98;letter-spacing:.005em;color:var(--ink)}
  .hero h1 .u{color:var(--green-dk)}
  .hero .lead{font-size:clamp(1rem,2.4vw,1.14rem);color:#3B3F35;max-width:54ch;margin:18px 0 26px}
  .hero-badges{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}
  .badge{display:inline-flex;align-items:center;gap:7px;font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .dot{width:9px;height:9px;border-radius:50%;background:var(--green-dk);box-shadow:0 0 0 4px rgba(63,122,30,.18);flex:none}
  .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
  /* chips sit just under the hero copy */
  .chip-band{padding:clamp(26px,4vw,38px) 0 clamp(30px,4vw,44px)}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 24px;border-radius:4px;font-weight:700;font-size:1rem;min-height:52px;transition:transform .12s,background .16s,border-color .16s,color .16s;cursor:pointer;border:0;text-align:center}
  .btn:active{transform:translateY(1px)}
  .btn-r{background:var(--green-dk);color:#fff}
  .btn-r:hover{background:var(--green-dp)}
  .btn-n{background:var(--ink);color:#fff}
  .btn-n:hover{background:var(--ink-2)}
  .btn-line{border:2px solid var(--ink);color:var(--ink)}
  .btn-line:hover{background:var(--ink);color:#fff}

  /* trust chips row */
  .chips{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .chip{display:flex;align-items:center;gap:11px;font-weight:600;font-size:.96rem;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px 16px}
  .chip .ck{width:24px;height:24px;border-radius:5px;background:var(--green-dk);color:#fff;display:grid;place-items:center;font-size:.78rem;flex:none}
  .chip.n .ck{background:var(--ink)}

  /* ================= STATS (logo green band) ================= */
  .stats{background:var(--green);color:var(--ink)}
  .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:32px 0}
  .stat{border-left:2px solid rgba(11,11,11,.3);padding-left:16px}
  .stat .n{font-family:"Anton",sans-serif;font-size:clamp(1.9rem,4vw,2.5rem);line-height:1}
  .stat .n .st{font-family:inherit;font-size:.72em;margin-left:.06em;vertical-align:.08em}
  .stat .l{font-size:.88rem;color:rgba(11,11,11,.8);margin-top:4px}

  /* ================= SECTIONS ================= */
  section.blk{padding:clamp(48px,7vw,74px) 0}
  .sec-head{margin-bottom:clamp(26px,4vw,36px)}
  .sec-head .kick{display:flex;align-items:center;gap:12px;margin-bottom:12px}
  .sec-head .bar{width:34px;height:4px;background:var(--green-dk);border-radius:2px;flex:none}
  .sec-head h2{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(1.7rem,4.4vw,2.9rem);line-height:1.12;letter-spacing:.01em;color:var(--ink)}
  .sec-head p{color:var(--muted);max-width:54ch;margin-top:10px;font-size:1.01rem}

  /* paint & materials: the AkzoNobel band, white against the soft-green About
     below it. Shorter padding and a smaller h2 than a real section: this
     supports the paint claim, it does not lead. */
  .paint{background:var(--bg);padding:clamp(34px,4.6vw,50px) 0}
  .paint-grid{display:grid;grid-template-columns:minmax(0,290px) 1fr;gap:clamp(24px,3.4vw,42px);align-items:center}
  /* no card: on a white band a white plate has no figure/ground left, so the
     mark sits on the section directly and the grid gap gives it its clear space */
  .paint-plate{display:grid;place-items:center}
  .paint-plate img{width:100%;max-width:230px;height:auto;display:block}
  .paint .sec-head{margin-bottom:0}
  .paint .sec-head h2{font-size:clamp(1.45rem,3.2vw,2.15rem)}
  .paint .sec-head p{max-width:58ch}

  /* about */
  #about{background:var(--soft)}
  .about{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
  .about .lede{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(1.35rem,3.4vw,2rem);line-height:1.1;margin-bottom:16px;color:var(--ink)}
  .about p{color:#3B3F35;font-size:1.02rem;margin-bottom:14px}
  .vals{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .val{background:var(--card);padding:20px}
  .val .vt{font-family:"Anton",sans-serif;text-transform:uppercase;color:var(--green-dk);font-size:1.02rem;margin-bottom:6px}
  .val p{font-size:.92rem;color:#4A4E43;margin:0}

  /* services: BLACK */
  .services{background:var(--ink);color:#E4E7DB}
  .services .sec-head h2{color:#fff}
  .services .sec-head p{color:#A7AB9C}
  .services .sec-head .bar{background:var(--green)}
  .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16);border-radius:10px;overflow:hidden}
  .svc{background:var(--ink);padding:26px 22px;transition:background .18s}
  .svc:hover{background:var(--ink-2)}
  .svc h3{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:1.24rem;margin:0 0 8px;color:#fff}
  .svc p{font-size:.94rem;color:#A7AB9C}

  /* insurance */
  .ins{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
  .ins-card{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--green-dk);border-radius:10px;padding:28px;box-shadow:0 6px 22px rgba(11,11,11,.06)}
  .ins-card .q{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:1.4rem;line-height:1.12;margin-bottom:14px;color:var(--ink)}
  .ins-card p{color:#3B3F35;margin-bottom:12px}
  .ins-card .btn{width:100%;margin-top:8px}
  .ins-list{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:20px}
  .ins-list li{display:flex;gap:14px;align-items:flex-start;font-size:1rem}
  .ins-list .n{font-family:"Anton",sans-serif;color:var(--green-dk);font-size:1.2rem;line-height:1.1;flex:none;width:24px}

  /* ================= FINANCING (Snap Finance) =================
     Snap's own brand navy is used only inside the partner card, so the
     card reads as "their thing" without pulling the page off our palette. */
  /* stays white: the reviews band below is already --soft, and two tinted
     bands back to back read as one section. A hairline does the separating. */
  .fin{border-top:1px solid var(--line)}
  .fin-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
  .fin-note{color:var(--muted);font-size:.9rem;margin-top:18px;max-width:54ch}
  .fin-card{background:var(--card);border:1px solid rgba(6,45,78,.14);border-left:5px solid var(--snap-navy);
    border-radius:10px;padding:28px;box-shadow:0 6px 22px rgba(11,11,11,.06);text-align:center}
  .snap-logo{width:min(210px,64%);height:auto;margin:0 auto 18px}
  .fin-card .q{color:#3B3F35;margin-bottom:22px}
  .fin-k{font-family:"Space Mono",monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
  /* the number is the thing customers have to retype on Snap's page, so it is
     a real button: tap it and it goes to the clipboard */
  .fin-num{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;
    background:#F4F8FC;border:2px dashed rgba(6,45,78,.28);border-radius:8px;padding:14px 16px;
    font-family:"Space Mono",monospace;font-size:clamp(1.5rem,4.6vw,1.9rem);font-weight:700;
    letter-spacing:.12em;color:var(--snap-navy);cursor:pointer;transition:background .16s,border-color .16s}
  .fin-num:hover{background:#E8F0F8;border-color:var(--snap-navy)}
  .fin-num svg{width:19px;height:19px;flex:none;fill:none;stroke:var(--snap-navy);stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round;opacity:.65}
  .fin-num:hover svg{opacity:1}
  .fin-num.copied{background:#EAF6EE;border-style:solid;border-color:var(--green-dk);color:var(--green-dk)}
  .fin-num.copied svg{stroke:var(--green-dk);opacity:1}
  .fin-num .ico-ok,.fin-num.copied .ico-copy{display:none}
  .fin-num.copied .ico-ok{display:block}
  .fin-copied{display:block;min-height:1.2em;margin-top:8px;font-family:"Space Mono",monospace;
    font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green-dk);opacity:0;transition:opacity .16s}
  .fin-copied.on{opacity:1}
  .btn-snap{background:var(--snap-navy);color:#fff;width:100%;margin-top:16px}
  .btn-snap:hover{background:#0A4270}
  .fin-card .sub{color:var(--muted);font-size:.84rem;margin-top:12px}
  .fin-card .sub a{color:var(--snap-navy);text-decoration:underline}

  /* ================= PAYMENTS =================
     Confirms how you settle up right after the financing pitch, so it keeps
     the shortened rhythm of .paint rather than the full section padding.
     Named .pmt, not .pay: .pay is already the mono payments line in contact,
     and reusing it leaked that rule's Space Mono into this section. */
  .pmt{background:var(--bg);border-top:1px solid var(--line);padding:clamp(34px,4.6vw,50px) 0}
  .pmt-grid{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,3.4vw,42px);align-items:center}
  .pmt .sec-head{margin-bottom:0}
  .pmt .sec-head h2{font-size:clamp(1.45rem,3.2vw,2.15rem)}
  .pmt .sec-head p{max-width:52ch}
  .pmt-cards{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
  /* the tile is what makes four marks of very different proportion read as one
     set: Amex is square, Discover is a 6:1 wordmark, and the uniform card-shaped
     plate gives them all the same footprint */
  .pmt-card{width:74px;height:46px;flex:none;display:grid;place-items:center;padding:6px 7px;
    background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 2px 8px rgba(11,11,11,.06)}
  .pmt-card img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
  /* official marks, sized per brand rather than to a common box: fitted purely
     by bounding box the square Amex mark towers over the 6:1 Discover wordmark,
     so each is capped to the height that makes them read at equal weight */
  .pmt-card img[data-mk="visa"]{height:28px}
  .pmt-card img[data-mk="mastercard"]{height:30px}
  .pmt-card img[data-mk="amex"]{height:33px}
  .pmt-card img[data-mk="discover"]{width:100%;height:auto}

  /* widgets */
  .reviews-widget{margin-top:6px}
  .reviews-widget img{max-width:100%}

  /* contact: black */
  .contact{background:var(--ink);color:#E4E7DB}
  .contact .sec-head h2{color:#fff}
  .contact .sec-head .bar{background:var(--green)}
  .c-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
  .c-info .row{display:flex;gap:14px;padding:15px 0;border-top:1px solid var(--line-dk)}
  .c-info .row:last-of-type{border-bottom:1px solid var(--line-dk)}
  .c-info .k{font-family:"Space Mono",monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green);width:86px;flex:none;padding-top:4px}
  .c-info .v{font-size:1rem;color:#E4E7DB}
  .c-info .v small{display:block;color:#9A9E90;font-size:.85rem}
  .c-info .v a:hover{color:var(--lime)}
  .c-info .v a.email{word-break:break-word}
  .c-info .v .fb-link{display:inline-flex;align-items:center;gap:9px}
  .c-info .v .fb-link svg{width:22px;height:22px;flex:none;fill:var(--green);transition:fill .16s}
  .c-info .v .fb-link:hover svg{fill:var(--lime)}
  .c-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
  .pay{margin-top:18px;font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.05em;color:#9A9E90}
  .map-wrap{border-radius:10px;overflow:hidden;border:1px solid var(--line-dk);min-height:340px}
  .map{border:0;width:100%;height:100%;min-height:340px}

  /* footer: black */
  footer{background:#050505;color:#8B8F81;padding:32px 0 34px}
  .foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
  .foot .fname{font-family:"Anton",sans-serif;text-transform:uppercase;color:#fff;font-size:1.02rem}
  .foot .fname .g{color:var(--green)}
  .foot .fine{font-size:.79rem;line-height:1.5}
  .foot .fine a{color:#8B8F81;text-decoration:underline;text-underline-offset:2px}
  .foot .fine a:hover{color:var(--lime)}
  /* footer is near-black and the mark is blue, so it keeps a light plate here too */
  .foot-akzo{display:flex;align-items:center;gap:11px;flex:none}
  .foot-akzo .fa-l{font-family:"Space Mono",monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
  .foot-akzo .fa-plate{background:#fff;border-radius:6px;padding:8px 12px;display:grid;place-items:center;flex:none}
  /* the lockup carries a tagline under the wordmark, so it needs the height to
     stay legible; below ~30px the bottom line collapses into texture */
  .foot-akzo img{height:34px;width:auto;display:block}

  /* mobile sticky call bar */
  .callbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-top:2px solid var(--green);box-shadow:0 -4px 18px rgba(11,11,11,.12)}
  .callbar .btn{flex:1;font-size:.98rem;padding:14px 12px;min-height:52px}

  a:focus-visible,button:focus-visible{outline:3px solid var(--green-dk);outline-offset:2px;border-radius:4px}
  header a:focus-visible,header button:focus-visible,.services a:focus-visible,.contact a:focus-visible{outline-color:var(--green)}
  .ba a:focus-visible,.ba button:focus-visible{outline-color:var(--green)}

  /* ================= BEFORE & AFTER RAIL ================= */
  .ba{background:var(--ink);color:#E4E7DB;overflow:hidden}
  .ba .sec-head h2{color:#fff}
  .ba .sec-head p{color:#A7AB9C}
  .ba .sec-head .bar{background:var(--green)}
  .ba-head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px}
  .ba-nav{display:flex;gap:10px;flex:none;padding-bottom:4px}
  .ba-arrow{width:46px;height:46px;border-radius:50%;background:transparent;border:2px solid rgba(255,255,255,.28);color:#fff;font-family:"Barlow",sans-serif;font-size:1.4rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .16s,border-color .16s,color .16s}
  .ba-arrow:hover{background:var(--green);border-color:var(--green);color:var(--ink)}
  .ba-arrow[disabled]{opacity:.28;cursor:default}
  .ba-arrow[disabled]:hover{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}

  .ba-rail{--edge:max(22px,calc((100vw - 1136px) / 2));display:flex;gap:18px;padding:4px var(--edge) 20px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-left:var(--edge);overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--green) rgba(255,255,255,.14);cursor:grab}
  .ba-rail.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
  .ba-rail::-webkit-scrollbar{height:8px}
  .ba-rail::-webkit-scrollbar-track{background:rgba(255,255,255,.12);border-radius:4px}
  .ba-rail::-webkit-scrollbar-thumb{background:var(--green);border-radius:4px}
  .ba-card{flex:0 0 clamp(266px,78vw,340px);scroll-snap-align:start}
  .ba-stage{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#141614;border:1px solid rgba(255,255,255,.16)}
  /* no crossfade: the image cuts hard and the flash hides the seam */
  .ba-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .ba-layer.after{opacity:0}
  .ba-stage.flip .ba-layer.after{opacity:1}
  /* action-movie flash: blows out white, snaps back through a green fringe */
  .ba-flash{position:absolute;inset:0;z-index:3;opacity:0;background:#fff;pointer-events:none}
  .ba-stage.flash .ba-flash{animation:baFlash 440ms cubic-bezier(.2,.75,.3,1) both}
  .ba-stage.flash .ba-layer{animation:baPunch 440ms cubic-bezier(.16,.9,.3,1) both}
  @keyframes baFlash{
      0%{opacity:0;  background:#fff}
      6%{opacity:1;  background:#fff}
     24%{opacity:.58;background:#EEF9DC}
     52%{opacity:.20;background:var(--green)}
    100%{opacity:0;  background:var(--green)}
  }
  @keyframes baPunch{0%{transform:scale(1)}9%{transform:scale(1.06)}100%{transform:scale(1)}}
  @media (prefers-reduced-motion: reduce){
    .ba-stage.flash .ba-flash,.ba-stage.flash .ba-layer{animation:none}
  }
  .ba-tag{position:absolute;left:12px;top:12px;z-index:2;font-family:"Space Mono",monospace;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:rgba(11,11,11,.78);color:#fff;border:1px solid rgba(255,255,255,.26);transition:background .12s,color .12s,border-color .12s}
  .ba-stage.flip .ba-tag{background:var(--green);color:var(--ink);border-color:var(--green)}
  .ba-cap{margin-top:13px}
  .ba-cap .t{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:1.02rem;letter-spacing:.01em;color:#fff}
  .ba-cap .s{font-size:.88rem;color:#A7AB9C;margin-top:3px}
  /* placeholder cards: shown until real photos are added */
  .ba-ph{display:grid;align-content:center;justify-items:center;gap:10px;text-align:center;padding:20px}
  .ba-ph.before{background:repeating-linear-gradient(135deg,#1B1E19,#1B1E19 13px,#232722 13px,#232722 26px)}
  .ba-ph.after{background:repeating-linear-gradient(135deg,#222D19,#222D19 13px,#2B3920 13px,#2B3920 26px)}
  .ba-ph .gl{width:36px;height:36px;border-radius:8px;border:2px solid var(--green);display:grid;place-items:center;color:var(--green);font-family:"Anton",sans-serif;font-size:1.05rem;line-height:1}
  .ba-ph .tx{font-family:"Space Mono",monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#9BA091;max-width:22ch}
  .ba-dots{display:flex;gap:7px;justify-content:center;margin-top:4px}
  .ba-dot{width:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.24);border:0;padding:0;cursor:pointer;transition:background .2s,width .2s}
  .ba-dot.on{background:var(--green);width:34px}
  .ba-hint{text-align:center;margin-top:16px;font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#7E8375}

  /* ---- Spanish header fit ----------------------------------------------
     The Spanish tagline is materially longer than the English one
     ("Carroceria y pintura bien hecha." against "Bodywork & paint done
     right."), and at common laptop widths it used to run underneath the nav
     links. overflow:hidden is the hard guarantee it can never overlap again
     whatever the string; the breakpoint drops the block outright while the
     links still need the room. English keeps its existing 1040/960 rules. */
  .nav-tag{overflow:hidden}
  /* The nav row carries the logo, the three-line tagline, six links, the
     phone, Facebook, EN/ES and the CTA. All of that stops fitting around
     1380px, and the Spanish tagline is wider than the English one, so the
     two languages give the tagline up at different widths. Cheapest thing
     goes first:
       <=1380  the phone. It is repeated in the promo strip immediately
               below and in the mobile call button, so nothing is lost.
       <=1380  Spanish drops the tagline; it is too wide even without the phone.
       <=1220  English drops the tagline too.
     overflow:hidden above is the backstop: whatever the string, it clips at
     its own border instead of running under the links. */
  @media (max-width:1380px){ .nav-phone{display:none} }
  @media (max-width:1560px){ html[lang="es"] .nav-phone{display:none} }
  @media (max-width:1220px){ .nav-tag{display:none} }
  @media (max-width:1380px){ html[lang="es"] .nav-tag{display:none} }

  /* ================= MOBILE MENU =================
     Below 1040px the nav links are gone, so without this the inner pages are
     unreachable from the header. The panel is absolutely positioned inside
     the sticky header, so it hangs off the bottom of the promo strip and
     travels with it. It carries every page, not just the five in the desktop
     bar: a vertical list has the room, and it doubles as internal linking. */
  .nav-burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    flex:none;width:42px;height:42px;padding:0;border-radius:999px;cursor:pointer;
    background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);
    transition:background .16s,border-color .16s}
  .nav-burger .bl{display:block;width:18px;height:2px;border-radius:2px;background:#E9ECE1;
    transition:transform .2s ease,opacity .15s ease,background .16s}
  .nav-burger:hover{background:var(--green);border-color:var(--green)}
  .nav-burger:hover .bl{background:var(--ink)}
  /* the bars fold into an X; 7px is the gap plus one bar height */
  body.nav-open .nav-burger{background:var(--green);border-color:var(--green)}
  body.nav-open .nav-burger .bl{background:var(--ink)}
  body.nav-open .nav-burger .bl:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .nav-burger .bl:nth-child(2){opacity:0}
  body.nav-open .nav-burger .bl:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .mobile-menu{display:none;position:absolute;top:100%;left:0;right:0;z-index:75;
    background:#0B0B0B;border-bottom:3px solid var(--green);
    box-shadow:0 20px 38px rgba(0,0,0,.55);max-height:78vh;overflow-y:auto;
    overscroll-behavior:contain;padding-bottom:18px}
  body.nav-open .mobile-menu{display:block;animation:mmIn .18s ease-out both}
  @keyframes mmIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  .mm-link{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:15px 22px;font-family:"Anton",sans-serif;text-transform:uppercase;
    font-size:1.1rem;letter-spacing:.02em;color:#fff;
    border-bottom:1px solid rgba(255,255,255,.1);transition:background .14s,color .14s}
  .mm-link::after{content:"\2192";font-family:"Barlow",sans-serif;font-size:.92rem;color:var(--green);
    transition:transform .16s}
  .mm-link:hover,.mm-link:focus-visible{background:var(--ink-2);color:var(--lime)}
  .mm-link:hover::after{transform:translateX(3px)}
  .mm-link[aria-current="page"]{color:var(--green)}
  .mm-link[aria-current="page"]::after{content:"\2022"}
  /* the sticky call bar already carries these two actions on a phone, so the
     panel only needs them in the 720-1040 band where that bar is not shown */
  .mm-foot{display:flex;gap:10px;padding:16px 22px 0}
  @media (max-width:720px){ .mm-foot{display:none} }
  .mm-foot .btn{flex:1;min-height:50px;font-size:.95rem;padding:13px 12px}
  .mm-foot .btn-line{border-color:var(--green);color:var(--green)}
  .mm-foot .btn-line:hover{background:var(--green);color:var(--ink)}
  .mm-fb{display:flex;align-items:center;gap:10px;margin:14px 22px 0;padding-top:14px;
    border-top:1px solid rgba(255,255,255,.1);color:#9A9E90;font-size:.9rem}
  .mm-fb svg{width:20px;height:20px;fill:var(--green);flex:none}
  .mm-fb:hover{color:var(--lime)}
  .mm-fb:hover svg{fill:var(--lime)}

  @media (max-width:1040px){
    .nav-burger{display:inline-flex}
  }
  @media (prefers-reduced-motion:reduce){
    body.nav-open .mobile-menu{animation:none}
    .nav-burger .bl{transition:none}
  }

  /* ================= RESPONSIVE ================= */
  @media (max-width:1040px){
    .nav-links{display:none}
    .nav-tag .t2{display:none}
    /* .t3 stays: it is the promo line, and dropping .t2 leaves it the room */
  }
  @media (max-width:960px){
    .nav-tag{display:none}   /* below this the nowrap tagline collided with the header phone number */
    .hero-copy{max-width:none}
    .chips{grid-template-columns:repeat(2,1fr)}
    .about{grid-template-columns:1fr;gap:26px}
    .svc-grid{grid-template-columns:repeat(2,1fr)}
    .ins{grid-template-columns:1fr;gap:24px}
    /* stacked, the plate must not stretch the full column or the logo balloons.
       Centred rather than flush left: at this width the plate is narrower than
       the copy under it, so left-aligning left a ragged notch on the right. */
    .paint-grid{grid-template-columns:1fr;gap:22px}
    .paint-plate{justify-self:center;width:100%;max-width:280px}
    .fin-grid{grid-template-columns:1fr;gap:24px}
    .pmt-grid{grid-template-columns:1fr;gap:22px}
    .c-grid{grid-template-columns:1fr;gap:28px}
    .stats-grid{grid-template-columns:repeat(2,1fr);gap:24px 18px}
    .ba-head{flex-direction:column;align-items:flex-start;gap:18px}
    .ba-nav{padding-bottom:0}
  }
  /* MOBILE: logo centered in header, tagline centered under it in hero */
  @media (max-width:720px){
    :root{--nav-h:70px}
    .nav{gap:10px;padding:0 14px;justify-content:space-between}
    .brand-link{order:2;margin:0 auto}
    .nav-logo{height:46px}
    .nav-tag{display:none}
    .nav-right{order:1;margin-left:0;gap:8px;flex:1}
    .nav-phone,.nav-cta{display:none}
    /* the burger costs a slot, and Facebook now has a row inside the menu
       panel as well as the footer and the contact page, so the header
       icon is the cheapest thing to drop on a phone */
    .fb-ico{display:none}
    .nav-call{display:inline-flex;order:3;flex:1;justify-content:flex-end}
    .nav-call a{background:var(--green);color:var(--ink);border-radius:6px;padding:10px 14px;font-weight:700;font-size:.85rem;min-height:42px;display:inline-flex;align-items:center;gap:6px}
    .lang button{padding:8px 11px;font-size:.76rem}

    /* phone: the header tagline is gone, so the strip is the only place the
       promo lives; keep the headline and the number, drop the middle clause */
    .promo{gap:8px;min-height:29px;padding:5px 12px}
    .promo .free{font-size:.86rem;letter-spacing:.05em}
    .promo .mid{display:none}
    .promo .tel{font-size:.74rem}

    /* phone: the photo is already portrait, so it goes edge-to-edge whole;
       no side fill needed, no height cap to letterbox it */
    .sf-band{--sf-w:100%}
    /* edge-to-edge on a phone, so there is nothing to feather into */
    .sf-band img{width:100%;height:auto;max-width:100%;max-height:none;
      -webkit-mask-image:none;mask-image:none}
    .sf-band figcaption{font-size:.6rem;padding:34px 14px 11px;gap:8px}
    .hero{padding:30px 0 8px}
    .hero h1{font-size:clamp(1.9rem,8.2vw,2.7rem)}
    .hero .lead{font-size:1rem;margin:16px 0 22px}
    .hero-actions{flex-direction:column;align-items:stretch;width:100%;max-width:360px}
    .hero-actions .btn{width:100%}
    .chips{grid-template-columns:1fr;gap:10px}
    .svc-grid,.vals{grid-template-columns:1fr}
    .stats-grid{grid-template-columns:repeat(2,1fr);padding:26px 0}
    .stat{padding-left:14px}
    .c-actions .btn,.ins-card .btn{width:100%}
    .foot{flex-direction:column;align-items:flex-start;gap:10px}
    body{padding-bottom:78px}
    .callbar{display:flex}

    .ba-rail{gap:14px}
    .ba-arrow{width:42px;height:42px;font-size:1.25rem}
    .ba-cap .t{font-size:.98rem}
  }
  @media (max-width:400px){
    .wrap{padding:0 16px}
    .stats-grid{grid-template-columns:1fr;gap:18px}
    .ba-rail{--edge:16px}
    /* the four marks stay on one row down to a 320px phone: wrapped 3+1 they
       read as a broken set rather than "all of them" */
    .pmt-cards{gap:8px}
    .pmt-card{width:60px;height:38px;padding:5px 7px}
    .pmt-card img[data-mk="visa"]{height:23px}
    .pmt-card img[data-mk="mastercard"]{height:24px}
    .pmt-card img[data-mk="amex"]{height:27px}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

  /* =====================================================================
     SUBPAGE STYLES
     Only the inner pages load this file; index.html keeps its own inline
     copy of everything above. Rules below exist purely for the inner
     pages, so nothing here can move the homepage.
     ===================================================================== */

  /* ---------- page hero: the inner-page stand-in for the storefront band ----------
     A short black plate under the header carrying the breadcrumb and the h1.
     Black rather than white so the page opens on the same weight the homepage
     opens on, without needing the storefront photo on every page. */
  .phero{background:var(--ink);color:#E4E7DB;padding:clamp(30px,4.6vw,52px) 0 clamp(34px,5vw,58px);border-bottom:4px solid var(--green)}
  .phero h1{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(2rem,5.4vw,3.5rem);line-height:1.02;letter-spacing:.005em;color:#fff;margin-top:14px;max-width:20ch}
  .phero h1 .u{color:var(--green)}
  .phero .lead{color:#A7AB9C;font-size:clamp(1rem,2.3vw,1.12rem);max-width:58ch;margin-top:18px}
  .phero .kick{display:flex;align-items:center;gap:12px}
  .phero .bar{width:34px;height:4px;background:var(--green);border-radius:2px;flex:none}
  .phero .eyebrow{color:var(--green)}
  .phero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
  .phero .btn-line{border-color:var(--green);color:var(--green)}
  .phero .btn-line:hover{background:var(--green);color:var(--ink)}

  /* ---------- breadcrumb ---------- */
  .crumb{font-family:"Space Mono",monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#8B8F81}
  .crumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  .crumb a{color:#A7AB9C;text-decoration:none}
  .crumb a:hover{color:var(--green)}
  .crumb li[aria-current]{color:var(--green)}
  .crumb .sep{opacity:.42}

  /* ---------- prose: the body copy column on an inner page ---------- */
  .prose{max-width:66ch}
  .prose h2{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(1.4rem,3.4vw,2rem);line-height:1.14;color:var(--ink);margin:clamp(30px,4vw,40px) 0 12px}
  .prose h2:first-child{margin-top:0}
  .prose h3{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:1.16rem;color:var(--green-dk);margin:26px 0 8px}
  .prose p{color:#3B3F35;font-size:1.02rem;margin-bottom:14px}
  .prose ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin:4px 0 18px}
  .prose ul li{display:flex;gap:12px;align-items:flex-start;color:#3B3F35;font-size:1rem}
  /* the tick is drawn, not a bullet glyph, so it matches the .chip mark */
  .prose ul li::before{content:"\2713";width:22px;height:22px;border-radius:5px;background:var(--green-dk);color:#fff;
    display:grid;place-items:center;font-size:.72rem;flex:none;margin-top:2px}
  /* Scoped to p/li on purpose. A bare `.prose a` is specificity 0,1,1 and
     beats .btn-r at 0,1,0, so buttons inside a prose column came out green
     text on a green plate, i.e. invisible; it also underlined the pill row.
     Prose links live in body copy, buttons and pills are their own
     components and style themselves. */
  .prose p a,.prose li a{color:var(--green-dk);text-decoration:underline;text-underline-offset:2px}
  .prose p a:hover,.prose li a:hover{color:var(--green-dp)}
  .prose strong{color:var(--ink)}

  /* ---------- contact form: the "prefer to type" card on /contact/ ---------- */
  .form-card{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--green-dk);border-radius:10px;padding:clamp(22px,3.4vw,32px);box-shadow:0 6px 22px rgba(11,11,11,.06);max-width:720px}
  .cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
  .cf-field{display:flex;flex-direction:column;gap:6px;min-width:0}
  .cf-field[hidden]{display:none}
  .cf-full{grid-column:1/-1}
  .cf-field label{font-family:"Space Mono",monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  /* inputs default to a ~20-char intrinsic width that browsers won't shrink
     below inside a grid track sized `1fr` (its auto-minimum is content-based,
     not 0) - width:100% + min-width:0 here is what actually makes them obey
     the column instead of blowing the card out past its padding */
  .cf-field input,.cf-field select,.cf-field textarea{width:100%;min-width:0;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:6px;padding:12px 14px;transition:border-color .16s,box-shadow .16s}
  .cf-field textarea{resize:vertical;min-height:96px}
  .cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{outline:none;border-color:var(--green-dk);box-shadow:0 0 0 3px rgba(63,122,30,.14)}
  .cf-submit{margin-top:22px}
  .form-sent[hidden]{display:none}
  .form-sent{display:flex;gap:14px;align-items:flex-start}
  .form-sent .fs-ck{width:28px;height:28px;border-radius:50%;background:var(--green-dk);color:#fff;display:grid;place-items:center;font-size:.85rem;flex:none;margin-top:2px}
  .form-sent p{color:#3B3F35;font-size:1.02rem}
  @media (max-width:640px){ .cf-grid{grid-template-columns:1fr} }

  /* two-column inner layout: prose left, sticky contact rail right */
  .page-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(28px,4vw,52px);align-items:start}
  .rail{position:sticky;top:calc(var(--nav-h) + 46px);display:flex;flex-direction:column;gap:16px}
  .rail-card{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--green-dk);border-radius:10px;padding:24px;box-shadow:0 6px 22px rgba(11,11,11,.06)}
  .rail-card .rt{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:1.2rem;line-height:1.14;color:var(--ink);margin-bottom:10px}
  .rail-card p{color:#3B3F35;font-size:.96rem;margin-bottom:14px}
  .rail-card .btn{width:100%;margin-bottom:9px}
  .rail-card .btn:last-child{margin-bottom:0}
  .rail-fine{font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:12px;line-height:1.6}

  /* ---------- crosslink deck: "where to go next", on every inner page ----------
     This is the link equity spreader. Every page carries the full set minus
     itself, so any page is one hop from any other. */
  .xlinks{background:var(--soft);border-top:1px solid var(--line);padding:clamp(42px,6vw,64px) 0}
  .xgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .xcard{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:10px;
    padding:20px;transition:border-color .16s,transform .12s,box-shadow .16s}
  .xcard:hover{border-color:var(--green-dk);transform:translateY(-2px);box-shadow:0 8px 22px rgba(11,11,11,.08)}
  .xcard .xt{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:1.06rem;color:var(--ink);display:flex;align-items:center;gap:8px}
  .xcard .xt::after{content:"\2192";color:var(--green-dk);font-family:"Barlow",sans-serif;transition:transform .16s}
  .xcard:hover .xt::after{transform:translateX(3px)}
  .xcard .xs{font-size:.92rem;color:var(--muted);line-height:1.5}

  /* ---------- FAQ accordion (homepage + inner pages) ----------
     <details>/<summary> so the answers are in the HTML on first paint: a
     JS-built accordion would hide the text from the crawler, which is the
     whole reason the FAQ exists. */
  .faq-list{display:grid;gap:10px;max-width:74ch}
  .faq-item{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:border-color .16s}
  .faq-item[open]{border-color:var(--green-dk)}
  .faq-item summary{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;cursor:pointer;list-style:none;
    font-family:"Barlow",sans-serif;font-weight:700;font-size:1.03rem;color:var(--ink);line-height:1.4}
  .faq-item summary::-webkit-details-marker{display:none}
  /* the +/- is a drawn box so it matches the .chip and .prose li marks */
  .faq-item summary::after{content:"+";margin-left:auto;flex:none;width:26px;height:26px;border-radius:6px;
    background:var(--soft);border:1px solid var(--line);color:var(--green-dk);display:grid;place-items:center;
    font-family:"Anton",sans-serif;font-size:1.1rem;line-height:1;transition:background .16s,color .16s}
  .faq-item[open] summary::after{content:"\2212";background:var(--green-dk);border-color:var(--green-dk);color:#fff}
  .faq-item summary:hover{background:var(--soft)}
  .faq-item[open] summary:hover{background:transparent}
  .faq-a{padding:0 20px 20px 20px;color:#3B3F35;font-size:1rem;max-width:62ch}
  .faq-a p{margin-bottom:10px}
  .faq-a p:last-child{margin-bottom:0}
  .faq-a a{color:var(--green-dk);text-decoration:underline;text-underline-offset:2px}
  .faq-a a:hover{color:var(--green-dp)}
  /* on the black services/contact bands the card has to invert */
  .services .faq-item,.contact .faq-item{background:var(--ink-2);border-color:rgba(255,255,255,.16)}
  .services .faq-item summary,.contact .faq-item summary{color:#fff}
  .services .faq-a,.contact .faq-a{color:#A7AB9C}

  /* ---------- service detail cards on /services/ ---------- */
  .svc-detail{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .svc-row{background:var(--card);padding:26px clamp(20px,3vw,30px)}
  .svc-row h3{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:1.34rem;color:var(--ink);margin-bottom:8px}
  .svc-row p{color:#3B3F35;font-size:1rem;margin-bottom:12px}
  .svc-row ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
  .svc-row ul li{font-family:"Space Mono",monospace;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
    color:var(--green-dk);background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:6px 12px}

  /* ---------- inner-page before & after grid (no rail, no autoplay) ---------- */
  .ba-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.6vw,26px)}
  .ba-fig{margin:0}
  .ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .ba-shot{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:#141614;border:1px solid rgba(255,255,255,.16)}
  .ba-shot img{width:100%;height:100%;object-fit:cover}
  .ba-shot .lbl{position:absolute;left:9px;top:9px;font-family:"Space Mono",monospace;font-size:.6rem;letter-spacing:.12em;
    text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(11,11,11,.78);color:#fff;border:1px solid rgba(255,255,255,.26)}
  .ba-shot.is-after .lbl{background:var(--green);color:var(--ink);border-color:var(--green)}

  /* ---------- reviews page: rating summary plate ---------- */
  .rating{display:flex;align-items:center;gap:clamp(18px,3vw,34px);flex-wrap:wrap;background:var(--card);
    border:1px solid var(--line);border-left:5px solid var(--star);border-radius:10px;padding:clamp(22px,3vw,30px);
    box-shadow:0 6px 22px rgba(11,11,11,.06)}
  .rating .score{font-family:"Anton",sans-serif;font-size:clamp(3rem,8vw,4.4rem);line-height:.9;color:var(--ink)}
  .rating .stars{color:var(--star);font-size:1.3rem;letter-spacing:.1em;line-height:1}
  .rating .meta{font-size:.98rem;color:var(--muted);margin-top:6px}
  .rating .src{font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:10px}

  /* ---------- contact page: hours table ---------- */
  .hours{list-style:none;border:1px solid var(--line-dk);border-radius:10px;overflow:hidden}
  .hours li{display:flex;justify-content:space-between;gap:16px;padding:13px 18px;font-size:.98rem;
    border-bottom:1px solid var(--line-dk);color:#E4E7DB}
  .hours li:last-child{border-bottom:0}
  .hours li.closed{color:#8B8F81}
  .hours .d{font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green);padding-top:3px}
  .hours li.today{background:rgba(153,198,107,.1)}

  /* ---------- the "also on this page" inline link row ---------- */
  .inline-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
  .inline-links a{font-family:"Space Mono",monospace;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
    color:var(--green-dk);text-decoration:none;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:8px 14px;transition:border-color .16s,background .16s}
  .inline-links a:hover{border-color:var(--green-dk);background:var(--soft)}

  /* ---------- homepage h2 crosslink ----------
     The section heading becomes the link to its own page. It has to stay
     looking exactly like a heading, so it takes a green underline only on
     hover rather than link styling at rest. */
  .h2link{color:inherit;text-decoration:none;display:inline-flex;align-items:baseline;gap:.34em}
  .h2link::after{content:"\2192";font-family:"Barlow",sans-serif;font-size:.62em;color:var(--green-dk);
    opacity:0;transform:translateX(-5px);transition:opacity .16s,transform .16s}
  .h2link:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px;text-decoration-color:var(--green-dk)}
  .h2link:hover::after{opacity:1;transform:translateX(0)}
  .services .h2link::after,.ba .h2link::after,.contact .h2link::after{color:var(--green)}
  .services .h2link:hover,.ba .h2link:hover,.contact .h2link:hover{text-decoration-color:var(--green)}

  /* nav: mark the page you are on */
  .nav-links a[aria-current="page"]{color:var(--green);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}

  @media (max-width:960px){
    .page-grid{grid-template-columns:1fr;gap:30px}
    .rail{position:static}
    .xgrid{grid-template-columns:repeat(2,1fr)}
    .ba-grid{grid-template-columns:1fr}
  }
  @media (max-width:720px){
    .xgrid{grid-template-columns:1fr}
    .phero h1{font-size:clamp(1.75rem,7.6vw,2.5rem)}
    .phero-actions{flex-direction:column;align-items:stretch;max-width:360px}
    .phero-actions .btn{width:100%}
    .rating{gap:16px}
  }