:root {
  --ink: #19382f;
  --ink-deep: #0d2b24;
  --ink-soft: #486057;
  --paper: #f6f1e7;
  --paper-light: #fdfbf6;
  --mist: #ece5d7;
  --gold: #bd8a32;
  --gold-pale: #e8d4a7;
  --wine: #781f31;
  --line: rgba(25, 56, 47, 0.18);
  --serif: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif;
  --sans: "DM Sans", "Noto Sans Thai", Arial, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-weight: 400; }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { border: 0; }
img { display: block; width: 100%; }
::selection { background: var(--gold-pale); color: var(--ink-deep); }

.site-shell { overflow: hidden; }
.site-header { position: fixed; z-index: 40; top: 0; left: 0; right: 0; height: 88px; display: flex; align-items: center; justify-content: space-between; padding: 0 5.2vw; color: var(--ink); transition: background 220ms var(--ease-out), box-shadow 220ms var(--ease-out), height 220ms var(--ease-out); }
.site-header--scrolled { height: 72px; background: rgba(253, 251, 246, 0.93); box-shadow: 0 1px 0 rgba(25, 56, 47, 0.09); backdrop-filter: blur(14px); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 225px; }
.brand__crest { width: 45px; height: 45px; object-fit: contain; }
.brand__copy { color: var(--ink); display: flex; flex-direction: column; line-height: 0.92; letter-spacing: 0.025em; }
.brand__copy strong { font-family: var(--serif); font-size: 18px; font-weight: 700; }
.brand__copy span { margin-top: 4px; color: var(--wine); text-transform: uppercase; font-size: 8px; letter-spacing: 0.22em; font-weight: 700; }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.5vw, 42px); }
.site-nav__link { position: relative; padding: 9px 0; color: var(--ink); font-size: 11px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; }
.site-nav__link::after { content: ""; position: absolute; height: 1px; bottom: 3px; left: 0; right: 0; background: var(--wine); transform: scaleX(0); transform-origin: right; transition: transform 190ms var(--ease-out); }
.site-nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.header-actions { display: flex; align-items: center; gap: 18px; min-width: 225px; justify-content: flex-end; }
.language-toggle, .mobile-language { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); background: transparent; padding: 8px 0; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; transition: color 160ms var(--ease-out); }
.language-toggle:hover { color: var(--wine); }
.menu-toggle { display: none; color: var(--ink); background: transparent; padding: 8px; }
.mobile-menu { display: none; }

