/* Poppins only — the text face used throughout the brand guide and the A3 price list.
     Loaded via <link> in the head above, not @import, so it doesn't block rendering. */

  :root{
    /* Brand palette — FRESH N' CLEAN branding guide */
    --blue:#007aff;        /* Pantone 2925 C */
    --gold:#ffce00;        /* Pantone 116 C */
    --ink:#000000;         /* Pantone BLACK */
    /* One flat brand blue everywhere — no darker/lighter variants */
    --blue-deep:#007aff;
    --blue-light:#007aff;
    --gold-soft:#ffeeab;
    --ink-soft:#5b6270;
    --bg:#f6f8fb;
    --white:#ffffff;
    --radius:18px;
    --shadow: 0 20px 40px -14px rgba(0,90,180,0.25);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    color:var(--ink);
    background:var(--bg);
    line-height:1.6;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{font-family:'Poppins', sans-serif; font-weight:700; letter-spacing:-0.02em;}
  a{text-decoration:none; color:inherit;}
  img{max-width:100%; display:block;}
  .container{max-width:1180px; margin:0 auto; padding:0 24px;}
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--gold-soft); color:var(--blue-deep);
    font-weight:700; font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
    padding:7px 16px; border-radius:999px; margin-bottom:16px;
  }
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:15px 30px; border-radius:12px; font-weight:700; font-size:15.5px;
    cursor:pointer; border:none; transition:transform .18s ease, box-shadow .18s ease;
    white-space:nowrap;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--gold); color:var(--ink); box-shadow:0 10px 24px -8px rgba(255,206,0,0.6);}
  .btn-outline{background:rgba(255,255,255,0.08); color:var(--white); border:1.5px solid rgba(255,255,255,0.55);}
  .btn-outline-dark{background:transparent; color:var(--blue); border:1.5px solid var(--blue);}
  .btn-dark{background:var(--blue-deep); color:var(--white);}
  .btn svg{width:19px; height:19px; flex-shrink:0;}

  /* placeholder photo blocks */
  .photo-slot{
    position:relative; border-radius:var(--radius); overflow:hidden;
    background:
      repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 18px, rgba(255,255,255,0.11) 18px 36px),
      linear-gradient(135deg, var(--blue-deep), var(--blue) 55%, var(--blue-light));
    display:flex; align-items:center; justify-content:center; flex-direction:column;
    color:rgba(255,255,255,0.92); text-align:center; gap:10px;
    border:2px dashed rgba(255,255,255,0.45);
  }
  .photo-slot .icn{font-size:34px;}
  .photo-slot .lbl{font-family:'Poppins',sans-serif; font-weight:600; font-size:13.5px; letter-spacing:0.02em; padding:0 18px;}
  .photo-slot .sub{font-size:11.5px; opacity:0.75; padding:0 18px;}
  .photo-slot.filled{background:none; border:none; padding:0;}
  .photo-slot.filled img{width:100%; height:100%; object-fit:cover; object-position:center;}
  .photo-slot.filled .cap{
    position:absolute; left:0; right:0; bottom:0; padding:16px 18px 14px;
    background:linear-gradient(to top, rgba(0,0,0,0.75), transparent);
    color:var(--white); font-family:'Poppins',sans-serif; font-weight:600; font-size:13.5px;
    text-align:left;
  }

  /* ---------- HEADER ---------- */
  header{
    position:sticky; top:0; z-index:100;
    background:rgba(255,255,255,0.92); backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(0,90,180,0.08);
  }
  /* The three header children (logo / CTA / burger) must never shrink into each
     other -- flex-shrink:0 on all of them plus a gap means the worst case is a
     clipped edge, not the logo sliding under the Order Online button. */
  .nav-wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:14px; padding:14px 24px;}
  .logo{display:flex; align-items:center; flex:0 0 auto;}
  .logo img{height:44px; width:auto; display:block;}
  @media(max-width:560px){.logo img{height:34px;}}
  /* Phones: at 375px the full-size logo + full-size Order Online button + burger
     need ~354px of a 327px track, so the logo used to end up under the button.
     Tighten the rail padding, drop the logo a little further and give the header
     button compact padding -- everything fits down to 320px with room to spare,
     and the Order Online CTA stays in the header (the bottom .mobile-bar only
     offers Call and Directions, so hiding it would lose the ordering entry point). */
  @media(max-width:480px){
    .nav-wrap{padding:12px 16px; gap:10px;}
    .logo img{height:30px;}
    .nav-cta{gap:10px;}
    .nav-cta .btn{padding:9px 14px; font-size:13.5px; border-radius:10px;}
    .burger{font-size:24px;}
  }
  nav ul{list-style:none; display:flex; gap:30px;}
  nav a{font-weight:600; font-size:14.5px; color:var(--ink); opacity:0.8; transition:opacity .15s;}
  nav a:hover{opacity:1; color:var(--blue);}
  .nav-cta{display:flex; align-items:center; flex:0 0 auto; gap:14px;}
  .nav-phone{font-weight:700; font-size:14px; color:var(--blue-deep); display:flex; align-items:center; gap:6px;}
  .burger{display:none; flex:0 0 auto; font-family:inherit; font-size:26px; background:none; border:none; cursor:pointer; color:var(--blue-deep);}

  @media(max-width:900px){
    nav{display:none;}
    .nav-phone{display:none;}
    .burger{display:block;}
    .nav-wrap{position:relative;}
    .nav-wrap.nav-open nav{
      display:block; position:absolute; top:100%; left:0; right:0;
      background:var(--white); box-shadow:0 16px 30px -10px rgba(0,90,180,0.18);
      border-top:1px solid rgba(0,90,180,0.08); padding:8px 24px 16px;
    }
    .nav-wrap.nav-open nav ul{flex-direction:column; gap:2px;}
    .nav-wrap.nav-open nav ul li a{display:block; padding:12px 6px; border-bottom:1px solid rgba(0,90,180,0.06);}
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative; background:linear-gradient(160deg, var(--blue-deep), var(--blue) 65%, var(--blue-light));
    padding:74px 0 90px; overflow:hidden;
  }
  .hero::before{
    content:''; position:absolute; width:520px; height:520px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,206,0,0.35), transparent 70%);
    top:-220px; right:-160px;
  }
  .hero-grid{
    display:grid; grid-template-columns:1.16fr 0.84fr; gap:48px; align-items:center;
    position:relative; z-index:2;
  }
  .hero h1{font-size:47px; color:var(--white); line-height:1.12; margin-bottom:20px;}
  .hero h1 em{font-style:normal; color:var(--gold);}
  .hero p.lead{color:rgba(255,255,255,0.86); font-size:17px; max-width:480px; margin-bottom:32px;}
  /* tightened so all three fit one row inside the hero column on desktop */
  .hero-actions{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:38px;}
  .hero-actions .btn{padding:15px 22px; font-size:15px;}
  .hero-stats{display:flex; gap:34px; flex-wrap:wrap;}
  .hero-stats .stat b{display:block; font-family:'Poppins',sans-serif; font-size:24px; color:var(--gold); font-weight:800;}
  .hero-stats .stat span{font-size:12.5px; color:rgba(255,255,255,0.75); font-weight:600; letter-spacing:0.02em;}
  .hero-photo .photo-slot{height:420px;}

  @media(max-width:900px){
    .hero-grid{grid-template-columns:1fr;}
    .hero h1{font-size:34px;}
    .hero-photo .photo-slot{height:280px;}
  }

  /* ---------- TRUST BAR ---------- */
  .trust{
    background:var(--white); margin-top:-40px; position:relative; z-index:5;
    border-radius:20px; box-shadow:var(--shadow);
    max-width:1180px; margin-left:auto; margin-right:auto;
    display:grid; grid-template-columns:repeat(4,1fr);
  }
  .trust-item{
    padding:26px 20px; text-align:center; border-right:1px solid #eef0f8;
    display:flex; flex-direction:column; align-items:center; gap:6px;
  }
  .trust-item:last-child{border-right:none;}
  .trust-item .icn{font-size:26px;}
  .trust-item b{font-family:'Poppins',sans-serif; font-size:14px; color:var(--ink);}
  .trust-item span{font-size:12px; color:var(--ink-soft);}
  @media(max-width:800px){
    .trust{grid-template-columns:repeat(2,1fr); margin-top:0; border-radius:0; box-shadow:none;}
    .trust-item{border-bottom:1px solid #eef0f8;}
  }

  /* ---------- SECTION GENERIC ---------- */
  section{padding:88px 0;}
  .section-head{text-align:center; max-width:640px; margin:0 auto 52px;}
  .section-head h2{font-size:34px; color:var(--ink); margin-bottom:14px;}
  .section-head p{color:var(--ink-soft); font-size:16px;}

  /* ---------- SERVICES ---------- */
  .services-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
  .svc-card{
    background:var(--white); border-radius:var(--radius); padding:30px 24px;
    box-shadow:0 10px 30px -18px rgba(0,90,180,0.18); border:1px solid #eef0f8;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .svc-card:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
  .svc-icon{
    width:54px; height:54px; border-radius:14px; background:linear-gradient(135deg,var(--blue),var(--blue-light));
    display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:18px; color:var(--white);
  }
  .svc-card h3{font-size:18px; margin-bottom:8px;}
  .svc-card p{font-size:14px; color:var(--ink-soft);}
  @media(max-width:900px){.services-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:560px){.services-grid{grid-template-columns:1fr;}}

  /* ---------- PRICING ---------- */
  .pricing{background:linear-gradient(180deg, var(--bg), #eaeefb);}
  .price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch;}
  .price-card{
    background:var(--white); border-radius:var(--radius); padding:32px 26px;
    border:1px solid #e6eaf7; box-shadow:0 10px 30px -18px rgba(0,90,180,0.18);
    display:flex; flex-direction:column; position:relative;
  }
  .price-card.featured{border:2px solid var(--gold); box-shadow:0 22px 44px -20px rgba(255,206,0,0.55);}
  .price-badge{
    position:absolute; top:-13px; left:50%; transform:translateX(-50%);
    background:var(--gold); color:var(--blue-deep); font-family:'Poppins',sans-serif;
    font-size:11.5px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
    padding:5px 15px; border-radius:999px; white-space:nowrap;
  }
  .price-card h3{font-size:18px; margin-bottom:4px;}
  .price-card .blurb{font-size:13.5px; color:var(--ink-soft);}
  .price-tag{display:flex; align-items:baseline; gap:7px; margin:16px 0 4px; font-family:'Poppins',sans-serif;}
  .price-tag .amt{font-size:38px; font-weight:800; color:var(--blue); line-height:1;}
  .price-tag .unit{font-size:15px; font-weight:600; color:var(--ink-soft);}
  .price-tag.ask .amt{font-size:24px;}
  .price-min{font-size:13px; color:var(--ink-soft); margin-bottom:20px; min-height:19px;}
  .price-feats{list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:26px; flex:1;}
  .price-feats li{font-size:14px; color:var(--ink-soft); display:flex; gap:10px; align-items:flex-start;}
  .price-feats li::before{content:'✓'; color:var(--blue); font-weight:800; flex-shrink:0;}
  .price-card .btn{width:100%;}
  .price-note{
    text-align:center; margin:34px auto 0; max-width:660px;
    font-size:14px; color:var(--ink-soft);
  }
  /* per-item price list (mirrors the printed A3 sign) */
  .pricelist{margin-top:60px;}
  .pricelist h3{text-align:center; font-size:27px; margin-bottom:8px; color:var(--blue);}
  .pricelist .pl-sub{text-align:center; color:var(--ink-soft); font-size:15px; margin-bottom:30px;}
  .pl-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(276px,1fr)); gap:20px;}
  .pl-group{
    background:var(--white); border-radius:14px; overflow:hidden;
    border:1px solid #e6eaf7; box-shadow:0 10px 30px -18px rgba(0,90,180,0.18);
  }
  .pl-head{
    background:var(--gold); color:var(--ink); font-family:'Poppins',sans-serif;
    font-weight:800; font-size:14.5px; text-transform:uppercase; letter-spacing:0.03em;
    text-align:center; padding:11px 14px;
  }
  .pl-group ul{list-style:none; padding:14px 20px 16px;}
  .pl-group li{
    display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:8px 0;
  }
  .pl-group li + li{border-top:1px solid #f1f3f9;}
  /* label and price both Poppins Bold in black, "/ unit" in Medium — as printed on the A3 */
  .pl-group li span{
    color:var(--ink); font-weight:700; font-size:14px;
    text-transform:uppercase; letter-spacing:0.03em;
  }
  .pl-group li b{color:var(--ink); font-weight:700; font-size:15.5px; white-space:nowrap;}
  .pl-group li b em{font-style:normal; font-weight:500;}
  @media(max-width:900px){.price-grid{grid-template-columns:1fr; gap:30px;}}

  /* ---------- WHY US ---------- */
  .why{background:var(--white);}
  .why-grid{display:grid; grid-template-columns:0.95fr 1.05fr; gap:60px; align-items:center;}
  .why-photo .photo-slot{height:420px;}
  .why-list{display:flex; flex-direction:column; gap:20px; margin-top:26px;}
  .why-item{display:flex; gap:16px; align-items:flex-start;}
  .why-item .check{
    width:30px; height:30px; border-radius:50%; background:var(--gold-soft); color:var(--blue-deep);
    display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; font-size:15px;
  }
  .why-item h4{font-size:16px; margin-bottom:3px;}
  .why-item p{font-size:14px; color:var(--ink-soft);}
  @media(max-width:900px){.why-grid{grid-template-columns:1fr;} .why-photo .photo-slot{height:280px;}}

  /* ---------- BANNER ---------- */
  .banner{
    background:linear-gradient(120deg, var(--blue-deep), var(--blue));
    text-align:center; padding:70px 24px; position:relative; overflow:hidden;
  }
  .banner::before{
    content:''; position:absolute; inset:0;
    background:repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 24px, transparent 24px 48px);
  }
  .banner h2{color:var(--white); font-size:32px; position:relative; z-index:2; margin-bottom:8px;}
  .banner span{color:var(--gold);}
  .banner p{color:rgba(255,255,255,0.8); position:relative; z-index:2; font-size:15px;}

  /* ---------- GALLERY ---------- */
  /* The hero slot is pinned to the storefront photo's own 756x850 ratio so the
     shopfront is never cropped into a strip. The side column takes its height
     from the hero and splits it, which keeps every gutter equal at any width. */
  .gallery-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  /* Both columns are 1fr, so sharing one ratio makes the side column exactly as
     tall as the hero and gives its two rows a definite height to divide. */
  .gallery-hero, .gallery-side{aspect-ratio:756/850;}
  .gallery-side{
    display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
    gap:16px; min-height:0;
  }
  .gallery-side .photo-slot{min-height:0;}
  .gallery-side .photo-slot:nth-child(3){grid-column:span 2;}
  @media(max-width:800px){
    .gallery-grid{grid-template-columns:1fr;}
    .gallery-hero{aspect-ratio:1;}
    .gallery-side{aspect-ratio:auto; grid-template-rows:auto auto;}
    .gallery-side .photo-slot:nth-child(1),
    .gallery-side .photo-slot:nth-child(2){aspect-ratio:1;}
    .gallery-side .photo-slot:nth-child(3){aspect-ratio:2;}
  }

  /* ---------- LOCATION ---------- */
  .location{background:var(--white);}
  .loc-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:stretch;}
  .loc-card{
    background:var(--bg); border-radius:var(--radius); padding:36px; border:1px solid #eef0f8;
  }
  .loc-row{display:flex; gap:16px; align-items:flex-start; margin-bottom:22px;}
  .loc-row:last-child{margin-bottom:0;}
  .loc-row .icn{
    width:42px; height:42px; border-radius:11px; background:var(--blue); color:var(--white);
    display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;
  }
  .loc-row h4{font-size:15px; margin-bottom:3px;}
  .loc-row p, .loc-row a{font-size:14.5px; color:var(--ink-soft);}
  .hours-note{
    background:var(--gold-soft); border-radius:10px;
    padding:10px 14px; font-size:14.5px; color:var(--blue-deep); font-weight:600; margin-top:2px; display:inline-block;
  }
  .map-slot{border-radius:var(--radius); overflow:hidden; min-height:100%; background:var(--bg); border:1px solid #eef0f8;}
  .map-slot iframe{width:100%; height:100%; min-height:420px; border:0; display:block;}
  @media(max-width:900px){.loc-grid{grid-template-columns:1fr;} .map-slot iframe{min-height:300px;}}

  /* ---------- FAQ ---------- */
  .faq{background:var(--bg);}
  .faq-list{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
  .faq-item{
    background:var(--white); border:1px solid #e6eaf7; border-radius:14px;
    box-shadow:0 10px 30px -18px rgba(0,90,180,0.18); overflow:hidden;
  }
  .faq-item summary{
    cursor:pointer; list-style:none; padding:20px 24px;
    font-family:'Poppins',sans-serif; font-weight:600; font-size:16px; color:var(--ink);
    display:flex; justify-content:space-between; align-items:center; gap:16px;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{content:'+'; font-size:22px; font-weight:700; color:var(--blue); flex-shrink:0;}
  .faq-item[open] summary::after{content:'\2212';}
  .faq-item summary:hover{color:var(--blue);}
  .faq-item summary:focus-visible{outline:2px solid var(--blue); outline-offset:-2px;}
  .faq-a{padding:0 24px 20px; font-size:15px; color:var(--ink-soft);}
  .faq-a a{color:var(--blue); font-weight:600;}
  @media(max-width:560px){
    .faq-item summary{font-size:15px; padding:17px 18px;}
    .faq-a{padding:0 18px 18px; font-size:14.5px;}
  }

  /* ---------- FINAL CTA ---------- */
  .final-cta{
    background:var(--gold); text-align:center; padding:60px 24px; border-radius:28px;
    max-width:1100px; margin:0 auto 0; box-shadow:0 30px 60px -24px rgba(255,206,0,0.5);
  }
  .final-cta h2{color:var(--ink); font-size:30px; margin-bottom:10px;}
  .final-cta p{color:#5c4a00; margin-bottom:26px; font-size:15px;}
  .final-cta .btn-primary{background:var(--blue-deep); color:var(--white); box-shadow:0 10px 24px -8px rgba(0,90,180,0.5);}

  /* ---------- FOOTER ---------- */
  footer{background:var(--ink); color:rgba(255,255,255,0.7); padding:64px 0 26px; margin-top:90px;}
  .foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; margin-bottom:46px;}
  .foot-logo .logo img{height:52px;}
  .foot-logo p{font-size:13.5px; margin-top:14px; color:rgba(255,255,255,0.55); max-width:260px;}
  .foot-col h5{color:var(--white); font-family:'Poppins',sans-serif; font-size:14.5px; margin-bottom:16px;}
  .foot-col ul{list-style:none; display:flex; flex-direction:column; gap:10px;}
  .foot-col a{font-size:13.5px; color:rgba(255,255,255,0.6); transition:color .15s;}
  .foot-col a:hover{color:var(--gold);}
  .social-row{display:flex; gap:10px; margin-top:16px;}
  .social-row a{
    width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.08);
    display:flex; align-items:center; justify-content:center; font-size:16px;
  }
  .social-row a:hover{background:var(--gold); color:var(--blue-deep);}
  .foot-bottom{
    border-top:1px solid rgba(255,255,255,0.1); padding-top:22px; font-size:12.5px;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:rgba(255,255,255,0.45);
  }
  @media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr;}}

  .note-flag{
    position:fixed; bottom:18px; right:18px; background:var(--ink); color:var(--white);
    font-size:12px; padding:10px 16px; border-radius:10px; opacity:0.85; max-width:230px; z-index:200;
    box-shadow:0 10px 24px rgba(0,0,0,0.25); font-family:'Poppins',sans-serif;
  }


