/* SoftDrink website — shared styles (from design system) */
:root {
  --sd-blue: #1677C9;
  --sd-blue-700: #0F5FA3;
  --sd-blue-800: #0B4A80;
  --sd-blue-900: #082F52;
  --sd-gray: #56585C;
  --sd-gray-700: #3E4044;
  --sd-gray-900: #1E2024;
  --sky-blue: #E6F1FB;
  --light-gray: #F2F2F2;
  --pure-white: #FFFFFF;
  --ink: #0F1722;
  --ink-70: #3C4656;
  --ink-50: #6B7380;
  --ink-30: #A9AEB7;
  --line: #E4E8EE;
  --line-soft: #EEF2F6;
  --bg: #FBFCFD;
  --bg-tint: #F4F8FC;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(15, 35, 70, .06);
  --sh-2: 0 2px 10px rgba(15, 35, 70, .06), 0 1px 2px rgba(15, 35, 70, .04);
  --sh-3: 0 10px 30px rgba(15, 60, 120, .10), 0 2px 6px rgba(15, 35, 70, .06);
  --sh-blue: 0 12px 30px rgba(22, 119, 201, .28);
  --f-display: 'Playfair Display', 'Noto Serif Thai', Georgia, serif;
  --f-body: 'Montserrat', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --f-thai-display: 'Noto Serif Thai', 'Playfair Display', Georgia, serif;
  --f-thai-body: 'Noto Sans Thai', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Thai-first typography — add lang="th" on Thai elements to swap the stack */
:lang(th), .thai {
  font-family: var(--f-thai-body);
  line-height: 1.7;
  letter-spacing: 0;
  font-feature-settings: "locl";
}
:lang(th) h1, :lang(th) h2, :lang(th) h3, :lang(th) h4,
.thai h1, .thai h2, .thai h3, .thai h4,
.thai-display {
  font-family: var(--f-thai-display);
  letter-spacing: 0;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ---------- Header (sticky + always-on frosted transparency) — v3 2026-05-09 -------
   Simplified per user feedback: instead of toggling between two states on
   scroll, the header now stays consistently frosted at all times. This way
   the transparency is visible immediately and stays visible as the page
   scrolls — content moves behind the blur, you can see it through the menu.

   - 60% white + 20px backdrop blur + 1.5x saturation
   - 1px hairline at the bottom for definition
   - Soft shadow, more pronounced than the original
   - Stimulus header_scroll_controller no longer required (kept in source
     for future use; harmless when not invoked).

   Fallback for browsers without backdrop-filter: solid 96% white + bottom
   border + slightly heavier shadow. */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.60);
  -webkit-backdrop-filter: saturate(1.5) blur(20px);
          backdrop-filter: saturate(1.5) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 6px 24px rgba(15, 23, 34, 0.08);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--line-soft);
  }
}
.site-logo { height: 36px; width: auto; display: block; align-self: center; }
.site-brand {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 4px; text-decoration: none; line-height: 1;
}
.site-brand .site-tagline {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink-70);
  letter-spacing: 0;
  white-space: nowrap;
  text-align: center;
}
/* Thai tagline is shorter — bump size to match logo width */
html[lang="th"] .site-brand .site-tagline {
  font-family: 'Noto Sans Thai', sans-serif;
  font-style: normal;
  font-size: 14px;
  letter-spacing: -0.01em;
}
@media (max-width: 560px) {
  .site-brand .site-tagline { font-size: 12px; }
  html[lang="th"] .site-brand .site-tagline { font-size: 12.5px; }
}
.nav-links {
  display: flex; align-items: center; gap: 2px;
  padding: 5px;
  background: #EEF2F7;
  border-radius: var(--r-pill);
  border: 1px solid var(--sd-gray-200);
}
.nav-links a {
  padding: 8px 18px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 500;
  color: var(--ink-70); transition: color .15s, background .15s, box-shadow .15s, transform .12s;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
}
.nav-links a:hover { color: var(--sd-blue); background: rgba(255,255,255,.6); }
.nav-links a.active {
  color: var(--sd-blue); font-weight: 600;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15,30,60,.10), 0 0 0 1px rgba(22,119,201,.18);
}
.nav-links a.active::after { display: none; }
/* Quotation CTA lives inside the nav pill but pops as a filled chip */
.nav-links .nav-cta {
  margin-left: 6px;
  padding: 9px 18px;
  background: var(--sd-blue);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(22,119,201,.28), inset 0 -1px 0 rgba(0,0,0,.08);
}
.nav-links .nav-cta:hover {
  background: var(--sd-blue-700);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(22,119,201,.36), inset 0 -1px 0 rgba(0,0,0,.08);
}
.nav-links .nav-cta:active { transform: translateY(0); }
/* Right cluster: lang toggle + CTA */
.site-header .wrap > :last-child { margin-left: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; font-family: var(--f-body); font-weight: 600; font-size: 14px;
  border-radius: var(--r-pill); border: 1.5px solid transparent; cursor: pointer;
  transition: transform .12s, box-shadow .2s, background .2s, color .2s, border-color .2s;
  white-space: nowrap; text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--sd-blue); color: #fff; box-shadow: var(--sh-blue); }