.hero-section { position: relative; min-height: 790px; height: max(100svh, 760px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(410px, 47%); background: var(--paper); isolation: isolate; }
.hero-section__noise { position: absolute; z-index: -1; inset: 0; opacity: 0.23; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); pointer-events: none; }
.hero-copy { position: relative; z-index: 2; align-self: center; padding: 12vh 3vw 10vh 11.3vw; max-width: 760px; }
.hero-kicker { display: flex; align-items: center; gap: 10px; color: var(--wine); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.hero-kicker span { width: 26px; height: 1px; background: var(--wine); }
.hero-eyebrow { margin: 22px 0 0; color: var(--ink-soft); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.hero-title { margin: 22px 0 22px; color: var(--ink-deep); font-family: var(--serif); font-weight: 600; font-size: clamp(54px, 6.8vw, 105px); letter-spacing: -0.056em; line-height: 1.4em; }
.hero-title span { display: block; }
.hero-intro { max-width: 440px; color: var(--ink-soft); font-size: 15px; line-height: 1.8; }
.hero-cta { display: inline-flex; align-items: center; gap: 26px; margin-top: 34px; color: var(--ink); font-size: 11px; letter-spacing: 0.09em; font-weight: 700; text-transform: uppercase; }
.hero-cta span { position: relative; }
.hero-cta span::after { content: ""; position: absolute; bottom: -7px; left: 0; width: 100%; height: 1px; background: var(--gold); transform-origin: left; transition: transform 180ms var(--ease-out); }
.hero-cta:hover span::after { transform: scaleX(0.55); }
.hero-cta svg { color: var(--wine); transition: transform 180ms var(--ease-out); }
.hero-cta:hover svg { transform: translateY(4px); }
.hero-image-wrap { position: relative; min-height: 100%; padding: 11.5vh 5.7vw 8vh 2.5vw; }
.hero-image { position: relative; z-index: 2; height: min(74vh, 680px); margin: 0; overflow: hidden; box-shadow: 22px 26px 0 -1px var(--gold-pale); }
.hero-image::after { content: ""; pointer-events: none; position: absolute; inset: 0; background: linear-gradient(165deg, rgba(38, 26, 7, 0.05), transparent 42%, rgba(9, 39, 31, 0.18)); }
.hero-image img { height: 100%; object-fit: cover; object-position: 58% center; }
.hero-image figcaption, .image-frame figcaption { position: absolute; z-index: 1; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; color: #fff; font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; background: linear-gradient(0deg, rgba(5, 28, 20, 0.72), transparent); }
.hero-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(189, 138, 50, 0.58); }
.hero-orbit--one { width: 286px; height: 286px; top: 13%; right: 1.7vw; }
.hero-orbit--two { width: 412px; height: 412px; bottom: -3%; right: -4vw; border-color: rgba(120, 31, 49, 0.16); }
.hero-index { position: absolute; z-index: 4; right: 1.6vw; top: 49%; margin: 0; color: var(--wine); font-family: var(--serif); font-size: 18px; letter-spacing: 0.05em; writing-mode: vertical-rl; transform: rotate(180deg); }
.hero-index i { color: var(--gold); font-style: normal; }
.scroll-hint { position: absolute; z-index: 3; bottom: 31px; left: 5.2vw; display: flex; align-items: center; gap: 9px; color: var(--ink-soft); font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; }
.scroll-hint svg { animation: gentle-bob 1.8s var(--ease-out) infinite; }
@keyframes gentle-bob { 50% { transform: translateY(4px); } }

.story-block { max-width: 1240px; margin: 0 auto; padding: 128px 5.2vw; }
.story-block__meta { display: flex; align-items: center; gap: 20px; margin-bottom: 42px; }
.story-label { margin: 0; color: var(--wine); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; line-height: 1.3; text-transform: uppercase; }
.meta-line { display: block; width: 65px; height: 1px; background: var(--gold); }
.section-title { max-width: 570px; margin: 0; color: var(--ink-deep); font-family: var(--serif); font-size: clamp(43px, 5.2vw, 72px); font-weight: 600; letter-spacing: -0.047em; line-height: 1.1; }
.story-body { margin: 27px 0 0; color: var(--ink-soft); font-size: 15px; line-height: 1.95; }
.story-body--large { max-width: 535px; font-size: 16px; }
.image-frame { position: relative; overflow: hidden; margin: 0; }
.image-frame img { height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.image-frame:hover img { transform: scale(1.035); }
.intro-grid { display: grid; grid-template-columns: 0.95fr 1.1fr; align-items: end; gap: clamp(44px, 8vw, 138px); }
.intro-copy { padding-bottom: 4px; }
.image-frame--wide { height: 390px; box-shadow: 18px 19px 0 var(--gold-pale); }

.story-block--approach { max-width: none; padding: 0; background: var(--ink-deep); }
.approach-grid { width: min(1440px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: stretch; }
.image-frame--play { min-height: 550px; }
.approach-copy { align-self: center; padding: 78px clamp(42px, 8vw, 132px) 78px clamp(42px, 7vw, 112px); }
.section-title--light { color: var(--paper-light); margin-top: 24px; }
.story-body--light { color: rgba(253, 251, 246, 0.72); max-width: 515px; }
.approach-rule { display: flex; align-items: center; gap: 10px; margin-top: 35px; padding-top: 19px; border-top: 1px solid rgba(253, 251, 246, 0.2); color: var(--gold-pale); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.approach-rule svg { color: var(--gold); }

.story-block--play { padding-top: 138px; padding-bottom: 138px; }
.play-grid { display: grid; grid-template-columns: 0.92fr 0.85fr; justify-content: space-between; align-items: center; gap: clamp(52px, 11vw, 170px); }
.play-copy { max-width: 545px; }
.play-copy .section-title, .nurture-copy .section-title { margin-top: 24px; }
.image-frame--tall { width: min(100%, 385px); justify-self: end; height: 514px; box-shadow: -18px 20px 0 var(--gold-pale); }

.areas-section { position: relative; padding: 118px max(5.2vw, calc((100vw - 1240px) / 2 + 5.2vw)); background: var(--mist); }
.areas-section::before { content: ""; position: absolute; width: 435px; height: 435px; right: -190px; top: -145px; border: 1px solid rgba(120, 31, 49, 0.15); border-radius: 50%; }
.areas-section__top { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 60px; align-items: end; }
.areas-section__top .section-title { margin-top: 24px; }
.areas-intro { max-width: 335px; margin: 0 3.8vw 3px 0; color: var(--ink-soft); font-size: 14px; line-height: 1.8; }
.areas-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 0.87fr 1.13fr; gap: clamp(48px, 8vw, 124px); margin-top: 60px; align-items: start; }
.image-frame--areas { height: 500px; box-shadow: 18px 18px 0 rgba(120, 31, 49, 0.2); }
.areas-list { padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--line); }
.areas-list li { display: grid; grid-template-columns: 42px 1fr 20px; gap: 12px; align-items: center; min-height: 64px; border-bottom: 1px solid var(--line); color: var(--ink); font-family: var(--serif); font-size: clamp(19px, 2vw, 26px); font-weight: 600; line-height: 1.05; transition: padding 180ms var(--ease-out), color 180ms var(--ease-out); }
.areas-list li:hover { padding-left: 9px; color: var(--wine); }
.areas-list__index { color: var(--wine); font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; }
.areas-list svg { color: var(--gold); opacity: 0; transform: translate(-6px, 5px); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }
.areas-list li:hover svg { opacity: 1; transform: translate(0, 0); }

.story-block--nurture { padding-top: 142px; padding-bottom: 142px; }
.nurture-grid { display: grid; grid-template-columns: 1.04fr 0.8fr; gap: clamp(52px, 10vw, 155px); align-items: center; }
.image-frame--nurture { height: 447px; box-shadow: 18px 18px 0 var(--gold-pale); }
.nurture-copy { max-width: 480px; }

.future-section { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper-light); min-height: 640px; }
.future-section__visual { position: relative; min-height: 560px; }
.future-section__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 43, 36, 0.05), transparent 50%); }
.future-section__visual img { height: 100%; object-fit: cover; }
.future-section__copy { align-self: center; padding: 75px clamp(46px, 8vw, 124px); }
.section-title--future { margin-top: 24px; }
.future-section__copy .story-body { max-width: 490px; }
.future-mark { margin: 40px 0 0; color: var(--wine); font-family: var(--serif); font-size: 18px; font-weight: 700; letter-spacing: 0.16em; }
.future-mark span { color: var(--gold); }

