/* ═══════════════════════════════════════════════════════════
   Sammy's Auto Repair Centre — Business Site
   Shared design system · Spec-Sheet / Control Panel · Noir Studio
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:#f3f3f1; --surface:#ffffff; --ink:#14161b; --muted:#6a6e77;
  --line:#dcdde1; --line-2:#e8e8e6; --accent:#f24d1e;
  --panel:#14161b; --panel-line:#2c2f38; --panel-mut:#8a8f9a;
  --mono:'Space Mono',monospace; --disp:'Space Grotesk',sans-serif; --body:'Inter',sans-serif;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:300;line-height:1.6;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px;}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent);}

/* STATUS BAR */
.statusbar{position:sticky;top:0;z-index:51;background:var(--panel);color:#cfd2d8;font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;}
.statusbar .wrap{display:flex;align-items:center;gap:22px;height:34px;overflow:hidden;white-space:nowrap;}
.statusbar .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block;margin-right:7px;animation:pulse 2s infinite;}
.statusbar span.sep{color:var(--panel-line);}
.statusbar .right{margin-left:auto;color:var(--accent);}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.3;}}

/* NAV */
nav{position:sticky;top:34px;z-index:50;background:rgba(243,243,241,0.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;}
.logo{display:flex;flex-direction:column;line-height:0.95;}
.logo b{font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:-0.01em;}
.logo b s{color:var(--accent);text-decoration:none;}
.logo small{font-family:var(--mono);font-size:9px;letter-spacing:0.3em;color:var(--muted);margin-top:2px;}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none;}
.nav-links a{font-size:13px;font-weight:400;color:var(--muted);transition:color .2s;}
.nav-links a:hover,.nav-links a.active{color:var(--ink);}
.nav-cta{margin-left:8px;}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;}
.nav-toggle span{width:22px;height:2px;background:var(--ink);transition:.25s;}

.btn{font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:0.02em;padding:12px 22px;border:1px solid var(--ink);transition:all .2s;cursor:pointer;display:inline-flex;align-items:center;gap:8px;}
.btn--solid{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn--solid:hover{background:#d83d12;border-color:#d83d12;}
.btn--dark{background:var(--ink);border-color:var(--ink);color:#fff;}
.btn--dark:hover{background:#000;}
.btn--ghost{background:transparent;color:var(--ink);}
.btn--ghost:hover{background:var(--ink);color:#fff;}

/* SECTIONS */
.sec{padding:96px 0;border-bottom:1px solid var(--line);}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:14px;}
.sec-head h2{font-family:var(--disp);font-weight:700;font-size:clamp(32px,4vw,46px);letter-spacing:-0.02em;line-height:1;}
.sec-head .tag{margin-bottom:10px;display:block;}

/* PAGE HERO (inner pages) */
.phero{border-bottom:1px solid var(--line);background:var(--surface);}
.phero .wrap{padding:72px 32px 64px;}
.phero .crumb{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;color:var(--muted);margin-bottom:22px;}
.phero .crumb a:hover{color:var(--accent);}
.phero h1{font-family:var(--disp);font-weight:700;font-size:clamp(40px,5.5vw,72px);line-height:0.95;letter-spacing:-0.03em;margin-bottom:20px;}
.phero h1 em{font-style:normal;color:var(--accent);}
.phero p{font-size:16px;color:var(--muted);max-width:560px;line-height:1.7;}

/* SERVICE GRID + CARDS */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:50px;}
.svc-card{background:var(--surface);padding:36px 32px;display:flex;flex-direction:column;transition:background .2s;}
.svc-card:hover{background:#faf7f5;}
.svc-card .cnum{font-family:var(--mono);font-size:12px;letter-spacing:0.15em;color:var(--accent);margin-bottom:18px;}
.svc-card h3{font-family:var(--disp);font-weight:600;font-size:22px;letter-spacing:-0.01em;margin-bottom:10px;}
.svc-card p{font-size:14px;color:var(--muted);line-height:1.7;flex:1;margin-bottom:22px;}
.svc-card .cfoot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:16px;}
.svc-card .cfrom{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--accent);}
.svc-card .cgo{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);transition:gap .2s,color .2s;display:inline-flex;gap:6px;}
.svc-card:hover .cgo{color:var(--ink);gap:10px;}

/* PRICING TABLE */
.ptable{width:100%;border-collapse:collapse;margin-top:46px;background:var(--surface);border:1px solid var(--line);}
.ptable th{font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);text-align:left;padding:16px 24px;border-bottom:1px solid var(--ink);}
.ptable th:last-child,.ptable td:last-child{text-align:right;}
.ptable td{padding:20px 24px;border-bottom:1px solid var(--line-2);vertical-align:top;}
.ptable tr:last-child td{border-bottom:none;}
.ptable tbody tr{transition:background .15s;}
.ptable tbody tr:hover{background:#faf7f5;}
.ptable .job{font-family:var(--disp);font-weight:600;font-size:16px;}
.ptable .inc{color:var(--muted);font-size:13px;}
.ptable .price{font-family:var(--mono);font-weight:700;font-size:16px;color:var(--accent);white-space:nowrap;}
.ptable .price s{color:var(--muted);font-weight:400;font-size:11px;text-decoration:none;display:block;}
.pnote{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;color:var(--muted);margin-top:16px;}

/* PROSE / INFO (about, content) */
.prose{max-width:680px;}
.prose p{font-size:16px;color:var(--ink);line-height:1.8;margin-bottom:20px;}
.prose p.lead{font-size:20px;color:var(--ink);font-weight:400;}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:50px;}
.info-cell{background:var(--surface);padding:34px 30px;}
.info-cell b{font-family:var(--disp);font-weight:600;font-size:30px;display:block;letter-spacing:-0.02em;}
.info-cell b i{font-style:normal;color:var(--accent);}
.info-cell span{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);}

