/* ==========================================================================
   Sauga Detailing — stylesheet
   Visual language modelled on the Arête homepage: light ground, white
   rounded cards, one dark contrast card, heavy centred display type,
   green pill CTAs repeated after every section.
   Same class names as before, so all 23 pages inherit this automatically.
   ========================================================================== */

:root{
  --ground:#F5F8FA;
  --paper:#FFFFFF;
  --ink:#0B1B2B;
  --body:#54636F;
  --muted:#7C8B98;
  --rule:#E3EAEF;
  --rule-soft:#EFF3F6;

  --navy:#0E1B2E;
  --navy-2:#152742;

  --green:#6FE0A3;
  --green-dk:#4FCB89;
  --green-ink:#06301C;

  --blue:#2F6BFF;
  --blue-dk:#1E4FD8;

  --gold:#F5B301;
  --risk:#B3261E;

  --display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --wrap:1180px;
  --gut:20px;
  --r:16px;
  --r-sm:12px;

  /* aliases kept so the booking page's scoped CSS keeps working */
  --accent:#2F6BFF;
  --accent-dk:#1E4FD8;
  --accent-lt:#EAF1FF;
  --radius:16px;
  --go:#4FCB89;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-underline-offset:2px}
a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}

h1,h2,h3,h4{
  font-family:var(--display);color:var(--ink);
  font-weight:800;letter-spacing:-.035em;line-height:1.03;
  margin:0 0 .45em;text-wrap:balance;
}
h1{font-size:clamp(2.5rem,7vw,4.5rem)}
h2{font-size:clamp(1.9rem,4.6vw,3.1rem);margin-top:0}
h3{font-size:1.25rem;letter-spacing:-.02em;font-weight:700}
h4{font-size:1.02rem;letter-spacing:-.012em;font-weight:700}
p{margin:0 0 1.05em;text-wrap:pretty}
ul,ol{margin:0 0 1.05em;padding-left:1.25em}
li{margin-bottom:.42em}
strong{font-weight:700;color:var(--ink)}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 var(--gut)}
section{padding:62px 0}
@media (min-width:800px){section{padding:88px 0}}
.sec-tint{background:var(--ground)}
.sec-dark{background:var(--navy);color:#AFC0D0}
.sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark h4{color:#fff}
.sec-dark a{color:var(--green)}

/* centred homepage sections */
.tc{text-align:center}
.tc p,.tc .lede{margin-left:auto;margin-right:auto}
.tc ul,.tc ol{text-align:left}

.eyebrow{
  font-family:var(--sans);font-size:12.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
  margin:0 0 12px;
}
.sec-dark .eyebrow{color:var(--green)}
.lede{font-size:1.15rem;color:var(--muted);max-width:64ch}
.sec-dark .lede{color:#9AACBD}

/* ---------- star badge ---------- */
.badge{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--paper);border:1px solid var(--rule);
  border-radius:999px;padding:9px 18px;margin-bottom:24px;
  font-size:14.5px;font-weight:700;color:var(--ink);
  box-shadow:0 1px 3px rgba(11,27,43,.05);
}
.badge .stars{color:var(--gold);letter-spacing:1px;font-size:13px}

/* ---------- trust lines ---------- */
.trustlines{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:9px;align-items:center}
.trustlines li{margin:0;font-weight:700;color:var(--ink);font-size:16.5px;display:flex;align-items:center;gap:9px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:800;font-size:15.5px;line-height:1;
  padding:17px 30px;border-radius:999px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .12s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.btn-primary{background:var(--green);color:var(--green-ink);border-color:var(--green);box-shadow:0 6px 18px rgba(79,203,137,.35)}
.btn-primary:hover{background:var(--green-dk);border-color:var(--green-dk);transform:translateY(-1px)}
.btn-ghost{background:var(--paper);color:var(--ink);border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-1px)}
.sec-dark .btn-ghost,.hero .btn-ghost{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.sec-dark .btn-ghost:hover,.hero .btn-ghost:hover{background:#EDF3F8;border-color:#EDF3F8;color:var(--ink)}
.btn-sm{padding:11px 20px;font-size:14.5px}
.btn-row{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}
.tc .btn-row,.cta-pair{justify-content:center}
.cta-pair{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:44px}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--rule);
}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:70px}
.brand{
  font-family:var(--display);font-weight:800;font-size:1.2rem;letter-spacing:-.03em;
  color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px;white-space:nowrap;
}
.brand span.accent{color:var(--blue)}
.brand-mark{
  width:26px;height:26px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 32% 28%,#8FD8FF 0%,var(--blue) 45%,#123A9E 100%);
}
.nav{display:none;gap:26px;align-items:center}
@media (min-width:1000px){.nav{display:flex}}
.nav a{color:var(--body);text-decoration:none;font-size:15px;font-weight:600;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink);border-bottom-color:var(--blue)}
.head-cta{display:flex;align-items:center;gap:11px}
.head-tel{font-family:var(--display);font-weight:800;font-size:1.02rem;color:var(--ink);text-decoration:none;white-space:nowrap}
@media (max-width:559px){.head-tel{display:none}}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(180deg,#FFFFFF 0%,#F2F8FC 100%);
  padding:60px 0 76px;text-align:center;
}
@media (min-width:800px){.hero{padding:84px 0 96px}}
.hero .lede{font-size:1.22rem;max-width:56ch;margin-left:auto;margin-right:auto}
.hero-media{
  margin:46px auto 0;max-width:900px;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--rule);box-shadow:0 18px 50px rgba(11,27,43,.10);
}
.hero-media img{width:100%;aspect-ratio:16/10;object-fit:cover}

