/* =============================================================
   Sylva — Site styles (composition layer on top of tokens.css)
   tokens.css must be loaded BEFORE this file via <link> in HTML.
   ============================================================= */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 22px;
  border-radius: var(--radius-md);
  font: var(--type-button);
  text-decoration: none;
  border: 0;
  cursor: pointer;
  gap: 8px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:active { background: var(--color-primary-active); }
.btn--secondary { background: transparent; color: var(--color-ink); border: 1px solid var(--color-hairline); }
.btn--secondary:hover { border-color: var(--color-ink); }
.btn--dark { background: var(--color-surface-dark); color: var(--color-on-dark); }
.btn--ghost { background: transparent; color: var(--color-ink); }
.btn--ghost:hover { color: var(--color-primary); }
.btn--ghost-on-coral { background: transparent; color: var(--color-on-primary); border: 1px solid rgba(255,255,255,0.45); }
.btn--cream { background: var(--color-canvas); color: var(--color-ink); }
.btn--ondark { background: var(--color-surface-dark-elevated); color: var(--color-on-dark); }

.btn--sm { height: 36px; padding: 0 16px; }
.btn--lg { height: 52px; padding: 0 28px; font-size: 15px; }

.btn .arrow { display: inline-block; transition: transform 0.2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* Inline link */
.link-coral { color: var(--color-primary); font: var(--type-button); display: inline-flex; align-items: center; gap: 6px; }
.link-coral:hover { text-decoration: underline; }
.link-coral .arrow { transition: transform 0.2s var(--ease); }
.link-coral:hover .arrow { transform: translateX(3px); }

/* ===== Badges ===== */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font: var(--type-caption);
}
.badge--pill { background: var(--color-surface-card); color: var(--color-ink); }
.badge--cream { background: var(--color-canvas); color: var(--color-ink); border: 1px solid var(--color-hairline); }
.badge--coral { background: var(--color-primary); color: var(--color-on-primary); }
.badge--coral-soft { background: var(--color-surface-card); color: var(--color-primary-active); }
.badge--dark { background: var(--color-surface-dark); color: var(--color-on-dark); }

.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); }

/* ===== TOP NAV ===== */
.topnav {
  position: sticky; top: 0; z-index: 50;
  height: 88px;
  background: rgba(250, 249, 245, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--color-hairline-soft);
}
.topnav__inner {
  max-width: var(--container-max);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 36px;
}
.topnav__brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.4px;
}
.topnav__brand img { width: auto; height: 28px; }
.topnav__brand .spike { width: 22px; height: 22px; color: var(--color-primary); }
.topnav__logo {
  height: 66px !important;   /* 75% of 88px nav height */
  width: auto !important;
  display: block;
}

.topnav__menu {
  display: flex;
  gap: 28px;
  flex: 1;
  justify-content: center;
}
.topnav__link {
  font: var(--type-nav);
  color: var(--color-ink);
  position: relative;
  padding: 6px 2px;
  white-space: nowrap;
}
.topnav__link:hover { color: var(--color-primary); }
.topnav__link.is-active { color: var(--color-primary); }
.topnav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--color-primary);
}

/* Dropdown submenu (e.g. บริการ) */
.topnav__dropdown { position: relative; }
.topnav__link--has-submenu {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.topnav__caret { transition: transform 0.2s var(--ease); }
.topnav__dropdown:hover .topnav__caret { transform: rotate(180deg); }
.topnav__dropdown:hover .topnav__link--has-submenu { color: var(--color-primary); }

.topnav__submenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 12px;
  transform: translateY(-4px);
  min-width: 240px;
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(20, 20, 19, 0.08);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s var(--ease), visibility 0.18s var(--ease), transform 0.18s var(--ease);
  z-index: 60;
  padding: 8px 0;
  pointer-events: none;
}
/* Bridge hover gap so mouse can travel from link to submenu */
.topnav__submenu::before {
  content: "";
  position: absolute;
  top: -12px; left: 0; right: 0;
  height: 12px;
}
.topnav__dropdown:hover .topnav__submenu,
.topnav__dropdown:focus-within .topnav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.topnav__submenu-link {
  display: block;
  padding: 10px 20px;
  font: var(--type-body-sm);
  color: var(--color-ink);
  white-space: nowrap;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.topnav__submenu-link:hover {
  background: var(--color-surface-soft);
  color: var(--color-primary);
}

.topnav__right { display: flex; align-items: center; gap: 14px; }
.topnav__mobile-toggle { display: none; }

@media (max-width: 960px) {
  .topnav__menu { display: none; }
  .topnav__mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-md);
    color: var(--color-ink);
    background: transparent;
  }
  .topnav__menu.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 88px; left: 0; right: 0;
    background: var(--color-canvas);
    padding: 16px var(--gutter) 24px;
    gap: 4px;
    border-bottom: 1px solid var(--color-hairline);
  }
  .topnav__menu.is-open .topnav__link {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-hairline-soft);
  }
}

