/* =============================================================
   FRIENDS AUTO SERVICE — brand tokens
   Palette pulled directly from the shop badge: a single deep
   navy (matched from the logo artwork) plus cream and white.
   Tuned for readability — generous line-height, soft contrast,
   nothing shouting at the reader.
   ============================================================= */
:root{
  --navy-950:#0e1d26;
  --navy-900:#16303d;
  --navy-800:#1f3f4f;
  --navy-700:#2c5067;   /* exact navy sampled from the logo artwork */
  --navy-600:#3c6479;
  --navy-500:#57829a;
  --navy-300:#a9c4d1;
  --cream-100:#f3efe2;
  --cream-050:#faf8f2;
  --white:#ffffff;
  --ink:#1b2a33;         /* softened slightly from pure near-black for easier reading */

  --font-display:'Staatliches', sans-serif;
  --font-script:'Lobster', cursive;
  --font-body:'Work Sans', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --radius-sm:8px;
  --radius-md:16px;
  --shadow-soft:0 12px 30px -14px rgba(14,29,38,0.35);

  color-scheme: light;
}

*,*::before,*::after{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream-050);
  line-height:1.65;
  font-size:1rem;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
p{margin:0 0 1em;}
.container{
  width:min(1180px, 100% - 2.5rem);
  margin-inline:auto;
}
.script{font-family:var(--font-script); font-weight:400;}
.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 visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--navy-600);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

/* =============== Buttons =============== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 1.7rem;
  min-height:48px; /* comfortable iOS/Android tap target */
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:1rem;
  border:2px solid transparent;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-lg{padding:1.05rem 2.1rem; font-size:1.08rem;}
.btn-block{width:100%;}
.btn-primary{background:var(--navy-700); color:var(--white);}
.btn-primary:hover{background:var(--navy-800); box-shadow:var(--shadow-soft);}
/* accent = the brightest thing on a dark surface: cream fill, navy text */
.btn-accent{background:var(--cream-050); color:var(--navy-900); border-color:var(--cream-050);}
.btn-accent:hover{background:transparent; color:var(--cream-050); box-shadow:0 12px 24px -10px rgba(0,0,0,0.35);}
.btn-ghost{background:transparent; border-color:var(--navy-700); color:var(--navy-700);}
.btn-ghost:hover{background:var(--navy-700); color:var(--white);}
/* used on dark hero/banner backgrounds — filled enough to read clearly, not just a faint outline */
.btn-ghost-light{background:rgba(255,255,255,0.14); border-color:var(--white); color:var(--white); font-weight:700;}
.btn-ghost-light:hover{background:var(--white); color:var(--navy-800);}

/* =============== Section headings =============== */
.eyebrow{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.78rem;
  font-weight:600;
  color:var(--navy-600);
  margin:0 0 .6rem;
}
.eyebrow.center{text-align:center;}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(2rem, 3.2vw, 2.85rem);
  letter-spacing:.02em;
  color:var(--navy-900);
  margin:0 0 1rem;
  line-height:1.12;
}
.section-title.center{text-align:center;}
.section-sub{max-width:640px; color:var(--navy-700); opacity:.9; font-size:1.05rem;}
.section-sub.center{margin-inline:auto; text-align:center;}

/* =============================================================
   HEADER
   ============================================================= */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,248,242,0.94);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(14,29,38,0.08);
  padding-top:env(safe-area-inset-top, 0px);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.5rem 0;
}
.brand{display:flex; align-items:center;}
/* the logo IS the brand mark — no competing wordmark needed */
.brand-mark{height:72px; width:auto;}

.main-nav{display:flex; gap:1.6rem;}
.main-nav a{
  font-weight:600; font-size:.95rem; color:var(--navy-800);
  position:relative; padding:.4rem .1rem;
}
.main-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--navy-700); transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease;
}
.main-nav a:hover::after{transform:scaleX(1);}
.header-actions{display:flex; align-items:center; gap:1rem;}
.tel-badge{
  display:flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-weight:600; font-size:.95rem;
  color:var(--navy-800);
  padding:.5rem;
}
.hamburger{
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:44px; height:44px;
  background:none; border:none; cursor:pointer;
  touch-action:manipulation;
}
.hamburger span{width:24px; height:2px; background:var(--navy-900); border-radius:2px; transition:transform .2s ease, opacity .2s ease;}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width: 940px){
  .brand-mark{height:56px;}
  .header-actions .btn{display:none;}
  .main-nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--cream-050);
    flex-direction:column; gap:0;
    max-height:0; overflow:hidden;
    border-bottom:1px solid rgba(14,29,38,0.08);
    transition:max-height .3s ease;
  }
  .main-nav.open{max-height:360px;}
  .main-nav a{padding:1.1rem 1.5rem; border-top:1px solid rgba(14,29,38,0.06); display:block;}
  .hamburger{display:flex;}
}

/* =============================================================
   HERO
   ============================================================= */
.hero{
  position:relative;
  overflow:hidden;
  background:var(--navy-900);
  color:var(--white);
  padding:clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.hero-bg{
  position:absolute; inset:0;
  background-color:var(--navy-900);
  background-image:
    linear-gradient(100deg, rgba(14,29,38,0.94) 15%, rgba(22,48,61,0.74) 55%, rgba(14,29,38,0.92) 100%),
    url('https://images.unsplash.com/photo-1632823469850-2f77a1e6c1e1?auto=format&fit=crop&w=1800&q=70');
  background-size:cover;
  background-position:center 35%;
}
.hero-wings{
  position:absolute; top:38%; width:130px; height:24px;
  background-image:repeating-linear-gradient(var(--navy-300) 0 3px, transparent 3px 9px);
  opacity:.3;
}
.hero-wings-left{left:-40px; transform:skewY(2deg);}
.hero-wings-right{right:-40px; transform:skewY(-2deg);}

/* Prominent logo badge, stamped into the hero like a shop seal */
.hero-logo-badge{
  position:absolute;
  top:clamp(1.5rem, 5vw, 3rem);
  right:clamp(1rem, 6vw, 5rem);
  width:clamp(130px, 15vw, 240px);
  height:auto;
  opacity:.97;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,0.45));
  transform:rotate(-4deg);
}
@media (max-width:860px){
  .hero-logo-badge{
    position:static; display:block; margin:0 auto 1.6rem;
    width:min(42vw, 180px); transform:rotate(0deg);
  }
}

