/* Ritual Café — architectural, warm and deliberately unhurried. */
:root {
  --espresso:#2b140a;
  --roast:#4a2615;
  --caramel:#b07a4f;
  --crema:#d9b48a;
  --latte:#f1e4d1;
  --milk:#fbf7f1;
  --stucco:#fff;
  --ink:#1d1a17;
  --brass:#c6a46a;
  --ease:cubic-bezier(.22,1,.36,1);
  --header-height:116px
}
*,*::before,*::after {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--milk);
  color:var(--ink);
  font-family:'Jost',sans-serif;
  font-size:16px;
  font-weight:300;
  line-height:1.65;
  overflow-x:hidden
}
body.menu-open {
  overflow:hidden
}
button,a {
  font:inherit
}
button {
  cursor:pointer
}
a {
  color:inherit
}
img,svg {
  display:block;
  max-width:100%
}
img {
  object-fit:cover
}
h1,h2,h3,p,figure {
  margin:0
}
h1,h2,h3 {
  font-family:'Cormorant Garamond',serif;
  font-weight:400;
  line-height:1.04
}
em {
  font-weight:300
}
::selection {
  background:var(--crema);
  color:var(--espresso)
}
:focus-visible {
  outline:2px solid var(--caramel);
  outline-offset:5px
}
.sr-only,.visually-hidden {
  position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.skip-link {
  position:fixed;
  top:8px;
  left:8px;
  z-index:10000;
  padding:10px 16px;
  background:var(--milk);
  color:var(--espresso);
  transform:translateY(-150%)
}
.skip-link:focus {
  transform:translateY(0)
}
/* Identity and shared controls */
.wordmark {
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  line-height:1;
  color:var(--latte);
  white-space:nowrap
}
.wordmark-main {
  font-size:28px;
  letter-spacing:.42em;
  padding-left:.42em
}
.wordmark .delta {
  font-size:.9em
}
.wordmark-sub {
  font-family:'Jost',sans-serif;
  font-size:9px;
  letter-spacing:.5em;
  padding-left:.5em;
  margin-top:6px
}
.eyebrow {
  font-size:10px;
  font-weight:500;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--caramel)
}
.button,.btn {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:53px;
  padding:15px 25px;
  border:1px solid var(--espresso);
  background:var(--espresso);
  color:var(--milk);
  text-decoration:none;
  text-transform:uppercase;
  font-size:10px;
  font-weight:500;
  letter-spacing:.16em;
  line-height:1.3;
  overflow:hidden;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
  isolation:isolate
}
.button::before,.btn::before {
  content:'';
  position:absolute;
  z-index:-1;
  inset:0;
  background:var(--caramel);
  transform:translateX(-101%);
  transition:transform .55s var(--ease)
}
.button:hover::before,.btn:hover::before {
  transform:translateX(0)
}
.button:hover,.btn:hover {
  border-color:var(--caramel);
  color:var(--milk)
}
.button--outline,.btn-outline {
  background:transparent;
  color:var(--espresso)
}
.button--light {
  background:var(--latte);
  color:var(--espresso);
  border-color:var(--latte)
}
.button--ghost {
  background:transparent;
  color:var(--latte);
  border-color:rgba(241,228,209,.6)
}
.button-row,.hero-actions,.visit-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap
}
.section-heading h2 {
  font-size:clamp(48px,6vw,86px);
  letter-spacing:-.035em
}
.section-heading p:not(.eyebrow) {
  max-width:450px;
  margin-top:22px;
  color:#6b5a4e
}
.section-heading .eyebrow {
  margin-bottom:18px
}
/* Fixed wave header */
.site-header {
  position:fixed;
  z-index:1000;
  top:0;
  left:0;
  width:100%;
  height:var(--header-height);
  color:var(--latte);
  transition:height .6s var(--ease),transform .6s var(--ease);
  will-change:transform
}
.header-inner {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:clamp(20px,3vw,52px);
  height:82px;
  padding:0 5.2%;
  background:var(--espresso);
  transition:height .6s var(--ease)
}
.header-wave {
  position:absolute;
  top:81px;
  left:0;
  width:100%;
  height:47px;
  overflow:visible;
  transition:top .6s var(--ease),height .6s var(--ease);
  pointer-events:none
}
.header-wave path {
  animation:wave-drift 9s ease-in-out infinite alternate;
  transform-origin:center
}
.header-wave path:nth-child(2) {
  animation-duration:12s;
  animation-direction:alternate-reverse
}
.header-wave path:nth-child(3) {
  animation-duration:15s
}
.header-wave path:nth-child(4) {
  animation-duration:11s;
  animation-direction:alternate-reverse
}
@keyframes wave-drift {
  from {
    transform:translateX(-1.2%) scaleX(1.03)
  }
  to {
    transform:translateX(1.2%) scaleX(1.03)
  }
}
.header-beans {
  width:58px;
  flex:none;
  color:var(--caramel)
}
.header-cup {
  position:absolute;
  left:24%;
  top:20px;
  width:145px;
  height:auto;
  transform-origin:50% 60%;
  transition:transform .6s var(--ease),top .6s var(--ease);
  pointer-events:none
}
.steam {
  animation:steam-rise 3s ease-in-out infinite;
  stroke-dasharray:45;
  stroke-dashoffset:0;
  filter:blur(.4px)
}
.steam:nth-child(2) {
  animation-delay:.7s
}
.steam:nth-child(3) {
  animation-delay:1.4s
}
@keyframes steam-rise {
  0% {
    opacity:0;
    transform:translateY(4px);
    stroke-dashoffset:38
  }
  35% {
    opacity:.8
  }
  100% {
    opacity:0;
    transform:translateY(-13px);
    stroke-dashoffset:-25
  }
}
.desktop-nav {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:clamp(20px,2.5vw,40px);
  height:100%
}
.desktop-nav a,.desktop-nav button {
  border:0;
  background:none;
  color:inherit;
  text-decoration:none;
  text-transform:uppercase;
  font-size:10px;
  font-weight:400;
  letter-spacing:.17em;
  white-space:nowrap
}
.desktop-nav>a,.nav-dropdown>button {
  transition:color .25s
}
.desktop-nav>a:hover,.nav-dropdown>button:hover {
  color:var(--crema)
}
.nav-dropdown {
  position:relative;
  height:100%;
  display:flex;
  align-items:center
}
.nav-dropdown>button {
  padding:15px 0
}
.dropdown-menu {
  position:absolute;
  top:calc(100% - 3px);
  left:-20px;
  min-width:210px;
  padding:13px 20px;
  background:var(--espresso);
  box-shadow:0 18px 30px #2b140a24;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .3s,transform .3s var(--ease),visibility .3s
}
.dropdown-menu a {
  display:block;
  padding:10px 0;
  font-size:10px;
  letter-spacing:.1em
}
.dropdown-menu a:hover {
  color:var(--crema)
}
.nav-dropdown:hover .dropdown-menu,.nav-dropdown:focus-within .dropdown-menu,.nav-dropdown.is-open .dropdown-menu {
  opacity:1;
  visibility:visible;
  transform:translateY(0)
}
.map-link svg {
  width:19px;
  height:19px
}
.header-branch {
  width:110px;
  flex:none;
  color:var(--caramel);
  margin-right:-6%;
  border-left:1px solid #b07a4f66;
  padding-left:22px
}
.menu-toggle,.mobile-menu {
  display:none
}
.site-header.is-compact {
  height:78px
}
.site-header.is-compact .header-inner {
  height:58px
}
.site-header.is-compact .header-wave {
  top:57px;
  height:28px
}
.site-header.is-compact .header-cup {
  transform:scale(.6);
  top:0
}
.site-header.is-hidden {
  transform:translateY(-120%)
}
/* The hero combines an accessible text layer and a decorative canvas. */
.hero {
  position:relative;
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  background:#d7c6b2
}
.hero-fallback,.hero-noscript,#building-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}
.hero-fallback img,.hero-noscript img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}
.hero-fallback img,.hero-noscript img {
  object-position:center
}
.hero::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg,rgba(251,247,241,.94) 0%,rgba(251,247,241,.82) 24%,rgba(251,247,241,.16) 55%,transparent 78%);
  pointer-events:none
}
#building-canvas {
  z-index:1
}
.hero-copy {
  position:relative;
  z-index:3;
  max-width:660px;
  padding:clamp(190px,25vh,250px) 0 110px 8%;
  pointer-events:none
}
.hero-copy>* {
  pointer-events:auto
}
.hero-copy .eyebrow {
  margin-bottom:22px
}
.hero h1 {
  font-size:clamp(58px,6.3vw,100px);
  letter-spacing:-.045em;
  max-width:670px;
  line-height:.97
}
.hero h1 em {
  display:block;
  padding-bottom:.1em
}
.hero-copy>p:not(.eyebrow) {
  margin:25px 0 30px;
  max-width:340px;
  color:#574b43;
  font-size:15px
}
.hero-bloom {
  position:absolute;
  z-index:5;
  inset:0;
  background:#fbf7f1;
  opacity:0;
  pointer-events:none
}
.hero-bean,.floating-bean {
  position:absolute;
  z-index:2;
  color:var(--caramel);
  opacity:.5;
  pointer-events:none;
  animation:bean-float 9s ease-in-out infinite alternate
}
@keyframes bean-float {
  to {
    transform:translateY(-18px) rotate(20deg)
  }
}
/* Rooms: each frame is a small piece of architecture. */
.rooms {
  position:relative;
  background:#fbf7f1
}
.hero--pinned {
  z-index:1
}
.rooms--handoff {
  margin-top:-100vh;
  margin-top:-100svh
}
.room {
  position:relative;
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  background:var(--milk);
  isolation:isolate
}
.room:nth-child(2) {
  background:var(--latte)
}
.room:nth-child(3) {
  background:#352017;
  color:var(--latte)
}
.room:nth-child(4) {
  background:#211814;
  color:var(--latte)
}
.room:nth-child(5) {
  background:#303039;
  color:var(--latte)
}
.room-inner {
  position:relative;
  display:grid;
  grid-template-columns:1fr 1.05fr;
  align-items:center;
  gap:8%;
  max-width:1560px;
  min-height:100vh;
  min-height:100svh;
  margin:auto;
  padding:145px 10% 100px
}
.room-number {
  position:absolute;
  z-index:-1;
  top:9%;
  left:3%;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(180px,27vw,440px);
  font-weight:300;
  line-height:.8;
  color:transparent;
  -webkit-text-stroke:1px var(--caramel);
  opacity:.1;
  pointer-events:none
}
.room-copy {
  position:relative;
  z-index:4;
  max-width:440px
}
.room-copy .eyebrow {
  margin-bottom:18px
}
.room-copy h2 {
  font-size:clamp(62px,7.5vw,112px);
  letter-spacing:-.04em;
  line-height:.92
}
.room-copy p:not(.eyebrow) {
  max-width:330px;
  margin-top:25px;
  font-size:15px
}
.room-main {
  position:relative;
  justify-self:center;
  width:min(100%,400px);
  height:min(65vh,650px);
  min-height:400px;
  overflow:hidden;
  border-radius:48% 48% 2px 2px / 25% 25% 2px 2px;
  box-shadow:0 25px 70px #2b140a1f;
  background:var(--crema)
}
.room-main::after {
  content:'';
  position:absolute;
  inset:8px;
  border:1px solid #ffffff75;
  border-radius:inherit;
  pointer-events:none
}
.room-main img {
  width:100%;
  height:100%;
  object-fit:cover
}
.room-card {
  position:absolute;
  z-index:3;
  width:clamp(140px,16vw,250px);
  height:clamp(150px,20vw,285px);
  padding:7px;
  background:var(--milk);
  box-shadow:0 16px 48px #2b140a25;
  transform-style:preserve-3d
}
.room-card img {
  width:100%;
  height:100%;
  object-fit:cover
}
.room-card:nth-of-type(1) {
  right:5%;
  bottom:12%
}
.room-card:nth-of-type(2) {
  right:30%;
  top:16%;
  width:clamp(110px,11vw,170px);
  height:clamp(120px,14vw,205px)
}
.room:nth-child(2) .room-copy,.room:nth-child(4) .room-copy {
  grid-column:2;
  grid-row:1;
  justify-self:end
}
.room:nth-child(2) .room-main,.room:nth-child(4) .room-main {
  grid-column:1;
  grid-row:1
}
.room:nth-child(2) .room-card:nth-of-type(1),.room:nth-child(4) .room-card:nth-of-type(1) {
  right:auto;
  left:5%
}
.room:nth-child(2) .room-card:nth-of-type(2),.room:nth-child(4) .room-card:nth-of-type(2) {
  right:auto;
  left:30%
}
.room:nth-child(5) .room-main {
  width:100%;
  max-width:560px;
  height:72vh
}
.room:nth-child(5) .room-copy {
  align-self:end;
  padding-bottom:9vh
}
.tilt-glare {
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  background:radial-gradient(circle at var(--glare-x,50%) var(--glare-y,50%),rgba(255,255,255,.3),transparent 65%);
  opacity:0;
  transition:opacity .3s
}
.room-card:hover .tilt-glare,.menu-card:hover .tilt-glare {
  opacity:1
}
/* The plan is an orientation aid, not a precise map. */
.floor-plan {
  position:fixed;
  z-index:20;
  right:26px;
  bottom:25px;
  width:180px;
  padding:15px;
  /* Solid card instead of backdrop blur: blurring the moving rooms behind it every frame was costly. */
  background:rgba(251,247,241,.97);
  color:var(--espresso);
  box-shadow:0 6px 30px #2b140a12;
  opacity:0;
  visibility:hidden;
  transition:opacity .4s,visibility .4s
}
.floor-plan.is-visible {
  opacity:1;
  visibility:visible
}
.floor-plan svg {
  width:100%;
  overflow:visible
}
.floor-plan path,.floor-plan rect,.floor-plan line,.floor-plan polygon {
  stroke:var(--caramel)
}
.plan-zone {
  cursor:pointer;
  fill:transparent;
  transition:fill .4s
}
.plan-zone:hover,.plan-zone.is-active {
  fill:#b07a4f38
}
.plan-dot {
  fill:var(--espresso)
}
.plan-counter,.plan-name {
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase
}
.plan-name {
  letter-spacing:.06em;
  margin-left:8px
}
.room-progress {
  display:none
}
/* Marquee and menu */
.ticker {
  overflow:hidden;
  padding:20px 0;
  background:var(--crema);
  color:var(--espresso)
}
.ticker-track {
  display:flex;
  width:max-content;
  white-space:nowrap;
  animation:marquee 24s linear infinite;
  will-change:transform
}
.ticker-track>* {
  flex:none;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(25px,3vw,44px);
  font-style:italic;
  font-weight:400;
  padding-right:1em
}
@keyframes marquee {
  to {
    transform:translateX(-50%)
  }
}
.menu-section,#menu {
  position:relative;
  padding:clamp(100px,12vw,180px) 8%;
  overflow:hidden;
  background:var(--milk)
}
.menu-section .section-heading,#menu .section-heading {
  max-width:780px;
  margin-bottom:65px
}
.menu-grid,.menu-cards {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  max-width:1400px;
  margin:auto
}
.menu-card {
  position:relative;
  min-width:0;
  padding:12px 12px 32px;
  background:#f1e8dc;
  transform-style:preserve-3d
}
.menu-card:nth-child(2) {
  margin-top:55px
}
.menu-card:nth-child(3) {
  margin-top:110px
}
.menu-card img {
  width:100%;
  height:clamp(220px,25vw,390px);
  object-fit:cover
}
.menu-card-content,.menu-card__content {
  padding:25px 18px 0
}
.menu-card .card-number,.menu-card .number {
  display:block;
  margin-bottom:15px;
  color:var(--caramel);
  font-size:10px;
  letter-spacing:.2em
}
.menu-card h3 {
  font-size:clamp(30px,3vw,45px);
  letter-spacing:-.025em
}
.menu-card p {
  max-width:310px;
  margin-top:14px;
  color:#6b5a4e;
  font-size:14px
}
.menu-note {
  max-width:600px;
  margin:55px 0 20px;
  color:#6b5a4e;
  font-size:13px
}
.menu-steam {
  opacity:0;
  transition:opacity .3s
}
.menu-card:hover .menu-steam {
  opacity:1
}
.menu-card:hover .menu-steam path {
  animation:steam-rise 3s ease-in-out infinite
}
/* Visit and footer */
.visit,#visit {
  position:relative;
  background:var(--espresso);
  color:var(--latte);
  overflow:hidden
}
.visit-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:10%;
  max-width:1440px;
  margin:auto;
  padding:130px 9% 160px
}
.visit-copy h2 {
  max-width:600px;
  font-size:clamp(58px,7vw,105px);
  letter-spacing:-.04em
}
.visit-copy p {
  margin:26px 0 34px
}
.visit-image {
  height:clamp(420px,52vw,690px);
  max-width:470px;
  overflow:hidden;
  border-radius:48% 48% 2px 2px / 25% 25% 2px 2px
}
.visit-image img {
  width:100%;
  height:100%
}
.site-footer {
  position:relative;
  padding:90px 8% 35px;
  background:var(--roast);
  color:var(--latte)
}
.footer-wave {
  position:absolute;
  bottom:calc(100% - 1px);
  left:0;
  width:100%;
  height:65px
}
.footer-inner {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  max-width:1400px;
  margin:auto
}
.footer-inner p {
  margin-top:22px;
  font-size:13px
}
.footer-inner a:not(.wordmark) {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.15em;
  text-decoration:none
}
.footer-meta {
  display:flex;
  gap:30px;
  align-items:end
}
.footer-meta small {
  font-size:10px;
  letter-spacing:.08em
}
/* Progress, cursor and loading */
.page-progress {
  position:fixed;
  z-index:30;
  right:22px;
  top:46%;
  width:27px;
  color:var(--caramel);
  pointer-events:none
}
.page-progress svg {
  width:100%
}
.cursor-dot,.cursor-ring {
  position:fixed;
  z-index:3000;
  top:0;
  left:0;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-50%)
}
.cursor-dot {
  width:6px;
  height:6px;
  background:var(--caramel);
  border-radius:50%
}
.cursor-ring {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid var(--caramel);
  border-radius:50%;
  color:var(--espresso);
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.08em;
  transition:width .3s,height .3s,background .3s
}
.cursor-ring.is-active {
  width:72px;
  height:72px;
  background:rgba(251,247,241,.75)
}
.preloader {
  position:fixed;
  z-index:5000;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  background:var(--espresso);
  color:var(--latte)
}
.preloader[hidden] {
  display:none
}
.preloader svg {
  width:100px
}
.preloader .wordmark {
  margin-top:25px
}
.preloader-wave {
  position:absolute;
  top:calc(100% - 1px);
  left:0;
  width:100%;
  height:60px
}
.preloader-skip {
  position:absolute;
  right:30px;
  bottom:30px;
  border:0;
  background:transparent;
  color:var(--latte);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase
}
.split-line,.split-char {
  display:inline-block
}
.split-mask {
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom
}
.js .image-loading {
  opacity:0;
  filter:blur(8px);
  transform:scale(1.03)
}
.js .image-loaded {
  opacity:1;
  filter:blur(0);
  transition:opacity .8s var(--ease),filter .8s var(--ease),transform 1.2s var(--ease)
}
@media(max-width:1100px) {
  .header-beans {
    display:none
  }
  .header-cup {
    left:23%;
    width:115px
  }
  .header-inner {
    gap:20px
  }
  .desktop-nav {
    gap:20px
  }
  .header-branch {
    width:80px
  }
  .room-inner {
    padding-left:7%;
    padding-right:7%
  }
}
@media(max-width:860px) {
  :root {
    --header-height:95px
  }
  .header-inner {
    height:65px;
    padding:0 6%
  }
  .header-wave {
    top:64px;
    height:35px
  }
  .desktop-nav,.header-branch {
    display:none
  }
  .wordmark-main {
    font-size:24px
  }
  .wordmark-sub {
    font-size:8px
  }
  /* Sit the cup between the wordmark and the burger so it never covers the letters. */
  .header-cup {
    left:auto;
    right:64px;
    top:8px;
    width:84px;
    transform:none
  }
  .site-header.is-compact .header-inner {
    height:55px
  }
  .site-header.is-compact .header-wave {
    top:54px
  }
  .site-header.is-compact .header-cup {
    transform:scale(.6);
    transform-origin:top right;
    top:2px
  }
  .menu-toggle {
    display:flex;
    position:relative;
    z-index:1002;
    margin-left:auto;
    width:42px;
    height:42px;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:6px;
    padding:0;
    border:0;
    background:none;
    color:var(--latte)
  }
  .menu-toggle span {
    width:26px;
    height:1px;
    background:currentColor;
    transition:transform .35s
  }
  .menu-open .menu-toggle span:first-child {
    transform:translateY(3.5px) rotate(45deg)
  }
  .menu-open .menu-toggle span:last-child {
    transform:translateY(-3.5px) rotate(-45deg)
  }
  .mobile-menu {
    position:fixed;
    z-index:1001;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:15px;
    padding:100px 10%;
    background:var(--espresso);
    opacity:0;
    visibility:hidden;
    transform:translateY(-15px);
    transition:opacity .4s,transform .4s var(--ease),visibility .4s
  }
  .mobile-menu.is-open,.menu-open .mobile-menu {
    opacity:1;
    visibility:visible;
    transform:translateY(0)
  }
  .mobile-menu a {
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(36px,7vh,56px);
    line-height:1.1;
    text-decoration:none
  }
  .hero-copy {
    padding:190px 7% 90px
  }
  .hero::after {
    background:linear-gradient(90deg,rgba(251,247,241,.93),rgba(251,247,241,.7) 38%,transparent 85%)
  }
  .hero h1 {
    font-size:clamp(55px,9vw,80px)
  }
  .room-inner {
    gap:3%;
    padding:125px 7% 90px
  }
  .room-copy h2 {
    font-size:clamp(55px,8vw,75px)
  }
  .room-main {
    height:52vh;
    min-height:350px
  }
  .room-card:nth-of-type(2) {
    display:none
  }
  .menu-grid,.menu-cards {
    gap:15px
  }
  .menu-card-content,.menu-card__content {
    padding:20px 8px 0
  }
  .visit-inner {
    gap:5%;
    padding:110px 7% 130px
  }
  .visit-copy h2 {
    font-size:clamp(56px,8vw,76px)
  }
}
@media(max-width:699px) {
  .hero {
    min-height:100svh
  }
  .hero-copy {
    padding:155px 7% 95px;
    max-width:430px
  }
  .hero h1 {
    font-size:clamp(53px,12vw,72px)
  }
  .hero-copy>p:not(.eyebrow) {
    max-width:280px
  }
  .hero::after {
    background:linear-gradient(90deg,rgba(251,247,241,.94) 0%,rgba(251,247,241,.72) 62%,rgba(251,247,241,.15) 100%)
  }
  .button,.btn {
    padding:14px 18px;
    font-size:9px
  }
  .room {
    min-height:auto
  }
  .room-inner {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    min-height:100svh;
    gap:28px;
    padding:110px 8% 75px
  }
  .room-copy,.room:nth-child(2) .room-copy,.room:nth-child(4) .room-copy {
    align-self:flex-start;
    order:0
  }
  .room-copy h2 {
    font-size:clamp(54px,13vw,76px)
  }
  .room-copy p:not(.eyebrow) {
    margin-top:15px;
    font-size:14px
  }
  .room-main,.room:nth-child(5) .room-main {
    order:1;
    align-self:center;
    width:75%;
    height:48vh;
    min-height:300px
  }
  .room-card,.room:nth-child(2) .room-card:nth-of-type(1),.room:nth-child(4) .room-card:nth-of-type(1) {
    left:auto;
    right:4%;
    bottom:8%;
    width:31%;
    height:22vh;
    min-height:135px
  }
  .room:nth-child(5) .room-copy {
    align-self:flex-start;
    padding:0
  }
  .room-number {
    top:8%;
    left:auto;
    right:-3%;
    font-size:55vw
  }
  .floor-plan {
    display:none
  }
  .room-progress {
    display:block;
    position:fixed;
    z-index:25;
    top:78px;
    left:5%;
    right:5%;
    height:2px;
    background:#b07a4f55
  }
  .menu-section,#menu {
    padding:95px 7%
  }
  .menu-grid,.menu-cards {
    grid-template-columns:1fr;
    gap:24px
  }
  .menu-card:nth-child(n) {
    margin-top:0
  }
  .menu-card img {
    height:300px
  }
  .menu-card-content,.menu-card__content {
    padding:24px 15px 0
  }
  .menu-card h3 {
    font-size:40px
  }
  .menu-note {
    margin-top:35px
  }
  .section-heading h2 {
    font-size:55px
  }
  .visit-inner {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:50px;
    padding:100px 8% 120px
  }
  .visit-copy h2 {
    font-size:60px
  }
  .visit-image {
    height:500px;
    width:90%;
    align-self:center
  }
  .footer-inner {
    align-items:flex-start;
    flex-direction:column
  }
  .footer-meta {
    width:100%;
    justify-content:space-between
  }
  .page-progress {
    right:8px;
    width:20px
  }
  .cursor-dot,.cursor-ring {
    display:none
  }
}
@media(hover:none) {
  .cursor-dot,.cursor-ring {
    display:none!important
  }
  .room-card,.menu-card {
    transform:none!important
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto!important
  }
  *,*::before,*::after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important
  }
  .hero #building-canvas {
    display:none!important
  }
  .hero-bloom {
    display:none!important
  }
  .room,.room-inner {
    min-height:100svh
  }
  .room {
    clip-path:none!important;
    transform:none!important;
    opacity:1!important
  }
  .room img,[data-reveal] {
    opacity:1!important;
    filter:none!important;
    transform:none!important
  }
  .floor-plan,.room-progress,.cursor-dot,.cursor-ring {
    display:none!important
  }
  .preloader {
    display:none!important
  }
}
/* State classes controlled by the scroll choreography. */
.rooms--staged {
  height:100svh;
  overflow:hidden
}
.rooms--staged .room {
  position:absolute;
  inset:0;
  width:100%;
  height:100svh
}
.rooms--staged .room:nth-child(1) {
  z-index:1
}
.rooms--staged .room:nth-child(2) {
  z-index:2
}
.rooms--staged .room:nth-child(3) {
  z-index:3
}
.rooms--staged .room:nth-child(4) {
  z-index:4
}
.rooms--staged .room:nth-child(5) {
  z-index:5
}
.split-piece {
  display:inline-block
}
.preloader {
  transition:transform .75s var(--ease)
}
.preloader.is-done {
  transform:translateY(-110%)
}
.has-walkin .hero-fallback {
  opacity:0
}
.cursor-ring::after {
  content:attr(data-label)
}
.is-loaded {
  opacity:1;
  filter:none
}
.page-progress {
  --page-progress:0
}
.page-progress .progress-fill {
  transform-box:fill-box;
  transform-origin:bottom;
  transform:scaleY(var(--page-progress))
}
@media(pointer:fine) {
  .cursor-dot,.cursor-ring {
    opacity:1
  }
}
@media(max-width:699px) {
  .rooms--staged {
    height:auto;
    overflow:visible
  }
  .rooms--staged .room {
    position:relative;
    height:auto
  }
}
@media(prefers-reduced-motion:reduce) {
  .rooms--staged {
    height:auto;
    overflow:visible
  }
  .rooms--staged .room {
    position:relative;
    height:auto
  }
}
/* Markup-specific details and visible, script-free defaults. */
.wordmark>span {
  font-size:28px;
  letter-spacing:.42em;
  padding-left:.42em
}
.wordmark>small {
  font-family:'Jost',sans-serif;
  font-size:9px;
  letter-spacing:.5em;
  padding-left:.5em;
  margin-top:6px
}
.steam {
  fill:none;
  stroke:var(--latte);
  stroke-width:1.4;
  stroke-linecap:round
}
.preloader {
  display:none
}
.preloader.is-playing {
  display:flex
}
.preloader-content {
  display:flex;
  flex-direction:column;
  align-items:center
}
.preloader-coffee {
  transform-origin:bottom;
  animation:coffee-fill 1s var(--ease) both
}
.preloader-heart {
  stroke-dasharray:60;
  stroke-dashoffset:60;
  animation:heart-draw .7s .45s ease forwards
}
.preloader-wordmark {
  display:flex;
  justify-content:center;
  position:relative;
  margin-top:24px;
  padding-bottom:17px;
  font-family:'Cormorant Garamond',serif;
  font-size:28px;
  font-weight:500;
  letter-spacing:.3em
}
.preloader-wordmark span {
  animation:letter-rise .65s var(--ease) both
}
.preloader-wordmark span:nth-child(2) {
  animation-delay:.05s
}
.preloader-wordmark span:nth-child(3) {
  animation-delay:.1s
}
.preloader-wordmark span:nth-child(4) {
  animation-delay:.15s
}
.preloader-wordmark span:nth-child(5) {
  animation-delay:.2s
}
.preloader-wordmark span:nth-child(6) {
  animation-delay:.25s
}
.preloader-wordmark small {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  text-align:center;
  font:400 8px 'Jost',sans-serif;
  letter-spacing:.5em
}
@keyframes coffee-fill {
  from {
    transform:scaleY(0)
  }
  to {
    transform:scaleY(1)
  }
}
@keyframes heart-draw {
  to {
    stroke-dashoffset:0
  }
}
@keyframes letter-rise {
  from {
    opacity:0;
    transform:translateY(14px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
.hero-noscript {
  display:none
}
.hero-bottom {
  position:absolute;
  z-index:3;
  bottom:35px;
  left:8%;
  right:8%;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--espresso);
  font-size:9px;
  font-weight:500;
  letter-spacing:.18em
}
.hero-bottom i {
  font-style:normal;
  margin-left:8px
}
.hero-bean {
  width:35px;
  right:9%;
  top:25%
}
.menu-bean {
  width:35px;
  right:9%;
  top:9%
}
.room-number {
  z-index:0
}
.room-copy,.room-main {
  z-index:1
}
.room-caption {
  display:block;
  margin-top:35px;
  color:var(--caramel);
  font-size:9px;
  letter-spacing:.19em
}
.portal-label {
  position:absolute;
  bottom:20px;
  left:20px;
  color:#fff;
  font-size:9px;
  letter-spacing:.15em
}
.room-card-one,.room-card:nth-of-type(2) {
  right:5%;
  bottom:12%;
  top:auto;
  width:clamp(140px,16vw,250px);
  height:clamp(150px,20vw,285px)
}
.room-card-two,.room-card:nth-of-type(3) {
  right:30%;
  top:16%;
  bottom:auto;
  width:clamp(110px,11vw,170px);
  height:clamp(120px,14vw,205px)
}
.room-glass .room-card-one,.room-lounge .room-card-one {
  right:auto;
  left:5%
}
.room-glass .room-card-two {
  right:auto;
  left:30%
}
.floor-plan-label {
  font-size:8px;
  letter-spacing:.15em;
  margin-bottom:8px
}
.plan-wrap {
  position:relative
}
.plan-zones {
  position:absolute;
  inset:0
}
.plan-zone {
  position:absolute;
  display:block
}
.plan-zone:nth-child(1) {
  left:4%;
  top:10%;
  width:27%;
  height:37%
}
.plan-zone:nth-child(2) {
  left:32%;
  top:10%;
  width:32%;
  height:37%
}
.plan-zone:nth-child(3) {
  left:65%;
  top:25%;
  width:29%;
  height:22%
}
.plan-zone:nth-child(4) {
  left:65%;
  top:49%;
  width:29%;
  height:38%
}
.plan-zone:nth-child(5) {
  left:5%;
  top:49%;
  width:58%;
  height:38%
}
.plan-meta {
  display:flex;
  justify-content:space-between;
  gap:5px;
  margin-top:5px
}
.plan-name {
  font-size:8px;
  letter-spacing:.03em
}
.plan-outline {
  stroke-dasharray:650;
  stroke-dashoffset:650;
  transition:stroke-dashoffset 2s var(--ease)
}
.floor-plan.is-visible .plan-outline {
  stroke-dashoffset:0
}
.room-progress {
  display:none
}
.room-progress span {
  position:relative;
  display:block;
  flex:1;
  height:2px;
  background:#b07a4f55
}
.room-progress span.is-active {
  background:var(--caramel)
}
.menu-card-body {
  padding:25px 18px 0
}
.menu-image {
  position:relative
}
.card-steam {
  position:absolute;
  right:12px;
  top:15px;
  width:45px;
  color:var(--milk);
  opacity:0;
  transition:opacity .3s
}
.menu-card:hover .card-steam {
  opacity:1
}
.menu-card:hover .card-steam path {
  animation:steam-rise 3s ease-in-out infinite
}
.menu-bottom {
  margin-top:55px
}
.menu-bottom p {
  max-width:600px;
  color:#6b5a4e;
  font-size:13px;
  margin-bottom:20px
}
.button-outline {
  background:transparent;
  color:var(--espresso)
}
.button-outline-light {
  background:transparent;
  color:var(--latte);
  border-color:rgba(241,228,209,.65)
}
.visit-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:10%;
  padding:130px 9% 160px
}
.visit-section .visit-copy {
  max-width:650px
}
.visit-section .visit-image {
  justify-self:center;
  width:100%
}
.footer-bottom {
  display:flex;
  align-items:center;
  gap:26px;
  font-size:10px;
  letter-spacing:.08em
}
.footer-bottom a {
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.13em
}
.mobile-menu-inner {
  display:flex;
  flex-direction:column;
  gap:16px
}
.mobile-menu-inner .eyebrow {
  margin-bottom:15px
}
.mobile-menu-inner a {
  display:flex;
  justify-content:space-between;
  gap:20px
}
.mobile-menu-inner a span {
  font-size:.5em
}
.mobile-menu-inner .mobile-map {
  font:400 11px 'Jost',sans-serif;
  letter-spacing:.15em;
  text-transform:uppercase;
  margin-top:18px
}
.mobile-menu[hidden] {
  display:none
}
@media(max-width:860px) {
  .wordmark>span {
    font-size:24px
  }
  .wordmark>small {
    font-size:8px
  }
  .visit-section {
    gap:5%;
    padding:110px 7% 130px
  }
}
@media(max-width:699px) {
  .hero-bottom {
    bottom:25px;
    left:7%;
    right:7%;
    font-size:8px
  }
  .hero-bottom span:first-child {
    display:none
  }
  .room-card-one,.room-card:nth-of-type(2),.room-glass .room-card-one,.room-lounge .room-card-one {
    left:auto;
    right:4%;
    bottom:8%;
    top:auto;
    width:31%;
    height:22vh;
    min-height:135px
  }
  .room-card-two {
    display:none
  }
  .room-progress {
    display:flex;
    gap:4px
  }
  .menu-card-body {
    padding:24px 15px 0
  }
  .visit-section {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:50px;
    padding:100px 8% 120px
  }
  .visit-section .visit-image {
    align-self:center;
    width:90%
  }
  .footer-bottom {
    flex-wrap:wrap;
    gap:15px 22px
  }
}
@media(prefers-reduced-motion:reduce) {
  .preloader.is-playing {
    display:none!important
  }
  .room-progress {
    display:none!important
  }
}
/* Integration refinements. */
.preloader.is-playing[hidden] { display: none; }
.page-progress { --page-progress: inherit; }
@media (max-width: 860px) {
  .header-inner { z-index: 1002; }
  .room-card-one { display: block; }
  .room-card-two { display: none; }
}
@media (max-width: 699px) {
  .room-progress { opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .room-progress.is-visible { opacity: 1; visibility: visible; }
}

/* Interactive plan zones and the mobile navigation entrance. */
.plan-zone:hover, .plan-zone.is-active { background: rgba(176,122,79,.22); }
@media (max-width: 860px) {
  .mobile-menu-inner a { opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .6s var(--ease); }
  .mobile-menu.is-open .mobile-menu-inner a { opacity: 1; transform: translateY(0); }
  .mobile-menu-inner a:nth-of-type(1) { transition-delay: .05s; }
  .mobile-menu-inner a:nth-of-type(2) { transition-delay: .10s; }
  .mobile-menu-inner a:nth-of-type(3) { transition-delay: .15s; }
  .mobile-menu-inner a:nth-of-type(4) { transition-delay: .20s; }
  .mobile-menu-inner a:nth-of-type(5) { transition-delay: .25s; }
}

/* Scroll-story refinements: preserve a quiet text field beside the building. */
@media (min-width: 1024px) {
  .hero::after {
    z-index: 2;
    background: linear-gradient(90deg, rgba(251,247,241,.97) 0%, rgba(251,247,241,.89) 23%, rgba(251,247,241,.47) 37%, rgba(251,247,241,0) 59%);
  }
}
@media (max-width: 1023px) {
  .hero::after {
    z-index: 2;
    background: linear-gradient(180deg, rgba(251,247,241,.96) 0%, rgba(251,247,241,.9) 32%, rgba(251,247,241,.65) 50%, rgba(251,247,241,0) 74%);
  }
}
@media (max-width: 699px) {
  .hero-fallback img, .hero-noscript img { object-position: center; }
}

/* An expanding outline follows the clip of each incoming doorway. */
.portal-outline {
  position: absolute;
  z-index: 8;
  inset: 31% 39%;
  border: 1px solid var(--caramel);
  border-radius: 22px 22px 0 0;
  pointer-events: none;
  opacity: 0;
  will-change: inset, border-radius, opacity;
}

/* The slow bar is centred, while the glass house and lounge reverse the bar. */
@media (min-width: 861px) {
  .room-slow .room-inner {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 1.2fr) minmax(0, .75fr);
    gap: 3%;
  }
  .room-slow .room-copy { grid-column: 1; grid-row: 1; }
  .room-slow .room-main { grid-column: 2; grid-row: 1; }
  .room-slow .room-card-one { right: 7%; bottom: 17%; }
  .room-sunset .room-main { width: 100%; max-width: 600px; }
}
.plan-zone { transition: background-color .35s ease; }
.plan-zone:hover, .plan-zone.is-active { background-color: rgba(176,122,79,.35); }

/* A consistent 60/40 image-to-copy proportion keeps the photos prominent. */
.menu-card {
  display: flex;
  flex-direction: column;
  height: clamp(610px, 50vw, 710px);
  padding-bottom: 20px;
}
.menu-card .menu-image {
  flex: 0 0 60%;
  min-height: 0;
  overflow: hidden;
}
.menu-card .menu-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.menu-card-body { flex: 1 1 auto; }
@media (max-width: 699px) {
  .menu-card { height: auto; min-height: 0; }
  .menu-card .menu-image { flex: none; height: 300px; }
  .menu-card .menu-image img { height: 100%; }
}

/* Cheap dimming layer used during room-to-room transitions (replaces an animated CSS filter). */
.room-dim {
  position:absolute;
  inset:0;
  background:#120904;
  opacity:0;
  pointer-events:none;
  z-index:5
}