/* ==========================================================================
   Anchor & Axle Mobile Detailing — design tokens
   Marine "buoy" palette: navy ink, icy white-blue base, buoy-yellow accent,
   aqua secondary — deliberately nautical (junk removal owns green/orange,
   ceramic coating owns off-white/violet, pressure washing owns
   charcoal/safety-orange, moss removal owns cream/terracotta).
   Anton (bold condensed display, all-caps) + Plus Jakarta Sans is this
   site's font pairing — no other site in the project uses a condensed
   display face. Single-corner "wake cut" clip-path buttons/cards with a
   gloss sheen sweep are the shape differentiator (junk = pill, ceramic =
   symmetric bevel, pressure = offset-shadow stencil, moss = organic
   dual-radius). A sticky floating Call Now button is unique to this site,
   since the client explicitly wants the call/quote CTA to be the first
   thing a visitor sees and to stay in view. The Detail Package Finder is
   the interactive differentiator — a 3-step picker that recommends a named
   package, never a dollar figure.
   ========================================================================== */
:root{
  --ink:#0f2740;
  --ink-soft:#4d6478;
  --bg:#eef7fa;
  --panel:#ffffff;
  --line:#d7e5ec;
  --accent:#ffc233;
  --accent-deep:#c98a00;
  --accent-bright:#ffe08a;
  --aqua:#0fb4c9;
  --aqua-deep:#0a8a9b;
  --aqua-wash:#e0f6f9;
  --font-display:'Anton',sans-serif;
  --font-body:'Plus Jakarta Sans',sans-serif;
  --cut:14px;
  --radius-btn:8px;
  --shadow:0 14px 32px -16px rgba(15,39,64,.22);
  --shadow-lg:0 26px 60px -22px rgba(15,39,64,.30);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.015em;
  line-height:1.12;
  margin:0 0 .5em;
}
p{margin:0 0 1em;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
.container{max-width:1180px;margin:0 auto;padding:0 24px;}
section{padding:88px 0;}
@media (max-width:780px){section{padding:56px 0;}}

.eyebrow{
  display:inline-block;
  font-family:var(--font-display);
  font-size:.74rem;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--aqua-deep);
  background:var(--aqua-wash);
  padding:6px 16px;
  border-radius:999px;
  margin-bottom:18px;
}

/* Wake-cut gloss buttons — top-right corner sliced at an angle like a
   speedboat wake, plus a diagonal shine sweep that animates across on
   hover instead of the button lifting or compressing. */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:16px 32px;
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:.03em;
  text-transform:uppercase;
  font-size:.98rem;
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  overflow:hidden;
  transition:transform .15s ease,box-shadow .15s ease;
}
.btn::after{
  content:"";
  position:absolute;
  top:0;left:-60%;
  width:40%;height:100%;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
  transform:skewX(-18deg);
  transition:left .5s ease;
}
.btn:hover::after{left:120%;}
.btn-primary{background:var(--accent);color:var(--ink);box-shadow:var(--shadow);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.btn-dark{background:var(--ink);color:#fff;box-shadow:var(--shadow);}
.btn-dark:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.btn-outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);}
.btn-outline:hover{background:var(--ink);color:#fff;}
.btn-lg{padding:19px 40px;font-size:1.08rem;}

/* ===== Header ===== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(238,247,250,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-row{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:1180px;margin:0 auto;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:1.15rem;text-transform:uppercase;letter-spacing:.02em;}
.brand-mark{
  width:38px;height:38px;
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  background:linear-gradient(135deg,var(--aqua),var(--ink));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:400;
  font-family:var(--font-display);font-size:.85rem;letter-spacing:0;
}
.main-nav ul{display:flex;gap:26px;align-items:center;}
.main-nav a{font-weight:600;font-size:.95rem;}
.main-nav a:hover{color:var(--aqua-deep);}
.header-cta{display:flex;align-items:center;gap:18px;}
.header-phone{font-family:var(--font-display);letter-spacing:.02em;font-size:.95rem;}
.nav-toggle{display:none;}
@media (max-width:960px){
  .main-nav{display:none;}
  .nav-toggle{display:block;font-size:1.6rem;background:none;}
}
@media (max-width:640px){
  .header-row{padding:14px 16px;gap:10px;}
  .brand{font-size:.92rem;gap:7px;}
  .brand-mark{width:30px;height:30px;font-size:.72rem;}
  .header-cta .header-phone{display:none;}
  .header-cta .btn{padding:11px 16px;font-size:.82rem;}
  .header-cta{gap:10px;}
}
@media (max-width:400px){
  .header-cta .btn{display:none;}
}

/* ===== Sticky floating call button — always-visible CTA, this site's
   answer to "the first thing they see is call or quote." ===== */
.sticky-call{
  position:fixed;right:22px;bottom:22px;z-index:60;
  display:flex;align-items:center;gap:10px;
  background:var(--accent);color:var(--ink);
  padding:14px 20px;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  box-shadow:var(--shadow-lg);
  animation:aa-pulse 2.6s ease-in-out infinite;
}
.sticky-call-icon{font-size:1.3rem;}
.sticky-call-text{font-size:.82rem;line-height:1.3;font-weight:600;}
.sticky-call-text b{font-family:var(--font-display);font-size:.98rem;letter-spacing:.01em;}
@keyframes aa-pulse{
  0%,100%{box-shadow:var(--shadow-lg);}
  50%{box-shadow:0 0 0 10px rgba(255,194,51,.25),var(--shadow-lg);}
}
@media (max-width:640px){
  .sticky-call-text{display:none;}
  .sticky-call{padding:16px;border-radius:999px;clip-path:none;}
}

/* ===== Hero ===== */
.hero{position:relative;overflow:hidden;padding:88px 0 100px;background:linear-gradient(180deg,#fff 0%,var(--bg) 100%);}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.hero h1{font-size:clamp(2.4rem,4.4vw,3.5rem);color:var(--ink);}
.hero-sub{font-size:1.14rem;color:var(--ink-soft);max-width:48ch;}
.hero-actions{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap;}
.hero-media{position:relative;clip-path:polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%);overflow:hidden;box-shadow:var(--shadow-lg);}
.hero-media img{height:520px;object-fit:cover;width:100%;}
.hero-stats{display:flex;gap:28px;margin-top:40px;flex-wrap:wrap;}
.hero-stat b{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--aqua-deep);letter-spacing:.02em;}
.hero-stat span{font-size:.85rem;color:var(--ink-soft);}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;}.hero-media img{height:340px;}}