.hero-inner{position:relative; max-width:740px;}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(2.5rem, 6vw, 4.2rem);
  line-height:1.05;
  margin:.2rem 0 1.1rem;
  letter-spacing:.01em;
}
.hero h1 .script{
  font-size:1.05em;
  display:inline-block;
}
.hero-sub{
  font-size:1.15rem; color:var(--cream-100); opacity:.92; max-width:560px;
  margin-bottom:2rem;
  line-height:1.6;
}
.hero-cta{display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:2.2rem;}
.hero-badges{
  display:flex; flex-wrap:wrap; gap:1.6rem;
  font-family:var(--font-mono); font-size:.85rem; color:var(--navy-300);
}
.hero-badges strong{color:var(--cream-100); font-size:1rem;}

/* =============================================================
   TRUST STRIP
   ============================================================= */
.trust-strip{background:var(--navy-800); padding:1.5rem 0;}
.trust-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:1.2rem; text-align:center;
}
.trust-item{display:flex; flex-direction:column; gap:.25rem;}
.trust-num{font-family:var(--font-mono); font-weight:600; color:var(--cream-100); font-size:1.1rem; letter-spacing:.04em;}
.trust-label{color:var(--navy-300); font-size:.82rem; opacity:.95;}

/* =============================================================
   SERVICES  (auto-fit grid: adapts smoothly phone → tablet → desktop)
   ============================================================= */
.services{padding:clamp(3.5rem,7vw,6rem) 0;}
.services > .container > .section-sub{margin-bottom:3rem;}
.service-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1.5rem;
  margin-top:2.5rem;
}
.service-card{
  background:var(--white);
  border:1px solid rgba(14,29,38,0.08);
  border-radius:var(--radius-md);
  padding:2rem 1.7rem;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-soft);
  border-color:transparent;
}
.hex-icon{
  width:64px; height:56px;
  display:flex; align-items:center; justify-content:center;
  background:var(--navy-700);
  color:var(--cream-050);
  -webkit-clip-path:polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  clip-path:polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  margin-bottom:1.1rem;
}
.service-card h3{
  font-family:var(--font-display);
  font-size:1.32rem; letter-spacing:.02em;
  color:var(--navy-900); margin:0 0 .5rem;
}
.service-card p{margin:0; font-size:.97rem; line-height:1.55; color:var(--navy-800); opacity:.88;}

/* =============================================================
   WHY US
   ============================================================= */
.why-us{background:var(--cream-100); padding:clamp(3.5rem,7vw,6rem) 0;}
.why-grid{display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center;}
.why-list{display:flex; flex-direction:column; gap:1.7rem; margin-top:1.6rem;}
.why-list li{display:flex; gap:1rem; align-items:flex-start;}
.why-icon{font-size:1.5rem; line-height:1;}
.why-list h3{font-family:var(--font-display); font-size:1.22rem; margin:0 0 .35rem; color:var(--navy-900); letter-spacing:.01em;}
.why-list p{margin:0; color:var(--navy-800); opacity:.88; font-size:.98rem; line-height:1.55;}

.photo-frame{
  border-radius:var(--radius-md);
  aspect-ratio:4/3.2;
  background-color:var(--navy-700);
  background-size:cover; background-position:center;
  box-shadow:var(--shadow-soft);
  position:relative;
}
.photo-frame::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 0 6px rgba(255,255,255,0.7);
}
.photo-shop{background-image:url('https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?auto=format&fit=crop&w=1200&q=70');}
.photo-team{background-image:url('https://images.unsplash.com/photo-1517524008697-84bbe3c3fd98?auto=format&fit=crop&w=1200&q=70');}

@media (max-width:760px){
  .why-grid{grid-template-columns:1fr;}
  .why-media{order:2;}
}

/* =============================================================
   ABOUT
   ============================================================= */
.about{padding:clamp(3.5rem,7vw,6rem) 0;}
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center;}
.about-copy p{color:var(--navy-800); opacity:.92; font-size:1.02rem; line-height:1.65;}
.about-copy .btn{margin-top:.5rem;}
@media (max-width:760px){
  .about-grid{grid-template-columns:1fr;}
  .about-media{order:-1;}
}

/* =============================================================
   REVIEWS
   ============================================================= */
.reviews{background:var(--navy-950); padding:clamp(3.5rem,7vw,6rem) 0; color:var(--cream-100);}
.reviews .section-title{color:var(--white);}
.review-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1.5rem; margin-top:2.5rem;
}
.review-ticket{
  background:var(--navy-900);
  border:1px dashed rgba(169,196,209,0.35);
  border-radius:var(--radius-sm);
  padding:1.7rem;
  position:relative;
}
.ticket-head{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-mono); font-size:.75rem; color:var(--navy-300);
  margin-bottom:.9rem; letter-spacing:.03em;
}
.stars{color:var(--cream-100); font-size:.95rem; letter-spacing:.1em;}
.review-ticket p{margin:0 0 .8rem; font-size:.97rem; line-height:1.55; opacity:.94;}
.reviewer{font-weight:600; color:var(--cream-100) !important; opacity:1 !important; font-size:.85rem !important;}

/* =============================================================
   FAQ
   ============================================================= */
.faq{padding:clamp(3.5rem,7vw,6rem) 0; background:var(--cream-050);}
.faq-list{max-width:800px; margin:2.5rem auto 0; display:flex; flex-direction:column; gap:1rem;}
.faq-item{
  background:var(--white);
  border:1px solid rgba(14,29,38,0.1);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.faq-question{
  width:100%; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.2rem 1.5rem;
  background:none; border:none; cursor:pointer;
  font-family:var(--font-body); font-weight:600; font-size:1.05rem;
  color:var(--navy-900);
  touch-action:manipulation;
}
.faq-question .faq-icon{
  flex:none; width:24px; height:24px; position:relative;
}
.faq-question .faq-icon::before, .faq-question .faq-icon::after{
  content:''; position:absolute; background:var(--navy-700); border-radius:2px;
  transition:transform .2s ease;
}
.faq-question .faq-icon::before{top:50%; left:0; width:100%; height:2px; margin-top:-1px;}
.faq-question .faq-icon::after{left:50%; top:0; height:100%; width:2px; margin-left:-1px;}
.faq-item.open .faq-icon::after{transform:rotate(90deg); opacity:0;}
.faq-answer{
  max-height:0; overflow:hidden;
  transition:max-height .25s ease;
}
.faq-answer p{
  padding:0 1.5rem 1.3rem; margin:0;
  color:var(--navy-800); font-size:.98rem; line-height:1.6; opacity:.92;
}
.faq-item.open .faq-answer{max-height:300px;}

/* =============================================================
   CTA BANNER
   ============================================================= */
.cta-banner{
  background:linear-gradient(120deg, var(--navy-900), var(--navy-600));
  padding:3.5rem 0; color:var(--white); text-align:center;
}
.cta-banner-inner h2{
  font-family:var(--font-display); font-size:clamp(2rem,4vw,2.6rem);
  margin:0 0 .5rem; letter-spacing:.02em;
}
.cta-banner-inner p{margin:0 0 1.6rem; opacity:.95; font-size:1.05rem;}
.cta-banner .hero-cta{justify-content:center;}

/* =============================================================
   CONTACT
   ============================================================= */
.contact{padding:clamp(3.5rem,7vw,6rem) 0; background:var(--cream-100);}
.contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:3.5rem;}
.info-list{display:flex; flex-direction:column; gap:1.5rem; margin:1.6rem 0 2rem;}
.info-list li{display:flex; flex-direction:column; gap:.25rem;}
.info-list strong{
  font-family:var(--font-mono); text-transform:uppercase; font-size:.72rem;
  letter-spacing:.1em; color:var(--navy-600);
}
.info-list a{color:var(--navy-900); font-weight:600; font-size:1.05rem;}
.info-list a:hover{color:var(--navy-600);}
.hours-table{
  display:grid; grid-template-columns:auto auto; gap:.2rem 1.2rem;
  font-family:var(--font-mono); font-size:.92rem; color:var(--navy-800);
}
.hours-note{
  display:block; margin-top:.4rem; font-size:.84rem;
  color:var(--navy-700); opacity:.8;
}
.map-frame{border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-soft); line-height:0;}

.contact-form-wrap{
  background:var(--white); border-radius:var(--radius-md);
  padding:2.2rem; box-shadow:var(--shadow-soft);
}
.contact-form-wrap h3{font-family:var(--font-display); font-size:1.65rem; margin:0 0 .3rem; color:var(--navy-900);}
.form-sub{color:var(--navy-800); opacity:.85; margin:0 0 1.4rem; font-size:.95rem;}
.form-row{margin-bottom:1.2rem; display:flex; flex-direction:column; gap:.4rem;}
.form-row-split{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
.form-row-split > div{display:flex; flex-direction:column; gap:.4rem;}
label{font-size:.85rem; font-weight:600; color:var(--navy-800);}
input, textarea, select{
  font-family:var(--font-body);
  font-size:16px; /* 16px minimum prevents iOS Safari auto-zoom on focus */
  padding:.8rem .95rem; border-radius:var(--radius-sm);
  border:1.5px solid rgba(14,29,38,0.18); background:var(--cream-050);
  color:var(--ink);
  -webkit-appearance:none; appearance:none;
  width:100%;
}
select{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c5067' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:right .9rem center; background-size:18px;
  padding-right:2.6rem;
}
input:focus, textarea:focus, select:focus{border-color:var(--navy-600);}
.form-success{
  background:#e7f3ea; border:1px solid #bcdcc4; color:#1f5c33;
  padding:1rem 1.1rem; border-radius:var(--radius-sm); font-size:.95rem;
  margin-bottom:1.2rem;
}
@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;}
  .form-row-split{grid-template-columns:1fr;}
}

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer{background:var(--navy-950); color:var(--cream-100); padding:3.5rem 0 1.5rem;}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr repeat(3, 1fr);
  gap:2.5rem;
  padding-bottom:2.2rem; border-bottom:1px solid rgba(169,196,209,0.18);
}
/* logo sits on its own cream plate so its true navy/white artwork
   reads correctly against the dark footer, no filters needed */
.footer-logo-plate{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--cream-050);
  border-radius:var(--radius-md);
  padding:.6rem .8rem;
  margin-bottom:1rem;
}
.footer-mark{height:60px; width:auto;}
.footer-brand p{opacity:.8; font-size:.92rem; max-width:220px; line-height:1.5;}
.footer-col h4{
  font-family:var(--font-mono); text-transform:uppercase; font-size:.78rem;
  letter-spacing:.1em; color:var(--cream-100); margin:0 0 1rem;
}
.footer-col{display:flex; flex-direction:column; gap:.6rem; font-size:.92rem;}
.footer-col a{opacity:.88;}
.footer-col a:hover{color:var(--navy-300); opacity:1;}
.footer-col span{opacity:.78;}
.footer-bottom{padding-top:1.5rem; font-size:.84rem; opacity:.65; text-align:center;}
@media (max-width:860px){
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:1fr;}
}

/* =============================================================
   MOBILE CALL BAR  (fixed, safe-area aware for iPhone home indicator)
   ============================================================= */
.mobile-call-bar{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:200;
  background:var(--navy-800); color:var(--white);
  align-items:center; justify-content:center; gap:.6rem;
  padding:.9rem .9rem calc(.9rem + env(safe-area-inset-bottom, 0px));
  font-weight:700; font-family:var(--font-mono);
  box-shadow:0 -6px 18px rgba(0,0,0,0.2);
  touch-action:manipulation;
}
@media (max-width:640px){
  .mobile-call-bar{display:flex;}
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom, 0px));}
}

/* =============================================================
   SECONDARY / SEO LANDING PAGE
   (shared light styling used by the hidden guide page)
   ============================================================= */
