@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Noto+Serif+SC:wght@400;500;600&display=swap');
:root{--paper:#e9e7e0;--ink:#292c2b;--soft:#787e79;--line:rgba(42,47,44,.2);--serif:'Noto Serif SC','Songti SC',serif;--sans:'DM Sans',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:10;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E")}a{color:inherit;text-decoration:none}button{font:inherit}.filters{position:absolute;width:0;height:0}.header{height:86px;position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:0 6%;border-bottom:1px solid rgba(44,50,47,.12)}.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:20px;letter-spacing:.12em}.brand-mark{font-size:32px;font-family:serif;line-height:1}.brand small{display:block;font:9px var(--sans);letter-spacing:.32em;margin-top:3px}.header nav{display:flex;gap:40px;align-items:center;font-size:12px;letter-spacing:.08em}.nav-cta{border:1px solid #858b84;padding:12px 18px;border-radius:50px}.nav-cta span{margin-left:20px}.hero{height:100svh;min-height:680px;position:relative;overflow:hidden;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 48%,#dedfd9 0%,#e8e8e2 48%,#f0eee8 100%)}.hero:after,.sticky-scene:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 20%,rgba(236,235,228,.36) 80%);pointer-events:none}.hero-content{text-align:center;position:relative;z-index:2;margin-top:36px}.eyebrow,.overline,.scene-kicker{font-size:10px;letter-spacing:.3em;font-weight:600}.eyebrow{display:flex;align-items:center;justify-content:center;gap:13px;color:#646d68}.eyebrow span{width:24px;height:1px;background:#89908a}.hero h1{font:500 clamp(39px,5.2vw,76px)/1.3 var(--serif);letter-spacing:.09em;margin:25px 0}.hero h1 span{padding:0 .08em;color:#8b958b}.hero-sub{font:15px var(--serif);letter-spacing:.25em;color:#59615d}.text-link{display:inline-block;margin-top:31px;border-bottom:1px solid #737d74;padding-bottom:11px;font-size:12px;letter-spacing:.12em}.text-link span{margin-left:20px}.hero-bottom{position:absolute;bottom:32px;left:6%;right:6%;display:flex;align-items:end;justify-content:space-between;font-size:9px;letter-spacing:.18em;color:#707972;z-index:2}.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:12px;letter-spacing:.16em}.scroll-cue b{font-size:19px;font-weight:400;animation:bob 2s infinite}@keyframes bob{50%{transform:translateY(6px)}}.ink-art{position:absolute;pointer-events:none;filter:url(#ink-warp);opacity:.72}.ink-art i{position:absolute;display:block;border-radius:45% 55% 49% 51%;mix-blend-mode:multiply;filter:blur(12px)}.hero-ink{width:min(75vw,1100px);height:76%;left:50%;top:48%;transform:translate(-50%,-50%);opacity:.52}.ink-art i:nth-child(1){width:39%;height:42%;left:30%;top:27%;background:radial-gradient(ellipse,#344b44 0%,#6b8178 34%,transparent 74%)}.ink-art i:nth-child(2){width:32%;height:40%;left:16%;top:19%;background:radial-gradient(ellipse,#899b8e 0%,#aab8a9 36%,transparent 75%)}.ink-art i:nth-child(3){width:32%;height:41%;right:13%;top:20%;background:radial-gradient(ellipse,#899d92 0%,#a7b6a9 38%,transparent 75%)}.ink-art i:nth-child(4){width:35%;height:32%;left:18%;top:48%;background:radial-gradient(ellipse,#687e74 0%,#a1afa3 39%,transparent 73%)}.ink-art i:nth-child(5){width:35%;height:32%;right:17%;top:48%;background:radial-gradient(ellipse,#6d847a 0%,#a0aea2 39%,transparent 73%)}.ink-art i:nth-child(6){width:22%;height:35%;left:39%;top:39%;background:radial-gradient(ellipse,#354940 0%,#8f9e91 42%,transparent 74%)}.journey{height:300vh;position:relative;background:#d9ded7}.sticky-scene{height:100vh;min-height:600px;position:sticky;top:0;overflow:hidden;display:flex;align-items:center}.scene-ink{width:85vw;height:110%;right:-20%;top:-4%;opacity:.75;transform:rotate(-15deg)}.scene-ink i:nth-child(1){background:radial-gradient(ellipse,#263e38,#637b6c 35%,transparent 73%)}.scene-ink i:nth-child(6){background:radial-gradient(ellipse,#283c35,#708578 40%,transparent 73%)}.scene-label,.section-index{position:absolute;top:48px;left:6%;font-size:10px;letter-spacing:.2em;color:#707d72}.scene-copy{position:relative;z-index:2;margin-left:12%;max-width:760px}.scene-kicker,.overline{color:#718075}.phrases{position:relative;height:205px;margin:33px 0 20px}.phrase{position:absolute;inset:0;margin:0;opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;font:400 clamp(38px,4.4vw,67px)/1.6 var(--serif);letter-spacing:.08em}.phrase.active{opacity:1;transform:translateY(0)}em{font-style:normal;color:#73877a}.scene-description{font:14px/2.2 var(--serif);letter-spacing:.08em;color:#58635c}.scene-progress{position:absolute;z-index:2;bottom:55px;left:6%;display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.1em}.scene-progress div{width:100px;height:1px;background:#a2aca3}.scene-progress b{display:block;width:0;height:1px;background:#35493e}.about,.experience{position:relative;padding:150px 8% 140px}.section-index{top:48px}.section-index span{padding:0 8px;color:#a2aaa0}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:12%;max-width:1280px;margin:auto}.about h2,.experience h2{font:400 clamp(42px,5vw,70px)/1.5 var(--serif);letter-spacing:.08em;margin:26px 0}.about-text{padding-top:30px;color:#5d665f;font:15px/2.4 var(--serif)}.asterisk{font:36px serif;color:#879b8a}.about-text p{max-width:520px}.tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}.tags span{font:11px var(--sans);letter-spacing:.08em;border:1px solid #b9c0b7;border-radius:50px;padding:10px 16px}.booking{position:relative;overflow:hidden;background:#263b35;color:#e5e9df;min-height:720px;display:flex;align-items:center}.booking:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 80% 40%,#547065 0%,transparent 55%)}.booking-ink{width:85%;height:120%;right:-15%;top:-10%;opacity:.45;transform:rotate(30deg)}.booking-ink i{filter:blur(22px)}.booking-inner{position:relative;z-index:2;margin:100px 12%;width:min(640px,76%)}.light{color:#a2b5a5}.booking h2{font:400 clamp(45px,5.4vw,78px)/1.5 var(--serif);letter-spacing:.08em;margin:34px 0}.booking h2 em{color:#aabcae}.booking-inner>p:not(.overline):not(.copy-status){font:14px/2.3 var(--serif);color:#bbc8bd}.wechat{display:flex;align-items:center;gap:18px;border-top:1px solid #85978b;border-bottom:1px solid #85978b;margin-top:42px;padding:22px 0}.wechat-icon{font-size:34px}.wechat div{flex:1;min-width:0}.wechat small{display:block;font-size:10px;letter-spacing:.14em;color:#aab9ad;margin-bottom:7px}.wechat strong{font-size:clamp(16px,2vw,22px);font-weight:400;letter-spacing:.05em;overflow-wrap:anywhere}.wechat button{color:#ecf0e9;background:transparent;border:1px solid #9caea1;border-radius:30px;padding:12px 17px;cursor:pointer;font-size:11px;white-space:nowrap}.wechat button span{margin-left:12px}.wechat button:hover{background:#e0e9de;color:#263b35}.copy-status{font-size:12px;min-height:1em}.booking-side{position:absolute;right:5%;bottom:45px;font-size:9px;letter-spacing:.2em;color:#a6b8aa}.booking-side span{font-size:20px;margin:0 10px}.experience{background:#eeede7}.experience-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;max-width:1280px;margin:auto}.experience-heading>p{font:14px/2.2 var(--serif);color:#737d73;margin-bottom:50px}.screens{max-width:1280px;margin:30px auto 0;display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:start}.screen{margin:0;background:#dedfd8;padding:10px;box-shadow:0 20px 50px rgba(49,61,50,.08)}.screen-secondary{margin-top:90px}.screen-bar{height:35px;display:flex;justify-content:space-between;align-items:center;color:#89948a;font-size:9px;letter-spacing:.12em;padding:0 7px}.screen img{display:block;width:100%;height:auto}.screen figcaption{display:flex;justify-content:space-between;padding:17px 5px 8px;font-size:10px;letter-spacing:.08em;color:#68776b}.experience-note{text-align:right;font-size:11px;color:#929b91;margin:25px auto 0;max-width:1280px}footer{background:#dce1d8;padding:55px 6% 30px}.footer-brand{font:28px var(--serif)}.footer-brand span{font-size:20px;margin-left:8px}footer p{font:13px var(--serif);color:#778277;margin:20px 0 60px}footer div{display:flex;justify-content:space-between;border-top:1px solid #bec8bc;padding-top:20px;font-size:10px;letter-spacing:.13em;color:#778277}@media(max-width:700px){.header{height:70px}.header nav{gap:16px}.header nav>a:not(.nav-cta){display:none}.hero{min-height:600px}.hero h1{font-size:37px;letter-spacing:.02em}.hero-sub{font-size:13px}.hero-ink{width:130vw;height:65%}.hero-bottom>span{font-size:8px;max-width:85px}.scene-ink{width:130vw;right:-65%;opacity:.65}.scene-copy{margin:0 8%}.phrases{height:155px}.phrase{font-size:36px;line-height:1.6}.about,.experience{padding:115px 7% 85px}.about-grid{grid-template-columns:1fr;gap:0}.about h2,.experience h2{font-size:44px}.about-text{padding-top:0}.booking{min-height:650px}.booking-inner{margin:100px 7%;width:86%}.booking h2{font-size:45px}.wechat{gap:10px}.wechat-icon{font-size:25px}.wechat button{padding:10px}.wechat button span{margin-left:4px}.booking-side{font-size:9px}.experience-heading{display:block}.experience-heading>p{margin:0 0 30px}.screens{grid-template-columns:1fr;gap:30px}.screen-secondary{margin-top:0}.screen figcaption{font-size:9px}.experience-note{text-align:left;line-height:1.8}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scroll-cue b{animation:none}.phrase{transition:none}}

/* A single continuous canvas runs behind both the introduction and the story. */
.brand-mark,.footer-brand img{width:36px;height:36px;object-fit:contain;filter:brightness(0) saturate(100%) invert(20%) sepia(8%) saturate(791%) hue-rotate(96deg) brightness(90%)}
.footer-brand{display:inline-flex;align-items:center;gap:6px}
.footer-brand img{width:34px;height:34px}
.opening{position:relative;--journey-color:0;--ink-x:0px;--ink-y:0px;--ink-scale:1;--ink-rotate:0deg}
.opening-background{position:sticky;top:0;height:100svh;margin-bottom:-100svh;overflow:hidden;background:#eeede6;z-index:0;pointer-events:none}
.opening-background:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 52% 45%,#d1dbd1,#d9e0d7 58%,#e1e6dd);opacity:var(--journey-color)}
.opening-background:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 18%,rgba(239,238,231,.35) 88%)}
.opening-ink{width:min(100vw,1350px);height:100%;left:50%;top:0;opacity:.52;transform:translate(calc(-50% + var(--ink-x)),var(--ink-y)) rotate(var(--ink-rotate)) scale(var(--ink-scale));will-change:transform}
.opening-ink i{animation:ink-breathe 15s ease-in-out infinite alternate;transform-origin:center}
.opening-ink i:nth-child(2),.opening-ink i:nth-child(5){animation-delay:-5s;animation-duration:19s}
.opening-ink i:nth-child(3),.opening-ink i:nth-child(6){animation-delay:-9s;animation-duration:22s}
@keyframes ink-breathe{0%{transform:translate(-2%,-2%) scale(.96) rotate(-3deg)}100%{transform:translate(2%,3%) scale(1.08) rotate(4deg)}}
.hero,.journey,.sticky-scene{background:transparent}
.hero:after,.sticky-scene:after{display:none}
.hero,.journey{position:relative;z-index:1}
.about{background:linear-gradient(to bottom,#d9e0d7 0%,var(--paper) 220px)}
@media(max-width:700px){.opening-ink{width:150vw}.brand-mark{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){.opening-ink i{animation:none}}

/* Keep the title in place while the rest of the first screen emerges. */
.hero{height:190svh;min-height:0;display:block;overflow:visible;--reveal:1}
.hero-sticky{height:100svh;min-height:0;position:sticky;top:0;display:grid;place-items:center;overflow:hidden}
.js .hero{--reveal:0}
.js .hero .header,.js .hero-sub,.js .hero .text-link,.js .hero-bottom{opacity:var(--reveal)}
.js .hero .header,.js .hero .text-link,.js .hero-bottom{pointer-events:none}
.js .hero.revealed .header,.js .hero.revealed .text-link,.js .hero.revealed .hero-bottom{pointer-events:auto}
.hero-content{width:100%;padding:0 4%}
.scene-copy{width:min(86%,1050px);max-width:none}
.phrases{width:100%;height:clamp(205px,18vw,280px)}
.phrase{width:100%;white-space:nowrap}
@media(max-width:700px){
  .hero{height:180svh;min-height:0}
  .hero-sticky{min-height:0}
  .scene-copy{width:86%;margin:0 7%}
  .phrases{height:150px}
  .phrase{font-size:clamp(25px,6.8vw,36px);letter-spacing:.03em}
}
@media(prefers-reduced-motion:reduce){.hero{height:100svh}.js .hero .header,.js .hero-sub,.js .hero .text-link,.js .hero-bottom{opacity:1;pointer-events:auto}}

/* Give the title and navigation the full available screen width. */
.hero-content{width:100%;max-width:none;padding:0 2%}
.hero h1{width:100%;white-space:nowrap}
.hero h1 .title-name,.hero h1 .title-test{padding:0;color:inherit}
.hero h1 .title-divider{padding:0 .08em;color:#8b958b}
.hero .header{width:100%;left:0;right:0;padding-left:clamp(18px,4vw,64px);padding-right:clamp(18px,4vw,64px)}
@media(max-width:700px){
  .hero-content{padding:0 12px}
  .hero h1{white-space:normal;font-size:clamp(31px,8vw,44px);line-height:1.55}
  .hero h1 .title-name,.hero h1 .title-test{display:block}
  .hero h1 .title-divider{display:none}
  .hero .header{padding-left:18px;padding-right:18px}
  .hero .header nav>a:not(.nav-cta){display:none}
}

/* Distribute the navigation items across the entire viewport. */
.hero .header{display:grid;grid-template-columns:1fr 3fr;align-items:center;column-gap:clamp(24px,7vw,120px);width:100%;max-width:none}
.hero .header nav{display:flex;width:100%;justify-content:space-between;gap:16px}
@media(max-width:700px){
  .hero .header{display:flex;justify-content:space-between;gap:16px}
  .hero .header nav{width:auto;flex:0 0 auto}
}

/* Stretch the absolutely positioned header across the sticky viewport. */
.hero-sticky > .header{position:absolute;top:0;left:0;right:0;width:100%;max-width:none;box-sizing:border-box;padding-left:20px;padding-right:20px;justify-self:stretch}
@media(max-width:700px){.hero-sticky > .header{padding-left:12px;padding-right:12px}}

/* The next ink scene stays in place while both sections move over it. */
.about-booking{position:relative;isolation:isolate}
.about-booking-background{position:sticky;top:0;height:100svh;margin-bottom:-100svh;overflow:hidden;background:#263b35;pointer-events:none;z-index:-1}
.about-booking-background:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 80% 40%,#547065 0%,transparent 55%)}
.about-booking-background .booking-ink i{animation:ink-breathe 20s ease-in-out infinite alternate}
.about-booking .about{background:linear-gradient(to bottom,#d9e0d7 0%,var(--paper) 220px,var(--paper) 80%,rgba(233,231,224,.96) 94%,rgba(233,231,224,0) 100%);padding-bottom:200px}
.about-booking .booking{background:transparent}
.about-booking .booking:before{display:none}
@media(prefers-reduced-motion:reduce){.about-booking-background .booking-ink i{animation:none}}

.wechat-icon{width:36px;height:36px;object-fit:contain;flex:none;opacity:.88}
.wechat-id{display:inline-block;background:linear-gradient(105deg,#e5e9df 0%,#e5e9df 40%,#fff 48%,#fff 52%,#e5e9df 60%,#e5e9df 100%);background-size:300% 100%;background-position:100% 0;background-clip:text;-webkit-background-clip:text;color:transparent;animation:wechat-glint 5s linear infinite}
@keyframes wechat-glint{0%,80%{background-position:100% 0}100%{background-position:0 0}}
@media(prefers-reduced-motion:reduce){.wechat-id{animation:none;background:none;color:#e5e9df}}

/* A luminous sweep and a brief halo draw attention to the contact. */
.wechat-id{background:linear-gradient(105deg,#c4d4c5 0%,#d8e3d7 35%,#fff 46%,#fff 53%,#d8e3d7 64%,#c4d4c5 100%);background-size:300% 100%;background-position:100% 0;background-clip:text;-webkit-background-clip:text;color:transparent;animation:wechat-glint 5s linear infinite,wechat-halo 5s ease-in-out infinite}
@keyframes wechat-halo{0%,80%,100%{filter:drop-shadow(0 0 0 transparent)}90%{filter:drop-shadow(0 0 7px rgba(221,255,229,.95)) drop-shadow(0 0 18px rgba(167,230,185,.65))}}
@media(prefers-reduced-motion:reduce){.wechat-id{animation:none;background:none;color:#e5e9df;filter:none}}
.booking-side{display:flex;align-items:center;gap:10px}
.booking-side img{width:24px;height:24px;object-fit:contain;opacity:.8}
.experience-heading .ai-heading{white-space:nowrap;font-size:clamp(32px,4vw,60px)}
@media(max-width:700px){.experience-heading .ai-heading{font-size:clamp(25px,6.3vw,42px);letter-spacing:.03em}}
.about{overflow:hidden}
.about-grid,.about .section-index{position:relative;z-index:1}
.about .section-index{position:absolute}
.about-logo{display:block;width:38px;height:38px;object-fit:contain;filter:brightness(0) saturate(100%) invert(48%) sepia(9%) saturate(712%) hue-rotate(86deg) brightness(91%);margin-bottom:20px}
.about-ink{width:min(65vw,900px);height:110%;left:-15%;top:4%;opacity:.25;transform:rotate(-20deg)}
@media(max-width:700px){.about-ink{width:130vw;height:65%;left:-48%;top:2%;opacity:.21}}

.experience-contact{max-width:1280px;margin:70px auto 0;padding:28px 32px;display:flex;align-items:center;gap:18px;background:#2d433a;color:#e5e9df}
.experience-contact img{width:36px;height:36px;object-fit:contain}
.experience-contact div{flex:1;min-width:0}.experience-contact div span{display:block;color:#b7c8b9;font-size:10px;letter-spacing:.14em;margin-bottom:8px}.experience-contact .wechat-id{font-size:clamp(16px,2vw,22px);font-weight:400;letter-spacing:.05em;overflow-wrap:anywhere}.copy-contact{color:#ecf0e9;background:transparent;border:1px solid #9caea1;border-radius:30px;padding:12px 17px;cursor:pointer;font-size:11px;white-space:nowrap}.copy-contact:hover{background:#e0e9de;color:#263b35}.experience-copy-status{font-size:12px;color:#c2d1c4;margin:0}.experience-copy-status:empty{display:none}
@media(max-width:700px){.experience-contact{margin-top:45px;padding:20px 15px;gap:10px;flex-wrap:wrap}.experience-contact img{width:28px;height:28px}.copy-contact{padding:10px}.experience-copy-status:not(:empty){flex-basis:100%}}

/* Keep the final contact directly on the page background. */
.experience-contact{background:transparent;color:#354a3e;padding:0;justify-content:flex-start;gap:14px}
.experience-contact img{filter:brightness(0) saturate(100%) invert(24%) sepia(13%) saturate(742%) hue-rotate(93deg) brightness(91%)}
.experience-contact div{flex:0 1 auto}
.experience-contact div span{color:#354a3e}
.experience-contact .wechat-id{background-image:linear-gradient(105deg,#354a3e 0%,#354a3e 35%,#8caf96 46%,#e2f0dc 50%,#8caf96 54%,#354a3e 65%,#354a3e 100%)}
.experience-contact .copy-contact{color:#354a3e;border-color:#8c9b8d;margin-left:2px}
.experience-contact .copy-contact:hover{background:#354a3e;color:#f1f2eb}
.experience-contact .experience-copy-status{color:#52695a}
@media(prefers-reduced-motion:reduce){.experience-contact .wechat-id{background:none;color:#354a3e}}
