/*
 * components.css
 * Purpose: reusable UI parts (buttons, badges, nav, lightbox) shared across pages.
 */

.is-temporarily-none {
  display:none!important;
}
.is-temporarily-hidden {
  visibility: hidden;
}

/* --- Section fade-in on scroll ---
   .fade-in-section/.is-hidden are only added by JS (main.js), so sections
   stay visible without JS and under prefers-reduced-motion. */
.fade-in-section.is-hidden {
  opacity: 0;
  transition: opacity 0.9s ease;
}

.fade-in-section.is-hidden.is-visible {
  opacity: 1;
}

/* --- Section heading pattern (eyebrow + Thai heading) --- */
.section-eyebrow {
  font-family: var(--font-eng);
  font-weight: 700;
  font-size: var(--font-size-sm);
  color: var(--marimo-blue);
  margin: 0 0 var(--space-2xs);
}

.section-eyebrow--on-dark {
  color: var(--pure-white);
}

.section-eyebrow--lg {
  font-size: var(--font-size-lg);
}

.section-heading {
  font-family: var(--font-thai-sarabun);
  font-weight: 700;
  font-size: var(--font-size-3xl);
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

.section-heading--on-dark {
  color: var(--pure-white);
}

.section-heading--center {
  text-align: center;
}

.text-marimo-blue {
  color: var(--marimo-blue);
}

@media (min-width: 48em) {
  .section-heading {
    font-size: var(--font-size-4xl);
  }
}

@media (min-width: 75em) {
  .section-heading {
    font-size: var(--font-size-5xl);
    line-height: 1.8;
  }
}

/* --- Button --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border: 0;
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-eng);
  font-weight: 700;
  font-size: var(--font-size-lg);
  line-height: 1.8;
  text-decoration: none;
  cursor: pointer;
}

.btn--primary {
  background-color: var(--marimo-blue);
  color: var(--pure-white);
}

.btn__icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

/* --- Badge (small pill label over photos) --- */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--pure-white);
  color: var(--marimo-blue);
  border-radius: var(--radius-xs);
  padding: var(--space-2xs) var(--space-xs);
  font-family: var(--font-eng);
  font-weight: 700;
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

/* --- Arrow CTA (service cards) ---
   SP (Figma 2426:2669): sky-blue pill with arrow + "Learn More" label.
   PC (Figma 2172:968): 68px square with the arrow only. */
.arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  padding: 0.75rem 1.5rem;
  flex-shrink: 0;
  background-color: var(--sky-blue);
  border-radius: var(--radius-xs) 0 var(--radius-xs) 0;
  text-decoration: none;
}

.arrow-btn img {
  width: 1rem;
  height: 1rem;
}

.arrow-btn__label {
  font-family: var(--font-eng);
  font-weight: 700;
  font-size: var(--font-size-md);
  line-height: 1.8;
  color: var(--pure-white);
  white-space: nowrap;
}

@media (min-width: 75em) {
  /* Figma cta-btn arrow-square: 68px tile with the chevron centered
     (22px + 24px + 22px); hovering expands it to the arrow-square--hover
     variant (216px) and fades the "Learn More" label in. */
  .arrow-btn {
    justify-content: flex-start;
    gap: 0.875rem;
    width: 4.25rem;
    height: 4.25rem;
    padding: 0 1.375rem;
    overflow: hidden;
    white-space: nowrap;
    border-radius: var(--radius-sm) 0 var(--radius-sm) 0;
    transition: width 0.3s ease;
  }

  .arrow-btn img {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
  }

  .arrow-btn__label {
    opacity: 0;
    transition: opacity 0.2s ease 0.1s;
  }

  /* The card's stretched link is the interactive element, so the
     expansion reacts to hovering/focusing anywhere on the card. */
  .service-card:hover .arrow-btn,
  .service-card:focus-within .arrow-btn {
    width: 13.5rem;
  }

  .service-card:hover .arrow-btn .arrow-btn__label,
  .service-card:focus-within .arrow-btn .arrow-btn__label {
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .arrow-btn,
    .arrow-btn__label {
      transition: none;
    }
  }
}

/* --- LINE friend CTA (SP contact panel, Figma 2426:2619) --- */
.btn-line {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-md);
  background-color: var(--line-green);
  border-radius: var(--radius-sm);
  font-family: var(--font-eng);
  font-weight: 700;
  font-size: var(--font-size-md);
  line-height: 1.8;
  color: var(--pure-white);
  text-decoration: none;
}