.page-header{background:var(--navy-900); color:var(--white); padding:clamp(2.5rem,6vw,4rem) 0;}
.page-header .container{display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;}
.page-header img{height:56px; width:auto;}
.page-header h1{
  font-family:var(--font-display); font-size:clamp(1.9rem,4vw,2.6rem);
  margin:0; letter-spacing:.02em;
}
.content-article{padding:clamp(3rem,6vw,4.5rem) 0; max-width:820px; margin:0 auto;}
.content-article h2{
  font-family:var(--font-display); color:var(--navy-900); font-size:1.6rem;
  margin:2.2rem 0 .8rem; letter-spacing:.01em;
}
.content-article h2:first-child{margin-top:0;}
.content-article p{color:var(--navy-800); font-size:1.02rem; line-height:1.7; margin:0 0 1.1rem;}
.content-article ul{margin:0 0 1.3rem; padding-left:1.3rem; list-style:disc; color:var(--navy-800);}
.content-article li{margin-bottom:.5rem; line-height:1.6;}
.content-article .back-home{
  display:inline-block; margin-top:1rem;
}

/* =============================================================
   MULTI-PAGE ADDITIONS (nav dropdown, page heroes, coupon, etc.)
   ============================================================= */
.skip-link{position:absolute; left:-999px; top:0; background:var(--white); color:var(--navy-900); padding:.7rem 1rem; z-index:999; border-radius:0 0 8px 0; font-weight:600;}
.skip-link:focus{left:0;}

/* --- Nav dropdown + brake pill --- */
.main-nav{align-items:center;}
.main-nav a[aria-current="page"]{color:var(--navy-600);}
.main-nav a.nav-brakes{background:var(--navy-700); color:var(--white); padding:.5rem 1rem; border-radius:999px;}
.main-nav a.nav-brakes::after{display:none;}
.main-nav a.nav-brakes:hover{background:var(--navy-800);}
.nav-dropdown{position:relative; padding-bottom:.6rem; margin-bottom:-.6rem;}
.dropdown-menu{
  position:absolute; top:100%; left:-1rem; min-width:270px;
  background:var(--white); border:1px solid rgba(14,29,38,0.1);
  border-radius:var(--radius-md); box-shadow:var(--shadow-soft);
  padding:.6rem; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:60;
}
.nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu{opacity:1; visibility:visible; transform:none;}
.dropdown-menu a{display:block; padding:.6rem .8rem; border-radius:8px; font-weight:500;}
.dropdown-menu a::after{display:none;}
.dropdown-menu a:hover{background:var(--cream-100);}
@media (max-width:940px){
  .main-nav{align-items:stretch;}
  .main-nav.open{max-height:calc(100vh - 84px); overflow-y:auto; -webkit-overflow-scrolling:touch;}
  .main-nav a.nav-brakes{margin:1rem 1.5rem; text-align:center; border-top:none; padding:.9rem 1rem;}
  .nav-dropdown{padding:0; margin:0;}
  .dropdown-menu{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; background:var(--cream-100); border-radius:0; padding:0; min-width:0;}
  .dropdown-menu a{padding:.85rem 1.5rem .85rem 2.4rem; border-top:1px solid rgba(14,29,38,0.05); font-size:.93rem; border-radius:0;}
}

/* --- Page hero (inner pages) --- */
.page-hero{background:linear-gradient(120deg,var(--navy-900),var(--navy-700)); color:var(--white); padding:clamp(2.2rem,5vw,4rem) 0 clamp(2.4rem,5vw,3.6rem);}
.crumbs{font-family:var(--font-mono); font-size:.78rem; color:var(--navy-300); margin-bottom:1.1rem; line-height:1.8;}
.crumbs a{text-decoration:underline; text-underline-offset:3px;}
.crumbs a:hover{color:var(--white);}
.crumbs .sep{margin:0 .45rem; opacity:.6;}
.page-hero h1{font-family:var(--font-display); font-size:clamp(2.2rem,5.2vw,3.7rem); line-height:1.06; margin:.2rem 0 1rem; letter-spacing:.01em;}
.page-hero .lead{max-width:700px; font-size:1.15rem; color:var(--cream-100); line-height:1.6; margin-bottom:0;}
.page-hero .hero-cta{margin:1.7rem 0 0;}
.hero-points{display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin-top:1.4rem; font-family:var(--font-mono); font-size:.82rem; color:var(--navy-300);}
.hero-points li::before{content:"\2713\00a0"; color:var(--cream-100);}

/* --- Article layout --- */
.page-layout{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:3rem; padding:clamp(2.5rem,5vw,4rem) 0; align-items:start;}
.prose h2{font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.1rem); color:var(--navy-900); margin:2.4rem 0 .8rem; line-height:1.15; letter-spacing:.01em;}
.prose h2:first-child{margin-top:0;}
.prose h3{font-family:var(--font-display); font-size:1.3rem; color:var(--navy-800); margin:1.6rem 0 .5rem;}
.prose p{color:var(--navy-800); font-size:1.04rem; line-height:1.72; margin:0 0 1.1rem;}
.prose a{color:var(--navy-700); text-decoration:underline; text-underline-offset:3px; font-weight:500;}
.prose a:hover{color:var(--navy-900);}
.prose ul.check{margin:0 0 1.3rem; padding:0; list-style:none;}
.prose ul.check li{position:relative; padding:.35rem 0 .35rem 1.8rem; line-height:1.6; color:var(--navy-800);}
.prose ul.check li::before{content:"\2713"; position:absolute; left:0; top:.35rem; width:1.3rem; height:1.3rem; line-height:1.3rem; text-align:center; background:var(--navy-700); color:var(--white); border-radius:50%; font-size:.75rem;}
.prose ol.steps{counter-reset:s; list-style:none; margin:0 0 1.3rem; padding:0;}
.prose ol.steps li{counter-increment:s; position:relative; padding:.7rem 0 .7rem 3.2rem; line-height:1.6; color:var(--navy-800);}
.prose ol.steps li::before{content:counter(s); position:absolute; left:0; top:.55rem; width:2.2rem; height:2.2rem; line-height:2.2rem; text-align:center; border-radius:50%; background:var(--navy-700); color:var(--white); font-family:var(--font-display); font-size:1.15rem;}
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 1.4rem; border:1px solid rgba(14,29,38,0.1); border-radius:var(--radius-md);}
.prose table{width:100%; border-collapse:collapse; min-width:520px; font-size:.95rem; background:var(--white);}
.prose th{background:var(--navy-700); color:var(--white); text-align:left; padding:.75rem 1rem; font-weight:600;}
.prose td{padding:.75rem 1rem; border-top:1px solid rgba(14,29,38,0.08); color:var(--navy-800); vertical-align:top;}
.prose .faq-list{max-width:none; margin:1.2rem 0 0;}
.faq-item.open .faq-answer{max-height:700px;}
.chips{display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.2rem;}
.chips a, .chips span{background:var(--cream-100); border:1px solid rgba(14,29,38,0.1); padding:.45rem .9rem; border-radius:999px; font-size:.92rem; font-weight:500; color:var(--navy-800); text-decoration:none !important;}
.chips a:hover{background:var(--navy-700); color:var(--white);}