/* SERVICE DETAIL */
.detail{display:grid;grid-template-columns:1fr 340px;gap:56px;margin-top:50px;align-items:start;}
.detail-main h2{font-family:var(--disp);font-weight:600;font-size:26px;letter-spacing:-0.01em;margin:0 0 16px;}
.detail-main h2:not(:first-child){margin-top:44px;}
.detail-main p{font-size:16px;color:var(--ink);line-height:1.8;margin-bottom:16px;}
.detail-main p.lead{font-size:19px;}
.dlist{list-style:none;border-top:1px solid var(--line);}
.dlist li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-2);font-size:15px;color:var(--ink);}
.dlist li::before{content:'+';color:var(--accent);font-family:var(--mono);font-weight:700;}
.dsteps{display:flex;flex-direction:column;border-top:1px solid var(--ink);margin-top:8px;}
.dstep{display:grid;grid-template-columns:48px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--line);}
.dstep .sn{font-family:var(--mono);font-size:12px;color:var(--accent);}
.dstep b{font-family:var(--disp);font-weight:600;font-size:16px;display:block;margin-bottom:4px;}
.dstep span{font-size:14px;color:var(--muted);line-height:1.6;}
.spec-card{position:sticky;top:120px;background:var(--surface);border:1px solid var(--line);box-shadow:0 14px 36px rgba(20,22,27,0.07);}
.spec-card .sc-head{padding:20px 22px;border-bottom:1px solid var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);}
.spec-card .sc-row{display:flex;align-items:baseline;justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--line-2);}
.spec-card .sc-row span{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);}
.spec-card .sc-row b{font-family:var(--disp);font-weight:600;font-size:15px;}
.spec-card .sc-row b.big{font-size:26px;color:var(--accent);}
.spec-card .sc-cta{padding:22px;}
.spec-card .sc-cta .btn{width:100%;justify-content:center;}
@media(max-width:900px){ .detail{grid-template-columns:1fr;gap:32px;} .spec-card{position:static;} }

/* REVIEWS (reviews page) */
.score{background:var(--surface);color:var(--ink);padding:36px;border:1px solid var(--line);box-shadow:0 14px 36px rgba(20,22,27,0.07);}
.score-big{font-family:var(--disp);font-weight:700;font-size:72px;line-height:1;letter-spacing:-0.03em;}
.score-stars{color:var(--accent);letter-spacing:3px;margin:8px 0 4px;}
.score-sub{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;color:var(--muted);margin-bottom:26px;}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-family:var(--mono);font-size:11px;color:var(--muted);}
.bar-track{flex:1;height:5px;background:var(--line);}
.bar-fill{height:100%;background:var(--accent);}
.score-row{display:grid;grid-template-columns:320px 1fr;gap:48px;align-items:center;margin-top:50px;}
.score-row p{font-size:18px;color:var(--ink);line-height:1.7;}
.review-wall{columns:3;column-gap:18px;margin-top:46px;}
.rev-card{break-inside:avoid;background:var(--surface);border:1px solid var(--line);padding:26px;margin-bottom:18px;}
.rev-card .rstars{color:var(--accent);font-size:12px;letter-spacing:2px;margin-bottom:12px;}
.rev-card p{font-size:14px;line-height:1.7;color:var(--ink);margin-bottom:16px;}
.rev-card .rby{font-family:var(--mono);font-size:11px;letter-spacing:0.05em;color:var(--muted);}
.rev-card .rby b{color:var(--ink);font-weight:700;}
@media(max-width:900px){ .score-row{grid-template-columns:1fr;gap:28px;} .review-wall{columns:1;} }

