/* ============================================================
   Hanoi Motorbike Rental — Black / White / Orange design system
   Light: white surfaces, black text, orange accent
   Dark:  black surfaces, white text, orange accent
   ============================================================ */

:root{
  /* spacing tokens */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px; --s16:64px;

  /* radius */
  --r-sm:10px; --r-md:14px; --r-lg:18px;

  /* layout */
  --container:1180px;
  --article:780px;

  /* light palette (default) */
  --bg:#f7f7f5;
  --surface:#ffffff;
  --surface-2:#f1f1ee;
  --text:#111111;
  --muted:#626262;
  --brand:#f97316;
  --brand-hover:#ea580c;
  --brand-soft:rgba(249,115,22,.10);
  --border:rgba(0,0,0,.10);
  --ok:#16a34a;
  --head-bg:rgba(255,255,255,.86);
  --shadow:0 2px 10px rgba(0,0,0,.06);
  --shadow-lg:0 10px 32px rgba(0,0,0,.10);
}

html[data-theme="dark"]{
  --bg:#090909;
  --surface:#111111;
  --surface-2:#181818;
  --text:#f7f7f7;
  --muted:#a8a8a8;
  --brand:#fb923c;
  --brand-hover:#f97316;
  --brand-soft:rgba(251,146,60,.12);
  --border:rgba(255,255,255,.11);
  --ok:#22c55e;
  --head-bg:rgba(9,9,9,.86);
  --shadow:0 2px 10px rgba(0,0,0,.45);
  --shadow-lg:0 10px 32px rgba(0,0,0,.55);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%}
h1,h2,h3{line-height:1.25;margin:0 0 var(--s3)}
h1{font-size:clamp(1.9rem,4.5vw,2.75rem);font-weight:700;letter-spacing:-.02em}
h2{font-size:clamp(1.4rem,3vw,1.85rem);font-weight:700;letter-spacing:-.01em}
h3{font-size:1.08rem;font-weight:600}
p{margin:0 0 var(--s3)}
a{color:var(--brand-hover);text-decoration:none}
a:hover{color:var(--brand)}
ul{margin:0 0 var(--s3);padding-left:1.25em}

:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

.muted{color:var(--muted)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--brand);color:#111;padding:var(--s2) var(--s4);
  border-radius:0 0 var(--r-sm) 0;font-weight:600;
}
.skip-link:focus{left:0}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:44px;padding:0 var(--s6);
  border-radius:12px;border:1px solid transparent;
  font:inherit;font-weight:600;cursor:pointer;text-align:center;
  transition:background .15s,color .15s,border-color .15s,transform .1s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand);color:#111}
