@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap');
:root{--teal:#0c6b73;--deep:#143e47;--tile:#e7f2ec;--cream:#f5ebd9;--orange:#e46a44;--ink:#234249}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:'Zen Maru Gothic',sans-serif;line-height:1.8;overflow-x:hidden}button,a{font:inherit}button{cursor:pointer}a{color:inherit}img{display:block;max-width:100%}.skip{position:absolute;left:-9999px;top:8px;background:#fff;padding:8px;z-index:100}.skip:focus{left:8px}.demo-banner{background:var(--deep);color:#fff;text-align:center;padding:6px 16px;font-size:10px;line-height:1.6}.header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:12px 3vw;background:var(--cream);border-bottom:3px solid var(--teal)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:20px;font-weight:900;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:47px;height:47px;border-radius:50%;background:var(--teal);color:#fff;font:400 28px/1 'Dela Gothic One',sans-serif}.brand small{display:block;font-size:9px;letter-spacing:.1em;color:var(--teal)}nav{display:flex;align-items:center;gap:25px}nav a{font-size:12px;font-weight:900;text-decoration:none}nav .back{border:2px solid var(--teal);border-radius:50px;padding:6px 16px}
.hero{position:relative;min-height:790px;padding:24px 3vw 80px;background-color:var(--tile);background-image:linear-gradient(#fff9 2px,transparent 2px),linear-gradient(90deg,#fff9 2px,transparent 2px);background-size:68px 68px;overflow:hidden}.hero-top,.hero-copy,.hero-letter,.hero-noren,.hero-photo,.hero-bottom{position:relative;z-index:1}.hero-top{display:flex;justify-content:space-between;border-top:2px solid var(--teal);padding-top:8px;font-size:11px;font-weight:900;letter-spacing:.1em}.hero-letter{position:absolute;z-index:0;top:20px;left:5vw;font:400 clamp(330px,44vw,690px)/1 'Dela Gothic One',sans-serif;color:var(--teal);opacity:.95;transform:rotate(-11deg)}.hero-photo{position:absolute;top:110px;right:4vw;width:50%;height:485px;border:10px solid var(--cream);box-shadow:18px 18px 0 var(--orange);overflow:hidden;border-radius:130px 130px 20px 20px}.hero-photo img{width:100%;height:100%;object-fit:cover}.hero-photo>span{position:absolute;right:12px;bottom:12px;padding:5px 12px;border-radius:30px;background:var(--cream);font-size:10px;font-weight:900}.hero-noren{position:absolute;right:7vw;top:59px;display:flex;gap:6px;z-index:3;transform-origin:top;animation:curtain 3s ease-in-out both;pointer-events:none}.hero-noren span{display:grid;place-items:end center;width:75px;height:185px;padding-bottom:35px;background:var(--teal);color:#fff;font:400 28px/1 'Dela Gothic One',sans-serif;border-radius:0 0 15px 15px;box-shadow:3px 0 0 #fff inset}.hero-noren span:nth-child(2){animation:sway 3s ease-in-out infinite alternate}.hero-copy{max-width:510px;margin:275px 0 0 4vw;padding:30px;background:var(--cream);border:3px solid var(--teal);box-shadow:12px 12px 0 var(--teal)}.kicker{margin:0;color:var(--teal);font-size:11px;font-weight:900;letter-spacing:.12em}.hero h1{margin:12px 0;font-size:clamp(45px,5.5vw,85px);line-height:1.2;letter-spacing:-.08em;font-weight:900}.hero-copy>p:not(.kicker){max-width:430px;font-size:13px}.hero-copy a{display:inline-flex;justify-content:space-between;gap:50px;margin-top:12px;padding:10px 18px;background:var(--orange);color:#fff;border-radius:30px;text-decoration:none;font-weight:900}.hero-copy small{display:block;margin-top:10px;font-size:10px}.hero-bottom{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-top:60px;background:var(--teal);padding:3px}.hero-bottom span{background:var(--cream);text-align:center;padding:10px;font-weight:900;font-size:12px}
.spaces{position:relative;display:grid;grid-template-columns:35% 65%;min-height:650px;padding:90px 5vw;background:var(--teal);color:#fff;overflow:hidden}.spaces:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#fff2 2px,transparent 2px),linear-gradient(90deg,#fff2 2px,transparent 2px);background-size:50px 50px}.spaces-heading,.bath-photo,.spaces-side{position:relative;z-index:1}.spaces-heading{padding:20px 3vw 0 0}.spaces-heading>span,.route-heading>span{font-size:12px;font-weight:900;letter-spacing:.18em}.spaces h2{margin:35px 0;font-size:clamp(42px,4.2vw,70px);line-height:1.3;letter-spacing:-.07em}.spaces h2 strong{color:#ffb887}.spaces-heading p{max-width:400px;font-size:13px}.bath-photo{align-self:start;border:10px solid #fff;border-radius:8px;box-shadow:15px 15px 0 var(--deep);overflow:hidden}.bath-photo img{width:100%;height:440px;object-fit:cover}.bath-photo span{position:absolute;left:0;bottom:0;padding:8px 12px;background:var(--cream);color:var(--deep);font-size:10px;font-weight:900}.spaces-side{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;border-top:2px solid #fff;margin-top:55px;padding-top:10px;font-size:11px}
.route{padding:100px 5vw 120px;background:var(--cream)}.route-heading{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:30px;align-items:end;max-width:1340px;margin:auto auto 55px;border-top:3px solid var(--teal);padding-top:12px}.route-heading h2{margin:0;font-size:clamp(65px,7vw,115px);line-height:1.1;letter-spacing:-.07em}.route-heading p{font-size:13px}.route-board{max-width:1340px;margin:auto;border:8px solid #fff;box-shadow:0 0 0 3px var(--teal)}.route-track{display:grid;grid-template-columns:repeat(4,1fr);background:var(--teal);gap:3px;padding:3px}.stop{display:grid;grid-template-columns:60px 1fr;gap:3px 10px;align-items:center;text-align:left;border:0;background:var(--tile);color:var(--ink);padding:19px 12px}.stop span{grid-row:span 2;display:grid;place-items:center;width:56px;height:56px;border:2px solid var(--teal);border-radius:50%;font-weight:900;font-size:20px}.stop strong{font-size:19px;font-weight:900;line-height:1.2}.stop small{font-size:10px}.stop.active,.stop:hover{background:var(--orange);color:#fff}.stop.active span,.stop:hover span{border-color:#fff}.route-panel{display:grid;grid-template-columns:55% 45%;background:var(--tile)}.route-photo{position:relative;min-height:570px;overflow:hidden}.route-photo img{width:100%;height:100%;object-fit:cover}.route-photo>span{position:absolute;right:15px;bottom:15px;background:var(--deep);color:#fff;border-radius:30px;padding:4px 12px;font-size:11px;font-weight:900}.photo-noren{position:absolute;top:0;left:50%;transform:translateX(-50%);display:flex;gap:3px;opacity:.93;pointer-events:none}.photo-noren span{width:65px;height:160px;padding-top:35px;background:var(--teal);color:#fff;text-align:center;font:400 24px/1 'Dela Gothic One',sans-serif;border-radius:0 0 12px 12px;transition:transform .6s ease}.route:hover .photo-noren span:first-child{transform:translateX(-20px) rotate(-6deg)}.route:hover .photo-noren span:last-child{transform:translateX(20px) rotate(6deg)}.route-copy{padding:45px 5vw 35px}.route-copy h3{margin:12px 0;font-size:clamp(40px,4vw,70px);letter-spacing:-.06em;line-height:1.2}.route-copy>p:not(.kicker){font-size:13px}.check-area{border-top:2px solid var(--teal);padding-top:20px;margin-top:30px}.check-area h4{margin:0 0 10px;font-size:15px}.checks{display:flex;flex-wrap:wrap;gap:7px}.check{border:2px solid var(--teal);border-radius:30px;padding:6px 11px;background:transparent;color:var(--ink);font-size:12px}.check.active,.check:hover{background:var(--teal);color:#fff}.route-copy dl{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:28px 0}.route-copy dt{font-size:11px;color:var(--teal)}.route-copy dd{margin:0;font-size:16px;font-weight:900}.reset{border:0;border-bottom:2px solid var(--teal);padding:5px 0;background:transparent;color:var(--teal);font-weight:900;font-size:12px}.route-copy small{display:block;margin-top:12px;font-size:10px}.stop:focus-visible,.check:focus-visible,.reset:focus-visible,a:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.closing{display:grid;grid-template-columns:35% 65%;gap:2vw;padding:75px 5vw 90px;background:var(--deep);color:#fff}.closing-mark{display:grid;place-items:center;width:min(27vw,300px);height:min(27vw,300px);border:7px solid #fff;border-radius:50%;font:400 clamp(120px,18vw,230px)/1 'Dela Gothic One',sans-serif;color:#fff}.closing>div:last-child>span{font-size:11px;font-weight:900;letter-spacing:.13em}.closing h2{margin:15px 0;font-size:clamp(42px,5vw,82px);line-height:1.25}.closing p{font-size:13px}.closing a{display:inline-block;margin-top:15px;border-radius:30px;background:var(--orange);padding:10px 17px;color:#fff;text-decoration:none;font-weight:900;font-size:12px}footer{display:flex;justify-content:space-between;gap:20px;padding:25px 5vw;background:#0c3038;color:#dce7e6;font-size:11px}footer a{text-decoration:none}
@keyframes curtain{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes sway{from{transform:rotate(0)}to{transform:rotate(2deg)}}
@media(max-width:1000px){.hero-photo{width:53%;height:420px}.hero-copy{margin-top:250px}.spaces{grid-template-columns:40% 60%}.route-heading{grid-template-columns:1fr 1.6fr}.route-heading p{grid-column:2}.stop{grid-template-columns:1fr}.stop span{width:46px;height:46px}.route-panel{grid-template-columns:50% 50%}.route-copy{padding:35px}}
@media(max-width:760px){.header nav a:not(.back){display:none}.hero{min-height:0}.hero-letter{top:45px;font-size:55vw}.hero-photo{position:relative;top:auto;right:auto;width:80%;height:360px;margin:60px 0 0 auto}.hero-noren{top:100px;right:15vw}.hero-copy{margin:-30px 8vw 0 0;max-width:460px}.hero-bottom{margin-top:65px}.spaces{display:block;padding:75px 6vw}.spaces-heading{padding:0}.spaces h2{font-size:clamp(55px,8vw,75px)}.bath-photo{margin-top:45px}.bath-photo img{height:350px}.route{padding:75px 6vw}.route-heading{grid-template-columns:1fr}.route-heading p{grid-column:1;max-width:500px}.route-track{grid-template-columns:repeat(2,1fr)}.route-panel{grid-template-columns:1fr}.route-photo{min-height:370px}.route-copy{padding:40px}.closing{grid-template-columns:1fr}.closing-mark{width:180px;height:180px;font-size:130px}}
@media(max-width:480px){.demo-banner{font-size:9px}.header{padding:12px 5vw}.brand{font-size:16px}.brand small{font-size:7px}.brand-mark{width:37px;height:37px;font-size:23px}nav .back{font-size:10px}.hero{padding:14px 5vw 45px}.hero-top{font-size:9px}.hero-letter{top:35px;font-size:63vw;left:1vw}.hero-photo{width:88%;height:265px;margin-top:65px;border-width:6px;box-shadow:9px 9px 0 var(--orange)}.hero-noren{top:100px;right:10vw}.hero-noren span{width:45px;height:110px;padding-bottom:20px;font-size:18px}.hero-copy{margin:0 4vw 0 0;padding:20px;box-shadow:7px 7px 0 var(--teal)}.hero h1{font-size:clamp(36px,10vw,55px)}.hero-copy>p:not(.kicker){font-size:12px}.hero-bottom{grid-template-columns:repeat(2,1fr);margin-top:40px}.spaces h2{font-size:clamp(42px,10vw,60px)}.bath-photo img{height:240px}.spaces-side{display:block;font-size:10px}.spaces-side span{display:block}.route{padding:65px 5vw}.route-heading h2{font-size:clamp(56px,14vw,80px)}.route-board{border-width:4px}.stop{display:block;padding:10px}.stop span{width:36px;height:36px;font-size:14px}.stop strong{display:block;font-size:15px}.stop small{display:block;font-size:9px}.route-photo{min-height:245px}.photo-noren span{width:43px;height:105px;padding-top:20px;font-size:16px}.route-copy{padding:25px 20px}.route-copy h3{font-size:40px}.closing{padding:65px 5vw}.closing h2{font-size:clamp(38px,10vw,55px)}footer{flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.hero-noren{transform:none}}

/* A paired entrance-and-bath photo spread replaces the decorative noren poster. */
.hero{min-height:0;padding:20px 3vw 55px;background:var(--cream);background-image:none}
.hero-top{border-color:var(--teal)}
.hero-photos{display:grid;grid-template-columns:1.35fr .65fr;gap:12px;margin-top:18px;height:520px}
.hero-photos .hero-photo{position:relative;top:auto;right:auto;width:auto;height:100%;margin:0;border:0;border-radius:0;box-shadow:none}
.hero-photos .hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-entrance img{object-position:center 48%}
.hero-bath img{object-position:46% center}
.hero-photos figcaption{position:absolute;bottom:12px;left:12px;padding:5px 10px;background:var(--deep);color:#fff;font-size:10px;font-weight:900}
.hero-copy{z-index:2;max-width:620px;margin:-95px auto 0;padding:18px 28px 22px;text-align:center;background:var(--tile);border:0;box-shadow:12px 12px 0 var(--teal)}
.hero-copy .kicker{font-size:12px}
.hero h1{margin:0;font-size:clamp(84px,10vw,150px);line-height:1.14;letter-spacing:.08em;color:var(--teal)}
.hero-copy>p:not(.kicker){max-width:none;margin:0 auto 12px;font-size:14px}
.hero-copy a{margin-top:4px;border-radius:0}
.hero-bottom{max-width:1000px;margin:45px auto 0}
@media(max-width:760px){.hero-photos{height:380px;grid-template-columns:1.2fr .8fr;gap:7px}.hero-copy{max-width:520px;margin:-45px auto 0}.hero h1{font-size:clamp(76px,13vw,110px)}}
@media(max-width:480px){.hero{padding:14px 5vw 38px}.hero-photos{height:260px;gap:5px;margin-top:12px}.hero-photos figcaption{bottom:5px;left:5px;padding:3px 5px;font-size:8px}.hero-copy{width:94%;margin:-12px auto 0;padding:14px 14px 20px;box-shadow:7px 7px 0 var(--teal)}.hero-copy .kicker{font-size:10px}.hero h1{font-size:clamp(65px,18vw,82px)}.hero-copy>p:not(.kicker){font-size:11px}.hero-copy a{font-size:12px}.hero-bottom{margin-top:30px}}