.btn-line img {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

@media (min-width: 48em) {
  .btn-line {
    display: none; /* PC shows the QR code instead */
  }
}

/* --- Site header (nav + logo row) ---
   On index.html this sits inside .hero, on sub-pages inside .page-hero:
   both are photo heroes with a white top gradient, so the nav stays
   transparent and overlays the photo rather than sitting on its own bar.
   The header itself stays in the flow at every breakpoint; only the nav row
   inside it is pinned on SP (see .site-nav), so the logo scrolls away with
   the hero. */
.site-header {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  padding: var(--space-sm) var(--space-xs);
}

/* In-page anchors would otherwise land under the pinned SP nav row. */
html {
  scroll-padding-top: 6.25rem;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  /* SP: the nav row is pinned to the viewport, leaving the logo alone in this
     row - keep the row as tall as the hamburger used to make it so the logo
     stays on the exact same line. */
  min-height: 3.25rem;
  /* Figma 2172:1932 (nav / sub-page): logo + nav share the same 1200px
     container as the top-page nav, so both pages' nav rows line up. */
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.site-header__logo {
  display: inline-flex;
  flex-shrink: 0;
  text-decoration: none;
}

.site-header__logo img {
  display: block;
  width: 6.5rem;
  height: auto;
}

/* SP logo variant (Figma 2497:2287): stacked circle mark + "(THAILAND)";
   the horizontal lockup returns from 48em up. */
.site-header__logo .site-header__logo-pc {
  display: none;
}

.site-header__logo-sp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

.site-header__logo-sp img {
  width: 3.5rem;
  height: auto;
  /* Figma crops the JP subtext off the bottom of the lockup (115.2% crop) */
  clip-path: inset(0 0 13% 0);
  margin-bottom: -13%;
}

.site-header__logo-sp span {
  font-family: var(--font-eng);
  font-weight: 700;
  font-size: 0.34rem;
  letter-spacing: 0.14em;
  line-height: 1.8;
  color: var(--ink);
}

@media (min-width: 48em) {
  .site-header__logo .site-header__logo-pc {
    display: block;
  }

  .site-header__logo-sp {
    display: none;
  }
}

/* --- Site nav --- */
/* SP: the nav row (mail + LINE icons and the hamburger) is pinned to the top
   of the viewport so it stays reachable however far the page is scrolled -
   the logo beside it deliberately stays in the flow and scrolls away with the
   hero. Full-bleed with the hero's own padding, so the controls land on the
   exact spot they held in the flow. The row leaves the flow, which
   .hero__inner compensates for with padding (index.css); on the sub-pages
   .site-header__inner keeps the row height on its own and .page-hero
   positions its panel absolutely, so nothing shifts there. From 48em up the
   row rides along with the hero again (see the 48em blocks below). The row
   itself stays transparent throughout - the icons carry their own
   backgrounds, so no bar is drawn behind them. */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-sm);
  /* The pinned row spans the full width but is mostly empty, so it would
     otherwise swallow taps meant for the header logo sitting underneath it. */
  pointer-events: none;
}

.site-nav > * {
  pointer-events: auto;
}

/* SP quick actions (Figma 2426:3218): mail + LINE icons next to the
   hamburger; the desktop nav list replaces them from 48em up. */
.site-nav__quick {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.site-nav__quick-mail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-round);
  background-color: var(--sky-blue);
}

.site-nav__quick-mail img {
  width: 1.5rem;
  height: 1.5rem;
}

.site-nav__quick-line {
  display: inline-flex;
}

.site-nav__quick-line img {
  width: 2.5rem;
  height: 2.5rem;
}

@media (min-width: 48em) {
  /* From 48em up the nav row rides along with the hero again. */
  .site-nav {
    position: relative;
    inset: auto;
    z-index: auto;
    justify-content: space-between;
    padding: 0;
    pointer-events: auto;
  }

  .site-nav__quick {
    display: none;
  }
}

/* Inside .site-header the nav sits next to a logo, so it doesn't span the
   full bar width - that applies from 48em up, where the row is back in the
   flow (on SP .site-nav above pins it to the viewport). While pinned it
   repeats the header's own side padding, so the controls keep their place. */
.site-header .site-nav {
  flex: 1 1 auto;
  padding: var(--space-sm) var(--space-xs);
}

/* 【メモ】一時非表示用(現在: Contact ボタン/プライバシーポリシー確定待ち)。
   display: none ではなく visibility: hidden なので、要素のスペースは
   そのまま残り、PC ヘッダー nav など周りのレイアウトは一切動かない。
   見えない・クリックできない・Tab フォーカスも当たらない。
   復活させるときは HTML 側(index.html と assets/js/partials.js)の
   該当 li からこのクラスを外すだけ。 */
.site-nav__item.is-temporarily-hidden {
  visibility: hidden;
}

.site-nav__list {
  display: none;
  flex-direction: column;
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* SP drawer (Figma 2510:1794): full-height white panel sliding in from
   the right, with its own logo, close button and colored social icons. */
.site-nav__list.is-open {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: 20.8rem;
  max-width: 88vw;
  margin: 0;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 3rem 4rem 2.5rem;
  overflow-y: auto;
  background-color: var(--pure-white);
  border-radius: 0;
  box-shadow: 0 0 1.25rem rgba(106, 106, 106, 0.15);
  z-index: 100;
}

/* Drawer links: plain semibold rows, no underline (unlike the PC nav). */
.site-nav__list.is-open > li {
  width: 100%;
}

.site-nav__list.is-open .site-nav__link {
  justify-content: flex-start;
  gap: 0.3rem;
  padding-bottom: 0;
  border-bottom: 0;
  font-weight: 600;
  font-size: var(--font-size-md);
}

.site-nav__list.is-open .site-nav__link.dropdown__toggle {
  border-bottom: 0;
}

/* JP stays; the text-style Facebook/Instagram links give way to the
   colored icon row at the bottom of the drawer. */
.site-nav__list.is-open .site-nav__social {
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

.site-nav__list.is-open .site-nav__social .site-nav__link:nth-child(2),
.site-nav__list.is-open .site-nav__social .site-nav__link:nth-child(3) {
  display: none;
}

/* Drawer-only elements (hidden everywhere else) */
.site-nav__menu-close,
.site-nav__menu-logo,
.site-nav__menu-social,
.site-nav__only-sp {
  display: none;
}

.site-nav__list.is-open .site-nav__only-sp {
  display: block;
}

.site-nav__list.is-open .site-nav__menu-close {
  display: block;
  position: absolute;
  top: 1.75rem;
  right: 1.5rem;
  width: auto;
}

.site-nav__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.25rem;
  border: 0;
  border-radius: var(--radius-round);
  background-color: var(--gray-400);
  cursor: pointer;
}

.site-nav__close img {
  width: 2rem;
  height: 2rem;
}

.site-nav__list.is-open .site-nav__menu-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.site-nav__list.is-open .site-nav__menu-logo a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  text-decoration: none;
}

