/* ==========================================================================
   Components — reusable across every page (header, footer, buttons, cards,
   badges, whatsapp widget, scroll-reveal utility). Page-specific sections
   (hero, about teaser, product rows, mission/vision/values) live in home.css
   so they can be reused or replaced without touching this file.
   ========================================================================== */

/* ---------- Layout utilities ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (max-width: 640px) {
  .container {
    padding-inline: var(--space-3);
  }
}

.section {
  position: relative;
  /* Trimmed from the original 128px/64px pass — sections were reading
     tall with excess air above/below the actual content. */
  padding-block: var(--space-6);
}

@media (max-width: 960px) {
  .section {
    padding-block: var(--space-5);
  }
}

@media (max-width: 640px) {
  .section {
    padding-block: var(--space-4);
  }
}

.section--dark {
  background: var(--bg-dark);
  color: var(--text-on-dark);
}

.section--light {
  background: var(--bg-light);
}

.section--alt {
  background: var(--bg-light-alt);
}

.section-head {
  max-width: 640px;
  margin-bottom: var(--space-4);
}

.section-head--center {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  /* Brand navy by default — every eyebrow on this page currently sits
     on a light background. var(--electric) (2.57:1) failed contrast
     here; brand-navy is both accessible and more on-brand than the
     bright accent for body copy anyway. */
  color: var(--brand-navy);
  margin-bottom: var(--space-2);
}

/* Override for any eyebrow placed on a dark section (e.g. a future
   page hero) — electric-2 keeps strong contrast against navy. */
.section--dark .eyebrow,
.on-dark .eyebrow {
  color: var(--electric-2);
}

.eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: currentColor;
}

/* h1 included so interior pages (About, Products, etc.) can use a real
   page-level <h1> here for correct document structure/SEO, while still
   matching the same visual size as every other section heading. */
.section-head h1,
.section-head h2 {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-2);
}

.section-head p {
  font-size: var(--fs-body-lg);
  color: var(--text-on-light-muted);
}

.on-dark .section-head p,
.section--dark .section-head p {
  color: var(--text-on-dark-muted);
}

/* ---------- Buttons ---------- */
.btn {
  --btn-fg: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body-sm);
  letter-spacing: var(--ls-normal);
  padding: 16px 32px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    filter var(--dur-base) var(--ease-out);
  will-change: transform;
}

.btn:active {
  transform: translateY(1px) scale(0.99);
}

.btn-primary {
  /* Deliberately kept within the darker half of the blue range so white
     text stays readable everywhere on the gradient (verified >= 4.5:1
     contrast at every stop) — the brighter electric blue is reserved for
     the hover glow and decorative accents instead of sitting under text. */
  background: linear-gradient(135deg, var(--electric-dim), var(--brand-navy) 100%);
  color: var(--white);
  box-shadow: var(--shadow-sm), 0 0 0 rgba(0, 163, 255, 0);
}

.btn-primary:hover {
  /* Client feedback: no glow/shadow on hover — just a gentle color fade. */
  filter: brightness(1.15);
}

.btn-outline {
  background: transparent;
  color: var(--text-on-dark);
  border: 1.5px solid var(--border-dark-strong);
}

.btn-outline:hover {
  background: var(--glass-fill);
  border-color: var(--electric-2);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--brand-navy);
  padding: 16px 8px;
}

.btn-ghost .btn-arrow {
  transition: transform var(--dur-base) var(--ease-out);
}

.btn-ghost:hover .btn-arrow {
  transform: translateX(6px);
}

.btn-sm {
  /* Slightly more compact than before — both the header "Get a Quote"
     and hero "Products" buttons were reading a bit large. */
  padding: 10px 20px;
  font-size: 0.875rem;
}

.btn-arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ---------- Glass card ---------- */
.glass-card {
  background: var(--glass-fill);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ---------- Site header ---------- */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, rgba(7, 11, 21, 0.55), rgba(7, 11, 21, 0));
  transition: height var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  height: var(--header-h-scrolled);
  background: rgba(7, 11, 21, 0.78);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--border-dark);
  box-shadow: var(--shadow-md);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.brand img {
  height: 40px;
  width: auto;
  transition: height var(--dur-base) var(--ease-out);
}

.site-header.is-scrolled .brand img {
  height: 34px;
}