/* ===== Section primitives ===== */
.section { padding: var(--space-section) 0; }
.section--soft { background: var(--color-surface-soft); }
.section--card { background: var(--color-surface-card); }
.section--dark { background: var(--color-surface-dark); color: var(--color-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--color-on-dark); }
.section--dark p { color: var(--color-on-dark-soft); }

/* Brand-colored section (pine green spotlight) */
.section--brand {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.section--brand h1, .section--brand h2, .section--brand h3, .section--brand h4 { color: var(--color-on-primary); }
.section--brand p { color: rgba(255, 255, 255, 0.88); }
.section--brand strong { color: var(--color-on-primary); }
.section--brand .kicker { color: rgba(255, 255, 255, 0.7); }
.section--brand .kicker::before { background: var(--color-on-primary); }
.section--brand .serif-it { color: rgba(255, 255, 255, 0.95); }
.section--brand .btn--primary {
  background: var(--color-on-primary);
  color: var(--color-primary-active);
}
.section--brand .btn--primary:hover { background: var(--color-canvas); }
.section--brand .btn--secondary {
  background: transparent;
  color: var(--color-on-primary);
  border-color: rgba(255, 255, 255, 0.45);
}
.section--brand .btn--secondary:hover { border-color: var(--color-on-primary); }

.section__head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.section__head .kicker { margin-bottom: 16px; }
.section__head h2 { margin-bottom: 0; }
.section__head p { font-size: 17px; max-width: 56ch; }
@media (max-width: 760px) {
  .section__head { grid-template-columns: 1fr; gap: 12px; }
}

/* ===== Hero slider ===== */
.hero {
  padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 7vw, 100px);
  background: var(--color-canvas);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.hero__copy { display: flex; flex-direction: column; gap: var(--space-lg); }
.hero__badge { align-self: flex-start; }
.hero__h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(44px, 5.6vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.6px;
  color: var(--color-ink);
}
.hero__sub {
  font-size: 18px;
  color: var(--color-body);
  max-width: 48ch;
}
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.hero__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--color-hairline);
}
.hero__meta > div { display: flex; flex-direction: column; gap: 4px; }
.hero__meta strong {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--color-ink);
  line-height: 1;
}
.hero__meta span { font: var(--type-caption); color: var(--color-muted); }

.hero__stage {
  position: relative;
}

/* — Image slider — */
.slider {
  position: relative;
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-surface-card);
}
.slider__track {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
}
.slider__track--wide { aspect-ratio: 16/10; }
.slider__track--cinematic { aspect-ratio: 21/9; min-height: 480px; }
.slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}
.slider__slide.is-active { opacity: 1; pointer-events: auto; }
.slider__slide image-slot {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  --slot-border: 0;
  --slot-radius: 0;
  --slot-bg: var(--color-surface-card);
}
.slider__slide:nth-child(2) image-slot { --slot-bg: var(--color-surface-card); }
.slider__slide:nth-child(3) image-slot { --slot-bg: var(--color-surface-card); }

.slider__arrow {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(250, 249, 245, 0.92);
  border: 1px solid var(--color-hairline);
  color: var(--color-ink);
  font-size: 20px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  z-index: 4;
  transition: background 0.2s var(--ease);
}
.slider__arrow:hover { background: var(--color-canvas); }
.slider__arrow--prev { left: 16px; }
.slider__arrow--next { right: 16px; }

.slider__dots {
  position: absolute; bottom: 18px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 4;
}
.slider__dots button {
  width: 24px; height: 3px;
  border-radius: 2px;
  background: rgba(250, 249, 245, 0.55);
  transition: width 0.2s var(--ease), background 0.2s var(--ease);
}
.slider__dots button.is-active { background: var(--color-on-dark); width: 36px; }

