:root { --paper:#f7f1e8; --paper-2:#eee7dc; --ink:#24362f; --terracotta:#d78767; --sage:#a9b7a5; --white:#fffdf9; --line:rgba(36,54,47,.19); --serif:"Baskerville","Palatino Linotype",Georgia,serif; --sans:"Segoe UI",system-ui,-apple-system,sans-serif; --shadow:0 22px 55px rgba(36,54,47,.13); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); line-height:1.5; }
a,button,input,select,textarea { font:inherit; }
a { color:inherit; }
button { cursor:pointer; }
:focus-visible { outline:3px solid var(--terracotta); outline-offset:4px; }
.concept-bar { background:var(--ink); color:var(--paper); padding:9px 5vw; font-size:10px; letter-spacing:.15em; text-transform:uppercase; }.concept-bar span { margin-left:14px; color:#cbd3c9; letter-spacing:.04em; text-transform:none; }
.site-header { display:flex; align-items:center; justify-content:space-between; max-width:1440px; margin:auto; padding:24px 5vw; }.wordmark { display:flex; align-items:center; gap:10px; font:700 14px/1.04 var(--serif); text-decoration:none; }.wordmark em { font-size:12px; font-weight:400; }.wordmark-mark { display:grid; place-items:center; width:35px; height:35px; border:1px solid var(--ink); border-radius:8px 50% 8px 50%; font:600 11px var(--sans); }.desktop-nav { display:flex; gap:30px; margin-left:auto; margin-right:28px; color:rgba(36,54,47,.68); font-size:12px; }.desktop-nav a { text-decoration:none; }.desktop-nav a:hover { color:var(--terracotta); }.nav-cta { padding:11px 15px; border:1px solid var(--ink); border-radius:999px; font-size:12px; text-decoration:none; }.nav-cta:hover { background:var(--ink); color:var(--paper); }
main { overflow:hidden; } section { max-width:1440px; margin:auto; padding:100px 5vw; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:var(--serif); font-weight:400; } h1 { max-width:700px; margin-bottom:24px; font-size:clamp(49px,7vw,98px); letter-spacing:-.065em; line-height:.94; } h1 i,h2 i { color:var(--terracotta); font-style:italic; } h2 { font-size:clamp(43px,5vw,72px); line-height:.95; letter-spacing:-.06em; } h3 { font-size:28px; }
.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 23px; color:var(--terracotta); font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }.eyebrow-line { width:28px; height:1px; background:currentColor; }.hero { display:grid; grid-template-columns:1fr .87fr; gap:9vw; align-items:center; padding-top:74px; background:var(--paper); }.hero-lede { max-width:500px; color:rgba(36,54,47,.69); font-size:16px; }.hero-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:28px; }.button { display:inline-flex; align-items:center; justify-content:center; gap:20px; min-height:48px; padding:13px 18px; border:1px solid transparent; border-radius:7px 25px 7px 25px; font-size:12px; font-weight:700; text-decoration:none; transition:transform .2s ease, background .2s ease; }.button:hover { transform:translateY(-2px); }.button:active { transform:translateY(0) scale(.98); }.button-ink { background:var(--ink); color:var(--paper); }.button-ink:hover { background:var(--terracotta); }.text-link { display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:700; text-decoration:none; }.text-link:hover { color:var(--terracotta); }.hero-micro { margin-top:48px; color:rgba(36,54,47,.56); font-size:11px; }.hero-micro span { color:var(--terracotta); padding:0 8px; }
.hero-art { position:relative; min-height:600px; background:var(--sage); overflow:hidden; border-radius:190px 190px 12px 12px; box-shadow:var(--shadow); }.art-circle { position:absolute; width:380px; height:380px; right:-100px; top:-70px; border-radius:50%; background:#d7dfd0; }.art-frame { position:absolute; top:75px; left:44px; width:63%; height:73%; border:1px solid rgba(36,54,47,.32); transform:rotate(-9deg); }.art-frame::after { content:""; position:absolute; inset:17px; border:1px solid rgba(36,54,47,.2); }.art-hand { position:absolute; width:185px; height:230px; left:50%; top:150px; border-radius:90px 90px 25px 25px; background:#deab96; transform:translateX(-50%) rotate(-12deg); box-shadow:inset -14px -8px 0 rgba(157,89,73,.14); }.finger { position:absolute; display:block; width:32px; height:130px; top:-86px; border-radius:22px; background:#deab96; }.finger-one { left:28px; transform:rotate(-13deg); }.finger-two { left:70px; top:-102px; transform:rotate(-4deg); }.finger-three { left:112px; top:-93px; transform:rotate(8deg); }.art-bowl { position:absolute; left:50%; bottom:98px; width:180px; height:62px; border-radius:50%; background:#e8dfd1; border:3px solid var(--ink); transform:translateX(-50%); }.art-bowl::after { content:""; position:absolute; left:25px; right:25px; top:9px; height:18px; border-radius:50%; background:#b4c09f; }.art-leaf { position:absolute; width:115px; height:195px; border:2px solid rgba(36,54,47,.45); border-radius:100% 0 100% 0; }.leaf-one { right:30px; bottom:55px; transform:rotate(30deg); }.leaf-two { left:18px; bottom:96px; transform:rotate(-44deg) scale(.75); }.art-label { position:absolute; right:24px; bottom:22px; color:var(--ink); font:italic 16px/1 var(--serif); text-align:right; }
.principles-section { display:grid; grid-template-columns:.7fr 1fr; gap:9vw; background:var(--ink); color:var(--paper); }.principles-heading { max-width:370px; }.principles-heading .eyebrow { color:var(--sage); }.principles-heading h2 i { color:#e6a789; }.principles-heading p:last-child { color:#cbd3c9; font-size:14px; }.principles-grid { display:grid; grid-template-columns:repeat(3,1fr); align-items:end; gap:1px; background:rgba(247,241,232,.22); }.principles-grid article { min-height:260px; padding:20px; background:var(--ink); }.principles-grid span { color:#e6a789; font-size:11px; }.principles-grid h3 { margin:72px 0 12px; font-size:24px; }.principles-grid p { color:#cbd3c9; font-size:12px; }
.services-section { background:var(--paper-2); }.section-kicker { display:flex; align-items:center; justify-content:space-between; max-width:1050px; margin:auto; border-bottom:1px solid var(--line); }.section-kicker .eyebrow { margin:0; }.section-kicker > span { color:rgba(36,54,47,.55); font-size:10px; }.services-heading { display:grid; grid-template-columns:1fr .6fr; gap:10vw; align-items:end; max-width:1050px; margin:55px auto 42px; }.services-heading p { max-width:310px; color:rgba(36,54,47,.63); font-size:14px; }.service-list { max-width:1050px; margin:auto; border-top:1px solid var(--line); }.service-card { display:grid; grid-template-columns:56px 1fr auto 30px; align-items:center; gap:18px; width:100%; padding:21px 0; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; }.service-card:hover,.service-card.is-selected { color:var(--terracotta); }.service-index { font:14px var(--serif); }.service-main strong,.service-main small { display:block; }.service-main strong { font:23px var(--serif); font-weight:400; }.service-main small { margin-top:4px; color:rgba(36,54,47,.58); font-size:11px; }.service-price { font:23px var(--serif); }.service-plus { font-size:22px; font-weight:300; }.service-note { max-width:1050px; margin:20px auto 0; color:var(--terracotta); font-size:11px; }
.flow-section { display:grid; grid-template-columns:.9fr 1fr; gap:9vw; align-items:center; background:var(--paper); }.flow-art { position:relative; min-height:430px; background:#d4d8ce; overflow:hidden; }.flow-card { position:absolute; display:flex; flex-direction:column; justify-content:space-between; width:220px; height:285px; padding:20px; }.flow-card-back { left:14%; top:40px; background:#9eae9e; color:var(--ink); transform:rotate(-9deg); }.flow-card-front { right:13%; bottom:26px; background:var(--terracotta); color:var(--paper); transform:rotate(8deg); box-shadow:var(--shadow); }.flow-card-front span { font-size:10px; letter-spacing:.14em; text-transform:uppercase; }.flow-card-front strong { font:31px/1 var(--serif); }.flow-card-front small { font-size:11px; }.flow-stroke { position:absolute; left:53%; top:30px; height:360px; border-left:1px dashed rgba(36,54,47,.46); transform:rotate(21deg); }.flow-copy { max-width:470px; }.flow-list { margin:35px 0 0; padding:0; list-style:none; border-top:1px solid var(--line); }.flow-list li { display:grid; grid-template-columns:42px 1fr; gap:12px; padding:16px 0; border-bottom:1px solid var(--line); }.flow-list li > span { color:var(--terracotta); font-size:11px; }.flow-list strong,.flow-list small { display:block; }.flow-list strong { font:19px var(--serif); }.flow-list small { margin-top:3px; color:rgba(36,54,47,.56); font-size:11px; }
.safety-section { display:grid; grid-template-columns:.75fr 1fr; gap:9vw; background:var(--sage); }.safety-copy { max-width:410px; }.safety-copy > p:not(.eyebrow) { color:rgba(36,54,47,.68); font-size:14px; }.safety-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(36,54,47,.2); }.safety-grid > div { display:flex; flex-direction:column; min-height:180px; padding:20px; background:var(--sage); }.safety-icon { margin-bottom:auto; color:var(--terracotta); font-size:11px; }.safety-grid strong { font:21px var(--serif); font-weight:400; }.safety-grid small { max-width:180px; margin-top:7px; color:rgba(36,54,47,.58); font-size:11px; }
.book-section { display:grid; grid-template-columns:.8fr 1fr; gap:10vw; background:var(--terracotta); color:var(--paper); }.book-copy { max-width:400px; }.book-copy .eyebrow { color:#f6ddcf; }.book-copy h2 { color:var(--paper); }.book-copy h2 i { color:#ffe7d3; }.book-copy > p { color:#f6ddcf; font-size:14px; }.book-note { display:flex; flex-wrap:wrap; gap:9px; margin-top:34px; }.book-note span { padding:8px 11px; border:1px solid rgba(247,241,232,.45); border-radius:999px; font-size:10px; }.booking-panel { padding:30px; background:var(--paper); color:var(--ink); box-shadow:var(--shadow); }.panel-top { display:flex; justify-content:space-between; margin-bottom:28px; color:var(--terracotta); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }.booking-form label { display:block; margin-bottom:16px; color:rgba(36,54,47,.6); font-size:11px; }.booking-form input,.booking-form select,.booking-form textarea { display:block; width:100%; margin-top:7px; padding:12px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; color:var(--ink); resize:vertical; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:22px; }.booking-form .button { width:100%; margin-top:10px; }.form-feedback { min-height:18px; margin:12px 0 0; color:var(--ink); font-size:12px; }.form-feedback.is-error { color:var(--terracotta); }.form-privacy { margin:14px 0 0; color:rgba(36,54,47,.52); font-size:10px; }
.faq-section { display:grid; grid-template-columns:.7fr 1fr; gap:10vw; max-width:1440px; margin:auto; padding:100px 5vw; background:var(--paper); }.faq-list { max-width:650px; }.faq-list details { border-top:1px solid var(--line); padding:18px 0; }.faq-list details:last-of-type { border-bottom:1px solid var(--line); }.faq-list summary { cursor:pointer; font:20px var(--serif); list-style:none; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary::after { content:"+"; float:right; color:var(--terracotta); font:22px var(--sans); }.faq-list details[open] summary::after { content:"−"; }.faq-list details p { max-width:510px; margin:12px 0 0; color:rgba(36,54,47,.61); font-size:12px; }.faq-footer { display:flex; flex-direction:column; gap:6px; margin-top:45px; }.faq-footer span,.faq-footer small { color:rgba(36,54,47,.52); font-size:10px; letter-spacing:.13em; text-transform:uppercase; }.faq-footer strong { font:21px/1.1 var(--serif); font-weight:400; }.faq-footer small { letter-spacing:0; text-transform:none; }
.mobile-sticky { display:none; }.site-footer { display:flex; justify-content:space-between; gap:24px; padding:18px 5vw 26px; background:var(--ink); color:#cbd3c9; font-size:10px; }
@media (max-width:900px) { section { padding:76px 6vw; }.hero,.principles-section,.services-heading,.flow-section,.safety-section,.book-section,.faq-section { grid-template-columns:1fr; gap:45px; }.hero-art { min-height:480px; }.principles-grid { max-width:650px; }.services-heading { margin-top:45px; }.flow-art { min-height:390px; max-width:620px; }.safety-grid { max-width:650px; }.booking-panel { max-width:650px; }.faq-list { max-width:650px; } }
@media (max-width:620px) { .concept-bar { padding:8px 6vw; font-size:9px; }.concept-bar span { display:block; margin:4px 0 0; }.site-header { padding:18px 6vw; }.desktop-nav { display:none; }.nav-cta { font-size:11px; }.hero { padding-top:62px; }.hero h1 { font-size:clamp(47px,14vw,74px); }.hero-lede { font-size:14px; }.hero-art { min-height:360px; border-radius:130px 130px 10px 10px; }.art-frame { left:27px; }.art-hand { transform:translateX(-50%) scale(.78) rotate(-12deg); top:125px; }.art-bowl { bottom:60px; }.principles-grid,.safety-grid { grid-template-columns:1fr; }.principles-grid article { min-height:190px; }.principles-grid h3 { margin-top:44px; }.section-kicker { align-items:flex-start; gap:14px; flex-direction:column; }.services-heading { margin:40px 0 30px; }.service-card { grid-template-columns:36px 1fr 24px; gap:10px; }.service-price { grid-column:2; grid-row:2; font-size:19px; }.service-plus { grid-column:3; grid-row:1 / span 2; }.service-main strong { font-size:20px; }.flow-card { width:170px; height:230px; padding:14px; }.flow-card-front strong { font-size:25px; }.flow-stroke { height:280px; }.form-row { grid-template-columns:1fr; gap:0; }.booking-panel { padding:22px; }.faq-list summary { font-size:18px; }.site-footer { flex-direction:column; padding-bottom:85px; }.mobile-sticky { position:fixed; z-index:20; right:0; bottom:0; left:0; display:grid; grid-template-columns:1fr 1fr; padding:9px 6vw calc(9px + env(safe-area-inset-bottom)); background:rgba(36,54,47,.97); }.mobile-sticky a { padding:10px; color:var(--paper); font-size:11px; text-align:center; text-decoration:none; }.mobile-sticky a + a { background:var(--terracotta); border-radius:7px 22px 7px 22px; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } }