/* Soulwaves 2026 — Modern Calm visual system. Public-facing styles only. */
:root {
  --sw-cream:#faf4ee; --sw-paper:#fffaf6; --sw-clay:#d5a18e;
  --sw-rose:#b9796a; --sw-rose-deep:#8f5147; --sw-sage:#a7b39e;
  --sw-teal:#8fa7a3; --sw-earth:#382c2a; --sw-line:#dfcfc3;
  --cream:var(--sw-cream); --white:var(--sw-paper); --ink:var(--sw-earth);
  --clay:var(--sw-rose); --clay-dark:var(--sw-rose-deep); --line:var(--sw-line);
}
html {scroll-padding-top:86px}
body {min-width:0; overflow-x:hidden; background:var(--sw-cream); color:var(--sw-earth); font-family:'Kanit',sans-serif; font-weight:400; line-height:1.78}
body :is(button,input,textarea,select) {font-family:'Kanit',sans-serif}
body :is(h1,h2,h3,h4,.brand-name,.btn,.eyebrow,.nav a) {font-family:'Kanit',sans-serif}
body :is(h1,h2,h3) {font-weight:500; letter-spacing:0; text-wrap:balance}
body :is(p,li) {text-wrap:pretty}
body a {text-underline-offset:3px}
body :focus-visible {outline:3px solid var(--sw-teal);outline-offset:3px}