/* --- Sidebar --- */
.side{position:sticky; top:100px; display:flex; flex-direction:column; gap:1.2rem;}
.side-card{background:var(--white); border:1px solid rgba(14,29,38,0.1); border-radius:var(--radius-md); padding:1.5rem; box-shadow:var(--shadow-soft);}
.side-card h3{font-family:var(--font-display); font-size:1.35rem; color:var(--navy-900); margin:0 0 .5rem; letter-spacing:.01em;}
.side-card p{font-size:.95rem; line-height:1.55; color:var(--navy-800); margin:0 0 1rem;}
.side-card.dark{background:var(--navy-900); border:none; color:var(--white);}
.side-card.dark h3{color:var(--white);}
.side-card.dark p{color:var(--cream-100);}
.side-card .btn{width:100%;}
.side-card .btn + .btn{margin-top:.6rem;}
.side-links a{display:block; padding:.6rem 0; border-top:1px solid rgba(14,29,38,0.08); font-weight:500; color:var(--navy-800);}
.side-links a:first-child{border-top:none;}
.side-links a:hover{color:var(--navy-600);}
.side-hours{font-family:var(--font-mono); font-size:.85rem; color:var(--navy-800);}
@media (max-width:940px){
  .page-layout{grid-template-columns:1fr; gap:2rem;}
  .side{position:static;}
}

/* --- Coupon --- */
.coupon{position:relative; border:3px dashed var(--navy-700); background:var(--cream-050); border-radius:var(--radius-md); padding:1.6rem 1.5rem 1.4rem; text-align:center; margin:1.8rem 0;}
.coupon-tag{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--navy-600); font-weight:600;}
.coupon-big{font-family:var(--font-display); font-size:clamp(3rem,8vw,4.2rem); color:var(--navy-700); line-height:1; margin-top:.3rem;}
.coupon h3, .coupon .coupon-title{font-family:var(--font-display); font-size:clamp(1.4rem,3.4vw,1.9rem); color:var(--navy-900); margin:.1rem 0 .2rem; line-height:1.15;}
.coupon-sub{font-size:1rem; color:var(--navy-800); margin:0 0 .4rem;}
.coupon-value{display:inline-block; background:var(--navy-700); color:var(--white); font-family:var(--font-mono); font-size:.8rem; padding:.28rem .8rem; border-radius:999px; margin:.3rem 0 .6rem;}
.coupon-terms{font-size:.8rem; line-height:1.55; color:var(--navy-800); text-align:left; margin:.8rem 0 1.1rem; opacity:.9;}
.coupon-logo{height:52px; width:auto; margin:0 auto .4rem;}
.coupon-actions{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center;}
.coupon.on-dark{box-shadow:0 18px 40px -16px rgba(0,0,0,0.5);}
.coupon.mini{padding:1.2rem; margin:0; border-width:2px;}
.coupon.mini .coupon-big{font-size:2.6rem;}
@media print{
  body.printing-coupon *{visibility:hidden !important;}
  body.printing-coupon .coupon.is-printing, body.printing-coupon .coupon.is-printing *{visibility:visible !important;}
  body.printing-coupon .coupon.is-printing{position:absolute; left:0; top:0; width:100%; margin:0; box-shadow:none;}
  .no-print{display:none !important;}
}

/* --- Home: brake feature band, process, cards --- */
.hero-offer{display:inline-flex; align-items:center; gap:.6rem; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.35); color:var(--white); padding:.5rem 1rem; border-radius:999px; font-size:.9rem; font-weight:600; margin-bottom:1.2rem;}
.hero-offer strong{color:var(--cream-100);}
.brake-feature{background:var(--navy-900); color:var(--white); padding:clamp(3.5rem,7vw,6rem) 0;}
.brake-feature .section-title{color:var(--white);}
.brake-feature .eyebrow{color:var(--navy-300);}
.brake-grid{display:grid; grid-template-columns:1.15fr 1fr; gap:3rem; align-items:center;}
.brake-feature p{color:var(--cream-100); font-size:1.05rem; line-height:1.65;}
.brake-links{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.8rem; margin:1.4rem 0 1.6rem;}
.brake-links a{display:block; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); border-radius:var(--radius-sm); padding:.9rem 1rem; font-weight:600; transition:background .2s ease;}
.brake-links a span{display:block; font-weight:400; font-size:.85rem; color:var(--navy-300); margin-top:.15rem;}
.brake-links a:hover{background:rgba(255,255,255,0.16);}
@media (max-width:860px){ .brake-grid{grid-template-columns:1fr; gap:2rem;} }

a.service-card{display:block; color:inherit;}
.card-link{display:inline-block; margin-top:.9rem; font-weight:600; color:var(--navy-700); font-size:.95rem;}
a.service-card:hover .card-link{text-decoration:underline; text-underline-offset:3px;}
a.service-card.featured{background:var(--navy-700); border-color:var(--navy-700);}
a.service-card.featured h3, a.service-card.featured p, a.service-card.featured .card-link{color:var(--white);}
a.service-card.featured .hex-icon{background:var(--cream-050); color:var(--navy-700);}

.process{padding:clamp(3.5rem,7vw,6rem) 0; background:var(--navy-950); color:var(--cream-100);}
.process .section-title{color:var(--white);}
.process .eyebrow{color:var(--navy-300);}
.process-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.5rem; margin-top:2.5rem;}
.process-step{background:var(--navy-900); border:1px dashed rgba(169,196,209,0.35); border-radius:var(--radius-sm); padding:1.6rem;}
.process-step .num{font-family:var(--font-display); font-size:2.2rem; color:var(--cream-100); line-height:1;}
.process-step h3{font-family:var(--font-display); font-size:1.25rem; margin:.4rem 0 .4rem; color:var(--white);}
.process-step p{margin:0; font-size:.95rem; line-height:1.55; color:var(--navy-300);}

