/* index.html, page-scoped styles.
   Generated from designs/Arumi Home Lander.dc.html, values verbatim.
   Class names are mechanical (.ld-1, .ld-2 ...) and deduplicated: elements
   sharing an identical style share a class. Rename them semantically as you go.
   Load after css/chrome.css and css/ambient.css. */

/* --- page keyframes and breakpoints, from the design --- */

/* The DS NavBar is position:sticky, but its mount wrapper is only as tall as the
     nav itself, so it scrolls away. Pin it fixed and reserve its height. */

/* The NavBar's inner row is height:80 plus 16px padding on a content box, so
     the bar actually measured 113px against a fixed 80px body offset and covered
     the top 33px of every page. Border-box makes 80 mean 80. */

section[id] { scroll-margin-top: 92px; }

/* Mobile: the DS NavBar has no built-in collapse; hide inline links on tablet-down,
     and swap the nav pill for a fixed bottom booking pill on phones (production pattern). */

@supports (height: 100dvh) { [data-screen-label="01 Hero"] { min-height: calc(100dvh - 80px) !important; } }

/* The design-system NavBar ships no hamburger and sets display inline on its
     link row, so the old rule never applied: the bar wrapped to 113px on a
     phone and sat over the page under a fixed 80px offset. Hide the row and the
     nav pill with !important, and hand navigation to the panel below. */

/* Presence is display, and nothing else. transform and opacity on these nodes
     stay pinned to their authored value however they are set, and an entrance
     animation can be left frozen on its first frame, which parks the panel
     off-screen while every other signal says the menu is open. The menu opens
     without motion on purpose: it is the one control a phone visitor cannot do
     without. */

@media (max-width: 720px) { [data-hero-colophon] { display: none; } [data-hero-inner] { padding-bottom: 40px !important; } }

/* The contact tab stays on every page at every width. Its panel is already
     sized to min(292px, 100vw - 76px) so it fits beside its own tab on a 360px
     phone, and it never meets the bottom-centred mobile booking pill. */

@media (max-width: 980px) { [data-trust-panel] { display: none; } #areas [data-asym-panel] { display: none; } }

/* Phones: unlock nowrap titles, tighten cred card; single-column stacks rotate
     their hairline dividers from between-columns to between-rows */

@media (max-width: 560px) {
    #areas h3 { white-space: normal !important; }
    [data-cred-card] { padding: 24px 18px !important; }
    section[data-screen-label="Interlude"] [data-reveal] > div { border-right: none !important; }
    section[data-screen-label="Interlude"] [data-reveal] > div:not(:last-child) { border-bottom: 1px solid rgba(166, 135, 111, 0.22) !important; }
  }

/* --- elements --- */

.ld-1 {
  position: relative;
  background: var(--surface-page);
  min-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
}

.ld-2 {
  position: absolute;
  inset: 0;
  background: var(--surface-page);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ld-3 {
  width: min(420px, 60vw);
  height: auto;
  display: block;
  mix-blend-mode: multiply;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 55%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 55%, transparent 82%);
}

.ld-4 {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 76%;
  object-fit: cover;
  transform: translateY(-50%) scaleX(-1);
  pointer-events: none;
}

.ld-5 {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(246, 239, 233, 0.95), rgba(246, 239, 233, 0) 20%, rgba(246, 239, 233, 0) 80%, rgba(246, 239, 233, 0.95));
  pointer-events: none;
}

.ld-6 {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(246, 239, 233, 0.93) 0%, rgba(246, 239, 233, 0.78) 48%, rgba(246, 239, 233, 0.5) 100%);
  pointer-events: none;
}

.ld-7 {
  position: absolute;
  left: min(85.5%, calc(100% - 0.315 * clamp(380px, 50vw, 740px) - 16px));
  top: 50%;
  transform: translateX(-50%);
  margin-top: clamp(-440px, -31vw, -290px);
  width: clamp(380px, 50vw, 740px);
  pointer-events: none;
  user-select: none;
}

.ld-8 {
  position: relative;
}

.ld-9 {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 224, 158, 0.22) 0%, rgba(255, 224, 158, 0) 60%);
  animation: arumiHalo 7s ease-in-out infinite;
  pointer-events: none;
}

.ld-10 {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.12;
  animation: arumiGildGhost 13s ease-in-out infinite;
}

.ld-11 {
  position: relative;
  box-sizing: border-box;
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) clamp(24px, 5vw, 72px) 110px;
}

