/* Coastal Lawn & Property Care — Waihi (light theme)
 *
 * Palette from the logo: black ground, pure lime #00ff00 bar, white type.
 * The page itself is white; the header and footer stay near-black because the
 * logo is white-on-black artwork and disappears on a light bar.
 *
 * Pure lime fails badly on white, so it is only ever used on the dark bands.
 * Everything on white uses --green (buttons, 5.0:1 against white) or
 * --green-dark (text and links).
 */

:root{
  --forest:#0b120c;        /* the dark bands: header, footer, logo backdrop */
  --green:#14803a;         /* solid buttons, white label on top */
  --green-dark:#0d5a27;    /* green text and links on white */
  --lime:#6ee23f;          /* accent, dark surfaces only */
  --lime-pure:#00ff00;
  --bg:#ffffff;
  --bg-soft:#f4f8f2;       /* cards */
  --bg-alt:#eef4ea;        /* alternating section bands */
  --text:#17251b;
  --text-light:#5c6f60;
  --border:#dde5d8;
  --star:#e8a300;
  --radius:10px;
  --shadow:0 12px 30px rgba(17,37,22,0.12);
  --shadow-sm:0 2px 10px rgba(17,37,22,0.07);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* overflow-x:clip (not hidden) — hidden makes html/body a scroll container,
   which silently kills position:sticky on .site-header */
html,body{overflow-x:clip;max-width:100%;}

/* Scroll-reveal system */
.reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .65s ease, transform .65s ease;
}
.reveal.in-view{opacity:1;transform:translateY(0);}

.reveal-group > *{
  opacity:0;transform:translateY(26px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal-group.in-view > *{opacity:1;transform:translateY(0);}
.reveal-group.in-view > *:nth-child(1){transition-delay:.04s;}
.reveal-group.in-view > *:nth-child(2){transition-delay:.14s;}
.reveal-group.in-view > *:nth-child(3){transition-delay:.24s;}
.reveal-group.in-view > *:nth-child(4){transition-delay:.34s;}
.reveal-group.in-view > *:nth-child(5){transition-delay:.44s;}
.reveal-group.in-view > *:nth-child(6){transition-delay:.54s;}
.reveal-group.in-view > *:nth-child(n+7){transition-delay:.6s;}

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

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.15;font-weight:800;color:var(--text);}
p{margin:0 0 1em;}
.container{max-width:1180px;margin:0 auto;padding:0 20px;}
section{padding:72px 0;}
@media (max-width:640px){
  section{padding:48px 0;}
  .container{padding:0 24px;}
  .card-body{padding:20px 20px 24px;}
}

.eyebrow{
  display:inline-block;
  background:#e8f4e2;
  color:var(--green-dark);
  border:1px solid #cbe2c1;
  padding:6px 14px;
  border-radius:999px;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.02em;
  margin-bottom:16px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 26px;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  border:2px solid transparent;
  cursor:pointer;
  font-size:1rem;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--green);color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--green-dark);}