/* ===== Trust bar ===== */
.trust-bar{background:var(--ink);color:#fff;padding:20px 0;}
.trust-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-weight:600;font-size:.92rem;}
.trust-row span{opacity:.92;}

/* ===== Section headers ===== */
.section-head{max-width:640px;margin:0 auto 52px;text-align:center;}
.section-head p{color:var(--ink-soft);font-size:1.05rem;}
.section-head.left{margin:0 0 44px;text-align:left;}

/* ===== Services grid ===== */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
@media (max-width:980px){.services-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.services-grid{grid-template-columns:1fr;}}
.service-card{
  background:var(--panel);
  border:1px solid var(--line);
  clip-path:polygon(0 22px, 22px 0, 100% 0, 100% 100%, 0 100%);
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease;
}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.service-card-img{height:170px;overflow:hidden;}
.service-card-img img{width:100%;height:100%;object-fit:cover;}
.service-card-body{padding:26px 28px 30px;}
.service-card h3{font-size:1.05rem;}
.service-card p{color:var(--ink-soft);font-size:.96rem;}
.service-card .card-link{display:inline-block;margin-top:6px;font-weight:700;color:var(--aqua-deep);}

/* ===== Why us ===== */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
@media (max-width:780px){.why-grid{grid-template-columns:1fr;}}
.why-item{display:flex;gap:16px;padding:26px;background:var(--bg);clip-path:polygon(0 14px, 14px 0, 100% 0, 100% 100%, 0 100%);border:1px solid var(--line);}
.why-item .num{font-family:var(--font-display);font-size:1.4rem;color:var(--accent-deep);}
.why-item h4{margin-bottom:6px;text-transform:none;font-family:var(--font-body);font-weight:800;letter-spacing:0;}
.why-item p{color:var(--ink-soft);font-size:.95rem;margin:0;}