.site-nav__list.is-open .site-nav__menu-logo img {
  width: 5.9rem;
  height: auto;
  /* Figma crops the JP subtext off the bottom of the lockup (115.2% crop) */
  clip-path: inset(0 0 13% 0);
  margin-bottom: -13%;
}

.site-nav__list.is-open .site-nav__menu-logo span {
  font-family: var(--font-eng);
  font-weight: 700;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  line-height: 1.8;
  color: var(--ink);
}

.site-nav__list.is-open .site-nav__menu-social {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: 0.5rem;
}

.site-nav__list.is-open .site-nav__menu-social img {
  display: block;
}

.site-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-eng);
  font-weight: 700;
  font-size: var(--font-size-sm);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__link img {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.site-nav__social {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* --- Dropdown (Our Services) --- */
.dropdown {
  display: flex;
  flex-direction: column;
}

.dropdown__toggle {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Restore the nav underline and typography on top of the button reset
   above (`font: inherit` would otherwise leave the toggle in the body
   font); higher specificity than either single class, so it wins
   regardless of source order. */
.site-nav__link.dropdown__toggle {
  border-bottom: 1px solid currentColor;
  font-family: var(--font-eng);
  font-weight: 700;
  font-size: var(--font-size-sm);
}

.dropdown__menu {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: none;
  flex-direction: column;
  gap: 1rem;
}

.dropdown__menu > li {
  width: 100%;
}

.dropdown.is-open .dropdown__menu {
  display: flex;
}

.dropdown__chevron {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.dropdown.is-open .dropdown__chevron {
  transform: rotate(180deg);
}

/* --- Social icons --- */
.social-icons {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.social-icons img {
  width: 2rem;
  height: 2rem;
}

/* --- Nav hamburger toggle (mobile only) ---
   Figma 2426:3215 "dehaze": 52px rounded square, white 90% fill,
   three 28x2px marimo-blue bars. */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.9);
  /* Same shadow as .cookie-banner, the site's other element floating over
     arbitrary page content: the pinned row draws no bar of its own, so this
     is what keeps the button readable when it passes over a white section. */
  box-shadow: 0 0.25rem 1.5rem rgba(42, 42, 42, 0.16);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 1.75rem;
  height: 2px;
  background-color: var(--marimo-blue);
  border-radius: var(--radius-round);
}

@media (min-width: 48em) {
  .nav-toggle {
    display: none;
  }
}

@media (min-width: 48em) {
  /* The drawer only exists on SP; if .is-open lingers across a resize,
     fall back to the normal inline nav. */
  .site-nav__list.is-open {
    position: static;
    width: auto;
    max-width: none;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: 0;
    box-shadow: none;
    overflow: visible;
  }

  .site-nav__list.is-open > li {
    width: auto;
  }

  .site-nav__list.is-open .site-nav__link {
    border-bottom: 1px solid var(--ink);
    font-weight: 700;
    font-size: var(--font-size-sm);
    justify-content: space-between;
    padding-bottom: 0.375rem;
  }

  .site-nav__list.is-open .site-nav__link.dropdown__toggle {
    border-bottom: 1px solid currentColor;
  }

  .site-nav__list.is-open .site-nav__social {
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
  }

  .site-nav__list.is-open .site-nav__social .site-nav__link:nth-child(2),
  .site-nav__list.is-open .site-nav__social .site-nav__link:nth-child(3) {
    display: flex;
  }

  .site-nav__list.is-open .site-nav__menu-close,
  .site-nav__list.is-open .site-nav__menu-logo,
  .site-nav__list.is-open .site-nav__menu-social,
  .site-nav__list.is-open .site-nav__only-sp {
    display: none;
  }

  /* Same top/side padding as .hero so the top-page and sub-page nav rows
     sit at the same offset (Figma 2172:1866 / 2172:1932). */
  .site-header {
    padding: var(--space-sm) var(--space-sm);
  }

  html {
    scroll-padding-top: 0;
  }

  /* Figma aligns the logo and the nav rows to the top edge (items-start),
     so an open dropdown never re-centers the logo. */
  .site-header__inner {
    align-items: flex-start;
    min-height: 0;
  }

  .site-header .site-nav {
    position: static;
    justify-content: flex-end;
    padding: 0;
  }

  .site-header__logo img {
    width: 8rem;
  }

  .site-nav__list {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
    position: static;
    width: 100%;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  /* Sub-page nav hugs the right edge next to the logo instead of
     spreading over the full row. */
  .site-header .site-nav__list {
    width: auto;
    justify-content: flex-end;
  }

  /* Figma nav rows are exactly 30px tall (text centered above a 6px gap
     and the 1px underline), for every item including the dropdown rows. */
  .site-nav__link {
    height: 1.875rem;
    align-items: center;
  }

  /* PC dropdown (Figma 2172:1899): the menu overlays the page below the
     toggle instead of growing in-flow, so opening it can't push the hero
     content (or anything else) down. Width follows the parent nav item. */
  .site-nav .dropdown {
    position: relative;
  }

  .site-nav .dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
  }
}

@media (min-width: 75em) {
  .site-header {
    padding: var(--space-lg) 7.5rem 0;
  }

  .site-header__logo img {
    width: 9.5rem;
  }

  .site-nav__list {
    gap: var(--space-md);
    max-width: 75rem;
    width: 100%;
    margin: 0 auto;
  }

  .site-header .site-nav__list {
    justify-content: flex-end;
    gap: 2.25rem;
    max-width: none;
    width: auto;
    margin: 0;
  }

  .site-nav__link {
    width: 100%;
  }

  /* Figma nav item widths: 260px on the top page (2172:1866),
     180px on sub-pages next to the logo (2172:1932). */
  .site-nav__list > .site-nav__item {
    width: 16.25rem;
  }

  .site-header .site-nav__list > .site-nav__item {
    width: 11.25rem;
  }

  .site-nav__social > .site-nav__link:nth-child(1) {
    width: 3.5rem;
  }

  .site-nav__social > .site-nav__link:nth-child(2),
  .site-nav__social > .site-nav__link:nth-child(3) {
    width: 6.25rem;
  }
}

/* --- Lightbox (gallery) --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background-color: rgba(42, 42, 42, 0.9);
  /* ピンチをブラウザのページズームにせず、main.js のピンチズーム
     (画像の transform 拡大)に渡す */
  touch-action: none;
}

.lightbox.is-open {
  display: flex;
}

.lightbox__content {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-xs);
  touch-action: none;
  transform-origin: center center;
  will-change: transform;
}

.lightbox__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  /* ピンチ拡大した画像(transform でスタッキングコンテキスト化)より
     常に手前に出す */
  z-index: 1;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: var(--radius-round);
  background-color: #f2f2f2;
  color: var(--ink);
  font-size: var(--font-size-xl);
  line-height: 1;
  cursor: pointer;
}

/* --- Gallery zoom overlay --- */
.gallery__zoom {
  width: 2rem;
  height: 2rem;
}

/* --- Page hero (sub-page fv, nav lives inside via .site-header) ---
   No overflow: hidden here (unlike a typical hero) — the mobile nav's
   dropdown panel is position: absolute inside .site-header, which lives
   in this box, and would get clipped if it grew past the hero's height.
   The photo itself doesn't need clipping: .page-hero__media is inset: 0
   and its img uses object-fit: cover, so it never overflows its own box. */
.page-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 28.125rem;
  background-color: var(--gray-400);
}

.page-hero__media {
  position: absolute;
  inset: 0;
}

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 23%);
}

/* Absolutely positioned (not a flex child of .page-hero): it spans the
   hero's full height, top to bottom, with .site-header layered on top of
   it (not pushing it down) — matching the Figma fv--sub-page component. */
/* SP (Figma 2426:3183): a full-width translucent band pinned to the
   bottom edge; PC turns it into the tall left column again. */
.page-hero__panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-2xs);
  /* Frosted-glass look: keep a faint white wash for contrast and blur
     whatever part of the hero photo sits behind the panel. */
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 2.25rem 1.75rem 2.5rem var(--space-lg);
}

.page-hero__title {
  font-family: var(--font-eng);
  font-weight: 700;
  font-size: var(--font-size-3xl);
  line-height: 1.4;
  color: var(--pure-white);
  text-shadow: 0 0 3.75rem rgba(42, 42, 42, 0.15);
  margin: 0;
}

.page-hero__subtitle {
  font-family: var(--font-thai-noto);
  font-weight: 500;
  font-size: var(--font-size-md);
  letter-spacing: 0.02em;
  color: var(--pure-white);
  margin: 0;
}

@media (min-width: 48em) {
  .page-hero {
    min-height: 34rem;
  }

  .page-hero__panel {
    padding: 2.5rem var(--space-2xl) var(--space-2xl);
  }

  .page-hero__title {
    font-size: var(--font-size-5xl);
  }

  .page-hero__subtitle {
    font-size: var(--font-size-lg);
  }
}

@media (min-width: 75em) {
  .page-hero {
    height: 48.75rem;
    min-height: 0;
  }

  .page-hero__gradient {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 42%);
  }

  .page-hero__panel {
    top: 0;
    right: auto;
    justify-content: center;
    margin-left: 5.75rem;
    gap: 2.5rem;
    max-width: 39rem;
    padding: 2.5rem 4.25rem;
    background-color: rgba(255, 255, 255, 0.3);
    /* Figma 2282:1960: thin light lines along both edges of the glass column. */
    border-left: 1px solid rgba(255, 255, 255, 0.6);
    border-right: 1px solid rgba(255, 255, 255, 0.6);
  }

  .page-hero__title {
    font-size: var(--font-size-6xl);
    line-height: 1.2;
  }

  .page-hero__subtitle {
    max-width: 26.25rem;
    line-height: 1.8;
  }
}