.btn-primary:hover{background:var(--brand-hover);color:#111}
.btn-secondary{background:transparent;color:var(--text);border-color:var(--brand)}
.btn-secondary:hover{background:var(--brand-soft);color:var(--brand-hover)}

.btn-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;min-width:44px;
  background:transparent;border:1px solid var(--border);border-radius:12px;
  color:var(--text);cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.btn-icon:hover{background:var(--surface-2);border-color:var(--brand);color:var(--brand-hover)}

/* ============ Header ============ */
.site-head{
  position:sticky;top:0;z-index:100;
  background:var(--head-bg);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-shell{
  max-width:var(--container);margin:0 auto;
  padding:0 var(--s4);
  display:flex;align-items:center;gap:var(--s4);
  height:64px;
}
.brand{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--text);font-weight:700;font-size:1rem;white-space:nowrap;
}
.brand:hover{color:var(--brand-hover)}
.brand-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:0 0 34px;
  border-radius:10px;overflow:hidden;
  background:var(--surface);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.brand-ico img{display:block;width:100%;height:100%;object-fit:cover}
.brand-sub{
  display:block;font-size:.75rem;font-weight:400;color:var(--muted);letter-spacing:.02em;
}

.main-nav{display:flex;align-items:center;gap:var(--s1);margin-left:auto}
.nav-link{
  display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
  color:var(--text);font-weight:500;border-radius:var(--r-sm);white-space:nowrap;
  transition:color .15s,background .15s;
}
.nav-link:hover{color:var(--brand-hover);background:var(--brand-soft)}
.nav-group{position:relative}
.nav-drop{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;
  padding:0 12px;border:0;background:transparent;color:var(--text);
  font:inherit;font-weight:500;cursor:pointer;border-radius:var(--r-sm);
  transition:color .15s,background .15s;
}
.nav-drop:hover,.nav-drop[aria-expanded="true"]{color:var(--brand-hover);background:var(--brand-soft)}
.nav-drop[aria-expanded="true"] .chev{transform:rotate(180deg)}
.chev{transition:transform .18s;flex:none}

.dropdown{
  position:absolute;top:calc(100% + 6px);left:0;z-index:110;
  min-width:250px;padding:var(--s1);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  display:none;
}
.nav-group.open .dropdown{display:block}
.dd-link{
  display:block;min-height:44px;padding:10px var(--s3);
  color:var(--text);border-radius:var(--r-sm);font-weight:400;
  transition:background .12s,color .12s;
}
.dd-link:hover{background:var(--brand-soft);color:var(--brand-hover)}

.nav-actions{display:flex;align-items:center;gap:var(--s2);margin-left:auto}
.nav-cta{
  display:inline-flex;align-items:center;min-height:40px;padding:0 var(--s4);
  background:var(--brand);color:#111;font-weight:600;
  border-radius:12px;white-space:nowrap;
  transition:background .15s;
}
.nav-cta:hover{background:var(--brand-hover);color:#111}

.theme-ico-moon{display:none}
html[data-theme="dark"] .theme-ico-moon{display:block}
html[data-theme="dark"] .theme-ico-sun{display:none}

.menu-toggle{display:none}

/* ============ Drawer (mobile/tablet) ============ */
.drawer{
  position:fixed;inset:0;z-index:150;
  visibility:hidden;pointer-events:none;
}
.drawer[hidden]{display:none!important}
.drawer.open,.drawer.closing{visibility:visible}
.drawer.open{pointer-events:auto}
.drawer-backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.5);
  opacity:0;
  transition:opacity .24s ease;
}
.drawer.open .drawer-backdrop{opacity:1}
.drawer.closing .drawer-backdrop{opacity:0}
.drawer-panel{
  position:absolute;top:0;right:0;bottom:0;left:auto;
  width:min(340px,88vw);
  background:var(--surface);
  border-left:1px solid var(--border);
  box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  transform:translateX(100%);
  opacity:.98;
  will-change:transform;
  transition:transform .26s cubic-bezier(.22,.61,.36,1),opacity .2s ease;
}
.drawer.open .drawer-panel{transform:translateX(0);opacity:1}
.drawer.closing .drawer-panel{transform:translateX(100%);opacity:.98}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  min-height:64px;
  padding:var(--s3) var(--s4);
  padding-right:calc(var(--s4) + env(safe-area-inset-right));
  border-bottom:1px solid var(--border);
}
.drawer-close{
  position:static;
  flex:0 0 44px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.drawer-hours{
  display:inline-flex;align-items:center;gap:8px;
  min-height:40px;padding:0 12px;
  color:var(--muted);
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:999px;
  font-size:.82rem;font-weight:600;white-space:nowrap;
}
.drawer-hours .status-dot{width:8px;height:8px;flex:0 0 8px}
.drawer-hours.is-open .status-dot{background:var(--ok)}
.drawer-hours.is-closed .status-dot{background:var(--brand-hover)}
.drawer-nav{
  padding:var(--s3) var(--s4) var(--s6);
  padding-right:calc(var(--s4) + env(safe-area-inset-right));
  display:flex;flex-direction:column;gap:2px
}
.dr-main-link{
  display:flex;align-items:center;min-height:48px;padding:0 var(--s3);
  color:var(--text);font-weight:500;border-radius:var(--r-sm);
}
.dr-main-link:hover{background:var(--brand-soft);color:var(--brand-hover)}
.dr-acc{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  min-height:48px;padding:0 var(--s3);
  background:transparent;border:0;color:var(--text);
  font:inherit;font-weight:500;cursor:pointer;border-radius:var(--r-sm);text-align:left;
}
.dr-acc:hover{background:var(--brand-soft);color:var(--brand-hover)}
.dr-acc[aria-expanded="true"] .chev{transform:rotate(180deg)}
.dr-sub{display:flex;flex-direction:column;gap:2px;padding:var(--s1) 0 var(--s2) var(--s3)}
.dr-link{
  display:flex;align-items:center;min-height:44px;padding:0 var(--s3);
  color:var(--muted);border-radius:var(--r-sm);font-size:.95rem;
}
.dr-link:hover{background:var(--brand-soft);color:var(--brand-hover)}
.dr-divider{height:1px;background:var(--border);margin:var(--s3) 0}
.dr-cta{
  display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:var(--s3);
  background:var(--brand);color:#111;font-weight:600;border-radius:12px;
}
.dr-cta:hover{background:var(--brand-hover);color:#111}

/* ============ Hero ============ */
.hero{border-bottom:1px solid var(--border);background:var(--surface)}
.hero-inner{
  max-width:var(--container);margin:0 auto;padding:var(--s8) var(--s4);
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:var(--s8);align-items:center;
}
.eyebrow{
  color:var(--brand-hover);font-weight:600;font-size:.8rem;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--s2);
}
.hero-sub{color:var(--muted);max-width:56ch;font-size:1.02rem}
.hero-status-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);margin:var(--s3) 0 var(--s4)}
.status-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:999px;
  background:var(--brand-soft);border:1px solid var(--border);
  font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.status-dot{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.status-badge.is-open .status-dot{background:var(--ok)}
.status-badge.is-closed .status-dot{background:var(--brand-hover)}
.status-hours{color:var(--muted);font-size:.9rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s3)}
.hero-art{color:var(--brand);display:flex;justify-content:center}
.hero-art svg{width:100%;max-width:340px;height:auto}