.btn-primary:hover { background: var(--sd-blue-700); }
.btn-secondary { background: var(--pure-white); color: var(--sd-blue); border-color: var(--sd-blue); }
.btn-secondary:hover { background: var(--sky-blue); }
.btn-ghost { background: transparent; color: var(--sd-gray-900); }
.btn-ghost:hover { background: var(--light-gray); }
.btn-onblue { background: #fff; color: var(--sd-blue); }
.btn-onblue:hover { background: var(--sky-blue); }
.btn-onblue-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-onblue-outline:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-lg { padding: 16px 28px; font-size: 15px; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.badge-blue { background: var(--sky-blue); color: var(--sd-blue); }
.badge-white { background: #fff; color: var(--sd-blue); }
.badge-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  padding: 18px 0 0; font-size: 12px; color: var(--ink-50);
  display: flex; gap: 8px; align-items: center;
}
.breadcrumb a:hover { color: var(--sd-blue); }
.breadcrumb .sep { opacity: .5; }
.breadcrumb .current { color: var(--sd-blue); font-weight: 600; }

/* ---------- Typography helpers ---------- */
.eyebrow {
  font-weight: 700; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  /* Darker than --sd-blue (#1677c9) so it passes WCAG AA contrast (≥ 4.5:1)
     on the light-blue page-hero gradient (#f4f8fc). #1677c9/#f4f8fc is 4.35:1
     — 0.15 short. #115B95 on #f4f8fc is ~5.6:1, safely passes AA. */
  color: #115B95;
}
h1, h2, h3, h4 { font-family: var(--f-display); color: var(--sd-gray-900); margin: 0; letter-spacing: -0.015em; }
.h-display { font-size: 60px; font-weight: 800; line-height: 1.02; letter-spacing: -0.025em; }
.h-1 { font-size: 44px; font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }
.h-2 { font-size: 32px; font-weight: 700; line-height: 1.15; }
.h-3 { font-size: 22px; font-weight: 700; line-height: 1.25; }
.lede { font-size: 16px; color: var(--ink-70); line-height: 1.65; }
em.accent { font-style: italic; color: var(--sd-blue); }

/* ---------- Section layout ---------- */
.section { padding: 80px 0; }
.section-tight { padding: 32px 0; }
.section-tint { background: var(--bg-tint); }
.section-blue { background: var(--sd-blue); color: #fff; }
.section-blue h1, .section-blue h2, .section-blue h3, .section-blue h4 { color: #fff; }
.section-head { text-align: center; margin-bottom: 40px; }
.section-head h2 { margin-bottom: 10px; }
.section-head .lede { max-width: 640px; margin: 0 auto; }

/* ---------- Cards ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px; transition: border-color .2s, box-shadow .2s, transform .15s;
}
.card:hover { border-color: var(--sd-blue); box-shadow: var(--sh-3); transform: translateY(-2px); }

.icon-tile {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--sky-blue); color: var(--sd-blue);
  display: grid; place-items: center;
}
.icon-tile.solid { background: var(--sd-blue); color: #fff; }
.icon-tile.circle { border-radius: 50%; }

/* ---------- Image placeholders ---------- */
.ph {
  border-radius: var(--r-md); overflow: hidden; position: relative;
  background:
    linear-gradient(135deg, rgba(255,255,255,.6), rgba(255,255,255,0) 60%),
    repeating-linear-gradient(135deg, #D7E8F6 0 14px, #E6F1FB 14px 28px);
  display: grid; place-items: center;
  color: var(--sd-blue-800); font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--line);
}
.ph::after {
  content: ''; position: absolute; inset: 10px;
  border: 1px dashed rgba(22,119,201,.3); border-radius: 8px;
  pointer-events: none;
}
.ph.square { aspect-ratio: 1/1; }
.ph.wide { aspect-ratio: 16/9; }
.ph.tall { aspect-ratio: 3/4; }
.ph.tv { aspect-ratio: 4/3; }

/* variations for distinct placeholders */
.ph.v-nature {
  background:
    linear-gradient(180deg, rgba(230,241,251,0), rgba(22,119,201,.15)),
    repeating-linear-gradient(135deg, #B5D4ED 0 14px, #9BC8EA 14px 28px);
}
.ph.v-lab {
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0)),
    repeating-linear-gradient(45deg, #DCEAF5 0 12px, #ECF3FA 12px 24px);
}
.ph.v-factory {
  background:
    linear-gradient(135deg, #C7DCF0, #9FC0DF);
}
.ph.v-truck {
  background:
    linear-gradient(180deg, #EAF3FB, #C7DCF0);
}
.ph.v-bottle {
  background:
    radial-gradient(ellipse at 50% 70%, rgba(22,119,201,.22), transparent 60%),
    linear-gradient(180deg, #E6F1FB 0%, #B5D4ED 100%);
}
.ph.v-pattern {
  background:
    radial-gradient(circle at 30% 40%, #9BC8EA, #6FAFDB 60%, #1677C9);
}

/* ---------- Grids ---------- */
.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: 1fr 1fr; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g5 { grid-template-columns: repeat(5, 1fr); }
.g6 { grid-template-columns: repeat(6, 1fr); }

/* ---------- Page hero ---------- */
.page-hero {
  position: relative; padding: 20px 0 24px;
  background:
    radial-gradient(ellipse at 90% 30%, rgba(22,119,201,.10), transparent 55%),
    linear-gradient(180deg, #F6FAFD 0%, #EAF3FB 100%);
  overflow: hidden;
}
.page-hero .inner {
  display: grid; grid-template-columns: 0.95fr 1.25fr; gap: 56px; align-items: center;
}
.page-hero h1 { margin-top: 8px; margin-bottom: 12px; }
.page-hero p.lede { max-width: 540px; margin-bottom: 18px; }
.page-hero .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.page-hero .hero-visual {
  position: relative; border-radius: var(--r-xl);
  min-height: 360px;
  display: grid; place-items: center;
  overflow: visible;
}

/* Hero bottle stage (homepage) — product shot + mascot */
.page-hero .hero-bottle-stage {
  min-height: 480px;
  overflow: visible;
  background: none;
}
.page-hero .hero-bottle-stage::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 92%; aspect-ratio: 1/1;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.9) 0%, rgba(214,234,249,.85) 35%, rgba(155,200,234,.55) 60%, rgba(155,200,234,0) 72%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.page-hero .hero-bottle-stage::after {
  content: "";
  position: absolute;
  left: 6%; right: 6%; bottom: 6%;
  height: 38px;
  background: radial-gradient(ellipse at 50% 50%, rgba(15,60,120,.22) 0%, rgba(15,60,120,0) 70%);
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
}
.page-hero .hero-bottle-stage .hero-bottle {
  width: 153%;
  max-width: 153%;
  height: auto;
  max-height: none;
  object-fit: contain;
  transform: translateY(-1%);
  margin: 0 -26.5%;
}
/* decorative floating droplets behind the product */
.page-hero .hero-bottle-stage .hero-drops {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.page-hero .hero-bottle-stage .hero-drops span {
  position: absolute; display: block;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(155,200,234,.55) 55%, rgba(22,119,201,.35));
  box-shadow: inset 0 -6px 14px rgba(15,60,120,.18), 0 6px 14px rgba(15,60,120,.12);
  opacity: .85;
  animation: heroDropFloat 7s ease-in-out infinite;
}
.page-hero .hero-bottle-stage .hero-drops span:nth-child(1) { width: 44px; height: 44px; top: 10%; left: 4%; animation-delay: -0.4s; }
.page-hero .hero-bottle-stage .hero-drops span:nth-child(2) { width: 22px; height: 22px; top: 28%; left: 14%; animation-delay: -1.6s; }
.page-hero .hero-bottle-stage .hero-drops span:nth-child(3) { width: 18px; height: 18px; top: 60%; left: 2%; animation-delay: -2.9s; opacity: .6; }
.page-hero .hero-bottle-stage .hero-drops span:nth-child(4) { width: 30px; height: 30px; top: 8%; right: 8%; animation-delay: -1.1s; }
.page-hero .hero-bottle-stage .hero-drops span:nth-child(5) { width: 14px; height: 14px; top: 22%; right: 22%; animation-delay: -2.3s; opacity: .7; }
.page-hero .hero-bottle-stage .hero-drops span:nth-child(6) { width: 36px; height: 36px; bottom: 14%; right: 4%; animation-delay: -0.9s; }
@keyframes heroDropFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(6deg); }
}
.page-hero .hero-bottle-stage .hero-mascot {
  width: clamp(440px, 72%, 680px);
  right: -4%;
  bottom: -2%;
}
@media (max-width: 900px) {
  .page-hero .hero-bottle-stage { min-height: 560px; }
  .page-hero .hero-bottle-stage .hero-bottle { max-width: 143%; width: 143%; margin: 0 -21.5%; }
  .page-hero .hero-bottle-stage .hero-mascot { width: clamp(320px, 78%, 520px); right: -2%; bottom: -4%; }
}

/* ---------- Responsive breakpoints ---------- */

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; cursor: pointer; padding: 0;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--sd-gray-900); border-radius: 2px;
  position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2px;
  background: var(--sd-gray-900); border-radius: 2px;
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }

/* Tablet */
@media (max-width: 1024px) {
  .container { padding: 0 20px; }
  .h-display { font-size: 48px; }
  .h-1 { font-size: 36px; }
  .h-2 { font-size: 28px; }
  .section { padding: 60px 0; }

  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g5 { grid-template-columns: repeat(3, 1fr); }
  .g6 { grid-template-columns: repeat(3, 1fr); }

  .page-hero .inner { grid-template-columns: 1fr 1.1fr; gap: 32px; }

  .stats-strip { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stats-strip .stat { border-right: 0; border-bottom: 1px dashed rgba(22,119,201,.25); padding: 14px; }
  .stats-strip .stat:nth-last-child(-n+2) { border-bottom: 0; }

  .cta-block { grid-template-columns: 120px 1fr; padding: 32px; gap: 24px; }
  .cta-block .actions { grid-column: 1 / -1; flex-wrap: wrap; }

  .site-footer .cols { grid-template-columns: 1.2fr 1fr 1fr; gap: 28px; }
  .site-footer .cols > *:nth-child(n+4) { grid-column: span 1; }
}

/* Mobile */
@media (max-width: 720px) {
  body { font-size: 14px; }
  .container { padding: 0 16px; }

  .h-display { font-size: 36px; line-height: 1.1; }
  .h-1 { font-size: 28px; }
  .h-2 { font-size: 22px; }
  .h-3 { font-size: 18px; }
  .lede { font-size: 15px; }

  .section { padding: 48px 0; }
  .section-tight { padding: 24px 0; }
  .section-head { margin-bottom: 28px; }

  .btn-lg { padding: 14px 22px; font-size: 14px; }

  /* Header: collapse nav to drawer */
  .site-header .wrap { height: 64px; }
  .site-logo { height: 32px; }
  .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none;
    position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: #fff; padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
    box-shadow: var(--sh-2);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 14px; border-radius: 10px; font-size: 15px; background: transparent; }
  .nav-links a.active { background: #F5F7FA; box-shadow: none; }
  .nav-links a.active::after { display: none; }
  .nav-links .nav-cta { margin-left: 0; margin-top: 6px; background: var(--sd-blue); color: #fff; text-align: center; justify-content: center; }
  .nav-links .nav-cta:hover { background: var(--sd-blue-700); color: #fff; transform: none; }
  /* User report 2026-05-09 — Request-Quotation CTA was sitting flush against
     the language toggle inside the mobile drawer; add 16px breathing room
     plus a hairline divider for visual grouping, and center the lang pill. */
  .nav-links .lang-toggle {
    margin-top: 16px;
    padding-top: 16px;
    align-self: center;
    border-top: 1px solid var(--line-soft);
    width: 100%;
    justify-content: center;
  }

  /* Grids collapse */
  .g2, .g3, .g4, .g5, .g6 { grid-template-columns: 1fr; }

  /* Hero stacks */
  .page-hero { padding: 16px 0 8px; }
  .page-hero .inner { grid-template-columns: 1fr; gap: 16px; }
  .page-hero .hero-visual { order: -1; min-height: 280px; }
  .page-hero .hero-bottle-stage { min-height: 340px; }
  .page-hero .hero-bottle-stage .hero-bottle { width: 120%; max-width: 120%; margin: 0 -10%; }
  .page-hero p.lede { max-width: 100%; }
  .page-hero .actions .btn { flex: 1 1 auto; justify-content: center; }

  /* Cards */
  .card { padding: 18px; }

  /* CTA block */
  .cta-block {
    grid-template-columns: 1fr;
    padding: 28px 22px; gap: 16px; text-align: center;
  }
  .cta-block > .mascot { margin: 0 auto; width: 96px; height: 120px; }
  .cta-block .actions { justify-content: center; }
  .cta-block h3 { font-size: 22px; }

  /* Stats */
  .stats-strip { grid-template-columns: 1fr 1fr; }
  .stats-strip .stat .num { font-size: 24px; }

  /* Cert row */
  .cert-row { grid-template-columns: 1fr 1fr; }

  /* Footer */
  .site-footer { padding: 40px 0 20px; }
  .site-footer .cols {
    grid-template-columns: 1fr 1fr; gap: 24px;
  }
  .site-footer .cols > *:first-child { grid-column: 1 / -1; }
  .site-footer .qr { margin: 0 auto; }
  .site-footer .bot { flex-direction: column; gap: 8px; text-align: center; }
}

/* Small mobile */
@media (max-width: 480px) {
  .h-display { font-size: 30px; }
  .h-1 { font-size: 24px; }
  .cert-row { grid-template-columns: 1fr; }
  .site-footer .cols { grid-template-columns: 1fr; }
  .page-hero .actions { flex-direction: column; }
  .page-hero .actions .btn { width: 100%; }
}

/* ---------- Stats strip ---------- */
.stats-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px; overflow: hidden;
}
.stats-strip .stat {
  padding: 8px 20px; border-right: 1px dashed rgba(22,119,201,.25);
  text-align: center;
}
.stats-strip .stat:last-child { border-right: 0; }
.stats-strip .stat .num { font-family: var(--f-display); font-weight: 800; font-size: 30px; color: var(--sd-blue); line-height: 1; }
.stats-strip .stat .lbl { font-size: 12px; color: var(--ink-70); margin-top: 6px; }

/* ---------- Brand tiles (Trusted by) ---------- */
.brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.brand-tile {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 28px 24px;
  display: flex; align-items: center; justify-content: center;
  min-height: 130px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.brand-tile:hover {
  border-color: var(--sd-blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 60, 120, .08);
}
.brand-tile svg { width: 100%; max-width: 220px; height: auto; max-height: 70px; }
@media (max-width: 720px) {
  .brand-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .brand-tile { padding: 18px 14px; min-height: 100px; }
}

/* ---------- Stat hero — single big stat ---------- */
.stat-hero {
  position: relative;
  background: linear-gradient(160deg, var(--sd-blue) 0%, var(--sd-blue-700) 100%);
  border-radius: var(--r-xl);
  padding: 56px 48px 52px;
  color: #fff;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(22, 119, 201, .25);
}
.stat-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.22), transparent 38%),
    radial-gradient(circle at 88% 90%, rgba(255,255,255,.10), transparent 42%);
  pointer-events: none;
}
.stat-hero::after {
  content: ""; position: absolute;
  right: -36px; bottom: -36px;
  width: 160px; height: 160px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.22);
  pointer-events: none;
}
.stat-hero-num {
  position: relative;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(96px, 14vw, 168px);
  line-height: .9;
  letter-spacing: -0.04em;
  color: #fff;
  display: inline-flex;
  align-items: flex-start;
}
.stat-hero-num .plus {
  font-size: .42em;
  margin-left: 6px;
  margin-top: .18em;
  opacity: .82;
  font-weight: 700;
}
.stat-hero-lbl {
  position: relative;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 600;
  font-size: 32px;
  letter-spacing: .01em;
  margin-top: 4px;
}
.stat-hero-cap {
  position: relative;
  margin-top: 14px;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  font-weight: 500;
}
@media (max-width: 720px) {
  .stat-hero { padding: 40px 24px 36px; }
  .stat-hero-lbl { font-size: 24px; }
  .stat-hero-cap { font-size: 12px; }
}

/* ---------- CTA block ---------- */
.cta-block {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, #1677C9 0%, #0F5FA3 60%, #0B4A80 100%);
  color: #fff; padding: 44px;
  display: grid; grid-template-columns: 160px 1fr auto; gap: 40px; align-items: center;
}
.cta-block > .mascot { justify-self: center; position: relative; z-index: 2; }
.cta-block::after {
  content: ''; position: absolute; right: -100px; top: -100px; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.12), transparent 60%);
  pointer-events: none;
}
.cta-block h3 { font-family: var(--f-display); font-size: 28px; font-weight: 700; margin: 0; line-height: 1.2; color: #fff; }
.cta-block p { margin: 8px 0 0; opacity: .88; font-size: 14px; max-width: 560px; }
.cta-block .actions { display: flex; gap: 10px; position: relative; z-index: 1; }

/* Soft mascot — official illustration */
.mascot {
  position: relative; width: 120px; height: 150px; flex-shrink: 0;
  background-image: url("/assets/mascot-front-c164e5e1.png");
  background-size: contain; background-repeat: no-repeat; background-position: center;
  background-color: transparent; border-radius: 0; clip-path: none;
}
.mascot.waving { background-image: url("/assets/mascot-waving-b2341614.png"); }
.mascot.confident { background-image: url("/assets/mascot-confident-5d92d972.png"); }
.mascot.excited { background-image: url("/assets/mascot-excited-13f75973.png"); }
/* Stats in cards should never wrap number+label mid-unit */
.card .stat-num, .card [data-stat] { white-space: nowrap; }

/* Cert cards */
.cert-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cert-row.cert-row-2 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.cert-row.cert-row-2 .cert {
  padding: 28px 24px 32px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}
.cert-row.cert-row-2 .cert .cert-logo {
  display: block; width: 168px; height: auto; max-width: 80%;
  margin: 0 auto 18px;
  background: #fff; padding: 10px 14px; border-radius: 10px;
  box-sizing: border-box;
}
.cert-row.cert-row-2 .cert .cert-flag {
  display: block; width: 168px; max-width: 80%;
  margin: 0 auto 18px;
  background: #fff; padding: 10px 14px; border-radius: 10px;
  box-sizing: border-box;
}
.cert-row.cert-row-2 .cert .cert-flag svg {
  display: block; width: 100%; height: auto; aspect-ratio: 5 / 3;
  border-radius: 2px;
}

/* ---------- Solutions tiles (homepage) ---------- */
.sol-grid { gap: 24px; }
.sol-tile {
  padding: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.sol-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(15,68,138,.12); }
.sol-tile .sol-img {
  position: relative;
  height: 220px;
  overflow: hidden;
  display: grid; place-items: center;
}
.sol-tile .sol-img img {
  display: block; width: 100%; height: 100%;
  object-fit: contain;
}
.sol-tile .sol-body {
  padding: 22px 24px 26px;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
}
.sol-tile .sol-title {
  font-weight: 700; color: var(--sd-gray-900); font-size: 20px;
  letter-spacing: -0.01em;
}
.sol-tile .sol-desc {
  color: var(--ink-70); font-size: 14px; line-height: 1.6;
}

/* Per-tile background + image treatments */
.sol-img-bottles {
  background: linear-gradient(180deg, #EAF4FF 0%, #D7EAFC 100%);
}
.sol-img-bottles::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(60% 60% at 50% 90%, rgba(15,68,138,.15), transparent 70%),
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.6), transparent 60%);
  pointer-events: none;
}
.sol-img-bottles img {
  padding: 18px 18px 8px;
  filter: drop-shadow(0 14px 18px rgba(15,68,138,.18));
  position: relative; z-index: 1;
}