.brand-fallback {
  display: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--white);
  letter-spacing: var(--ls-tight);
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Scoped to `.primary-nav ul a` (the actual menu links) — not
   `.primary-nav a`, which would also match the "Get a Quote" button
   since it lives inside .primary-nav too, and pick up the underline. */
.primary-nav ul a {
  position: relative;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--mist);
  padding-block: 6px;
  transition: color var(--dur-fast) var(--ease-out);
}

.primary-nav ul a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--electric);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease-out);
}

/* Underline only ever appears on hover/focus — including for the
   current page. No page gets a permanent "static" underline. */
.primary-nav ul a:hover,
.primary-nav ul a:focus-visible {
  color: var(--white);
}

.primary-nav ul a:hover::after,
.primary-nav ul a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-cta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Belt-and-braces: buttons never render an underline, no matter where
   they're nested. */
.header-cta a,
.btn {
  text-decoration: none;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}

.nav-toggle[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 960px) {
  .nav-toggle {
    display: flex;
  }

  /* Desktop horizontal nav is fully hidden on mobile/tablet — the
     drawer (below) takes over navigation entirely. */
  .primary-nav {
    display: none;
  }
}

/* =====================================================================
   Mobile navigation — slide-out drawer from the right.
   Spec: 280px wide on mobile, up to 320px on tablet, 100vh tall, never
   covers the full screen (at least ~20% stays visible on the left under
   a dark overlay), slides in/out at 300ms, closes on overlay click / X /
   Escape, traps focus while open, restores focus to the trigger on close.
   ===================================================================== */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 16, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
  z-index: var(--z-overlay);
}

.drawer-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  width: min(280px, 80vw);
  max-width: 80vw; /* guarantees ~20% of the page stays visible at any width */
  background: var(--navy-950);
  border-left: 1px solid var(--border-dark);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out);
  z-index: var(--z-modal);
}

.mobile-drawer.is-open {
  transform: translateX(0);
}

@media (min-width: 561px) {
  .mobile-drawer {
    width: min(320px, 80vw);
  }
}

.mobile-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--border-dark);
  flex-shrink: 0;
}

.mobile-drawer__head img {
  height: 30px;
}

.mobile-drawer__close {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mist);
  border-radius: var(--radius-full);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.mobile-drawer__close:hover,
.mobile-drawer__close:focus-visible {
  background: var(--glass-fill);
  color: var(--white);
}

.mobile-drawer__close svg {
  width: 20px;
  height: 20px;
}

.mobile-drawer__nav {
  padding: var(--space-3) var(--space-2);
  overflow-y: auto;
  flex: 1;
}

.mobile-drawer__nav ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-drawer__nav a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 500;
  color: var(--mist);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.mobile-drawer__nav a:hover,
.mobile-drawer__nav a:focus-visible {
  background: var(--glass-fill);
  color: var(--white);
}

.mobile-drawer__nav a svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--electric-2);
}

/* Current page: accent underline on the text only (icon excluded) —
   this is the one place in the nav that keeps a persistent underline,
   per spec, since a drawer benefits from a clear "you are here" marker. */
.mobile-drawer__nav a[aria-current='page'] {
  color: var(--white);
}