/* ============ Sections & cards ============ */
.section{
  max-width:var(--container);margin:0 auto;
  padding:var(--s12) var(--s4) var(--s12);
  border-bottom:1px solid var(--border);
}
.hub-label{
  color:var(--brand-hover);font-weight:600;font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;margin:0 0 var(--s1);
}
.section-intro{color:var(--muted);max-width:64ch}

.card-grid{
  display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  margin-top:var(--s4);
}
.card{
  display:flex;flex-direction:column;gap:var(--s2);
  padding:var(--s4);min-height:150px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  color:var(--text);
  transition:border-color .15s,transform .15s,box-shadow .15s;
}
.card:hover{
  border-color:var(--brand);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}
.card-ico{color:var(--brand);flex:none}
.card h3{margin:0}
.card p{margin:0;color:var(--muted);font-size:.92rem}

/* ============ Bike cards & filter ============ */
.filter-bar{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s4) 0}
.filter-chip{
  min-height:40px;padding:0 var(--s4);
  border-radius:999px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);
  font:inherit;font-size:.9rem;cursor:pointer;
  transition:border-color .15s,background .15s,color .15s;
}
.filter-chip:hover{border-color:var(--brand)}
.filter-chip.active{background:var(--brand);border-color:var(--brand);color:#111}

.bike-grid{
  display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.bike-card{
  display:flex;flex-direction:column;gap:6px;
  padding:var(--s4);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
}
.bike-card[hidden]{display:none}
.bike-art{
  background:var(--brand-soft);border-radius:var(--r-sm);
  padding:var(--s3);color:var(--brand);display:flex;justify-content:center;
}
.bike-art svg{width:100%;max-width:180px;height:auto}
.bike-name{margin:var(--s2) 0 0}
.bike-cat{
  align-self:flex-start;padding:2px 10px;border-radius:999px;
  background:var(--surface-2);color:var(--muted);
  font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.bike-price{margin:var(--s2) 0 0;font-weight:700;color:var(--brand-hover)}
.bike-avail{margin:0;color:var(--muted);font-size:.85rem}
#filter-empty{grid-column:1/-1;color:var(--muted);padding:var(--s4)}

/* ============ Calculator ============ */
.calc{
  margin-top:var(--s8);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--s4);
}
.calc-inner{max-width:720px;margin:0 auto}
.calc-title{margin-bottom:2px}
.calc-sub{color:var(--muted);margin-bottom:var(--s4)}
.calc-form{display:grid;gap:var(--s4);grid-template-columns:1fr 1fr}
.calc-field{display:flex;flex-direction:column;gap:6px}
.calc-field label{font-weight:600;font-size:.9rem}
.calc-field select{
  min-height:44px;padding:0 var(--s3);
  background:var(--bg);color:var(--text);
  border:1px solid var(--border);border-radius:12px;
  font:inherit;font-size:16px;cursor:pointer;
}
.calc-field select:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.stepper{display:flex;align-items:stretch}
.stepper-btn{
  width:44px;min-width:44px;min-height:44px;
  background:var(--surface-2);border:1px solid var(--border);
  color:var(--text);font-size:1.1rem;font-weight:600;cursor:pointer;
}
.stepper-btn:first-child{border-radius:12px 0 0 12px;border-right:0}
.stepper-btn:last-child{border-radius:0 12px 12px 0;border-left:0}
.stepper-btn:hover{background:var(--brand-soft);color:var(--brand-hover)}
.stepper input{
  flex:1;min-width:0;min-height:44px;text-align:center;
  background:var(--bg);color:var(--text);
  border:1px solid var(--border);
  font:inherit;font-size:16px;font-weight:600;
}
.calc-result{
  grid-column:1/-1;
  display:flex;flex-direction:column;gap:4px;
  padding:var(--s4);
  background:var(--brand-soft);
  border:1px solid var(--border);border-radius:var(--r-md);
}
.calc-label{font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.calc-amount{font-size:1.6rem;font-weight:700;color:var(--brand-hover);line-height:1.2}
.calc-note{font-size:.85rem;color:var(--muted)}
.calc-disclaimer{margin:var(--s3) 0 0;color:var(--muted);font-size:.85rem}

/* ============ Tables ============ */
.table-scroll{overflow-x:auto;margin-top:var(--s4);-webkit-overflow-scrolling:touch}
table{
  width:100%;border-collapse:collapse;
  background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;
  font-size:.95rem;
}
th,td{padding:12px var(--s4);text-align:left;border-bottom:1px solid var(--border)}
thead th{
  background:var(--surface-2);font-size:.78rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
}
tbody th{font-weight:600}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--brand-soft)}

/* ============ Split / contact ============ */
.split{
  display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  border-bottom:0;
}
.split-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:var(--s4);
  min-height:260px;
}
.nap-card address{
  font-style:normal;color:var(--text);margin:var(--s3) 0 var(--s4);line-height:1.8;
}
.map-wrap{height:100%;min-height:260px;border-radius:var(--r-md);overflow:hidden;background:var(--surface-2)}
.map-wrap iframe{width:100%;height:100%;min-height:260px;border:0;display:block}

