/* ===========================================================================
   APEX Pool Service — stylesheet (copied verbatim from the original site).

   Layout uses CSS Grid and Flexbox. "Responsive" sizing is handled by the two
   @media blocks near the bottom of this file:
     - max-width: 1150px  -> tablet / small laptop: nav collapses to a hamburger,
                             multi-column grids drop to 1-2 columns.
     - max-width: 560px   -> phones: headings shrink, forms/grids go single column.
   A media query is just "apply these rules only when the screen is <= this wide".
   =========================================================================== */
:root{
    --navy:#0a1a33;
    --navy-2:#0d2140;
    --blue:#1e5fd9;
    --blue-light:#3b82f6;
    --white:#ffffff;
    --ink:#101828;
    --gray:#5b6472;
    --bg-light:#f5f7fa;
    --border:#e5e9ef;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  /* The header is `position:sticky` (see the HEADER block below), so it floats
     over the top of the page. Without this, clicking a nav link (e.g. "#repair")
     scrolls the section to y=0, where the sticky header then covers its heading
     and image. `scroll-padding-top` tells the browser to stop that many pixels
     short of the top for any anchor jump, leaving room for the header (~86px). */
  html{scroll-padding-top:100px;}
  body{font-family:'Inter',sans-serif;color:var(--ink);background:var(--white);line-height:1.5;}
  h1,h2,h3,h4{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.5px;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  img{max-width:100%;display:block;}
  .container{max-width:1200px;margin:0 auto;padding:0 24px;}
  .btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.5px;padding:14px 26px;border-radius:6px;font-size:16px;cursor:pointer;border:none;transition:transform .15s ease, box-shadow .15s ease;}
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--blue);color:#fff;box-shadow:0 4px 14px rgba(30,95,217,.35);}
  .btn-primary:hover{background:#1a52c2;}
  .btn-outline{background:transparent;color:#fff;border:2px solid #fff;}
  .btn-outline:hover{background:#fff;color:var(--navy);}
  .btn-white{background:#fff;color:var(--blue);}
  .btn-white:hover{background:#eef3ff;}
  .icon{width:20px;height:20px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

  /* HEADER */
  header{background:var(--navy);position:sticky;top:0;z-index:100;}
  .nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;gap:16px;}
  .logo{display:flex;align-items:center;gap:12px;flex-shrink:0;}
  .logo-icon{height:48px;width:auto;display:block;}
  .logo-text .brand{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:26px;color:#fff;line-height:1;letter-spacing:1px;}
  .logo-text .tagline{font-size:10px;color:#9db4d9;font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin-top:2px;}
  .logo-text .tagline span{color:var(--blue-light);}
  nav.main-nav{display:flex;gap:20px;flex-shrink:1;min-width:0;}
  nav.main-nav a{color:#dbe4f3;font-size:13px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;padding:6px 0;border-bottom:2px solid transparent;transition:.15s;white-space:nowrap;}
  nav.main-nav a:hover, nav.main-nav a.active{color:#fff;border-bottom-color:var(--blue-light);}
  .header-right{display:flex;align-items:center;gap:16px;flex-shrink:0;}
  .call-pill{display:flex;align-items:center;gap:8px;background:var(--blue);color:#fff;padding:10px 18px;border-radius:6px;font-weight:700;font-size:15px;white-space:nowrap;}
  .menu-toggle{display:none;background:none;border:none;color:#fff;cursor:pointer;}

  /* HERO */
  .hero{position:relative;background:linear-gradient(115deg,var(--navy) 40%, var(--navy-2) 100%);overflow:hidden;padding:70px 0 60px;}
  /* Two columns on desktop: text (1fr) and photo (1.15fr, i.e. a little wider
     than the text). At <=1150px this is overridden — see the tablet blocks. */
  .hero-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:20px;align-items:center;}
  .hero-phone{color:var(--blue-light);font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:32px;letter-spacing:.5px;margin-bottom:12px;}
  .hero h1{color:#fff;font-size:44px;font-weight:800;line-height:1.05;margin-bottom:14px;}
  .hero h1 .accent{color:var(--blue-light);}
  .hero p.sub{color:#c3ceE0;font-size:17px;max-width:440px;margin-bottom:26px;}
  .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}
  .hero-visual{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 20px 50px rgba(0,0,0,.4);}
  .hero-truck-img{width:100%;height:100%;object-fit:cover;object-position:center 40%;}

  .badge-strip{background:#08152b;border-top:1px solid rgba(255,255,255,.08);}
  .badge-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:26px 0;}
  .badge-item{display:flex;align-items:center;gap:12px;padding:0 20px;border-right:1px solid rgba(255,255,255,.08);color:#fff;}
  .badge-item:last-child{border-right:none;}
  .badge-item .icon-wrap{width:34px;height:34px;flex-shrink:0;color:var(--blue-light);}
  .badge-item strong{display:block;font-size:13px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;}
  .badge-item span{display:block;font-size:12.5px;color:#a9b8d1;margin-top:2px;}

  /* SECTION HEADS */
  .section{padding:64px 0;}
  .section-head{text-align:center;margin-bottom:38px;}
  .section-head h2{font-size:32px;font-weight:800;color:var(--ink);position:relative;display:inline-block;padding-bottom:14px;}
  .section-head h2::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:64px;height:4px;background:var(--blue);border-radius:2px;}

  /* SERVICE CARDS */
  .service-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
  .service-card{position:relative;border-radius:12px;overflow:hidden;min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.15);}
  .service-card .art{position:absolute;inset:0;z-index:0;}
  .service-card.repair .art{background-image:url('../assets/card-equipment-repair.png');background-size:cover;background-position:center;}
  .service-card.weekly .art{background-image:url('../assets/card-weekly-service.png');background-size:cover;background-position:center;}
  .service-card::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(0,0,0,.82) 10%, rgba(0,0,0,.15) 65%);z-index:1;}
  .service-card .art svg{position:absolute;right:6%;top:50%;transform:translateY(-50%);width:46%;opacity:.9;z-index:0;}
  .service-card-body{position:relative;z-index:2;padding:32px;}
  .service-icon{width:52px;height:52px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;margin-bottom:14px;box-shadow:0 6px 16px rgba(0,0,0,.3);}
  .service-icon svg{width:26px;height:26px;color:#fff;}
  .service-card h3{font-size:26px;font-weight:800;margin-bottom:6px;}
  .service-card p.lead{color:#dfe6f0;font-size:14.5px;margin-bottom:16px;max-width:340px;}
  .service-list{margin-bottom:20px;}
  .service-list li{display:flex;align-items:flex-start;gap:8px;font-size:14.5px;color:#eef1f6;padding:3px 0;}
  .service-list li svg{color:var(--blue-light);width:16px;height:16px;margin-top:3px;flex-shrink:0;}

  /* WHY CHOOSE */
  .why-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;}
  .why-item{text-align:center;padding:0 6px;}
  .why-item .icon-circle{width:60px;height:60px;border-radius:50%;border:2px solid var(--blue);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--blue);}
  .why-item .icon-circle svg{width:26px;height:26px;}
  .why-item h4{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:6px;letter-spacing:.2px;}
  .why-item p{font-size:13px;color:var(--gray);}

  /* SERVICE AREA */
  .area-section{background:var(--bg-light);}
  .area-card{display:grid;grid-template-columns:1fr 1.2fr 0.8fr;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.08);}
  .area-left{background:var(--navy);color:#fff;padding:36px 30px;}
  .area-left h3{font-size:24px;font-weight:800;margin-bottom:20px;line-height:1.15;}
  .area-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;}
  .area-cols li{display:flex;align-items:center;gap:8px;font-size:14px;padding:5px 0;color:#dbe4f3;}
  .area-cols li svg{color:var(--blue-light);width:15px;height:15px;flex-shrink:0;}
  .area-map{position:relative;}
  .map-img{width:100%;height:100%;object-fit:cover;display:block;}
  .area-right{background:#fff;padding:32px 28px;display:flex;flex-direction:column;justify-content:center;}
  .area-right h4{font-size:19px;font-weight:800;margin-bottom:10px;}
  .area-right p{font-size:14px;color:var(--gray);margin-bottom:18px;}

  /* CTA BANNER */
  .cta-banner{background:linear-gradient(120deg,#08213f,#0d3868 55%,#08213f), repeating-linear-gradient(120deg, rgba(255,255,255,.03) 0 2px, transparent 2px 40px);color:#fff;padding:46px 0;}
  .cta-grid{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;}
  .cta-grid h2{font-size:28px;font-weight:800;margin-bottom:8px;}
  .cta-grid p{color:#c3ceE0;font-size:15px;}
  .cta-right{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
  .cta-phone{display:flex;align-items:center;gap:12px;font-size:26px;font-weight:800;font-family:'Barlow Condensed',sans-serif;}
  .cta-phone svg{width:26px;height:26px;color:var(--blue-light);}

  /* CONTACT FORM */
  .contact-section{background:var(--bg-light);}
  .contact-card{display:grid;grid-template-columns:0.85fr 1.15fr;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.08);background:#fff;}
  .contact-aside{background:var(--navy);color:#fff;padding:36px 30px;}
  .contact-aside h3{font-size:24px;font-weight:800;margin-bottom:10px;line-height:1.15;}
  .contact-aside p.aside-sub{font-size:14px;color:#c3ceE0;margin-bottom:22px;}
  .contact-aside .aside-phone{display:flex;align-items:center;gap:10px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:26px;color:#fff;margin-bottom:6px;}
  .contact-aside .aside-phone svg{width:24px;height:24px;color:var(--blue-light);flex-shrink:0;}
  .contact-aside .aside-hours{font-size:13px;color:#8b9ab5;margin-bottom:24px;}
  .aside-list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:#dbe4f3;padding:6px 0;}
  .aside-list li svg{color:var(--blue-light);width:16px;height:16px;flex-shrink:0;margin-top:3px;}

  .contact-form-wrap{padding:34px 32px;}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;}
  .field{display:flex;flex-direction:column;gap:6px;}
  .field.full{grid-column:1 / -1;}
  .field label{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--gray);}
  .field label .req{color:var(--blue);}
  .field input,.field select,.field textarea{font-family:'Inter',sans-serif;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--border);border-radius:6px;padding:12px 13px;width:100%;transition:border-color .15s ease, box-shadow .15s ease;}
  .field textarea{resize:vertical;min-height:118px;}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(30,95,217,.15);}
  .field select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6472' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;}
  .hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
  .form-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px;}
  .form-note{font-size:12.5px;color:var(--gray);max-width:330px;}
  .form-status{margin-top:18px;border-radius:8px;padding:14px 16px;font-size:14.5px;line-height:1.45;}
  .form-status[hidden]{display:none;}
  .form-status.success{background:#eaf6ee;border:1px solid #bfe0c9;color:#1c6b32;}
  .form-status.error{background:#fdeceb;border:1px solid #f3c4c2;color:#98252a;}
  .btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none;}

  /* FOOTER */
  footer{background:#060e1c;color:#c3ceE0;padding:54px 0 0;}
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1fr 1fr;gap:32px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08);}
  .footer-brand .logo{margin-bottom:14px;}
  .footer-brand p{font-size:13.5px;color:#8b9ab5;max-width:230px;}
  footer h5{color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:16px;}
  footer .flinks li{margin-bottom:10px;font-size:14px;}
  footer .flinks a{color:#adb9d1;transition:.15s;}
  footer .flinks a:hover{color:#fff;}
  .fcontact li{display:flex;align-items:center;gap:10px;font-size:14px;margin-bottom:12px;color:#adb9d1;}
  .fcontact svg{width:16px;height:16px;color:var(--blue-light);flex-shrink:0;}
  .social-row{display:flex;gap:10px;}
  .social-row a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff;transition:.15s;}
  .social-row a:hover{background:var(--blue);}
  .social-row svg{width:16px;height:16px;}
  .badge-row{display:flex;align-items:center;gap:12px;}
  .shield{width:44px;height:44px;flex-shrink:0;color:var(--blue-light);}
  .badge-row p{font-size:13px;color:#adb9d1;}
  .bottom-bar{text-align:center;padding:20px 0;font-size:12.5px;color:#6f7f9c;}

  @media (max-width: 1150px){
    nav.main-nav{display:none;}
    .menu-toggle{display:block;}
    /* Tablet: the hero keeps its two columns (image stays to the RIGHT of the
       text). It only stacks on phones — see the 560px block below. */
    .badge-grid{grid-template-columns:repeat(2,1fr);gap:16px;}
    .badge-item{border-right:none;padding:8px 0;}
    .service-grid{grid-template-columns:1fr;}
    .why-grid{grid-template-columns:repeat(3,1fr);gap:24px;}
    .area-card{grid-template-columns:1fr;}
    .contact-card{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:560px){
    .hero h1{font-size:32px;}
    .hero-phone{font-size:24px;}
    /* Phones only: stack the hero (image drops below the text) and hide the
       header "call now" pill. The number is still one tap away in the hero,
       the page CTAs, and the footer. */
    .hero-grid{grid-template-columns:1fr;}
    .hero-visual{aspect-ratio:16/9;}
    .call-pill{display:none;}
    .why-grid{grid-template-columns:repeat(2,1fr);}
    .footer-grid{grid-template-columns:1fr;}
    .cta-grid{flex-direction:column;align-items:flex-start;}
    .form-grid{grid-template-columns:1fr;}
    .contact-form-wrap{padding:26px 20px;}
    .contact-aside{padding:28px 22px;}
  }

  /* =========================================================================
     MULTIPAGE ADDITIONS
     Extra styles for the separate pages (equipment-repair.html, weekly-service.html,
     service-area.html, contact.html) and the mobile dropdown menu. Everything
     above this line is unchanged from the original single-page site.
     ========================================================================= */

  /* The header wraps an absolutely-positioned dropdown on mobile, so it needs
     `position:relative` to act as that dropdown's anchor. */
  header .nav-wrap{position:relative;}

  /* Make the logo a clickable link back to the home page (standard on
     multipage sites). It keeps the same flex layout as the old <div>. */
  a.logo{cursor:pointer;}

  /* PAGE HERO — the smaller navy banner at the top of each interior page.
     Reuses the same gradient as the home hero, just shorter. */
  .page-hero{background:linear-gradient(115deg,var(--navy) 40%,var(--navy-2) 100%);color:#fff;padding:56px 0 48px;}
  .page-hero .eyebrow{color:var(--blue-light);font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:14px;margin-bottom:10px;}
  .page-hero h1{font-size:40px;font-weight:800;line-height:1.05;margin-bottom:12px;}
  .page-hero p{color:#c3ceE0;font-size:16px;max-width:540px;margin-bottom:22px;}
  .page-hero .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}

  /* DETAIL GRID — the "what's included" cards on the two service pages. */
  .detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .detail-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:24px;box-shadow:0 6px 18px rgba(16,24,40,.05);}
  .detail-card .detail-icon{width:44px;height:44px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
  .detail-card .detail-icon svg{width:22px;height:22px;color:#fff;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .detail-card h3{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.5px;font-size:19px;font-weight:700;color:var(--ink);margin-bottom:8px;}
  .detail-card p{font-size:14px;color:var(--gray);line-height:1.55;}

  /* A plain centered intro paragraph under a section heading. */
  .section-intro{text-align:center;max-width:640px;margin:0 auto 36px;color:var(--gray);font-size:15.5px;line-height:1.6;}

  /* MOBILE DROPDOWN MENU (screens <= 1150px, toggled by js/nav.js) */
  @media (max-width:1150px){
    nav.main-nav.open{
      display:flex;flex-direction:column;
      position:absolute;top:100%;left:0;right:0;
      background:var(--navy);padding:10px 24px 16px;gap:2px;
      border-top:1px solid rgba(255,255,255,.08);
      box-shadow:0 14px 28px rgba(0,0,0,.4);
      z-index:200;
    }
    nav.main-nav.open a{
      padding:12px 2px;font-size:15px;white-space:normal;
      border-bottom:1px solid rgba(255,255,255,.07);border-radius:0;
    }
    nav.main-nav.open a:last-child{border-bottom:none;}
    .detail-grid{grid-template-columns:1fr 1fr;}
    .page-hero h1{font-size:32px;}
  }
  @media (max-width:560px){
    .detail-grid{grid-template-columns:1fr;}
    .page-hero h1{font-size:27px;}
    .page-hero{padding:44px 0 38px;}
  }

  /* =========================================================================
     SMALL TABLET / LARGE PHONE (561px - 780px)
     Not enough width for the text and photo to share a row nicely, so the hero
     just stacks: text first, then the photo in a short 16:9 strip below it.
     ========================================================================= */
  @media (min-width:561px) and (max-width:780px){
    .hero-grid{grid-template-columns:1fr;}
    .hero-visual{aspect-ratio:16/9;}
  }

  /* =========================================================================
     TABLET HERO (781px - 1150px)
     Instead of a framed photo sitting beside the text, the truck photo bleeds
     off the right edge of the screen, slides BEHIND the text, and its left
     side fades into the navy background.

     The fade uses `mask-image`: a mask hides part of an element according to a
     gradient's opacity -- transparent on the left (image fully hidden), solid
     on the right (image fully shown). Where the image is masked away, the navy
     hero gradient simply shows through. `-webkit-mask-image` is the same thing
     for Safari.
     ========================================================================= */
  @media (min-width:781px) and (max-width:1150px){
    .hero{min-height:460px;padding-bottom:0;}

    /* Text no longer shares a grid column with the image; it spans the row but
       only uses the left ~56% so it never runs onto the solid part of the photo. */
    .hero-grid{grid-template-columns:1fr;}
    .hero-grid > div:first-child{position:relative;z-index:2;max-width:60%;}
    .hero h1{font-size:37px;}          /* a touch smaller so it wraps less */
    .hero p.sub{max-width:52%;}

    /* Image: pulled out of the grid, pinned to the full height of the hero on
       the right, no card framing. */
    .hero-visual{
      position:absolute;
      inset:0 0 0 auto;          /* top:0 right:0 bottom:0, left:auto */
      width:66%;
      margin:0;
      border-radius:0;
      box-shadow:none;
      aspect-ratio:auto;         /* fill the hero's height, not a 4:3 box */
      z-index:1;
    }
    .hero-truck-img{
      object-position:center 45%;
      /* image stays invisible through the left 40%, fully solid by 72% -- keeps
         truck detail well clear of the headline and sub-text */
      -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.12) 40%, #000 72%);
              mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.12) 40%, #000 72%);
    }
  }

  /* =========================================================================
     SERVICE-AREA MAP (Google "My Maps" embed)
     The map is loaded from Google in an <iframe> (a mini web page embedded
     inside this one). It needs an explicit size because an iframe has no
     natural height. `loading="lazy"` in the HTML defers the load until the
     user scrolls near it, so it doesn't slow the initial page.
     ========================================================================= */
  .area-map iframe{
    display:block;
    width:100%;
    height:100%;
    min-height:340px;      /* keeps a sensible height when the card is stacked */
    border:0;
  }

  /* =========================================================================
     GOOGLE REVIEWS ROTATOR (js/reviews.js)
     One review shown at a time; the script fades between them on a timer and
     on the prev/next / dot controls. Quotes are plain HTML so search engines
     and AI answer engines can read them.
     ========================================================================= */
  .reviews-carousel{
    position:relative;
    max-width:760px;
    margin:0 auto;
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:0 10px 30px rgba(16,24,40,.06);
    padding:40px 64px;
    min-height:230px;
  }
  .rev-track{position:relative;}
  .rev-slide{
    position:absolute;inset:0;
    display:flex;flex-direction:column;align-items:center;text-align:center;
    opacity:0;visibility:hidden;
    transition:opacity .4s ease;
  }
  .rev-slide.is-active{opacity:1;visibility:visible;position:relative;}
  .rev-stars{color:#f5a623;font-size:18px;letter-spacing:2px;margin-bottom:14px;}
  .rev-text{font-size:16.5px;line-height:1.6;color:var(--ink);margin-bottom:16px;max-width:560px;}
  .rev-author{font-style:normal;font-weight:700;font-size:14px;color:var(--gray);}
  .rev-author .rev-place{font-weight:500;}

  /* Prev / next arrows */
  .rev-nav{
    position:absolute;top:50%;transform:translateY(-50%);
    width:40px;height:40px;border-radius:50%;
    border:1px solid var(--border);background:#fff;color:var(--blue);
    font-size:22px;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s ease,color .15s ease;
  }
  .rev-nav:hover{background:var(--blue);color:#fff;}
  .rev-prev{left:12px;}
  .rev-next{right:12px;}

  /* Dots */
  .rev-dots{display:flex;justify-content:center;gap:8px;margin-top:20px;}
  .rev-dot{
    width:9px;height:9px;border-radius:50%;padding:0;
    border:none;background:var(--border);cursor:pointer;transition:background .15s ease;
  }
  .rev-dot.is-active{background:var(--blue);}

  .reviews-cta{text-align:center;margin-top:26px;}
  .reviews-cta .btn svg{width:18px;height:18px;}

  @media (max-width:560px){
    .reviews-carousel{padding:32px 20px;}
    .rev-nav{display:none;}          /* rely on swipe-free dots on small screens */
  }

  /* Plain community list on the Service Area page (light background). */
  .community-list{max-width:720px;margin:0 auto;display:grid;gap:12px;}
  .community-list li{
    position:relative;padding-left:26px;
    font-size:15px;line-height:1.55;color:var(--gray);
  }
  .community-list li::before{
    content:"";position:absolute;left:0;top:7px;
    width:14px;height:14px;border-radius:50%;
    background:var(--blue);
  }
  .community-list li strong{color:var(--ink);font-weight:700;}
  .community-list a{color:var(--blue);text-decoration:underline;}

  /* Make links inside intro paragraphs look like links. */
  .section-intro a{color:var(--blue);text-decoration:underline;}

  /* =========================================================================
     ULTRA-WIDE DESKTOP
     By default `.container` is capped at 1200px, so on very wide monitors the
     content sits in a narrow strip with big empty margins. These two steps
     widen the container and scale the hero / section spacing up a little so the
     page fills more of the screen -- without letting text lines get so long
     they're hard to read. Full-width coloured bands (hero, badge strip, CTA,
     footer) already span the whole screen; only the content inside them grows.
     ========================================================================= */
  @media (min-width:1600px){
    .container{max-width:1400px;}
    .hero{padding:96px 0 84px;}
    .hero h1{font-size:52px;}
    .hero-phone{font-size:36px;}
    .hero p.sub{font-size:18px;max-width:520px;}
    .page-hero{padding:72px 0 60px;}
    .page-hero h1{font-size:46px;}
    .section{padding:84px 0;}
    .section-head h2{font-size:38px;}
    .detail-grid{gap:28px;}
    .why-grid{gap:28px;}
  }
  @media (min-width:2200px){
    .container{max-width:1560px;}
    .hero h1{font-size:58px;}
  }