.mobile-drawer__nav a[aria-current='page'] span {
  text-decoration: underline;
  text-decoration-color: var(--electric);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.mobile-drawer__footer {
  padding: var(--space-3);
  border-top: 1px solid var(--border-dark);
  flex-shrink: 0;
}

.mobile-drawer__footer .btn {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .drawer-overlay,
  .mobile-drawer {
    transition: none;
  }
}

/* ---------- Info cards (hero strip) ---------- */
.info-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-dark);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.info-card {
  background: var(--navy-900);
  /* Bumped back up slightly now that the hero has more vertical room
     to work with — the previous size was a touch too tight. */
  padding: var(--space-3) var(--space-4);
  border-inline-start: 2px solid var(--electric);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-card__icon {
  width: 22px;
  height: 22px;
  color: var(--electric-2);
}

.info-card__text {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  line-height: var(--lh-snug);
}

@media (max-width: 860px) {
  .info-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Kept at 2 columns all the way down (rather than collapsing to a
   single stacked column) and switched to a horizontal icon+text layout
   — this is what actually shrinks the mobile hero's total height. */
@media (max-width: 560px) {
  .info-card {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
  }

  .info-card__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .info-card__text {
    font-size: 0.8125rem;
    line-height: var(--lh-normal);
  }
}

/* ---------- Product card ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

@media (max-width: 860px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}

.product-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

/* Soft, light backdrop — deliberately not the heavy navy gradient used
   elsewhere. Real product photos (typically shot on white) sit cleanly
   on this without visually fighting a busy background. */
.product-thumb {
  position: relative;
  /* Taller than before (was 4:3) — the SKU line was removed from the
     card body below, so the image area grows to reclaim that height
     instead of leaving it empty. */
  aspect-ratio: 5 / 4;
  background: linear-gradient(160deg, var(--ice-100) 0%, var(--white) 60%, var(--ice) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10%;
  transition: transform var(--dur-slow) var(--ease-out);
}

.product-card:hover .product-thumb img {
  transform: scale(1.04);
}

/* Shown automatically (see main.js) if an image fails to load, so the
   grid still looks intentional before real photos are dropped in. */
.product-thumb .thumb-placeholder {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.product-thumb.img-missing img {
  display: none;
}

.product-thumb.img-missing .thumb-placeholder {
  display: flex;
}

.product-thumb .thumb-placeholder svg {
  width: 28px;
  height: 28px;
  /* CRITICAL FIX: was brand-mid (2.39:1 against this light backdrop,
     fails the 3:1 UI-component minimum) — this affects every product
     card sitewide (Home page's 6 cards + the Products catalog's 9
     cards) since they all share this component. electric-dim passes
     comfortably (verified >= 4.5:1 against this same background
     elsewhere on the site). */
  color: var(--electric-dim);
}

.product-category {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--white);
  background: rgba(7, 11, 21, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  backdrop-filter: blur(6px);
}

.product-body {
  padding: var(--space-3);
  /* Center the single remaining line now that the SKU line is gone. */
  text-align: center;
}

.product-name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-on-light);
}

/* Optional "View Specifications" footer — only appears on cards that
   include it (the products catalog page), so it doesn't affect the
   simpler home-page product cards, which don't have this element.
   Deliberately just a styled <span>, not a nested <a> — the whole card
   is already the clickable link, and an anchor inside an anchor is
   invalid HTML. */
.product-card__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line-light);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--electric-dim);
}

.product-card__footer svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out);
}

.product-card:hover .product-card__footer svg {
  transform: translateX(4px);
}

.grid-empty {
  grid-column: 1 / -1;
  padding: var(--space-5);
  text-align: center;
  color: var(--text-on-light-muted);
  border: 1px dashed var(--line-light);
  border-radius: var(--radius-lg);
  font-size: var(--fs-body-sm);
}

/* ---------- Mission / Vision / Values cards ----------
   Switched from a dark glass-card treatment to a light one — client
   feedback was that the dark section felt heavy/intimidating. Icon and
   heading colors updated accordingly for contrast on a light card. */
.mvv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

@media (max-width: 860px) {
  .mvv-grid {
    grid-template-columns: 1fr;
  }
}

.mvv-card {
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line-light);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.mvv-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.mvv-card__icon {
  width: 38px;
  height: 38px;
  color: var(--brand-navy);
  margin-bottom: var(--space-2);
}

.mvv-card h3 {
  font-size: var(--fs-h5);
  margin-bottom: 6px;
  color: var(--ink);
}

.mvv-card p {
  color: var(--ink-soft);
  font-size: var(--fs-body-sm);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-950);
  color: var(--mist);
}

.footer-widgets {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
  gap: var(--space-5);
  padding-block: var(--space-6) var(--space-4);
}

@media (max-width: 860px) {
  .footer-widgets {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5) var(--space-3);
  }
}

@media (max-width: 560px) {
  .footer-widgets {
    grid-template-columns: 1fr;
  }
}

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--space-3);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-col a,
.footer-contact li {
  font-size: var(--fs-body-sm);
  color: var(--mist-dim);
  transition: color var(--dur-fast) var(--ease-out);
}

.footer-col a:hover {
  color: var(--electric-2);
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.footer-contact svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--electric-2);
}

.footer-social {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.footer-social svg {
  width: 18px;
  height: 18px;
  color: var(--electric-2);
}

.footer-logo img {
  height: 38px;
  margin-bottom: var(--space-3);
}

.footer-trending {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-dark);
}

.footer-trending h4 {
  margin-bottom: var(--space-2);
}

.footer-trending p {
  font-size: var(--fs-body-sm);
  color: var(--mist);
}

.footer-bottom {
  border-top: 1px solid var(--border-dark);
}

