@import url("https://fonts.googleapis.com/css2?family=Sarabun:wght@200;300;400;500;600;700&family=Cormorant+Garamond:wght@400;500;600;700&display=swap");

:root {
  --navy-950: #020817;
  --navy-900: #031536;
  --navy-850: #06447a;
  --navy-800: #082556;
  --blue-700: #06447a;
  --blue-600: #1760a9;
  --gold: #ddb75e;
  --gold-light: #f6d98a;
  --gold-dim: #a77a28;
  --moonstone: #eef3fa;
  --white: #fffdf7;
  --ink: #101a3b;
  --muted: #6d7892;
  --line: rgba(225,184,95,.48);
  --glass: rgba(8,37,86,.72);
  --shadow: 0 22px 60px rgba(0,4,23,.26);
  --radius: 24px;
  --max: 1240px;
  --font-heading: "Cormorant Garamond", "Sarabun", serif;
  --font-body: "Sarabun", Arial, sans-serif;
  --text-xs: 13px;
  --text-sm: 15px;
  --text-base: 17px;
  --text-lg: 19px;
  --text-card-title: clamp(20px, 1.7vw, 25px);
  --text-section-title: clamp(32px, 3.2vw, 46px);
  --text-hero: clamp(52px, 5.5vw, 76px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--white); background: var(--navy-900); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.8; font-weight: 300; overflow-x: hidden; }