/* ===== Process ===== */
.process-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
@media (max-width:900px){.process-row{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.process-row{grid-template-columns:1fr;}}
.process-step{text-align:center;}
.process-step .step-badge{
  width:54px;height:54px;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  background:linear-gradient(135deg,var(--aqua),var(--ink));
  color:#fff;font-family:var(--font-display);font-size:1.2rem;
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
}
.process-step h4{font-size:1rem;text-transform:none;font-family:var(--font-body);font-weight:800;}
.process-step p{color:var(--ink-soft);font-size:.9rem;}

/* ===== Detail Package Finder (interactive differentiator) ===== */
.finder-card{
  max-width:760px;margin:0 auto;
  background:var(--panel);border:1px solid var(--line);
  clip-path:polygon(0 26px, 26px 0, 100% 0, 100% 100%, 0 100%);
  padding:40px;box-shadow:var(--shadow);
}
.finder-step{margin-bottom:28px;}
.finder-step h4{font-size:1rem;margin-bottom:14px;text-transform:none;font-family:var(--font-body);font-weight:800;}
.finder-options{display:flex;gap:10px;flex-wrap:wrap;}
.finder-opt{
  position:relative;padding:11px 18px;
  clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
  border:2px solid var(--line);font-size:.92rem;font-weight:600;color:var(--ink-soft);
  cursor:pointer;transition:all .15s ease;
}
.finder-opt input{position:absolute;opacity:0;pointer-events:none;}
.finder-opt:has(input:checked),.finder-opt.is-checked{background:var(--ink);border-color:var(--ink);color:#fff;}
.finder-result{margin-top:30px;padding-top:28px;border-top:1px solid var(--line);text-align:center;}
.finder-result-eyebrow{display:block;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px;}
.finder-result-badge{
  display:inline-block;font-family:var(--font-display);font-size:1.5rem;letter-spacing:.02em;
  padding:10px 28px;background:var(--accent);color:var(--ink);margin-bottom:16px;
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.finder-result p{color:var(--ink-soft);max-width:52ch;margin:0 auto 20px;}

/* ===== Reviews ===== */
.reviews-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
@media (max-width:780px){.reviews-grid{grid-template-columns:1fr;}}
.review-card{background:var(--panel);border:1px solid var(--line);clip-path:polygon(0 16px, 16px 0, 100% 0, 100% 100%, 0 100%);padding:26px;}
.review-stars{color:var(--accent-deep);letter-spacing:2px;margin-bottom:10px;}
.review-name{font-family:var(--font-display);margin-top:14px;letter-spacing:.02em;}
.review-city{color:var(--ink-soft);font-size:.85rem;}

/* ===== Areas / city chips ===== */
.area-chip-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:36px;}
.area-chip{
  padding:10px 20px;border-radius:999px;background:var(--panel);
  border:1px solid var(--line);font-weight:600;font-size:.92rem;
}
.area-chip:hover{border-color:var(--aqua);color:var(--aqua-deep);}
.area-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
@media (max-width:780px){.area-grid{grid-template-columns:1fr;}}
.area-card{background:var(--panel);border:1px solid var(--line);clip-path:polygon(0 16px, 16px 0, 100% 0, 100% 100%, 0 100%);padding:26px;}
.area-card h4{font-family:var(--font-display);letter-spacing:.02em;}
.area-card p{color:var(--ink-soft);font-size:.94rem;}

/* ===== FAQ ===== */
.faq-list{max-width:820px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);padding:22px 0;}
.faq-q{
  display:flex;justify-content:space-between;align-items:center;
  font-weight:800;cursor:pointer;font-size:1.05rem;text-transform:none;
}
.faq-q .plus{font-size:1.4rem;color:var(--aqua-deep);transition:transform .2s ease;}
.faq-item.is-open .faq-q .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;color:var(--ink-soft);}
.faq-item.is-open .faq-a{max-height:400px;padding-top:14px;}

/* ===== CTA band ===== */
.cta-band{
  background:linear-gradient(135deg,var(--ink) 0%,#0a3a52 100%);
  color:#fff;text-align:center;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
  padding:64px 40px;margin:0 24px;
}
.cta-band h2{color:#fff;}
.cta-band p{color:rgba(255,255,255,.75);}
.cta-band .btn-primary{background:var(--accent);color:var(--ink);}

/* ===== Contact form ===== */
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
@media (max-width:900px){.contact-wrap{grid-template-columns:1fr;}}
.aa-form{background:var(--panel);border:1px solid var(--line);clip-path:polygon(0 24px, 24px 0, 100% 0, 100% 100%, 0 100%);padding:34px;box-shadow:var(--shadow);}
.aa-form label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px;}
.aa-form input,.aa-form textarea,.aa-form select{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:6px;
  font-family:inherit;font-size:.96rem;margin-bottom:18px;background:#fff;
}
.aa-form input:focus,.aa-form textarea:focus{outline:2px solid var(--aqua);outline-offset:1px;}

/* ===== Service detail page ===== */
.service-photo{clip-path:polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);box-shadow:var(--shadow-lg);margin-bottom:24px;height:420px;width:100%;object-fit:cover;}
.pkg-list li{position:relative;padding-left:26px;margin-bottom:10px;color:var(--ink-soft);}
.pkg-list li::before{content:"✓";position:absolute;left:0;color:var(--aqua-deep);font-weight:700;}