.ld-12 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  animation: arumiFadeIn 900ms var(--silk) 150ms both;
}

.ld-13 {
  display: block;
  width: 1px;
  height: clamp(88px, 11vw, 176px);
  margin-top: calc(-1 * clamp(56px, 7vw, 96px));
  background: linear-gradient(rgba(166, 135, 111, 0) 0%, rgba(166, 135, 111, 0.42) 62%, rgba(166, 135, 111, 0.5) 100%);
}

.ld-14 {
  display: flex;
  align-items: flex-end;
}

.ld-15 {
  width: 20px;
  height: 20px;
  transform: rotate(-16deg);
}

.ld-16 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 6.4vw, 96px);
  line-height: 1.1;
  letter-spacing: 0.012em;
  color: var(--color-mocha);
  margin: 0;
  max-width: 20ch;
}

.ld-17 {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
}

.ld-18 {
  display: block;
  animation: arumiLineUp 1100ms var(--silk) 250ms both;
}

.ld-19 {
  display: block;
  animation: arumiLineUp 1100ms var(--silk) 420ms both;
}

.ld-20 {
  position: relative;
  display: inline-block;
  color: var(--color-bronze-text);
}

.ld-21 {
  position: absolute;
  left: 0;
  right: 0.12em;
  bottom: 0.16em;
  height: 1px;
  background: var(--color-champagne-gold);
  transform-origin: left center;
  animation: arumiRuleGrow 1100ms var(--silk) 1250ms both;
}

.ld-22 {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-top: clamp(30px, 3.4vw, 46px);
  animation: arumiFadeIn 900ms var(--silk) 620ms both;
}

.ld-23 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-link);
}

.ld-24 {
  display: block;
  flex: 1;
  height: 1px;
  background: rgba(166, 135, 111, 0.3);
  align-self: center;
}

.ld-25 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(32px, 4vw, 52px);
  animation: arumiFadeUp 900ms var(--silk) 800ms both;
}

.ld-26 {
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 300;
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
  max-width: 38ch;
  margin: 0;
}

.ld-27 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 28px;
  width: min(1360px, 100%);
  box-sizing: border-box;
  padding: 0 clamp(24px, 5vw, 72px);
  z-index: 2;
  animation: arumiFadeIn 900ms var(--silk) 1200ms both;
}

.ld-28 {
  border-top: 1px solid rgba(166, 135, 111, 0.35);
  padding-top: 16px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.ld-29 {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-mocha);
}

.ld-30 {
  justify-self: end;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.08em;
  font-size: var(--type-small);
  color: var(--text-link);
  font-feature-settings: 'tnum' 1;
}

.ld-31 {
  position: relative;
  z-index: 0;
  background: var(--surface-secondary);
  padding: clamp(96px, 12vw, 176px) clamp(24px, 5vw, 72px) clamp(72px, 9vw, 128px);
}

.ld-32 {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
}

.ld-33 {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--color-ivory-blush) 0%, var(--color-warm-sand) 100%);
}

.ld-34 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.22);
  transform-origin: center;
  pointer-events: none;
}

.ld-35 {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(246, 239, 233, 0.9) 0%, rgba(231, 221, 209, 0.72) 50%, rgba(228, 211, 204, 0.6) 100%);
}

.ld-36 {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 70% at 24% 18%, rgba(255, 246, 224, 0.42) 0%, rgba(255, 246, 224, 0) 60%);
  animation: arumiBreathe 11s ease-in-out infinite;
}

.ld-37 {
  max-width: 1360px;
  margin: 0 auto;
}

.ld-38 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.ld-39 {
  display: block;
  width: 1px;
  height: clamp(38px, 4.6vw, 78px);
  background: linear-gradient(rgba(166, 135, 111, 0) 0%, rgba(166, 135, 111, 0.5) 100%);
}

.ld-40 {
  display: flex;
  align-items: flex-end;
  gap: 3px;
}

.ld-41 {
  width: 24px;
  height: 24px;
  transform: rotate(-14deg);
}

.ld-42 {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.ld-43 {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.08em;
  font-size: var(--type-small);
  color: var(--text-link);
  font-feature-settings: 'tnum' 1;
}

.ld-44 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}

.ld-45 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4.2vw, 60px);
  line-height: 1.16;
  letter-spacing: 0.015em;
  color: var(--color-espresso);
  margin: 0 0 var(--space-md);
  max-width: 22ch;
}