.slider__counter {
  position: absolute; bottom: 16px; right: 22px;
  z-index: 4;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--color-on-dark);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.25);
}
.slider__counter em { opacity: 0.6; font-style: italic; margin: 0 4px; }

/* ===== Cards ===== */
.card {
  background: var(--color-surface-card);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex; flex-direction: column; gap: 14px;
}
.card--cream { background: var(--color-canvas); border: 1px solid var(--color-hairline); }
.card--coral { background: var(--color-primary); color: var(--color-on-primary); }
.card--coral-soft { background: var(--color-surface-card); }
.card--dark { background: var(--color-surface-dark); color: var(--color-on-dark); }
.card--dark p { color: var(--color-on-dark-soft); }
.card__icon { width: 32px; height: 32px; color: currentColor; }
.card__title { font: var(--type-title-md); color: inherit; }
.card__body { font: var(--type-body-md); color: var(--color-body); }
.card--dark .card__body, .card--coral .card__body { color: rgba(255,255,255,0.82); }
.card__link { margin-top: auto; color: var(--color-primary); font: var(--type-button); }
.card--coral .card__link, .card--dark .card__link { color: var(--color-on-primary); }

/* ===== FOOTER ===== */
.footer {
  background: var(--color-surface-dark);
  color: var(--color-on-dark);
  padding: 64px 0 24px;
}
.footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Trust banner (Google · Facebook · No.1 award) */
.footer__trust-banner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-bottom: 32px;
  margin-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer__trust-item { display: flex; align-items: center; gap: 14px; }
.footer__trust-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.footer__trust-meta { display: flex; flex-direction: column; }
.footer__trust-num {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-on-dark);
  line-height: 1;
}
.footer__trust-label {
  font: var(--type-caption);
  color: var(--color-on-dark-soft);
  margin-top: 4px;
}
.footer__brand .topnav__brand { color: var(--color-on-dark); font-size: 28px; }
.footer__brand .topnav__logo { height: 104px !important; }
.footer__about { font: var(--type-body-sm); color: var(--color-on-dark-soft); margin-top: 16px; max-width: 60ch; line-height: 1.6; }
.footer__col-title {
  font: var(--type-caption-uppercase);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-on-dark);
  margin-bottom: 18px;
}
.footer__links { display: flex; flex-direction: column; gap: 10px; }
.footer__links--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
.footer__links a {
  font: var(--type-body-sm);
  color: var(--color-on-dark-soft);
}
.footer__links a:hover { color: var(--color-on-dark); text-decoration: none; }
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.footer__copy { font: var(--type-caption); color: var(--color-on-dark-soft); }
.footer__social { display: flex; gap: 14px; }
.footer__social a {
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-on-dark-soft);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.footer__social a:hover { color: var(--color-on-dark); border-color: rgba(255,255,255,0.3); }

@media (max-width: 760px) {
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__trust-banner { grid-template-columns: 1fr; gap: 16px; }
}

/* ===== Coral CTA band ===== */
.coral-cta {
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: var(--space-section) 0;
}
.coral-cta__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: center;
}
.coral-cta h2 { color: var(--color-on-primary); }
.coral-cta p { color: rgba(255,255,255,0.85); font-size: 17px; }
.coral-cta__ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-self: end; }
@media (max-width: 760px) {
  .coral-cta__inner { grid-template-columns: 1fr; }
  .coral-cta__ctas { justify-self: start; }
}

/* ===== Page hero (used on inner pages) ===== */
.page-hero {
  padding: clamp(48px, 6vw, 80px) 0 clamp(36px, 5vw, 64px);
  background: var(--color-canvas);
  border-bottom: 1px solid var(--color-hairline-soft);
}
.page-hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.page-hero__crumbs {
  display: flex; gap: 8px; font: var(--type-caption);
  color: var(--color-muted);
  margin-bottom: 24px;
}
.page-hero__crumbs a:hover { color: var(--color-primary); }
.page-hero__crumbs .sep { opacity: 0.4; }
.page-hero h1 { margin-bottom: 16px; max-width: 18ch; }
.page-hero__lede { font-size: 19px; color: var(--color-body); max-width: 56ch; }

