/* ==========================================================
   Ecobin Waste — stylesheet
   Extracted from index.html for caching + maintainability.
   ========================================================== */

  :root{
    --ink:#173319;
    --paper:#FFFFFF;
    --paper-2:#EFFAEA;
    --card:#FFFFFF;
    --green:#3FA34D;
    --green-dark:#256029;
    --green-light:#8BC34A;
    --gold:#E8912A;
    --whatsapp:#25D366;
    --line: rgba(23,51,25,0.12);
    --shadow: 0 8px 30px rgba(23,51,25,0.10);
    --radius: 16px;
  }
  [data-theme="dark"]{
    --ink:#EAF5EA;
    --paper:#0E1710;
    --paper-2:#152018;
    --card:#17221A;
    --green:#5CC168;
    --green-dark:#3FA34D;
    --line: rgba(234,245,234,0.12);
    --shadow: 0 8px 30px rgba(0,0,0,0.4);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:'Inter',sans-serif; line-height:1.55;
    transition:background 0.3s ease, color 0.3s ease;
  }
  h1,h2,h3{ font-family:'Fraunces',serif; margin:0; letter-spacing:-0.01em; }
  a{color:inherit;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
  .skip-link{
    position:absolute; left:-999px; top:0; background:var(--green-dark); color:#fff;
    padding:10px 18px; z-index:200; border-radius:0 0 8px 0;
  }
  .skip-link:focus{left:0;}

  /* SCROLL PROGRESS */
  #scrollProgress{position:fixed; top:0; left:0; height:3px; background:var(--gold); z-index:110; width:0%;}

  /* PAGE LOADER */
  #loader{
    position:fixed; inset:0; background:var(--paper); z-index:200;
    display:flex; align-items:center; justify-content:center;
    transition:opacity 0.4s ease, visibility 0.4s ease;
  }
  #loader.done{opacity:0; visibility:hidden;}
  .loader-ring{
    width:44px; height:44px; border-radius:50%; border:3px solid var(--paper-2);
    border-top-color:var(--green); animation:spin 0.8s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg);}}

  /* PROMO BAR */
  .promo-bar{
    background:linear-gradient(90deg,#256029,#3FA34D,#8BC34A);
    color:#fff; padding:9px 20px; display:flex; align-items:center; justify-content:center;
    gap:14px; font-size:13px; font-weight:600; text-align:center; flex-wrap:wrap;
  }
  .promo-bar a{background:#fff; color:var(--green-dark); padding:5px 14px; border-radius:20px; text-decoration:none; font-weight:700; font-size:12px; white-space:nowrap;}
  .promo-close{background:none; border:none; color:#fff; opacity:0.75; cursor:pointer; font-size:15px; min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;}
  .promo-bar.hidden{display:none;}

  /* HEADER */
  header{position:sticky; top:0; z-index:90; background:rgba(255,255,255,0.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
  [data-theme="dark"] header{background:rgba(14,23,16,0.85);}
  .nav{display:flex; align-items:center; justify-content:space-between; padding:12px 24px;}
  .brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
  .brand-mark{width:52px; height:52px; border-radius:50%; overflow:hidden; flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,0.15);}
  .brand-mark img{width:100%; height:100%; object-fit:cover;}
  .brand-name{
    font-family:'Fraunces',serif; font-weight:700; font-size:22px; line-height:1.1;
    background:linear-gradient(90deg,var(--green-dark),var(--green));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .brand-tag{font-size:11px; color:var(--green); font-weight:600; letter-spacing:0.02em; font-style:italic;}
  nav.main-nav ul{list-style:none; display:flex; gap:28px; margin:0; padding:0;}
  nav.main-nav a{text-decoration:none; font-size:14px; font-weight:600; color:var(--ink); opacity:0.7; position:relative; padding-bottom:4px;}
  nav.main-nav a.active{opacity:1; color:var(--green-dark);}
  nav.main-nav a.active::after{content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--green);}
  .nav-actions{display:flex; gap:10px; align-items:center;}
  .theme-toggle{
    width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--paper-2);
    display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--green-dark); flex-shrink:0;
  }
  .nav-call{border:1.5px solid var(--green-dark); color:var(--green-dark); padding:8px 16px; border-radius:20px; font-size:13.5px; font-weight:700; text-decoration:none; display:flex; align-items:center; gap:6px;}
  .nav-wa{background:var(--whatsapp); color:#fff; padding:9px 16px; border-radius:20px; font-size:13.5px; font-weight:700; text-decoration:none; display:flex; align-items:center; gap:6px;}
/* Desktop navigation booking button */
.desktop-book-row{
  display:list-item;
}

.desktop-book-btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  padding:8px 13px !important;
  border-radius:20px;
  background:var(--green);
  color:#fff !important;
  font-size:13px !important;
  font-weight:700 !important;
  text-decoration:none;
  white-space:nowrap;
  opacity:1 !important;
}

.desktop-book-btn:hover{
  background:var(--green-dark);
  color:#fff !important;
}

.desktop-book-btn::after{
  display:none !important;
}
  .menu-toggle{display:none; background:none; border:none; font-size:24px; cursor:pointer; color:var(--green-dark);}

  /* Theme-toggle entry point duplicated inside the mobile nav panel — only
     shown there on the narrowest widths where the header row has no space
     left for it (see the 412px tier below). Hidden everywhere else. */
  .mobile-theme-row{display:none;}
  .mobile-theme-btn{
    display:flex; align-items:center; gap:10px; background:none; border:none; cursor:pointer;
    color:var(--ink); font-size:15px; font-weight:600; padding:14px 4px; width:100%; text-align:left;
  }

  /* BUTTONS (shared) */
  .btn-primary{
    background:var(--whatsapp); color:#fff; padding:15px 28px; border-radius:30px; text-decoration:none;
    font-weight:700; font-size:15.5px; display:inline-flex; align-items:center; gap:9px;
    box-shadow:0 4px 14px rgba(37,211,102,0.4); border:none; cursor:pointer;
    transition:box-shadow 0.2s ease, transform 0.2s ease;
  }
  .btn-primary:hover{box-shadow:0 6px 18px rgba(37,211,102,0.55); transform:translateY(-1px);}
  .btn-secondary{border:2px solid var(--green-dark); color:var(--green-dark); padding:14px 26px; border-radius:30px; text-decoration:none; font-weight:700; font-size:15.5px; display:inline-flex; align-items:center; gap:8px; background:var(--paper);}
  .btn-secondary.on-dark{background:transparent; border-color:#fff; color:#fff;}
  .btn-fb{background:#1877F2; color:#fff; padding:14px 26px; border-radius:30px; text-decoration:none; font-weight:700; font-size:15.5px; display:inline-flex; align-items:center; gap:8px;}

  /* HERO CAROUSEL */
  .hero-banner-wrap{padding:24px 0 0;}
  .hero-h1{
    font-size:28px; font-weight:600; line-height:1.2;
    color:var(--ink); margin:0 0 16px;
  }
  .eyebrow{font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); font-weight:600; display:block; margin-bottom:12px;}
  .slide-eyebrow{font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:#256029; font-weight:700; display:block; margin-bottom:10px;}
  .carousel{
  position:relative;
  height:420px;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  isolation:isolate;
}

.slide{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:visible;
  pointer-events:none;
  transition:opacity 0.7s ease;
  display:flex;
  align-items:center;
  padding:0 48px;
  z-index:1;
}

.slide.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  z-index:2;
}
  .slide-inner{display:flex; align-items:center; gap:36px; max-width:960px; margin:0 auto; width:100%; min-width:0;}
  .slide-icon{width:130px; height:130px; border-radius:50%; background:rgba(255,255,255,0.6); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 6px 18px rgba(23,51,25,0.1);}
  .slide-icon svg{width:66px; height:66px;}
  .slide-text{min-width:0;flex:1 1 auto;}
  .slide-text h2{font-size:32px; font-weight:700; color:#173319; line-height:1.15;}
  .slide-text p{margin-top:10px; font-size:15.5px; color:#2f4a30; max-width:42ch;}
  .car-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:44px; height:44px; border-radius:50%; border:none; background:rgba(255,255,255,0.85); color:var(--green-dark); font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(0,0,0,0.15);}
  .car-arrow.prev{left:16px;} .car-arrow.next{right:16px;}
  .car-dots{position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:10; display:flex; gap:2px;}
  .car-dots .dot{
    width:9px; height:9px; box-sizing:content-box; padding:17px; margin:0;
    border-radius:50%; border:none; cursor:pointer;
    background-color:rgba(255,255,255,0.6); background-clip:content-box;
  }
  .car-dots{
  position:absolute;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  z-index:10;
  display:flex;
  align-items:center;
  gap:8px;
}

.car-dots .dot{
  width:9px;
  height:9px;
  box-sizing:border-box;
  padding:0;
  margin:0;
  border-radius:50%;
  border:none;
  cursor:pointer;
  background:#fff;
  opacity:0.55;
  transition:opacity 0.25s ease, transform 0.25s ease;
}

.car-dots .dot.active{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#fff;
  opacity:1;
  transform:scale(1.15);
}

  .hero-cta-bar{
    background:var(--card); border-radius:var(--radius); box-shadow:0 12px 30px rgba(23,51,25,0.16);
    margin:-38px 24px 0; position:relative; z-index:5; padding:22px 28px;
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px;
    border:1px solid var(--line);
  }
  .cta-bar-title{font-family:'Fraunces',serif; font-weight:700; font-size:19px;}
  .cta-bar-badges{display:flex; gap:8px; margin-top:8px; flex-wrap:wrap;}
  .cta-bar-badges span{background:var(--paper-2); color:var(--green-dark); font-size:12px; font-weight:600; padding:5px 12px; border-radius:14px; display:inline-flex; align-items:center; gap:4px;}
  .cta-bar-btns{display:flex; gap:12px; flex-wrap:wrap;}

  /* TRUST STRIP */
  .trust-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-bottom:1px solid var(--line); margin-top:20px;}
  .trust-item{padding:20px 18px; text-align:center; border-right:1px solid var(--line); font-size:13.5px; font-weight:700; color:var(--green-dark);}
  .trust-item:last-child{border-right:none;}
  .trust-item .ic{font-size:22px; display:block; margin-bottom:6px;}
  .trust-item svg{width:26px; height:26px; margin-bottom:8px; stroke:var(--green-dark);}

  /* MINI CTA BANNER */
  .mini-cta{
    margin-top:36px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    background:var(--paper-2); border:1px dashed var(--green-light); border-radius:14px; padding:18px 24px;
  }
  .mini-cta span{font-weight:700; font-size:14.5px; color:var(--green-dark);}

  /* GALLERY (placeholder) */
  .gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  .gallery-card{
    border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px; text-align:center; background:var(--card);
    transition:transform 0.25s ease, box-shadow 0.25s ease;
  }
  .gallery-card:hover{transform:translateY(-5px); box-shadow:var(--shadow);}
  .gallery-card .swap-ic{width:48px; height:48px; margin:0 auto 14px; border-radius:12px; background:var(--paper-2); display:flex; align-items:center; justify-content:center;}
  .gallery-card .swap-ic svg{width:24px; height:24px; stroke:var(--green-dark);}
  .gallery-card h4{font-size:14px; font-weight:700; margin-bottom:4px;}
  .gallery-card p{font-size:12.5px; color:#5a6152; margin:0;}

  /* TESTIMONIALS (placeholder content, premium presentation) */
  .testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  .testi-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px;
    transition:transform 0.25s ease, box-shadow 0.25s ease;
  }
  .testi-card:hover{transform:translateY(-5px); box-shadow:var(--shadow);}
  .testi-card .ic-wrap{width:48px; height:48px; border-radius:12px; background:var(--paper-2); display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
  .testi-card .ic-wrap svg{width:24px; height:24px; stroke:var(--green-dark);}
  .testi-card h3{font-size:16.5px; font-weight:700; font-family:'Inter',sans-serif;}
  .testi-card p{font-size:13.5px; color:#4a5142; margin-top:6px;}

  /* GOOGLE RATING placeholder — neutral, no fabricated number/stars */
  .rating-placeholder{
    display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--line);
    border-radius:12px; padding:16px 20px; margin:20px 0 32px; max-width:460px;
  }
  .rating-placeholder svg{width:26px; height:26px; stroke:#9a9488; flex-shrink:0;}
  .rating-placeholder-title{font-size:13.5px; font-weight:700;}
  .rating-placeholder-sub{font-size:12px; color:#5a6152; margin-top:2px;}
  .rating-placeholder-sub a{color:var(--green-dark); font-weight:600;}

  /* SECTIONS */
  section{padding:64px 0; scroll-margin-top:80px;}
  .section-head{max-width:60ch; margin-bottom:34px;}
  .section-head h2{font-size:30px; font-weight:700;}
  .section-head p{margin-top:12px; color:#3c4438; font-size:15.5px;}
  [data-theme="dark"] .section-head p{color:#b7c6b6;}

  /* ABOUT */
  .about-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
  .about-badge-ring{width:220px; height:220px; border-radius:50%; border:2px dashed var(--green-light); display:flex; align-items:center; justify-content:center; margin:0 auto;}
  .about-badge-ring-inner{width:180px; height:180px; border-radius:50%; background:var(--paper-2); display:flex; align-items:center; justify-content:center;}
  .about-badge-ring-inner img{width:130px; height:130px; border-radius:50%;}
  .about-list{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:12px;}
  .about-list li{display:flex; gap:10px; font-size:14.5px; color:#2f4a30;}
  [data-theme="dark"] .about-list li{color:#c6d6c5;}

  /* Reusable muted-text utilities — replace inline color styles so dark
     mode can actually override them (an inline style="" can't be reached
     by a CSS attribute-selector override without !important). */
  .text-body-muted{color:#3c4438;}
  [data-theme="dark"] .text-body-muted{color:#c6d6c5;}
  .text-caption-muted{color:#5a6152;}
  [data-theme="dark"] .text-caption-muted{color:#b7c6b6;}
  .about-list li::before{content:'✓'; color:var(--green); font-weight:800; flex-shrink:0;}

  /* GLASS CARDS - COMPARE */
  .compare-grid{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
  .compare-col{padding:30px 28px;}
  .compare-col:first-child{background:var(--paper-2); border-right:1px solid var(--line);}
  .compare-col.win{background:var(--card);}
  .compare-col h3{font-size:16px; font-family:'Inter',sans-serif; font-weight:800; margin-bottom:14px;}
  .compare-col.win h3{color:var(--green-dark);}
  .compare-col ul{margin:0; padding-left:18px; font-size:14.5px; color:#3c4438;}
  [data-theme="dark"] .compare-col ul{color:#c6d6c5;}
  .compare-col li{margin-bottom:8px;}
  .compare-col{transition:transform 0.25s ease;}
  .compare-col.win:hover{transform:translateY(-3px);}

  /* SERVICES */
  .services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  .service-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px;
    transition:transform 0.25s ease, box-shadow 0.25s ease;
  }
  .service-card:hover{transform:translateY(-5px); box-shadow:var(--shadow);}
  .service-card .ic-wrap{width:48px; height:48px; border-radius:12px; background:var(--paper-2); display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
  .service-card .ic-wrap svg{width:24px; height:24px; stroke:var(--green-dark);}
  .service-card h3{font-size:16.5px; font-weight:700; font-family:'Inter',sans-serif;}
  .service-card p{font-size:13.5px; color:#4a5142; margin-top:6px;}
  [data-theme="dark"] .service-card p{color:#b7c6b6;}

  /* AREAS + MAP */
  .areas{background:linear-gradient(135deg,#2E7D32,#4CAF50); color:#fff;}
  .areas .section-head p{color:#dcf0da;}
  .area-tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px;}
  .area-tags span{border:1px solid rgba(255,255,255,0.35); padding:8px 16px; border-radius:20px; font-size:13.5px; transition:transform 0.2s ease, background 0.2s ease;}
  .area-tags span:hover{transform:translateY(-2px) scale(1.04); background:rgba(255,255,255,0.15);}
  .client-types{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:36px;}
  .client-types div{border-top:1px solid rgba(255,255,255,0.25); padding-top:14px;}
  .client-types .n{font-family:'Fraunces',serif; font-size:22px;}
  .client-types .l{font-size:13px; color:#dcf0da; margin-top:4px;}
  .map-embed{margin-top:36px; border-radius:var(--radius); overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.25);}
  .map-embed iframe{width:100%; height:280px; border:0; display:block;}

  /* PROCESS TIMELINE */
  .timeline{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:10px;}
  .timeline::before{content:''; position:absolute; top:22px; left:6%; right:6%; height:2px; background:var(--line); z-index:0;}
  .tl-step{position:relative; z-index:1; text-align:center;}
  .tl-dot{width:44px; height:44px; border-radius:50%; background:var(--green-dark); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-weight:800; font-family:'Fraunces',serif; box-shadow:0 4px 12px rgba(37,96,41,0.35);}
  .tl-step h3{font-size:15.5px; font-weight:700; font-family:'Inter',sans-serif;}
  .tl-step p{font-size:13px; color:#4a5142; margin-top:6px;}
  [data-theme="dark"] .tl-step p{color:#b7c6b6;}

  /* FAQ ACCORDION */
  .faq-list{display:grid; gap:12px; max-width:760px;}
  .faq-item{border:1px solid var(--line); border-radius:12px; background:var(--card); overflow:hidden;}
  .faq-item summary{
    padding:18px 20px; font-weight:700; font-size:15px; cursor:pointer; list-style:none;
    display:flex; justify-content:space-between; align-items:center; gap:12px;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{content:'+'; font-size:20px; color:var(--green); flex-shrink:0;}
  .faq-item[open] summary::after{content:'−';}
  .faq-item p{padding:0 20px 18px; margin:0; font-size:14px; color:#3c4438;}
  [data-theme="dark"] .faq-item p{color:#c6d6c5;}
  /* Task 2 dark-mode audit — measured WCAG contrast failures, fixed below.
     Reuses the same muted-text color already established above (#b7c6b6),
     not a new arbitrary value. Each was under 3:1 against its actual dark
     background (--card or --paper); now 9.19:1. */
  [data-theme="dark"] .gallery-card p{color:#b7c6b6;}
  [data-theme="dark"] .testi-card p{color:#b7c6b6;}
  [data-theme="dark"] .rating-placeholder-sub{color:#b7c6b6;}
  [data-theme="dark"] .file-drop{color:#b7c6b6;}
  [data-theme="dark"] #formStatus[data-state="loading"]{color:#b7c6b6;}
  /* Error red (#c0392b) measured at only 3.02:1 on the dark card background —
     passes AA for large text only, fails for this component's actual small
     (12–13px) text. Lightened for dark mode only; light mode unchanged. */
  [data-theme="dark"] #formStatus[data-state="error"]{color:#F28B82;}
  [data-theme="dark"] .field.error input,
  [data-theme="dark"] .field.error select,
  [data-theme="dark"] .field.error textarea{border-color:#F28B82;}
  [data-theme="dark"] .field .err-msg{color:#F28B82;}

  /* CONTACT + FORM */
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
  .contact-left{background:linear-gradient(135deg,#256029,#3FA34D); color:#fff; padding:40px 34px;}
  .contact-left h2{font-size:26px; color:#fff;}
  .contact-left p{margin-top:12px; font-size:14.5px; opacity:0.9; max-width:34ch;}
  .cbtns{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap;}
  .contact-line{display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.25); font-size:14px;}
  .contact-line span:first-child{opacity:0.8;}
  .contact-line a{text-decoration:none; color:inherit; font-weight:700; font-family:'JetBrains Mono',monospace; font-size:13px;}
  .contact-right{padding:36px 32px; background:var(--card);}
  .field{margin-bottom:16px;}
  .field label{display:block; font-size:13px; font-weight:700; margin-bottom:6px;}
  .field input, .field select, .field textarea{
    width:100%; border:1.5px solid var(--line); border-radius:8px; padding:11px 13px; font-size:14px;
    font-family:'Inter',sans-serif; background:var(--paper); color:var(--ink); outline:none;
  }
  .field input:focus, .field select:focus, .field textarea:focus{border-color:var(--green);}
  .field.error input, .field.error select, .field.error textarea{border-color:#c0392b;}
  .field .err-msg{color:#c0392b; font-size:12px; margin-top:4px; display:none;}
  .field.error .err-msg{display:block;}
  .form-submit{width:100%; justify-content:center; margin-top:6px;}
  #formStatus{font-size:13px; margin-top:12px; color:var(--green-dark); font-weight:600;}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .pill-group{display:flex; flex-wrap:wrap; gap:8px;}
  .pill-group label{
    border:1.5px solid var(--line); border-radius:20px; padding:13px 16px; font-size:12.5px; font-weight:600;
    cursor:pointer; display:flex; align-items:center; gap:6px; background:var(--paper); user-select:none;
  }
  .pill-group input{position:absolute; opacity:0; width:0; height:0;}
  .pill-group input:checked + span{color:var(--green-dark);}
  .pill-group label:has(input:checked){border-color:var(--green); background:var(--paper-2);}
  .pill-group label:has(input:focus-visible){outline:2px solid var(--gold); outline-offset:2px;}
  .file-drop{
    border:1.5px dashed var(--line); border-radius:10px; padding:16px; text-align:center; cursor:pointer;
    font-size:12.5px; color:#5a6152; background:var(--paper);
  }
  .file-drop:hover{border-color:var(--green);}
  .file-drop input{display:none;}
  .file-preview{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
  .file-preview img{width:56px; height:56px; object-fit:cover; border-radius:8px; border:1px solid var(--line);}
  .honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
  .booking-success{display:none; text-align:center; padding:20px 6px;}
  .booking-success.show{display:block;}
  .booking-success .id-badge{
    display:inline-block; background:var(--paper-2); color:var(--green-dark); font-family:'JetBrains Mono',monospace;
    font-weight:700; font-size:16px; padding:10px 20px; border-radius:10px; margin:14px 0;
  }
  .booking-success svg{width:52px; height:52px; stroke:var(--green); margin-bottom:10px;}
  #formStatus[data-state="error"]{color:#c0392b;}
  #formStatus[data-state="loading"]{color:#5a6152;}

  /* FOOTER */
  footer{border-top:1px solid var(--line); padding:48px 0 24px; background:var(--paper-2);}
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;}
  .footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
  .footer-brand img{width:38px; height:38px; border-radius:50%;}
  .footer-brand span{font-family:'Fraunces',serif; font-weight:700; font-size:18px;}
  .footer-col h4{font-size:13px; text-transform:uppercase; letter-spacing:0.05em; color:var(--green-dark); margin-bottom:12px;}
  .footer-col ul{list-style:none; padding:0; margin:0; display:grid; gap:8px;}
  .footer-col a{text-decoration:none; font-size:13.5px; color:var(--ink); opacity:0.8;}
  .footer-col a:hover{opacity:1; color:var(--green-dark);}
  .footer-social{display:flex; gap:10px; margin-top:14px;}
  .footer-social a{width:34px; height:34px; border-radius:50%; background:var(--card); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;}
  .footer-bottom{border-top:1px solid var(--line); margin-top:36px; padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; opacity:0.7;}

  /* FLOATING BUTTONS */
  .float-wa{position:fixed; bottom:22px; right:22px; z-index:80; background:var(--whatsapp); color:#fff; width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,0.25); text-decoration:none;}
  .float-wa svg{width:28px; height:28px;}
  .float-chat{position:fixed; bottom:22px; right:92px; z-index:80; background:var(--green-dark); color:#fff; width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,0.25);}
  .float-chat svg{width:26px; height:26px;}
  .scroll-top{
    position:fixed; bottom:22px; left:22px; z-index:80; width:44px; height:44px; border-radius:50%;
    background:var(--card); border:1px solid var(--line); color:var(--green-dark); cursor:pointer;
    display:none; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,0.15);
    transition:opacity 0.3s ease;
  }
  .scroll-top.show{display:flex;}
  /* ==========================================================
   CHATBOT
   Base/mobile behavior remains unchanged.
   Desktop layout is improved separately below.
   ========================================================== */

.chat-window{
  position:fixed;
  bottom:90px;
  right:22px;
  z-index:75;
  width:320px;
  max-width:calc(100vw - 40px);
  max-height:60vh;
  background:var(--card);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,0.3);
  border:1px solid var(--line);
  display:none;
  flex-direction:column;
}

.chat-window.open{
  display:flex;
}

.chat-head{
  background:var(--green-dark);
  color:#fff;
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:14px;
}

.chat-head img{
  width:30px;
  height:30px;
  border-radius:50%;
}

.chat-head .sub{
  font-size:11px;
  font-weight:400;
  opacity:0.85;
}

.chat-close{
  margin-left:auto;
  background:none;
  border:none;
  color:#fff;
  font-size:16px;
  cursor:pointer;
  min-width:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.chat-body{
  flex:1;
  overflow-y:auto;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:220px;
}

.chat-msg{
  padding:9px 13px;
  border-radius:12px;
  font-size:13.5px;
  max-width:85%;
  line-height:1.4;
}

.chat-msg.bot{
  background:var(--paper-2);
  align-self:flex-start;
  border-bottom-left-radius:3px;
}

.chat-msg.user{
  background:var(--green-dark);
  color:#fff;
  align-self:flex-end;
  border-bottom-right-radius:3px;
}

.chat-quick{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:0 16px 10px;
}

.chat-quick button{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:6px 11px;
  font-size:12px;
  cursor:pointer;
  color:var(--ink);
}

.chat-quick button:hover{
  background:var(--paper);
}

.chat-input-row{
  display:flex;
  gap:8px;
  padding:10px 12px;
  border-top:1px solid var(--line);
  background:var(--card);
}

.chat-input-row input{
  flex:1;
  border:1px solid var(--line);
  border-radius:20px;
  padding:9px 14px;
  font-size:13.5px;
  font-family:'Inter',sans-serif;
  outline:none;
  background:var(--paper);
  color:var(--ink);
}

.chat-input-row input:focus{
  border-color:var(--green);
}

.chat-input-row button{
  background:var(--green-dark);
  color:#fff;
  border:none;
  border-radius:50%;
  width:44px;
  height:44px;
  flex-shrink:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}


/* ==========================================================
   DESKTOP CHATBOT IMPROVEMENT
   Applies only to screens 861px and wider.
   Mobile/tablet chatbot remains unchanged.
   ========================================================== */

@media (min-width:861px){

  .chat-window{
    height:min(620px,72vh);
    max-height:72vh;
  }

  .chat-body{
    flex:1 1 auto;
    min-height:0;
    max-height:none;
  }

  .chat-quick{
    flex:0 1 auto;
    max-height:150px;
    overflow-y:auto;
    min-height:0;
    border-top:1px solid var(--line);
    padding-top:8px;
  }

  .chat-input-row{
    flex-shrink:0;
  }

}
  /* SCROLL REVEAL */
  .reveal{opacity:0; transform:translateY(24px); transition:opacity 0.7s ease, transform 0.7s ease;}
  .reveal.in-view{opacity:1; transform:translateY(0);}

  a:focus-visible, button:focus-visible, summary:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

  @media (max-width: 860px){
    .nav{padding:10px 16px;}
    .brand-mark{width:42px; height:42px;}
    .brand-tag{display:none;}
    nav.main-nav ul{display:none;}
    .menu-toggle{display:flex; background:none; border:none; color:var(--green-dark); cursor:pointer; min-width:44px; min-height:44px; align-items:center; justify-content:center;}
    nav.main-nav.mobile-open{
      position:absolute; top:100%; left:0; right:0; background:var(--paper);
      border-bottom:1px solid var(--line); box-shadow:0 8px 20px rgba(0,0,0,0.08);
    }
    nav.main-nav.mobile-open ul{
      display:flex; flex-direction:column; gap:0; padding:8px 24px 16px;
    }
    nav.main-nav.mobile-open li{border-bottom:1px solid var(--line);}
    nav.main-nav.mobile-open li:last-child{border-bottom:none;}
    nav.main-nav.mobile-open a{display:block; padding:14px 4px; font-size:15px;}
    .carousel{height:auto; min-height:460px;}
    .slide{padding:28px 20px;}
    .slide-inner{flex-direction:column; text-align:center; gap:16px;}
    .slide-icon{width:96px; height:96px;}
    .slide-icon svg{width:48px; height:48px;}
    .slide-text h2{font-size:24px;}
    .hero-h1{font-size:22px;}
    .hero-cta-bar{flex-direction:column; align-items:stretch; text-align:center; margin:-30px 16px 0;}
    .cta-bar-btns, .cta-bar-badges{justify-content:center;}
    .trust-strip{grid-template-columns:1fr 1fr;}
    .trust-item{border-bottom:1px solid var(--line);}
    .about-grid{grid-template-columns:1fr;}
    .compare-grid{grid-template-columns:1fr;}
    .compare-col:first-child{border-right:none; border-bottom:1px solid var(--line);}
    .services-grid{grid-template-columns:1fr;}
    .client-types{grid-template-columns:1fr 1fr;}
    .timeline{grid-template-columns:1fr 1fr;}
    .gallery-grid, .testi-grid{grid-template-columns:1fr;}
    .timeline::before{display:none;}
    .contact-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr; gap:24px;}
  }

  /* Ultra-compact header tier — only the header changes here, nothing else.
     Below this width, the header row genuinely cannot fit all 4 controls
     (dark mode, call, WhatsApp, menu) plus branding without shrinking
     something below a usable size. WhatsApp and the menu button are kept
     full-size and always visible (most important). The dark-mode toggle
     moves into the mobile nav panel instead of disappearing — same
     function, same one-tap access, just relocated. Call is hidden from
     the header (still reachable via the footer and contact section);
     re-shown as soon as there's room, above 600px.

     Threshold is 600px, not 412px: at the original 412px cutoff, widths
     from ~413–590px (which includes real devices — e.g. iPhone 14/15 Pro
     Max at 430px CSS width) had the header's four controls at full size
     with no shrinking, which measured out to real horizontal overflow.
     600px was chosen because it's the point calculated content width
     (~569px, branding + theme toggle + Call + WhatsApp + menu button)
     reliably fits within the viewport including side padding. */
  @media (max-width: 600px){
    .nav{padding:10px 12px;}
    .brand-mark{width:36px; height:36px;}
    .brand-name{font-size:17px;}
    .nav-actions{gap:8px;}
    .theme-toggle{display:none;}
    .mobile-theme-row{display:block;}
    .nav-call{display:none;}
    /* Keep the header WhatsApp CTA as a normal pill on mobile.
       The circular buttons are only for the floating WhatsApp/chat controls. */
    .nav-wa{
      width:auto; min-width:0; height:auto;
      padding:8px 12px; border-radius:20px;
      justify-content:center; white-space:nowrap;
      display:flex; align-items:center;
    }
    .nav-wa .nav-btn-label{display:inline;}
  }
  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1; transform:none; transition:none;}
  }

/* ==========================================================
   RESPONSIVE PATCH — preserves the existing design/UI
   No SEO/HTML changes required.
   ========================================================== */

/* Prevent flex/grid children from forcing horizontal overflow. */
.nav,
.nav > *,
.nav-actions,
.hero-cta-bar,
.slide-inner,
.contact-grid,
.footer-grid,
.field-row,
.mini-cta { min-width: 0; }

/* Medium screens: give the header enough room before switching to mobile nav. */
@media (max-width: 1020px) and (min-width: 861px){
  .nav{padding-left:18px; padding-right:18px;}
  nav.main-nav ul{gap:16px;}
  .nav-actions{gap:7px;}
  .nav-call,.nav-wa{padding-left:12px; padding-right:12px;}
}

@media (max-width: 860px){
  body{overflow-x:hidden;}
  .wrap{padding-left:18px; padding-right:18px;}
  section{padding:52px 0;}

  .hero-banner-wrap{padding-top:18px !important;}
  .hero-h1{font-size:clamp(21px,5.5vw,28px); line-height:1.18;}

  /* Let the mobile slide content breathe without changing its visual style. */
  .carousel{min-height:0; height:clamp(390px,72vw,460px);}
  .slide{padding:24px 52px 44px;}
  .slide-inner{width:100%; max-width:100%;}
  .slide-text{min-width:0; width:100%;}
  .slide-text h2{font-size:clamp(21px,5.8vw,24px); overflow-wrap:anywhere;}
  .slide-text p{font-size:14px; max-width:46ch; margin-left:auto; margin-right:auto;}
  .car-arrow{width:40px; height:40px;}
  .car-arrow.prev{left:10px;}
  .car-arrow.next{right:10px;}

  .hero-cta-bar{margin-left:8px; margin-right:8px; padding:20px 18px;}
  .cta-bar-btns{width:100%;}
  .cta-bar-btns .btn-primary,
  .cta-bar-btns .btn-secondary{flex:1 1 180px; justify-content:center;}

  .trust-item{padding:18px 10px;}
  .section-head h2{font-size:clamp(25px,7vw,30px); line-height:1.2;}
  .section-head p{font-size:14.5px;}

  .about-grid{gap:32px;}
  .about-badge-ring{width:190px; height:190px;}
  .about-badge-ring-inner{width:154px; height:154px;}
  .about-badge-ring-inner img{width:112px; height:112px;}

  .service-card,.gallery-card,.testi-card{padding:22px 18px;}
  .client-types{gap:16px;}
  .map-embed{margin-top:28px;}
  .map-embed iframe{height:260px;}

  .mini-cta{padding:16px 18px;}
  .mini-cta .btn-primary{width:100%; justify-content:center;}

  .contact-left,.contact-right{padding:30px 22px;}
  .contact-line{gap:18px; align-items:flex-start;}
  .contact-line > :last-child{min-width:0; overflow-wrap:anywhere;}
  .field-row{grid-template-columns:1fr; gap:0;}
  .pill-group label{padding:11px 13px;}

  .footer-grid{grid-template-columns:1fr 1fr; gap:22px 18px;}
  .footer-bottom{flex-direction:column;}
}

/* Phones: stack controls and prevent any edge-to-edge crowding. */
@media (max-width: 600px){
  .wrap{padding-left:14px; padding-right:14px;}

  /* Header: keep the brand/logo on the left and actions on the right.
     Do not shrink the logo into the circular WhatsApp button. */
  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    gap:8px;
  }
  .brand{
    display:flex;
    align-items:center;
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
  }
  .brand-mark{
    width:42px;
    height:42px;
    flex:0 0 42px;
  }
  .brand-mark img{
    width:100%;
    height:100%;
    object-fit:contain;
  }
  .brand > div:last-child{min-width:0;}
  .brand-name{
    font-size:17px;
    white-space:nowrap;
  }
  .brand-tag{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .nav-actions{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:8px;
  }
  section{padding:44px 0;}

  .promo-bar{padding:7px 10px; gap:7px 10px; font-size:12px; line-height:1.35;}
  .promo-bar > span{max-width:calc(100% - 50px);}
  .promo-close{min-width:36px; min-height:36px;}

  .nav{padding-left:10px; padding-right:10px;}
  .brand{gap:8px; min-width:0;}
  .brand-name{white-space:nowrap;}
  .nav-actions{flex-shrink:0;}

  .carousel{height:410px;}
  .slide{padding-left:40px; padding-right:40px; padding-top:20px; padding-bottom:40px;}
  .slide-icon{width:78px; height:78px;}
  .slide-icon svg{width:42px; height:42px;}
  .slide-text h2{font-size:21px;}
  .slide-text p{font-size:13.5px; line-height:1.45;}
  .car-arrow{width:36px; height:36px; font-size:18px;}
  .car-arrow.prev{left:7px;}
  .car-arrow.next{right:7px;}

  .hero-cta-bar{margin:-20px 4px 0; padding:18px 14px; gap:14px;}
  .cta-bar-title{font-size:18px;}
  .cta-bar-badges{gap:6px;}
  .cta-bar-badges span{font-size:11px; padding:5px 9px;}
  .cta-bar-btns{flex-direction:column; gap:9px;}
  .cta-bar-btns .btn-primary,
  .cta-bar-btns .btn-secondary{width:100%; flex:none;}

  .trust-strip{grid-template-columns:1fr 1fr;}
  .trust-item{font-size:12px; padding:16px 7px;}
  .trust-item svg{width:23px; height:23px;}

  .client-types{grid-template-columns:1fr 1fr; gap:14px;}
  .client-types .n{font-size:19px;}
  .client-types .l{font-size:12px;}

  .timeline{grid-template-columns:1fr; gap:24px;}
  .tl-step{display:grid; grid-template-columns:44px 1fr; column-gap:14px; text-align:left; align-items:start;}
  .tl-dot{grid-row:span 2; margin:0;}
  .tl-step h3{padding-top:3px;}
  .tl-step p{margin-top:3px;}

  .gallery-grid,.testi-grid{gap:14px;}

  .contact-grid{border-radius:12px;}
  .contact-left,.contact-right{padding:26px 16px;}
  .contact-left h2{font-size:24px;}
  .cbtns{flex-direction:column;}
  .cbtns .btn-primary,.cbtns .btn-secondary{width:100%; justify-content:center;}
  .contact-line{font-size:13px; flex-direction:column; gap:3px;}
  .contact-line > :last-child{text-align:left !important;}

  .field input,.field select,.field textarea{font-size:16px; /* avoids iOS zoom */}
  .pill-group label{font-size:12px; padding:10px 11px;}
  .file-drop{padding:14px 10px;}

  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-bottom{font-size:11.5px;}

  .float-wa{right:14px; bottom:14px; width:54px; height:54px;}
  .float-chat{right:78px; bottom:14px; width:54px; height:54px;}
  .scroll-top{left:14px; bottom:14px;}
  .chat-window{right:10px; bottom:78px; width:calc(100vw - 20px); max-width:none; max-height:65vh;}
}

/* Very small phones (320–380px). */
@media (max-width: 380px){
  .brand-name{font-size:16px;}
  .nav-wa{width:auto; min-width:0; height:auto; padding:7px 10px; border-radius:20px;}
  .menu-toggle{min-width:40px; min-height:40px;}
  .carousel{height:400px;}
  .slide{padding-left:34px; padding-right:34px;}
  .slide-text h2{font-size:19px;}
  .slide-text p{font-size:13px;}
  .hero-h1{font-size:20px;}
  .trust-item{font-size:11.5px;}
  .footer-grid{grid-template-columns:1fr;}
}

/* ==========================================================
   MOBILE HEADER — FINAL RESPONSIVE LAYOUT
   Desktop header remains unchanged.
   Mobile gets:
   Brand + Menu
   Quick actions: Book Pickup / Call / WhatsApp
   ========================================================== */

.mobile-action-bar{
  display:none;
}

.mobile-book-row{
  display:none;
}

/* Tablet / mobile navigation */
@media (max-width: 860px){

  nav.main-nav ul{
    display:none;
  }

  .menu-toggle{
    display:flex;
    background:none;
    border:none;
    color:var(--green-dark);
    cursor:pointer;
    min-width:44px;
    min-height:44px;
    align-items:center;
    justify-content:center;
  }

  nav.main-nav.mobile-open{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    box-shadow:0 8px 20px rgba(0,0,0,0.08);
  }

  nav.main-nav.mobile-open ul{
    display:flex;
    flex-direction:column;
    gap:0;
    padding:8px 24px 16px;
  }

  nav.main-nav.mobile-open li{
    border-bottom:1px solid var(--line);
  }

  nav.main-nav.mobile-open a{
    display:block;
    padding:14px 4px;
    font-size:15px;
  }

  nav.main-nav.mobile-open li.mobile-book-row{
    border-bottom:none;
    padding:10px 0 6px;
  }

  nav.main-nav.mobile-open .mobile-book-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:44px;
    padding:10px 16px;
    border-radius:24px;
    background:var(--green);
    color:#fff;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
  }

  .mobile-theme-row{
    display:block;
  }

  .mobile-theme-btn{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:14px 4px;
  }

  /* Keep tagline available on mobile. */
  .brand-tag{
    display:block;
  }
}

/* ==========================================================
   PHONE HEADER
   ========================================================== */

@media (max-width: 600px){

  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    gap:8px;
    padding:10px 10px;
  }

  .brand{
    display:flex;
    align-items:center;
    gap:8px;
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
  }

  .brand-mark{
    width:42px;
    height:42px;
    flex:0 0 42px;
    border-radius:50%;
    overflow:hidden;
  }

  .brand-mark img{
    width:100%;
    height:100%;
    object-fit:contain;
  }

  .brand > div:last-child{
    min-width:0;
    overflow:hidden;
  }

  .brand-name{
    font-size:17px;
    line-height:1.1;
    white-space:nowrap;
  }

  .brand-tag{
    display:block;
    font-size:9.5px;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    opacity:.75;
  }

  /*
   * The old Call + WhatsApp buttons stay available for desktop.
   * Mobile uses the dedicated action bar below the brand row.
   */
  .nav-actions{
    display:flex;
    align-items:center;
    gap:6px;
    flex:0 0 auto;
  }

  .nav-actions .theme-toggle,
  .nav-actions .nav-call,
  .nav-actions .nav-wa{
    display:none;
  }

  .menu-toggle{
    display:flex;
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    padding:0;
    align-items:center;
    justify-content:center;
    flex:0 0 44px;
  }

  /* ------------------------------------------
     Mobile quick-action row
     ------------------------------------------ */

  .mobile-action-bar{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:8px;
    padding:9px 10px;
    background:var(--paper);
    border-bottom:1px solid var(--line);
  }

  .mobile-action-btn{
    min-width:0;
    min-height:42px;
    padding:8px 7px;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    text-decoration:none;
    font-size:12.5px;
    font-weight:700;
    white-space:nowrap;
    box-sizing:border-box;
  }

  .mobile-action-book{
    background:var(--green);
    color:#fff;
  }

  .mobile-action-call{
    background:var(--paper);
    color:var(--green-dark);
    border:1.5px solid var(--green-dark);
  }

  .mobile-action-whatsapp{
    background:var(--whatsapp);
    color:#fff;
  }

  /* ------------------------------------------
     Mobile menu booking CTA
     ------------------------------------------ */

  .mobile-book-row{
    display:block;
  }

  nav.main-nav.mobile-open .mobile-book-btn{
    display:flex;
  }

  /* The menu sits below the header row.
     Keep the action bar outside the menu. */
  nav.main-nav.mobile-open{
    z-index:95;
  }

  section{
    scroll-margin-top:120px;
  }
}

/* ==========================================================
   VERY SMALL PHONES
   ========================================================== */

@media (max-width: 380px){

  .nav{
    padding-left:8px;
    padding-right:8px;
  }

  .brand{
    gap:7px;
  }

  .brand-mark{
    width:40px;
    height:40px;
    flex-basis:40px;
  }

  .brand-name{
    font-size:16px;
  }

  .brand-tag{
    font-size:8.5px;
  }

  .menu-toggle{
    width:42px;
    height:42px;
    min-width:42px;
    min-height:42px;
    flex-basis:42px;
  }

  .mobile-action-bar{
    gap:5px;
    padding:8px;
  }

  .mobile-action-btn{
    min-height:40px;
    padding:7px 4px;
    font-size:11.5px;
    gap:3px;
  }
}
/* ==========================================================
   DESKTOP BOOKING BUTTON — HIDE ON MOBILE
   ========================================================== */

@media (max-width: 860px){
  .desktop-book-row{
    display:none;
  }
}

/* ==========================================================
   MOBILE CHATBOT — FINAL RESPONSIVE FIX
   Keeps header, messages, quick questions and input
   inside the mobile chatbot without overflow.
   Desktop chatbot remains unchanged.
   ========================================================== */

@media (max-width: 860px){

  .chat-window{
    right:10px;
    bottom:78px;
    width:calc(100vw - 20px);
    max-width:none;
    height:65vh;
    max-height:65vh;
    display:none;
    flex-direction:column;
    overflow:hidden;
  }

  .chat-window.open{
    display:flex;
  }

  .chat-head{
    flex:0 0 auto;
  }

  .chat-body{
    flex:1 1 auto;
    min-height:0;
    max-height:none;
    overflow-y:auto;
    overflow-x:hidden;
  }

  .chat-quick{
    flex:0 0 auto;
    max-height:150px;
    overflow-y:auto;
    overflow-x:hidden;
    padding-bottom:10px;
  }

  .chat-quick button{
    max-width:100%;
    white-space:normal;
    text-align:left;
    line-height:1.3;
  }

  .chat-input-row{
    flex:0 0 auto;
  }
}

/* Very small phones */
@media (max-width:380px){

  .chat-window{
    right:8px;
    width:calc(100vw - 16px);
    bottom:74px;
    height:66vh;
    max-height:66vh;
  }

  .chat-quick{
    max-height:135px;
  }
}