.ld-46 {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.ld-47 {
  display: block;
}

.ld-48 {
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 300;
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
  max-width: 58ch;
  margin: 0;
}

.ld-49 {
  position: relative;
  overflow: hidden;
  background: var(--color-rose-nude);
  padding: clamp(56px, 7vw, 96px) clamp(24px, 5vw, 72px);
}

.ld-50 {
  position: absolute;
  inset: -10% 0;
  background: radial-gradient(ellipse 55% 110% at 28% 50%, rgba(255, 247, 228, 0.38) 0%, rgba(255, 247, 228, 0) 68%);
  animation: arumiInterludeDrift 22s ease-in-out infinite alternate;
  pointer-events: none;
}

.ld-51 {
  position: absolute;
  inset: -10% 0;
  background: radial-gradient(ellipse 40% 90% at 72% 50%, rgba(240, 226, 219, 0.6) 0%, rgba(240, 226, 219, 0) 70%);
  animation: arumiBreathe 13s ease-in-out infinite;
  pointer-events: none;
}

.ld-52 {
  position: relative;
  max-width: 1360px;
  margin: 0 auto;
}

.ld-53 {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  border-top: 1px solid rgba(166, 135, 111, 0.3);
}

.ld-54 {
  padding: var(--space-lg);
  text-align: center;
  border-right: 1px solid rgba(166, 135, 111, 0.22);
  transition: background-color 600ms var(--silk), box-shadow 600ms var(--silk);
}
.ld-54:hover {
  background: rgba(246, 239, 233, 0.55);
  box-shadow: inset 0 0 64px rgba(184, 154, 75, 0.16);
}

.ld-55 {
  width: 36px;
  height: 36px;
  display: block;
  margin: 0 auto var(--space-md);
  animation: arumiFloat 4s ease-in-out infinite;
}

.ld-56 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-h4);
  color: var(--color-espresso);
  margin: 0 0 var(--space-xs);
}

.ld-57 {
  font-size: var(--type-small);
  font-weight: 300;
  line-height: var(--line-height-relaxed);
  color: var(--color-mocha);
  margin: 0 auto;
  max-width: 32ch;
}

.ld-58 {
  width: 36px;
  height: 36px;
  display: block;
  margin: 0 auto var(--space-md);
  animation: arumiFloat 4s ease-in-out infinite 0.7s;
}

.ld-59 {
  padding: var(--space-lg) var(--space-sm);
  text-align: center;
  border-top: 1px solid rgba(166, 135, 111, 0.3);
  transition: background-color 600ms var(--silk), box-shadow 600ms var(--silk);
}
.ld-59:hover {
  background: rgba(246, 239, 233, 0.55);
  box-shadow: inset 0 0 64px rgba(184, 154, 75, 0.16);
}

.ld-60 {
  width: 36px;
  height: 36px;
  display: block;
  margin: 0 auto var(--space-md);
  animation: arumiFloat 4s ease-in-out infinite 1.4s;
}

.ld-61 {
  position: relative;
  overflow: hidden;
  background: radial-gradient(1000px 760px at 76% 42%, rgba(184, 154, 75, 0.3), transparent 72%), radial-gradient(1300px 950px at 88% 68%, rgba(228, 211, 204, 0.7), transparent 78%), linear-gradient(160deg, var(--color-warm-sand) 0%, #E6D8CF 100%);
  padding: clamp(80px, 10vw, 144px) clamp(24px, 5vw, 72px);
}

.ld-62 {
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.ld-63 {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 28px;
}

.ld-64 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-14deg);
}

.ld-65 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(48px, 6vw, 112px);
  align-items: center;
}

.ld-66 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.2;
  color: var(--color-espresso);
  margin: 0 0 var(--space-md);
  max-width: 20ch;
}

.ld-67 {
  font-size: var(--type-body);
  font-weight: 300;
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
  margin: 0 0 var(--space-sm);
  max-width: 54ch;
}

.ld-68 {
  font-size: var(--type-body);
  font-weight: 300;
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
  margin: 0 0 var(--space-lg);
  max-width: 54ch;
}

.ld-69 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--space-lg);
  margin-top: clamp(32px, 4vw, 48px);
}

.ld-70 {
  border-left: 1px solid var(--border-subtle);
  padding-left: var(--space-sm);
}

.ld-71 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-link);
  margin: 0 0 6px;
}