/* --- Breadcrumb --- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg) 0;
}

.breadcrumb a {
  font-family: var(--font-eng);
  font-size: var(--font-size-sm);
  color: var(--ink);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb__current {
  font-family: var(--font-eng);
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

.breadcrumb__separator {
  width: 1rem;
  height: 1rem;
}

@media (min-width: 48em) {
  .breadcrumb {
    padding: var(--space-md) var(--space-md) 0;
  }
}

@media (min-width: 75em) {
  /* page-max-width + 120px padding puts the text at x=120, flush with
     the 1200px content column (Figma: breadcrumb at 50% - 600px). */
  .breadcrumb {
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: var(--space-lg) var(--space-3xl) 0;
  }
}

/* --- Info card (icon + title + description) --- */
.info-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background-color: var(--pure-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: var(--space-md);
}

.info-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-round);
  background-color: var(--soft-blue);
}

.info-card__icon img {
  width: 3.5rem;
  height: 3.5rem;
}

.info-card__title {
  font-family: var(--font-thai-sarabun);
  font-weight: 700;
  font-size: var(--font-size-2xl);
  line-height: 1.5;
  color: var(--marimo-blue);
  margin: 0 0 var(--space-2xs);
}

.info-card__body {
  color: var(--ink);
}

/* --- Zoom trigger button (image lightbox) ---
   SP (Figma 2430:1326): compact gray outline; PC (2172:1115): larger,
   ink-colored. */
.zoom-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid var(--gray-700);
  border-radius: var(--radius-sm);
  background-color: var(--pure-white);
  padding: 0.5rem 1rem 0.5rem 0.75rem;
  font-family: var(--font-eng);
  font-weight: 500;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  white-space: nowrap;
  cursor: zoom-in;
}

.zoom-btn img {
  width: 1.25rem;
  height: 1.25rem;
}

@media (min-width: 75em) {
  .zoom-btn {
    border-color: var(--ink);
    padding: 0.75rem 1.5rem 0.75rem 1rem;
    font-size: var(--font-size-md);
    color: var(--ink);
  }

  .zoom-btn img {
    width: 2rem;
    height: 2rem;
  }
}

/* --- SP-only line break --- */
/* <br class="br-sp"> breaks the line only below the 48em breakpoint;
   on tablet/PC the break disappears and the text flows as one line. */
.br-sp {
  display: inline;
}

.br-pc {
  display: none;
}

@media (min-width: 48em) {
  .br-sp {
    display: none;
  }
  .br-pc {
    display: inline;
  }
}

/* --- Visually hidden (a11y) --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Stat card grid (feature callouts with a big inline number) --- */
.stat-card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  width: 100%;
}

.stat-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-align: center;
  background-color: var(--soft-blue);
  border-radius: var(--radius-sm);
  padding: var(--space-lg) var(--space-md);
}

.stat-card::before {
  content: "";
  position: absolute;
  top: -10rem;
  left: -11rem;
  width: 42rem;
  height: 42rem;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
  transform: rotate(45deg);
  pointer-events: none;
}

.stat-card__eyebrow {
  position: relative;
  font-family: var(--font-thai-noto);
  font-weight: 700;
  font-size: var(--font-size-xl);
  line-height: 1.8;
  color: var(--marimo-blue);
  margin: 0;
}

.stat-card__stat {
  position: relative;
  font-family: var(--font-thai-noto);
  font-weight: 700;
  font-size: var(--font-size-2xl);
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0;
}

.stat-card__stat strong {
  font-size: var(--font-size-4xl);
  letter-spacing: 0.08em;
}

.stat-card__body {
  position: relative;
  text-align: left;
  color: var(--ink);
  margin: 0;
}

@media (min-width: 48em) {
  .stat-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  .stat-card {
    gap: var(--space-xxs);
    padding: var(--space-2xl) var(--space-lg);
  }

  .stat-card__stat {
    font-size: var(--font-size-3xl);
  }

  .stat-card__stat strong {
    font-size: var(--font-size-5xl);
  }
}

/* --- Ribbon badge (rotated corner banner) ---
   Sized down on mobile so it doesn't collide with centered heading text
   next to it; grows to the Figma-matched size from 48em up where cards
   have more side padding to spare. */
.ribbon-badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 7rem;
  height: 7rem;
  overflow: hidden;
  pointer-events: none;
}

.ribbon-badge span {
  position: absolute;
  top: 1.75rem;
  left: -2.25rem;
  display: block;
  width: 10rem;
  transform: rotate(-45deg);
  background: linear-gradient(135deg, rgba(0, 141, 227, 0.85) 10%, rgba(0, 141, 227, 0.2) 90%);
  color: var(--pure-white);
  font-family: "Bebas Neue", var(--font-eng);
  font-size: 1.125rem;
  letter-spacing: 0.05em;
  text-align: center;
  padding: 0.375rem 0;
}

@media (min-width: 48em) {
  .ribbon-badge {
    width: 10rem;
    height: 10rem;
  }

  .ribbon-badge span {
    top: 2.5rem;
    left: -3rem;
    width: 14rem;
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    padding: 0.5rem 0;
  }
}