/* Navigation is intentionally compact on desktop and moves to a drawer before it crowds. */
body>.topbar, .topbar {height:82px; min-height:82px; padding:0 clamp(24px,4vw,72px); gap:clamp(12px,2.2vw,36px); background:rgba(250,244,238,.96); border-bottom:1px solid var(--sw-line); box-shadow:0 7px 25px #382c2a0c; backdrop-filter:blur(18px); z-index:30}
.topbar .brand {flex:0 0 auto; min-width:0; gap:9px; text-decoration:none}
.topbar .brand-mark {width:39px;height:47px; flex:0 0 39px}
.topbar .brand-name {font-size:clamp(23px,2.15vw,31px);font-weight:500;letter-spacing:-.02em;color:var(--sw-earth)}
.topbar .nav {display:flex; flex:1 1 auto; min-width:0; align-items:center; justify-content:flex-end; gap:clamp(11px,1.22vw,21px)}
.topbar .nav a:not(.btn) {position:relative; flex:0 0 auto; padding:11px 0; color:var(--sw-earth); font-size:13px; font-weight:400; line-height:1.25; white-space:nowrap; text-decoration:none}
.topbar .nav a:not(.btn)::after {content:"";position:absolute;inset:auto 0 5px;height:2px;background:var(--sw-rose);transform:scaleX(0);transform-origin:left;transition:transform .18s ease-out}
.topbar .nav a:not(.btn):hover::after,.topbar .nav a:not(.btn):focus-visible::after {transform:scaleX(1)}
.topbar .nav a.btn {min-height:42px;padding:11px 17px;border-radius:999px;white-space:nowrap;font-size:12px;font-weight:500;box-shadow:none}
.topbar .nav a#memberOpen {background:transparent;border:1px solid #aa8f81;color:var(--sw-earth)}
.topbar .nav a[href="#booking"] {background:var(--sw-rose-deep);border:1px solid var(--sw-rose-deep);color:#fff}
.topbar .nav a#memberOpen:hover {background:#e9ddd3}
.topbar .nav a[href="#booking"]:hover {background:var(--sw-earth);border-color:var(--sw-earth)}
.topbar #languageToggle {display:none!important}
.site-language {display:flex; flex:0 0 auto; align-items:center; gap:2px; padding:3px; border:1px solid #d6c5b9; border-radius:999px; background:#fffaf6; box-shadow:0 3px 12px #382c2a0a}
.site-language button {display:inline-flex; align-items:center; justify-content:center; gap:5px; min-width:52px; min-height:44px; padding:4px 8px; border:0; border-radius:999px; background:transparent; color:var(--sw-earth); font-size:11px; font-weight:500; cursor:pointer; transition:background-color .16s ease-out,color .16s ease-out,transform .16s ease-out}
.site-language button:hover {background:#e8dad0;transform:translateY(-1px)}
.site-language button[aria-pressed="true"] {background:var(--sw-earth);color:#fff}
.site-language .flag {display:block;line-height:1}
.site-language .flag svg {display:block;width:20px;height:14px;border-radius:2px;box-shadow:0 0 0 1px #3b2f2940}
.topbar .mobile-menu-toggle {display:none}

/* Cinematic opening: real studio photography, editorial typography and clear actions. */
#home.hero {position:relative; display:flex; min-height:min(780px,calc(100svh - 82px)); padding:clamp(88px,10vw,150px) clamp(26px,8vw,132px) 120px; align-items:center; background:#3b2b29 url('images/discover-studio-03.jpg') center 54%/cover no-repeat; overflow:hidden; isolation:isolate; perspective:none}
#home.hero::before {content:"";position:absolute;inset:0;z-index:0;width:auto;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;background:linear-gradient(90deg,rgba(34,25,24,.89) 0%,rgba(48,32,29,.76) 35%,rgba(60,38,32,.30) 71%,rgba(57,35,29,.23) 100%),linear-gradient(0deg,rgba(35,25,23,.52),transparent 34%);transform:none;animation:none;pointer-events:none}
#home.hero::after {content:"";position:absolute;right:-6vw;top:-23vw;width:min(70vw,900px);height:min(70vw,900px);border:1px solid #fff7e943;border-radius:50%;background:none;box-shadow:0 0 0 58px #fff7e90a,0 0 0 116px #fff7e906;transform:none;opacity:1;pointer-events:none}
#home .hero-copy {position:relative;z-index:2;max-width:800px;margin:0}
#home .hero-copy .eyebrow {margin-bottom:22px;color:#f0cdbf;font-size:12px;font-weight:500;letter-spacing:.19em}
#home.hero h1,#home .hero h1 {max-width:14ch;margin:0 0 22px;font-size:clamp(51px,6.5vw,96px);line-height:1.2;font-weight:500;letter-spacing:0;color:#fffaf6;text-shadow:0 4px 30px #2117134d}
html[lang="th"] #home.hero h1 {line-height:1.28}
#home.hero p,#home .hero p {max-width:42ch;margin:0 0 34px;font-size:clamp(16px,1.2vw,19px);line-height:1.7;font-weight:300;color:#f7e8df}
#home .hero .btn,#home .hero-copy>.btn {display:inline-flex;align-items:center;gap:28px;min-height:56px;padding:14px 25px;border:1px solid #e7b5a2;border-radius:999px;background:var(--sw-clay);color:#2c211f;font-size:15px;font-weight:600;text-decoration:none;box-shadow:0 15px 32px #21171344}
#home .hero-copy>.btn:hover {background:#fff6ec;color:var(--sw-earth);box-shadow:0 19px 40px #21171355;transform:translateY(-3px)}
#home .hero-copy>.btn span {font-size:22px;line-height:1;transition:transform .18s ease-out}
#home .hero-copy>.btn:hover span {transform:translateX(5px)}
#home .hero-emblem {z-index:1;right:clamp(20px,10vw,160px);top:50%;width:clamp(200px,27vw,420px);opacity:.64;filter:drop-shadow(0 16px 35px #0006);animation:none;transform:translateY(-50%)}
#home .hero-note {z-index:2;right:clamp(24px,4vw,60px);bottom:34px;color:#fceee5;font-size:11px;font-weight:500;letter-spacing:.17em}
#home .hero-copy>[data-edit] {animation-duration:.52s!important;animation-delay:0s!important}

/* Choice strip borrows the reference site's fast visual browsing rhythm. */
.brand-choices {padding:78px clamp(24px,5vw,74px) 88px;background:var(--sw-cream)}
.brand-choices-inner {max-width:1440px;margin:auto}
.brand-choices-heading {display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}
.brand-choices-heading .kicker {display:block;margin:0 0 8px;color:var(--sw-rose-deep);font-size:12px;font-weight:600;letter-spacing:.17em}
.brand-choices-heading h2 {margin:0;font-size:clamp(32px,3.4vw,54px);line-height:1.18;color:var(--sw-earth)}
.brand-choices-heading p {max-width:32ch;margin:0;color:#76615a;font-size:15px;line-height:1.65}
.brand-choices-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.brand-choice {position:relative;display:flex;min-height:clamp(320px,34vw,475px);flex-direction:column;justify-content:flex-end;overflow:hidden;border-radius:3px;background:#5c453d;color:#fff;text-decoration:none;isolation:isolate}
.brand-choice::before {content:"";position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transform:scale(1);transition:transform .5s cubic-bezier(.25,1,.5,1),filter .3s ease-out}
.brand-choice:nth-child(1)::before {background-image:url('images/discover-studio-03.jpg')}
.brand-choice:nth-child(2)::before {background-image:url('images/discover-class-01.jpg');background-position:center 55%}
.brand-choice:nth-child(3)::before {background-image:url('images/discover-studio-02.jpg')}
.brand-choice::after {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#261c1be8 0%,#3324216e 46%,#2d211d12 100%);transition:background-color .2s ease-out}
.brand-choice:hover::before,.brand-choice:focus-visible::before {transform:scale(1.055);filter:saturate(1.08)}
.brand-choice .choice-index {position:absolute;top:23px;left:25px;display:grid;place-items:center;width:39px;height:39px;border:1px solid #fff9;border-radius:50%;font-size:12px;font-weight:500}
.brand-choice .choice-copy {display:grid;gap:8px;padding:25px 27px 29px}
.brand-choice .choice-eyebrow {color:#f2c3ae;font-size:11px;font-weight:600;letter-spacing:.12em}
.brand-choice strong {font-size:clamp(25px,2.6vw,38px);font-weight:500;line-height:1.2}
.brand-choice small {max-width:30ch;font-size:14px;font-weight:300;line-height:1.6;color:#f3e5dd}
.brand-choice .choice-arrow {position:absolute;right:24px;bottom:25px;display:grid;place-items:center;width:42px;height:42px;border:1px solid #fff9;border-radius:50%;font-size:21px;transition:transform .18s ease-out,background-color .18s ease-out}
.brand-choice:hover .choice-arrow {transform:translateX(4px);background:var(--sw-rose-deep)}

/* Section rhythm and low-noise editorial cards. */
main>.section {padding-block:clamp(76px,7vw,118px)}
main>.section:nth-of-type(even) {background:#fffaf6}
main>.section .section-head {max-width:850px;margin:0 auto 42px}
main>.section .section-head .eyebrow,.about-copy>.eyebrow {color:var(--sw-rose-deep);font-size:12px;font-weight:600;letter-spacing:.17em}
main>.section .section-head h2,.about-copy h2 {margin:9px 0 12px;font-size:clamp(34px,4vw,58px);line-height:1.23;color:var(--sw-earth)}
html[lang="th"] main>.section .section-head h2,html[lang="th"] .about-copy h2,html[lang="th"] .brand-choices-heading h2 {line-height:1.34}
main>.section .section-head p {font-size:17px;font-weight:300;line-height:1.7;color:#765f58}
#about {background:#fffaf6}
#about .about-grid {max-width:1320px;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(32px,6vw,95px)}
#about .about-art.discover-slideshow[data-photo-carousel] {aspect-ratio:4/4.5;min-height:560px;border-radius:3px;box-shadow:20px 20px 0 #ead4c8}
#about .about-copy h2 {font-size:clamp(34px,3.5vw,55px)}
#about .about-copy p {font-size:16px;line-height:1.82;font-weight:400;color:#5a4d47}
#about .about-values {max-width:1320px;margin-top:95px;border-color:#dbc9bb}
#about .about-values>div {padding:26px 30px;border-color:#dbc9bb}
#about .about-values strong {font-size:20px;color:var(--sw-earth)}
#about .about-values small {font-size:14px}
#about .about-link {font-size:15px;font-weight:500;color:var(--sw-rose-deep);border-color:var(--sw-rose-deep)}

#services {background:#f1e7df}
#services .experience-grid {max-width:1320px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
#services .experience-card {position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:360px;margin:0;padding:32px;overflow:hidden;border:0;border-radius:3px;background:#80695d;color:#fff;box-shadow:none;isolation:isolate;cursor:pointer}
#services .experience-card:nth-child(4n+1),#services .experience-card:nth-child(4n+4) {grid-column:span 7}
#services .experience-card:nth-child(4n+2),#services .experience-card:nth-child(4n+3) {grid-column:span 5}
#services .experience-card::before {content:"";position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transition:transform .45s cubic-bezier(.25,1,.5,1)}
#services .experience-card:nth-child(4n+1)::before {background-image:var(--sw-card-image,url('images/studio-ambience-gong-red.jpg'))}
#services .experience-card:nth-child(4n+2)::before {background-image:url('images/discover-studio-02.jpg')}
#services .experience-card:nth-child(4n+3)::before {background-image:url('images/discover-studio-03.jpg')}
#services .experience-card:nth-child(4n+4)::before {background-image:url('images/discover-class-02.jpg')}
#services .experience-card::after {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#211819e8,#271e1a4f 68%,#271e1a2b)}
#services .experience-card:hover::before,#services .experience-card:focus-visible::before {transform:scale(1.055)}
#services .experience-card:hover {box-shadow:0 18px 35px #422d2540;transform:translateY(-4px)}
#services .experience-card>span {color:#f6d1c2;font-size:12px;font-weight:600;letter-spacing:.13em}
#services .experience-card h3 {max-width:22ch;margin:10px 0;font-size:clamp(25px,2.7vw,39px);line-height:1.22;color:#fff}
html[lang="th"] #services .experience-card h3 {line-height:1.32}
#services .experience-card p {max-width:40ch;margin:0 0 12px;color:#f2e6df;font-size:15px;line-height:1.6}
#services .experience-card strong {color:#fff;font-size:17px;font-weight:600}
#services .experience-card strong small {color:#fff;font-size:13px;font-weight:400}
#services .experience-card:nth-child(-n+4) :is(.experience-poster,.private-class-illustration-frame,.experience-brand-logo) {display:none!important}
#services .experience-card:nth-child(n+5) {grid-column:span 3;min-height:440px;justify-content:flex-start;background:#fffaf6;color:var(--sw-earth);border:1px solid var(--sw-line)}
#services .experience-card:nth-child(n+5)::before,#services .experience-card:nth-child(n+5)::after {display:none}
#services .experience-card:nth-child(n+5)>span {color:var(--sw-rose-deep)}
#services .experience-card:nth-child(n+5) h3,#services .experience-card:nth-child(n+5) strong,#services .experience-card:nth-child(n+5) strong small {color:var(--sw-earth)}
#services .experience-card:nth-child(n+5) p {color:#6d5a53}
#services .experience-card:nth-child(n+5) img {max-width:100%;height:auto;margin:16px auto;object-fit:contain}
#services .venue-highlight {max-width:1320px;border-radius:3px;background:var(--sw-rose-deep)}
#services .venue-highlight.offsite-highlight {background:#53635d}
#services .venue-highlight h3 {font-size:clamp(23px,2.2vw,32px)}
#services .venue-highlight p {font-size:15px}

#gallery {background:#fffaf6}
#gallery .gallery-category {max-width:1320px;margin-bottom:76px}
#gallery .gallery-category-head h3 {font-size:clamp(27px,2.6vw,39px);color:var(--sw-earth)}
#gallery .gallery-grid {max-width:1320px;gap:10px}
#gallery .gallery-item {border-radius:2px}
#gallery .gallery-item img {transition:transform .4s cubic-bezier(.25,1,.5,1)}
#facilitators {background:#ece5dc}
#facilitators .facilitator-grid {max-width:1320px;gap:20px}
#facilitators .facilitator {border:0;border-radius:3px;overflow:hidden;background:#fffaf6;box-shadow:0 8px 27px #3d2b2312}
#facilitators .facilitator-info {padding:27px}
#facilitators .facilitator-info h3 {font-size:24px;color:var(--sw-earth)}
#facilitators .facilitator-info p {font-size:14px;line-height:1.8}
#reviews {background:#fffaf6}
#reviews .review {background:#f3e9e2;border-color:#e5d3c6;border-radius:3px}
#reviews .review p {font-size:15px;line-height:1.75}
#booking {background:#eadbd0}
#booking .booking-wrap {max-width:1320px;box-shadow:0 20px 50px #6045361a}
#booking .booking-intro {background:var(--sw-earth);color:#fffaf6}
#booking .booking-form {background:#fffaf6}
#booking .booking-form :is(input,select,textarea) {border-radius:4px;border-color:#d8c5b7;background:#fffdfa;font-size:15px}
#booking .booking-form :is(input,select,textarea):focus {border-color:var(--sw-rose-deep);box-shadow:0 0 0 3px #b9796a26}
#booking .booking-form .btn[type="submit"] {background:var(--sw-rose-deep);color:#fff;border-color:var(--sw-rose-deep);border-radius:999px;min-height:52px;font-size:15px}
#contact {background:#fffaf6}
#contact .contact-quick-btn {border-radius:4px;transition:transform .2s ease-out,box-shadow .2s ease-out}
#contact .contact-quick-btn:hover {transform:translateY(-4px);box-shadow:0 16px 30px #382c2a25}
.footer {background:var(--sw-earth);color:#fffaf6}

@media (max-width:1320px) {
  .topbar {min-height:72px;height:72px;padding-inline:22px;gap:14px}
  .topbar .brand {margin-right:auto}
  .topbar .mobile-menu-toggle {display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;margin:0;border:1px solid #cdb6a7;border-radius:50%;background:#fffaf6;color:var(--sw-earth);font-size:22px}
  .topbar .nav {display:none;position:absolute;top:72px;left:0;right:0;z-index:31;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;max-height:calc(100dvh - 72px);padding:16px 22px 26px;overflow:auto;border-top:1px solid var(--sw-line);background:#faf4ee;box-shadow:0 23px 36px #382c2a20}
  .topbar .nav.is-open {display:flex}
  .topbar .nav.is-open a:not(.btn) {display:flex!important;align-items:center;min-height:51px;padding:11px 6px;border-bottom:1px solid #dfcfc3;font-size:17px;white-space:normal}
  .topbar .nav a:not(.btn)::after {display:none}
  .topbar .nav a.btn {margin-top:10px;min-height:46px;justify-content:center;font-size:15px}
  .site-language {order:1}.topbar .mobile-menu-toggle {order:2}
}
@media (max-width:760px) {
  html {scroll-padding-top:72px}
  #home.hero {min-height:670px;padding:98px 22px 72px;align-items:flex-end;background-position:58% center}
  #home.hero::before {background:linear-gradient(0deg,#291d1beF 0%,#34211ec7 48%,#34221f7a 100%)}
  #home.hero::after {width:68vw;height:68vw;right:-20vw;top:9%;opacity:.52}
  #home .hero-emblem {top:29%;right:4%;width:min(52vw,230px);opacity:.5;transform:translateY(-50%)}
  #home.hero h1,#home .hero h1 {max-width:12ch;font-size:clamp(46px,11vw,69px);line-height:1.17}
  #home.hero p,#home .hero p {max-width:31ch;font-size:16px;line-height:1.76}
  #home .hero-note {right:22px;bottom:18px;font-size:9px}
  .brand-choices {padding:63px 18px 70px}
  .brand-choices-heading {display:block;margin-bottom:23px}
  .brand-choices-heading p {margin-top:11px;font-size:14px}
  .brand-choices-grid {grid-template-columns:1fr;gap:10px}
  .brand-choice {min-height:330px}
  main>.section {padding:70px 18px}
  main>.section .section-head h2,.about-copy h2 {font-size:clamp(31px,8vw,43px)}
  main>.section .section-head p {font-size:15px}
  #about .about-grid {grid-template-columns:1fr;gap:36px}
  #about .about-art.discover-slideshow[data-photo-carousel] {min-height:0;aspect-ratio:4/3;box-shadow:9px 9px 0 #ead4c8}
  #about .about-copy p {font-size:15px}
  #about .about-values {margin-top:55px}
  #services .experience-grid {grid-template-columns:1fr;gap:12px}
  #services .experience-card:nth-child(n) {grid-column:auto;min-height:320px;padding:24px}
  #services .experience-card h3 {font-size:30px}
  #services .venue-highlight {margin-inline:0}
  #gallery .gallery-category {margin-bottom:60px}
  #facilitators .facilitator-info h3 {font-size:22px}
  #booking .booking-wrap {box-shadow:none}
  .site-language button {min-width:48px}
}
@media (max-width:420px) {
  .topbar {padding-inline:13px}
  .topbar .brand-mark {width:31px;height:39px;flex-basis:31px}
  .topbar .brand-name {font-size:22px}
  .site-language {padding:2px}
  .site-language button {min-width:44px;min-height:44px;gap:3px;padding-inline:5px;font-size:10px}
  .site-language .flag svg {width:17px;height:12px}
  #home.hero {min-height:630px;padding-inline:20px}
  #home.hero h1,#home .hero h1 {font-size:clamp(42px,11vw,51px)}
  #home .hero-copy .eyebrow {font-size:11px;letter-spacing:.12em}
  #home .hero-copy>.btn {min-height:51px;padding:12px 20px;font-size:14px}
}
@media (prefers-reduced-motion:reduce) {
  #home.hero::before,#home.hero::after,#home .hero-emblem {animation:none!important}
  #home .hero-copy>[data-edit] {animation:none!important;opacity:1!important}
  .brand-choice::before,#services .experience-card::before,#gallery .gallery-item img {transition:none!important}
  .brand-choice:hover::before,#services .experience-card:hover::before,#gallery .gallery-item:hover img {transform:none!important}
}