/* ---------- dark contrast card ---------- */
.darkcard{
  background:var(--navy);color:#B6C6D6;border-radius:22px;
  padding:48px 32px;text-align:center;
  box-shadow:0 20px 50px rgba(14,27,46,.22);
}
@media (min-width:800px){.darkcard{padding:64px 56px}}
.darkcard h2{color:#fff;margin-bottom:18px}
.darkcard p{color:#B6C6D6;max-width:62ch;margin-left:auto;margin-right:auto;font-weight:500}
.darkcard .btn-ghost{background:#fff;border-color:#fff;color:var(--ink)}
.darkcard .btn-row{justify-content:center;margin-top:30px}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:repeat(2,1fr)}
@media (min-width:680px){.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}

.card{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  padding:30px 28px;display:flex;flex-direction:column;text-align:left;
  transition:box-shadow .16s ease,transform .16s ease;
}
.card:hover{box-shadow:0 10px 30px rgba(11,27,43,.07);transform:translateY(-2px)}
.card h3{margin-bottom:9px}
.card p{font-size:15.5px;margin-bottom:15px;color:var(--muted)}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.card ul{font-size:15px;padding-left:0;list-style:none;margin-bottom:18px}
.card ul li{padding-left:26px;position:relative;margin-bottom:9px;font-weight:600;color:var(--ink);line-height:1.45}
.card ul li::before{
  content:"";position:absolute;left:2px;top:7px;width:12px;height:6px;
  border-left:2.5px solid var(--green-dk);border-bottom:2.5px solid var(--green-dk);
  transform:rotate(-45deg);
}
.card .card-link{margin-top:auto;font-weight:800;font-size:15px;text-decoration:none;display:inline-flex;align-items:center;gap:6px;color:var(--blue)}
.card .card-link:hover{text-decoration:underline}
.card-price{font-family:var(--display);font-weight:800;color:var(--ink);font-size:1.15rem;margin-bottom:10px;font-variant-numeric:tabular-nums}

/* numbered step cards */
.numcard .n{
  font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--blue);
  display:block;margin-bottom:6px;
}

/* ---------- pricing ---------- */
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 24px;border:1px solid var(--rule);border-radius:var(--r);background:var(--paper)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15.5px;text-align:left}
caption{text-align:left;font-family:var(--display);font-weight:800;color:var(--ink);font-size:1.15rem;padding:0 0 12px}
th{
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  text-align:left;color:var(--muted);padding:14px 18px;background:var(--ground);
  border-bottom:1px solid var(--rule);white-space:nowrap;
}
td{padding:15px 18px;border-bottom:1px solid var(--rule-soft);vertical-align:top;line-height:1.5}
tbody tr:last-child td{border-bottom:none}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:800;color:var(--ink)}
td .sub{display:block;font-size:13.5px;color:var(--muted);margin-top:3px;font-weight:400}

.pricecard{
  border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);
  padding:32px 28px;display:flex;flex-direction:column;text-align:left;
}
.pricecard.featured{border:2px solid var(--green-dk);position:relative;box-shadow:0 12px 34px rgba(79,203,137,.16)}
.pricecard.featured::before{
  content:"Most booked";position:absolute;top:-12px;left:28px;
  background:var(--green);color:var(--green-ink);font-size:11.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px;
}
.pricecard .amt{font-family:var(--display);font-weight:800;font-size:2.4rem;color:var(--ink);line-height:1;margin:8px 0 4px;font-variant-numeric:tabular-nums}
.pricecard .amt small{font-size:.9rem;font-weight:600;color:var(--muted)}
.pricecard ul{font-size:15px;padding-left:0;list-style:none;margin:18px 0 24px}
.pricecard ul li{padding-left:26px;position:relative;margin-bottom:10px;line-height:1.5;font-weight:600;color:var(--ink)}
.pricecard ul li::before{
  content:"";position:absolute;left:2px;top:8px;width:12px;height:6px;
  border-left:2.5px solid var(--green-dk);border-bottom:2.5px solid var(--green-dk);
  transform:rotate(-45deg);
}
.pricecard .btn{margin-top:auto}