.sol-img-label {
  background: #0F448A;
  position: relative;
}
.sol-img-label::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(80% 100% at 50% 100%, rgba(255,255,255,.08), transparent 70%);
  pointer-events: none;
}
.sol-img-label img {
  object-fit: cover;
  object-position: center 60%;
}

.sol-img-truck {
  background: #F4F6F9;
}
.sol-img-truck img {
  object-fit: cover;
  object-position: center 55%;
}
.cert-row.cert-row-2 .cert .code { font-size: 28px; }
.cert-row.cert-row-2 .cert .code.long { font-size: 24px; }
.cert-row.cert-row-2 .cert .name { font-size: 14px; margin-top: 12px; line-height: 1.5; }
.cert-row.cert-row-2 .cert .status { margin-top: 14px; }
.cert {
  background: #fff; border: 2px solid var(--sd-blue); border-radius: var(--r-md);
  padding: 20px; text-align: center;
}
.cert .code { font-family: var(--f-display); font-weight: 800; font-size: 24px; color: var(--sd-blue); line-height: 1.05; }
.cert .code.long { font-size: 18px; letter-spacing: -0.01em; }
.cert .name { font-size: 12px; color: var(--ink-70); margin-top: 6px; font-weight: 600; }
.cert .status { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-blue); margin-top: 6px; font-weight: 700; }
.cert.on-blue { background: transparent; border-color: rgba(255,255,255,.4); }
.cert.on-blue .code, .cert.on-blue .status { color: #fff; }
/* Was rgba(255,255,255,.85) — failed WCAG AA contrast on --sd-blue (~3.6:1).
   Pure white is 4.7:1, comfortably passes. */
.cert.on-blue .name { color: #fff; }

/* ---------- Accessibility utilities ---------- */
/* Visually hidden, but reachable by screen readers + keyboard. Used for
   semantic landmarks/headings that don't need to be visible (e.g. an h2
   above the home values grid that names the section without affecting
   the existing card-grid design). Standard "sr-only" pattern. */
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--sd-blue);
  color: #fff;
  padding: 56px 0 24px;
}
.site-footer .cols {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 0.9fr;
  gap: 40px; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.2);
}
.site-footer h6 { font-family: var(--f-body); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; font-size: 13px; opacity: .85; line-height: 2; }
.site-footer ul li { transition: opacity .15s; cursor: pointer; }
.site-footer ul li:hover { opacity: 1; color: #fff; }
.site-footer .tagline { font-size: 12px; opacity: .85; margin-top: 12px; max-width: 280px; line-height: 1.7; }
.site-footer .since { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 500; font-size: 14px; letter-spacing: 0.02em; color: rgba(255,255,255,.92); margin-top: 6px; white-space: nowrap; }
.site-footer .contact-line { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; opacity: .9; }
.site-footer .qr {
  width: 96px; height: 96px; background: #fff; border-radius: 8px;
  background-image:
    conic-gradient(from 45deg at 30% 30%, var(--sd-blue-900) 0 25%, #fff 0 50%, var(--sd-blue-900) 0 75%, #fff 0 100%),
    linear-gradient(135deg, transparent 40%, #fff 40% 60%, transparent 60%);
  background-size: 12px 12px, 100% 100%;
  padding: 6px;
  margin-top: 4px;
}
.site-footer .social { display: flex; gap: 10px; margin-top: 14px; }
.site-footer .social a {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.15); display: grid; place-items: center;
  transition: background .15s;
}
.site-footer .social a:hover { background: rgba(255,255,255,.3); }
.site-footer .bot {
  display: flex; justify-content: space-between; padding-top: 18px;
  font-size: 11px; opacity: .7;
}

/* ---------- Solutions page hero ---------- */
.solutions-hero {
  position: relative;
  padding: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 88% 50%, rgba(22,119,201,.18), transparent 60%),
    radial-gradient(80% 60% at 12% 20%, rgba(184,221,247,.55), transparent 60%),
    linear-gradient(180deg, #F4FAFF 0%, #E8F3FC 100%);
  border: 1px solid rgba(22,119,201,.14);
  box-shadow: 0 14px 40px rgba(15,68,138,.08);
}
.solutions-hero::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background:
    repeating-linear-gradient(135deg, rgba(22,119,201,.06) 0 22px, rgba(22,119,201,0) 22px 44px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
          mask-image: linear-gradient(180deg, transparent, #000 60%);
  pointer-events: none;
}
.solutions-hero::after {
  content: "";
  position: absolute; right: -8%; top: 50%;
  width: 720px; height: 720px;
  transform: translateY(-50%);
  background: radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,0) 70%);
  pointer-events: none;
  z-index: 0;
}
.solutions-hero .inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 0.9fr 1.25fr;
  gap: 32px; align-items: center;
  padding: 56px 56px 48px;
  min-height: 520px;
}
.solutions-hero .sh-copy { max-width: 480px; }
.solutions-hero .sh-copy .eyebrow { display: inline-block; }
.solutions-hero .sh-copy h1 { margin-top: 14px; margin-bottom: 14px; }
.solutions-hero .sh-copy p.lede { max-width: 480px; margin-bottom: 24px; }
.solutions-hero .sh-copy .actions { display: flex; gap: 12px; flex-wrap: nowrap; margin-bottom: 26px; align-items: center; }
.solutions-hero .sh-copy .actions .btn { white-space: nowrap; }
.solutions-hero .sh-meta {
  display: flex; gap: 20px; flex-wrap: wrap;
  padding-top: 18px; border-top: 1px dashed rgba(22,119,201,.28);
}
.solutions-hero .sh-meta-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-70); font-weight: 500;
}
.solutions-hero .sh-meta-item .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sd-blue);
  box-shadow: 0 0 0 4px rgba(22,119,201,.14);
}
.solutions-hero .sh-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 480px;
}
.solutions-hero .sh-stage::before {
  content: "";
  position: absolute; left: 50%; bottom: 6%;
  transform: translateX(-50%);
  width: 78%; height: 26px;
  background: radial-gradient(ellipse at center, rgba(15,60,120,.32), rgba(15,60,120,0) 70%);
  filter: blur(3px);
  z-index: 0;
}
.solutions-hero .sh-bottles {
  position: relative; z-index: 1;
  width: 100%; max-width: 640px; height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 36px 56px rgba(15,60,120,.22))
    drop-shadow(0 10px 20px rgba(15,60,120,.12));
  animation: shFloat 8s ease-in-out infinite;
}