/* ===== Stats strip ===== */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  padding: 56px 0;
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
}
.stats-strip > div {
  padding: 0 var(--space-xl);
  border-right: 1px solid var(--color-hairline);
}
.stats-strip > div:last-child { border-right: 0; }
.stats-strip strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(40px, 4.2vw, 56px);
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--color-ink);
  line-height: 1;
  margin-bottom: 12px;
}
.stats-strip span { font: var(--type-body-sm); color: var(--color-muted); }

/* ===== Reveal on scroll ===== */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-1 { transition-delay: 0.08s; }
.reveal-2 { transition-delay: 0.16s; }
.reveal-3 { transition-delay: 0.24s; }

/* ===== Tweaks panel ===== */
.tweaks-panel {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 100;
  width: 280px;
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: 18px;
  display: none;
  flex-direction: column;
  gap: 14px;
  font-family: var(--font-sans);
}
.tweaks-panel.is-open { display: flex; }
.tweaks-panel__head { display: flex; justify-content: space-between; align-items: center; }
.tweaks-panel__title { font: var(--type-title-sm); color: var(--color-ink); }
.tweaks-panel__close { color: var(--color-muted); font-size: 18px; }
.tweaks-panel__row { display: flex; flex-direction: column; gap: 8px; }
.tweaks-panel__label { font: var(--type-caption); color: var(--color-muted); letter-spacing: 0.05em; text-transform: uppercase; }
.tweaks-panel__seg { display: flex; gap: 4px; padding: 4px; background: var(--color-surface-soft); border-radius: var(--radius-md); }
.tweaks-panel__seg button {
  flex: 1;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font: var(--type-caption);
  color: var(--color-muted);
  background: transparent;
}
.tweaks-panel__seg button.is-active { background: var(--color-canvas); color: var(--color-ink); box-shadow: var(--shadow-soft); }
.tweaks-panel__swatches { display: flex; gap: 8px; }
.tweaks-panel__swatch {
  flex: 1;
  height: 32px;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
}
.tweaks-panel__swatch.is-active { border-color: var(--color-ink); }

.tweaks-fab {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 48px; height: 48px;
  background: var(--color-ink);
  color: var(--color-on-dark);
  border-radius: 50%;
  z-index: 99;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lift);
}
.tweaks-fab svg { width: 20px; height: 20px; }

/* ===== Misc ===== */
.dot-pulse {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--color-success);
  border-radius: 50%;
  position: relative;
  margin-right: 8px;
}
.dot-pulse::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse {
  0% { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.4); }
}

/* ===== Video carousel (horizontal scroll with snap) ===== */
.video-carousel-wrap {
  position: relative;
}
.video-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 280px);
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px 12px;
  margin: 0 -4px;
  /* Hidden scrollbar — infinite loop jumps would look glitchy with bar */
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.video-carousel::-webkit-scrollbar { display: none; }
.video-carousel.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}
.video-carousel.is-dragging a {
  pointer-events: none;
}
.video-carousel > * {
  scroll-snap-align: start;
}
.video-carousel > .is-clone {
  /* visually identical to originals; just marks them in DOM */
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-canvas);
  color: var(--color-ink);
  border: 1px solid var(--color-hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(20, 20, 19, 0.08);
  cursor: pointer;
  z-index: 4;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.carousel-arrow:hover {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}
.carousel-arrow--prev { left: -22px; }
.carousel-arrow--next { right: -22px; }
.carousel-arrow[disabled] {
  opacity: 0.4;
  cursor: default;
}
.carousel-arrow[disabled]:hover {
  background: var(--color-canvas);
  color: var(--color-ink);
  border-color: var(--color-hairline);
}

@media (max-width: 720px) {
  .video-carousel { grid-auto-columns: minmax(220px, 240px); }
  .carousel-arrow--prev { left: 4px; }
  .carousel-arrow--next { right: 4px; }
}

/* ===== Video cards (shared between threads.html + videos.html + index.html) ===== */
.video-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
@media (max-width: 920px) { .video-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .video-grid { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; } }

.video-card {
  display: flex; flex-direction: column;
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.video-card__thumb {
  position: relative;
  aspect-ratio: 9/16;
  background: var(--color-surface-card);
  overflow: hidden;
}
.video-card__thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 65%, rgba(20,20,19,0.55) 100%);
  pointer-events: none;
}
.video-card__thumb image-slot {
  display: block !important;
  width: 100% !important; height: 100% !important;
  aspect-ratio: auto !important;
  --slot-radius: 0;
  --slot-border: 0;
  --slot-bg: var(--color-surface-card);
}
.video-card__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--color-canvas);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
}
.video-card__duration {
  position: absolute;
  bottom: 10px; right: 10px;
  z-index: 3;
  padding: 2px 8px;
  background: rgba(20,20,19,0.7);
  color: var(--color-on-dark);
  border-radius: var(--radius-sm);
  font: var(--type-caption);
  font-size: 11px;
}
.video-card__case-num {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 3;
  padding: 4px 12px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 12px rgba(45, 106, 79, 0.3);
}
.video-card__case-tag {
  position: absolute;
  bottom: 10px; left: 10px;
  z-index: 3;
  padding: 3px 10px;
  background: rgba(250, 249, 245, 0.95);
  color: var(--color-ink);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-sm);
  font: var(--type-caption);
  font-size: 11px;
  font-weight: 500;
}
.video-card--case .video-card__duration { display: none; }
.video-card--case .video-card__age {
  color: var(--color-primary);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
}
.video-card__meta { padding: var(--space-md); display: flex; flex-direction: column; gap: 6px; }
.video-card__age { font: var(--type-caption); color: var(--color-muted); }
.video-card__title { font: var(--type-title-sm); color: var(--color-ink); font-weight: 500; line-height: 1.35; }
.video-foot { display: flex; justify-content: center; margin-top: var(--space-xxl); }

