/* 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 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.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;
  color: var(--sd-blue);
}
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; }

  /* 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; }
.cert.on-blue .name { color: rgba(255,255,255,.85); }

/* ---------- 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 */
html, body { overflow-x: hidden; }
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; }
}