/* ===========================================================
   Caddy Auto Service Ltd. — modern static redesign (multi-page)
   Brand colors sampled from the real Caddy Auto logo (red #f50104,
   royal blue #011489), ink #1a1a1a. Self-hosted fonts.
   Square-edged design; photos keep a soft radius.
   =========================================================== */

/* ---------- Fonts ---------- */
/* One file per family (each covers its weight range) — the per-weight files were byte-identical. */
@font-face{font-family:'Open Sans';src:url('../fonts/open-sans.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat.woff2') format('woff2');font-weight:600 800;font-style:normal;font-display:swap}
/* (Wordmark fonts removed — the header/footer now use the real logo image.) */

/* ---------- Tokens ---------- */
:root{
  /* Red family sampled from the real logo (bright #f50104 → dark #980202) */
  --brand:#f50104;            /* decorative fills, large headings, icon strokes */
  --brand-dark:#cf0101;        /* white text on red (5.7:1 AA) — buttons/pills */
  --brand-darker:#980202;      /* button hover (logo gradient dark stop) */
  --brand-text:#b80101;        /* red TEXT on light bg (6.9:1 AA) */
  --brand-soft:#fdecec;
  --brand-blue:#011489;        /* logo royal blue — secondary accent */
  --ink:#16181d;
  --slate:#1c2128;
  --slate-2:#272d36;
  --muted:#5f6b76;
  --muted-2:#8a949e;
  --surface:#f6f7f9;
  --surface-2:#eef1f4;
  --line:#e4e8ee;
  --white:#fff;
  --radius:0;                  /* square design */
  --radius-sm:0;
  --radius-photo:6px;          /* photos keep a soft edge */
  --shadow-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.1);
  --shadow:0 10px 30px -12px rgba(16,24,40,.25);
  --shadow-lg:0 24px 60px -20px rgba(16,24,40,.35);
  --container:1180px;
  --ff-head:'Montserrat',system-ui,sans-serif;
  --ff-body:'Open Sans',system-ui,sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--ff-body);color:var(--ink);background:var(--white);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