/* ===== FAQ list (shared between index.html + threads.html) ===== */
.faq-list { display: flex; flex-direction: column; gap: 2px; max-width: 920px; margin: 0 auto; }
.faq-item {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 22px;
  font: var(--type-title-sm);
  color: var(--color-ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  line-height: 1.3;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--color-primary);
  line-height: 1;
  transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
/* Legacy: single <p> directly inside .faq-item (for older FAQ blocks) */
.faq-item > p {
  padding: 0 22px 14px;
  font: var(--type-body-sm);
  color: var(--color-body);
  max-width: 72ch;
  margin: 0;
}

/* New structure: <div class="faq-body"> wrapper with <p>, <ul>, etc. */
.faq-item .faq-body {
  padding: 6px 24px 20px;
  font: var(--type-body-sm);
  color: var(--color-body);
  line-height: 1.75;
}
/* Generous spacing between Thai paragraphs — Thai characters have
   descenders + tone marks above, so they need more breathing room
   than Latin to avoid feeling "ติดกัน" (cramped). */
.faq-item .faq-body > * + * { margin-top: 18px; }
.faq-item .faq-body > p + p { margin-top: 20px; }
.faq-item .faq-body p { margin: 0; }
.faq-item .faq-body strong { color: var(--color-ink); font-weight: 600; }

/* FAQ section foot CTA — link to faq.html knowledge base */
.faq-foot {
  margin-top: var(--space-lg);
  display: flex;
  justify-content: center;
}
.faq-foot__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  color: var(--color-ink);
  font: var(--type-button);
  text-decoration: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.faq-foot__link:hover {
  background: var(--color-ink);
  color: var(--color-canvas);
  border-color: var(--color-ink);
}

.faq-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq-points li {
  position: relative;
  padding-left: 18px;
  line-height: 1.7;
}
.faq-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}
.faq-points--numbered {
  counter-reset: faq-count;
}
.faq-points--numbered li {
  counter-increment: faq-count;
  padding-left: 28px;
}
.faq-points--numbered li::before {
  content: counter(faq-count);
  background: transparent;
  width: auto; height: auto;
  top: 0;
  left: 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.55;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 0;
}

.faq-aside {
  display: block;
  margin-top: 4px;
  padding-left: 10px;
  border-left: 2px solid var(--color-hairline);
  color: var(--color-muted);
  font-size: 0.94em;
}

.faq-note {
  margin-top: 12px !important;
  padding: 10px 14px;
  background: var(--color-surface-card);
  border-left: 3px solid var(--color-primary);
  border-radius: 4px;
  font-size: 0.96em;
}
.faq-note__label {
  display: inline-block;
  font-weight: 600;
  color: var(--color-primary);
  margin-right: 6px;
  letter-spacing: 0.02em;
}