.ld-72 {
  display: inline-block;
  font-size: var(--type-small);
  font-weight: 300;
  color: var(--color-mocha);
  text-decoration: none;
  border-bottom: 1px solid rgba(166, 135, 111, 0.4);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--color-champagne-gold), var(--color-champagne-gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: color var(--duration-fast) var(--easing), border-color var(--duration-fast) var(--easing), background-size 450ms var(--silk);
}
.ld-72:hover {
  color: var(--color-deep-bronze);
  border-bottom-color: rgba(184, 154, 75, 0.4);
  background-size: 100% 1px;
}

.ld-73 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--type-small);
  font-weight: 300;
  color: var(--color-mocha);
  text-decoration: none;
  border-bottom: 1px solid rgba(166, 135, 111, 0.4);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--color-champagne-gold), var(--color-champagne-gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: color var(--duration-fast) var(--easing), border-color var(--duration-fast) var(--easing), background-size 450ms var(--silk);
}
.ld-73:hover {
  color: var(--color-deep-bronze);
  border-bottom-color: rgba(184, 154, 75, 0.4);
  background-size: 100% 1px;
}

.ld-74 {
  flex-shrink: 0;
  color: var(--color-bronze-text);
}

.ld-75 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.ld-76 {
  position: relative;
  overflow: hidden;
  width: min(380px, 84vw);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--color-warm-sand), var(--color-rose-nude));
  border: 1px solid rgba(184, 154, 75, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 24px 72px rgba(140, 110, 88, 0.16), 0 0 110px 30px rgba(184, 154, 75, 0.18);
}

.ld-77 {
  width: 46%;
  height: auto;
  opacity: 0.28;
}

.ld-78 {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
}

.ld-79 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 50%;
  transform: scale(2) translate(0, 92px);
}

.ld-80 {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1px solid rgba(246, 239, 233, 0.55);
  pointer-events: none;
  z-index: 1;
}

.ld-81 {
  position: relative;
  z-index: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 28px 40px 26px;
  border-radius: 18px;
  background: linear-gradient(150deg, var(--color-warm-sand), var(--color-rose-nude));
  border: 1px solid rgba(184, 154, 75, 0.35);
  box-shadow: var(--shadow-lg);
}

.ld-82 {
  position: absolute;
  inset: 8px;
  border-radius: 12px;
  border: 1px solid rgba(166, 135, 111, 0.3);
  pointer-events: none;
}

.ld-83 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 55%;
  height: auto;
  opacity: 0.09;
  pointer-events: none;
  z-index: -1;
}

.ld-84 {
  position: relative;
  width: 28px;
  height: 28px;
}

.ld-85 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-link);
}

.ld-86 {
  position: relative;
  display: inline-block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-mocha);
  font-feature-settings: 'tnum' 1;
  text-decoration: none;
  border-bottom: 1px solid rgba(166, 135, 111, 0.4);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--color-champagne-gold), var(--color-champagne-gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: color var(--duration-fast) var(--easing), border-color var(--duration-fast) var(--easing), background-size 450ms var(--silk);
}
.ld-86:hover {
  border-bottom-color: rgba(184, 154, 75, 0.4);
  background-size: 100% 1px;
}

.ld-87 {
  display: inline-block;
  opacity: 1;
  transition: opacity 350ms var(--easing);
}

.ld-88 {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--color-deep-bronze);
  opacity: 0;
  transition: opacity 350ms var(--easing);
}

.ld-89 {
  position: relative;
  overflow: hidden;
  background: var(--color-warm-sand);
  padding: clamp(80px, 10vw, 144px) clamp(24px, 5vw, 72px);
}

.ld-90 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: arumiSlowPan 32s ease-in-out infinite alternate-reverse;
}

.ld-91 {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(231, 221, 209, 0.94) 0%, rgba(231, 221, 209, 0.86) 46%, rgba(228, 211, 204, 0.52) 100%);
}

.ld-92 {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 32px;
}

.ld-93 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-12deg);
}

.ld-94 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(40px, 5vw, 96px);
}

.ld-95 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.2;
  color: var(--color-espresso);
  margin: 0 0 var(--space-sm);
  max-width: 14ch;
}

.ld-96 {
  font-size: var(--type-body);
  font-weight: 300;
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
  max-width: 44ch;
  margin: 0 0 var(--space-lg);
}

