:root { --navy:#001441; --navy-deep:#000c28; --gold:#c89c51; --gold-light:#ecd28f; --ivory:#eee9df; --ink:#101b2c; --line:rgba(200,156,81,.28); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
body { margin:0; color:var(--ink); background:var(--ivory); font-family:"Noto Serif TC",serif; -webkit-font-smoothing:antialiased; }
body.menu-open { overflow:hidden; }
a { color:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible { outline:3px solid var(--gold-light); outline-offset:5px; }

.site-header { position:fixed; z-index:50; top:0; left:0; right:0; height:92px; padding:0 clamp(22px,4.5vw,76px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; color:white; border-bottom:1px solid rgba(255,255,255,.16); transition:height .35s,background .35s,box-shadow .35s; }
.site-header.scrolled { height:72px; background:rgba(0,20,65,.95); box-shadow:0 12px 38px rgba(0,8,28,.16); backdrop-filter:blur(16px); }
.brand { width:fit-content; display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand img { width:34px; height:45px; object-fit:contain; object-position:center; }
.brand>span { display:flex; flex-direction:column; }
.brand strong { color:var(--gold-light); font-size:17px; font-weight:600; letter-spacing:.14em; }
.brand small { margin-top:5px; color:#e0e3e9; font-family:Montserrat,sans-serif; font-size:10px; letter-spacing:.16em; }
nav { display:flex; align-items:center; gap:clamp(27px,3vw,52px); }
nav a { color:#f0f1f4; font-family:Montserrat,sans-serif; font-size:12px; letter-spacing:.1em; text-decoration:none; }
nav a span { margin-right:8px; color:var(--gold-light); font-size:10px; }
nav a:hover { color:var(--gold-light); }
.header-reserve { justify-self:end; min-height:44px; display:flex; align-items:center; color:var(--gold-light); font-family:Montserrat,sans-serif; font-size:11px; letter-spacing:.13em; text-decoration:none; }
.header-reserve i { margin-left:14px; font-style:normal; font-size:13px; }
.menu-button { display:none; }

.hero { position:relative; min-height:720px; height:100svh; overflow:hidden; color:white; background:var(--navy); }
.hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.025); transition:transform .1s linear; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,12,40,.93) 0%,rgba(0,12,40,.65) 37%,rgba(0,12,40,.06) 70%),linear-gradient(0deg,rgba(0,12,40,.45),transparent 40%); }
.hero-content { position:relative; z-index:2; width:min(1180px,calc(100% - 50px)); height:100%; margin:0 auto; padding-top:110px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.hero-number { position:absolute; right:0; top:48%; margin:0; color:rgba(255,255,255,.68); font-family:Montserrat,sans-serif; font-size:11px; letter-spacing:.18em; writing-mode:vertical-rl; }
.hero-kicker { margin:0 0 24px; display:flex; align-items:center; gap:13px; color:var(--gold-light); font-family:Montserrat,sans-serif; font-size:12px; letter-spacing:.19em; }
.hero-kicker::before { content:""; width:42px; height:1px; background:var(--gold); }
.hero h1 { margin:0; max-width:860px; font-size:clamp(46px,5.5vw,82px); font-weight:500; line-height:1.33; letter-spacing:.01em; text-wrap:balance; }
.hero h1 em { color:var(--gold-light); font-style:normal; }
.hero-en { margin:27px 0 0; color:rgba(255,255,255,.86); font-family:"Cormorant Garamond",serif; font-size:22px; line-height:1.25; letter-spacing:.1em; }
.circle-link { position:absolute; right:7%; bottom:12%; width:132px; height:132px; padding:0 20px; display:flex; align-items:center; justify-content:space-between; color:var(--gold-light); border:1px solid rgba(236,210,143,.62); border-radius:50%; text-decoration:none; transition:.3s; }
.circle-link span { font-size:15px; line-height:1.5; }
.circle-link small { font-family:Montserrat,sans-serif; font-size:10px; letter-spacing:.14em; }
.circle-link i { font-style:normal; font-size:18px; }
.circle-link:hover { color:var(--navy); background:var(--gold-light); transform:rotate(6deg); }
.scroll-cue { position:absolute; z-index:3; left:clamp(25px,4.5vw,74px); bottom:35px; display:flex; align-items:center; gap:14px; color:rgba(255,255,255,.76); font-family:Montserrat,sans-serif; font-size:11px; letter-spacing:.16em; text-decoration:none; }
.scroll-cue span { width:42px; height:1px; background:var(--gold); }
.image-caption { position:absolute; z-index:2; right:18px; bottom:14px; margin:0; color:rgba(255,255,255,.72); font-family:Montserrat,sans-serif; font-size:11px; letter-spacing:.08em; }

.philosophy { position:relative; min-height:740px; padding:145px max(7vw,24px) 170px; display:grid; grid-template-columns:1.15fr .85fr; gap:11%; align-items:center; background:var(--ivory); overflow:hidden; }
.section-label { margin:0 0 30px; color:#70572f; font-family:Montserrat,sans-serif; font-size:12px; font-weight:600; letter-spacing:.15em; }
.philosophy-title h2 { margin:0; font-size:clamp(54px,7vw,94px); font-weight:500; line-height:1.2; letter-spacing:-.04em; }
.philosophy-title h2 span { color:var(--gold); }
.philosophy-copy { max-width:500px; align-self:end; }
.philosophy-copy .quote { margin:0 0 39px; color:var(--navy); font-family:"Cormorant Garamond",serif; font-size:clamp(25px,2.7vw,38px); font-style:italic; line-height:1.15; letter-spacing:.02em; }
.philosophy-copy>p:not(.quote) { color:#505156; font-size:16px; line-height:2.05; }
.philosophy-line { position:absolute; left:0; right:0; bottom:35px; display:flex; align-items:center; gap:35px; color:rgba(0,20,65,.12); font-family:"Cormorant Garamond",serif; font-size:clamp(70px,11vw,155px); line-height:1; white-space:nowrap; }
.philosophy-line i { flex:1; height:1px; background:rgba(0,20,65,.13); }

.space { min-height:760px; display:grid; grid-template-columns:54% 46%; background:var(--navy); color:white; }
.space-visual { position:relative; min-height:760px; overflow:hidden; }
.space-visual img { width:100%; height:100%; object-fit:cover; object-position:65% center; filter:saturate(.78) brightness(.74); transition:transform 1s ease; }
.space-visual:hover img { transform:scale(1.025); }
.space-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 65%,var(--navy)); }
.visual-index { position:absolute; z-index:2; left:30px; bottom:28px; color:rgba(255,255,255,.84); font-family:Montserrat,sans-serif; font-size:12px; letter-spacing:.14em; }
.space-copy { padding:120px 8vw 95px 6vw; align-self:center; }
.space-copy .section-label { color:var(--gold); }
.space-copy h2 { margin:0; font-size:clamp(39px,4.3vw,62px); font-weight:500; line-height:1.45; letter-spacing:-.03em; }
.space-lead { max-width:520px; margin:25px 0 50px; color:#d0d4dd; font-size:16px; line-height:1.95; }
.feature-list { border-top:1px solid var(--line); }
.feature-list article { min-height:108px; padding:24px 0; display:grid; grid-template-columns:48px 1fr; gap:18px; border-bottom:1px solid var(--line); }
.feature-list article>span { color:var(--gold-light); font-family:Montserrat,sans-serif; font-size:12px; letter-spacing:.08em; }
.feature-list h3 { margin:0 0 9px; color:var(--gold-light); font-size:19px; font-weight:500; }
.feature-list p { margin:0; color:#c6cbd4; font-size:14px; line-height:1.75; }

.reserve { padding:145px max(7vw,24px) 0; color:var(--ink); background:var(--ivory); }
.reserve-heading { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:9%; margin-bottom:75px; }
.reserve-heading .section-label { grid-column:1/-1; margin-bottom:0; }
.reserve-heading h2 { margin:0; font-size:clamp(52px,6.5vw,90px); font-weight:500; line-height:1.2; letter-spacing:-.05em; }
.reserve-heading h2 span { color:var(--gold); }
.reserve-heading>p { max-width:420px; margin:0 0 13px; color:#52545a; font-size:16px; line-height:1.95; }
.price-list { border-top:1px solid rgba(0,20,65,.25); }
.price-list article { min-height:158px; display:grid; grid-template-columns:1.1fr 1fr .7fr; align-items:center; gap:30px; border-bottom:1px solid rgba(0,20,65,.22); transition:background .25s; }
.price-list article:hover { background:rgba(200,156,81,.08); }
.price-list article>p { display:flex; align-items:center; gap:15px; font-family:Montserrat,sans-serif; font-size:14px; letter-spacing:.08em; }
.price-list article>p i { width:52px; height:1px; background:var(--gold); }
.price-list article>div small,.price-list article>div strong { display:block; }
.price-list article>div small { margin-bottom:8px; color:#70572f; font-family:Montserrat,sans-serif; font-size:11px; font-weight:600; letter-spacing:.12em; }
.price-list article>div strong { color:var(--navy); font-size:20px; font-weight:500; }
.price-list article>b { justify-self:end; color:var(--navy); font-family:"Cormorant Garamond",serif; font-size:clamp(46px,5vw,68px); font-weight:500; }
.price-list article>b small { margin-right:10px; color:#70572f; font-family:Montserrat,sans-serif; font-size:11px; letter-spacing:.1em; }
.reserve-cta { margin-top:95px; min-height:270px; padding:55px clamp(28px,5vw,70px); display:flex; align-items:center; justify-content:space-between; color:white; background:var(--navy); }
.reserve-cta p { margin:0 0 12px; color:var(--gold-light); font-family:Montserrat,sans-serif; font-size:11px; letter-spacing:.18em; }
.reserve-cta h3 { margin:0; font-size:clamp(36px,5vw,64px); font-weight:500; }
.reserve-cta a { width:178px; height:178px; display:flex; align-items:center; justify-content:center; gap:16px; color:var(--navy); background:linear-gradient(135deg,var(--gold-light),var(--gold)); border-radius:50%; font-size:15px; font-weight:600; text-decoration:none; transition:.3s; }
.reserve-cta a:hover { transform:rotate(5deg) scale(1.03); }
.reserve-cta a span { font-size:17px; }
.location { display:grid; grid-template-columns:1fr 1fr auto; gap:50px; padding:70px 0; align-items:end; }
.location small { color:#70572f; font-family:Montserrat,sans-serif; font-size:11px; font-weight:600; letter-spacing:.12em; }
.location p { margin:10px 0 0; color:var(--navy); font-size:16px; line-height:1.75; }
.location>a { min-height:44px; display:flex; align-items:center; color:var(--navy); font-family:Montserrat,sans-serif; font-size:11px; font-weight:600; letter-spacing:.1em; text-underline-offset:7px; }
footer { min-height:170px; padding:32px 0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-top:1px solid rgba(0,20,65,.18); }
footer img { width:105px; height:130px; object-fit:contain; }
footer p { margin:0; color:#57595e; font-family:Montserrat,sans-serif; font-size:11px; letter-spacing:.07em; }
footer p:last-child { justify-self:end; }
.mobile-reserve { display:none; }
.reveal.reveal-ready { opacity:0; transform:translateY(28px); transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.reveal-ready.visible { opacity:1; transform:none; }

@media (max-width:820px) {
  html { scroll-padding-top:70px; }
  body { padding-bottom:76px; }
  .site-header { height:70px; padding:0 17px; grid-template-columns:1fr auto; }
  .site-header.scrolled { height:64px; }
  .brand img { width:28px; height:37px; }
  .brand strong { font-size:15px; }.brand small { font-size:10px; }
  .header-reserve { display:none; }
  .menu-button { position:relative; z-index:2; width:45px; height:45px; display:grid; place-content:center; gap:7px; border:0; background:transparent; }
  .menu-button span { width:24px; height:1px; background:var(--gold-light); transition:.25s; }
  .menu-open .menu-button span:first-child { transform:translateY(4px) rotate(45deg); }.menu-open .menu-button span:last-child { transform:translateY(-4px) rotate(-45deg); }
  nav { position:fixed; inset:0; padding:120px 30px 100px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:35px; background:rgba(0,20,65,.98); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s,visibility .3s; }
  .menu-open nav { opacity:1; visibility:visible; pointer-events:auto; }
  nav a { font-family:"Cormorant Garamond",serif; font-size:38px; }
  nav a span { font-family:Montserrat,sans-serif; font-size:11px; }
  .hero { min-height:740px; height:100svh; }
  .hero-image { object-position:57% center; }
  .hero-overlay { background:linear-gradient(0deg,rgba(0,12,40,.95) 0%,rgba(0,12,40,.73) 55%,rgba(0,12,40,.3) 100%),linear-gradient(90deg,rgba(0,12,40,.65),transparent); }
  .hero-content { width:calc(100% - 36px); padding:100px 0 98px; justify-content:flex-end; }
  .hero-number { display:none; }
  .hero-kicker { margin-bottom:16px; font-size:11px; letter-spacing:.13em; }
  .hero-kicker::before { width:27px; }
  .hero h1 { font-size:clamp(44px,7vw,56px); line-height:1.38; }
  .hero-en { margin-top:18px; font-size:16px; }
  .circle-link { position:static; width:100%; height:54px; margin-top:27px; padding:0 20px; border-radius:0; }
  .circle-link span { font-size:15px; }.circle-link span br,.circle-link small { display:none; }
  .scroll-cue { display:none; }
  .image-caption { right:9px; bottom:8px; font-size:10px; }
  .philosophy { min-height:auto; padding:90px 20px 130px; display:block; }
  .philosophy-title h2 { font-size:50px; line-height:1.35; }
  .philosophy-copy { margin-top:55px; }
  .philosophy-copy .quote { font-size:29px; }
  .philosophy-copy>p:not(.quote) { font-size:15px; line-height:1.95; }
  .philosophy-line { bottom:28px; gap:15px; font-size:66px; }
  .space { display:block; }
  .space-visual { min-height:430px; }
  .space-visual img { object-position:61% center; }
  .space-visual::after { background:linear-gradient(0deg,var(--navy),transparent 38%); }
  .space-copy { padding:65px 20px 85px; }
  .space-copy h2 { font-size:36px; }
  .space-lead { margin:22px 0 42px; font-size:15px; }
  .reserve { padding:90px 20px 0; }
  .reserve-heading { display:block; margin-bottom:45px; }
  .reserve-heading .section-label { margin-bottom:27px; }
  .reserve-heading h2 { font-size:48px; line-height:1.3; }
  .reserve-heading>p { margin-top:25px; font-size:15px; }
  .price-list article { min-height:142px; grid-template-columns:1fr auto; gap:10px; }
  .price-list article>p { grid-column:1/-1; align-self:end; margin:0; }
  .price-list article>div { align-self:start; }
  .price-list article>b { align-self:start; font-size:49px; }
  .reserve-cta { min-height:255px; margin:65px -20px 0; padding:35px 20px; display:block; text-align:center; }
  .reserve-cta h3 { font-size:39px; }
  .reserve-cta a { width:100%; height:56px; margin-top:32px; border-radius:0; }
  .location { grid-template-columns:1fr 1fr; gap:35px 20px; padding:55px 0; }
  .location>a { grid-column:1/-1; }
  footer { min-height:165px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; }
  footer img { width:82px; height:102px; }
  footer p { width:100%; order:2; }
  footer p:last-child { width:auto; order:1; }
  .mobile-reserve { position:fixed; z-index:60; left:0; right:0; bottom:0; min-height:76px; padding:9px 11px 9px 17px; padding-bottom:calc(9px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:12px; color:white; background:rgba(0,20,65,.97); border-top:1px solid rgba(200,156,81,.35); backdrop-filter:blur(16px); }
  .mobile-reserve>div { flex:1; display:flex; flex-direction:column; }
  .mobile-reserve small { color:var(--gold-light); font-family:Montserrat,sans-serif; font-size:10px; letter-spacing:.12em; }
  .mobile-reserve strong { margin-top:4px; font-size:14px; font-weight:500; }
  .mobile-reserve a { min-width:128px; height:50px; padding:0 18px; display:flex; align-items:center; justify-content:center; gap:12px; color:var(--navy); background:linear-gradient(135deg,var(--gold-light),var(--gold)); font-size:14px; font-weight:600; text-decoration:none; }
}
@media (max-width:500px) {
  .hero h1 { font-size:clamp(31px,9.7vw,44px); white-space:nowrap; }
}
@media (max-width:360px) {
  .philosophy-title h2 { font-size:44px; }
  .space-copy h2 { font-size:32px; }
  .reserve-heading h2 { font-size:40px; }
  .price-list article>b { font-size:44px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } .reveal { opacity:1; transform:none; } }