/* Floating side-tag pills that label the two bottles */
.solutions-hero .sh-tag {
  position: absolute; z-index: 3;
  display: inline-flex; flex-direction: column; gap: 3px;
  padding: 11px 18px;
  background: #fff;
  border: 1px solid rgba(22,119,201,.18);
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(15,60,120,.16), 0 2px 4px rgba(15,60,120,.06);
  font-family: var(--f-body);
  white-space: nowrap;
}
.solutions-hero .sh-tag .sh-tag-label {
  font-size: 15px; font-weight: 600; color: var(--ink-90); letter-spacing: .01em;
}
.solutions-hero .sh-tag .sh-tag-meta {
  font-size: 12px; color: var(--sd-blue); font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
}
.solutions-hero .sh-tag-l {
  top: 24%; left: 12%;
  animation: shTagL 6s ease-in-out infinite;
}
.solutions-hero .sh-tag-r {
  top: 58%; right: 12%;
  animation: shTagR 6s ease-in-out infinite .8s;
}
@keyframes shTagL {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-2px, -4px); }
}
@keyframes shTagR {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(2px, -4px); }
}
@keyframes shFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.solutions-hero .sh-drops { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.solutions-hero .sh-drops span {
  position: absolute; display: block; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(184,221,247,.55) 60%, rgba(22,119,201,.25));
  box-shadow: inset -2px -3px 6px rgba(15,60,120,.15);
  animation: shDrop 7s ease-in-out infinite;
}
.solutions-hero .sh-drops span:nth-child(1) { width: 36px; height: 36px; top: 14%;  left: 6%;  animation-delay: -.3s; }
.solutions-hero .sh-drops span:nth-child(2) { width: 18px; height: 18px; top: 36%;  left: 18%; animation-delay: -1.4s; opacity: .8; }
.solutions-hero .sh-drops span:nth-child(3) { width: 22px; height: 22px; bottom: 16%; left: 4%; animation-delay: -2.6s; }
.solutions-hero .sh-drops span:nth-child(4) { width: 14px; height: 14px; top: 22%;  right: 8%; animation-delay: -1.9s; opacity: .7; }
.solutions-hero .sh-drops span:nth-child(5) { width: 28px; height: 28px; bottom: 22%; right: 6%; animation-delay: -.8s; }
@keyframes shDrop {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(6deg); }
}
@media (max-width: 980px) {
  .solutions-hero .inner { grid-template-columns: 1fr; padding: 40px 32px; gap: 12px; min-height: 0; }
  .solutions-hero .sh-stage { order: -1; min-height: 320px; }
  .solutions-hero .sh-bottles { max-width: 480px; }
  .solutions-hero .sh-tag-l { top: 16%; left: 18%; }
  .solutions-hero .sh-tag-r { top: 58%; right: 18%; }
  .solutions-hero::after { width: 520px; height: 520px; right: -20%; top: 30%; }
}
@media (max-width: 600px) {
  .solutions-hero .inner { padding: 28px 20px; }
  .solutions-hero .sh-stage { min-height: 260px; }
  .solutions-hero .sh-bottles { max-width: 100%; }
  .solutions-hero .sh-tag { padding: 8px 12px; }
  .solutions-hero .sh-tag .sh-tag-label { font-size: 13px; }
  .solutions-hero .sh-tag .sh-tag-meta { font-size: 11px; }
  .solutions-hero .sh-tag-l { top: 8%; left: 8%; }
  .solutions-hero .sh-tag-r { top: auto; bottom: 10%; right: 8%; }
  .solutions-hero .sh-meta { gap: 10px 16px; }
}