/* Roughly 2x the default, for cards that span the full content width. */
@media (min-width: 75em) {
  .ribbon-badge--lg {
    width: 15rem;
    height: 15rem;
  }

  .ribbon-badge--lg span {
    top: 3.5rem;
    left: -4.75rem;
    width: 21.5rem;
    font-size: 2rem;
    padding: 1rem 0;
  }
}

/* --- Weather / durability card (badge + "for up to N years" over a photo)
   Shared by iruvcutcoat and tripleguardcoat; only the icon and copy differ. --- */

.weather-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    border-radius: var(--radius-sm);
    padding: var(--space-lg) var(--space-md);
    text-align: center;
    color: var(--pure-white);
}

.weather-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* Pale aqua wash over the photo, per the Figma overlay */
.weather-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(232, 252, 250, 0.3);
  z-index: -1;
}

.weather-card__badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-round);
  padding: var(--space-md);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.weather-card__badge img {
  width: 2.7rem;
  height: 3.2rem;
}

.weather-card__badge p {
  font-family: "Roboto Condensed", var(--font-eng);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.1;
  text-transform: uppercase;
  text-align: left;
  overflow-wrap: normal;
  white-space: nowrap;
  margin: 0;
}

.weather-card__years {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  white-space: nowrap;
  overflow-wrap: normal;
  font-family: "Bebas Neue", var(--font-eng);
  margin: 0;
}

.weather-card__upto {
  font-size: var(--font-size-xl);
  line-height: 1.5;
  border-top: 1px solid var(--pure-white);
  border-bottom: 1px solid var(--pure-white);
  padding: var(--space-xs) 0.5rem;
}

.weather-card__years strong {
  font-size: 4.5rem;
  font-weight: 400;
  line-height: 1;
}

.weather-card__unit {
  font-size: 2rem;
  letter-spacing: 0.02em;
  align-self: flex-end;
}

@media (min-width: 48em) {
  .weather-card {
    flex: 0 0 auto;
    width: 26rem;
    height: 26.25rem;
    gap: var(--space-md);
    border-radius: var(--radius-sm);
    padding: var(--space-lg) 2.75rem;
    color: var(--pure-white);
  }

  .weather-card__badge {
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-lg);
    justify-content: center;
    
  }

  .weather-card__badge img {
    width: 3.75rem;
    height: 4.25rem;
  }


  .weather-card__badge p {
    font-size: var(--font-size-2xl);
  }

  .weather-card__upto {
    font-size: var(--font-size-3xl);
    padding: var(--space-xs) 0.5rem;
  }

  .weather-card__years {
    gap: 0.25rem;
  }

  .weather-card__years strong {
    font-size: 6.5rem;
  }

  .weather-card__unit {
    font-size: 3rem;
  }
}

/* --- Pinch-to-zoom hint (SP chip over a zoomable diagram; hidden from 48em) --- */
.pinch-hint {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background-color: rgba(42, 42, 42, 0.65);
  color: var(--pure-white);
  font-family: var(--font-eng);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}

.pinch-hint img {
  width: 0.875rem;
  height: 0.875rem;
}

@media (min-width: 48em) {
  .pinch-hint {
    display: none;
  }
}

/* --- Stat banner (big callout number in a bar) --- */
.stat-banner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  width: 100%;
}

.stat-banner-wrap__chevron {
  width: 2.5rem;
  height: 2.5rem;
}

.stat-banner {
  width: 100%;
  text-align: center;
  background-color: var(--dark-blue);
  color: var(--pure-white);
  font-family: var(--font-thai-noto);
  font-weight: 600;
  font-size: var(--font-size-lg);
  line-height: 1.6;
  border-radius: var(--radius-xs);
  padding: var(--space-md) var(--space-sm);
  margin: 0;
}

.stat-banner strong {
  font-size: var(--font-size-3xl);
}

.stat-banner--outline {
  background-color: var(--pure-white);
  color: var(--ink);
  border: 2px solid var(--marimo-blue);
}

@media (min-width: 48em) {
  .stat-banner {
    font-size: var(--font-size-2xl);
    padding: var(--space-md) var(--space-2xl);
  }

  .stat-banner strong {
    font-size: var(--font-size-5xl);
  }
}

/* --- Compare panels (before/after photo + stat readout) --- */
.compare-panels {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
}

.compare-panel {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
}

.compare-panel--after {
  background-color: var(--pure-white);
  border: 2px solid var(--marimo-blue);
}

.compare-panel__photo {
  width: 4.5rem;
  height: 4.5rem;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--radius-xs);
  background-color: var(--gray-400);
}

.compare-panel__data {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1 0 0;
  min-width: 0;
}

.compare-panel__label {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-eng);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  border-bottom: 2px solid var(--marimo-blue);
  padding-bottom: 0.375rem;
  margin: 0;
}

/* Grid (not flex rows) so labels right-align and values left-align into
   two clean columns, letting the colons line up like the Figma reference. */
.compare-panel__stats {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-2xs);
  row-gap: 0.25rem;
  margin: 0;
}

.compare-panel__stats > div {
  display: contents;
}