/* ===== Article cards (shared between index.html + articles.html) ===== */
.article-card {
  display: flex; flex-direction: column;
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.article-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
}
.article-card__cover {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--color-surface-card);
}
.article-card__cover image-slot {
  display: block !important;
  width: 100% !important; height: 100% !important;
  aspect-ratio: auto !important;
  --slot-radius: 0;
  --slot-border: 0;
  --slot-bg: var(--color-surface-card);
}
.article-card__num {
  position: absolute;
  top: 14px; left: 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  color: var(--color-on-dark);
  padding: 4px 12px;
  background: rgba(20,20,19,0.55);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
}
.article-card__meta { padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.article-card__tag {
  font: var(--type-caption-uppercase);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.article-card__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  line-height: 1.3;
  margin: 0;
}
.article-card__excerpt { font: var(--type-body-sm); color: var(--color-body); flex: 1; margin: 0; }
.article-card__date {
  font: var(--type-caption);
  color: var(--color-muted);
  padding-top: 10px;
  border-top: 1px solid var(--color-hairline-soft);
  margin-top: 4px;
}

/* ===== Reviews (shared between index.html + threads.html) ===== */
.rev-summary {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}
.rev-summary__score { display: flex; align-items: baseline; gap: var(--space-sm); }
.rev-summary__num {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--color-ink);
  line-height: 1;
}
.rev-summary__stars { color: #f4b400; display: inline-flex; gap: 2px; }
.rev-summary__src {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-left: var(--space-md);
  border-left: 1px solid var(--color-hairline);
}
.rev-summary__icon {
  width: 28px; height: 28px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
}
.rev-summary__src-meta { display: flex; flex-direction: column; gap: 2px; }
.rev-summary__src-name { font: var(--type-title-sm); color: var(--color-ink); font-weight: 500; }
.rev-summary__src-count { font: var(--type-caption); color: var(--color-muted); }

/* ===== Reviews trust cards (custom-designed badges with ratings + counts) ===== */
.rev-trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.rev-trust__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-lg);
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  text-decoration: none;
  color: var(--color-ink);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
  overflow: hidden;
}
.rev-trust__card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--color-hairline);
  transition: background 0.2s var(--ease);
}
.rev-trust__card--google::before {
  background: linear-gradient(90deg, #4285F4 0%, #34A853 33%, #FBBC05 66%, #EA4335 100%);
}
.rev-trust__card--fb::before {
  background: #1877F2;
}
.rev-trust__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(20,20,19,0.08);
  border-color: var(--color-ink);
}

.rev-trust__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.rev-trust__logo {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface-card);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.rev-trust__platform {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rev-trust__platform-name {
  font: var(--type-title-sm);
  color: var(--color-ink);
  font-weight: 500;
}
.rev-trust__verified {
  font: var(--type-caption);
  color: var(--color-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: lowercase;
  letter-spacing: 0.04em;
}

.rev-trust__score {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.rev-trust__num {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--color-ink);
  line-height: 1;
}
.rev-trust__num-pct {
  font-size: 28px;
  color: var(--color-muted);
  font-weight: 500;
}
.rev-trust__stars { display: inline-flex; gap: 2px; align-items: center; }
.rev-trust__recommend {
  font: var(--type-body-md);
  color: var(--color-ink);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rev-trust__count {
  font: var(--type-body-sm);
  color: var(--color-body);
  line-height: 1.4;
}
.rev-trust__count strong {
  color: var(--color-ink);
  font-weight: 600;
}

.rev-trust__cta {
  font: var(--type-button);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-hairline-soft);
}
.rev-trust__card:hover .rev-trust__cta .arrow {
  transform: translateX(4px);
  transition: transform 0.2s var(--ease);
}

@media (max-width: 760px) {
  .rev-trust { grid-template-columns: 1fr; }
  .rev-trust__num { font-size: 40px; }
}

.rev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.rev-card {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.rev-card__src {
  font: var(--type-caption-uppercase);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-primary);
}
.rev-card__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--color-ink);
  line-height: 1.4;
  font-weight: 400;
  flex: 1;
  margin: 0;
}
.rev-card__foot {
  font: var(--type-caption);
  color: var(--color-muted);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-hairline-soft);
}
.rev-foot {
  display: flex; justify-content: center; gap: var(--space-sm);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}