/* ---------- Contact page hero ---------- */
.contact-hero {
  position: relative;
  padding: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    radial-gradient(110% 80% at 88% 50%, rgba(22,119,201,.20), transparent 60%),
    radial-gradient(75% 60% at 12% 18%, rgba(184,221,247,.60), transparent 60%),
    linear-gradient(180deg, #F4FAFF 0%, #E8F3FC 100%);
  border: 1px solid rgba(22,119,201,.14);
  box-shadow: 0 14px 40px rgba(15,68,138,.08);
}
.contact-hero::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: repeating-linear-gradient(135deg, rgba(22,119,201,.06) 0 22px, rgba(22,119,201,0) 22px 44px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
          mask-image: linear-gradient(180deg, transparent, #000 60%);
  pointer-events: none;
  z-index: 0;
}
.contact-hero::after {
  content: "";
  position: absolute; right: -10%; top: 50%;
  width: 680px; height: 680px;
  transform: translateY(-50%);
  background: radial-gradient(circle at center, rgba(22,119,201,.10), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.contact-hero .inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 56px; align-items: center;
  padding: 56px 56px;
  min-height: 520px;
}
.contact-hero .ch-drops {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.contact-hero .ch-drops span {
  position: absolute; display: block; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(184,221,247,.55) 60%, rgba(22,119,201,.25));
  box-shadow: 0 4px 14px rgba(22,119,201,.16);
  animation: chDrop 7s ease-in-out infinite;
}
.contact-hero .ch-drops span:nth-child(1) { width: 36px; height: 36px; top: 14%; left: 6%;  animation-delay: -.3s; }
.contact-hero .ch-drops span:nth-child(2) { width: 18px; height: 18px; top: 38%; left: 14%; animation-delay: -1.4s; opacity: .8; }
.contact-hero .ch-drops span:nth-child(3) { width: 22px; height: 22px; bottom: 18%; left: 4%; animation-delay: -2.6s; }
.contact-hero .ch-drops span:nth-child(4) { width: 14px; height: 14px; top: 22%; left: 46%; animation-delay: -1.9s; opacity: .7; }
.contact-hero .ch-drops span:nth-child(5) { width: 28px; height: 28px; bottom: 22%; right: 18%; animation-delay: -.8s; }
.contact-hero .ch-drops span:nth-child(6) { width: 20px; height: 20px; top: 18%; right: 30%; animation-delay: -2.1s; opacity: .75; }
@keyframes chDrop {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(6deg); }
}

/* mascot stage */
.contact-hero .ch-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 460px;
}
.contact-hero .ch-stage::before {
  content: "";
  position: absolute; left: 50%; bottom: 4%;
  width: 88%; height: 36px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(22,119,201,.22), transparent 70%);
  filter: blur(14px);
  z-index: 0;
}
.contact-hero .ch-mascot {
  position: relative; z-index: 2;
  width: 100%; max-width: 440px; height: auto; object-fit: contain;
  filter: drop-shadow(0 22px 36px rgba(15,68,138,.22)) drop-shadow(0 8px 16px rgba(22,119,201,.14));
  animation: chFloat 5.5s ease-in-out infinite;
  transform-origin: 50% 80%;
}
@keyframes chFloat {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50%      { transform: translateY(-12px) rotate(1.2deg); }
}