.ld-97 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--type-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-link);
  text-decoration: none;
  border-bottom: 1px solid rgba(166, 135, 111, 0.5);
  padding-bottom: 4px;
  background-image: linear-gradient(var(--color-champagne-gold), var(--color-champagne-gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: color var(--duration-fast) var(--easing), border-color var(--duration-fast) var(--easing), background-size 450ms var(--silk);
}
.ld-97:hover {
  color: var(--color-deep-bronze);
  border-bottom-color: rgba(184, 154, 75, 0.4);
  background-size: 100% 1px;
}

.ld-98 {
  margin-top: clamp(48px, 7vw, 112px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  column-gap: clamp(20px, 2.4vw, 36px);
}

.ld-99 {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1;
  color: var(--color-deep-bronze);
  font-feature-settings: 'tnum' 1;
  margin: 0 0 var(--space-sm);
  animation: arumiFloat 4s ease-in-out infinite;
}

.ld-100 {
  font-size: var(--type-small);
  font-weight: 300;
  line-height: var(--line-height-relaxed);
  color: var(--color-mocha);
  margin: 0 auto;
  max-width: 26ch;
}

.ld-101 {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1;
  color: var(--color-deep-bronze);
  font-feature-settings: 'tnum' 1;
  margin: 0 0 var(--space-sm);
  animation: arumiFloat 4s ease-in-out infinite 0.5s;
}

.ld-102 {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1;
  color: var(--color-deep-bronze);
  font-feature-settings: 'tnum' 1;
  margin: 0 0 var(--space-sm);
  animation: arumiFloat 4s ease-in-out infinite 1s;
}

.ld-103 {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1;
  color: var(--color-deep-bronze);
  font-feature-settings: 'tnum' 1;
  margin: 0 0 var(--space-sm);
  animation: arumiFloat 4s ease-in-out infinite 1.5s;
}

.ld-104 {
  overflow-x: clip;
  position: relative;
  z-index: 0;
  background: var(--surface-tertiary);
  padding: clamp(80px, 10vw, 144px) clamp(24px, 5vw, 72px);
}

.ld-105 {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  right: 0;
  width: 44%;
  overflow: hidden;
}

.ld-106 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: arumiSlowPan 30s ease-in-out infinite alternate-reverse;
}

.ld-107 {
  position: absolute;
  inset: 0;
  background: linear-gradient(280deg, rgba(228, 211, 209, 0.74) 0%, rgba(228, 211, 204, 0.82) 55%, rgba(228, 211, 204, 0.94) 100%);
}

.ld-108 {
  width: 36px;
  height: 36px;
  transform: none;
}

.ld-109 {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.08em;
  font-size: var(--type-small);
  color: var(--color-espresso);
  text-shadow: 0 0 12px rgba(246, 239, 233, 0.9);
  font-feature-settings: 'tnum' 1;
}

.ld-110 {
  margin-bottom: clamp(40px, 5vw, 64px);
}

.ld-111 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.2;
  color: var(--color-espresso);
  margin: 0 0 var(--space-sm);
  max-width: 18ch;
}

.ld-112 {
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 400;
  line-height: var(--line-height-relaxed);
  color: var(--color-mocha);
  max-width: 44ch;
  margin: 0;
}

.ld-113 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: stretch;
  border-top: 1px solid rgba(166, 135, 111, 0.3);
}

.ld-114 {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: var(--space-lg);
  border-right: 1px solid rgba(166, 135, 111, 0.22);
  text-decoration: none;
  color: inherit;
  transition: background-color 600ms var(--silk), box-shadow 600ms var(--silk), transform 250ms var(--silk);
}
.ld-114:hover {
  background: rgba(246, 239, 233, 0.55);
  box-shadow: inset 0 0 64px rgba(184, 154, 75, 0.16);
}
.ld-114:active {
  transform: scale(0.98);
}

.ld-115 {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin: 0 0 var(--space-md);
}

.ld-116 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ld-117 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(19px, 1.8vw, 23px);
  white-space: nowrap;
  line-height: 1;
  color: var(--color-espresso);
  margin: 0 0 var(--space-sm);
}

.ld-118 {
  font-size: var(--type-small);
  font-weight: 300;
  line-height: var(--line-height-relaxed);
  color: var(--color-mocha);
  margin: 0 auto var(--space-md);
  max-width: 32ch;
  min-height: 76px;
}

.ld-119 {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--type-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-bronze-text);
  white-space: nowrap;
}