@media (max-width: 880px) { .rev-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rev-grid { grid-template-columns: 1fr; } }

/* ===== Reviews carousel (2-row horizontal scroll with drag + arrows) ===== */
.rev-carousel-wrap { position: relative; }
.rev-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: 1fr 1fr;
  grid-auto-columns: minmax(320px, 340px);
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px 12px;
  margin: 0 -4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.rev-carousel::-webkit-scrollbar { display: none; }
.rev-carousel.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}
.rev-carousel > * { scroll-snap-align: start; }
.rev-carousel .rev-card { min-height: 170px; }

@media (max-width: 880px) {
  .rev-carousel { grid-template-rows: 1fr; }
}
@media (max-width: 560px) {
  .rev-carousel { grid-auto-columns: minmax(260px, 280px); }
}

/* ===== Floating Contact Stack (bottom-right, pops above main button) ===== */
.contact-stack {
  position: fixed;
  right: 24px;
  bottom: 88px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 96;
  transform-origin: bottom right;
  transition: transform 0.28s var(--ease), opacity 0.28s var(--ease);
}
.contact-stack.is-hidden {
  transform: translateY(12px) scale(0.92);
  opacity: 0;
  pointer-events: none;
}
.contact-stack__btn {
  --brand: var(--color-primary);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-canvas);
  color: var(--brand);
  border: 1px solid var(--color-hairline);
  box-shadow: 0 4px 16px rgba(20, 20, 19, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease), border-color 0.2s var(--ease);
  position: relative;
}
.contact-stack__btn:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  transform: scale(1.06);
}

/* Brand colors per channel */
.contact-stack__btn--phone { --brand: var(--color-primary); }
.contact-stack__btn--line { --brand: #06C755; }
.contact-stack__btn--messenger { --brand: #0084FF; }
.contact-stack__btn--facebook { --brand: #1877F2; }
.contact-stack__btn--instagram { --brand: #E1306C; }
.contact-stack__tip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-surface-dark);
  color: var(--color-on-dark);
  font: var(--type-caption);
  padding: 6px 10px;
  border-radius: var(--radius-md);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s var(--ease);
}
.contact-stack__btn:hover .contact-stack__tip { opacity: 1; }
.contact-stack__hide {
  align-self: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-surface-dark);
  color: var(--color-on-dark);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(20, 20, 19, 0.08);
  margin-top: 6px;
  transition: background 0.2s var(--ease);
}
.contact-stack__hide:hover { background: var(--color-ink); }

.contact-stack-show {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 12px 16px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(45, 106, 79, 0.32);
  z-index: 95;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease), background 0.2s var(--ease);
}
.contact-stack-show.is-visible { display: inline-flex; }
.contact-stack-show:hover {
  transform: translateY(-2px);
  background: var(--color-primary-active);
  box-shadow: 0 14px 36px rgba(45, 106, 79, 0.45);
}

.contact-stack-show__icon {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.contact-stack-show__label {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

/* Pulsing halo behind the button — ripples every 5s */
.contact-stack-show__pulse {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--color-primary);
  opacity: 0;
  pointer-events: none;
  animation: contactPulseRing 5s ease-out infinite;
}
@keyframes contactPulseRing {
  0% { transform: scale(0.95); opacity: 0.45; }
  60% { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

@media (max-width: 720px) {
  .contact-stack { right: 12px; gap: 8px; }
  .contact-stack__btn { width: 44px; height: 44px; }
  .contact-stack__btn svg { width: 20px; height: 20px; }
  .contact-stack-show { right: 14px; bottom: 14px; padding: 10px 16px 10px 14px; font-size: 14px; }
}

/* ===== Tweak: density ===== */
body[data-density="compact"] {
  --space-section: 72px;
  --space-xl: 24px;
  --space-xxl: 36px;
}
body[data-density="comfortable"] {
  --space-section: 96px;
}
body[data-density="spacious"] {
  --space-section: 128px;
  --space-xxl: 64px;
}

/* ===== Tweak: weight ===== */
body[data-weight="light"] {
  --type-body-md: 300 16px/1.6 var(--font-sans);
  --type-title-md: 400 18px/1.4 var(--font-sans);
}
body[data-weight="regular"] {
  --type-body-md: 400 16px/1.55 var(--font-sans);
  --type-title-md: 500 18px/1.4 var(--font-sans);
}
body[data-weight="bold"] {
  --type-body-md: 500 16px/1.55 var(--font-sans);
  --type-title-md: 600 18px/1.4 var(--font-sans);
}

/* ================== AWARDS (shared across pages) ================== */
.awards-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.award-card {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: relative;
}
.award-card__year {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--color-primary);
}
.award-card__image {
  aspect-ratio: 3/4;            /* portrait — more breathing room for award photos */
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-card);
}
.award-card__image img,
.award-card__image image-slot {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
.award-card__image image-slot {
  aspect-ratio: auto !important;
  --slot-fit: cover;
  --slot-position: center 30%;  /* focus on top portion (faces/handshake) */
  --slot-bg: var(--color-surface-card);
  --slot-radius: 0;
  --slot-border: 0;
}
.award-card__title {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.5vw, 22px);   /* was 22-26 */
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  margin: 4px 0 0;
  position: relative;
  padding-top: 12px;                     /* was 16px */
}
.award-card__title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
}
.award-card__body {
  font: var(--type-caption);             /* was body-sm */
  color: var(--color-body);
  margin: 0;
  letter-spacing: 0.005em;
  line-height: 1.55;
}