/* speech bubble */
.contact-hero .ch-bubble {
  position: absolute; z-index: 3;
  top: 8%; right: 4%;
  background: #fff;
  border: 1px solid rgba(22,119,201,.16);
  border-radius: 18px;
  padding: 12px 16px;
  box-shadow: 0 10px 28px rgba(15,68,138,.16);
  font-size: 14px; font-weight: 600; color: var(--ink-90);
  display: inline-flex; align-items: center; gap: 8px;
  animation: chBubble 4.5s ease-in-out infinite;
}
.contact-hero .ch-bubble::after {
  content: "";
  position: absolute; left: 22px; bottom: -8px;
  width: 14px; height: 14px;
  background: #fff;
  border-right: 1px solid rgba(22,119,201,.16);
  border-bottom: 1px solid rgba(22,119,201,.16);
  transform: rotate(45deg);
}
.contact-hero .ch-bubble .ch-bubble-emoji {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, #FF6B9D, #FF4F7E);
  color: #fff;
}
@keyframes chBubble {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* concentric ripple rings under mascot */
.contact-hero .ch-rings {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.contact-hero .ch-rings span {
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  border: 1px solid rgba(22,119,201,.20);
  animation: chRing 4.2s ease-out infinite;
  opacity: 0;
}
.contact-hero .ch-rings span:nth-child(2) { animation-delay: 1.4s; }
.contact-hero .ch-rings span:nth-child(3) { animation-delay: 2.8s; }
@keyframes chRing {
  0%   { transform: scale(.6); opacity: 0; }
  20%  { opacity: .65; }
  100% { transform: scale(1.6); opacity: 0; }
}

@media (max-width: 900px) {
  .contact-hero .inner { grid-template-columns: 1fr; gap: 24px; padding: 32px 24px; min-height: auto; }
  .contact-hero .ch-stage { order: -1; min-height: 320px; }
  .contact-hero .ch-mascot { max-width: 320px; }
  .contact-hero .ch-bubble { top: 0; right: 6%; font-size: 13px; padding: 10px 14px; }
  .contact-hero .ch-rings span { width: 220px; height: 220px; }
}
@media (max-width: 600px) {
  .contact-hero .ch-stage { min-height: 260px; }
  .contact-hero .ch-mascot { max-width: 260px; }
  .contact-hero .ch-bubble { font-size: 12px; padding: 8px 12px; }
  .contact-hero .ch-rings span { width: 180px; height: 180px; }
}

/* ---------- Utility ---------- */
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.center { text-align: center; }
.mt-sm { margin-top: 12px; }
.mt-md { margin-top: 24px; }
.mt-lg { margin-top: 40px; }

/* =====================================================================
   Responsive sweep — final pass
   Targets inline padding/grids that escape the regular breakpoints,
   plus general mobile hygiene (no horizontal scroll, smaller chrome).
   ===================================================================== */

/* Universal: never let any element force horizontal scroll on small screens.
   `overflow-x: clip` instead of `hidden` — `hidden` silently turns the body
   into a scroll container, which breaks `position: sticky` on .site-header
   (sticky resolves against the containing block, not the viewport, when the
   parent itself scrolls). `clip` has the same visual effect without that
   side-effect. Browser support: Chrome 90+, Safari 16+, Firefox 81+ — older
   browsers degrade gracefully (header falls back to non-sticky). */
html, body { overflow-x: clip; }
img, svg, video { max-width: 100%; height: auto; }
iframe { max-width: 100%; }
table { max-width: 100%; }

/* Tablet — 1024 and below: tighten the page-hero card padding (inline 44px is too big) */
@media (max-width: 1024px) {
  .page-hero[style*="padding:44px"],
  .page-hero[style*="padding: 44px"] { padding: 32px !important; }
}

/* Phone — 720 and below */
@media (max-width: 720px) {
  /* Section header sizing */
  .section-head h2 { font-size: 24px; }

  /* Page-hero cards: inline 44px → comfortable mobile padding */
  .page-hero[style*="padding:44px"],
  .page-hero[style*="padding: 44px"],
  .page-hero[style*="padding:48px"],
  .page-hero[style*="padding: 48px"] { padding: 24px 20px !important; }

  /* Quality page hero: padding:48px 0 64px */
  .page-hero[style*="padding:48px 0"] { padding: 24px 0 32px !important; }

  /* Breadcrumb wraps */
  .breadcrumb { flex-wrap: wrap; row-gap: 4px; padding-top: 16px; padding-bottom: 8px; font-size: 12px; }

  /* Contact-page sidebar: tighten inline grid + hero quick-info row */
  .page-hero .inner > div > div[style*="display:flex"][style*="gap:28px"] {
    gap: 14px 18px !important;
  }
  .page-hero .inner > div [style*="display:flex"][style*="gap:12px"][style*="align-items:center"] {
    flex: 1 1 100%;
    min-width: 0;
  }

  /* Contact form: stack the 2-up rows */
  form.card [style*="grid-template-columns:1fr 1fr"],
  form.card [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  form.card { padding: 22px !important; }

  /* Map iframe */
  .card iframe { height: 320px !important; }

  /* Case-studies inline cards (1fr 360px → stack) */
  .card[style*="grid-template-columns:1fr 360px"],
  .card[style*="grid-template-columns: 1fr 360px"],
  .card[style*="grid-template-columns:360px 1fr"],
  .card[style*="grid-template-columns: 360px 1fr"] {
    grid-template-columns: 1fr !important;
    padding: 22px !important;
    gap: 18px !important;
  }
  /* If image was second visually, force it to render first on stacked layout */
  .card[style*="grid-template-columns:1fr 360px"] > .ph,
  .card[style*="grid-template-columns: 1fr 360px"] > .ph { order: -1; }

  /* Stats hero on quality page (.stat-hero already handled) */

  /* Footer cluster */
  .site-footer .qr { width: 88px; height: 88px; }

  /* Lang toggle cramped on phones */
  .lang-toggle { margin-left: 0; }
  .lang-toggle button { padding: 4px 9px; min-width: 28px; font-size: 11px; }

  /* Header right cluster wraps cleanly */
  .site-header .wrap { gap: 8px; }

  /* Section sizes */
  section[style*="padding-top:24px"] { padding-top: 12px !important; }

  /* Big inline padding rectangles (eg 56px, 48px) */
  [style*="padding:56px"]:not(.stats-strip):not(.cta-block):not(.stat-hero),
  [style*="padding: 56px"]:not(.stats-strip):not(.cta-block):not(.stat-hero) {
    padding: 28px !important;
  }
  [style*="padding:48px"]:not(.stat-hero):not(.cta-block):not(.page-hero) { padding: 24px !important; }
  [style*="padding:40px"]:not(.cta-block):not(.stat-hero) { padding: 22px !important; }

  /* Stats strip: keep 2 cols (already in @720) — patch nums */
  .stats-strip .stat .num { font-size: 22px; }

  /* Headline visual scale — actions wrap full-width-ish */
  .actions, .row { flex-wrap: wrap; }

  /* Long single-word phone numbers / emails should wrap */
  .site-footer .contact-line { word-break: break-word; }

  /* ---- Late overrides: these base rules sit AFTER the early @720 block ---- */
  /* Footer collapses to 2 columns; brand spans full width */
  .site-footer .cols {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 24px !important;
  }
  .site-footer .cols > *:first-child {
    grid-column: 1 / -1 !important;
    text-align: left;
  }
  .site-footer .cols > * { min-width: 0; }
  .site-footer .qr-wrap, .site-footer .qr { margin-left: 0; }

  /* Stats strip: 2x2 */
  .stats-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .stats-strip .stat { border-right: 0; padding: 12px 14px; }
  .stats-strip .stat:nth-child(odd) { border-right: 1px dashed rgba(22,119,201,.25); }
  .stats-strip .stat:nth-child(-n+2) { border-bottom: 1px dashed rgba(22,119,201,.25); }

  /* Brand tiles: 2 cols */
  .brand-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .brand-tile { padding: 18px 14px !important; min-height: 96px !important; }

  /* CTA block: stack vertically */
  .cta-block {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 28px 22px !important;
    text-align: center;
  }
  .cta-block > .mascot { width: 96px; height: 96px; }
  .cta-block .actions { justify-content: center; flex-wrap: wrap; }
  .cta-block .actions .btn { flex: 1 1 auto; }

  /* Cert rows: stack */
  .cert-row,
  .cert-row.cert-row-2 { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* Solutions tiles: stack */
  .sol-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .sol-tile .sol-img { height: 200px !important; }
  .sol-tile .sol-body { padding: 18px 20px 22px !important; }

  /* Page-hero: stack image+copy */
  .page-hero .inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .page-hero .hero-bottle-stage { min-height: 360px !important; }
  .page-hero .hero-bottle-stage .hero-bottle {
    width: 110% !important; max-width: 110% !important; margin: 0 -5% !important;
  }
  .page-hero .hero-bottle-stage .hero-mascot {
    width: clamp(220px, 60%, 320px) !important;
  }

  /* Generic image cap so nothing pokes the viewport */
  img { max-width: 100%; height: auto; }
}

/* Tiny phones */
@media (max-width: 420px) {
  .h-display { font-size: 26px; }
  .h-1 { font-size: 22px; }
  .h-2 { font-size: 19px; }
  .container { padding: 0 14px; }
  .breadcrumb { font-size: 11px; }
  .btn { padding: 11px 18px; font-size: 13px; }
  .btn-sm { padding: 8px 14px; }
  .page-hero[style*="padding:44px"],
  .page-hero[style*="padding: 44px"],
  .page-hero[style*="padding:48px"],
  .page-hero[style*="padding: 48px"] { padding: 20px 16px !important; }
  form.card { padding: 18px !important; }
  .stats-strip { padding: 14px; }
  .stats-strip .stat { padding: 10px 8px; }
  .site-footer { padding: 32px 0 16px; }
  .site-footer .qr { width: 76px; height: 76px; }
}


/* ---------- Contact form ---------- */
.sd-form { display: grid; gap: 18px; }
.sd-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .sd-form .row-2 { grid-template-columns: 1fr; } }
.sd-field { display: block; }
.sd-field > .lbl {
  display: block;
  font-size: 12px; font-weight: 600; color: var(--ink-70);
  margin-bottom: 8px; letter-spacing: .04em; text-transform: uppercase;
}
.sd-field > .lbl .req { color: var(--sd-blue); margin-left: 2px; }
.sd-input, .sd-textarea {
  width: 100%; box-sizing: border-box;
  padding: 13px 16px;
  border: 1.5px solid #CBD3DE;
  border-radius: 12px;
  background: #fff;
  font-family: inherit; font-size: 14.5px; color: var(--ink-90);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  -webkit-appearance: none; appearance: none;
}
.sd-input::placeholder, .sd-textarea::placeholder { color: var(--ink-30); }
.sd-input:hover, .sd-textarea:hover { border-color: #9DAEC2; }
.sd-input:focus, .sd-textarea:focus {
  border-color: var(--sd-blue);
  box-shadow: 0 0 0 4px rgba(22,119,201,.14);
  background: #fff;
}
.sd-input:focus-visible, .sd-textarea:focus-visible { outline: none; }
.sd-textarea { resize: vertical; min-height: 140px; line-height: 1.55; }
.sd-input:invalid:not(:placeholder-shown),
.sd-textarea:invalid:not(:placeholder-shown) { border-color: #D9534F; }
.sd-form-foot {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: space-between;
  padding-top: 4px;
}
.sd-form-foot .privacy { color: var(--ink-50); font-size: 12px; margin: 0; flex: 1; min-width: 220px; line-height: 1.5; }
.sd-form-success {
  display: none;
  padding: 14px 16px;
  background: #E8F5EE; border: 1px solid #A8D5BA; border-radius: 12px;
  color: #1B6B3D; font-size: 14px; font-weight: 500;
}

/* ---------- Home/Unified footer ---------- */

/* ---- Homepage footer (3-col redesign) ---- */
.home-footer { background: var(--sd-blue); color: #fff; padding: 56px 0 18px; position: relative; overflow: hidden; }
.home-footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .3;
  background:
    radial-gradient(700px 280px at 88% -10%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(900px 320px at 5% 110%, rgba(0,0,0,.22), transparent 60%);
}
.home-footer .container { position: relative; z-index: 1; }

.hf-grid {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 56px;
  padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,.18);
  align-items: start;
}
.hf-contact-item .ico.line-ico { background: transparent; padding: 0; overflow: hidden; }
.hf-contact-item .ico.line-ico img { width: 100%; height: 100%; display: block; border-radius: 8px; }

/* Brand column */
.hf-brand { display: flex; flex-direction: column; align-items: flex-start; }
.hf-brand .since {
  font-family: 'Playfair Display', Georgia, serif; font-style: italic;
  font-weight: 700; font-size: 13px; opacity: .95; margin: 10px 0 14px;
  text-align: center; align-self: stretch; max-width: 175px;
}
html[lang="th"] .hf-brand .since {
  font-family: 'Noto Sans Thai', sans-serif;
  font-style: normal; font-size: 16.5px; letter-spacing: -0.01em;
}
.hf-brand .tagline { font-size: 13.5px; line-height: 1.7; opacity: .82; max-width: 320px; margin: 0 0 20px; }
.hf-brand .social { display: flex; gap: 10px; }
.hf-brand .social a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.12); display: grid; place-items: center;
  transition: background .18s, transform .18s;
}
.hf-brand .social a:hover { background: rgba(255,255,255,.22); transform: translateY(-2px); }

/* Column eyebrow */
.hf-eyebrow {
  font-family: var(--f-body); font-weight: 700; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,.7); margin: 0 0 16px;
  display: flex; align-items: center; gap: 10px;
}
.hf-eyebrow::before { content:""; width: 22px; height: 1px; background: rgba(255,255,255,.4); }

/* Contact list */
.hf-contact-list { display: flex; flex-direction: column; gap: 10px; }
.hf-contact-item {
  display: flex; align-items: flex-start; gap: 12px;
  color: #fff; text-decoration: none;
  padding: 6px 8px; margin: -6px -8px;
  border-radius: 10px; transition: background .15s;
}
.hf-contact-item:hover { background: rgba(255,255,255,.07); }
.hf-contact-item .ico {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px;
  background: rgba(255,255,255,.12);
  display: grid; place-items: center; color: #fff;
}
.hf-contact-item .lbl {
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,.6); margin-bottom: 2px;
}
.hf-contact-item .val { font-size: 13.5px; line-height: 1.45; color: #fff; }
.hf-contact-item .val .sub { display: block; font-size: 12px; color: rgba(255,255,255,.65); margin-top: 2px; }

/* Bottom bar */
.hf-bot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 16px; font-size: 12px; color: rgba(255,255,255,.6);
}
.hf-bot .legal { display: flex; gap: 18px; }
.hf-bot .legal a { color: rgba(255,255,255,.6); text-decoration: none; transition: color .15s; }
.hf-bot .legal a:hover { color: #fff; }

@media (max-width: 980px) {
  .hf-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .hf-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .home-footer { padding: 44px 0 16px; }
  .hf-grid { grid-template-columns: 1fr; gap: 32px; }
  .hf-bot { flex-direction: column; gap: 10px; text-align: center; }
  .hf-bot .legal { flex-wrap: wrap; justify-content: center; gap: 12px; }
}