/* ---------- SERVICE-AREA PAGES ---------- */
/* Breadcrumb strip, sits directly under the sticky header */
.crumb{background:var(--white); border-bottom:1px solid rgba(0,90,180,0.08); padding:11px 0; font-size:13px;}
.crumb .container{display:flex; align-items:center; gap:9px; flex-wrap:wrap; color:var(--ink-soft);}
.crumb a{color:var(--blue); font-weight:600;}
.crumb a:hover{text-decoration:underline;}
.crumb span[aria-current]{color:var(--ink-soft);}

/* Hero without the photo column -- copy runs full width instead */
.city-hero{padding:64px 0 78px;}
.city-hero h1{font-size:44px; max-width:900px;}
.city-hero p.lead{max-width:680px;}
.city-hero .hero-stats{margin-top:4px;}


/* ---------- MOBILE ACTION BAR ---------- */
/* Call and Directions pinned to the bottom of the phone screen, so the two
   things a walk-in customer wants are always one tap away. Desktop keeps the
   header and the contact card instead -- no bar there. */
.mobile-bar{display:none;}
@media(max-width:800px){
  .mobile-bar{
    display:flex; gap:9px; position:fixed; left:0; right:0; bottom:0; z-index:150;
    background:var(--white); border-top:1px solid rgba(0,90,180,0.10);
    padding:9px 12px calc(9px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 18px -10px rgba(0,90,180,0.35);
  }
  .mobile-bar a{
    flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
    border-radius:11px; padding:13px 0;
    font-family:'Poppins',sans-serif; font-size:14.5px; font-weight:600;
  }
  .mobile-bar .mb-call{background:var(--blue); color:var(--white);}
  .mobile-bar .mb-dir{background:var(--gold); color:var(--ink);}
  /* Keep the bar from sitting on top of the last footer line */
  footer{padding-bottom:96px;}
}
@media(max-width:900px){.city-hero h1{font-size:32px;}}

.steps-3{grid-template-columns:repeat(3,1fr);}
.steps-3 .svc-icon{font-family:'Poppins',sans-serif; font-weight:800; font-size:22px;}
@media(max-width:900px){.steps-3{grid-template-columns:1fr;}}

.price-grid-2{grid-template-columns:repeat(2,1fr); max-width:860px; margin:0 auto;}
@media(max-width:900px){.price-grid-2{grid-template-columns:1fr;}}
.price-feats-tight li::before{content:'\2022';}

/* "Also serving" link grid */
.areas{background:var(--white);}
.city-links{
  list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px; max-width:900px; margin:0 auto;
}
.city-links a{
  display:block; background:var(--bg); border:1px solid #e6eaf7; border-radius:12px;
  padding:15px 18px; font-weight:600; font-size:14.5px; color:var(--ink);
  transition:transform .18s ease, border-color .18s ease, color .18s ease;
}
.city-links a:hover{transform:translateY(-2px); border-color:var(--blue); color:var(--blue);}

/* Homepage service-area block */
.foot-col ul li a.area-link{color:rgba(255,255,255,0.6);}


/* ---------- WEEKLY PRIZE WHEEL PROMO (homepage only) ---------- */
/* The gold card sits INSIDE .container so it keeps the site's side gutters;
   making it the container itself made it bleed to the screen edge on phones. */
.wheel-promo{margin:52px 0 0;}
.wheel-promo-inner{
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  background:linear-gradient(120deg,var(--gold) 0%,var(--gold-soft) 100%);
  border-radius:var(--radius); padding:30px 34px;
  box-shadow:0 20px 40px -18px rgba(0,90,180,0.28);
}
.wheel-promo-copy{flex:1 1 420px; min-width:0;}
.wp-badge{
  display:inline-block; background:var(--ink); color:var(--gold);
  font-family:'Poppins',sans-serif; font-weight:700; font-size:12px;
  letter-spacing:0.09em; text-transform:uppercase;
  padding:6px 13px; border-radius:999px; margin-bottom:12px;
}
.wheel-promo-copy h2{font-size:26px; line-height:1.2; margin:0 0 8px; color:var(--ink);}
.wheel-promo-copy p{margin:0; font-size:15px; line-height:1.6; color:rgba(0,0,0,0.72); max-width:60ch;}
/* Ink, not --blue: white on #007aff is 4.02:1 and this label is 15.5px, which
   is below the large-text threshold. Black on white is 21:1 and reads as
   brand anyway -- the logo and the wheel rim are both black. */
.wp-cta{flex:0 0 auto; background:var(--ink); color:var(--white); box-shadow:0 10px 24px -8px rgba(0,0,0,0.45);}
@media(max-width:760px){
  .wheel-promo{margin-top:38px;}
  .wheel-promo-inner{padding:24px 20px; gap:18px;}
  .wheel-promo-copy h2{font-size:21px;}
  .wp-cta{width:100%;}
}

/* Rewards nav link. Gold pill so the promo is findable from every page, but
   quieter than the Order Online button next to it -- ordering is still the
   thing we actually want people to click. */
.nav-rewards{
  background:var(--gold); color:var(--ink) !important;
  padding:6px 13px; border-radius:999px;
  box-shadow:0 6px 14px -6px rgba(255,206,0,0.9);
}
.nav-rewards:hover{background:var(--gold-soft);}
@media(max-width:900px){
  /* In the dropdown the pill would sit oddly in a stack of plain rows. */
  .nav-rewards{display:inline-block; margin-top:2px;}
}

/* Seven nav items plus the phone number and Order Online no longer fit
   between 900px (where the burger takes over) and roughly 1150px -- adding
   Rewards pushed the CTA off the right edge at 1024. Tighten the row in that
   band rather than moving the burger breakpoint, which would cost the whole
   menu on tablets. Scoped with min-width so it can never reach the stacked
   dropdown below 900px. */
@media(min-width:901px) and (max-width:1150px){
  .nav-wrap{padding-left:16px; padding-right:16px; gap:10px;}
  nav ul{gap:17px;}
  nav a{font-size:13.5px;}
  .nav-rewards{padding:5px 10px;}
  .nav-cta{gap:10px;}
  .nav-phone{font-size:13px;}
  .nav-cta .btn{padding:11px 16px; font-size:14px;}
}