/* Shared site shell enhancements: mega dropdown + active link styling */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300..800&display=swap');

/*
  Canonical header theming (matches index.html)
  Many pages define their own :root brand variables for page theming.
  We lock the header + topbar to site-wide values so the header looks identical everywhere.
*/
:root{
  --site-brand:#75bf53;
  --site-brand-2:#75bf53;
  --site-brand-dark:#304857;
  --site-brand-900:#1b2c36;
  --site-brand-soft:rgba(117,191,83,.16);
  --site-ink:var(--site-brand-900);
}

/* Force header/topbar to always use the site palette (even if the page theme overrides --brand*) */
.topbar,
header,
header nav,
.nav-mega{
  --brand:var(--site-brand);
  --brand-2:var(--site-brand-2);
  --brand-dark:var(--site-brand-dark);
  --brand-900:var(--site-brand-900);
  --brand-soft:var(--site-brand-soft);
  --ink:var(--site-ink);
}

/* Drawer behavior should match the homepage everywhere */
body.nav-open{overflow:hidden}

/* Mobile header rules (hide topbar + proposal CTA) */
@media(max-width:980px){
  .topbar{display:none !important;}
  header .header-actions > a.btn,
  header .header-actions a.btn{display:none !important;}

  /* If any CTA is injected into the drawer, keep it hidden too */
  .mobile-nav-extras .mobile-cta,
  .mobile-nav-extras .mobile-cta a.btn{display:none !important;}
}

/* Desktop: hide hamburger (desktop uses inline nav) */
@media(min-width:981px){
  .menu-toggle{display:none !important;}
}

/* Ensure the close button/backdrop exist visually even on pages missing inline styles */
/* Important: keep backdrop below the (sticky) header/nav so menu links remain clickable */
.nav-backdrop{position:fixed;inset:0;background:rgba(2,8,23,.55);opacity:0;pointer-events:none;transition:.18s ease;z-index:60}
body.nav-open .nav-backdrop{opacity:1;pointer-events:auto}

/* Avoid floating UI covering the drawer */
body.nav-open .chat-widget{display:none}

.nav-close{display:none}
@media(max-width:980px){
  .nav-close{display:grid;place-items:center;position:absolute;
    top:calc(env(safe-area-inset-top, 0px) + 14px);right:14px;
    width:44px;height:44px;border:none;border-radius:12px;cursor:pointer;
    background:rgba(2,8,23,.06);color:var(--ink);font-size:24px;line-height:1
  }
  .nav-close:focus-visible{outline:3px solid rgba(117,191,83,.55);outline-offset:3px}

  /* Normalize drawer stacking + motion (some pages define different z-index/transform) */
  header{z-index:70}
  /* Override desktop mega-menu positioning (header nav is forced to static above) */
  header nav[aria-label="Primary"],
  nav#primary-nav{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:min(340px, 88vw);
    background:#fff;
    box-shadow:-20px 0 60px rgba(2,8,23,.18);
    padding:calc(env(safe-area-inset-top, 0px) + 72px) 18px 18px;
  }
  nav#primary-nav{z-index:90;transform:translate3d(105%,0,0);transition:transform .22s ease;
    visibility:hidden;pointer-events:none;will-change:transform;
    overflow:auto;-webkit-overflow-scrolling:touch
  }
  body.nav-open nav#primary-nav{transform:translate3d(0,0,0);visibility:visible;pointer-events:auto}
}

/* Prevent accidental horizontal scrolling site-wide */
html, body{max-width:100%}
body{overflow-x:hidden}