/* FAQ */
.faq{max-width:820px;margin-top:46px;border-top:1px solid var(--ink);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:var(--disp);font-weight:600;font-size:18px;color:var(--ink);}
.faq-q .pm{font-family:var(--mono);color:var(--accent);font-size:22px;line-height:1;transition:transform .25s;flex-shrink:0;}
.faq-item.open .faq-q .pm{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a p{padding:0 0 24px;color:var(--muted);font-size:15px;line-height:1.75;max-width:700px;}
.faq-item.open .faq-a{max-height:360px;}

/* GALLERY */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:46px;background:var(--line);border:1px solid var(--line);}
.gtile{aspect-ratio:4/3;background:linear-gradient(135deg,#23262e,#14161b);position:relative;display:flex;align-items:flex-end;overflow:hidden;}
.gtile .gicon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:38px;opacity:0.16;}
.gtile .glabel{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:#cfd2d8;padding:14px 16px;position:relative;z-index:1;}
.gnote{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;color:var(--muted);margin-top:16px;}
@media(max-width:900px){ .gallery{grid-template-columns:1fr 1fr;} }

/* BLOG */
.feature-post{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);margin-top:50px;background:var(--surface);text-decoration:none;color:inherit;transition:background .2s;}
.feature-post:hover{background:#faf7f5;}
.feature-post .fp-img{background:linear-gradient(135deg,#23262e,#14161b);min-height:300px;display:flex;align-items:center;justify-content:center;font-size:48px;color:rgba(255,255,255,0.12);}
.feature-post .fp-body{padding:44px;display:flex;flex-direction:column;justify-content:center;}
.feature-post .fp-cat{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;}
.feature-post h3{font-family:var(--disp);font-weight:700;font-size:30px;letter-spacing:-0.02em;line-height:1.12;margin-bottom:14px;}
.feature-post p{color:var(--muted);font-size:15px;line-height:1.7;margin-bottom:22px;}
.feature-post .fp-read{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink);}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-top:none;}
.post-card{background:var(--surface);padding:32px 30px;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:background .2s;}
.post-card:hover{background:#faf7f5;}
.post-card .pc-meta{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;}
.post-card .pc-meta b{color:var(--accent);font-weight:700;}
.post-card h3{font-family:var(--disp);font-weight:600;font-size:19px;line-height:1.25;margin-bottom:12px;}
.post-card p{color:var(--muted);font-size:14px;line-height:1.65;flex:1;margin-bottom:18px;}
.post-card .pc-read{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);}
.post-card:hover .pc-read{color:var(--accent);}

/* ARTICLE */
.article{max-width:720px;margin:0 auto;}
.article .a-meta{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;}
.article h2{font-family:var(--disp);font-weight:600;font-size:23px;margin:38px 0 14px;letter-spacing:-0.01em;}
.article p{font-size:17px;line-height:1.85;color:var(--ink);margin-bottom:20px;}
.article p.lead{font-size:20px;}
.article ul{margin:0 0 22px;padding:0;list-style:none;border-top:1px solid var(--line);}
.article ul li{padding:12px 0 12px 22px;border-bottom:1px solid var(--line-2);position:relative;color:var(--ink);font-size:16px;}
.article ul li::before{content:'+';position:absolute;left:0;color:var(--accent);font-family:var(--mono);}
.article .a-back{font-family:var(--mono);font-size:12px;letter-spacing:0.1em;color:var(--muted);margin-top:40px;display:inline-block;}
.article .a-back:hover{color:var(--accent);}
@media(max-width:900px){ .feature-post{grid-template-columns:1fr;} .feature-post .fp-img{min-height:200px;} .blog-grid{grid-template-columns:1fr;} }

/* BOOKING WIDGET */
.bk{display:grid;grid-template-columns:1fr 320px;gap:48px;margin-top:50px;align-items:start;}
.bk-steps{display:flex;border:1px solid var(--line);}
.bk-step{flex:1;padding:14px 8px;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);border-right:1px solid var(--line);background:var(--surface);}
.bk-step:last-child{border-right:none;}
.bk-step.active{background:var(--ink);color:#fff;}
.bk-step.done{color:var(--accent);}
.bk-panel{display:none;border:1px solid var(--line);border-top:none;background:var(--surface);padding:34px;}
.bk-panel.active{display:block;}
.bk-panel h3{font-family:var(--disp);font-weight:600;font-size:21px;margin-bottom:6px;}
.bk-panel .sub{font-size:13px;color:var(--muted);margin-bottom:22px;}
.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.opt{border:1px solid var(--line);background:var(--surface);padding:15px 16px;text-align:left;cursor:pointer;font-family:var(--body);font-size:14px;color:var(--ink);transition:all .15s;}
.opt:hover{border-color:var(--ink);}
.opt.sel{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent);}
.opt span{display:block;font-family:var(--mono);font-size:11px;color:var(--accent);margin-top:4px;}
.slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px;}
.slot{border:1px solid var(--line);background:var(--surface);padding:12px;text-align:center;cursor:pointer;font-family:var(--mono);font-size:13px;color:var(--ink);transition:all .15s;}
.slot:hover{border-color:var(--ink);}
.slot.sel{background:var(--accent);border-color:var(--accent);color:#fff;}
.bk-label{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.bk-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.bk-field label{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);}
.bk-field input,.bk-field textarea{border:1px solid var(--line);background:var(--surface);padding:12px 14px;font-family:var(--body);font-size:14px;color:var(--ink);outline:none;resize:vertical;}
.bk-field input:focus,.bk-field textarea:focus{border-color:var(--accent);}
.bk-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.bk-nav{display:flex;justify-content:space-between;margin-top:22px;}
.bk-summary{position:sticky;top:120px;border:1px solid var(--line);background:var(--surface);box-shadow:0 14px 36px rgba(20,22,27,0.07);}
.bk-summary .bs-head{padding:18px 20px;border-bottom:1px solid var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);}
.bk-summary .bs-row{display:flex;justify-content:space-between;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line-2);font-size:14px;align-items:baseline;}
.bk-summary .bs-row span{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);flex-shrink:0;}
.bk-summary .bs-row b{font-family:var(--disp);font-weight:600;text-align:right;}
.bk-summary .bs-foot{padding:16px 20px;font-family:var(--mono);font-size:11px;color:var(--muted);}
.bk-confirm{text-align:center;padding:26px 10px;}
.bk-confirm .ic{font-size:42px;color:var(--accent);font-family:var(--disp);font-weight:700;}
.bk-confirm h3{font-size:26px;margin:14px 0 10px;}
.bk-confirm p{color:var(--muted);max-width:440px;margin:0 auto 8px;font-size:15px;line-height:1.7;}
.bk-confirm .cf-line{font-family:var(--mono);font-size:12px;color:var(--ink);letter-spacing:0.04em;margin-top:14px;}
@media(max-width:900px){ .bk{grid-template-columns:1fr;gap:24px;} .bk-summary{position:static;} .opt-grid{grid-template-columns:1fr;} .slot-grid{grid-template-columns:1fr 1fr;} .bk-2{grid-template-columns:1fr;} }