@media (max-width: 880px) { .awards-row { grid-template-columns: 1fr; } }

/* ===== Lightbox (image zoom modal) ===== */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 19, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 10100;   /* ABOVE .ba-modal (9999) so nested zoom works */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s var(--ease);
  cursor: zoom-out;
}
.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
.lightbox__frame {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  cursor: default;
  max-width: 100%;
  max-height: 100%;
  transform: scale(0.95);
  transition: transform 0.32s var(--ease);
}
.lightbox.is-open .lightbox__frame { transform: scale(1); }
.lightbox__img {
  max-width: min(90vw, 900px);
  max-height: 82vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  display: block;
}
.lightbox__img[hidden] { display: none; }
.lightbox__video {
  position: relative;
  width: min(92vw, 1100px);
  aspect-ratio: 16/9;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.lightbox__video[hidden] { display: none; }
.lightbox__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.lightbox--video .lightbox__frame { width: 100%; }
.lightbox__caption {
  color: #faf9f5;
  font: var(--type-title-md);
  font-weight: 500;
  text-align: center;
  max-width: 600px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.lightbox__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
  z-index: 1;
}
.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: rotate(90deg);
}

/* Prev / Next arrows for group navigation */
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease), opacity 0.2s var(--ease);
  z-index: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lightbox__nav[hidden] { display: none; }
.lightbox__nav:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-50%) scale(1.06);
}
.lightbox__nav:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }

/* Counter "2 / 10" at the bottom */
.lightbox__counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font: var(--type-caption);
  font-weight: 500;
  letter-spacing: 0.04em;
  z-index: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lightbox__counter[hidden] { display: none; }

@media (max-width: 720px) {
  .lightbox { padding: 16px; }
  .lightbox__close { top: 12px; right: 12px; }
  .lightbox__nav { width: 44px; height: 44px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
  .lightbox__counter { bottom: 12px; }
}

/* ===== Pagination (shared across articles + videos) ===== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-xxl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-hairline);
  flex-wrap: wrap;
}
.pagination__info {
  font: var(--type-body-sm);
  color: var(--color-body);
}
.pagination__info strong {
  color: var(--color-ink);
  font-weight: 600;
}
.pagination__pages {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pagination__page,
.pagination__nav {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--color-body);
  font: var(--type-button);
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.pagination__page:hover:not(.is-active) {
  background: var(--color-surface-soft);
  color: var(--color-ink);
}
.pagination__page.is-active {
  background: var(--color-primary);
  color: var(--color-on-primary);
  cursor: default;
}
.pagination__nav {
  color: var(--color-ink);
}
.pagination__nav:hover:not([disabled]) {
  background: var(--color-surface-soft);
}
.pagination__nav[disabled] {
  color: var(--color-hairline);
  cursor: not-allowed;
}
.pagination__ellipsis {
  min-width: 24px;
  text-align: center;
  color: var(--color-muted);
  font: var(--type-body-sm);
  letter-spacing: 2px;
  user-select: none;
}

@media (max-width: 560px) {
  .pagination { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pagination__pages { flex-wrap: wrap; }
}