/* ---------- gallery ---------- */
.gallery{display:grid;gap:18px;grid-template-columns:repeat(2,1fr)}
@media (min-width:820px){.gallery{grid-template-columns:repeat(3,1fr)}}
.gallery figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--ground);border:1px solid var(--rule)}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{padding:13px 16px;font-size:13.5px;color:var(--muted);line-height:1.45;text-align:left}

/* ---------- steps ---------- */
.steps{counter-reset:s;list-style:none;padding:0;text-align:left}
.steps li{counter-increment:s;position:relative;padding-left:56px;margin-bottom:28px}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:50%;
  background:var(--green);color:var(--green-ink);font-family:var(--display);font-weight:800;font-size:15px;
  display:flex;align-items:center;justify-content:center;
}
.steps h4{margin-bottom:4px}
.steps p{margin-bottom:0;font-size:15.5px;color:var(--muted)}

/* ---------- note ---------- */
.note{background:#EAF7F1;border:1px solid #C9EBDB;border-radius:var(--r);padding:24px 26px;margin:0 0 24px;text-align:left}
.note > :last-child{margin-bottom:0}
.note h4{margin-bottom:7px}

/* ---------- FAQ ---------- */
.faq{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:12px;text-align:left}
.faq details{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-sm)}
.faq summary{
  cursor:pointer;padding:20px 48px 20px 22px;position:relative;list-style:none;
  font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--ink);line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:22px;top:26px;width:9px;height:9px;
  border-right:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);
  transform:rotate(45deg);transition:transform .18s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details > *:not(summary){margin-bottom:20px;padding:0 22px;font-size:16px}
.faq details p{max-width:70ch}

/* ---------- area chips ---------- */
.hoodlist{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0;list-style:none;justify-content:center}
.hoodlist li{margin:0}
.hoodlist a{
  display:inline-block;padding:10px 18px;border:1px solid var(--rule);border-radius:999px;
  font-size:14.5px;font-weight:700;text-decoration:none;color:var(--ink);background:var(--paper);
}
.hoodlist a:hover{border-color:var(--blue);color:var(--blue)}
.sec-dark .hoodlist a{background:transparent;border-color:rgba(255,255,255,.22);color:#C6D5E2}
.sec-dark .hoodlist a:hover{border-color:var(--green);color:var(--green)}

/* ---------- contact cards ---------- */
.contactcard{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:28px 26px;text-align:left}
.contactcard h3{margin-bottom:10px}
.contactcard h3 a{text-decoration:none}
.contactcard .big{font-family:var(--display);font-weight:800;font-size:1.25rem;color:var(--ink);display:block;margin-bottom:6px;text-decoration:none}
.contactcard p{margin-bottom:0;font-size:15.5px}

/* ---------- breadcrumb ---------- */
.crumb{font-size:14px;color:var(--muted);padding:20px 0 0}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--blue);text-decoration:underline}
.crumb span{margin:0 8px;opacity:.5}

/* ---------- CTA band ---------- */
.cta-band{background:var(--navy);color:#B6C6D6;text-align:center}
.cta-band h2{color:#fff}
.cta-band p{color:#B6C6D6;margin-left:auto;margin-right:auto;max-width:60ch}
.cta-band .btn-ghost{background:#fff;border-color:#fff;color:var(--ink)}
.cta-band .btn-row{justify-content:center}

/* ---------- footer ---------- */
.site-foot{background:var(--navy);color:#93A6B8;padding:60px 0 32px;font-size:15px}
.site-foot h4{color:#fff;font-size:13px;letter-spacing:.11em;text-transform:uppercase;margin-bottom:16px;font-family:var(--sans);font-weight:800}
.foot-grid{display:grid;gap:36px;grid-template-columns:1fr}
@media (min-width:700px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin-bottom:9px}
.site-foot a{color:#B6C6D6;text-decoration:none}
.site-foot a:hover{color:var(--green);text-decoration:underline}
.site-foot address{font-style:normal;line-height:1.75;color:#B6C6D6}
.foot-bottom{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.10);font-size:13.5px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}

/* ---------- sticky mobile call bar ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;background:var(--navy);border-top:1px solid rgba(255,255,255,.12)}
@media (min-width:1000px){.callbar{display:none}}
.callbar a{flex:1;text-align:center;padding:16px 8px;font-weight:800;font-size:15.5px;text-decoration:none;color:#fff}
.callbar a.primary{background:var(--green);color:var(--green-ink)}
body{padding-bottom:58px}
@media (min-width:1000px){body{padding-bottom: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}