/* BOOK CTA */
.book{background:var(--panel);color:#fff;}
.book .wrap{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:72px 32px;}
.book h2{font-family:var(--disp);font-weight:700;font-size:clamp(32px,4.5vw,52px);letter-spacing:-0.02em;line-height:0.98;}
.book h2 em{font-style:normal;color:var(--accent);}
.book p{color:var(--panel-mut);font-family:var(--mono);font-size:12px;letter-spacing:0.1em;margin-top:14px;}
.book-actions{display:flex;flex-direction:column;gap:12px;flex-shrink:0;}

/* FOOTER */
footer{background:var(--bg);}
footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding:64px 32px 32px;}
.foot-logo b{font-family:var(--disp);font-weight:700;font-size:24px;}
.foot-logo b s{color:var(--accent);text-decoration:none;}
.foot-logo p{color:var(--muted);font-size:14px;max-width:300px;margin-top:14px;line-height:1.7;}
.foot-col h4{font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;}
.foot-col a,.foot-col p{display:block;color:var(--ink);font-size:14px;margin-bottom:10px;}
.foot-bar{border-top:1px solid var(--line);}
.foot-bar .wrap{display:flex;justify-content:space-between;padding:22px 32px;font-family:var(--mono);font-size:11px;letter-spacing:0.08em;color:var(--muted);}

/* REVEAL */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* RESPONSIVE */
@media(max-width:900px){
  .wrap{padding:0 20px;}
  .statusbar .wrap{gap:14px;}.statusbar .right{display:none;}
  .nav-toggle{display:flex;}
  .nav-links{position:absolute;top:106px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 20px 16px;display:none;}
  nav.open .nav-links{display:flex;}
  .nav-links a{padding:12px 0;width:100%;border-bottom:1px solid var(--line-2);font-size:15px;}
  .nav-cta{font-size:11px;padding:10px 14px;}
  nav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  nav.open .nav-toggle span:nth-child(2){opacity:0;}
  nav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .svc-grid,.info-grid{grid-template-columns:1fr;}
  .book .wrap{flex-direction:column;align-items:flex-start;}
  footer .wrap{grid-template-columns:1fr;}
  .foot-bar .wrap{flex-direction:column;gap:8px;}
  .sec{padding:64px 0;}
}