.compare-panel__stats dt,
.compare-panel__stats dd {
  margin: 0;
  font-family: var(--font-eng);
  font-weight: 500;
  font-size: var(--font-size-md);
  color: var(--ink);
}

.compare-panel__stats dt {
  text-align: right;
}

.compare-panel__stats--highlight dt,
.compare-panel__stats--highlight dd {
  font-weight: 700;
}

.compare-panel__stats--highlight dd {
  color: var(--marimo-blue);
}

@media (min-width: 48em) {
  .compare-panel {
    gap: var(--space-lg);
    padding: var(--space-lg);
  }

  .compare-panel__photo {
    width: 9.625rem;
    height: 9.625rem;
  }

  .compare-panel__stats dt,
  .compare-panel__stats dd {
    font-size: var(--font-size-xl);
  }
}

/* --- Benefit grid (bordered image + stat table) --- */
.benefit-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--gray-400);
}

.benefit-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-bottom: 1px solid var(--gray-400);
}

.benefit-item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background-color: var(--gray-400);
}

.benefit-item__title {
  font-family: var(--font-thai-noto);
  font-weight: 700;
  font-size: var(--font-size-xl);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0;
}

.benefit-item__title strong {
  font-size: var(--font-size-3xl);
  letter-spacing: 0.08em;
}

.benefit-item__body {
  color: var(--ink);
  margin: 0;
}

@media (min-width: 48em) {
  .benefit-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .benefit-item {
    gap: var(--space-sm);
    padding: 3.5rem;
  }

  .benefit-item__title {
    font-size: var(--font-size-2xl);
  }

  .benefit-item__title strong {
    font-size: var(--font-size-4xl);
  }

  .benefit-item:nth-child(1),
  .benefit-item:nth-child(2) {
    grid-column: span 3;
    border-right: 1px solid var(--gray-400);
  }

  .benefit-item:nth-child(2) {
    border-right: 0;
  }

  .benefit-item:nth-child(3),
  .benefit-item:nth-child(4),
  .benefit-item:nth-child(5) {
    grid-column: span 2;
    border-right: 1px solid var(--gray-400);
  }

  .benefit-item:nth-child(5) {
    border-right: 0;
  }
}

/* --- Chip list (pill callouts) --- */
.chip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
}

.chip-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.4);
  border: 2px solid var(--pure-white);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  font-family: var(--font-thai-noto);
  font-weight: 700;
  color: var(--marimo-blue);
}

@media (min-width: 48em) {
  .chip-list {
    flex-direction: row;
  }

  .chip-list li {
    flex: 1 0 0;
  }
}

/* --- Carousel (case-study photo viewer) --- */
.carousel {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
}

.carousel__viewport img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-xs);
  background-color: var(--gray-400);
}

.carousel__controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.carousel__arrow {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

.carousel__arrow img {
  width: 100%;
  height: 100%;
}

.carousel__thumbs {
  flex: 1 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2xs);
}

.carousel__thumb {
  aspect-ratio: 105 / 65;
  border: 0;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background-color: var(--gray-100);
  padding: 0;
  cursor: pointer;
  opacity: 0.5;
}

.carousel__thumb.is-active {
  opacity: 1;
  outline: 2px solid var(--marimo-blue);
  outline-offset: 2px;
}

.carousel__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel__thumb:empty,
.carousel__thumb:not(:has(img[src])) {
  background-color: var(--gray-100);
}

/* --- Case study card --- */
.case-study-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  width: 100%;
}

.case-study-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background-color: var(--pure-white);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
}

.case-study-card__head {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}

.case-study-card__brand {
  font-family: var(--font-eng);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 0 var(--space-xs);
}

.case-study-card__logo {
  flex: 1 0 0;
  max-width: 10.375rem;
  height: auto;
}

.case-study-card__caption {
  text-align: center;
  font-size: var(--font-size-md);
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0;
}

@media (min-width: 48em) {
  .case-study-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-study-card {
    padding: var(--space-lg);
  }
}

/* =========================================================
   Contact CTA banner (shared cta-footer partial)
   ========================================================= */
.contact {
  display: flex;
  flex-direction: column;
}

/* SP (Figma 2426:2348): mail panel is a row with a 40px arrow on the
   right; the LINE panel stacks with the green friend CTA. */
.contact__panel {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-xl) var(--space-lg);
  background-color: var(--ice-blue);
  border-bottom: 1px solid var(--gray-400);
}

.contact__panel--line {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-md);
}

.contact__panel-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contact__icon {
  width: 2.5rem;
  height: 2.5rem;
}

.contact__heading {
  font-family: var(--font-thai-sarabun);
  font-weight: 700;
  font-size: var(--font-size-2xl);
  line-height: 1.5;
}

.contact__arrow {
  align-self: center;
  display: inline-flex;
  flex-shrink: 0;
}

.contact__arrow img {
  width: 2.5rem;
  height: 2.5rem;
}