/* ============ FAQ ============ */
.faq-list{max-width:820px;display:grid;gap:var(--s2);margin-top:var(--s4)}
.faq-list details{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:0;
}
.faq-list summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  min-height:44px;padding:var(--s3) var(--s4);
  cursor:pointer;font-weight:600;list-style:none;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+";color:var(--brand);font-size:1.3rem;font-weight:400;line-height:1;
}
.faq-list details[open] summary::after{content:"–"}
.faq-list summary:hover{color:var(--brand-hover)}
.faq-list details p{padding:0 var(--s4) var(--s4);margin:0;color:var(--muted)}

/* ============ Hub / article pages ============ */
.crumbs{
  max-width:var(--container);margin:0 auto;padding:var(--s4);
  font-size:.85rem;color:var(--muted);
}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--muted)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--brand-hover)}

.article{
  max-width:var(--article);
  margin:0 auto;padding:var(--s4) var(--s4) var(--s12);
}
.article h2{margin-top:var(--s8)}
.article h3{margin-top:var(--s6)}
.cat-badge{
  display:inline-block;margin-bottom:var(--s2);
  padding:4px 14px;border-radius:999px;
  background:var(--brand-soft);color:var(--brand-hover);
  font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
}
.toc{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--s3) var(--s4);
  margin:var(--s4) 0 var(--s8);
}
.toc ul{margin:var(--s2) 0 0;padding-left:1.2em}
.toc a{color:var(--brand-hover)}
.toc a:hover{text-decoration:underline}

.topic-list{margin-top:var(--s2)}
.topic-list li{margin-bottom:6px;color:var(--muted)}

.contact-cta{
  margin-top:var(--s8);padding:var(--s6);
  background:var(--brand-soft);
  border:1px solid var(--border);border-radius:var(--r-md);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4);
}
.contact-cta p{margin:0;font-weight:600}
.contact-cta .muted{margin:4px 0 0;font-weight:400;font-size:.9rem}
.back-home{margin-top:var(--s8)}

/* ============ Footer ============ */
.site-foot{
  border-top:1px solid var(--border);
  background:var(--surface);
  padding:var(--s8) 0 var(--s6);
}
.foot-grid{
  max-width:var(--container);margin:0 auto;padding:0 var(--s4) var(--s8);
  display:grid;gap:var(--s6);
  grid-template-columns:repeat(4,1fr);
}
.foot-col h3{
  font-size:.8rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--brand-hover);margin-bottom:var(--s3);
}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.foot-col a{
  display:inline-flex;align-items:center;min-height:36px;
  color:var(--muted);font-size:.92rem;
}
.foot-col a:hover{color:var(--brand-hover)}
.foot-nap{
  max-width:var(--container);margin:0 auto;padding:var(--s4);
  border-top:1px solid var(--border);
  color:var(--muted);font-size:.9rem;
}
.foot-nap p{margin:0;line-height:1.8}
.foot-nap a{color:var(--muted)}
.foot-nap a:hover{color:var(--brand-hover)}

