@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Inter:wght@300;400;500;600&family=Kanit:wght@300;400;500;600;700&display=swap');

/* ── Locked horizontal gutter ──────────────────────────────
   One value, identical on every device and every section.
   Change this single variable to re-space the whole site.   */
:root { --gx: 40px; }
/* Tighter, still-symmetric gutter on phones so the nav/logo don't crowd. */
@media (max-width: 640px) { :root { --gx: 20px; } }

html, body { margin: 0; padding: 0; background: #0C2E29; overflow-x: hidden; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: 'Inter', 'Kanit', sans-serif; }

/* Kanit is appended to every family so all Thai glyphs (absent in the
   Latin display fonts) always fall back to Kanit — no looped system font. */
.font-serif { font-family: 'Cormorant Garamond', 'Kanit', serif; font-weight: 300; }
.font-sans  { font-family: 'Inter', 'Kanit', sans-serif; }
.font-thai  { font-family: 'Kanit', sans-serif; font-weight: 300; }
.eyebrow    { font-family: 'Inter', 'Kanit', sans-serif; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; font-size: 10px; }

/* Apply to every section's outer wrapper for a perfectly aligned column.
   Banner / full-bleed media intentionally omits this class.            */
.gx { padding-left: var(--gx); padding-right: var(--gx); }

/* Hide the scrollbar on horizontally-sliding review/testimonial tracks
   while keeping them scrollable via drag, wheel, or the arrow buttons. */
.snap-x::-webkit-scrollbar { display: none; }

/* ── Hero background — responsive focal point ───────────────
   The source photo has a bright/near-white ground on the left where the
   copy sits, so a dark gradient overlay is permanent (not mobile-only)
   to keep the light-colored heading and eyebrow text readable.          */
.hero {
  background-image: url('/hero.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center right;           /* desktop / default */
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(12,46,41,.35) 0%, rgba(12,46,41,.10) 38%, rgba(12,46,41,.45) 100%),
    linear-gradient(90deg, rgba(12,46,41,.90) 0%, rgba(12,46,41,.45) 35%, rgba(12,46,41,0) 50%, rgba(12,46,41,0) 100%);
}
@media (max-width: 640px) {
  .hero { background-position: 72% 22%; }       /* keep his face/coat in frame on mobile */
  .hero::before {
    background:
      linear-gradient(180deg, rgba(12,46,41,.55) 0%, rgba(12,46,41,.20) 38%, rgba(12,46,41,.55) 100%),
      linear-gradient(90deg, rgba(12,46,41,.92) 0%, rgba(12,46,41,.46) 35%, rgba(12,46,41,0) 50%, rgba(12,46,41,0) 100%);
  }
}