.btn-outline{background:transparent;border-color:#fff;color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,.16);}
.btn-outline-green{background:transparent;border-color:var(--green);color:var(--green-dark);}
.btn-outline-green:hover{background:#e8f4e2;}
.btn-block{width:100%;justify-content:center;}

/* Header — light. The name bar carries its own lime ground, so it still reads
   on white; the footer keeps the dark ground because the full logo's mower is
   white artwork and would disappear here. */
.site-header{
  position:sticky;top:0;z-index:200;
  background:#fff;
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 3px rgba(17,37,22,.06);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px;max-width:1180px;margin:0 auto;gap:16px;
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;}
/* The supplied header artwork is the mower silhouette only — it carries no
   business name. So the header runs it as the mark and sets the name beside
   it as live text, which stays sharp at any size and reads on mobile. */
.brand-mark{height:46px;width:auto;display:block;flex:none;}
.brand-name{
  display:flex;flex-direction:column;justify-content:center;
  line-height:1.04;text-transform:uppercase;color:var(--text);
}
.brand-name-top{font-size:1.12rem;font-weight:800;letter-spacing:.015em;}
.brand-name-sub{
  font-size:.74rem;font-weight:700;letter-spacing:.085em;color:var(--green-dark);
}
.main-nav{display:flex;align-items:center;gap:28px;}
.main-nav a{
  position:relative;
  text-decoration:none;color:var(--text);font-weight:600;font-size:.98rem;
  padding:6px 2px;transition:color .2s ease;
}
.main-nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--green);transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
.main-nav a:hover{color:var(--green-dark);}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after{transform:scaleX(1);}
.main-nav a[aria-current="page"]{color:var(--green-dark);}
.header-actions{display:flex;align-items:center;gap:14px;}
.call-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--green);color:#fff;padding:10px 18px;border-radius:999px;
  font-weight:700;text-decoration:none;white-space:nowrap;box-shadow:var(--shadow-sm);
}
.call-btn:hover{background:#1a9a46;}
.call-btn svg{width:18px;height:18px;animation:ring 2.2s ease-in-out infinite;flex:none;}
@keyframes ring{
  0%,100%{transform:rotate(0);}
  5%{transform:rotate(18deg);}
  10%{transform:rotate(-15deg);}
  15%{transform:rotate(12deg);}
  20%{transform:rotate(-8deg);}
  25%{transform:rotate(0);}
}
.nav-toggle{
  display:none;background:none;border:2px solid var(--border);border-radius:8px;
  width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:"";display:block;width:22px;height:2px;background:var(--text);position:relative;
}
.nav-toggle span::before{position:absolute;top:-7px;}
.nav-toggle span::after{position:absolute;top:7px;}

@media (max-width:900px){
  /* The slide-out panel keeps the header's ground so the link colours above do
     not have to flip between two backgrounds. */
  .main-nav{
    position:fixed;inset:0 0 0 auto;top:71px;height:calc(100% - 71px);
    background:#fff;flex-direction:column;align-items:flex-start;gap:0;
    width:min(78vw,320px);transform:translateX(100%);transition:transform .25s ease;
    padding:20px;box-shadow:-8px 0 24px rgba(17,37,22,.16);overflow-y:auto;
    border-left:1px solid var(--border);
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav a{width:100%;padding:14px 4px;border-bottom:1px solid var(--border);}
  .nav-toggle{display:flex;}
  .call-btn .call-number{display:none;}
}
@media (max-width:560px){
  .brand-mark{height:38px;}
  .brand-name-top{font-size:.98rem;}
  .brand-name-sub{font-size:.66rem;letter-spacing:.07em;}
}
@media (max-width:380px){
  /* Below this the mark, the name and the call button cannot all fit.
     The name is the part a visitor needs, so the mark steps aside. */
  .brand-mark{display:none;}
}

/* Hero */
.hero{
  position:relative;color:#fff;background:var(--forest);overflow:hidden;
  min-height:78vh;display:flex;align-items:center;
}
/* The photo lives on its own layer so the slow zoom can be a transform.
   Animating background-size instead drops the `cover` sizing, and the photo
   then tiles down a tall viewport. */
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  animation:heroZoom 16s ease-in-out infinite alternate;
}
@keyframes heroZoom{from{transform:scale(1);}to{transform:scale(1.08);}}
@media (max-width:640px){.hero-bg{animation:none;}}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(4,12,6,.60) 0%, rgba(4,12,6,.40) 45%, rgba(4,12,6,.72) 100%);
}
.hero-inner{position:relative;z-index:2;max-width:720px;padding:60px 20px;}
.hero-inner > *{opacity:0;animation:heroIn .7s ease forwards;}
.hero-inner > *:nth-child(1){animation-delay:.05s;}
.hero-inner > *:nth-child(2){animation-delay:.18s;}
.hero-inner > *:nth-child(3){animation-delay:.32s;}
.hero-inner > *:nth-child(4){animation-delay:.46s;}
.hero-inner > *:nth-child(5){animation-delay:.6s;}
@keyframes heroIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
.hero h1{font-size:3rem;color:#fff;}
.hero p.lead{font-size:1.2rem;color:#e7efe5;max-width:560px;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;}
.hero-rating{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  background:rgba(4,12,6,.55);border:1px solid rgba(255,255,255,.35);
  padding:8px 16px;border-radius:999px;font-weight:600;font-size:.92rem;
}
@media (max-width:640px){
  .hero h1{font-size:2.1rem;}
  .hero{min-height:70vh;}
  .hero-inner{padding:56px 24px;}
}

/* Page hero (inner pages) */
.page-hero{
  background:linear-gradient(180deg,#eef5ea 0%,var(--bg) 100%);
  border-bottom:1px solid var(--border);
  padding:64px 0 56px;text-align:center;
}
.page-hero h1{font-size:2.5rem;}
.page-hero p{color:var(--text-light);max-width:640px;margin:0 auto;}
@media (max-width:640px){.page-hero h1{font-size:1.9rem;}}

/* Trust bar */
.trust-bar{background:var(--bg-alt);padding:26px 0;border-bottom:1px solid var(--border);}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;}
.trust-item{display:flex;flex-direction:column;align-items:center;gap:8px;}
.trust-item svg{width:28px;height:28px;color:var(--green);transition:transform .3s ease;}
.trust-item:hover svg{transform:scale(1.15);}
.trust-item span{font-weight:700;font-size:.95rem;}
@media (max-width:800px){.trust-grid{grid-template-columns:repeat(2,1fr);}}

/* Section headers */
.section-head{max-width:660px;margin:0 auto 40px;text-align:center;}
.section-head p{color:var(--text-light);}
.section-head.left{margin:0 0 40px;text-align:left;}

/* Cards grid */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
@media (max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid-3,.grid-2{grid-template-columns:1fr;}}

.card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#b6d4aa;}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto;transition:transform .5s ease;}
.card:hover img{transform:scale(1.07);}
.card-body{padding:20px 22px 24px;}
.card-body h3{font-size:1.1rem;}
.card-body p{color:var(--text-light);margin-bottom:0;font-size:.96rem;}
.card-body ul{margin:12px 0 0;padding-left:18px;color:var(--text-light);font-size:.94rem;}
.card-body ul li{margin-bottom:5px;}

/* Why choose us */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
@media (max-width:900px){.why-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.why-grid{grid-template-columns:1fr;}}
.why-card{
  background:#fff;border-radius:var(--radius);padding:24px 20px;text-align:center;
  border:1px solid var(--border);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.why-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:#b6d4aa;}
.why-card svg{width:34px;height:34px;color:var(--green);margin-bottom:10px;transition:transform .3s ease;}
.why-card:hover svg{transform:scale(1.15) rotate(-4deg);}
.why-card h4{font-size:1rem;margin-bottom:6px;}
.why-card p{font-size:.9rem;color:var(--text-light);margin:0;}

/* Section bg alt */
.section-alt{background:var(--bg-alt);}
/* Cards need to lift off the tinted band, so they stay pure white there. */
.section-alt .why-card,
.section-alt .card{background:#fff;}

/* Reviews — hand-placed quotes */
.review-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow-sm);
}
.stars{color:var(--star);font-size:1.1rem;letter-spacing:2px;margin-bottom:10px;}
.review-card p{color:var(--text);font-style:italic;}
.review-author{font-weight:700;color:var(--green-dark);font-style:normal;font-size:.95rem;margin-top:12px;}

/* A single pull-quote dropped inside another section */
.quote-strip{
  display:flex;gap:18px;align-items:flex-start;
  background:var(--bg-soft);border:1px solid var(--border);border-left:4px solid var(--green);
  border-radius:var(--radius);padding:22px 26px;margin-top:34px;box-shadow:var(--shadow-sm);
}
.quote-strip .quote-mark{color:var(--green);font-size:2.6rem;line-height:1;font-weight:800;flex:none;margin-top:-6px;}
.quote-strip blockquote{margin:0;font-style:italic;color:var(--text);}
.quote-strip cite{display:block;margin-top:10px;font-style:normal;font-weight:700;color:var(--green-dark);font-size:.92rem;}
.quote-strip .stars{margin-bottom:8px;}
@media (max-width:560px){.quote-strip{padding:20px;} .quote-strip .quote-mark{display:none;}}

/* The baked Google reviews block ships its own white cards, so this only sets
   the room around it.
   Four cards fill the rail, so with three reviews there is nothing to scroll
   and the arrows would just sit on top of the first and last card. Hide them
   until a fifth review exists, and centre the short row. Browsers without
   :has() simply never show the arrows; the rail still scrolls by finger and
   trackpad, so nothing is lost. */
.reviews-baked{margin-top:8px;}
.reviews-baked .gr-nav{display:none;}
.reviews-baked .gr-wrap:has(.gr-track > :nth-child(6)) .gr-nav{display:block;}
.reviews-baked .gr-track:not(:has(> :nth-child(6))){justify-content:center;}
/* Regan has five reviews and the widget lays out four across, which would put
   one off the rail behind an arrow. Narrow the cards to a fifth each so the
   whole set is on screen at once. Only on a desktop width — below this the
   widget's own 50% and 88% card widths take over. */
@media (min-width:1025px){
  .reviews-baked .gr-track:has(> :nth-child(5)):not(:has(> :nth-child(6))) .gr-card{
    flex-basis:calc(20% - 13px);
  }
}
/* On a white page the widget's own white cards need an edge to read as cards. */
.reviews-baked .gr-bar,
.reviews-baked .gr-card{border:1px solid var(--border);}

/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media (max-width:900px){.gallery-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:600px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
.gallery-grid img{
  aspect-ratio:1/1;object-fit:cover;height:auto;border-radius:8px;
  cursor:pointer;transition:transform .2s ease;border:1px solid var(--border);
}
.gallery-grid img:hover{transform:scale(1.03);}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;background:rgba(8,16,9,.92);z-index:500;
  display:none;align-items:center;justify-content:center;padding:24px;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:min(90vw,1000px);max-height:85vh;border-radius:8px;object-fit:contain;}
.lightbox-close{
  position:absolute;top:22px;right:26px;background:none;border:none;color:#fff;
  font-size:2rem;line-height:1;cursor:pointer;
}

/* About */
.about-hero{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;}
@media (max-width:800px){.about-hero{grid-template-columns:1fr;}}
.about-hero img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow);}
.about-facts{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px;}
.about-facts li{display:flex;gap:10px;align-items:flex-start;font-weight:600;}
.about-facts svg{width:20px;height:20px;color:var(--green);flex:none;margin-top:2px;}