/* ============ Floating UI shared positioning ============ */
.quick-contact,
.chat-fab{
  position:fixed;
  bottom:calc(16px + env(safe-area-inset-bottom));
}
.quick-contact{
  left:calc(16px + env(safe-area-inset-left));
  z-index:130;
}
.chat-fab{
  right:calc(16px + env(safe-area-inset-right));
  z-index:130;
}
[data-float-hidden]{display:none!important}

/* ============ Quick contact FAB (bottom-left) ============ */
.qc-main{
  width:56px;height:56px;min-width:56px;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand);color:#111;
  border:0;border-radius:50%;cursor:pointer;
  box-shadow:var(--shadow-lg);
  transition:background .15s,transform .15s;
}
.qc-main:hover{background:var(--brand-hover);transform:scale(1.05)}
.qc-main[aria-expanded="true"]{background:var(--brand-hover)}
.qc-actions{
  position:absolute;bottom:calc(56px + 12px);left:0;
  display:none;flex-direction:column;gap:var(--s2);
}
.quick-contact[data-open="true"] .qc-actions{display:flex}
.qc-btn{
  position:relative;
  width:48px;height:48px;min-width:48px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-radius:50%;
  box-shadow:var(--shadow);
  transition:border-color .15s,color .15s,transform .15s;
}
.qc-btn:hover{border-color:var(--brand);color:var(--brand-hover);transform:scale(1.05)}
.qc-tip{
  position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
  background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-radius:8px;
  padding:4px 10px;font-size:.8rem;font-weight:600;white-space:nowrap;
  box-shadow:var(--shadow);
}

/* ============ Chatbot (bottom-right) ============ */
.chat-fab{
  width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand);color:#111;border:0;border-radius:50%;
  cursor:pointer;box-shadow:var(--shadow-lg);
  transition:background .15s,transform .15s,bottom .15s ease-out;
}
.chat-fab:hover{background:var(--brand-hover);transform:scale(1.05)}
.chat-fab[aria-expanded="true"]{background:var(--brand-hover)}
.chat-tip{
  position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);
  background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-radius:8px;
  padding:4px 10px;font-size:.8rem;font-weight:600;white-space:nowrap;
  box-shadow:var(--shadow);
}

.chat-panel{
  position:fixed;right:16px;z-index:140;
  /* Normal state sits above the two floating launch buttons. */
  bottom:calc(84px + env(safe-area-inset-bottom));
  width:min(360px,calc(100vw - 32px));
  height:min(480px,calc(var(--vv-h,100dvh) - 120px - env(safe-area-inset-bottom)));
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  animation:chatIn .18s ease-out;
}
@keyframes chatIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chat-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  padding:var(--s3) var(--s4);
  background:var(--brand);color:#111;
}
.chat-title{font-weight:600;font-size:.95rem}
.chat-close{
  width:44px;height:44px;min-width:44px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.18);border:0;border-radius:10px;
  color:#111;cursor:pointer;
}
.chat-close:hover{background:rgba(0,0,0,.3)}
.chat-log{
  flex:1;overflow-y:auto;padding:var(--s4);
  display:flex;flex-direction:column;gap:var(--s2);
}
.chat-msg{
  max-width:82%;padding:10px 14px;
  border-radius:14px;font-size:15px;line-height:1.55;
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.chat-msg.bot{
  align-self:flex-start;
  background:var(--surface-2);color:var(--text);
  border:1px solid var(--border);border-bottom-left-radius:4px;
}
.chat-msg.user{
  align-self:flex-end;
  background:var(--brand);color:#111;border-bottom-right-radius:4px;
}
.chat-msg a{color:var(--brand-hover);text-decoration:underline}
html[data-theme="dark"] .chat-msg.bot a{color:var(--brand)}
.chat-quick{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:0 var(--s4) var(--s2);
}
.chat-quick button{
  min-height:44px;padding:0 14px;
  background:var(--bg);color:var(--text);
  border:1px solid var(--border);border-radius:999px;
  font:inherit;font-size:.8rem;cursor:pointer;
  transition:border-color .15s,color .15s;
}
.chat-quick button:hover{border-color:var(--brand);color:var(--brand-hover)}
/* follow-up suggestion tags after each answer */
.chat-suggest{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:2px 0 10px 44px;
}
.chat-suggest button{
  min-height:36px;padding:0 12px;
  background:var(--surface);color:var(--muted);
  border:1px solid var(--border);border-radius:999px;
  font:inherit;font-size:.76rem;cursor:pointer;
  transition:border-color .15s,color .15s;
}
.chat-suggest button:hover{border-color:var(--brand);color:var(--brand-hover)}
html[data-theme="dark"] .chat-suggest button{background:var(--bg);color:var(--text)}
/* typing indicator */
.chat-typing{opacity:.7;font-style:normal}
/* messages wrap correctly */
.chat-msg{overflow-wrap:anywhere;word-break:break-word}
.chat-input{
  display:flex;gap:var(--s2);
  padding:var(--s2) var(--s3) var(--s3);
  border-top:1px solid var(--border);
}
.chat-input input{
  flex:1;min-width:0;min-height:44px;
  padding:0 var(--s3);
  background:var(--bg);color:var(--text);
  border:1px solid var(--border);border-radius:12px;
  font:inherit;font-size:16px;
}
.chat-input button{
  width:44px;min-width:44px;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand);color:#111;border:0;border-radius:12px;
  cursor:pointer;transition:background .15s;
}
.chat-input button:hover{background:var(--brand-hover)}