.contact__qr {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.contact__qr > img {
  padding: var(--space-xs);
  background-color: var(--pure-white);
  border: 1px solid var(--gray-600);
  border-radius: var(--radius-xs);
}

.contact__qr p {
  font-family: var(--font-eng);
  font-weight: 600;
}

@media (min-width: 48em) {
  .contact {
    flex-direction: row;
  }

  .contact__panel {
    flex: 1 0 0;
    padding: var(--space-2xl) var(--space-xl);
    border-bottom: 0;
    border-right: 1px solid var(--gray-400);
  }

  .contact__icon {
    width: 3rem;
    height: 3rem;
  }

  .contact__heading {
    font-size: var(--font-size-4xl);
  }

  .contact__arrow img {
    width: 3.5rem;
    height: 3.5rem;
  }

  .contact__qr {
    display: flex;
  }

  .contact__panel--line {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    border-right: 0;
  }

  .contact__panel-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
}

@media (min-width: 75em) {
  .contact__panel {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 6.125rem var(--space-3xl);
  }

  .contact__panel-text {
    flex: 1 0 0;
    min-width: 0;
  }

  .contact__arrow {
    align-self: center;
  }

  .contact__arrow img {
    width: 4.5rem;
    height: 4.5rem;
  }
}

/* =========================================================
   Site footer (shared cta-footer partial)
   ========================================================= */
.site-footer {
  position: relative;
  overflow: hidden;
  background-color: var(--dark-blue);
  padding: 7.5rem var(--space-lg) var(--space-xl);
}

.site-footer__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Figma 2172:2006: photo at full opacity under a rgba(25,84,143,0.88) scrim. */
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(25, 84, 143, 0.88);
}

.site-footer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4.5rem;
  color: var(--pure-white);
}

.site-footer__top {
  display: flex;
  flex-direction: column;
  gap: 4.5rem;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.site-footer__brand > img {
  width: 17.375rem;
  height: auto;
}

/* Social icons sit under the address on SP (Figma 2426:2378) and in the
   bottom bar on wider screens. */
.site-footer__bottom .social-icons {
  display: none;
}

.site-footer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* English labels: undo the page-level Thai line-breaking rules
   (word-break: break-all / overflow-wrap: anywhere) so nav items
   never break mid-word when the row gets tight. */
.site-footer__nav {
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
}

.site-footer__nav a,
.site-footer__nav-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-eng);
  font-weight: 700;
  font-size: var(--font-size-md);
  color: var(--pure-white);
  text-decoration: none;
}

/* "Our Services" is a static heading with its sub-pages always listed
   below it, indented one character to read as children. */
.site-footer__nav .site-footer__subnav {
  flex-direction: column;
  margin-top: var(--space-sm);
  gap: var(--space-sm);
}

.site-footer__nav .site-footer__subnav a {
  font-weight: 400;
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
}

.site-footer__bnrs {
  display: grid;
  grid-template-columns: repeat(1fr, minmax(0, auto));
  gap: var(--space-xs) var(--space-xs);
}

.site-footer__bottom p {
  font-size: var(--font-size-sm);
}

@media (min-width: 48em) {
  .site-footer {
    padding: var(--space-3xl) var(--space-md);
  }

  .site-footer__inner,
  .site-footer__top {
    gap: var(--space-lg);
  }

  .site-footer__brand > img {
    width: 12rem;
  }

  .site-footer__bottom .social-icons {
    display: flex;
  }

  .site-footer__nav a,
  .site-footer__nav-title {
    font-size: var(--font-size-sm);
  }

  .site-footer__top {
    flex-direction: row;
    justify-content: space-between;
  }

  .site-footer__brand {
    max-width: 20rem;
  }

  .site-footer__nav ul {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-xl);
  }

  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .site-footer__bnrs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-xs);
  }
  .site-footer__bnrs a img {
    max-inline-size: 10rem;
  }
}

@media (min-width: 75em) {
  .site-footer {
    padding: var(--space-3xl) 0;
  }

  .site-footer__inner {
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: 0 var(--space-3xl);
  }
}

/* ============================================================
   Cookie consent banner (PDPA) — cookie-consent.js が挿入する
   ============================================================ */
.cookie-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1000;
  padding: var(--space-xs);
  transform: translateY(100%);
  opacity: 0;
  transition:
    transform 0.4s ease,
    opacity 0.4s ease;
}

.cookie-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.cookie-banner__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-sm);
  background: var(--pure-white);
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-md);
  box-shadow: 0 0.25rem 1.5rem rgba(42, 42, 42, 0.16);
}

.cookie-banner__text {
  font-family: var(--font-thai-noto);
  font-size: var(--font-size-sm);
  line-height: 1.7;
  color: var(--ink);
}

.cookie-banner__link {
  color: var(--marimo-blue);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.cookie-banner__actions {
  display: flex;
  gap: var(--space-2xs);
  flex-wrap: wrap;
}

.cookie-banner__btn {
  flex: 1 1 auto;
  padding: 0.625rem var(--space-sm);
  font-family: var(--font-thai-noto);
  font-size: var(--font-size-sm);
  font-weight: 700;
  border-radius: var(--radius-round);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.cookie-banner__btn:hover {
  opacity: 0.8;
}

.cookie-banner__btn--accept {
  background: var(--marimo-blue);
  color: var(--pure-white);
  border: 1px solid var(--marimo-blue);
}

.cookie-banner__btn--decline {
  background: var(--pure-white);
  color: var(--ink);
  border: 1px solid var(--gray-500);
}

@media (min-width: 48em) {
  .cookie-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .cookie-banner__actions {
    flex-wrap: nowrap;
    flex-shrink: 0;
  }

  .cookie-banner__btn {
    flex: 0 0 auto;
  }
}