/* Service area list */
.area-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.area-list li{
  background:#fff;border:1px solid var(--border);border-radius:999px;
  padding:8px 18px;font-weight:600;font-size:.94rem;color:var(--text);
}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.contact-info-list{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:18px;}
.contact-info-list li{display:flex;gap:14px;align-items:flex-start;}
.contact-info-list svg{width:22px;height:22px;color:var(--green);flex:none;margin-top:2px;}
.contact-info-list a{text-decoration:none;font-weight:700;color:var(--text);}
.contact-info-list a:hover{color:var(--green-dark);}
.contact-info-list span.label{display:block;font-size:.82rem;color:var(--text-light);font-weight:600;}
.map-wrap{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--border);margin-top:22px;}
.map-wrap iframe{width:100%;height:280px;border:0;display:block;}

/* Forms */
.form-card{
  background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow-sm);
}
.field{margin-bottom:16px;}
.field label{display:block;font-weight:700;font-size:.9rem;margin-bottom:6px;color:var(--text);}
.field input, .field textarea{
  width:100%;padding:13px 14px;border:1px solid #c3d3bb;border-radius:8px;
  font-size:16px;font-family:inherit;background:#fff;color:var(--text);
}
.field input::placeholder, .field textarea::placeholder{color:#8b9c85;opacity:1;}
.field input:focus, .field textarea:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green);}
/* Chrome autofill would otherwise repaint the field its own colour */
.field input:-webkit-autofill, .field input:-webkit-autofill:focus{
  -webkit-text-fill-color:#17251b;box-shadow:0 0 0 100px #fff inset;
}
.field textarea{resize:vertical;min-height:110px;}
.char-count{font-size:12px;color:var(--text-light);text-align:right;margin-top:4px;}
/* chat popup is tight on space — pull the counter up under the textarea */
.chat-panel .char-count{margin-top:-2px;}
.form-note{font-size:.82rem;color:var(--text-light);margin-top:10px;}
.form-note a{color:var(--green-dark);font-weight:700;}
.form-error{color:#b3261e;font-size:.9rem;margin-top:10px;display:none;}
.form-error.show{display:block;}
.form-success{display:none;text-align:center;padding:30px 10px;}
.form-success.show{display:block;}
.form-success svg{width:52px;height:52px;color:var(--green);margin-bottom:12px;}
.form-success p{color:var(--text-light);}
.form-success a{color:var(--green-dark);font-weight:700;}

/* CTA band */
.cta-band{
  background:linear-gradient(135deg, #0f6b2e, var(--green));
  color:#fff;text-align:center;
}
.cta-band h2{color:#fff;}
.cta-band p{color:#dcefdc;max-width:520px;margin:0 auto 26px;}

/* Footer — dark, same reason as the header: the logo needs a black ground. */
.site-footer{background:var(--forest);color:#c9dcc6;padding:50px 0 24px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;margin-bottom:34px;}
@media (max-width:700px){.footer-grid{grid-template-columns:1fr;}}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.footer-logo{height:92px;width:auto;display:block;}
.site-footer h5{color:#fff;font-size:.95rem;margin-bottom:14px;}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;}
.site-footer a{text-decoration:none;color:#a9c2a6;font-size:.94rem;}
.site-footer a:hover{color:var(--lime);}
.footer-bottom{
  border-top:1px solid #1d2a1e;padding-top:20px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
  font-size:.85rem;color:#82987d;
}
.footer-credit{color:#82987d;}
.footer-credit a{color:#8ea089;text-decoration:none;font-weight:500;}
.footer-credit a:hover{color:var(--lime);text-decoration:underline;}

/* Touch targets: on a phone every tappable thing needs ~44px of height. */
@media (max-width:900px){
  .call-btn{min-height:44px;min-width:44px;justify-content:center;}
  .site-footer ul a,
  .site-footer p a,
  .footer-bottom a,
  .contact-info-list a,
  .form-note a{display:inline-block;padding:11px 0;line-height:1.2;}
  .site-footer ul{gap:0;}
}

/* Chat widget */
.chat-toggle-wrap{
  position:fixed;bottom:22px;right:22px;z-index:400;width:64px;height:64px;
  opacity:0;animation:chatPopIn .55s cubic-bezier(.34,1.56,.64,1) .9s forwards;
}
@keyframes chatPopIn{from{opacity:0;transform:scale(.4) translateY(20px);}to{opacity:1;transform:scale(1) translateY(0);}}
.chat-toggle{
  position:relative;
  width:64px;height:64px;border-radius:50%;border:3px solid #fff;
  box-shadow:0 8px 24px rgba(17,37,22,.30);cursor:pointer;overflow:hidden;
  background:#fff;display:flex;align-items:center;justify-content:center;
  padding:0;transition:transform .2s ease;
}
.chat-toggle:hover{transform:scale(1.06);}
.online-dot{
  position:absolute;bottom:1px;right:1px;z-index:401;
  width:16px;height:16px;border-radius:50%;
  background:#2ecc57;border:3px solid #fff;
  box-shadow:0 0 0 0 rgba(46,204,87,.65);
  animation:pulseDot 2s ease-out infinite;
  pointer-events:none;
}
@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 rgba(46,204,87,.65);}
  70%{box-shadow:0 0 0 9px rgba(46,204,87,0);}
  100%{box-shadow:0 0 0 0 rgba(46,204,87,0);}
}
/* <picture> is an inline box by default; without this it collapses and the
   img inside cannot resolve its 100% height against the round button. */
.chat-toggle .avatar-img{display:block;width:100%;height:100%;}
.chat-toggle img{width:100%;height:100%;object-fit:cover;display:block;}
.chat-toggle .close-icon{display:none;color:#fff;font-size:1.6rem;line-height:1;}
/* The avatar sits on a white plate, but the close X is white — so the open
   state swaps the plate to green to keep the X readable. */
.chat-toggle.open{background:var(--green);}
.chat-toggle.open .avatar-img{display:none;}
.chat-toggle.open .close-icon{display:block;}
.chat-panel{
  position:fixed;bottom:98px;right:22px;z-index:400;
  width:min(360px,88vw);background:#fff;border-radius:14px;
  box-shadow:0 16px 46px rgba(17,37,22,.28);border:1px solid var(--border);
  display:none;flex-direction:column;overflow:hidden;max-height:80vh;
}
.chat-panel.open{display:flex;}
.chat-head{
  background:var(--green);color:#fff;padding:16px 18px;display:flex;align-items:center;gap:10px;
}
.chat-head-avatar{display:block;flex:none;}
.chat-head img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid #fff;background:#fff;}
.chat-head strong{display:block;font-size:.98rem;}
.chat-head span{display:block;font-size:.8rem;color:#d7eddb;}
.chat-body{padding:18px;overflow-y:auto;}
.chat-body p.intro{font-size:.9rem;color:var(--text-light);margin-bottom:16px;}
.chat-panel .form-card{background:transparent;border:0;padding:0;box-shadow:none;}

@media (max-width:480px){
  .chat-panel{right:12px;bottom:88px;width:92vw;}
  .chat-toggle-wrap{right:14px;bottom:14px;}
}

.skip-link{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:10px;z-index:999;}
.skip-link:focus{left:10px;}