.ld-120 {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: var(--space-lg);
  text-decoration: none;
  color: inherit;
  transition: background-color 600ms var(--silk), box-shadow 600ms var(--silk), transform 250ms var(--silk);
}
.ld-120:hover {
  background: rgba(246, 239, 233, 0.55);
  box-shadow: inset 0 0 64px rgba(184, 154, 75, 0.16);
}
.ld-120:active {
  transform: scale(0.98);
}

.ld-121 {
  background: var(--surface-darkest);
  padding: clamp(112px, 16vw, 224px) clamp(24px, 5vw, 72px);
  position: relative;
  overflow: hidden;
}

.ld-122 {
  position: absolute;
  width: clamp(360px, 40vw, 640px);
  height: auto;
  left: -120px;
  bottom: -140px;
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
}

.ld-123 {
  position: absolute;
  top: -0.18em;
  right: -0.06em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(220px, 30vw, 460px);
  line-height: 1;
  color: rgba(184, 154, 75, 0.1);
  font-feature-settings: 'tnum' 1;
  pointer-events: none;
  user-select: none;
}

.ld-124 {
  max-width: 1360px;
  margin: 0 auto;
  position: relative;
}

.ld-125 {
  display: block;
  width: 1px;
  height: clamp(38px, 4.6vw, 78px);
  background: linear-gradient(rgba(246, 239, 233, 0) 0%, rgba(184, 154, 75, 0.6) 100%);
}

.ld-126 {
  width: 40px;
  height: 40px;
  transform: none;
  filter: brightness(0) invert(1);
  opacity: 0.42;
}

.ld-127 {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-bottom: clamp(48px, 6vw, 80px);
}

.ld-128 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  /* Sits on the espresso founding ground, where champagne gold is 5.61:1. */
  color: var(--color-champagne-gold);
}

.ld-129 {
  display: block;
  flex: 1;
  height: 1px;
  background: rgba(246, 239, 233, 0.18);
  align-self: center;
}

.ld-130 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(40px, 6vw, 112px);
  align-items: end;
}

.ld-131 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.16;
  color: var(--color-ivory-blush);
  margin: 0;
  max-width: 14ch;
}

.ld-132 {
  display: block;
  /* Sits on the espresso founding ground, where champagne gold is 5.61:1. */
  color: var(--color-champagne-gold);
}

.ld-133 {
  font-size: var(--type-body);
  font-weight: 300;
  line-height: var(--line-height-relaxed);
  color: rgba(246, 239, 233, 0.78);
  max-width: 44ch;
  margin: 0;
  border-left: 1px solid rgba(184, 154, 75, 0.4);
  padding-left: clamp(20px, 2vw, 32px);
}

.ld-134 {
  margin-top: clamp(32px, 4vw, 48px);
  padding-left: clamp(20px, 2vw, 32px);
}

.ld-135 {
  display: inline-block;
  padding: 16px 32px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(246, 239, 233, 0.65);
  background: transparent;
  color: var(--color-ivory-blush);
  font-family: var(--font-body);
  font-size: var(--type-small);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  transition: all var(--duration-dissolve) var(--easing);
}
.ld-135:hover {
  background: var(--color-champagne-gold);
  border-color: var(--color-champagne-gold);
  color: var(--color-espresso);
  transform: translateY(-1px);
}
.ld-135:active {
  transform: scale(0.98);
  filter: brightness(0.96);
}

.ld-136 {
  font-size: var(--type-xs);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: rgba(246, 239, 233, 0.6);
  margin: var(--space-sm) 0 0;
}

/* Hero booking CTA. The design uses the design system's Button component here
   (variant primary); this is that component flattened to static CSS, values
   verbatim from components/core/Button.jsx. Press state follows the footer CTA
   in chrome.css. */
.ld-cta {
  display: inline-block;
  padding: 16px 32px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-arumi-bronze);
  color: var(--color-espresso);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-body);
  font-size: var(--type-small);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-dissolve) var(--easing),
              color var(--duration-dissolve) var(--easing),
              box-shadow var(--duration-dissolve) var(--easing),
              transform var(--duration-dissolve) var(--easing);
}
.ld-cta:hover,
.ld-cta:focus-visible {
  background: var(--color-champagne-gold);
  color: var(--color-espresso);
  box-shadow: 0 8px 22px rgba(184, 154, 75, 0.35);
  transform: translateY(-1px);
}
.ld-cta:active { transform: translateY(0) scale(0.98); filter: brightness(0.96); }