/* Global typography */
html, body{font-family:'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important}
button, input, select, textarea{font-family:inherit !important}

/* Justify paragraph text for a cleaner editorial look */
p{text-align:justify;text-justify:inter-word;hyphens:auto}
@media(max-width:700px){p{text-align:left;hyphens:none}}

/* ===== KICKERS / EYEBROWS (site-wide) =====
  Many pages define kicker sizes inline (often 12px).
  This rule standardizes all kickers across the site.
*/
:root{--kicker-size:20px}
/* Targets common kicker patterns: .kicker, .ceo-kicker, .directory-kicker, .pd-nav-kicker, etc. */
[class*="kicker"],
.eyebrow{
  font-size:var(--kicker-size) !important;
}

/* ===== INNER PAGE BANNERS (match about.html styling) =====
  Applies to all inner-page banners using .inner-hero.
  Homepage hero is excluded (it uses .hero, not .inner-hero).
*/
.inner-hero{position:relative;min-height:380px;overflow:hidden;isolation:isolate;color:#fff;display:flex;align-items:center;justify-content:center;padding:120px 24px 110px;margin:0 auto}
.inner-hero::before{content:'';position:absolute;inset:0;background:var(--hero-bg-image, url('https://images.unsplash.com/photo-1494526585095-c41746248156?q=80&w=2400&auto=format&fit=crop')) center/cover no-repeat;transform:scale(1.02);z-index:-2}
.inner-hero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(11,42,27,.35), rgba(11,42,27,.05)),
             linear-gradient(180deg, rgba(11,42,27,.55), rgba(11,42,27,.10));
  mix-blend-mode:multiply;
  z-index:-1
}
.inner-hero-inner{position:relative;z-index:1;text-align:center;display:grid;gap:12px;max-width:1200px}
.inner-hero .breadcrumbs{color:rgba(255,255,255,.85);font-weight:500;font-size:14px;display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.inner-hero .breadcrumbs a{color:inherit;text-decoration:none}
.inner-hero .breadcrumbs a:hover{text-decoration:underline}
.inner-hero .crumb-sep{opacity:.85}
.inner-hero .inner-hero-title,
.inner-hero h1{color:#fff;font-size:46px;line-height:1.1;margin:0;font-weight:800;letter-spacing:-.02em}

/* Banner content should be breadcrumb + heading only */
.inner-hero .inner-hero-lead{display:none !important}

@media(max-width:980px){
  .inner-hero{padding:96px 18px 82px}
  .inner-hero .inner-hero-title,
  .inner-hero h1{font-size:40px}
}
@media(max-width:560px){
  .inner-hero{min-height:320px;padding:84px 18px 72px}
  .inner-hero .inner-hero-title,
  .inner-hero h1{font-size:32px}
}

/* Active state (header + footer) */
header nav a[aria-current="page"],
header nav a.is-active{
  color:var(--brand) !important;
  font-weight:800;
}
header nav a[aria-current="page"]::after,
header nav a.is-active::after{
  opacity:1;
  background:var(--brand) !important;
}

/* Footer titles should use theme green (some pages set these to white inline) */
.site-footer .footer-title{
  color:var(--brand) !important;
}

/* Canonical footer styling (match index.html everywhere) */
.site-footer{
  --footer-bg:var(--site-brand-dark);
  --footer-bg-2:var(--site-brand-dark);
  --footer-text:rgba(255,255,255,.82);
  --footer-muted:rgba(255,255,255,.60);
  --footer-line:rgba(255,255,255,.12);
  --footer-pill:rgba(255,255,255,.08);

  position:relative;
  background:radial-gradient(1100px 620px at 86% 25%, rgba(255,255,255,.08), transparent 60%), var(--footer-bg) !important;
  color:#fff !important;
  overflow:hidden;
}
.site-footer::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(480px 380px at 78% 55%, rgba(255,255,255,.06), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.06));
  pointer-events:none;
}

.site-footer .footer-inner{position:relative;max-width:1200px;margin:auto;padding:46px 40px 26px}
.site-footer .footer-top{display:flex;align-items:center;justify-content:space-between;gap:20px}
.site-footer .footer-social{display:flex;gap:12px}
.site-footer .footer-social a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--footer-pill);color:#fff;text-decoration:none;transition:.2s ease}
.site-footer .footer-social a svg{width:18px;height:18px;display:block}
.site-footer .footer-social a:hover{transform:translateY(-1px);background:rgba(255,255,255,.14)}

.site-footer .footer-divider{height:1px;background:var(--footer-line);margin:26px 0 36px}
.site-footer .footer-grid{display:grid;grid-template-columns:1.05fr .9fr .95fr 1.6fr;gap:46px;align-items:start}
.site-footer .footer-title{font-size:18px;font-weight:700;margin-bottom:18px}
.site-footer .footer-contact{display:flex;flex-direction:column;gap:14px;color:var(--footer-text)}
.site-footer .footer-contact .item{display:flex;gap:12px;align-items:flex-start}
.site-footer .footer-contact .value{line-height:1.35}
.site-footer .footer-contact .address{margin-top:12px;color:var(--footer-muted);line-height:1.7}