img,svg,iframe{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{font-family:var(--ff-head);line-height:1.15;margin:0;color:var(--ink);letter-spacing:-.02em}
h1{font-size:clamp(2rem,4.6vw,3rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:800}
h3{font-size:1.22rem;font-weight:700}
p{margin:0 0 1rem}
ul{margin:0;padding:0;list-style:none}
body{overflow-wrap:break-word} /* a long word breaks instead of widening its box past a narrow screen */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(18px,4vw,32px)}
.ic{width:1.15em;height:1.15em;fill:currentColor;flex:0 0 auto}

[id]{scroll-margin-top:115px} /* anchor targets clear the sticky header */
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:1000}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
/* red focus ring is invisible on red surfaces — use white there */
.cta-band :focus-visible,.callbar :focus-visible,.audio-fab:focus-visible{outline-color:#fff}

/* ---------- Buttons (square) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--ff-head);font-weight:700;font-size:.95rem;line-height:1;padding:.85rem 1.4rem;border-radius:0;transition:transform .15s ease,background .15s ease,box-shadow .15s ease,color .15s ease;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn--lg{padding:1.05rem 1.7rem;font-size:1rem}
.btn--block{width:100%}
.btn--primary{background:var(--brand-dark);color:#fff;box-shadow:0 8px 20px -8px rgba(207,1,1,.6)}
.btn--primary:hover{background:var(--brand-darker)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:#000}
.btn--ghost{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.btn--ghost:hover{background:rgba(255,255,255,.22)}

.eyebrow{font-family:var(--ff-head);font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-text);margin:0 0 .6rem}

/* ===========================================================
   HEADER (persistent shell)
   =========================================================== */
/* whole header sticks; top:-40px lets the topbar slide away while the white bar pins */
.site-header{position:sticky;top:-40px;z-index:100}
.topbar{background:var(--ink);color:#cfd6de;font-size:.84rem}
/* topbar content keeps right so the logo's gear can poke above the white bar */
.topbar__inner{display:flex;align-items:center;justify-content:flex-end;gap:1.8rem;min-height:40px}
.topbar__right{display:flex;align-items:center;gap:1.4rem}
.topbar__item{display:inline-flex;align-items:center;gap:.45rem;color:#cfd6de;transition:color .15s;white-space:nowrap}
.topbar__item:hover{color:#fff}
.topbar .ic{width:15px;height:15px;fill:var(--brand)}

/* Overhang header: compact sticky white bar. The logo is oversized and positioned
   so "CADDY" sits inside the white bar while "AUTO SERVICE LTD." and the lower
   swoosh break over the hero photo. Shrinks into the bar once you scroll.
   NOTE: no backdrop-filter/filter/transform on drawer ancestors (containing-block trap). */
.navbar{background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .2s}
.site-header.is-stuck .navbar{box-shadow:var(--shadow-sm)}
.navbar__inner{display:flex;align-items:center;gap:1.2rem;min-height:90px}
/* flex:0 0 auto + max-width:none — never let flexbox or the img reset squeeze the
   logo's width independently of its height (that distorts the aspect ratio) */
/* Geometry measured from the file (1024x683): art y76-505, CADDY y194-330,
   AUTO SERVICE y336-390, bottom road y415-504. Sized so the gear sits ~5px below
   the bar top AND "AUTO SERVICE LTD." ends ~5px above the photo; the road overhangs. */
.brand{position:relative;width:266px;flex:0 0 auto;align-self:stretch} /* width constant in both states — menu never shifts */
/* Size + "UFO" hover/flight driven by JS via --logo-h/--logo-t and transform
   (183px/-16px big → 128px/-9px pinned) */
.brand__logo{position:absolute;top:var(--logo-t,-16px);left:-8px;height:var(--logo-h,183px);width:auto;max-width:none;z-index:6;will-change:transform}
.mainnav{display:flex;gap:.2rem;margin-left:.6rem} /* menu docks beside the logo */
.mainnav a{font-family:var(--ff-head);font-weight:600;font-size:.95rem;padding:.55rem .75rem;border-radius:0;color:var(--ink);position:relative;white-space:nowrap;transition:color .15s,background .15s}
.mainnav a:hover{color:var(--brand-text);background:var(--brand-soft)}
.mainnav a[aria-current="page"]{color:var(--brand-text)}
.mainnav a[aria-current="page"]::after{content:"";position:absolute;left:.75rem;right:.75rem;bottom:2px;height:3px;background:var(--brand)}
.navbar__cta{margin-left:auto} /* phone stays pinned right */

.navtoggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;border-radius:0;border:1px solid var(--line);margin-left:auto}
.navtoggle span{display:block;width:22px;height:2px;background:var(--ink);margin-inline:auto;transition:transform .25s,opacity .2s}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- pjax page-transition (progressive enhancement) ---------- */
#page{transition:opacity .16s ease}
#page.is-leaving{opacity:0}
@media (prefers-reduced-motion:reduce){#page{transition:none}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}

/* ===========================================================
   HERO
   =========================================================== */
.hero{position:relative;min-height:clamp(520px,82vh,760px);display:flex;align-items:center;overflow:hidden;background:var(--ink)}
.hero--inner{min-height:clamp(280px,40vh,400px)}
.hero__slides{position:absolute;inset:0}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;will-change:opacity}
.hero__slide.is-active{opacity:1}
.hero__slide img,.hero__slide picture{width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;background:
   linear-gradient(90deg,rgba(8,10,14,.95) 0%,rgba(8,10,14,.88) 30%,rgba(8,10,14,.66) 60%,rgba(8,10,14,.46) 100%),
   linear-gradient(0deg,rgba(8,10,14,.62) 0%,rgba(8,10,14,.12) 60%)}
.hero__content{position:relative;color:#fff;padding-block:clamp(40px,8vh,80px);max-width:680px}
.hero__eyebrow{display:inline-block;font-family:var(--ff-head);font-weight:700;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--brand-dark);padding:.45rem .9rem;margin:0 0 1.1rem}
.hero__title{color:#fff;font-size:clamp(2.1rem,5.4vw,3.7rem);font-weight:800;letter-spacing:-.025em;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hero--inner .hero__title{font-size:clamp(1.9rem,4.4vw,2.9rem)}
.hero__lead{font-size:clamp(1.02rem,1.7vw,1.22rem);color:#eef1f4;max-width:32em;margin:1.1rem 0 1.8rem;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem}
.hero__crumbs{position:relative;color:#cfd6de;font-size:.9rem;margin:0 0 1rem}
.hero__crumbs a{color:#fff;text-decoration:underline;text-underline-offset:2px}
/* clear the header logo's overhang on desktop */
@media (min-width:1181px){
  .hero__content{padding-top:170px}
  .hero--inner{min-height:clamp(430px,50vh,520px)}
}
.hero__dots{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:14px;z-index:3}
.hero__dots button{position:relative;width:11px;height:11px;padding:0;background:rgba(255,255,255,.45);transition:background .2s,width .2s}
.hero__dots button::before{content:"";position:absolute;inset:-7px}
.hero__dots button.is-active{background:#fff;width:30px}

/* ===========================================================
   TRUST BAR
   =========================================================== */
.trust{background:var(--slate);color:#fff}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding-block:2.2rem}
.trust__item{text-align:center;padding:.4rem;border-right:1px solid rgba(255,255,255,.1)}
.trust__item:last-child{border-right:0}
.trust__num{display:block;font-family:var(--ff-head);font-weight:800;font-size:2.6rem;line-height:1;color:var(--brand)}
.trust__num span{font-size:1.4rem;vertical-align:super}
.trust__num--word{font-size:clamp(1.25rem,5.5vw,2rem);white-space:nowrap}
.trust__label{display:block;margin-top:.5rem;font-size:.92rem;color:#c7cdd5}

/* ===========================================================
   SECTIONS
   =========================================================== */
.section{padding-block:clamp(56px,9vw,104px)}
.section--alt{background:var(--surface)}
.section--tight{padding-block:clamp(40px,6vw,72px)}
.section__head{max-width:680px;margin:0 auto clamp(32px,5vw,56px);text-align:center}
.section__head--left{margin-inline:0;text-align:left}
.section__intro{color:var(--muted);font-size:1.06rem;margin:.8rem 0 0}

/* About */
.about{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,5vw,64px);align-items:center}
.about__media{position:relative}
.about__media img{border-radius:var(--radius-photo);box-shadow:var(--shadow);aspect-ratio:4/3;object-fit:cover;width:100%}
.about__badge{position:absolute;right:-14px;bottom:-18px;background:var(--brand-dark);color:#fff;padding:.9rem 1.2rem;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;line-height:1.2}
.about__badge strong{font-family:var(--ff-head);font-size:1.3rem;font-weight:800}
.about__badge span{font-size:.82rem}
.about__body h2,.prose h2{margin-bottom:1rem}
.about__body p,.prose p{color:var(--muted)}
.ticks{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1.4rem;margin:1.4rem 0 1.8rem}
.ticks--single{grid-template-columns:1fr}
.ticks li{position:relative;padding-left:1.9rem;font-weight:600;color:var(--ink);font-size:.97rem}
.ticks li::before{content:"";position:absolute;left:0;top:1px;width:1.3rem;height:1.3rem;background:var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b80101' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/.85rem no-repeat}

/* Prose (content pages) */
.prose{max-width:760px}
.prose h2{font-size:clamp(1.3rem,2.3vw,1.6rem);margin-top:2.2rem;margin-bottom:.8rem}
.prose h3{font-size:1.15rem;margin:1.6rem 0 .5rem}
.prose p{margin-bottom:1rem}
.prose ul.bullets{margin:0 0 1.2rem;display:grid;gap:.5rem}
.prose ul.bullets li{position:relative;padding-left:1.5rem;color:var(--muted)}
.prose ul.bullets li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;background:var(--brand)}

/* Services */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s;color:inherit;display:flex;flex-direction:column}
a.card:hover,.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--brand)}
.card .card__more{margin-top:auto}
/* full-width truck/CVIP banner card — dark, two-column, red rule (emphasis at all sizes) */
.card--wide{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:1.6rem;row-gap:.15rem;padding:1.6rem 2rem;border-left:4px solid var(--brand);background:var(--slate);border-color:var(--slate)}
.card--wide .card__icon{grid-row:1/span 3;margin-bottom:0;background:var(--brand)}
.card--wide .card__icon svg{stroke:#fff}
.card--wide h3,.card--wide p,.card--wide .card__more{grid-column:2}
.card--wide h3{color:#fff}
.card--wide p{color:#c7cdd5}
.card--wide .card__more{color:#fff;margin-top:.2rem}
.card--wide:hover .card__icon{background:var(--brand)}
.card__icon{display:grid;place-items:center;width:58px;height:58px;border-radius:0;background:var(--brand-soft);margin-bottom:1.1rem;transition:background .2s}
.card__icon svg{width:30px;height:30px;fill:none;stroke:var(--brand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card:hover .card__icon{background:var(--brand)}
.card:hover .card__icon svg{stroke:#fff}
.card h3{margin-bottom:.5rem}
.card p{color:var(--muted);font-size:.96rem;margin:0}
.card__more{display:inline-block;margin-top:.9rem;font-family:var(--ff-head);font-weight:700;font-size:.9rem;color:var(--brand-text)}

.services-more{margin-top:clamp(28px,4vw,44px);text-align:center;background:var(--white);border:1px dashed var(--line);border-radius:0;padding:clamp(24px,4vw,40px)}
.section--alt .services-more{background:transparent}
.services-more h3{margin-bottom:1.1rem}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.chips li{background:var(--white);border:1px solid var(--line);border-radius:0;padding:.5rem 1rem;font-size:.9rem;font-weight:600;color:var(--slate);box-shadow:var(--shadow-sm)}

/* Service detail blocks (services page) */
.svc{display:grid;grid-template-columns:64px 1fr;gap:1.1rem 1.4rem;align-items:start;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);padding:1.5rem 1.6rem;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.svc:hover{border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-2px)}
.svc__icon{display:grid;place-items:center;width:58px;height:58px;background:var(--brand-soft)}
.svc__icon svg{width:30px;height:30px;fill:none;stroke:var(--brand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svc h3{margin-bottom:.4rem;font-size:1.3rem}
.svc p{color:var(--muted);margin:0}

/* CTA band */
.cta-band{background:var(--brand-dark);color:#fff;background-image:linear-gradient(120deg,var(--brand-dark) 0%,#f5312e 100%)}
.cta-band__inner{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;padding-block:clamp(36px,6vw,60px)}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.92);margin:.4rem 0 0}
.cta-band__actions{display:flex;gap:.8rem;flex-wrap:wrap}
.cta-band .btn--primary{background:#fff;color:var(--brand-text);box-shadow:0 10px 24px -10px rgba(0,0,0,.4)}
.cta-band .btn--primary:hover{background:#fff;color:var(--brand-dark)}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gallery__item{padding:0;border-radius:var(--radius-photo);overflow:hidden;aspect-ratio:4/3;position:relative;background:var(--surface-2)}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.gallery__item::after{content:"";position:absolute;inset:0;background:rgba(22,24,29,0);transition:background .25s}
.gallery__item:hover img{transform:scale(1.07)}
.gallery__item:hover::after{background:rgba(22,24,29,.18)}
.gallery__item--wide{grid-column:span 2;aspect-ratio:2.75} /* 2 cols + gap at the singles' 4:3 row height */

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(10,12,16,.92);display:none;align-items:center;justify-content:center;padding:24px}
.lightbox.is-open{display:flex}
.lightbox img{max-width:92vw;max-height:86vh;border-radius:var(--radius-photo);box-shadow:var(--shadow-lg)}
.lightbox__btn{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:0;background:rgba(255,255,255,.12);color:#fff;font-size:1.6rem;display:grid;place-items:center;transition:background .2s}
.lightbox__btn:hover{background:rgba(255,255,255,.25)}
.lightbox__prev{left:18px}
.lightbox__next{right:18px}
.lightbox__close{top:18px;right:18px;transform:none;width:48px;height:48px}

/* Reviews */
.rating-band{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);padding:1.1rem 1.4rem;max-width:520px;margin:0 auto clamp(28px,4vw,40px)}
.rating-band__score{font-family:var(--ff-head);font-weight:800;font-size:2.2rem;color:var(--ink);line-height:1}
.rating-band__stars{color:var(--brand-text);font-size:1.1rem;letter-spacing:.1em}
.rating-band__meta{color:var(--muted);font-size:.92rem}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.review{margin:0;background:var(--white);border:1px solid var(--line);border-radius:0;padding:1.8rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.review__stars{color:var(--brand-text);letter-spacing:.12em;font-size:1.05rem;margin-bottom:.8rem}
.review blockquote{margin:0 0 1.1rem;font-size:1.02rem;color:var(--slate);quotes:none}
.review figcaption{margin-top:auto;font-family:var(--ff-head);font-weight:700;color:var(--ink)}
.reviews__cta{text-align:center;margin-top:2.4rem}

/* Contact */
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,4vw,52px);align-items:start}
.infolist{display:grid;gap:1.3rem;margin-bottom:1.8rem}
.infolist li{display:flex;gap:.95rem;align-items:flex-start}
.infolist .ic{width:24px;height:24px;fill:var(--brand);margin-top:3px}
.infolist strong{display:block;font-family:var(--ff-head);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem}
.infolist a{color:var(--ink);font-weight:600}
.infolist a:hover{color:var(--brand-text)}
.hours{border-collapse:collapse;font-size:.96rem}
.hours th{text-align:left;font-weight:600;color:var(--ink);padding:.1rem 1.4rem .1rem 0}
.hours td{color:var(--muted)}
.social{display:flex;gap:.6rem}
.social a{display:grid;place-items:center;width:42px;height:42px;border-radius:0;background:var(--surface-2);color:var(--slate);transition:background .2s,color .2s,transform .2s}
.social a:hover{background:var(--brand);color:#fff;transform:translateY(-2px)}
.social svg{width:20px;height:20px;fill:currentColor}
.social--sm a{width:36px;height:36px;background:rgba(255,255,255,.1);color:#fff}
.social--sm a:hover{background:var(--brand)}

/* Form */
.contact__form{background:var(--white);border:1px solid var(--line);border-radius:0;padding:clamp(22px,3vw,34px);box-shadow:var(--shadow)}
.form__note{color:var(--muted);font-size:.95rem;margin-bottom:1.3rem}
.field{margin-bottom:1.1rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field label{display:block;font-family:var(--ff-head);font-weight:600;font-size:.9rem;margin-bottom:.4rem}
.field .opt{color:var(--muted);font-weight:400}
.field input,.field textarea{width:100%;padding:.8rem 1rem;border:1.5px solid var(--line);border-radius:0;font:inherit;font-size:1rem;background:var(--surface);transition:border-color .15s,background .15s,box-shadow .15s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(207,1,1,.12)}
.field textarea{resize:vertical;min-height:120px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-turnstile{margin-bottom:1.1rem;min-height:0}
.form__status{margin:1rem 0 0;font-weight:600;font-size:.95rem;min-height:1.2em}
.form__status.is-ok{color:#157347}
.form__status.is-err{color:var(--brand-dark)}
.is-loading{opacity:.6;pointer-events:none}

/* Map — interactive Google place embed (shows the business card + rating) */
.map{margin-top:clamp(40px,6vw,72px);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.map iframe{display:block;filter:grayscale(.12)}

/* ===========================================================
   FOOTER (persistent shell)
   =========================================================== */
.footer{background:var(--ink);color:#aeb6bf;font-size:.94rem}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1.2fr 1fr;gap:2rem;padding-block:clamp(44px,6vw,68px)}
.footer h3{color:#fff;font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:0 0 1.1rem}
.footer__col{display:flex;flex-direction:column;gap:.6rem}
.footer__col a:hover{color:#fff}
.footer__brand{display:flex;flex-direction:column;align-items:center;text-align:center} /* centred logo + tagline lockup */
.footer__logo{display:block}
.footer__logo img{height:200px;width:auto;max-width:none;display:block;margin:-22px 0 -40px 0} /* cancel most of the file's vertical transparent margins; leaves a little gap above the tagline */
.footer__brand p{margin-top:.4rem;max-width:340px;text-wrap:balance} /* balanced to 2 lines, centred under the logo */
.footer__bar{border-top:1px solid rgba(255,255,255,.08)}
.footer__bar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.1rem;flex-wrap:wrap}
.footer__bar p{margin:0;font-size:.86rem;color:var(--muted-2)}

/* ===========================================================
   FLOATING AUDIO BUTTON (persistent shell)
   =========================================================== */
/* The floating audio button stays rounded (pill) — a hard square reads poorly for a FAB */
.audio-fab{position:fixed;right:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);z-index:120;display:inline-flex;align-items:center;gap:.6rem;background:var(--brand-dark);color:#fff;font-family:var(--ff-head);font-weight:700;font-size:.92rem;padding:.6rem 1.2rem .6rem .7rem;border-radius:999px;box-shadow:0 14px 34px -10px rgba(207,1,1,.6),0 4px 10px rgba(0,0,0,.18);transition:transform .18s ease,background .18s ease}
.audio-fab:hover{transform:translateY(-2px) scale(1.02);background:var(--brand-darker)}
.audio-fab__icon{position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);flex:0 0 auto}
.audio-fab__icon::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(255,255,255,.55);animation:fabpulse 2.4s ease-out infinite}
.audio-fab__play{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.audio-fab__bars{display:none;align-items:flex-end;gap:2px;height:16px}
.audio-fab__bars i{width:3px;background:#fff;border-radius:2px;animation:eq .9s ease-in-out infinite}
.audio-fab__bars i:nth-child(1){height:40%;animation-delay:-.2s}
.audio-fab__bars i:nth-child(2){height:90%;animation-delay:-.5s}
.audio-fab__bars i:nth-child(3){height:60%;animation-delay:-.1s}
.audio-fab__bars i:nth-child(4){height:100%;animation-delay:-.7s}
.audio-fab.is-playing .audio-fab__icon::before{display:none}
.audio-fab.is-playing .audio-fab__play{display:none}
.audio-fab.is-playing .audio-fab__bars{display:flex}
@keyframes fabpulse{0%{transform:scale(.85);opacity:.9}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
@keyframes eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

/* ===========================================================
   REVEAL ANIMATION
   =========================================================== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero__slide{transition:none}
  .audio-fab__icon::before,.audio-fab__bars i{animation:none}
  .gallery__item img{transition:none}
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1024px){
  .cards,.reviews{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
}
/* Compact header with the drawer menu up to 1180px: below that the logo, seven links
   and the Call button do not fit on one row (the Call button was pushed off-screen
   and the page scrolled sideways). Keep in step with mqDesk in main.js. */
@media (max-width:1180px){
  .navbar__cta{display:none}
  /* no overhang on mobile — compact sticky bar with the logo inside.
     The file has ~18.6% transparent margins top/bottom; the negative margins
     cancel them so the VISIBLE art fills the bar edge-to-edge. */
  .navbar__inner{min-height:0;padding-block:6px}
  .brand{position:static;width:auto;align-self:auto}
  .brand__logo{position:static;height:150px;top:auto;margin:-17px 0 -39px}
  .site-header.is-stuck .brand{width:auto}
  .site-header.is-stuck .brand__logo{height:150px;top:auto}
  /* z-index lifts the toggle above the open drawer so the X stays clickable */
  .navtoggle{display:flex;position:relative;z-index:95}
  .mainnav{position:fixed;inset:0 0 0 auto;width:min(82vw,330px);background:#fff;flex-direction:column;gap:.2rem;padding:90px 20px 24px;box-shadow:var(--shadow-lg);transform:translateX(100%);visibility:hidden;transition:transform .3s ease,visibility 0s linear .3s;margin:0;z-index:90}
  /* visibility keeps the closed drawer's links out of the Tab order and the a11y
     tree; it flips on at once when opening and off only after the slide-out */
  .mainnav.is-open{transform:none;visibility:visible;transition:transform .3s ease}
  .mainnav a{font-size:1.1rem;padding:.85rem 1rem}
  .mainnav a[aria-current="page"]::after{display:none}
  .nav-backdrop{position:fixed;inset:0;background:rgba(10,12,16,.5);opacity:0;visibility:hidden;transition:opacity .25s;z-index:80}
  .nav-backdrop.is-open{opacity:1;visibility:visible}
}
@media (max-width:860px){
  .about{grid-template-columns:minmax(0,1fr)}
  .about__media{max-width:520px;margin-inline:auto}
  .contact{grid-template-columns:minmax(0,1fr)}
  .trust__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1rem}
  .trust__item:nth-child(2){border-right:0}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery__item--wide{grid-column:span 1;aspect-ratio:4/3}
}
@media (max-width:560px){
  body{font-size:16px}
  .brand__logo{height:138px;margin:-15px 0 -36px}
  .site-header.is-stuck .brand__logo{height:138px}
  .footer__logo img{height:auto;width:min(234px,100%);margin:-10px 0 0 0}
  .cards,.reviews{grid-template-columns:minmax(0,1fr)}
  .ticks{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .topbar__inner{justify-content:center;gap:clamp(.55rem,2.5vw,1rem)}
  .topbar__item{gap:.35rem}
  .topbar__item span{font-size:.8rem}
  .hero__actions .btn{flex:1 1 auto}
  .audio-fab__label{display:none}
  .audio-fab{padding:.7rem;gap:0}
  .cta-band__inner{flex-direction:column;align-items:flex-start}
  .svc{grid-template-columns:1fr;gap:.6rem}
}
/* The top bar must stay on one line. Its items never wrap inside themselves; as room
   runs out, the hours go first, then the city, then the email (only below 22.3em / ~357px
   at default size, so every iPhone and 360px phone keeps both the street address and email),
   and below 11em the bar hides when even the street address alone cannot fit. These
   breakpoints are in em so they follow the reader's default font size as well as the width
   (zoom already narrows the width): px breakpoints let larger text overflow or wrap. */
@media (max-width:53.75em){ .topbar__hours{display:none} }
@media (max-width:36em){ .topbar__city{display:none} }
@media (max-width:22.3em){ .topbar__right{display:none} }
@media (max-width:11em){ .topbar{display:none} .site-header{top:0} }
/* very narrow screens (small phones, zoomed or narrow windows): smaller header logo
   so logo + menu button fit; margins scale with the height (the file's transparent edges) */
@media (max-width:340px){
  .brand__logo,.site-header.is-stuck .brand__logo{height:110px;margin:-12px 0 -29px}
}
@media (max-width:290px){
  .brand__logo,.site-header.is-stuck .brand__logo{height:90px;margin:-10px 0 -24px}
}
@media (max-width:380px){
  .trust__grid{grid-template-columns:minmax(0,1fr)} /* the one-line word figures ("Heavy-duty") need the full width */
  .trust__item{border-right:0}
  .card--wide{grid-template-columns:minmax(0,1fr);padding:1.4rem}
  .card--wide .card__icon{grid-row:auto;margin-bottom:.8rem}
  .card--wide h3,.card--wide p,.card--wide .card__more{grid-column:1}
  .faq__a{padding-left:1.3rem}
  .btn{white-space:normal;line-height:1.25;text-align:center}
}

/* ===========================================================
   REVIEW IMPROVEMENTS (services redesign, polish, mobile call bar)
   =========================================================== */
/* red accent rule under section headings */
.section__head h2::after{content:"";display:block;width:48px;height:4px;background:var(--brand);margin:.9rem auto 0}
.section__head--left h2::after{margin-left:0;margin-right:auto}

/* alternating feature row (image on the right) */
@media (min-width:861px){
  .about--reverse{grid-template-columns:1.05fr 1fr}
  .about--reverse .about__media{order:2}
  .about--reverse .about__badge{right:auto;left:-14px}
}

/* accreditation strip (CAA / Approved Auto Repair / Castrol — text lockups) */
.accred{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:clamp(24px,3vw,36px)}
.accred__item{position:relative;font-family:var(--ff-head);font-weight:700;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--slate);background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);padding:.6rem 1rem .6rem 2rem}
.accred__item::before{content:"";position:absolute;left:.7rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;background:var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b80101' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/.7rem no-repeat}

/* stacked service list (services page — distinct from the homepage card grid) */
.svc-list{max-width:880px;margin-inline:auto;display:grid;gap:14px}
.svc__body{min-width:0}
.svc h3{font-size:1.3rem;margin-bottom:.45rem}
.svc .card__more{display:inline-block;margin-top:.85rem}

/* capabilities block */
.caps-lead{text-align:center;color:var(--muted);margin:-.3rem 0 1.3rem}
.caps-lead strong{color:var(--brand-text)}
.ticks--caps{grid-template-columns:repeat(3,1fr);max-width:780px;margin-inline:auto}

/* solo pull-quote */
.review--solo{max-width:780px;margin-inline:auto;text-align:center;border:0;box-shadow:none;background:transparent;padding:0}
.review--solo blockquote{font-family:var(--ff-head);font-weight:600;font-size:clamp(1.2rem,2.4vw,1.65rem);line-height:1.4;color:var(--ink);margin-bottom:1rem}

/* FAQ (native details/summary, no JS) */
.faq{max-width:820px;margin-inline:auto;display:grid;gap:.7rem}
.faq details{border:1px solid var(--line);background:var(--white);box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer;list-style:none;padding:1.05rem 1.3rem;font-family:var(--ff-head);font-weight:700;font-size:1.02rem;display:flex;align-items:center;gap:.8rem;overflow-wrap:anywhere}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--brand-text);font-size:1.5rem;line-height:1;width:1rem;text-align:center;flex:0 0 auto}
.faq details[open] summary::before{content:"–"}
.faq__a{padding:0 1.3rem 1.2rem 3.1rem;color:var(--muted)}
.faq__a p{margin:0}
.faq__a a{color:var(--brand-text);font-weight:600;white-space:nowrap}

/* sticky mobile call bar */
.callbar{display:none}
@media (max-width:1180px){
  .callbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:130;box-shadow:0 -6px 20px rgba(0,0,0,.2)}
  .callbar__btn{display:flex;align-items:center;justify-content:center;gap:.5em;padding:.95rem .6em;font-family:var(--ff-head);font-weight:700;font-size:min(.98rem,4.4vw);color:#fff;min-width:0;white-space:nowrap}
  .callbar__btn svg{width:20px;height:20px;fill:currentColor;flex:0 0 auto} /* both icons stay 20px; a long label used to squeeze Directions' */
  .callbar__btn--call{background:var(--brand-dark)}
  .callbar__btn--dir{background:var(--brand-blue)}
  body{padding-bottom:58px}
  .audio-fab{bottom:72px}
}
@media (max-width:860px){
  .ticks--caps{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){ .ticks--caps{grid-template-columns:1fr} }