/* ===== Icons ===== */
.aa-icon{display:inline-block;vertical-align:-3px;flex-shrink:0;}
.header-phone{display:inline-flex;align-items:center;gap:6px;}
.trust-row span{display:inline-flex;align-items:center;gap:8px;}
.trust-row .aa-icon{color:var(--accent);}
.pkg-list .aa-icon{color:var(--aqua-deep);}

/* ===== Focus states (keyboard accessibility) ===== */
a:focus-visible,button:focus-visible,.btn:focus-visible,.area-chip:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--aqua);
  outline-offset:3px;
  border-radius:4px;
}
.finder-opt:has(input:focus-visible){outline:2px solid var(--aqua);outline-offset:2px;}

/* ===== Button press feedback ===== */
.btn{transition:transform .15s ease,box-shadow .15s ease;}
.btn:active{transform:scale(.97);}

/* ===== Header shrink-on-scroll ===== */
.site-header{transition:box-shadow .25s ease;}
.site-header .header-row{transition:padding .25s ease;}
.site-header.is-scrolled .header-row{padding-top:10px;padding-bottom:10px;}
.site-header.is-scrolled{box-shadow:0 8px 24px -16px rgba(15,39,64,.25);}

/* ===== Motion: hero load-in + scroll reveal + finder result =====
   Subtle, fast, transform/opacity-only per the project's animation
   guidelines. Wrapped in prefers-reduced-motion so reduced-motion users
   simply see content in its final state with no transition at all. */
@media (prefers-reduced-motion:no-preference){
  .hero-anim-in{opacity:0;transform:translateY(20px);animation:aa-fade-up .7s cubic-bezier(.16,1,.3,1) forwards;animation-delay:var(--d,0ms);}
  @keyframes aa-fade-up{to{opacity:1;transform:none;}}

  .reveal{opacity:0;transform:translateY(28px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);}
  .reveal.is-visible{opacity:1;transform:none;}

  .services-grid .reveal:nth-child(1),.reviews-grid .reveal:nth-child(1),.why-grid .reveal:nth-child(1),.process-row .reveal:nth-child(1),.area-grid .reveal:nth-child(1){transition-delay:0ms;}
  .services-grid .reveal:nth-child(2),.reviews-grid .reveal:nth-child(2),.why-grid .reveal:nth-child(2),.process-row .reveal:nth-child(2),.area-grid .reveal:nth-child(2){transition-delay:80ms;}
  .services-grid .reveal:nth-child(3),.reviews-grid .reveal:nth-child(3),.why-grid .reveal:nth-child(3),.process-row .reveal:nth-child(3),.area-grid .reveal:nth-child(3){transition-delay:160ms;}
  .services-grid .reveal:nth-child(4),.reviews-grid .reveal:nth-child(4),.why-grid .reveal:nth-child(4),.process-row .reveal:nth-child(4),.area-grid .reveal:nth-child(4){transition-delay:240ms;}
  .services-grid .reveal:nth-child(5){transition-delay:320ms;}
  .services-grid .reveal:nth-child(6){transition-delay:400ms;}
}

.finder-result{opacity:0;transform:translateY(14px) scale(.98);transition:opacity .4s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1);}
.finder-result.is-shown{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  .finder-result{transition:none;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}

/* ===== Footer ===== */
.site-footer{background:var(--ink);color:rgba(255,255,255,.7);padding:64px 0 28px;margin-top:100px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px;}
@media (max-width:780px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-grid h4{color:#fff;font-family:var(--font-display);font-size:.9rem;margin-bottom:16px;letter-spacing:.03em;}
.footer-grid li{margin-bottom:10px;font-size:.92rem;}
.footer-grid a:hover{color:var(--accent);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;font-size:.85rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* ===== Breadcrumb ===== */
.breadcrumb{font-size:.85rem;color:var(--ink-soft);margin-bottom:18px;}
.breadcrumb a:hover{color:var(--aqua-deep);}

/* ===== Page hero (services hub / city / service pages) ===== */
.page-hero{padding:56px 0 40px;background:var(--aqua-wash);}
.page-hero h1{font-size:clamp(2rem,3.6vw,2.7rem);}
.page-hero p{color:var(--ink-soft);font-size:1.08rem;max-width:60ch;}