.site-footer .footer-links{list-style:none;display:flex;flex-direction:column;gap:12px}
.site-footer .footer-links a{color:var(--footer-text);text-decoration:none}
.site-footer .footer-links a:hover{color:#fff;text-decoration:underline}

.site-footer .footer-cta p{color:var(--footer-muted) !important;margin-bottom:16px}
.site-footer .subscribe{display:flex;align-items:stretch;border-radius:4px;overflow:hidden;max-width:640px}
.site-footer .subscribe input{flex:1;border:none;outline:none;padding:18px 18px;font-size:14px}
.site-footer .subscribe button{border:none;background:var(--brand);color:#fff;font-weight:700;padding:0 34px}

.site-footer .footer-bottom{padding:18px 40px 30px;text-align:center;font-size:13px}

@media(max-width:980px){
  .site-footer .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .site-footer .footer-cta{grid-column:1/-1}
  .site-footer .subscribe{max-width:none}
}
@media(max-width:560px){
  .site-footer .footer-inner{padding:38px 18px 18px}
  .site-footer .footer-bottom{padding:16px 18px 28px}
  .site-footer .footer-top{flex-direction:column;align-items:flex-start}
  .site-footer .footer-grid{grid-template-columns:1fr}
}

/* Keep the main footer CTA heading white */
.site-footer .footer-cta h3{
  color:#fff !important;
}

/* Hover color: header + footer links should turn theme green */
header nav a:hover{
  color:var(--brand) !important;
}

/* Footer: keep underline on hover, add green color */
.site-footer .footer-links a:hover,
.site-footer .footer-contact a:hover{
  color:var(--brand) !important;
  text-decoration:underline !important;
}

/* Topbar: location link hover should not change color */
.topbar a[data-topbar-location]:hover{
  color:inherit !important;
  text-decoration:underline !important;
  text-underline-offset:4px;
  text-decoration-thickness:2px;
}

/* Remove phone from the header navigation area (phone lives in the topbar only) */
header .header-actions .contact{display:none !important;}

/* Footer bottom should stay white (copyright line) */
.site-footer .footer-bottom,
.site-footer .footer-bottom p,
.site-footer .footer-bottom span{
  color:#fff !important;
}

.site-footer a[aria-current="page"],
.site-footer a.is-active{
  color:var(--site-brand);
  text-decoration:underline;
  text-underline-offset:4px;
}

/* Footer logo: make it read better on dark backgrounds */
.site-footer .footer-brand img{
  border-radius:12px !important;
  padding:8px 10px !important;
  background:rgba(255,255,255,.92) !important;
  box-shadow:0 12px 26px rgba(2,8,23,.22) !important;
}

/* Footer contact links should match footer text (avoid green/outlined auto-link styling) */
.site-footer .footer-contact a,
.site-footer .footer-contact a[href^="mailto:"],
.site-footer .footer-contact a[href^="tel:"]{
  color:inherit;
  text-decoration:none;
  box-shadow:none;
}
.site-footer .footer-contact a:hover{text-decoration:underline}
.site-footer .footer-contact a:focus-visible{
  outline:3px solid rgba(117,191,83,.6);
  outline-offset:4px;
  border-radius:8px;
}

/* Footer contact icons should be white (some pages set them to brand green). */
.site-footer .footer-contact .ico{
  color:rgba(255,255,255,.9) !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
.site-footer .footer-contact .ico svg{color:inherit}

/* iOS Safari auto-detected phone/email links */
.site-footer a[x-apple-data-detectors],
.site-footer a[x-apple-data-detectors-type],
.site-footer a[href^="tel:"],
.site-footer a[href^="mailto:"]{
  color:inherit !important;
  text-decoration:none !important;
}

/* Mega dropdown */
/* Default: injected mobile-only content should never affect desktop layout */
.mobile-nav-extras{display:none}

:root{
  --mega-fade:220ms;
  --mega-hide-delay:280ms;
}

/* Make the mega panel position relative to the full header so the dropdown never overflows
  when the <nav> only takes the width of its items. */
header{position:relative}
header nav[aria-label="Primary"]{position:static}
header nav[aria-label="Primary"] ul{position:static}
/* Make the mega panel position relative to the whole nav (not the single li)
  so it stays inside the viewport. */
nav li.has-submenu{position:static}

nav li.has-submenu > a{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
nav li.has-submenu > a::after{
  content:'▾';
  font-size:12px;
  opacity:.75;
  transform:translateY(-1px);
}

.nav-mega{
  position:absolute;
  left:50%;
  right:auto;
  top:100%;
  transform:translate(-50%, 8px);
  width:min(1100px, calc(100vw - 32px));
  /* Hover bridge: prevents the menu from disappearing while moving the cursor
     from the trigger down to the panel. */
  padding-top:14px;
  background:transparent;
  border:none;
  box-shadow:none;
  opacity:0;
  visibility:hidden;
  /* Keep interactive while fading out; visibility prevents "ghost" hover/clicks once hidden. */
  pointer-events:auto;
  transition:
    opacity var(--mega-fade) ease var(--mega-hide-delay),
    transform var(--mega-fade) ease var(--mega-hide-delay),
    visibility 0s linear calc(var(--mega-fade) + var(--mega-hide-delay));
  z-index:90;
}

/* Guardrails: some pages use `nav li.has-submenu a` (too broad) which styles mega links.
   Force mega links to be plain list links like the homepage. */
nav li.has-submenu .nav-mega a{
  display:block !important;
  align-items:initial !important;
}
nav li.has-submenu .nav-mega a::after{
  content:none !important;
}

/* Header: keep content visible without horizontal scroll */
header{max-width:100%}
header .logo{min-width:0;flex:0 1 auto}
header .logo picture, header .logo img{display:block;max-width:100%}
/* Slightly reduce logo so desktop nav fits in one row */
header .logo img{max-width:min(220px, 38vw)}
@media(min-width:981px){
  header .logo img{height:44px !important;width:auto !important}
}
header nav[aria-label="Primary"]{min-width:0;flex:1 1 auto}
/* Desktop: keep the primary nav in one line */
header nav[aria-label="Primary"] ul{flex-wrap:nowrap !important;min-width:0;gap:20px}
header nav[aria-label="Primary"] ul > li{flex:0 0 auto}
header nav[aria-label="Primary"] > ul,
header nav[aria-label="Primary"] a{white-space:nowrap}
header .header-actions{flex:0 0 auto}
header .header-actions .btn{white-space:nowrap}

/* Hide hamburger on desktop (some pages define it inline, so use !important) */
@media(min-width:981px){
  header .menu-toggle{display:none !important}
}

/* Mid-width desktops: allow header to wrap instead of overflowing */
@media(min-width:981px) and (max-width:1240px){
  header{gap:14px}
  header nav[aria-label="Primary"] ul{gap:14px}
  header nav[aria-label="Primary"] a{font-size:13px;white-space:nowrap}
  header .header-actions strong{font-size:14px}
  header .header-actions .btn{font-size:13px;padding:10px 14px}
}

/* Mobile: hide topbar + proposal CTA; keep hamburger visible */
@media(max-width:980px){
  .topbar{display:none !important}
  header .header-actions > a.btn,
  header .header-actions a.btn{display:none !important;}
  header{position:sticky;top:0;z-index:70;box-shadow:0 12px 30px rgba(2,8,23,.08)}
  header{padding:14px 18px !important}
  header .menu-toggle{display:grid !important}

  /* Drawer extras are not used on the homepage; keep them hidden site-wide */
  .mobile-nav-extras{display:none !important}
  .mobile-nav-extras{margin-top:18px;padding-top:18px;border-top:1px solid #e5e7eb}
  .mobile-nav-extras .mobile-cta{display:flex;gap:10px;flex-direction:column}
  .mobile-nav-extras .btn{display:inline-flex;justify-content:center;align-items:center;text-decoration:none;border-radius:10px}
  .mobile-nav-extras .mobile-meta{margin-top:14px;display:flex;flex-direction:column;gap:10px;color:rgba(2,8,23,.72);font-size:13px;line-height:1.35}
  .mobile-nav-extras .mobile-meta a{color:inherit;text-decoration:none}
  .mobile-nav-extras .mobile-meta a:hover{text-decoration:underline}
  .mobile-nav-extras .mobile-social{display:flex;gap:10px;margin-top:6px}
  .mobile-nav-extras .mobile-social a{width:38px;height:38px;border-radius:999px;display:grid;place-items:center;background:rgba(2,8,23,.06)}
  .mobile-nav-extras .mobile-social a:hover{background:rgba(2,8,23,.10)}
  .mobile-nav-extras .mobile-social svg{width:16px;height:16px;display:block}
}

.nav-mega::before{
  /* Remove the pointer/arrow entirely (requested). */
  content:none;
  display:none;
}

.nav-mega-inner{
  padding:22px 22px;
  background:#fff;
  border:1px solid rgba(148,163,184,.45);
  border-radius:14px;
  box-shadow:0 22px 55px rgba(2,8,23,.14);
}
.nav-mega-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:26px;
}

/* Desktop: distribute items evenly (9 services => 3 per column) without needing
   per-page HTML edits. */
@media(min-width:981px){
  /* Flatten existing column wrappers so links become direct grid items. */
  .nav-mega-grid .nav-col{display:contents}

  .nav-mega-grid{
    grid-template-columns:repeat(3, minmax(240px, 1fr));
    grid-template-rows:repeat(3, auto);
    grid-auto-flow:column;
    gap:6px 26px;
    padding:0 18px;

    /* Column dividers (replaces the old per-.nav-col borders). */
    background-image:
      linear-gradient(
        to right,
        transparent calc(33.333% - .5px),
        rgba(148,163,184,.35) calc(33.333% - .5px),
        rgba(148,163,184,.35) calc(33.333% + .5px),
        transparent calc(33.333% + .5px)
      ),
      linear-gradient(
        to right,
        transparent calc(66.666% - .5px),
        rgba(148,163,184,.35) calc(66.666% - .5px),
        rgba(148,163,184,.35) calc(66.666% + .5px),
        transparent calc(66.666% + .5px)
      );
    background-repeat:no-repeat;
    background-size:100% 100%;
  }

  /* Neutralize old column spacing rules (wrappers are now display:contents). */
  .nav-col{padding:0}
  .nav-col + .nav-col{border-left:none}
}

/* Dropdown links should wrap naturally for long names */
.nav-col a{white-space:normal;line-height:1.25;overflow-wrap:break-word}
.nav-col a .arr{display:none}

/* Prevent mega menu from being clipped on short viewports */
.nav-mega-inner{max-height:calc(100vh - 160px);overflow:auto}

.nav-col-title{
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand-dark);
  margin-bottom:12px;
}

.nav-col{padding:0 18px}
.nav-col + .nav-col{border-left:1px solid rgba(148,163,184,.35)}

.nav-col a{
  display:block;
  padding:10px 10px;
  border-radius:10px;
  text-decoration:none;
  color:var(--ink);
  font-weight:600;
  font-size:14px;
  transition:.15s ease;
}

.nav-col a:hover{background:rgba(117,191,83,.12)}
.nav-col a:focus-visible{outline:3px solid rgba(117,191,83,.55);outline-offset:3px}

.nav-col a .arr{opacity:.65;flex:0 0 auto}

nav li.has-submenu:hover .nav-mega,
nav li.has-submenu:focus-within .nav-mega{
  opacity:1;
  visibility:visible;
  transition-delay:0s, 0s, 0s;
  transform:translate(-50%, 0);
}

/* Mobile: make dropdown sections toggleable */
@media(max-width:980px){
  .nav-mega{
    position:static;
    left:auto !important;
    right:auto !important;
    top:auto;
    width:100%;
    max-width:100%;
    transform:none !important;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    border:none;
    box-shadow:none;
    padding:0;
    margin:8px 0 14px;
    display:none;
    overflow:hidden;
  }
  .nav-mega::before{display:none}
  .nav-mega-inner{padding:0}
  .nav-mega-grid{grid-template-columns:1fr;gap:12px}
  .nav-col{border-right:none;padding-right:0;border-top:1px solid #e5e7eb;padding-top:10px}
  .nav-col:first-child{border-top:none;padding-top:0}
  .nav-col + .nav-col{border-left:none}

  nav li.has-submenu.submenu-open .nav-mega{display:block}
  nav li.has-submenu > a{justify-content:space-between;width:100%}

  /* Inserted by JS so users can still reach the overview page */
  .nav-overview-link{
    display:block;
    margin:0 0 10px;
    padding:10px 10px;
    border-radius:10px;
    text-decoration:none;
    color:var(--ink);
    font-weight:800;
    font-size:14px;
    border:1px solid rgba(117,191,83,.30);
    background:rgba(117,191,83,.08)
  }
  .nav-overview-link:hover{background:rgba(117,191,83,.12)}
}

/* Floating contact/chat widget (site-wide) */
.chat-widget{position:fixed;right:20px;bottom:16px;z-index:1200;font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
@supports (bottom: max(1px, 2px)){
  .chat-widget{
    right:max(12px, calc(env(safe-area-inset-right, 0px) + 12px));
    bottom:max(12px, calc(env(safe-area-inset-bottom, 0px) + 12px))
  }
}

.chat-fab{width:58px;height:58px;border-radius:999px;border:none;cursor:pointer;display:grid;place-items:center;
  background:radial-gradient(120px 80px at 30% 30%, #75bf53, var(--brand, #75bf53));
  box-shadow:0 16px 44px rgba(2,8,23,.26);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease
}
.chat-fab:hover{transform:translateY(-1px);box-shadow:0 20px 55px rgba(2,8,23,.28);filter:saturate(1.03)}
.chat-fab:active{transform:translateY(0)}
.chat-fab:focus-visible{outline:3px solid rgba(117,191,83,.55);outline-offset:4px}
.chat-fab svg{width:28px;height:28px;color:#fff;display:block}

.chat-panel{position:absolute;right:0;bottom:74px;width:360px;max-width:min(92vw, 360px);
  background:#fff;border-radius:18px;overflow:hidden;
  border:1px solid rgba(148,163,184,.45);
  box-shadow:0 26px 70px rgba(2,8,23,.22);
  transform:translateY(10px);opacity:0;pointer-events:none;transition:.18s ease;
  display:flex;flex-direction:column
}
/* Use dynamic viewport units when supported (mobile browser UI safe). */
.chat-panel{max-height:calc(100dvh - 120px)}
@supports not (height: 100dvh){
  .chat-panel{max-height:calc(100vh - 120px)}
}
.chat-widget.is-open .chat-panel{opacity:1;pointer-events:auto;transform:translateY(0)}

.chat-header{position:relative;padding:16px 16px 18px;color:#fff;
  background:linear-gradient(135deg, #75bf53, var(--brand, #75bf53));
}
.chat-header::after{content:'';position:absolute;left:-8%;right:-8%;bottom:-18px;height:46px;
  background:radial-gradient(70px 50px at 12% 20%, rgba(255,255,255,.22), transparent 60%),
             radial-gradient(80px 55px at 42% 40%, rgba(255,255,255,.18), transparent 62%),
             radial-gradient(90px 58px at 76% 30%, rgba(255,255,255,.16), transparent 62%);
  opacity:.85;border-bottom-left-radius:20px;border-bottom-right-radius:20px
}
.chat-header-row{position:relative;display:flex;align-items:flex-start;gap:10px;z-index:1}
.chat-header-back{width:36px;height:36px;border:none;border-radius:10px;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:grid;place-items:center;flex:0 0 auto}
.chat-header-back:hover{background:rgba(255,255,255,.18)}
.chat-header-close{margin-left:auto;width:36px;height:36px;border:none;border-radius:10px;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:grid;place-items:center;flex:0 0 auto}
.chat-header-close:hover{background:rgba(255,255,255,.18)}
.chat-title{margin:0;font-size:20px;font-weight:800;line-height:1.1}
.chat-subtitle{margin-top:6px;font-size:12px;line-height:1.4;color:rgba(255,255,255,.88)}

.chat-body{padding:18px 14px 14px;overflow:auto;min-height:0;flex:1}
.chat-menu{display:flex;flex-direction:column;gap:10px}
.chat-option{width:100%;display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;
  border:1px solid rgba(148,163,184,.35);background:#fff;color:var(--ink, #1b2c36);text-align:left;cursor:pointer;
  transition:.15s ease
}
.chat-option:hover{background:rgba(117,191,83,.10)}
.chat-option:focus-visible{outline:3px solid rgba(117,191,83,.55);outline-offset:3px}
.chat-ico{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;color:#fff;flex:0 0 auto}
.chat-ico svg{width:18px;height:18px;display:block}
.chat-option strong{display:block;font-size:14px;font-weight:800}
.chat-option span{display:block;font-size:12px;color:rgba(2,8,23,.58);margin-top:2px}

.chat-convo{display:flex;flex-direction:column;min-height:0;flex:1;height:auto}
.chat-messages{flex:1;overflow:auto;padding:8px 4px 12px}
.chat-bubble{max-width:88%;padding:10px 12px;border-radius:14px;font-size:13px;line-height:1.45}
.chat-bubble.them{background:#f3f6fb;border:1px solid rgba(148,163,184,.28);color:rgba(2,8,23,.82)}
.chat-messages .chat-bubble{margin:0 6px 10px}

.chat-compose{border-top:1px solid rgba(148,163,184,.25);padding:10px 8px 8px;display:flex;gap:10px;align-items:flex-end}
.chat-input{flex:1;min-height:44px;max-height:110px;resize:none;border-radius:14px;border:1px solid rgba(148,163,184,.35);
  padding:10px 12px;font:500 13px/1.4 'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;outline:none
}
.chat-input:focus{border-color:rgba(117,191,83,.6);box-shadow:0 0 0 4px rgba(117,191,83,.16)}
.chat-send{width:44px;height:44px;border:none;border-radius:14px;cursor:pointer;display:grid;place-items:center;
  background:var(--brand, #75bf53);color:#fff;box-shadow:0 12px 26px rgba(117,191,83,.24)
}
.chat-send:hover{filter:saturate(1.04)}
.chat-send:focus-visible{outline:3px solid rgba(117,191,83,.55);outline-offset:3px}
.chat-send svg{width:18px;height:18px;display:block}

.chat-hidden{display:none !important}

/* Ensure the back-to-top button doesn't overlap the chat widget */
.back-to-top{bottom:92px !important}

@media(max-width:560px){
  .chat-widget{right:12px;bottom:12px}
  .chat-panel{bottom:70px;width:min(92vw, 380px)}
  /* On small screens, lock the OPEN panel inside the viewport (no clipping). */
  .chat-widget.is-open .chat-panel{
    position:fixed;
    left:max(12px, calc(env(safe-area-inset-left, 0px) + 12px));
    right:max(12px, calc(env(safe-area-inset-right, 0px) + 12px));
    top:max(12px, calc(env(safe-area-inset-top, 0px) + 12px));
    bottom:calc(max(12px, calc(env(safe-area-inset-bottom, 0px) + 12px)) + 74px);
    width:auto;
    max-width:none;
    max-height:none;
  }
  .chat-convo{height:min(62vh, 420px)}
  .back-to-top{bottom:86px !important}
}

@media(max-width:420px){
  .chat-panel{left:0;right:0;margin:0 auto;width:calc(100vw - 24px)}
  .chat-compose{gap:8px}
  .chat-input{min-height:42px}
  .chat-send{width:42px;height:42px}
}

@media(max-height:560px){
  /* Landscape / short-height screens: keep the open panel fully on-screen. */
  .chat-widget.is-open .chat-panel{
    position:fixed;
    left:max(12px, calc(env(safe-area-inset-left, 0px) + 12px));
    right:max(12px, calc(env(safe-area-inset-right, 0px) + 12px));
    top:max(12px, calc(env(safe-area-inset-top, 0px) + 12px));
    bottom:calc(max(12px, calc(env(safe-area-inset-bottom, 0px) + 12px)) + 74px);
    width:auto;
    max-width:none;
    max-height:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .chat-panel,.chat-fab{transition:none}
}

@media print{.chat-widget{display:none}}