/* iOS/Android keyboard mode.
   visualViewport JS supplies an exact top + height so the whole chat follows
   the visible area instead of sitting behind the keyboard/browser dock. */
.chat-panel[data-keyboard-open="true"]{
  top:var(--chat-vv-top,8px);
  bottom:auto;
  height:var(--chat-vv-height,420px);
  max-height:none;
}
body.chat-keyboard-open .quick-contact,
body.chat-keyboard-open .chat-fab{
  visibility:hidden;
  pointer-events:none;
}
body.chat-keyboard-open .chat-panel{
  border-radius:var(--r-md);
}
body.chat-keyboard-open .chat-log{
  overscroll-behavior:contain;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1179px){
  .main-nav,.nav-actions .nav-cta{display:none}
  .menu-toggle{display:inline-flex}
}
@media (max-width:767px){
  .nav-shell{height:60px}
  .drawer-panel{width:min(320px,88vw)}
  .drawer-head{min-height:60px}
  .hero-inner{grid-template-columns:1fr;padding:var(--s6) var(--s4);gap:var(--s4)}
  .hero-art{order:-1;justify-content:flex-start}
  .hero-art svg{max-width:180px}
  .section{padding-top:var(--s8);padding-bottom:var(--s8)}
  .calc-form{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:repeat(2,1fr);gap:var(--s6) var(--s4)}
  .chat-panel{right:12px;left:12px;width:auto}
  .chat-panel[data-keyboard-open="true"]{
    right:8px;left:8px;width:auto;
  }
  .site-foot{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
}
@media (min-width:768px) and (max-width:1179px){
  .drawer-panel{width:min(420px,46vw)}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1180px){
  .drawer{display:none!important}
}
@media (max-width:767px), (hover:none){
  .chat-tip{display:none}
}
@media (max-width:420px){
  .nav-shell{padding:0 var(--s3);gap:var(--s2)}
  .brand{font-size:.92rem}
  .brand-sub{display:none}
  .hero-cta .btn{width:100%}
  .qc-tip,.chat-tip{display:none}
}

/* ============ FAQ / AI-search content & related links ============ */
.faq-page-intro{max-width:820px;color:var(--muted);font-size:1.02rem}
.faq-ai{max-width:820px;display:grid;gap:var(--s4);margin-top:var(--s5)}
.faq-entry{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:var(--s5);
}
.faq-entry h2{font-size:1.18rem;margin:0 0 var(--s3)}
.faq-entry p:last-child{margin-bottom:0}
.faq-short{color:var(--text);font-weight:600}
.related-resources{
  max-width:820px;
  margin:var(--s7) 0 0;
  padding:var(--s4);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface-2);
}
.related-resources h2,.related-resources h3{margin-top:0}
.related-resources ul{margin:0;padding-left:1.2rem}
.related-resources li{margin:.45rem 0}
.footer-menu a{font-weight:500}