main { position: relative; background: transparent; }
body.modal-open { overflow: hidden; }
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; image-rendering: auto; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, .brand-copy strong { font-family: "Sarabun", sans-serif; }
.eyebrow, .main-nav, .btn { font-family: "Sarabun", sans-serif; letter-spacing: .03em; }
h1, h2, h3 { line-height: 1.35; }
p, li, button, a { letter-spacing: 0; }
.skip-link { position: fixed; z-index: 999; top: 10px; left: 10px; transform: translateY(-160%); background: white; color: var(--ink); padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { transform: none; }

.site-header { position: fixed; z-index: 100; top: 0; left: 0; right: 0; background: linear-gradient(180deg,rgba(3,9,29,.82),rgba(3,9,29,.42)); border-bottom: 1px solid rgba(225,184,95,.12); backdrop-filter: blur(12px); transition: .25s ease; }
.site-header.scrolled { background: rgba(3,9,29,.9); border-bottom: 1px solid rgba(225,184,95,.17); backdrop-filter: blur(18px); box-shadow: 0 8px 30px rgba(0,0,0,.16); }
.nav-shell { width: min(calc(100% - 40px), 1420px); min-height: 82px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 34px; }
.brand { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.brand-symbol { width: 44px; height: 44px; position: relative; display: grid; place-items: center; color: var(--gold); }
.brand-symbol::before, .brand-symbol::after, .brand-symbol i::before, .brand-symbol i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 1px; background: currentColor; transform-origin: center; }
.brand-symbol::before { transform: translate(-50%,-50%); }
.brand-symbol::after { transform: translate(-50%,-50%) rotate(90deg); }
.brand-symbol i::before { transform: translate(-50%,-50%) rotate(45deg); }
.brand-symbol i::after { transform: translate(-50%,-50%) rotate(-45deg); }
.brand-symbol i { width: 11px; height: 11px; border: 1px solid currentColor; border-radius: 50%; z-index: 1; background: var(--navy-900); }
.brand-copy { line-height: 1; }
.brand-copy strong { display: block; color: var(--gold-light); letter-spacing: .055em; font-size: 1.05rem; }
.brand-copy small { display: block; margin-top: 7px; font-size: .58rem; letter-spacing: .13em; color: #bec9dd; }
.main-nav { display: flex; align-items: center; gap: clamp(10px, 1.8vw, 26px); font-size: .9rem; font-weight: 700; }
.main-nav > a:not(.nav-book) { color: #fff4d3; position: relative; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; line-height: 1.35; transition: color .22s,background .22s,border-color .22s,transform .22s; }
.main-nav > a:not(.nav-book)::after { content: ""; position: absolute; left: 12px; right: 100%; bottom: 5px; height: 2px; border-radius: 2px; background: var(--gold); transition: .22s; }
.main-nav > a:not(.nav-book):hover, .main-nav > a:not(.nav-book):focus-visible { color: white; background: rgba(225,184,95,.12); border-color: rgba(225,184,95,.38); transform: translateY(-1px); }
.main-nav > a:not(.nav-book):hover::after, .main-nav > a:not(.nav-book):focus-visible::after { right: 12px; }
.nav-book { min-width: 122px; min-height: 50px; display: inline-flex; justify-content: center; align-items: center; gap: 14px; border: 1px solid #ffe4a2; border-radius: 999px; color: #131735; background: linear-gradient(135deg,#ffe8a8,#d99d3f); box-shadow: 0 8px 24px rgba(218,157,63,.34), inset 0 1px rgba(255,255,255,.8); }
.menu-toggle { display: none; width: 46px; height: 46px; border: 1px solid var(--gold); border-radius: 50%; background: rgba(4,14,39,.82); padding: 11px; box-shadow: 0 5px 18px rgba(0,0,0,.22); }
.menu-toggle span { display: block; height: 1px; background: var(--gold); margin: 5px 0; transition: .2s; }

:where(a, button, [tabindex="0"]):focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }

.hero { min-height: 720px; padding-top: 82px; padding-bottom: 40px; position: relative; overflow: hidden; background-color: #03091d; background-image: linear-gradient(90deg,rgba(3,9,29,.46),rgba(3,9,29,.08)), url("assets/generated-assets-2k/site-cosmic-desktop-2560x1440.webp"); background-repeat: no-repeat; background-position: center top; background-size: cover; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 150px; background: linear-gradient(transparent,var(--navy-900)); pointer-events: none; }
.stars { position: absolute; inset: 0; overflow: hidden; opacity: .84; background-image: radial-gradient(circle at 12% 30%,#ffe7a1 0 1px,transparent 2px),radial-gradient(circle at 30% 18%,#fff 0 1px,transparent 2px),radial-gradient(circle at 72% 32%,#ffe7a1 0 1.3px,transparent 2.5px),radial-gradient(circle at 80% 10%,#fff 0 1px,transparent 2px); background-size: 190px 170px,270px 220px,230px 200px,300px 250px; animation: stars-drift 14s ease-in-out infinite alternate; }
.stars::before,.stars::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-repeat: no-repeat; mix-blend-mode: screen; }
.stars::before { background-image: radial-gradient(circle,#fff 0 1px,transparent 1.8px),radial-gradient(circle,#f9d77d 0 1px,transparent 2px); background-position: 20px 40px,110px 90px; background-size: 220px 210px,310px 270px; animation: stars-twinkle 4.8s ease-in-out infinite alternate; }
.stars::after { background-image: radial-gradient(ellipse at center,rgba(255,255,255,.95) 0 1px,transparent 1.5px),linear-gradient(90deg,transparent 48%,rgba(255,229,155,.8) 50%,transparent 52%); background-position: 8% 20%,72% 34%; background-size: 180px 180px,260px 260px; opacity: .5; animation: stars-twinkle 6.4s ease-in-out 1.2s infinite alternate-reverse; }
@keyframes stars-drift { to { transform: translate3d(8px,-6px,0); opacity: .66; } }
@keyframes stars-twinkle { 0%,22% { opacity: .22; filter: brightness(.9); } 65%,100% { opacity: .82; filter: brightness(1.35); } }
@media (prefers-reduced-motion: reduce) { .stars,.stars::before,.stars::after { animation: none; } }
.hero-inner { width: min(calc(100% - 48px), var(--max)); min-height: 650px; margin: auto; display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; position: relative; z-index: 2; }
.hero-copy { padding: 60px 0 65px; position: relative; z-index: 3; }
.eyebrow { color: var(--gold); font-size: .73rem; font-weight: 800; letter-spacing: .2em; margin-bottom: 18px; }
.eyebrow::before { content: "✦"; margin-right: 10px; }
.hero h1 { font-size: var(--text-hero); line-height: 1.12; letter-spacing: -.01em; font-weight: 500; font-family: "Sarabun", sans-serif; margin: 0 0 24px; text-shadow: 0 8px 32px rgba(0,0,0,.25); }
.hero h1 span { color: var(--gold-light); }
.hero-lead { color: #d8dfef; font-size: clamp(.95rem, 1.4vw, 1.12rem); line-height: 1.8; margin-bottom: 30px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn { min-height: 50px; padding: 0 23px; border-radius: 14px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 18px; font-weight: 800; font-size: .88rem; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn:hover { transform: translateY(-3px); }
.btn-primary { color: #152144; background: linear-gradient(135deg,#ffe3a0,#d99c3c); border-color: #ffd98a; box-shadow: 0 9px 30px rgba(217,156,60,.24), inset 0 1px rgba(255,255,255,.7); }
.btn-primary:hover { box-shadow: 0 12px 34px rgba(217,156,60,.38); }
.btn-ghost { color: white; border-color: rgba(239,217,157,.55); background: rgba(5,19,50,.55); backdrop-filter: blur(10px); }
.btn-outline { color: white; border-color: var(--gold); background: rgba(4,17,46,.28); }
.trust-row { display: flex; gap: 24px; margin-top: 28px; color: #c9d4e8; font-size: .77rem; }
.trust-row span::first-letter { color: var(--gold); }
.hero-visual { align-self: stretch; position: relative; display: flex; align-items: flex-end; justify-content: center; }
.hero-character { width: min(760px, 125%); max-width: none; max-height: 690px; object-fit: contain; object-position: center bottom; position: relative; z-index: 3; filter: drop-shadow(0 30px 36px rgba(0,0,0,.3)); }
.character-glow { position: absolute; z-index: 1; width: 55%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,rgba(68,124,238,.5),rgba(48,35,130,.13) 48%,transparent 72%); filter: blur(8px); top: 17%; left: 20%; }
.orbit { position: absolute; z-index: 1; width: 74%; aspect-ratio: 1; border: 1px solid rgba(225,184,95,.32); border-radius: 50%; top: 10%; left: 14%; }
.orbit::before, .orbit::after { content: "✦"; color: var(--gold); position: absolute; font-size: 1.1rem; }
.orbit::before { left: 1%; top: 48%; }.orbit::after { right: 9%; top: 14%; }
.orbit-two { transform: rotate(62deg) scale(.84,1.08); border-color: rgba(111,165,255,.24); }

.service-shell, .special-services { background: transparent; position: relative; }
.service-shell { width: min(calc(100% - 24px), 1320px); margin: 32px auto 0; padding: 28px 35px 28px; border: 1px solid var(--gold-dim); border-radius: 35px; background: #031536; position: relative; z-index: 2; overflow: visible; box-shadow: 0 -20px 60px rgba(0,0,0,.17); }
.section-heading { width: min(calc(100% - 40px), var(--max)); margin: 0 auto 30px; display: flex; align-items: center; justify-content: center; gap: 18px; text-align: center; }
.compact-heading { position: relative; z-index: 3; width: fit-content; max-width: calc(100% - 40px); margin: -30px auto 24px; padding: 6px 24px 10px; background: #031536; transform: none; }
.section-heading h2 { font-size: clamp(1.4rem,2.4vw,2rem); font-weight: 400; font-family: "Sarabun", sans-serif; letter-spacing: .01em; color: var(--gold-light); line-height: 1.35; letter-spacing: 0; margin: 0; white-space: normal; }
.heading-line { width: min(150px,15vw); height: 1px; background: linear-gradient(90deg,transparent,var(--gold)); position: relative; }
.heading-line:last-child { transform: scaleX(-1); }
.heading-line::after { content: "✦"; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: .7rem; }
.reading-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.reading-card { min-height: 230px; padding: 36px 16px 14px; border: 1px solid rgba(225,184,95,.68); border-radius: 20px; text-align: center; background: linear-gradient(155deg,rgba(21,79,139,.82),rgba(4,23,58,.92)); box-shadow: inset 0 0 26px rgba(54,124,218,.18),0 12px 26px rgba(0,0,0,.2); position: relative; transition: .24s ease; cursor: pointer; }
.reading-card:hover { transform: translateY(-7px); border-color: var(--gold-light); box-shadow: 0 15px 32px rgba(0,0,0,.28),0 0 25px rgba(225,184,95,.12); }
.card-icon { position: absolute; top: -23px; left: 50%; transform: translateX(-50%); width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; background: #0a2859; color: var(--gold-light); font-size: 1.35rem; box-shadow: 0 0 0 7px var(--navy-900); }
.reading-card h3 { font-size: 1.55rem; font-weight: 300; line-height: 1.25; margin: 0 0 5px; font-family: "Sarabun", sans-serif; }
.reading-card p { color: #d1d9e9; font-size: .88rem; margin-bottom: 7px; }
.reading-card strong { color: var(--gold-light); font-family: var(--font-heading); display: block; font-size: clamp(1.2rem,2vw,1.35rem); font-weight: 400; margin-bottom: 15px; }
.reading-card strong small { font-family: inherit; font-size: .75rem; color: white; }
.detail-btn { width: 100%; min-height: 38px; border: 1px solid rgba(225,184,95,.7); background: rgba(3,11,32,.25); border-radius: 999px; cursor: pointer; font-size: .77rem; display: flex; justify-content: center; align-items: center; gap: 28px; }
.reading-card { display: flex; flex-direction: column; }
.reading-card .detail-btn { border: 0; color: #081B3A; background: linear-gradient(135deg, #F8D77A, #DDA83E); box-shadow: 0 7px 16px rgba(0,0,0,.14); }
.reading-card .detail-btn:hover { color: #081B3A; background: linear-gradient(135deg, #FFE9A5, #E9BC55); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,.2); }

.special-services { padding: 34px max(20px,calc((100% - var(--max))/2)) 38px; }
.special-grid { max-width: var(--max); margin: auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.special-card { min-width: 0; padding: 6px 10px 12px; border: 1px solid rgba(225,184,95,.36); border-radius: 48px 48px 10px 10px; text-align: center; background: linear-gradient(180deg,rgba(9,58,112,.63),rgba(3,15,42,.83)); cursor: pointer; transition: .22s; }
.special-card:hover { transform: translateY(-6px); border-color: var(--gold); }
.special-art { width: 72px; max-width: 100%; aspect-ratio: 1; margin: 0 auto 6px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(225,184,95,.5); color: var(--gold-light); background: radial-gradient(circle at 45% 38%,rgba(55,120,200,.4),rgba(4,21,53,.92)); box-shadow: inset 0 0 22px rgba(80,139,229,.2),0 0 24px rgba(225,184,95,.08); font-family: var(--font-heading); font-size: clamp(2.4rem,4vw,3.1rem); text-shadow: 0 0 18px rgba(225,184,95,.4); overflow: hidden; }
.special-art img { width: 100%; height: 100%; object-fit: contain; }
.special-card h3 { color: var(--gold-light); font-size: 1rem; line-height: 1.3; margin: 0 0 4px; font-weight: 600; }
.special-card p { color: #cdd6e8; font-size: .65rem; line-height: 1.4; margin: 0; }
.special-card button { border: 0; background: none; font-size: .65rem; color: white; cursor: pointer; }
.special-card button span { color: var(--gold); margin-left: 6px; }
a.special-card { display: flex; flex-direction: column; text-decoration: none; }
a.special-card:hover { transform: translateY(-6px); border-color: var(--gold); }

.wallpaper-section { background: linear-gradient(180deg,rgba(4,39,79,.22),rgba(5,68,125,.50) 44%,rgba(6,37,82,.36)); padding: 52px max(20px,calc((100% - var(--max))/2)) 34px; position: relative; overflow: hidden; }
.wallpaper-section::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg,rgba(0,12,35,.1),rgba(17,95,160,.12)); }
.wallpaper-section > * { position: relative; z-index: 1; }
.wallpaper-intro { display: grid; grid-template-columns: 1fr .75fr .7fr; gap: 38px; align-items: center; }
.wallpaper-copy h2 { font-size: clamp(2.5rem,4vw,4.3rem); line-height: 1.15; font-weight: 400; margin: 0 0 10px; }
.large-copy { font-size: 1.05rem; color: #dce8f7; }
.feature-list { margin: 26px 0 30px; padding: 0; list-style: none; }
.feature-list li { margin: 11px 0; color: #eef5ff; font-size: .85rem; }
.feature-list li::before { content: "✦"; color: var(--gold); margin-right: 12px; }
.phone-stage { min-height: 400px; display: grid; place-items: center; position: relative; }
.phone { width: 198px; height: 394px; border: 7px solid #050914; border-radius: 31px; padding: 5px; position: relative; z-index: 2; background: #050914; box-shadow: 0 24px 42px rgba(0,0,0,.48),inset 0 0 0 1px #7790b7; transform: rotate(-1deg); }
.phone-speaker { width: 66px; height: 17px; background: #050914; position: absolute; z-index: 3; left: 50%; top: 5px; transform: translateX(-50%); border-radius: 0 0 11px 11px; }
.phone-screen { height: 100%; overflow: hidden; border-radius: 22px; position: relative; background: #9a8edc; }
.phone-screen img { width: auto; max-width: 136px; height: auto; max-height: 228px; margin: auto; object-fit: contain; image-rendering: auto; }
.phone-time, .phone-date { position: absolute; z-index: 2; left: 0; right: 0; text-align: center; color: white; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.phone-time { top: 40px; font: clamp(1.8rem,3vw,2.25rem)/1 var(--font-heading); }.phone-date { top: 81px; font-size: .42rem; letter-spacing: .1em; }
.zodiac-halo { position: absolute; width: 360px; aspect-ratio: 1; border: 1px solid rgba(225,184,95,.38); border-radius: 50%; animation: spin 40s linear infinite; }
.zodiac-halo::before, .zodiac-halo::after { content: "✦  ♈  ✧  ♋  ✦  ♎  ✧  ♑"; position: absolute; inset: 20px; border: 1px dashed rgba(225,184,95,.22); border-radius: 50%; color: rgba(244,215,139,.48); display: flex; align-items: flex-start; justify-content: center; padding-top: 7px; font: 1.1rem/1 var(--font-heading); word-spacing: 11px; }
.zodiac-halo::after { inset: 70px; content: ""; }
@keyframes spin { to { transform: rotate(360deg); } }
.energy-panel { padding: 22px; border: 1px solid rgba(255,255,255,.3); border-radius: 18px; background: rgba(228,237,251,.86); color: var(--ink); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.energy-panel h3 { font-family: inherit; font-size: .95rem; margin-bottom: 16px; }
.energy-panel ul { padding: 0; margin: 0; list-style: none; }
.energy-panel li { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.energy-panel li > span { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: white; color: #6847a8; box-shadow: 0 4px 12px rgba(18,35,77,.12); }
.energy-panel b, .energy-panel small { display: block; }.energy-panel b { font-size: .78rem; }.energy-panel small { color: #68738d; font-size: .64rem; }
.wallpaper-gallery-wrap { margin-top: 30px; padding: 14px 16px 20px; border: 1px solid rgba(225,184,95,.5); border-radius: 22px; background: rgba(3,18,50,.36); box-shadow: var(--shadow); }
.mini-heading { display: flex; align-items: center; gap: 16px; justify-content: center; margin-bottom: 14px; }
.mini-heading span { height: 1px; width: 100px; background: linear-gradient(90deg,transparent,var(--gold)); }.mini-heading span:last-child { transform: scaleX(-1); }
.mini-heading h3 { margin: 0; font-weight: 400; font-size: 1.15rem; }
#wallpapers .mini-heading { gap: 8px; }
#wallpapers .mini-heading h3 { white-space: nowrap; flex: 0 0 auto; }
#wallpapers .mini-heading span { width: 48px; flex: 0 1 48px; min-width: 0; }
@media (max-width: 768px) {
  #wallpapers .mini-heading { gap: 6px; }
  #wallpapers .mini-heading h3 { font-size: 24px; }
  #wallpapers .mini-heading span { width: 20px; flex-basis: 20px; }
}
.wallpaper-showcase { display: grid; grid-template-columns: minmax(0,3.4fr) minmax(200px,1fr); gap: 16px; align-items: stretch; }
.wallpaper-gallery { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.wallpaper-card { display: block; border: 0; background: transparent; padding: 0; cursor: pointer; transition: .22s; text-decoration: none; }
.wallpaper-gallery .wallpaper-card { flex: 0 0 calc((100% - 50px) / 6); }
.wallpaper-card:hover { transform: translateY(-6px); }
.wallpaper-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center; border-radius: 10px; box-shadow: 0 12px 24px rgba(0,0,0,.24); }
.wallpaper-card > span { display: block; margin-top: 8px; font-size: .65rem; color: #dfeafa; }
.gallery-btn { width: min(270px,100%); margin: 18px auto 0; display: flex; background: rgba(11,39,86,.7); color: white; border-color: var(--gold); }
.custom-wallpaper { margin: 0; padding: 18px; display: flex; flex-direction: column; gap: 10px; justify-content: space-between; border: 1px solid rgba(225,184,95,.5); border-radius: 16px; background: linear-gradient(145deg,rgba(5,20,52,.91),rgba(25,75,139,.82)); }
.current-wallpaper-card { position: relative; z-index: 2; }
.current-wallpaper-link { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--cream); text-decoration: none; }
.current-wallpaper-link img { display: block; width: min(100%, 230px); height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center; border-radius: 14px; box-shadow: 0 16px 30px rgba(0,0,0,.3); }
.current-wallpaper-link span { font-weight: 700; text-align: center; }
.wallpaper-showcase-image { display: grid; place-items: center; min-width: 0; }
.wallpaper-showcase-image img { display: block; width: 100%; max-width: 620px; height: auto; object-fit: contain; object-position: center; }
.custom-wallpaper h3 { font-size: 1.18rem; font-weight: 400; margin-bottom: 6px; }.custom-wallpaper p:not(.eyebrow) { color: #dce8f7; font-size: .7rem; line-height: 1.45; margin-bottom: 0; }.custom-wallpaper .eyebrow { font-size: .55rem; margin-bottom: 5px; }.custom-wallpaper .btn { min-height: 38px; padding: 0 14px; font-size: .7rem; }
.custom-orbit { height: 76px; min-width: 0; border: 1px solid rgba(225,184,95,.45); border-radius: 50%; display: flex; align-items: center; justify-content: space-around; color: var(--gold-light); font-size: 1.2rem; box-shadow: inset 0 0 30px rgba(71,137,225,.2); }
.intention-bar { width: min(calc(100% - 48px),1420px); min-height: 150px; margin: 24px auto 0; padding: 24px 32px; display: grid; grid-template-columns: minmax(220px,1.4fr) repeat(6,minmax(110px,1fr)); align-items: center; gap: 16px; border: 1px solid rgba(221,183,94,.75); border-radius: 28px; overflow: hidden; background: rgba(3,17,47,.55); }
.intention-title { min-width: 0; padding-right: 24px; color: #fff; font-size: clamp(1.15rem,1.4vw,1.45rem); font-weight: 700; line-height: 1.4; white-space: nowrap; }
.intention-item { min-width: 0; min-height: 104px; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 0; background: transparent; cursor: pointer; }
.intention-icon { width: 60px; height: 60px; flex: 0 0 60px; display: grid; place-items: center; border: 1px solid rgba(221,183,94,.72); border-radius: 50%; color: #f6d98a; background: radial-gradient(circle at 35% 30%,rgba(69,126,205,.48),rgba(3,21,54,.96)); box-shadow: inset 0 0 18px rgba(85,149,230,.2),0 6px 18px rgba(0,0,0,.24); transition: transform .2s ease,background .2s ease,color .2s ease; }
.intention-icon svg { width: 30px; height: 30px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.intention-label { color: #fff; font-size: 1rem; font-weight: 700; line-height: 1.4; text-align: center; white-space: nowrap; }
.intention-item:hover .intention-icon, .intention-item[aria-pressed="true"] .intention-icon { color: #031536; border-color: #f6d98a; background: linear-gradient(135deg,#f8dc8e,#d99d3f); transform: translateY(-3px); }

.courses { padding: 36px max(20px,calc((100% - var(--max))/2)) 48px; background: linear-gradient(180deg,rgba(3,13,36,.25),rgba(4,13,35,.75)); position: relative; height: auto; min-height: unset; overflow: visible; }
.light-heading h2 { color: var(--gold-light); }.section-subtitle { margin: -18px auto 30px; text-align: center; color: #bdc9dd; font-size: .85rem; }
.course-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; }
.course-card { color: var(--ink); height: auto; min-height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: #f8f9fc; box-shadow: var(--shadow); transition: .22s; }
.course-card:hover { transform: translateY(-7px); }
.course-image { aspect-ratio: 4 / 3; overflow: hidden; background: #0c1d46; }.course-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.course-body { flex: 1; height: auto; min-height: 210px; padding: 20px; display: flex; flex-direction: column; align-items: flex-start; overflow: visible; }
.level { display: inline-flex; margin-top: -38px; position: relative; border: 2px solid #f8f9fc; border-radius: 999px; color: white; padding: 3px 13px; font: 600 clamp(.72rem,1.2vw,.82rem)/1.3 var(--font-body); box-shadow: 0 6px 14px rgba(0,0,0,.18); }
.level-green,.green { background: #1f753d; }.level-blue,.blue { background: #154e94; }.level-sapphire,.sapphire { background: #3c337a; }.level-gold,.gold { background: #8c551d; }
.course-card h3 { margin: 8px 0 4px; font-size: 1.12rem; font-weight: 400; }.course-card p { color: #56617a; font-size: .68rem; line-height: 1.65; margin-bottom: 18px; }
.course-btn { width: 100%; min-height: 38px; border: 0; border-radius: 999px; color: white; padding: 0 16px; margin-top: auto; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: .73rem; box-shadow: 0 7px 16px rgba(0,0,0,.15); }

.reviews { background: var(--moonstone); color: var(--ink); padding: 62px max(20px,calc((100% - var(--max))/2)) 78px; }
.dark-heading h2 { color: var(--ink); }.dark-heading .heading-line { background: linear-gradient(90deg,transparent,#b98b38); }.dark-subtitle { color: var(--muted); }
.review-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.review-card { padding: 24px; border: 1px solid rgba(27,47,89,.12); border-radius: 18px; background: rgba(255,255,255,.78); box-shadow: 0 15px 35px rgba(24,45,80,.08); }
.review-top { display: flex; align-items: center; gap: 12px; }.avatar { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: white; background: linear-gradient(135deg,#164b93,#8065b8); }
.review-top b,.review-top small { display: block; }.review-top small { color: var(--muted); font-size: .68rem; }.stars-rating { color: #d49b2d; margin-left: auto; font-size: .72rem; letter-spacing: .08em; }
.review-card p { margin: 20px 0 0; color: #46526c; font-size: .83rem; }

.booking { padding: 85px 20px 92px; text-align: center; background: #f3f6fb; color: var(--ink); position: relative; overflow: hidden; }
.booking::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg,rgba(8,36,84,.18),rgba(3,9,29,.12)); opacity: 1; }
.booking > * { position: relative; z-index: 1; }.booking h2 { font-size: clamp(2rem,4.4vw,4.1rem); line-height: 1.15; margin-bottom: 12px; font-weight: 400; }.booking > p:not(.eyebrow) { color: var(--muted); }.closed-note { width: fit-content; margin: 20px auto; padding: 9px 18px; border-radius: 999px; background: #fff0f1; color: #a63748; font-size: .8rem; font-weight: 800; }.booking-btn { margin-top: 4px; }.booking-orbit { position: absolute; width: 520px; height: 240px; border: 1px solid rgba(192,142,48,.2); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-8deg); }

.site-footer { color: var(--ink); background: #f1f4f8; padding: 34px max(20px,calc((100% - var(--max))/2)) 20px; border-top: 0; margin-top: 0; transform: none; position: relative; }
.site-footer::before { display: none; }
.site-footer > * { position: relative; z-index: 1; }
.footer-cloud-transition { display: none; }
.footer-heading { text-align: center; margin: 0 auto 24px; }.footer-heading h2 { margin-bottom: 4px; font-size: 2rem; font-weight: 400; }.footer-heading p { color: var(--muted); margin-bottom: 10px; font-size: .76rem; }.footer-heading span { display: inline-block; color: #a63748; background: rgba(255,238,241,.82); border-radius: 999px; padding: 5px 12px; font-size: .68rem; }
.footer-brand { display: flex; justify-content: center; align-items: center; gap: 13px; margin-bottom: 26px; }.dark-symbol { color: #b58838; }.dark-symbol i { background: #f9fafc; }.footer-brand strong,.footer-brand small { display: block; }.footer-brand strong { font: 700 clamp(.95rem,1.8vw,1.1rem)/1.2 var(--font-heading); letter-spacing: .05em; }.footer-brand small { color: var(--muted); font-size: .57rem; letter-spacing: .13em; margin-top: 4px; }
.social-links { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }.social-links a { min-height: 82px; padding: 14px 18px; display: flex; align-items: center; gap: 14px; border: 1px solid rgba(29,48,83,.14); border-radius: 16px; background: white; transition: .2s; }.social-links a:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(24,45,80,.08); }.social-icon { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; color: white; font-weight: 900; }.line { background: #43b72a; font-size: .56rem; }.facebook { background: #3974bd; font-size: clamp(1.45rem,3vw,1.8rem); font-family: var(--font-body); }.tiktok { background: #07090d; font-size: 1.3rem; }.social-links b,.social-links small { display: block; }.social-links b { font-size: .8rem; }.social-links small { color: var(--muted); font-size: .65rem; }.social-links i { margin-left: auto; color: #be8f36; font-style: normal; }.copyright { margin: 25px 0 0; text-align: center; color: #8992a6; font-size: .62rem; }
.mobile-book { display: none; }

.modal[hidden],.lightbox[hidden] { display: none; }.modal,.lightbox { position: fixed; z-index: 300; inset: 0; display: grid; place-items: center; padding: 22px; }.modal-backdrop,.lightbox-backdrop { position: absolute; inset: 0; border: 0; background: rgba(1,5,18,.79); backdrop-filter: blur(8px); }.modal-panel { width: min(680px,100%); max-height: min(780px,90vh); overflow: auto; position: relative; padding: 42px; border: 1px solid var(--gold); border-radius: 24px; background: linear-gradient(145deg,#0b2e66,#06142f); box-shadow: 0 30px 80px rgba(0,0,0,.55); }.modal-close,.lightbox-close { position: absolute; top: 14px; right: 16px; width: 38px; height: 38px; border: 1px solid rgba(225,184,95,.5); border-radius: 50%; background: rgba(2,9,28,.65); color: white; cursor: pointer; font-size: 1.5rem; }.modal-eyebrow { color: var(--gold); font-size: .68rem; letter-spacing: .17em; font-weight: 800; }.modal-panel h2 { color: var(--gold-light); font-size: 2.25rem; font-weight: 400; line-height: 1.2; margin-bottom: 14px; }.modal-content { color: #dbe4f4; font-size: .86rem; }.modal-content h3 { color: white; font-family: inherit; font-size: 1rem; margin: 22px 0 8px; }.modal-content ul { padding-left: 20px; }.modal-content li { margin: 5px 0; }.price-table { width: 100%; border-collapse: collapse; margin: 14px 0 20px; font-size: .75rem; }.price-table th,.price-table td { border: 1px solid rgba(225,184,95,.28); padding: 9px; text-align: left; }.price-table th { color: var(--gold-light); background: rgba(225,184,95,.08); }.modal-book { margin-top: 16px; }
.lightbox figure { position: relative; z-index: 1; margin: 0; padding: 20px 20px 14px; border-radius: 20px; background: white; color: var(--ink); }.lightbox figure img { max-height: 76vh; border-radius: 12px; }.lightbox figcaption { text-align: center; margin-top: 10px; font-weight: 800; }.lightbox-close { background: white; color: var(--ink); border-color: #ddd; top: -12px; right: -12px; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s ease,transform .65s ease; }.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 1040px) {
  .main-nav { gap: 17px; }.main-nav a { font-size: .82rem; }.hero-inner { grid-template-columns: .92fr 1.08fr; }.hero-character { width: 135%; }.special-grid { grid-template-columns: repeat(4,1fr); }.wallpaper-intro { grid-template-columns: 1fr 1fr; }.energy-panel { grid-column: 1/-1; }.energy-panel ul { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; }.energy-panel li { display: block; text-align: center; }.energy-panel li > span { margin: auto auto 6px; }.course-grid { grid-template-columns: repeat(2,1fr); }.intention-bar { grid-template-columns: repeat(3,1fr); padding: 24px; }.intention-title { grid-column: 1/-1; padding-right: 0; text-align: center; }
}

@media (max-width: 780px) {
  body { padding-bottom: 22px; } .nav-shell { width: min(calc(100% - 26px),var(--max)); min-height: 68px; }.brand-symbol { width: 34px; height: 34px; }.brand-copy strong { font-size: .82rem; }.brand-copy small { font-size: .46rem; }.menu-toggle { display: block; }.main-nav { position: absolute; top: 68px; left: 13px; right: 13px; padding: 16px; display: none; flex-direction: column; align-items: stretch; gap: 4px; border: 1px solid rgba(225,184,95,.55); border-radius: 16px; background: rgba(3,9,29,.97); box-shadow: var(--shadow); }.main-nav.open { display: flex; }.main-nav > a { padding: 13px 12px; }.nav-book { margin-top: 8px; }.hero { min-height: 780px; padding-top: 68px; padding-bottom: 24px; background-position: 63% top; }.hero-inner { min-height: 730px; grid-template-columns: 1fr; align-content: start; }.hero-copy { padding: 65px 0 0; }.hero h1 { font-size: clamp(3.1rem,15vw,5rem); }.hero-lead { max-width: 320px; }.hero-visual { position: absolute; right: -170px; bottom: -12px; width: 660px; height: 540px; opacity: .92; }.hero-character { width: 640px; }.trust-row { display: none; }.service-shell { margin-top: 20px; padding: 28px 18px 22px; border-radius: 25px; }.reading-grid { grid-template-columns: repeat(2,1fr); gap: 34px 12px; }.reading-card { min-height: 215px; }.special-services { padding-top: 30px; }.section-heading { gap: 10px; }.section-heading h2 { font-size: 1.45rem; white-space: normal; }.wallpaper-section { padding-top: 50px; }.wallpaper-intro { grid-template-columns: 1fr; }.wallpaper-copy { text-align: center; }.feature-list { width: fit-content; margin-left: auto; margin-right: auto; text-align: left; }.phone-stage { min-height: 420px; }.energy-panel ul { grid-template-columns: repeat(2,1fr); }.wallpaper-showcase { grid-template-columns: 1fr; }.wallpaper-gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }.wallpaper-card { flex: 0 0 132px; scroll-snap-align: start; }.custom-wallpaper { text-align: center; }.custom-orbit { display: none; }.custom-wallpaper .btn { width: 100%; }.course-grid { grid-template-columns: 1fr; }.course-card { display: flex; flex-direction: column; }.course-image { height: auto; aspect-ratio: 4 / 3; align-self: start; }.course-body { min-height: 210px; }.courses { padding-bottom: 32px; }.level { margin-top: 0; }.social-links { grid-template-columns: 1fr; }.footer-brand { justify-content: flex-start; }.site-footer::before { top: -170px; height: 200px; }.mobile-book { position: static; width: calc(100% - 24px); margin: 14px auto 0; min-height: 52px; border-radius: 999px; background: linear-gradient(135deg,#f8dc8e,#d99d3f); color: #111b3b; display: flex; align-items: center; justify-content: center; gap: 28px; font-weight: 900; box-shadow: 0 8px 28px rgba(0,0,0,.3); }.modal-panel { padding: 36px 22px 25px; }.modal-panel h2 { font-size: 1.8rem; }
}

@media (max-width: 480px) {
  .hero-actions .btn { width: 100%; }.hero-visual { right: -245px; opacity: .75; }.reading-grid { grid-template-columns: 1fr; }.reading-card { min-height: 205px; }.energy-panel ul { grid-template-columns: 1fr 1fr; }.intention-bar { width: calc(100% - 24px); grid-template-columns: repeat(2,1fr); gap: 16px 10px; padding: 22px 14px; }.intention-title { grid-column: 1/-1; padding-right: 0; text-align: center; }.intention-icon { width: 52px; height: 52px; flex-basis: 52px; }.intention-icon svg { width: 26px; height: 26px; }.intention-label { font-size: .95rem; }.course-card { grid-template-columns: 1fr; }.course-image { height: auto; aspect-ratio: 4 / 3; }.course-body { min-height: 210px; }.level { margin-top: -36px; }.stars-rating { display: none; }.booking { padding-left: 24px; padding-right: 24px; }
}

/* Special-service static grid */
.special-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 1260px;
  margin: 0 auto;
}

.special-card {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 6px 10px 10px;
}

.special-card h3 {
  flex-grow: 0;
  color: var(--gold-light);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: normal;
  word-break: keep-all;
}

.special-card p {
  flex-grow: 1;
  min-height: 0;
  color: #DCE6F7;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: normal;
  word-break: keep-all;
}

@media (max-width: 1024px) {
  .special-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .special-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .special-card {
    min-height: 280px;
  }

  .special-card h3 {
    font-size: 15px;
  }

  .special-card p {
    font-size: 13px;
  }
}

/* Mobile navigation and hero flow */
@media (max-width: 768px) {
  .site-header { min-height: 82px; }
  .nav-shell { min-height: 82px; width: min(calc(100% - 40px), var(--max)); }
  .menu-toggle { display: block; flex: 0 0 46px; }
  .main-nav,
  .detail-page .main-nav { position: absolute; top: 82px; left: 20px; right: 20px; display: none; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px; border: 1px solid rgba(225,184,95,.55); border-radius: 16px; background: rgba(3,9,29,.98); box-shadow: var(--shadow); }
  .main-nav.open,
  .detail-page .main-nav.open { display: flex; }
  .main-nav > a,
  .detail-page .main-nav > a,
  .main-nav > a.nav-book { width: 100%; box-sizing: border-box; margin: 0; padding: 12px 14px; border-radius: 10px; font-size: .88rem; line-height: 1.4; }
  .main-nav > a.nav-book { background: transparent; color: #fff4d3; box-shadow: none; }
  .hero { min-height: auto; padding: 112px 0 48px; background-position: center top; }
  .hero-inner { width: min(calc(100% - 40px), var(--max)); min-height: auto; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero-copy { order: 1; padding: 0; position: static; }
  .hero h1 { font-size: clamp(42px, 12vw, 58px); line-height: 1.1; }
  .hero-lead { max-width: none; font-size: clamp(17px, 4.5vw, 19px); line-height: 1.65; }
  .hero-actions { flex-direction: column; gap: 12px; margin-top: 24px; }
  .hero-actions .btn { width: 100%; min-height: 56px; box-sizing: border-box; }
  .hero-visual { order: 2; position: relative; right: auto; bottom: auto; width: 100%; height: auto; min-height: 0; margin: 26px 0 0; display: flex; justify-content: center; opacity: 1; }
  .hero-character { position: relative; width: 100%; max-width: 560px; height: auto; max-height: none; object-fit: contain; object-position: center bottom; }
  .service-card, .service-wide { padding: 22px 20px; }
  .detail-page .main-nav { flex-wrap: nowrap; }
  .site-footer .footer-inner { grid-template-columns: 1fr; gap: 20px; }
  html, body { overflow-x: hidden; }
}

/* Light blue-gray wallpaper section only */
html { scroll-behavior: smooth; }
#wallpapers { scroll-margin-top: 100px; }
.wallpaper-section { background: linear-gradient(180deg, #EDF2F7 0%, #DCE8F3 100%); color: #10264A; }
.wallpaper-section::before { background: linear-gradient(180deg, rgba(3,23,56,.22) 0, rgba(237,242,247,.06) 90px, rgba(220,232,243,.08) 100%); }
.wallpaper-section .wallpaper-copy h2, .wallpaper-section .mini-heading h3, .wallpaper-section .energy-panel h3 { color: #10264A; }
.wallpaper-section .large-copy, .wallpaper-section .feature-list li, .wallpaper-section .wallpaper-card > span { color: #53657C; }
.wallpaper-section .wallpaper-gallery-wrap { border-color: #B9C9D9; background: rgba(248,250,253,.72); box-shadow: 0 12px 30px rgba(47,76,109,.12); }
.wallpaper-section .wallpaper-card img { box-shadow: 0 10px 22px rgba(47,76,109,.18); }
.wallpaper-section .energy-panel { border-color: #B9C9D9; background: #F8FAFD; color: #10264A; box-shadow: 0 10px 24px rgba(47,76,109,.12); }
.wallpaper-section .energy-panel li > span { background: #EDF2F7; color: #C99B45; box-shadow: none; }
.wallpaper-section .custom-wallpaper { border-color: #B9C9D9; background: #F8FAFD; box-shadow: 0 10px 24px rgba(47,76,109,.12); }
.wallpaper-section .custom-wallpaper h3, .wallpaper-section .custom-wallpaper p:not(.eyebrow) { color: #10264A; }
.wallpaper-section .custom-wallpaper .eyebrow, .wallpaper-section .feature-list li::before, .wallpaper-section .mini-heading span { color: #C99B45; }
.wallpaper-section .custom-wallpaper .btn, .wallpaper-section .gallery-btn { background: #245487; border-color: #245487; color: #fff; }
.wallpaper-section .intention-bar { border-color: #B9C9D9; background: rgba(248,250,253,.72); }
.wallpaper-section .intention-title, .wallpaper-section .intention-label { color: #10264A; }
.wallpaper-section .intention-icon { border-color: #C99B45; color: #C99B45; background: #F8FAFD; box-shadow: none; }
@media (max-width: 768px) { #wallpapers { scroll-margin-top: 82px; } .wallpaper-section { padding-left: 20px; padding-right: 20px; } .wallpaper-gallery-wrap { padding-left: 12px; padding-right: 12px; } }

/* Home reference alignment and high-resolution asset use */
.special-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.wallpaper-placeholder { width: 100%; aspect-ratio: 9 / 16; display: grid; place-items: center; border-radius: 10px; border: 1px solid rgba(225,184,95,.42); background: radial-gradient(circle at 50% 28%,rgba(75,145,228,.48),rgba(3,17,48,.94) 70%); color: var(--gold-light); text-align: center; }
.wallpaper-placeholder span { font: 600 clamp(.85rem,1.8vw,1.1rem)/1.4 var(--font-body); letter-spacing: .08em; }
.phone-placeholder { height: 100%; border: 0; border-radius: 22px; }
@media (max-width: 780px) {
  .hero { background-image: linear-gradient(90deg,rgba(3,9,29,.5),rgba(3,9,29,.12)), url("assets/generated-assets-2k/site-cosmic-mobile-1440x2560.webp"); background-position: center top; background-size: cover; }
  .special-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .special-art { width: min(126px,100%); }
  .hero-visual { right: -120px; width: 560px; height: 540px; }
  .hero-character { width: 560px; }
}

/* Final wallpaper gallery mobile sizing */
@media (max-width: 768px) {
  .hero-visual { position: relative; right: auto; bottom: auto; width: 100%; height: auto; margin-top: 26px; opacity: 1; }
  .hero-character { width: 100%; max-width: 560px; height: auto; }
  .wallpaper-gallery { display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; padding: 0 2px 12px; }
  .wallpaper-card { flex: 0 0 clamp(158px, 44vw, 210px); scroll-snap-align: start; }
  .wallpaper-card > span { font-size: .78rem; line-height: 1.45; }
  .wallpaper-showcase { grid-template-columns: 1fr; }
  .custom-wallpaper { width: 100%; box-sizing: border-box; min-height: 220px; }
  .current-wallpaper-link img { width: min(100%, 230px); height: auto; }
  .wallpaper-showcase-image img { width: 100%; max-width: 100%; height: auto; object-fit: contain; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }

/* Reference typography and overflow safeguards */
:where(.nav-shell > *, .main-nav > *, .hero-inner > *, .hero-actions > *, .brand-copy, .hero-copy, .section-heading, .reading-grid > *, .special-scroller > *, .wallpaper-intro > *, .wallpaper-showcase > *, .wallpaper-gallery > *, .course-grid > *, .social-links > *, .energy-panel li > *, .footer-brand > *, .modal-panel) { min-width: 0; }
:where(h1, h2, h3, p, li, a, button, strong, small) { overflow-wrap: anywhere; }

/* Shared service, course and wallpaper detail template */
.detail-page { background: var(--navy-900); min-height: 100vh; }
.detail-breadcrumb { width: min(calc(100% - 40px),var(--max)); margin: 0 auto; padding: 26px 0 8px; display: flex; gap: 10px; flex-wrap: wrap; color: #cbd6eb; font-size: .9rem; }
.detail-breadcrumb a { color: var(--gold-light); }
.detail-breadcrumb strong { color: var(--cream); font-weight: 500; }
.detail-main { width: min(calc(100% - 40px),var(--max)); margin: 0 auto; padding-bottom: 70px; }
.service-hero { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr); gap: 38px; align-items: center; padding: 42px 34px; border: 1px solid rgba(225,184,95,.65); border-radius: 28px; background: linear-gradient(135deg,rgba(8,35,82,.94),rgba(3,23,56,.94)); box-shadow: var(--shadow); }
.service-hero h1 { margin: 8px 0 16px; color: var(--gold-light); font-family: var(--font-heading); font-size: clamp(2.1rem,4.5vw,4rem); line-height: 1.2; font-weight: 500; }
.service-intro { max-width: 680px; color: var(--cream); font-size: clamp(1rem,1.5vw,1.2rem); line-height: 1.8; }
.service-facts { display: flex; gap: 14px; flex-wrap: wrap; margin: 24px 0; }
.service-facts div { min-width: 155px; padding: 13px 16px; border: 1px solid rgba(225,184,95,.42); border-radius: 14px; background: rgba(3,11,32,.3); }
.service-facts span { display: block; color: #bac8df; font-size: .82rem; }.service-facts strong { display: block; color: var(--gold-light); font-family: var(--font-heading); font-size: 1.25rem; font-weight: 500; }
.service-hero-art { display: grid; place-items: center; min-height: 280px; }.service-hero-art img { display: block; width: min(100%,300px); height: 300px; object-fit: contain; }
.service-content-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-top: 22px; }
.service-card,.service-wide { padding: 26px; border: 1px solid rgba(79,145,226,.55); border-radius: 20px; background: rgba(6,31,73,.78); box-shadow: inset 0 0 26px rgba(54,124,218,.1); }
.service-card h2,.service-wide h2 { margin: 0 0 14px; color: var(--gold-light); font-family: var(--font-heading); font-size: 1.55rem; font-weight: 500; }.service-card ul,.service-wide ul { margin: 0; padding-left: 1.35rem; }.service-card li,.service-wide li { margin: 8px 0; color: #f2f5fb; line-height: 1.65; }
.section-icon { width: 1.15em; height: 1.15em; margin-right: .45em; vertical-align: -.15em; fill: none; stroke: currentColor; stroke-width: 1.5; }
.service-wide { margin-top: 18px; }.service-wide p { color: #f2f5fb; line-height: 1.75; }.service-special { border-color: rgba(225,184,95,.55); }.related-links { display: flex; flex-wrap: wrap; gap: 10px; }.related-links a { display: inline-flex; padding: 10px 14px; border: 1px solid rgba(225,184,95,.6); border-radius: 999px; color: var(--cream); background: rgba(3,11,32,.3); }.related-links a:hover { color: var(--gold-light); border-color: var(--gold-light); }
.wallpaper-cover-placeholder { min-height: 230px; margin: 10px 0 18px; display: grid; place-items: center; align-content: center; gap: 8px; border: 1px dashed rgba(225,184,95,.7); border-radius: 18px; background: linear-gradient(150deg,rgba(16,61,121,.55),rgba(3,23,56,.9)); color: var(--gold-light); text-align: center; }.wallpaper-cover-placeholder small { color: #cbd6eb; }
@media (max-width: 780px) { .detail-main,.detail-breadcrumb { width: min(calc(100% - 26px),var(--max)); }.detail-main { padding-bottom: 40px; }.service-hero { grid-template-columns: 1fr; padding: 28px 20px; gap: 20px; }.service-hero-copy { order: 1; }.service-hero-art { order: 0; min-height: 170px; }.service-hero-art img { width: min(100%,190px); height: 190px; }.service-content-grid { grid-template-columns: 1fr; }.service-card,.service-wide { padding: 21px 18px; }.service-facts { display: grid; grid-template-columns: 1fr 1fr; }.service-facts div { min-width: 0; }.service-hero .btn { width: 100%; } }
@media (max-width: 390px) { .service-facts { grid-template-columns: 1fr; } }
.detail-page .main-nav { position: static; display: flex; flex-wrap: wrap; }
@media (max-width: 780px) { .detail-page .main-nav { position: static; display: flex; flex-direction: row; align-items: center; padding: 0; border: 0; background: transparent; box-shadow: none; } .detail-page .main-nav > a { padding: 7px 6px; font-size: .72rem; } .detail-page .menu-toggle { display: none; } }
.wallpaper-section .energy-panel, .wallpaper-section .intention-bar { display: none; }
:where(.reading-card, .special-card, .course-card, .review-card, .custom-wallpaper, .energy-panel) { height: auto; min-height: 0; }
.special-card p, .social-links a { min-height: 0; }
.section-heading h2, .course-card h3, .modal-panel h2 { white-space: normal; }
.brand-copy strong, h1, h2, h3 { font-weight: 700; }
.reading-card strong { font-family: var(--font-body); font-weight: 700; }
.eyebrow { font-weight: 500; }
.main-nav { font-size: clamp(.78rem, 1.1vw, .9rem); }
.btn, .detail-btn, .course-btn, .mobile-book { font-size: clamp(.76rem, 1.05vw, .88rem); font-weight: 700; line-height: 1.5; }
.reading-card p, .special-card p, .course-card p, .review-card p { line-height: 1.6; }
.special-scroller { grid-template-columns: repeat(8, minmax(0, 1fr)); }
@media (max-width: 1200px) { .special-scroller { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 780px) { .special-scroller { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.course-card h3 { font-size: clamp(1rem, 1.4vw, 1.12rem); }
.modal-content { line-height: 1.65; }
.price-table { table-layout: fixed; overflow-wrap: anywhere; }

@media (max-width: 780px) {
  .main-nav { font-size: .88rem; }
  .hero h1 { font-size: clamp(2.7rem, 14vw, 5rem); line-height: 1.08; }
  .section-heading h2 { font-size: clamp(1.25rem, 5vw, 1.7rem); }
  .course-card h3 { font-size: clamp(1rem, 4.5vw, 1.15rem); }
  .course-body, .reading-card { min-height: 0; }
}

/* Final mobile overrides: keep the same collapsed header on every page. */
@media (max-width: 768px) {
  .detail-page .menu-toggle { display: block; }
  .main-nav,
  .detail-page .main-nav { position: absolute; top: 82px; left: 20px; right: 20px; display: none; flex-direction: column; align-items: stretch; padding: 10px; border: 1px solid rgba(225,184,95,.55); border-radius: 16px; background: rgba(3,9,29,.98); box-shadow: var(--shadow); }
  .main-nav.open,
  .detail-page .main-nav.open { display: flex; }
  .hero-inner { min-height: auto; display: flex; flex-direction: column; }
  .hero-copy { position: static; order: 1; padding: 0; }
  .hero-actions { position: static; flex-direction: column; gap: 12px; }
  .hero-actions .btn { width: 100%; min-height: 56px; }
  .hero-visual { position: relative; right: auto; bottom: auto; order: 2; width: 100%; height: auto; margin: 26px 0 0; opacity: 1; }
  .hero-character { position: relative; width: 100%; max-width: 560px; height: auto; max-height: none; }
}

@media (max-width: 480px) {
  .section-heading { width: min(calc(100% - 28px), var(--max)); }
  .modal-panel h2 { font-size: clamp(1.45rem, 8vw, 1.8rem); }
  .price-table { font-size: clamp(.66rem, 2.8vw, .75rem); }
}

/* Single viewport background fallback until true high-resolution source files are supplied. */
html, body { max-width: 100%; overflow-x: hidden; }
body { margin: 0; min-height: 100%; background-color: #03091d; position: relative; }
body::before { content: ""; position: fixed; z-index: -2; inset: 0; pointer-events: none; background-color: #020817; background-image: linear-gradient(rgba(2,8,23,.16),rgba(2,8,23,.42)), url("assets/generated-assets-2k/site-cosmic-desktop-2560x1440.webp"); background-repeat: no-repeat; background-position: center center; background-size: cover; transform: translateZ(0); }
.courses { background: linear-gradient(180deg,rgba(3,13,36,.18),rgba(4,13,35,.48)); }
.wallpaper-section { background: linear-gradient(180deg,rgba(4,39,79,.16),rgba(5,68,125,.32) 44%,rgba(6,37,82,.24)); }
.reviews { background: rgba(238,243,250,.78); }
.booking { background: rgba(243,246,251,.78); }
.site-footer { background: #f1f4f8; }

@media (max-width: 780px) {
  body::before { background-image: linear-gradient(rgba(2,8,23,.18),rgba(2,8,23,.5)), url("assets/generated-assets-2k/site-cosmic-mobile-1440x2560.webp"); background-position: center top; background-size: cover; }
}

@media (min-width: 2049px) {
  body::before { background-image: linear-gradient(145deg,rgba(5,29,78,.94),rgba(8,47,103,.62) 48%,rgba(3,9,29,.98)); }
}

@media (max-width: 780px) {
  .compact-heading { max-width: calc(100% - 32px); margin-top: -24px; padding: 7px 16px 9px; }
  .compact-heading h2 { font-size: clamp(1.45rem,7vw,2rem); line-height: 1.4; white-space: normal; text-align: center; }
  .footer-cloud-transition { height: 80px; background-size: auto 100%,auto 100%; background-position: center top; }
}

/* Final wallpaper gallery mobile sizing */
@media (max-width: 768px) {
  .hero-visual { position: relative; right: auto; bottom: auto; width: 100%; height: auto; margin-top: 26px; opacity: 1; }
  .hero-character { width: 100%; max-width: 560px; height: auto; }
  .wallpaper-gallery { display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; padding: 0 2px 12px; }
  .wallpaper-card { flex: 0 0 clamp(158px, 44vw, 210px); scroll-snap-align: start; }
  .wallpaper-card > span { font-size: .78rem; line-height: 1.45; }
  .wallpaper-showcase { grid-template-columns: 1fr; }
  .custom-wallpaper { width: 100%; box-sizing: border-box; min-height: 220px; }
  .current-wallpaper-link img { width: min(100%, 230px); height: auto; }
}

/* Wallpaper section theme must remain isolated from the dark sections. */
#wallpapers { scroll-margin-top: 100px; background: linear-gradient(180deg, #EDF2F7 0%, #DCE8F3 100%); color: #10264A; }
#wallpapers::before { background: linear-gradient(180deg, rgba(3,23,56,.22) 0, rgba(237,242,247,.06) 90px, rgba(220,232,243,.08) 100%); }
#wallpapers .wallpaper-copy h2, #wallpapers .mini-heading h3, #wallpapers .energy-panel h3 { color: #10264A; }
#wallpapers .large-copy, #wallpapers .feature-list li, #wallpapers .wallpaper-card > span { color: #53657C; }
#wallpapers .wallpaper-gallery-wrap { border-color: #B9C9D9; background: rgba(248,250,253,.72); box-shadow: 0 12px 30px rgba(47,76,109,.12); }
#wallpapers .wallpaper-card img, #wallpapers .wallpaper-showcase-image img { box-shadow: 0 10px 22px rgba(47,76,109,.18); }
#wallpapers .energy-panel { border-color: #B9C9D9; background: #F8FAFD; color: #10264A; box-shadow: 0 10px 24px rgba(47,76,109,.12); }
#wallpapers .energy-panel li > span { background: #EDF2F7; color: #C99B45; box-shadow: none; }
#wallpapers .custom-wallpaper { border-color: #B9C9D9; background: #F8FAFD; box-shadow: 0 10px 24px rgba(47,76,109,.12); }
#wallpapers .custom-wallpaper h3, #wallpapers .custom-wallpaper p:not(.eyebrow) { color: #10264A; }
#wallpapers .custom-wallpaper .eyebrow, #wallpapers .feature-list li::before, #wallpapers .mini-heading span { color: #C99B45; }
#wallpapers .custom-wallpaper .btn, #wallpapers .gallery-btn { background: #245487; border-color: #245487; color: #fff; }
#wallpapers .intention-bar { border-color: #B9C9D9; background: rgba(248,250,253,.72); }
#wallpapers .intention-title, #wallpapers .intention-label { color: #10264A; }
#wallpapers .intention-icon { border-color: #C99B45; color: #C99B45; background: #F8FAFD; box-shadow: none; }
@media (max-width: 768px) { #wallpapers { scroll-margin-top: 82px; padding-left: 20px; padding-right: 20px; } #wallpapers .wallpaper-gallery-wrap { padding-left: 12px; padding-right: 12px; } }

/* Editorial service detail pages: light reading surface */
.detail-page { background: #F5F7FA; color: #13213D; }
.detail-page .detail-breadcrumb { color: #53657C; }
.detail-page .detail-breadcrumb a { color: #245487; }
.detail-page .detail-breadcrumb strong { color: #13213D; }
.detail-page .detail-main { width: min(calc(100% - 40px), 880px); }
.detail-page .service-hero { background: #F8FAFD; border-color: #B9C9D9; box-shadow: 0 16px 40px rgba(48,73,103,.1); }
.detail-page .service-hero h1, .detail-page .service-card h2, .detail-page .service-wide h2 { color: #13213D; }
.detail-page .service-intro, .detail-page .service-card li, .detail-page .service-wide li, .detail-page .service-wide p { color: #53657C; }
.detail-page .service-card, .detail-page .service-wide { background: #F8FAFD; border-color: #B9C9D9; box-shadow: 0 10px 28px rgba(48,73,103,.08); }
.detail-page .service-facts div { background: #EDF2F7; border-color: #B9C9D9; }
.detail-page .service-facts span { color: #53657C; }
.detail-page .service-facts strong { color: #13213D; }
.editorial-page { width: min(100%, 880px); margin: 0 auto; color: #13213D; }
.editorial-hero { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 48px; align-items: center; padding: 30px 0 58px; border-bottom: 1px solid #B9C9D9; }
.editorial-hero h1 { max-width: 760px; margin: 8px 0 24px; color: #13213D; font-size: clamp(36px, 4vw, 56px); line-height: 1.18; font-weight: 600; }
.editorial-hero .eyebrow { color: #C99B45; }
.editorial-name { margin: 0 0 6px; color: #C99B45; font-family: var(--font-heading); font-size: clamp(22px, 2vw, 28px); line-height: 1.35; font-weight: 600; }
.editorial-hero p:not(.eyebrow):not(.editorial-name), .editorial-page li, .editorial-page p { max-width: 760px; color: #53657C; font-size: 17px; line-height: 1.75; }
.editorial-hero p { margin-bottom: 16px; }
.editorial-hero img { width: 100%; height: auto; object-fit: contain; }
.editorial-page h2 { margin: 0 0 24px; color: #13213D; font-family: var(--font-heading); font-size: clamp(27px, 3vw, 36px); line-height: 1.3; font-weight: 600; }
.editorial-page h3 { margin: 0 0 14px; color: #13213D; font-family: var(--font-heading); font-size: clamp(21px, 2vw, 25px); line-height: 1.4; font-weight: 600; }
.editorial-page h4 { margin: 0 0 12px; color: #245487; font-family: var(--font-heading); font-size: 20px; line-height: 1.45; font-weight: 600; }
.editorial-highlights, .editorial-options, .editorial-timeline, .editorial-sessions { padding: 52px 0; border-bottom: 1px solid #B9C9D9; }
.editorial-page ul { margin: 0; padding-left: 1.35rem; }
.editorial-page li { margin: 0 0 12px; }
.editorial-highlights li::marker, .editorial-page li::marker { color: #C99B45; }
.editorial-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.editorial-option-grid article { padding: 26px 0 8px; border-top: 2px solid #C99B45; }
.editorial-index, .timeline-label { display: inline-block; margin-bottom: 12px; color: #C99B45; font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.editorial-timeline > article { position: relative; padding: 0 0 38px 34px; border-left: 1px solid #C99B45; }
.editorial-timeline > article::before { content: ""; position: absolute; left: -5px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: #C99B45; }
.editorial-timeline > article:last-child { padding-bottom: 0; border-left-color: transparent; }
.editorial-sessions .editorial-session { padding: 26px 0 34px; border-top: 2px solid #C99B45; }
.editorial-sessions .editorial-session + .editorial-session { margin-top: 32px; }
.editorial-sessions .editorial-session article { padding: 20px 0 4px 24px; border-left: 1px solid #B9C9D9; }
.editorial-price { position: relative; margin: 52px 0; padding: 32px; border: 2px solid #C99B45; border-radius: 20px; background: linear-gradient(135deg, #FFF9EA, #EDF2F7); box-shadow: 0 12px 28px rgba(48,73,103,.1); }
.editorial-badge { display: inline-flex; padding: 6px 12px; border-radius: 999px; background: #245487; color: #fff; font-size: 13px; font-weight: 700; }
.editorial-price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 22px 0 16px; }
.editorial-price-grid div { display: flex; flex-direction: column; gap: 5px; }
.editorial-price-grid span, .editorial-price > div > span { color: #53657C; font-size: 15px; }
.editorial-price strong { color: #245487; font-family: var(--font-heading); font-size: clamp(28px, 3vw, 40px); line-height: 1.2; }
.editorial-price p { margin: 0 0 24px; }
.editorial-price .btn { width: fit-content; }
.editorial-related { padding: 8px 0 56px; }
.editorial-related h2 { font-size: clamp(25px, 2.5vw, 32px); }
.editorial-related > div { display: flex; flex-wrap: wrap; gap: 12px; }
.editorial-related a { padding: 10px 16px; border: 1px solid #B9C9D9; border-radius: 999px; color: #245487; background: #F8FAFD; }

@media (max-width: 768px) {
  .detail-page .detail-main { width: min(calc(100% - 40px), 880px); }
  .editorial-hero { grid-template-columns: 1fr; gap: 24px; padding: 20px 0 44px; }
  .editorial-hero > img { order: -1; width: min(100%, 190px); margin: 0 auto; }
  .editorial-hero h1 { font-size: clamp(30px, 8vw, 40px); line-height: 1.2; }
  .editorial-hero p:not(.eyebrow):not(.editorial-name), .editorial-page li, .editorial-page p { font-size: 16px; line-height: 1.7; }
  .editorial-page h2 { font-size: clamp(25px, 7vw, 30px); margin-bottom: 20px; }
  .editorial-page h3 { font-size: 20px; }
  .editorial-highlights, .editorial-options, .editorial-timeline, .editorial-sessions { padding: 44px 0; }
  .editorial-option-grid, .editorial-price-grid { grid-template-columns: 1fr; gap: 22px; }
  .editorial-price { margin: 44px 0; padding: 24px 20px; }
  .editorial-price .btn { width: 100%; }
  .editorial-related > div { display: grid; grid-template-columns: 1fr; }
  .editorial-related a { min-height: 48px; }
}

/* Central typography scale */
body { font-size: var(--text-base); line-height: 1.7; }
.hero-copy { max-width: 620px; }
.hero h1 { font-size: var(--text-hero); line-height: 1.12; letter-spacing: -.01em; font-weight: 500; font-family: "Sarabun", sans-serif; margin-bottom: 24px; }
.hero-lead { font-size: clamp(18px, 1.35vw, 20px); line-height: 1.7; margin-bottom: 28px; }
.section-heading h2, .wallpaper-copy h2 { font-size: var(--text-section-title); line-height: 1.25; }
.reading-card h3, .special-card h3 { font-size: var(--text-card-title); line-height: 1.35; margin-bottom: 12px; }
.reading-card p, .special-card p, .course-card p, .review-card p { font-size: var(--text-sm); line-height: 1.7; margin-bottom: 16px; }
.reading-card strong { font-size: clamp(20px, 2vw, 24px); margin-bottom: 18px; }
.btn, .detail-btn, .course-btn, .mobile-book { min-height: 52px; padding-left: 24px; padding-right: 24px; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.3; font-weight: 600; }
.main-nav { font-size: clamp(15px, 1.1vw, 16px); line-height: 1.5; }
.detail-main { font-size: 17px; }
.service-hero h1 { font-size: clamp(40px, 4.2vw, 58px); line-height: 1.15; }
.service-intro, .service-card p, .service-wide p, .service-card li, .service-wide li { max-width: 65ch; font-size: 17px; line-height: 1.7; }
.service-card h2, .service-wide h2 { font-size: clamp(30px, 2.8vw, 38px); line-height: 1.25; margin-bottom: 20px; }
.service-hero h3, .service-card h3, .service-wide h3 { font-size: clamp(21px, 1.8vw, 25px); line-height: 1.35; }
.service-facts strong { font-size: clamp(20px, 2vw, 24px); }
.related-links { gap: 14px; }
.site-footer p, .site-footer a { line-height: 1.7; }
.special-services, #wallpapers, .courses, .reviews, .booking { padding-block: 72px 80px; }

@media (max-width: 768px) {
  :root {
    --text-base: 16px;
    --text-lg: 18px;
    --text-card-title: 21px;
    --text-section-title: clamp(29px, 8vw, 36px);
    --text-hero: clamp(40px, 11vw, 50px);
  }
  body { font-size: var(--text-base); line-height: 1.7; }
  .hero-inner { width: min(calc(100% - 48px), var(--max)); }
  .hero h1 { font-size: var(--text-hero); line-height: 1.13; letter-spacing: -.015em; margin-bottom: 22px; }
  .hero-lead { font-size: 17px; line-height: 1.7; margin-bottom: 24px; }
  .section-heading { margin-bottom: 20px; }
  .section-heading h2, .wallpaper-copy h2 { font-size: var(--text-section-title); line-height: 1.3; }
  .reading-card h3, .special-card h3 { font-size: 20px; line-height: 1.4; margin-bottom: 12px; }
  .reading-card p, .special-card p, .course-card p, .review-card p { font-size: 15px; line-height: 1.7; margin-bottom: 16px; }
  .reading-card strong { font-size: 22px; margin-bottom: 18px; }
  .main-nav { font-size: 17px; line-height: 1.5; }
  .main-nav > a, .detail-page .main-nav > a { min-height: 48px; display: flex; align-items: center; }
  .detail-main { font-size: 16px; }
  .service-hero h1 { font-size: 40px; line-height: 1.15; }
  .service-intro, .service-card p, .service-wide p, .service-card li, .service-wide li { font-size: 16px; line-height: 1.75; }
  .service-card h2, .service-wide h2 { font-size: clamp(26px, 7vw, 32px); line-height: 1.3; margin-bottom: 20px; }
  .service-card, .service-wide { padding: 22px 20px; }
  .related-links { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .related-links a { min-height: 48px; align-items: center; }
  .site-footer { padding-top: 48px; padding-bottom: 48px; }
  .site-footer p, .site-footer a { font-size: 16px; line-height: 1.7; }
  .special-services, #wallpapers, .courses, .reviews, .booking { padding-block: 52px 64px; }
  .reading-card .detail-btn, .special-card > a { width: 100%; }
}

/* Homepage service card buttons: stable horizontal layout at every viewport. */
.reading-card .detail-btn,
.special-card > a {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 24px);
  min-width: 120px;
  height: 40px;
  min-height: 40px;
  padding: 0 16px;
  margin: 16px auto;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  writing-mode: horizontal-tb;
  flex-shrink: 0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.reading-card .detail-btn span,
.special-card > a span {
  margin-left: auto;
  color: #081B3A;
}

.special-scroller {
  display: flex;
  grid-template-columns: none;
  overflow-x: auto;
  gap: 14px;
}

.special-card {
  flex: 0 0 210px;
  min-width: 210px;
}

@media (max-width: 768px) {
  .special-scroller {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .special-card {
    flex: initial;
    min-width: 0;
  }

  .reading-card .detail-btn,
  .special-card > a {
    width: calc(100% - 24px);
  }
}

@media (max-width: 480px) {
  .special-scroller {
    grid-template-columns: 1fr;
  }
}

/* Detail-page visual correction: preserve source-image colors and use the original sans Thai headings. */
body.detail-page::before,
body.detail-page::after,
body.detail-page > main::before,
body.detail-page > main::after,
body.detail-page .detail-main::before,
body.detail-page .detail-main::after,
body.detail-page .editorial-page::before,
body.detail-page .editorial-page::after,
body.detail-page .service-detail::before,
body.detail-page .service-detail::after,
body.detail-page .course-detail::before,
body.detail-page .course-detail::after {
  display: none;
  content: none;
}

body.detail-page img {
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
}

body.detail-page h1,
body.detail-page h2,
body.detail-page h3,
body.detail-page h4,
body.detail-page .editorial-name,
body.detail-page .service-facts strong,
body.detail-page .editorial-price strong,
body.detail-page .brand-copy strong,
body.detail-page .footer-brand strong {
  font-family: var(--font-body);
  word-break: keep-all;
  overflow-wrap: normal;
}

body.detail-page .service-hero h1,
body.detail-page .editorial-hero h1,
body.detail-page .pof-article-hero h1 { font-size: clamp(36px, 4vw, 44px); line-height: 1.4; font-weight: 700; }
body.detail-page .editorial-page h2,
body.detail-page .pof-article h2,
body.detail-page .service-card h2,
body.detail-page .service-wide h2 { font-size: clamp(28px, 3vw, 34px); line-height: 1.4; font-weight: 700; }
body.detail-page .editorial-page h3,
body.detail-page .pof-article h3,
body.detail-page .service-card h3,
body.detail-page .service-wide h3 { font-size: clamp(20px, 2vw, 24px); line-height: 1.45; font-weight: 700; }

@media (max-width: 768px) {
  body.detail-page .service-hero h1,
  body.detail-page .editorial-hero h1,
  body.detail-page .pof-article-hero h1 { font-size: clamp(30px, 8vw, 34px); line-height: 1.4; }
  body.detail-page .editorial-page h2,
  body.detail-page .pof-article h2,
  body.detail-page .service-card h2,
  body.detail-page .service-wide h2 { font-size: clamp(24px, 7vw, 28px); }
  body.detail-page .editorial-page h3,
  body.detail-page .pof-article h3,
  body.detail-page .service-card h3,
  body.detail-page .service-wide h3 { font-size: clamp(19px, 5vw, 22px); }
}

/* Verbatim reading pages: only Markdown presentation changes; copy remains source text. */
body.detail-page .verbatim-service-page {
  width: min(100%, 880px);
  margin: 0 auto;
  padding: 48px 0 80px;
  color: #13213D;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
}

body.detail-page .verbatim-service-page h1,
body.detail-page .verbatim-service-page h2 {
  color: #13213D;
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.4;
  word-break: keep-all;
  overflow-wrap: normal;
}

body.detail-page .verbatim-service-page h1 { margin: 10px 0 28px; font-size: clamp(36px, 4vw, 44px); }
body.detail-page .verbatim-service-page h2 { margin: 36px 0 14px; font-size: clamp(28px, 3vw, 34px); }
body.detail-page .verbatim-service-page h3,
body.detail-page .verbatim-service-page p,
body.detail-page .verbatim-service-page li { color: #13213D; font-family: var(--font-body); }
body.detail-page .verbatim-service-page p { max-width: 760px; margin: 0 0 18px; }
body.detail-page .verbatim-service-page .verbatim-service-name { margin-bottom: 0; color: #C99B45; font-size: 20px; font-weight: 700; }
body.detail-page .verbatim-service-page .verbatim-highlight { color: #13213D; font-weight: 700; }
body.detail-page .verbatim-service-page .verbatim-price { margin-top: 28px; color: #13213D; font-weight: 700; }
body.detail-page .verbatim-service-page ul { max-width: 760px; margin: 0 0 18px; padding-left: 1.4rem; }
body.detail-page .verbatim-service-page .verbatim-single-item { list-style: none; margin: 22px 0 0; padding-left: 0; }
body.detail-page .verbatim-service-page .verbatim-single-item li { font-weight: 700; }

@media (max-width: 768px) {
  body.detail-page .verbatim-service-page { padding: 32px 0 56px; font-size: 16px; line-height: 1.7; }
  body.detail-page .verbatim-service-page h1 { margin-bottom: 22px; font-size: clamp(30px, 8vw, 34px); }
  body.detail-page .verbatim-service-page h2 { margin-top: 30px; font-size: clamp(24px, 7vw, 28px); }
  body.detail-page .verbatim-service-page .verbatim-service-name { font-size: 18px; }
}

/* Homepage wallpaper principles: readable SEO content before the month chooser. */
.wallpaper-principles {
  max-width: 1180px;
  margin: 34px auto 8px;
  padding: 26px;
  border-radius: 22px;
  background: #EDF2F7;
  color: #13213D;
}

.wallpaper-principles-heading {
  max-width: 760px;
  margin: 0 auto 24px;
  text-align: center;
}

.wallpaper-principles-heading h2 {
  margin: 6px 0 10px;
  color: #13213D;
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.8vw, 30px);
  line-height: 1.3;
}

.wallpaper-principles-heading p,
.wallpaper-info-body p,
.wallpaper-info-body li {
  color: #13213D;
  font-size: 16px;
  line-height: 1.75;
}

.wallpaper-principles-heading p {
  margin: 0;
}

.wallpaper-principles-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.wallpaper-info-card {
  min-width: 0;
  padding: 20px 22px;
  border: 1px solid #B9C9D9;
  border-radius: 18px;
  background: #F8FAFD;
  box-shadow: 0 8px 22px rgba(47,76,109,.1);
}

.wallpaper-info-card > summary,
.wallpaper-info-subsection > summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #13213D;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.45;
  list-style: none;
}

.wallpaper-info-card > summary::-webkit-details-marker,
.wallpaper-info-subsection > summary::-webkit-details-marker {
  display: none;
}

.wallpaper-info-card > summary::after,
.wallpaper-info-subsection > summary::after {
  content: "+";
  flex: 0 0 auto;
  margin-left: auto;
  color: #C99B45;
  font-size: 20px;
  line-height: 1;
}

.wallpaper-info-card[open] > summary::after,
.wallpaper-info-subsection[open] > summary::after {
  content: "−";
}

.wallpaper-info-icon {
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
  margin-top: 1px;
  fill: none;
  stroke: #C99B45;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.wallpaper-info-body {
  padding-top: 18px;
}

.wallpaper-info-body p {
  margin: 0 0 16px;
}

.wallpaper-info-body ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.wallpaper-info-body li::marker {
  color: #C99B45;
}

.wallpaper-info-body strong {
  color: #13213D;
  font-weight: 700;
}

.wallpaper-info-subsection {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid #B9C9D9;
}

.wallpaper-info-subsection > div {
  padding: 14px 0 0 31px;
}

.wallpaper-info-note {
  margin-top: 24px !important;
  padding: 14px 16px;
  border-left: 3px solid #C99B45;
  background: #EDF2F7;
  font-weight: 700;
}

@media (max-width: 768px) {
  .wallpaper-principles {
    margin-top: 26px;
    padding: 18px 14px;
  }

  .wallpaper-principles-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .wallpaper-info-card {
    padding: 18px 16px;
  }

  .wallpaper-principles-heading h2 {
    font-size: 30px;
  }

  .wallpaper-principles-heading p,
  .wallpaper-info-body p,
  .wallpaper-info-body li {
    font-size: 16px;
  }
}

/* Compact cards scoped to the homepage's static special-service grid. */
.special-services .special-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.special-services .special-grid > .special-card {
  height: auto;
  min-height: 0;
  min-width: 0;
  padding: 20px 24px;
  gap: 12px;
  cursor: pointer;
}

.special-services .special-grid .special-art {
  width: 50%;
  max-width: 180px;
  height: auto;
  flex-shrink: 0;
  margin: 0 auto;
}

.special-services .special-grid .special-art img {
  height: auto;
  object-fit: contain;
}

.special-services .special-grid > .special-card:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

.special-services .special-grid h3 {
  margin: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

.special-services .special-grid p {
  flex-grow: 0;
  margin: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 1024px) {
  .special-services .special-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .special-services .special-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Final special-service carousel cascade. */
.special-carousel {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 14px;
  max-width: 1260px;
  margin: 0 auto;
}

.special-scroller {
  display: flex;
  grid-template-columns: none;
  gap: 18px;
  max-width: none;
  margin: 0;
  padding: 4px 2px 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.special-scroller::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.special-card {
  display: flex;
  flex: 0 0 195px;
  flex-direction: column;
  min-width: 195px;
  min-height: 330px;
  padding: 10px;
  scroll-snap-align: start;
}

.special-card h3 {
  flex-grow: 0;
  color: var(--gold-light);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: normal;
  word-break: keep-all;
}

.special-card p {
  flex-grow: 1;
  min-height: 0;
  color: #DCE6F7;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: normal;
  word-break: keep-all;
}

.special-card > a {
  display: flex;
  flex: 0 0 40px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 24px);
  min-width: 120px;
  height: 40px;
  min-height: 40px;
  margin: auto auto 0;
  padding: 0 16px;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  writing-mode: horizontal-tb;
  flex-shrink: 0;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.special-carousel-arrow {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: #F8D77A;
  color: #081B3A;
  cursor: pointer;
  font-size: 30px;
  line-height: 1;
}

.special-carousel-arrow:hover:not(:disabled) {
  background: #FFE9A5;
}

.special-carousel-arrow:disabled {
  cursor: not-allowed;
  opacity: .38;
}

@media (max-width: 1024px) {
  .special-card {
    flex-basis: 195px;
    min-width: 195px;
  }
}

@media (max-width: 767px) {
  .special-carousel {
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 8px;
  }

  .special-scroller {
    display: flex;
    gap: 12px;
  }

  .special-card {
    flex-basis: 82%;
    min-width: 82%;
    min-height: 350px;
  }

  .special-card h3 {
    font-size: 18px;
  }

  .special-card p {
    font-size: 15px;
  }

  .special-carousel-arrow {
    width: 34px;
    height: 34px;
    font-size: 24px;
  }
}

/* Light reading surface for every service-detail page; the header remains dark. */
body.detail-page {
  background: #F5F7FA;
  color: #13213D;
}

body.detail-page::before {
  display: none;
}

.detail-page > .detail-breadcrumb,
.detail-page > .detail-main,
.detail-page .editorial-page {
  background: #F5F7FA;
}

.detail-page > .detail-breadcrumb {
  color: #526078;
}

.detail-page > .detail-breadcrumb a {
  color: #245487;
}

.detail-page > .detail-breadcrumb strong,
.detail-page .editorial-page,
.detail-page .editorial-page h1,
.detail-page .editorial-page h2,
.detail-page .editorial-page h3,
.detail-page .service-hero h1,
.detail-page .service-card h2,
.detail-page .service-wide h2 {
  color: #13213D;
  opacity: 1;
  visibility: visible;
}

.detail-page .editorial-page p,
.detail-page .editorial-page li,
.detail-page .service-intro,
.detail-page .service-card li,
.detail-page .service-wide p,
.detail-page .service-wide li,
.detail-page .detail-main {
  color: #526078;
  opacity: 1;
  visibility: visible;
}

.detail-page .editorial-hero,
.detail-page .editorial-highlights,
.detail-page .editorial-options,
.detail-page .editorial-timeline,
.detail-page .editorial-sessions,
.detail-page .editorial-related,
.detail-page .service-content-grid {
  background: #F5F7FA;
}

.detail-page .editorial-hero,
.detail-page .editorial-highlights,
.detail-page .editorial-options,
.detail-page .editorial-timeline,
.detail-page .editorial-sessions {
  border-color: #B9C9D9;
}

.detail-page .editorial-hero .eyebrow,
.detail-page .editorial-name,
.detail-page .editorial-index,
.detail-page .timeline-label,
.detail-page .editorial-highlights li::marker,
.detail-page .editorial-page li::marker {
  color: #C99B45;
  opacity: 1;
}

.detail-page .editorial-hero > img,
.detail-page .service-hero-art {
  background: #EAF2F9;
  border: 1px solid #B9C9D9;
  border-radius: 20px;
}

.detail-page .editorial-hero > img {
  padding: 14px;
  opacity: .2;
}

.detail-page .service-hero-art img {
  opacity: .2;
}

.detail-page .service-hero,
.detail-page .service-card,
.detail-page .service-wide {
  background: #F8FAFD;
  border-color: #B9C9D9;
  box-shadow: 0 10px 28px rgba(48,73,103,.08);
}

.detail-page .service-facts div {
  background: #EDF2F7;
  border-color: #B9C9D9;
}

.detail-page .service-facts span,
.detail-page .editorial-price-grid span {
  color: #526078;
  opacity: 1;
}

.detail-page .service-facts strong,
.detail-page .editorial-price strong {
  color: #13213D;
  opacity: 1;
}

.detail-page .editorial-price,
.detail-page .service-wide.service-special {
  background: linear-gradient(135deg, #FFF9EA, #EDF2F7);
  border: 2px solid #C99B45;
  box-shadow: 0 12px 28px rgba(48,73,103,.12);
}

.detail-page .editorial-price .editorial-badge {
  background: #245487;
  color: #FFFDF7;
  opacity: 1;
}

.detail-page .editorial-price p,
.detail-page .editorial-price .btn,
.detail-page .related-links a {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 768px) {
  .detail-page .editorial-hero > img,
  .detail-page .service-hero-art {
    display: none;
  }
}

/* POF article: a single-column editorial reading layout. */
.detail-page .pof-article {
  width: min(100%, 900px);
  margin: 0 auto;
  color: #13213D;
  background: #F5F7FA;
}

.detail-page .pof-article-hero,
.detail-page .pof-article-section {
  padding: 42px 0;
  border-bottom: 1px solid #B9C9D9;
}

.detail-page .pof-article-hero h1 {
  max-width: 900px;
  margin: 10px 0 24px;
  color: #13213D;
  font-family: var(--font-heading);
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.2;
}

.detail-page .pof-article h2 {
  max-width: 760px;
  margin: 0 0 18px;
  color: #13213D;
  font-family: var(--font-heading);
  font-size: clamp(25px, 3vw, 36px);
  line-height: 1.3;
}

.detail-page .pof-article h2::before {
  content: "✦";
  display: inline-block;
  margin-right: 10px;
  color: #C99B45;
  font-family: var(--font-body);
  font-size: .55em;
  vertical-align: .15em;
}

.detail-page .pof-article p,
.detail-page .pof-article li {
  max-width: 760px;
  color: #526078;
  font-size: 17px;
  line-height: 1.75;
  opacity: 1;
  visibility: visible;
}

.detail-page .pof-article p {
  margin: 0 0 16px;
}

.detail-page .pof-article ul {
  margin: 0;
  padding-left: 1.4rem;
}

.detail-page .pof-article li {
  margin-bottom: 14px;
}

.detail-page .pof-article li::marker {
  color: #C99B45;
}

.detail-page .pof-value {
  padding-bottom: 46px;
}

.detail-page .pof-booking {
  margin: 44px 0 60px;
  padding: 30px;
  border: 2px solid #C99B45;
  border-radius: 20px;
  background: linear-gradient(135deg, #FFF9EA, #EDF2F7);
  box-shadow: 0 12px 28px rgba(48,73,103,.12);
}

.detail-page .pof-booking h2 {
  color: #13213D;
}

.detail-page .pof-booking .btn {
  display: inline-flex;
  position: static;
  width: fit-content;
  min-height: 52px;
  margin-top: 8px;
}

@media (max-width: 768px) {
  .detail-page .pof-article-hero,
  .detail-page .pof-article-section {
    padding: 32px 0;
  }

  .detail-page .pof-article-hero h1 {
    font-size: clamp(30px, 8vw, 36px);
  }

  .detail-page .pof-article h2 {
    font-size: clamp(25px, 7vw, 30px);
  }

  .detail-page .pof-article p,
  .detail-page .pof-article li {
    font-size: 16px;
    line-height: 1.75;
  }

  .detail-page .pof-booking {
    margin: 32px 0 44px;
    padding: 24px 20px;
  }

  .detail-page .pof-booking .btn {
    width: 100%;
  }
}

/* Homepage private-reading cards: equal-height flex layout and readable copy. */
.reading-grid {
  align-items: stretch;
}

.reading-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 330px;
}

.reading-card p {
  max-width: 30ch;
  margin-left: auto;
  margin-right: auto;
  font-size: 15px;
  line-height: 1.6;
}

.reading-card strong {
  margin-top: auto;
  margin-bottom: 0;
}

.reading-card .detail-btn {
  margin-top: 16px;
}

@media (max-width: 768px) {
  .reading-grid {
    grid-template-columns: 1fr;
  }

  .reading-card {
    min-height: 330px;
  }
}

/* Homepage monthly wallpaper zone: text, wall 1 and wall 2 use a three-column flow. */
#wallpapers .wallpaper-intro {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  grid-template-areas: "copy wall-one" "action wall-one";
  gap: 24px 30px;
  align-items: center;
}

#wallpapers .wallpaper-copy { grid-area: copy; }
#wallpapers .wallpaper-copy-action { grid-area: action; }
#wallpapers .wallpaper-wall-image {
  display: grid;
  place-items: center;
  min-width: 0;
  align-self: center;
  background: transparent;
}
#wallpapers .wallpaper-wall-one { grid-area: wall-one; }
#wallpapers .wallpaper-wall-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
  background: transparent;
}
#wallpapers .wallpaper-wall-one img { max-width: 580px; }
#wallpapers .wallpaper-copy-action .btn { margin-top: 0; }

@media (max-width: 1024px) {
  #wallpapers .wallpaper-intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "copy" "wall-one" "action";
    grid-template-columns: minmax(0, 1fr);
    gap: 26px 22px;
  }
  #wallpapers .wallpaper-copy { text-align: center; }
  #wallpapers .feature-list { width: fit-content; margin-left: auto; margin-right: auto; text-align: left; }
  #wallpapers .wallpaper-copy-action { display: flex; justify-content: center; }
}

@media (max-width: 768px) {
  #wallpapers .wallpaper-intro {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "wall-one" "action";
    gap: 24px;
  }
  #wallpapers .wallpaper-copy { text-align: center; }
  #wallpapers .wallpaper-wall-one img { max-width: min(100%, 520px); }
  #wallpapers .wallpaper-copy-action .btn { width: 100%; max-width: 420px; }
}

/* Final scoped detail-page correction (kept last so legacy theme rules cannot override it). */
body.detail-page::before,
body.detail-page::after,
body.detail-page > main::before,
body.detail-page > main::after,
body.detail-page .detail-main::before,
body.detail-page .detail-main::after,
body.detail-page .editorial-page::before,
body.detail-page .editorial-page::after,
body.detail-page .service-detail::before,
body.detail-page .service-detail::after,
body.detail-page .course-detail::before,
body.detail-page .course-detail::after { display: none; content: none; }

body.detail-page img,
body.detail-page .editorial-hero > img,
body.detail-page .service-hero-art img { opacity: 1; filter: none; mix-blend-mode: normal; }

body.detail-page h1,
body.detail-page h2,
body.detail-page h3,
body.detail-page h4,
body.detail-page .editorial-name,
body.detail-page .service-facts strong,
body.detail-page .editorial-price strong { font-family: var(--font-body); word-break: keep-all; overflow-wrap: normal; }

body.detail-page .service-hero h1,
body.detail-page .editorial-hero h1,
body.detail-page .pof-article-hero h1 { font-size: clamp(36px, 4vw, 44px); line-height: 1.4; font-weight: 700; }
body.detail-page .editorial-page h2,
body.detail-page .pof-article h2,
body.detail-page .service-card h2,
body.detail-page .service-wide h2 { font-size: clamp(28px, 3vw, 34px); line-height: 1.4; font-weight: 700; }
body.detail-page .editorial-page h3,
body.detail-page .pof-article h3,
body.detail-page .service-card h3,
body.detail-page .service-wide h3 { font-size: clamp(20px, 2vw, 24px); line-height: 1.45; font-weight: 700; }

@media (max-width: 768px) {
  body.detail-page .service-hero h1,
  body.detail-page .editorial-hero h1,
  body.detail-page .pof-article-hero h1 { font-size: clamp(30px, 8vw, 34px); }
  body.detail-page .editorial-page h2,
  body.detail-page .pof-article h2,
  body.detail-page .service-card h2,
  body.detail-page .service-wide h2 { font-size: clamp(24px, 7vw, 28px); }
  body.detail-page .editorial-page h3,
  body.detail-page .pof-article h3,
  body.detail-page .service-card h3,
  body.detail-page .service-wide h3 { font-size: clamp(19px, 5vw, 22px); }
}

/* ── Decorative enhancements ── */
.eyebrow::before { content: "✦ "; color: var(--gold); opacity: .7; }
.eyebrow::after  { content: " ✦"; color: var(--gold); opacity: .7; }

.section-heading h2::before { content: ""; }

.special-services { position: relative; }
.special-services::before {
  content: "✦";
  position: absolute; top: 28px; left: 24px;
  color: var(--gold); opacity: .25; font-size: 2.5rem;
  pointer-events: none;
}
.special-services::after {
  content: "✦";
  position: absolute; top: 28px; right: 24px;
  color: var(--gold); opacity: .25; font-size: 2.5rem;
  pointer-events: none;
}

.service-shell { position: relative; }
.service-shell::before {
  content: "✧";
  position: absolute; top: 18px; left: 18px;
  color: var(--gold); opacity: .2; font-size: 2rem;
  pointer-events: none;
}

/* ============================================================
   SESSION PICKER – CHOOSE YOUR SESSION
   ============================================================ */
.session-picker {
  background: linear-gradient(180deg,#faf4e8 0%,#f5e8d0 100%);
  padding: 70px max(20px,calc((100% - var(--max))/2)) 60px;
}
.session-picker-inner { max-width: var(--max); margin: 0 auto; }
.session-picker-header { text-align: center; margin-bottom: 48px; }
.session-eyebrow {
  font-size: .72rem; letter-spacing: .18em;
  color: #c49a3c; margin-bottom: 12px;
}
.session-picker-header h2 {
  font-size: clamp(1.6rem,3vw,2.4rem);
  font-weight: 600; color: #1a2a4a;
  margin-bottom: 10px; font-family: var(--font-body);
}
.session-sub { color: #6b7891; font-size: .9rem; }

/* Grid */
.session-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px; margin-bottom: 40px;
}
.session-card {
  background: white; border-radius: 20px;
  padding: 28px 20px 24px;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  position: relative;
}
.scard-icon-wrap {
  width: 60px; height: 60px;
  background: #f5f0e8; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.6rem; margin-bottom: 14px;
}
.scard-duration {
  font-size: 2.2rem; font-weight: 700;
  color: #1a2a4a; line-height: 1; margin-bottom: 2px;
}
.scard-duration span { font-size: .85rem; font-weight: 400; }
.scard-name {
  font-size: .78rem; color: #8993a8;
  letter-spacing: .04em; margin-bottom: 10px;
}
.scard-price {
  font-size: 1.5rem; font-weight: 700;
  color: #1a2a4a; margin-bottom: 10px;
}
.scard-price span { font-size: .8rem; font-weight: 400; }
.scard-desc {
  font-size: .78rem; color: #6b7891;
  line-height: 1.6; margin-bottom: 14px;
}
.scard-features {
  list-style: none; text-align: left;
  width: 100%; padding: 0; margin: 0 0 20px;
  font-size: .78rem; color: #4a5568;
}
.scard-features li { padding: 4px 0 4px 20px; position: relative; }
.scard-features li::before {
  content: "✓"; position: absolute; left: 0;
  color: #c49a3c; font-weight: 700;
}
.scard-btn {
  display: block; width: 100%;
  padding: 11px 16px;
  background: #f0e4c4; color: #1a2a4a;
  border-radius: 999px; text-align: center;
  font-size: .82rem; font-weight: 600;
  margin-top: auto; text-decoration: none;
  transition: background .2s;
}
.scard-btn:hover { background: #e5d5a8; }

/* Popular card */
.scard-popular-badge {
  position: absolute; top: -13px;
  left: 50%; transform: translateX(-50%);
  background: #c49a3c; color: white;
  font-size: .62rem; letter-spacing: .12em;
  padding: 4px 14px; border-radius: 999px;
  white-space: nowrap;
}
.session-card.is-popular { background: #1e2d5a; color: white; }
.session-card.is-popular .scard-icon-wrap { background: rgba(255,255,255,.1); }
.session-card.is-popular .scard-duration,
.session-card.is-popular .scard-name,
.session-card.is-popular .scard-desc,
.session-card.is-popular .scard-features { color: rgba(255,255,255,.75); }
.session-card.is-popular .scard-price { color: #f5c842; }
.session-card.is-popular .scard-features li::before { color: #f5c842; }
.session-card.is-popular .scard-btn {
  background: rgba(255,255,255,.12); color: white;
  border: 1px solid rgba(255,255,255,.2);
}
.session-card.is-popular .scard-btn:hover { background: rgba(255,255,255,.2); }

/* POF Feature card */
.pof-feature {
  background: white; border-radius: 20px;
  padding: 32px 36px;
  display: flex; align-items: center; gap: 28px;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  border-left: 4px solid #c49a3c;
}
.pof-star { font-size: 1.4rem; flex: 0 0 auto; }
.pof-icon-wrap { flex: 0 0 auto; }
.pof-icon-wrap img { width: 72px; height: 72px; object-fit: contain; }
.pof-label {
  font-size: .7rem; letter-spacing: .12em;
  color: #c49a3c; text-transform: uppercase; margin-bottom: 6px;
}
.pof-body h3 {
  font-size: 1.15rem; font-weight: 600;
  color: #1a2a4a; margin-bottom: 8px;
}
.pof-body h3 span { font-weight: 300; }
.pof-body p { font-size: .84rem; color: #6b7891; margin-bottom: 16px; }
.pof-btn { width: auto; display: inline-block; }

/* Responsive */
@media (max-width: 900px) {
  .session-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 580px) {
  .session-grid { grid-template-columns: 1fr; }
  .pof-feature { flex-direction: column; text-align: center; }
}

/* POF – keyword grid */
.detail-page .pof-keyword-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 22px;
}

.detail-page .pof-keyword-group {
  padding: 18px 20px;
  border: 1px solid rgba(201,155,69,.35);
  border-radius: 14px;
  background: rgba(255,249,234,.06);
}

.detail-page .pof-keyword-label {
  font-weight: 700;
  color: var(--gold-light);
  margin-bottom: 8px !important;
}

/* POF – numbered steps */
.detail-page .pof-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 24px;
}

.detail-page .pof-step {
  display: flex;
  gap: 16px;
  padding: 22px 20px;
  border: 1px solid rgba(201,155,69,.3);
  border-radius: 16px;
  background: rgba(255,249,234,.05);
}

.detail-page .pof-step-num {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gold);
  color: #0a1a36;
  font-weight: 700;
  font-size: 15px;
}

.detail-page .pof-step-body h3 {
  margin-bottom: 8px;
  font-size: 16px;
}

/* POF – value quote */
.detail-page .pof-value-quote {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold-light);
  margin-bottom: 10px !important;
}

/* POF – booking eyebrow */
.detail-page .pof-booking .eyebrow {
  margin-bottom: 6px;
}

@media (max-width: 768px) {
  .detail-page .pof-keyword-grid {
    grid-template-columns: 1fr;
  }
  .detail-page .pof-steps {
    grid-template-columns: 1fr;
  }
}

/* ── Course detail pages ── */
.course-page { max-width: var(--max); margin: 0 auto; font-family: var(--font-body); }
.course-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 60px 0 50px; }
.course-hero-copy { display: flex; flex-direction: column; gap: 14px; }
.course-hero-copy .eyebrow { font-size: .75rem; letter-spacing: .14em; color: var(--gold); }
.course-hero-copy h1 { font-size: clamp(2rem,4vw,2.8rem); line-height: 1.25; margin: 0; }
.course-hero-copy .course-sub { font-size: 1rem; color: #c8d8f0; font-weight: 400; }
.course-hero-copy .course-quote { font-size: .9rem; color: var(--gold-light); font-style: italic; border-left: 3px solid var(--gold); padding-left: 14px; margin: 4px 0; }
.course-hero-stats { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.course-stat { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: #cdd6e8; }
.course-stat .stat-icon { font-size: 1rem; }
.course-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.course-hero-img { border-radius: 20px; overflow: hidden; }
.course-hero-img img { width: 100%; height: auto; display: block; border-radius: 20px; }

.course-section { padding: 48px 0; }
.course-section-title { text-align: center; margin-bottom: 8px; }
.course-section-title h2 { font-size: clamp(1.4rem,3vw,1.8rem); margin: 0 0 4px; }
.course-section-title p { color: var(--gold); font-size: .75rem; letter-spacing: .1em; margin: 0; }

.course-gain-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 32px; }
.course-gain-card { background: rgba(255,249,234,.05); border: 1px solid rgba(201,155,69,.25); border-radius: 14px; padding: 20px 16px; text-align: center; }
.course-gain-card .gain-icon { font-size: 1.8rem; margin-bottom: 10px; }
.course-gain-card h3 { font-size: .95rem; color: var(--gold-light); margin: 0 0 8px; font-weight: 700; }
.course-gain-card p { font-size: .8rem; color: #c8d8f0; line-height: 1.55; margin: 0; }

.course-mid-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 48px 0; align-items: start; }
.course-before-after h2 { font-size: 1.2rem; margin-bottom: 6px; }
.course-ba-sub { font-size: .7rem; letter-spacing: .08em; color: var(--gold); margin-bottom: 20px; }
.course-ba-table { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; border-radius: 12px; overflow: hidden; border: 1px solid rgba(201,155,69,.3); }
.course-ba-col { padding: 14px; }
.course-ba-col.before { background: rgba(15,30,65,.6); }
.course-ba-col.after { background: rgba(20,50,30,.5); }
.course-ba-col.arrow-col { display: flex; flex-direction: column; justify-content: space-around; align-items: center; background: rgba(201,155,69,.12); color: var(--gold); font-size: .9rem; padding: 0 8px; }
.course-ba-col h4 { font-size: .75rem; letter-spacing: .08em; color: var(--gold-light); margin: 0 0 12px; border-bottom: 1px solid rgba(201,155,69,.3); padding-bottom: 6px; }
.course-ba-col li { font-size: .78rem; color: #c8d8f0; margin-bottom: 8px; padding-left: 12px; position: relative; line-height: 1.4; }
.course-ba-col li::before { content: "•"; position: absolute; left: 0; color: var(--gold); }
.course-ba-col.after li::before { content: "✓"; }

.course-for-whom h2 { font-size: 1.2rem; margin-bottom: 6px; }
.course-for-whom .fw-sub { font-size: .7rem; letter-spacing: .08em; color: var(--gold); margin-bottom: 20px; }
.course-fw-list li { display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; color: #c8d8f0; margin-bottom: 10px; }
.course-fw-list li::before { content: "✓"; color: var(--gold); font-weight: 700; flex-shrink: 0; margin-top: 1px; }

.course-curriculum { padding: 48px 0; }
.course-curriculum h2 { font-size: 1.2rem; }
.course-curriculum .cur-sub { font-size: .7rem; letter-spacing: .08em; color: var(--gold); margin-bottom: 28px; }
.course-parts-grid { display: grid; gap: 8px; }
.course-parts-grid.cols3 { grid-template-columns: repeat(3,1fr); }
.course-parts-grid.cols4 { grid-template-columns: repeat(4,1fr); }
.course-part { background: rgba(255,249,234,.04); border: 1px solid rgba(201,155,69,.22); border-radius: 14px; padding: 20px 16px; }
.course-part .part-label { font-size: .65rem; letter-spacing: .1em; color: var(--gold); margin-bottom: 4px; }
.course-part h3 { font-size: .95rem; color: #e8d5a3; margin: 0 0 4px; font-weight: 700; }
.course-part .part-en { font-size: .72rem; color: #8dacd6; margin: 0 0 14px; }
.course-part li { font-size: .78rem; color: #bfcfe8; margin-bottom: 6px; padding-left: 12px; position: relative; }
.course-part li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-size: .7rem; }

.course-features-grid { display: grid; gap: 14px; margin-top: 20px; }
.course-feature { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid rgba(201,155,69,.2); border-radius: 10px; }
.course-feature .feat-icon { font-size: 1.2rem; flex-shrink: 0; }
.course-feature h4 { font-size: .85rem; color: var(--gold-light); margin: 0 0 4px; font-weight: 700; }
.course-feature p { font-size: .75rem; color: #aec0d8; margin: 0; line-height: 1.45; }

.course-curriculum-wrap { display: grid; grid-template-columns: 1fr 280px; gap: 36px; }
.course-wow h3 { font-size: 1rem; margin-bottom: 4px; }
.course-wow .wow-sub { font-size: .7rem; letter-spacing: .08em; color: var(--gold); margin-bottom: 18px; }

.course-pricing { padding: 48px 0; }
.course-pricing h2 { font-size: 1.2rem; margin-bottom: 4px; }
.course-pricing .price-sub { font-size: .7rem; letter-spacing: .08em; color: var(--gold); margin-bottom: 28px; }
.course-price-grid { display: grid; gap: 16px; }
.course-price-grid.cols2 { grid-template-columns: 1fr 1fr; }
.course-price-grid.cols3 { grid-template-columns: repeat(3,1fr); }
.course-price-card { border: 1px solid rgba(201,155,69,.3); border-radius: 16px; padding: 24px 20px; background: rgba(255,249,234,.04); }
.course-price-card.best { border-color: var(--gold); background: rgba(201,155,69,.08); }
.course-price-card .price-type { font-size: .7rem; letter-spacing: .1em; color: var(--gold); margin-bottom: 4px; }
.course-price-card .best-badge { display: inline-block; background: var(--gold); color: #0a1a36; font-size: .65rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; margin-bottom: 8px; }
.course-price-card h3 { font-size: .9rem; margin: 0 0 6px; color: #e8d5a3; }
.course-price-card .price-desc { font-size: .75rem; color: #9ab0cc; margin: 0 0 14px; line-height: 1.45; }
.course-price-card .price-amount { font-size: 1.6rem; font-family: var(--font-heading); color: var(--gold-light); margin: 0 0 4px; }
.course-price-card .price-note { font-size: .7rem; color: #8dacd6; margin: 0 0 16px; }

.course-included { padding: 40px 0; }
.course-included h2 { font-size: 1.2rem; margin-bottom: 4px; }
.course-included .inc-sub { font-size: .7rem; letter-spacing: .08em; color: var(--gold); margin-bottom: 24px; }
.course-inc-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.course-inc-item { text-align: center; padding: 16px 12px; border: 1px solid rgba(201,155,69,.2); border-radius: 12px; background: rgba(255,249,234,.03); }
.course-inc-item .inc-icon { font-size: 1.8rem; margin-bottom: 8px; }
.course-inc-item h4 { font-size: .82rem; color: var(--gold-light); margin: 0 0 4px; font-weight: 700; }
.course-inc-item p { font-size: .72rem; color: #9ab0cc; margin: 0; line-height: 1.4; }

.course-journey { display: flex; align-items: center; gap: 0; padding: 36px 0; }
.course-journey-step { flex: 1; text-align: center; padding: 16px; border: 1px solid rgba(201,155,69,.25); border-radius: 12px; position: relative; background: rgba(255,249,234,.03); }
.course-journey-step.current { border-color: var(--gold); background: rgba(201,155,69,.12); }
.course-journey-step .step-num { font-size: .7rem; color: var(--gold); letter-spacing: .08em; }
.course-journey-step h4 { font-size: .85rem; margin: 4px 0 0; color: #e8d5a3; }
.course-journey-step p { font-size: .72rem; color: #9ab0cc; margin: 2px 0 0; }
.course-journey-arrow { padding: 0 8px; color: var(--gold); font-size: 1.2rem; flex-shrink: 0; }

.course-footer-cta { text-align: center; padding: 52px 0 60px; border-top: 1px solid rgba(201,155,69,.2); margin-top: 20px; }
.course-footer-cta p { font-size: .82rem; color: #9ab0cc; margin: 0 0 6px; }
.course-footer-cta h2 { font-size: clamp(1.2rem,3vw,1.7rem); margin: 0 0 24px; }
.course-footer-cta .btn { min-width: 200px; }

@media (max-width: 900px) {
  .course-hero { grid-template-columns: 1fr; }
  .course-hero-img { order: -1; max-width: 360px; margin: 0 auto; }
  .course-gain-grid { grid-template-columns: repeat(2,1fr); }
  .course-mid-grid { grid-template-columns: 1fr; }
  .course-curriculum-wrap { grid-template-columns: 1fr; }
  .course-parts-grid.cols3, .course-parts-grid.cols4 { grid-template-columns: 1fr 1fr; }
  .course-price-grid.cols2, .course-price-grid.cols3 { grid-template-columns: 1fr 1fr; }
  .course-inc-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px) {
  .course-gain-grid { grid-template-columns: 1fr; }
  .course-parts-grid.cols3, .course-parts-grid.cols4 { grid-template-columns: 1fr; }
  .course-price-grid.cols2, .course-price-grid.cols3 { grid-template-columns: 1fr; }
  .course-inc-grid { grid-template-columns: 1fr 1fr; }
  .course-journey { flex-direction: column; gap: 8px; }
  .course-journey-arrow { transform: rotate(90deg); }
}
.course-best-badge { display:inline-block; background:var(--gold); color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 10px; border-radius:20px; margin-bottom:8px; }
.course-price-card.best { border:2px solid var(--gold); position:relative; }

/* course-hero dark background */
.course-hero { background: linear-gradient(135deg, #0e1c35 0%, #1c0b04 100%); border-radius: 20px; padding: 50px 40px !important; margin-bottom: 8px; }
.course-hero-copy h1 { color: #fff; }
.course-hero-copy .eyebrow { color: var(--gold); }
.course-hero-copy .course-sub { color: #b8c8e0 !important; }
.course-hero-stats .course-stat-num { color: var(--gold); }
.course-hero-stats .course-stat-label { color: #9aaabb; }
/* journey as links */
.course-journey a.course-journey-step { text-decoration: none; color: inherit; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.course-journey a.course-journey-step:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.18); }


/* ══════════════════════════════════════════════════════
   Course components — light-page colour overrides
   (course-hero keeps its own dark-gradient background)
   ══════════════════════════════════════════════════════ */

/* Gain cards */
.course-gain-card { background: #F0F5FB; border-color: #C4D4E4; }
.course-gain-card h3 { color: #245487; }
.course-gain-card p { color: #3d5a78 !important; }

/* Before/after table */
.course-ba-col.before { background: #EEF3FA; }
.course-ba-col.after  { background: #EEF5EE; }
.course-ba-col h4     { color: #245487 !important; border-bottom-color: #C4D4E4; }
.course-ba-col li     { color: #3d5a78 !important; }
.course-ba-col.arrow-col { background: rgba(201,155,69,.1); color: #8a6c1a; }

/* For-whom list */
.course-fw-list li { color: #3d5a78 !important; }

/* Curriculum part cards */
.course-part           { background: #F0F5FB; border-color: #C4D4E4; }
.course-part h3        { color: #13213D !important; }
.course-part .part-en  { color: #4a6080 !important; }
.course-part li        { color: #3d5a78 !important; }

/* Feature rows */
.course-feature        { background: #F0F5FB; border-color: #C4D4E4; }
.course-feature h4     { color: #245487 !important; }
.course-feature p      { color: #3d5a78 !important; }

/* Pricing cards */
.course-price-card            { background: #F0F5FB; border-color: #C4D4E4; }
.course-price-card.best       { border-color: var(--gold); background: rgba(201,155,69,.07); }
.course-price-card h3         { color: #13213D !important; }
.course-price-card .price-desc { color: #4a6080 !important; }
.course-price-card .price-note { color: #5a7a9a !important; }

/* Included items */
.course-inc-item    { background: #F0F5FB; border-color: #C4D4E4; }
.course-inc-item h4 { color: #245487 !important; }
.course-inc-item p  { color: #4a6080 !important; }

/* Journey steps */
.course-journey-step         { background: #F0F5FB; border-color: #C4D4E4; }
.course-journey-step.current { border-color: var(--gold); background: rgba(201,155,69,.08); }
.course-journey-step h4      { color: #13213D !important; }
.course-journey-step p       { color: #4a6080 !important; }
.course-journey-arrow        { color: var(--gold); }

/* Footer CTA */
.course-footer-cta               { border-top-color: #C4D4E4; }
.course-footer-cta p             { color: #4a6080 !important; }

/* Section subtitles & stat text outside hero */
.course-section-title p    { color: var(--gold); }
.course-stat               { color: #4a6080 !important; }

/* ══════════════════════════════════════════════════════
   Curriculum layout: parts grid full-width, ✨ special below
   ══════════════════════════════════════════════════════ */

/* Stack grid + wow vertically (no sidebar) */
.course-curriculum-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

/* Part cards — more padding, balanced */
.course-part {
  padding: 24px 20px !important;
}
.course-part h3 {
  font-size: 1.05rem !important;
  margin-bottom: 10px !important;
}
.course-part li {
  font-size: .82rem !important;
  margin-bottom: 8px !important;
  line-height: 1.5 !important;
}

/* ✨ Special note — full-width banner below the grid */
.course-wow {
  width: 100%;
  background: rgba(201,155,69,.07);
  border: 1px solid rgba(201,155,69,.4);
  border-radius: 14px;
  padding: 18px 24px;
  text-align: center;
}
.course-wow p {
  margin: 0;
  font-size: .88rem;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.6;
}

/* ── Compact reading cards ── */
.reading-grid { gap: 10px !important; }
.reading-card { min-height: 0 !important; padding: 30px 14px 14px !important; }
.reading-card strong { font-size: clamp(.95rem,1.5vw,1.1rem) !important; margin-bottom: 8px !important; }
.reading-card p { font-size: .82rem !important; margin-bottom: 6px !important; line-height: 1.5 !important; }
.card-icon { width: 42px !important; height: 42px !important; top: -18px !important; }
/* Course listing palette: only the badges and their matching buttons. */
.course-card .level-green, .course-card .course-btn.green { background: #123A67; }
.course-card .level-green { border-color: #D5A83E; }
.course-card .course-btn.green { box-shadow: inset 0 0 0 1px #D5A83E, 0 7px 16px rgba(0,0,0,.15); }
.course-card .level-blue, .course-card .course-btn.blue { background: #5B2D82; }
.course-card .course-btn.blue:hover, .course-card .course-btn.blue:focus-visible { background: #713BA0; }
.course-card .level-sapphire, .course-card .course-btn.sapphire { background: #A94F12; }
.course-card .course-btn.sapphire:hover, .course-card .course-btn.sapphire:focus-visible { background: #C5651B; }
.course-card .level-gold, .course-card .course-btn.gold { background: #126B4A; }
.course-card .course-btn.gold:hover, .course-card .course-btn.gold:focus-visible { background: #18845B; }
.course-card .course-btn, .course-card .course-btn span, .course-card .level { color: #fff; }

/* The homepage headline has exactly two non-wrapping lines. */
.hero #hero-title { font-size: clamp(46px, 3.6vw, 52px); line-height: 1.25; }
.hero #hero-title > span { display: block; white-space: nowrap; }
.hero #hero-title > span:last-child { color: inherit; }
@media (max-width: 780px) {
  .hero #hero-title { font-size: clamp(20px, 6vw, 24px); }
}

/* Remove duplicate wrapper spacing from the first five course sections. */
.course-detail .course-page > .course-section:nth-of-type(n+2):nth-of-type(-n+6) {
  height: auto;
  min-height: 0;
  margin-block: 0;
  padding-block: 26px;
}
.course-detail .course-page > .course-section:nth-of-type(n+2):nth-of-type(-n+6) .course-section-title {
  margin-top: 0;
  margin-bottom: 22px;
}
.course-detail .course-mid-grid,
.course-detail .course-curriculum,
.course-detail .course-pricing,
.course-detail .course-included {
  height: auto;
  min-height: 0;
  margin-block: 0;
  padding-block: 0;
}
.course-detail .course-gain-grid { margin-top: 0; gap: 16px; }
.course-detail .course-mid-grid { gap: 16px; }
.course-detail .course-parts-grid { gap: 12px; }
.course-detail .course-fw-list { margin-top: 0; margin-bottom: 0; }
@media (max-width: 780px) {
  .course-detail .course-page > .course-section:nth-of-type(n+2):nth-of-type(-n+6) { padding-block: 18px; }
}
/* Compensate for the changed gutters so existing card widths stay the same. */
.course-detail .course-gain-grid { width: calc(100% - 6px); }
.course-detail .course-mid-grid { width: calc(100% - 16px); }
.course-detail .course-parts-grid.cols3 { width: calc(100% + 8px); }
.course-detail .course-parts-grid.cols4 { width: calc(100% + 12px); }
@media (max-width: 900px) {
  .course-detail .course-gain-grid { width: calc(100% - 2px); }
  .course-detail .course-mid-grid { width: 100%; }
  .course-detail .course-parts-grid.cols3,
  .course-detail .course-parts-grid.cols4 { width: calc(100% + 4px); }
}
@media (max-width: 600px) {
  .course-detail .course-gain-grid,
  .course-detail .course-parts-grid.cols3,
  .course-detail .course-parts-grid.cols4 { width: 100%; }
}

/* Complete service descriptions from the supplied PDF. */
.pdf-service-copy{max-width:960px;margin-inline:auto;overflow-wrap:anywhere}
.pdf-service-copy h1{font-size:clamp(1.65rem,3.5vw,2.6rem);line-height:1.55;margin-bottom:1.5rem}
.pdf-service-copy p{font-size:1rem;line-height:1.95;margin:0 0 1rem;white-space:normal;max-height:none;overflow:visible;-webkit-line-clamp:unset}
.pdf-service-copy h2{font-size:1.2rem;line-height:1.75;margin:2rem 0 1rem}
.service-exact-book,.service-exact-related{max-width:960px;margin:2rem auto}

.birth-feature{margin-top:1.5rem}
.birth-feature .pof-body p{font-size:1rem;line-height:1.8}
.birth-feature .pof-body .pof-label{font-size:.875rem}

/* Personalized wallpaper artwork and linked service card. */
.custom-wallpaper-link{text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease}
.custom-wallpaper-link:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(47,76,109,.18)}
.custom-wallpaper-link:focus-visible{outline:3px solid #C99B45;outline-offset:5px}
.personalized-wallpaper-art{display:block;width:100%;max-width:290px;height:auto;aspect-ratio:1;object-fit:contain;margin:0 auto}
.custom-wallpaper-link .btn{width:100%;box-sizing:border-box}
@media(max-width:700px){.personalized-wallpaper-art{max-width:230px}}

#wallpapers .custom-wallpaper-link .personalized-wallpaper-art{height:160px;max-width:240px;aspect-ratio:auto;object-fit:contain}
#wallpapers .custom-wallpaper-link h3{font-size:1.05rem;line-height:1.6}
#wallpapers .custom-wallpaper-link p:not(.eyebrow){font-size:.875rem;line-height:1.65}
#wallpapers .custom-wallpaper-link .eyebrow{font-size:.75rem}
#wallpapers .custom-wallpaper-link .btn{font-size:.875rem;min-height:44px}
@media(max-width:700px){#wallpapers .custom-wallpaper-link .personalized-wallpaper-art{height:190px}}

/* Align the hero boundary with the character and fill the wallpaper gallery. */
.hero{padding-bottom:0}
.hero-character{display:block}
#wallpapers .wallpaper-gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,auto);gap:18px 12px;align-content:start;overflow:visible;padding:0;scroll-snap-type:none}
#wallpapers .wallpaper-gallery .wallpaper-card{min-width:0;width:auto;flex:none}
#wallpapers .wallpaper-gallery .wallpaper-card>span{font-size:.875rem;line-height:1.5}
@media(max-width:700px){
 #wallpapers .wallpaper-gallery{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:clamp(138px,40vw,185px);grid-template-rows:repeat(2,auto);overflow-x:auto;gap:16px 12px;padding:0 2px 10px;scroll-snap-type:x proximity}
 #wallpapers .wallpaper-gallery .wallpaper-card{scroll-snap-align:start}
}

/* Equal height across every row of special-service cards. */
.special-services .special-grid{grid-auto-rows:1fr}
.special-services .special-grid>.special-card{height:100%;box-sizing:border-box}

/* Decorative celestial layers stay behind content and never intercept input. */
.hero,.special-services{isolation:isolate}
.celestial-sparkles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.celestial-sparkles i{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);background:#ffe3a0;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:.45;animation:soul-twinkle 5s ease-in-out var(--delay) infinite}
.celestial-sparkles::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 88% 24%,rgba(112,132,225,.13),transparent 42%),radial-gradient(ellipse at 8% 80%,rgba(223,181,88,.09),transparent 36%)}
@keyframes soul-twinkle{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:.8;transform:scale(1.15)}}
.special-services .special-card{border-color:rgba(223,184,104,.42);box-shadow:inset 0 1px 0 rgba(255,229,169,.1),0 8px 28px rgba(0,8,28,.14);transition:border-color .25s,box-shadow .25s}
.special-services .special-card:hover,.special-services .special-card:focus-visible{border-color:#e2bd72;box-shadow:inset 0 1px 0 rgba(255,229,169,.2),0 0 24px rgba(216,173,85,.18)}
.special-art img{filter:drop-shadow(0 0 9px rgba(233,186,81,.15))}
.pof-feature{box-shadow:0 12px 36px rgba(158,121,52,.12),inset 0 1px 0 rgba(255,238,189,.6)}
#wallpapers .wallpaper-card img{transition:box-shadow .25s}
#wallpapers .wallpaper-card:hover img{box-shadow:0 0 22px rgba(199,153,62,.3)}
@media(prefers-reduced-motion:reduce){.celestial-sparkles i{animation:none;opacity:.5}}
@media(max-width:700px){.celestial-sparkles i:nth-child(even){display:none}}

/* Celestial ornamentation across home, collections and detail pages. */
:root{--celestial-ornament:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22420%22%20height%3D%22520%22%20viewBox%3D%220%200%20420%20520%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23c99b45%22%20stroke-width%3D%22.8%22%20opacity%3D%22.35%22%3E%3Ccircle%20cx%3D%22340%22%20cy%3D%22165%22%20r%3D%22130%22/%3E%3Ccircle%20cx%3D%22340%22%20cy%3D%22165%22%20r%3D%22112%22/%3E%3Cellipse%20cx%3D%22340%22%20cy%3D%22165%22%20rx%3D%22155%22%20ry%3D%2255%22%20transform%3D%22rotate%28-35%20340%20165%29%22/%3E%3Cpath%20d%3D%22M15%20310L64%20275%20104%20330%2070%20395%20145%20438M64%20275L155%20250M284%2020L304%2080%20380%20110%22/%3E%3C/g%3E%3Cg%20fill%3D%22%23d8af65%22%20opacity%3D%22.65%22%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%22310%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%2264%22%20cy%3D%22275%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%22104%22%20cy%3D%22330%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%22395%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%22145%22%20cy%3D%22438%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%22155%22%20cy%3D%22250%22%20r%3D%222%22/%3E%3Cpath%20d%3D%22M225%20380l3%2013%2013%203-13%203-3%2013-3-13-13-3%2013-3zM95%2090l2%209%209%202-9%202-2%209-2-9-9-2%209-2z%22/%3E%3C/g%3E%3C/svg%3E")}
.wallpaper-section,.courses,.reviews,.booking,.site-footer,.detail-main,.service-shell{position:relative;isolation:isolate}
.wallpaper-section::after,.courses::after,.reviews::after,.booking::after,.site-footer::after,.detail-main::after,.service-shell::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--celestial-ornament),var(--celestial-ornament);background-repeat:no-repeat;background-position:right top,left bottom;background-size:clamp(180px,28vw,420px) auto;opacity:.55;border-radius:inherit}
.courses::after,.service-shell::after{opacity:.75}
.wallpaper-section,.reviews{border-top:1px solid rgba(201,155,69,.3);border-bottom:1px solid rgba(201,155,69,.22)}
.section-heading{position:relative;padding-block:12px 20px}
.section-heading::after{content:"";position:absolute;bottom:0;left:50%;width:150px;height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#d5ab5a,transparent);box-shadow:0 3px 12px rgba(223,182,93,.3)}
.wallpaper-gallery-wrap,.custom-wallpaper,.course-card,.review-card{border:1px solid rgba(192,154,87,.38);box-shadow:0 16px 38px rgba(15,35,65,.12),inset 0 1px 0 rgba(255,229,174,.35)}
.course-card,.review-card{transition:box-shadow .25s,border-color .25s}
.course-card:hover,.review-card:hover{border-color:rgba(216,178,107,.8);box-shadow:0 18px 40px rgba(16,34,69,.18),0 0 18px rgba(211,164,68,.12)}
.detail-page .pdf-service-copy{padding:clamp(22px,4vw,52px);background:rgba(249,251,255,.96);color:#182d4b;border:1px solid rgba(197,156,81,.48);border-radius:24px;box-shadow:0 20px 60px rgba(7,23,50,.15);box-sizing:border-box}
.pdf-service-copy h1{padding-bottom:24px;border-bottom:1px solid rgba(201,155,69,.3)}
.pdf-service-copy h2{padding-left:16px;border-left:3px solid #c99b45}
.site-footer{border-top:1px solid rgba(201,155,69,.38)}
.booking-orbit{border-color:rgba(190,145,62,.34);box-shadow:0 0 0 24px rgba(201,155,69,.035),0 0 0 60px rgba(201,155,69,.025)}
@media(max-width:700px){.wallpaper-section::after,.courses::after,.reviews::after,.booking::after,.site-footer::after,.detail-main::after,.service-shell::after{background-size:180px auto;opacity:.3}.detail-page .pdf-service-copy{padding:22px 18px;border-radius:18px}}

.site-header .brand-copy strong,.site-header .brand-copy small{text-transform:none}