.footer-bottom .container {
  padding-block: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.footer-bottom small {
  font-size: 0.8125rem;
  color: var(--mist-dim);
}

.footer-legal {
  display: flex;
  gap: var(--space-3);
}

.footer-legal a {
  font-size: 0.8125rem;
  color: var(--mist-dim);
}

.footer-legal a:hover {
  color: var(--electric-2);
}

/* ---------- WhatsApp widget ----------
   Redesigned per client feedback: real WhatsApp glyph (not a generic
   chat bubble), no stock-green background (a muted brand-adjacent
   teal instead), and a compact "chat preview" layout rather than a
   wide button with redundant labels. */
.whatsapp-widget {
  position: fixed;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: var(--z-whatsapp);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  /* The container's box includes the closed panel's reserved layout
     space (opacity:0 but still laid out), which would otherwise sit
     on top of page content and swallow clicks. The container itself
     doesn't need to be clickable — only its visible children do. */
  pointer-events: none;
}

.whatsapp-fab {
  width: 58px;
  height: 58px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--whatsapp-teal), var(--whatsapp-teal-dim));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-base) var(--ease-out);
  pointer-events: auto;
}

.whatsapp-fab:hover {
  transform: scale(1.07);
}

.whatsapp-fab svg {
  width: 28px;
  height: 28px;
}

.whatsapp-panel {
  width: min(300px, 84vw);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(12px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}

.whatsapp-widget.is-open .whatsapp-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.whatsapp-panel__head {
  background: linear-gradient(135deg, var(--brand-navy), var(--navy-900));
  padding: 14px var(--space-3);
  display: flex;
  align-items: center;
  gap: 10px;
}

.whatsapp-panel__avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--whatsapp-teal), var(--whatsapp-teal-dim));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.whatsapp-panel__avatar svg {
  width: 18px;
  height: 18px;
  color: var(--white);
}

.whatsapp-panel__identity {
  line-height: 1.3;
}

.whatsapp-panel__identity strong {
  display: block;
  font-size: 0.875rem;
  color: var(--white);
}

.whatsapp-panel__status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: var(--mist);
}

.whatsapp-panel__status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--whatsapp-teal);
}

.whatsapp-panel__close {
  margin-left: auto;
  color: var(--mist);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.whatsapp-panel__close:hover {
  color: var(--white);
}

/* Chat-preview area — a single realistic incoming message bubble
   instead of a block of instructional paragraph text. */
.whatsapp-panel__chat {
  padding: var(--space-3);
  background: var(--ice);
}

.whatsapp-bubble {
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 4px;
  padding: 10px 12px;
  max-width: 90%;
  box-shadow: var(--shadow-sm);
}

.whatsapp-bubble p {
  font-size: var(--fs-body-sm);
  color: var(--ink);
  line-height: var(--lh-normal);
}

.whatsapp-bubble time {
  display: block;
  margin-top: 4px;
  font-size: 0.6875rem;
  color: var(--ink-soft);
  text-align: right;
}

.whatsapp-panel__footer {
  padding: 0 var(--space-3) var(--space-3);
  background: var(--ice);
  display: flex;
  justify-content: flex-end;
}

/* Compact, content-width pill — not a full-width button. */
.whatsapp-start {
  background: linear-gradient(135deg, var(--whatsapp-teal), var(--whatsapp-teal-dim));
  color: var(--white);
  padding: 11px 20px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--fs-body-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: filter var(--dur-fast) var(--ease-out);
}

.whatsapp-start:hover {
  filter: brightness(1.1);
}

.whatsapp-start svg {
  width: 17px;
  height: 17px;
}

/* ---------- Scroll reveal ----------
   Content is visible by default (progressive enhancement — see design
   brief). Only once the tiny inline head script confirms JS is running
   (html.js) does content start hidden, ready for initScrollReveal() to
   fade it in. If JS never runs, nothing is ever hidden. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Specificity note: targets ".js .reveal-stagger > .reveal" rather than
   the simpler ".reveal-stagger > *" — the simpler version has LOWER
   specificity (0,1,0) than ".js .reveal" (0,2,0) above, which sets
   transition-delay: 0s implicitly as part of its transition shorthand.
   That would silently win regardless of source order and the stagger
   would never actually appear. This selector (0,3,0) safely overrides
   it. */
.js .reveal-stagger > .reveal {
  transition-delay: calc(var(--stagger-index, 0) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}