/* --- Booking section on inner pages --- */
.book-section{background:var(--cream-100); padding:clamp(3rem,6vw,5rem) 0;}
.book-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:3rem; align-items:start;}
.book-grid h2{font-family:var(--font-display); font-size:clamp(1.9rem,3.6vw,2.6rem); color:var(--navy-900); margin:0 0 .8rem; line-height:1.1;}
.book-grid p{color:var(--navy-800); font-size:1.03rem; line-height:1.65;}
.book-contact{display:flex; flex-direction:column; gap:.5rem; margin-top:1.2rem; font-weight:600;}
.book-contact a{color:var(--navy-900);}
.book-contact a:hover{color:var(--navy-600);}
@media (max-width:900px){ .book-grid{grid-template-columns:1fr;} }

.hub{padding:clamp(3rem,6vw,5rem) 0;}

/* ===== READABILITY FIXES ===== */
/* Buttons inside prose/coupons were inheriting link colours (navy text on navy button) */
.prose a.btn, .coupon a.btn{text-decoration:none; font-weight:700;}
.prose a.btn-primary, .coupon a.btn-primary, a.btn-primary{color:var(--white);}
.prose a.btn-ghost, .coupon a.btn-ghost, .coupon .btn-ghost{color:var(--navy-700);}
.coupon .btn-ghost:hover, .prose a.btn-ghost:hover{color:var(--white);}
/* Coupon text was picking up cream paragraph colour from the dark brake section */
.coupon, .brake-feature .coupon p, .coupon p{color:var(--ink);}
.coupon .coupon-sub{color:var(--navy-900); font-size:1.05rem;}
.coupon .coupon-tag{color:var(--navy-700);}
.coupon .coupon-terms{color:var(--ink); opacity:1; font-size:.9rem; line-height:1.6;}
.coupon .coupon-value{color:var(--white);}
.brake-feature .coupon .coupon-big{color:var(--navy-700);}
/* Eyebrow labels on dark backgrounds */
.hero .eyebrow, .brake-feature .eyebrow, .process .eyebrow, .page-hero .eyebrow, .site-footer .eyebrow{color:#d3e3ea;}
.eyebrow{color:var(--navy-700);}
/* Slightly stronger small text */
.crumbs{color:#d3e3ea; font-size:.84rem;}
.trust-label{color:#d3e3ea; opacity:1; font-size:.9rem;}
.footer-col a, .footer-col span{opacity:1; color:#e4edf1;}
.footer-brand p{color:#e4edf1;}
.hero p, .hero-badges span{color:#f3efe2;}
/* Darker photo overlay so hero text stays legible over any image */
.hero-bg{background-image:linear-gradient(100deg, rgba(14,29,38,0.96) 15%, rgba(22,48,61,0.86) 55%, rgba(14,29,38,0.95) 100%), url('https://images.unsplash.com/photo-1632823469850-2f77a1e6c1e1?auto=format&fit=crop&w=1800&q=70');}

/* Brake promo bar */
.promo-bar{background:var(--navy-950); text-align:center; padding:.55rem 1rem; font-size:.95rem;}
.promo-bar a{color:var(--white); display:block;}
.promo-bar strong{color:var(--cream-100); font-family:var(--font-mono); letter-spacing:.04em;}
.promo-bar a:hover{text-decoration:underline;}

/* Two-coupon layout */
.coupon-pair{display:grid; gap:1.2rem; margin:1.8rem 0;}
.coupon-pair .coupon{margin:0;}
@media (min-width:820px){ .hub .coupon-pair{grid-template-columns:1fr 1fr;} }

/* Larger, clearer service icons */
.hex-icon svg{width:38px; height:38px;}

.sched-foot{text-align:center; margin:1.4rem auto 0; color:var(--navy-900); font-size:.95rem; max-width:860px;}
.sched-foot a{text-decoration:underline; text-underline-offset:3px;}


/* =============================================================
   APPOINTMENT SCHEDULER (multi-step)
   ============================================================= */
.sched-wrap{padding:clamp(1.5rem,4vw,3rem) 0 clamp(3rem,6vw,5rem); background:var(--cream-100);}
.sched{max-width:860px; margin:0 auto; background:var(--white); border:1px solid rgba(14,29,38,0.14); border-radius:var(--radius-md); box-shadow:var(--shadow-soft); scroll-margin-top:96px;}
.sched-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem clamp(1rem,4vw,2rem); border-bottom:1px solid rgba(14,29,38,0.12); background:var(--cream-050); border-radius:var(--radius-md) var(--radius-md) 0 0;}
.sched-head h2{font-family:var(--font-display); font-size:clamp(1.5rem,4.4vw,2.1rem); margin:0; color:var(--navy-900); letter-spacing:.02em; text-transform:uppercase; line-height:1.1; outline:none;}
.step-count{font-family:var(--font-mono); font-size:.85rem; color:var(--navy-700); font-weight:600; white-space:nowrap;}
.stepper{display:flex; align-items:center; justify-content:center; padding:1.3rem 1rem .3rem; list-style:none; margin:0;}
.stepper li{display:flex; align-items:center;}
.stepper .dot{width:38px; height:38px; border-radius:50%; border:2px solid var(--navy-300); background:var(--white); color:var(--navy-600); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.95rem; flex:none;}
.stepper li.current .dot{border-color:var(--navy-700); color:var(--navy-700); box-shadow:0 0 0 4px rgba(44,80,103,0.16);}
.stepper li.done .dot{background:var(--navy-700); border-color:var(--navy-700); color:var(--white);}
.stepper .line{width:clamp(16px,7vw,64px); border-top:2px dotted var(--navy-300);}
.stepper li.done .line{border-top:2px solid var(--navy-700);}
.sched-body{padding:1rem clamp(1rem,4vw,2rem) 1.6rem;}
.step-title{font-family:var(--font-display); font-size:1.6rem; color:var(--navy-900); margin:.6rem 0 .3rem; letter-spacing:.01em;}
.step-help{color:#13222b; margin:0 0 1.2rem;}
.sub-title{font-family:var(--font-display); font-size:1.35rem; color:var(--navy-900); margin:1.6rem 0 .8rem;}
.opt-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem;}
.opt{position:relative; text-align:left; display:flex; gap:.8rem; align-items:flex-start; padding:1rem 3rem 1rem 1rem; border:2px solid rgba(14,29,38,0.2); border-radius:12px; background:var(--white); cursor:pointer; min-height:88px; font:inherit; color:var(--navy-900); touch-action:manipulation; transition:border-color .15s ease, background .15s ease;}
.opt:hover{border-color:var(--navy-500);}
.opt[aria-checked="true"]{border-color:var(--navy-700); background:#e9f1f5;}
.opt .oi{flex:none; width:34px; height:34px; color:var(--navy-700);}
.opt .ot strong{display:block; font-size:1.08rem; line-height:1.25;}
.opt .ot small{display:block; color:var(--navy-700); font-size:.9rem; line-height:1.35; margin-top:.2rem;}
.opt .ck{position:absolute; right:.9rem; top:.9rem; width:24px; height:24px; border:2px solid var(--navy-500); border-radius:6px; background:var(--white);}
.opt[aria-checked="true"] .ck{background:var(--navy-700); border-color:var(--navy-700);}
.opt[aria-checked="true"] .ck::after{content:""; position:absolute; left:7px; top:2px; width:6px; height:12px; border:solid var(--white); border-width:0 3px 3px 0; transform:rotate(45deg);}
@media (max-width:620px){ .opt-grid{grid-template-columns:1fr;} }
.field{margin-bottom:1.1rem; display:flex; flex-direction:column; gap:.4rem;}
.field-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0 1rem;}
.req{color:#8a1f1f;}
.chip-group{display:flex; flex-wrap:wrap; gap:.5rem;}
.chip{padding:.55rem 1rem; min-height:44px; border:2px solid rgba(14,29,38,0.25); border-radius:999px; background:var(--white); font:inherit; font-weight:500; color:var(--navy-900); cursor:pointer; touch-action:manipulation;}
.chip:hover{border-color:var(--navy-500);}
.chip[aria-pressed="true"]{background:var(--navy-700); border-color:var(--navy-700); color:var(--white);}
.sym-group{margin:1.2rem 0;}
.sym-group h4{margin:0 0 .5rem; font-size:1rem; color:var(--navy-900);}
.date-strip{display:grid; grid-auto-flow:column; grid-auto-columns:78px; gap:.5rem; overflow-x:auto; padding:.2rem .1rem .7rem; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;}
.date-btn{scroll-snap-align:start; display:flex; flex-direction:column; align-items:center; padding:.6rem .3rem; border:2px solid rgba(14,29,38,0.25); border-radius:12px; background:var(--white); font:inherit; cursor:pointer; min-height:84px; color:var(--navy-900); touch-action:manipulation;}
.date-btn .dw{font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--navy-700);}
.date-btn .dn{font-family:var(--font-display); font-size:1.8rem; line-height:1.1;}
.date-btn .dm{font-size:.8rem;}
.date-btn[aria-pressed="true"]{background:var(--navy-700); border-color:var(--navy-700); color:var(--white);}
.date-btn[aria-pressed="true"] .dw{color:var(--cream-100);}
.date-btn[disabled]{opacity:.4; cursor:not-allowed;}
.time-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:.5rem;}
.time-btn{padding:.7rem .4rem; min-height:46px; border:2px solid rgba(14,29,38,0.25); border-radius:10px; background:var(--white); font:inherit; font-weight:600; color:var(--navy-900); cursor:pointer; touch-action:manipulation;}
.time-btn[aria-pressed="true"]{background:var(--navy-700); border-color:var(--navy-700); color:var(--white);}
.muted{color:var(--navy-700); font-size:.95rem;}
.check-line{display:flex; gap:.7rem; align-items:flex-start; padding:.7rem .8rem; border:1.5px solid rgba(14,29,38,0.2); border-radius:10px; margin-bottom:.5rem; cursor:pointer; font-weight:500; color:var(--navy-900);}
.check-line input{width:22px; height:22px; margin:.1rem 0 0; flex:none; -webkit-appearance:auto; appearance:auto; accent-color:var(--navy-700);}
.review-group{border:1px solid rgba(14,29,38,0.15); border-radius:12px; padding:1rem 1.1rem; margin-bottom:.8rem; display:flex; justify-content:space-between; gap:1rem; align-items:flex-start;}
.review-group h4{margin:0 0 .3rem; font-family:var(--font-mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--navy-700);}
.review-group p{margin:0; line-height:1.5; color:#13222b;}
.link-btn{background:none; border:none; color:var(--navy-700); font:inherit; font-weight:700; text-decoration:underline; cursor:pointer; padding:.4rem; min-height:44px; touch-action:manipulation;}
.sched-nav{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem clamp(1rem,4vw,2rem) calc(1rem + env(safe-area-inset-bottom,0px)); border-top:1px solid rgba(14,29,38,0.12); background:var(--cream-050); position:sticky; bottom:0; border-radius:0 0 var(--radius-md) var(--radius-md); z-index:5;}
.sched-nav .btn[disabled]{background:#d5e1e7; color:#566d7a; border-color:#d5e1e7; cursor:not-allowed; transform:none; box-shadow:none;}
.step-hint{margin:0; font-size:.9rem; color:#8a1f1f; font-weight:600; flex:1; text-align:center;}
@media (max-width:520px){ .step-hint{display:none;} }
.sched-alert{border:1px solid #d9a3a3; background:#fbeeee; color:#6e1a1a; padding:.9rem 1rem; border-radius:10px; margin-bottom:1rem; font-weight:500;}
.sched-alert a{text-decoration:underline; font-weight:700;}
.sched-done{text-align:center; padding:2rem clamp(1rem,4vw,2rem) 2.4rem;}
.sched-done .big-check{width:72px; height:72px; border-radius:50%; background:var(--navy-700); color:var(--white); display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; font-size:2.2rem;}
.sched-done h3{font-family:var(--font-display); font-size:2.2rem; color:var(--navy-900); margin:0 0 .5rem;}
.sched-done .review-group{text-align:left;}
.sched-done .done-actions{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:1.4rem;}


.field[hidden]{display:none;}
.sched-cta .btn{margin-top:.4rem;}
.sched-cta .cta-points{margin:0 0 1.1rem; padding:0; list-style:none;}
.sched-cta .cta-points li{padding:.25rem 0 .25rem 1.6rem; position:relative; color:var(--navy-900);}
.sched-cta .cta-points li::before{content:"\2713"; position:absolute; left:0; color:var(--navy-700); font-weight:700;}

/* Veteran / teacher / healthcare discount */
.promo-bar{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.2rem .9rem;}
.promo-bar .promo-sep{color:var(--navy-300);}
.perk-badge{flex:none; width:96px; height:96px; border-radius:50%; background:var(--navy-700); color:var(--white); display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:var(--font-display); font-size:2.3rem; line-height:.9; box-shadow:0 0 0 5px rgba(44,80,103,0.18);}
.perk-badge small{font-size:1.05rem; letter-spacing:.08em;}
.perk-card{display:flex; gap:1.6rem; align-items:center; background:var(--white); border:2px solid var(--navy-700); border-radius:var(--radius-md); padding:1.6rem 1.8rem; margin:1.8rem 0; box-shadow:var(--shadow-soft); scroll-margin-top:110px;}
.perk-card h2{font-family:var(--font-display); font-size:clamp(1.6rem,3.4vw,2.1rem); color:var(--navy-900); margin:.2rem 0 .5rem; line-height:1.1;}
.perk-card p{color:#13222b; margin:0 0 .9rem; line-height:1.6;}
.perk-card .coupon-tag{color:var(--navy-700); margin:0;}
.perk-who{display:flex; flex-wrap:wrap; gap:.5rem;}
.perk-who span{background:#e9f1f5; color:var(--navy-900); border:1px solid var(--navy-300); border-radius:999px; padding:.3rem .85rem; font-weight:600; font-size:.92rem;}
@media (max-width:640px){ .perk-card{flex-direction:column; text-align:center; padding:1.4rem 1.2rem;} .perk-who{justify-content:center;} }
.perk-band{background:var(--navy-700); color:var(--white); padding:1.4rem 0;}
.perk-band-inner{display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap;}
.perk-band .perk-badge{width:72px; height:72px; font-size:1.7rem; background:var(--cream-050); color:var(--navy-700); box-shadow:none;}
.perk-band .perk-badge small{font-size:.8rem;}
.perk-band .perk-copy{flex:1; min-width:240px;}
.perk-band h2{font-family:var(--font-display); font-size:clamp(1.4rem,3vw,1.9rem); margin:0 0 .2rem; color:var(--white); line-height:1.1;}
.perk-band p{margin:0; color:var(--cream-100);}
.footer-perk{margin-top:.6rem;}
.footer-perk a{color:var(--cream-100); text-decoration:underline; text-underline-offset:3px;}

/* ===== FIXED-SIZE SCHEDULER: card fits the screen; only the middle scrolls ===== */
.page-schedule .promo-bar, .page-schedule .mobile-call-bar{display:none;}
.page-schedule .page-hero{padding:1rem 0 1.1rem;}
.page-schedule .crumbs{display:none;}
.page-schedule .page-hero h1{font-size:clamp(1.7rem,3.6vw,2.4rem); margin:0 0 .3rem;}
.page-schedule .page-hero .lead{font-size:1rem; margin:0;}
.page-schedule .sched-wrap{padding:1rem 0 1.4rem;}
.sched{display:flex; flex-direction:column; height:calc(100vh - 140px); height:calc(100dvh - 140px); min-height:500px; max-height:780px; scroll-margin-top:96px; overflow:hidden;}
.sched-head, .stepper, .sched-nav{flex:none;}
.sched-head{padding:.8rem clamp(1rem,4vw,2rem);}
.stepper{padding:.8rem 1rem .2rem;}
.stepper .dot{width:34px; height:34px; font-size:.9rem;}
.sched-body{flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding-bottom:1.2rem;
  background:
    linear-gradient(#fff 30%, rgba(255,255,255,0)) top / 100% 40px no-repeat local,
    linear-gradient(rgba(255,255,255,0), #fff 70%) bottom / 100% 40px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(14,29,38,.2), rgba(14,29,38,0)) top / 100% 12px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(14,29,38,.2), rgba(14,29,38,0)) bottom / 100% 12px no-repeat scroll,
    #fff;}
.sched-nav{position:static; padding-top:.8rem; padding-bottom:calc(.8rem + env(safe-area-inset-bottom,0px));}
.sched-done{flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.sched > .sched-body:only-child{flex:none;}
@media (max-height:760px){
  .step-title{font-size:1.4rem; margin-top:.2rem;}
  .step-help{margin-bottom:.8rem;}
  .opt{min-height:74px; padding-top:.75rem; padding-bottom:.75rem;}
  .sub-title{margin:1.1rem 0 .6rem;}
}
@media (max-width:700px){
  .page-schedule .page-hero{padding:.7rem 0 .8rem;}
  .page-schedule .page-hero .lead{display:none;}
  .page-schedule .page-hero h1{font-size:1.55rem; margin:0;}
  .page-schedule .sched-wrap{padding:.6rem 0 .8rem;}
  .page-schedule .sched-wrap .container{padding-left:.6rem; padding-right:.6rem;}
  .sched{height:calc(100vh - 96px); height:calc(100dvh - 96px); min-height:460px; max-height:none; border-radius:12px;}
  .sched-head{border-radius:12px 12px 0 0; padding:.65rem 1rem;}
  .sched-head h2{font-size:1.35rem;}
  .stepper{padding:.6rem .5rem .1rem;}
  .stepper .dot{width:30px; height:30px; font-size:.82rem;}
  .sched-body{padding-left:1rem; padding-right:1rem;}
  .sched-nav{border-radius:0 0 12px 12px; padding-left:1rem; padding-right:1rem;}
  .sched-nav .btn-lg{padding:.8rem 1.4rem; font-size:1rem;}
  .sched-foot{font-size:.85rem; padding:0 .8rem;}
}
@media (max-height:520px) and (orientation:landscape){
  .sched{height:auto; max-height:none; min-height:0; overflow:visible;}
  .sched-body{overflow:visible;}
}