.quote-section { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 495px; padding: 85px 9vw; color: var(--paper-light); text-align: center; background: var(--wine); }
.quote-section::before { content: ""; position: absolute; inset: 0; opacity: 0.12; background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f7f0e3' fill-opacity='.6'%3E%3Cpath d='M0 40c12 0 12-20 24-20s12 20 24 20 12-20 24-20 12 20 24 20v1c-12 0-12 20-24 20S60 41 48 41 36 61 24 61 12 41 0 41z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.quote-mark { position: relative; z-index: 1; margin-bottom: -30px; color: var(--gold-pale); font-family: var(--serif); font-size: 120px; font-weight: 600; line-height: 1; }
.quote-section blockquote { position: relative; z-index: 1; max-width: 810px; margin: 0; font-family: var(--serif); font-size: clamp(34px, 4.8vw, 65px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.2; }
.quote-section p { position: relative; z-index: 1; max-width: 610px; margin: 26px 0 0; color: rgba(253, 251, 246, 0.76); font-size: 13px; line-height: 1.8; }
.quote-section__leaf { position: absolute; width: 350px; height: 350px; border: 1px solid rgba(232, 212, 167, 0.25); border-radius: 60% 0 60% 0; transform: rotate(35deg); }
.quote-section__leaf--one { top: -225px; left: -130px; }
.quote-section__leaf--two { bottom: -240px; right: -105px; transform: rotate(215deg); }

.site-footer { display: flex; justify-content: space-between; align-items: center; min-height: 112px; padding: 18px 5.2vw; background: var(--ink-deep); color: var(--paper-light); }
.footer-brand { display: flex; align-items: center; gap: 10px; color: rgba(253, 251, 246, 0.76); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.footer-brand img { width: 41px; height: 41px; object-fit: contain; filter: saturate(0.8) brightness(1.05); }
.back-to-top { display: flex; align-items: center; gap: 12px; color: var(--gold-pale); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.back-to-top svg { transform: rotate(180deg); transition: transform 180ms var(--ease-out); }
.back-to-top:hover svg { transform: rotate(180deg) translateY(4px); }

@media (max-width: 900px) {
  .site-header { height: 75px; padding: 0 5vw; }
  .site-header--scrolled { height: 67px; }
  .site-nav, .language-toggle { display: none; }
  .brand, .header-actions { min-width: unset; }
  .brand__crest { width: 39px; height: 39px; }
  .brand__copy strong { font-size: 16px; }
  .menu-toggle { display: inline-flex; }
  .mobile-menu { position: fixed; z-index: 35; top: 0; right: 0; bottom: 0; left: 0; display: block; pointer-events: none; background: rgba(11, 35, 29, 0); transition: background 210ms var(--ease-out); }
  .mobile-menu--open { pointer-events: auto; background: rgba(11, 35, 29, 0.36); }
  .mobile-menu__inner { margin-left: auto; width: min(86vw, 390px); height: 100%; padding: 105px 7.5vw 42px; background: var(--paper-light); box-shadow: -12px 0 30px rgba(13, 43, 36, 0.16); transform: translateX(102%); transition: transform 240ms var(--ease-out); }
  .mobile-menu--open .mobile-menu__inner { transform: translateX(0); }
  .mobile-menu__link { display: grid; grid-template-columns: 35px 1fr 20px; align-items: center; padding: 19px 0; color: var(--ink); border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 27px; font-weight: 600; }
  .mobile-menu__link span { color: var(--wine); font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; }
  .mobile-menu__link svg { color: var(--gold); }
  .mobile-language { margin-top: 28px; }
  .hero-section { grid-template-columns: 1fr; min-height: auto; height: auto; padding-top: 75px; }
  .hero-copy { padding: 76px 9vw 62px; }
  .hero-title { font-size: clamp(54px, 12vw, 88px); }
  .hero-image-wrap { min-height: 0; padding: 0 9vw 70px 16vw; }
  .hero-image { height: min(76vw, 530px); }
  .hero-orbit--one { top: -23px; right: 2vw; width: 220px; height: 220px; }
  .hero-orbit--two { width: 285px; height: 285px; bottom: 22px; right: -90px; }
  .hero-index { top: auto; bottom: 80px; right: 5.4vw; }
  .scroll-hint { display: none; }
  .story-block { padding: 94px 8vw; }
  .intro-grid, .play-grid, .nurture-grid { grid-template-columns: 1fr; gap: 48px; }
  .image-frame--wide { height: min(59vw, 400px); }
  .image-frame--tall { width: min(78%, 390px); justify-self: start; height: 480px; margin-left: 10vw; }
  .approach-grid { grid-template-columns: 1fr; }
  .image-frame--play { min-height: 430px; }
  .approach-copy { padding: 72px 8vw; }
  .areas-section { padding: 92px 8vw; }
  .areas-section__top { flex-direction: column; gap: 26px; align-items: start; }
  .areas-intro { margin: 0; }
  .areas-layout { grid-template-columns: 1fr; gap: 46px; }
  .image-frame--areas { height: min(92vw, 560px); }
  .nurture-grid .image-frame { order: 2; }
  .future-section { grid-template-columns: 1fr; }
  .future-section__visual { min-height: 430px; }
  .future-section__copy { padding: 72px 8vw; }
}

@media (max-width: 560px) {
  .site-header { padding: 0 6vw; }
  .hero-copy { padding: 60px 7vw 48px; }
  .hero-kicker { font-size: 8px; }
  .hero-eyebrow { font-size: 9px; }
  .hero-title { font-size: 55px; letter-spacing: -0.064em; }
  html[lang="th"] .hero-title { font-size: 47px; line-height: 1.02; letter-spacing: -0.025em; }
  .hero-intro { font-size: 14px; line-height: 1.75; }
  .hero-image-wrap { padding: 0 7vw 54px 15vw; }
  .hero-image { height: 420px; box-shadow: 13px 16px 0 -1px var(--gold-pale); }
  .hero-index { bottom: 62px; right: 2.8vw; font-size: 15px; }
  .story-block { padding: 75px 7vw; }
  .story-block__meta { margin-bottom: 30px; }
  .section-title { font-size: 45px; }
  html[lang="th"] .section-title { font-size: 37px; line-height: 1.06; letter-spacing: -0.02em; }
  .story-body, .story-body--large { font-size: 14px; line-height: 1.85; }
  .image-frame--wide { height: 280px; box-shadow: 12px 13px 0 var(--gold-pale); }
  .image-frame--play { min-height: 330px; }
  .approach-copy { padding: 59px 7vw; }
  .approach-rule { align-items: flex-start; font-size: 8px; line-height: 1.55; }
  .story-block--play { padding-top: 80px; padding-bottom: 80px; }
  .image-frame--tall { width: 83%; height: 420px; margin-left: 7vw; box-shadow: -12px 13px 0 var(--gold-pale); }
  .areas-section { padding: 77px 7vw; }
  .areas-layout { margin-top: 43px; }
  .image-frame--areas { height: 390px; box-shadow: 12px 12px 0 rgba(120, 31, 49, 0.2); }
  .areas-list li { grid-template-columns: 32px 1fr 15px; font-size: 19px; min-height: 59px; }
  html[lang="th"] .areas-list li { font-size: 17px; line-height: 1.25; }
  .story-block--nurture { padding-top: 80px; padding-bottom: 80px; }
  .image-frame--nurture { height: 290px; box-shadow: 12px 12px 0 var(--gold-pale); }
  .future-section__visual { min-height: 330px; }
  .future-section__copy { padding: 63px 7vw; }
  .quote-section { min-height: 410px; padding: 66px 8vw; }
  .quote-mark { font-size: 96px; }
  .quote-section blockquote { font-size: 41px; }
  html[lang="th"] .quote-section blockquote { font-size: 34px; line-height: 1.18; }
  .site-footer { gap: 22px; align-items: center; min-height: 99px; padding: 17px 7vw; }
  .footer-brand span { display: none; }
  .back-to-top span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}