:root {
  --ink: #141920;
  --camel: #C0A273;
  --coral: #FF6258;
  --paper: #F6F2EA;
  --pad: clamp(24px, 3.9vw, 56px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --sans: "Neuzeit S LT Std", "Albert Sans", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; }
html { background: var(--ink); }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------- CTA system ---------- */
.cta {
  display: inline-flex; align-items: center; gap: 14px;
  height: 64px; padding: 0 30px 0 34px;
  border-radius: 999px;
  background: var(--coral); color: var(--ink);
  font-weight: 700; font-size: 18px; letter-spacing: -0.01em; white-space: nowrap;
  transition: background-color .25s ease;
}
.cta svg { width: 20px; height: 20px; transition: transform .25s ease; }
.cta:hover { background: var(--paper); }
.cta:hover svg { transform: translateX(5px); }
.cta--quiet {
  height: 46px; padding: 0 22px;
  background: rgba(20, 25, 32, .28); color: var(--paper);
  font-weight: 500; font-size: 15px;
  box-shadow: inset 0 0 0 1px var(--camel);
  backdrop-filter: blur(6px);
}
.cta--quiet:hover { background: var(--camel); color: var(--ink); }

/* ---------- 01 The scene ---------- */
.scene { position: relative; height: 420vh; }
.scene--pills { height: 360vh; }
.scene__pin { position: sticky; top: 0; height: 100vh; min-height: 560px; overflow: hidden; background: var(--ink); }

.scene__layer { position: absolute; inset: 0; will-change: transform, opacity; }
.scene__layer img { width: 100%; height: 100%; object-fit: cover; }
.scene__room img { object-position: 50% 42%; }
.scene__gold { animation: develop 2.2s var(--ease) both; }
@keyframes develop { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: none; } }

.scene__sheet { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene__sheet text { font-family: var(--sans); font-weight: 800; letter-spacing: -0.045em; }

.grain {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .11; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.header {
  position: absolute; z-index: 6; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 30px var(--pad) 0;
  animation: fade 1.2s .5s ease backwards;
}
.header__logo img { height: 26px; width: auto; }
.header__nav { display: flex; align-items: center; gap: 40px; font-size: 15px; font-weight: 500; }
.header__nav a:not(.cta) { opacity: .85; transition: opacity .2s ease; }
.header__nav a:not(.cta):hover { opacity: 1; }

.scene__foot {
  position: absolute; z-index: 5; left: var(--pad); right: var(--pad); bottom: clamp(28px, 4.6vh, 44px);
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  animation: fade 1.2s .9s ease backwards;
}
.scene__lede { max-width: 22em; font-size: 19px; line-height: 1.45; color: var(--camel); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ----- hero V3: the headline carries the photographs ----- */
.scene--pills .scene__room { z-index: 2; clip-path: inset(50% 50% 50% 50% round 999px); }
.pillhead {
  position: absolute; z-index: 1;
  left: var(--pad); right: var(--pad);
  top: calc(96px + (100vh - 96px - 128px) / 2);
  transform: translateY(-50%);
  font-weight: 800;
  font-size: min(15vw, calc((100vh - 224px) / 2.78));
  line-height: .9;
  letter-spacing: -0.045em;
  color: var(--paper);
}
.pillhead__line { display: flex; align-items: center; gap: .13em; height: .92em; }
.pillhead .w { display: block; white-space: nowrap; opacity: 0; transform: translateY(.22em); transition: opacity .9s ease, transform 1.2s var(--ease); }
.pillhead__line:nth-child(2) .w { transition-delay: .08s; }
.pillhead__line:nth-child(3) .w { transition-delay: .16s; }
.is-ready .pillhead .w { opacity: 1; transform: none; }
.pill {
  position: relative; overflow: hidden;
  flex: 0 1 0; min-width: 0; height: .7em;
  border-radius: 999px;
  transform: translateY(.035em);
  opacity: 0;
  transition: flex-grow 1.6s .25s var(--ease), opacity .7s .25s ease;
}
.is-ready .pill { flex-grow: 1; opacity: 1; }
.pill img { width: 100%; height: 100%; object-fit: cover; animation: drift 16s ease-in-out infinite alternate; }
.pill--guest img { object-position: 50% 42%; }
@keyframes drift { from { transform: scale(1.16) translateX(-3.5%); } to { transform: scale(1.16) translateX(3.5%); } }

/* ---------- 02 The host ---------- */
.host { position: relative; z-index: 5; height: 380vh; margin-top: -100vh; }
.host__pin {
  position: sticky; top: 0; height: 100vh; min-height: 560px; overflow: hidden;
  background: var(--ink);
  display: grid; grid-template-columns: minmax(0, 1fr) 40vw;
}
.host__left { position: relative; }
.host__list, .host__final {
  position: absolute; inset: 0;
  padding: clamp(64px, 9.5vh, 104px) 5vw clamp(44px, 7vh, 68px) var(--pad);
}
.host__list {
  display: flex; flex-direction: column; justify-content: center;
  font-weight: 800;
  font-size: min(calc((100vw - 40vw - 5vw - var(--pad)) / 5.5), 15.4vh);
  line-height: .98;
  letter-spacing: -0.042em;
  will-change: transform, opacity;
}
.host__list li { opacity: .13; white-space: nowrap; }
.host__list .ours { position: relative; display: inline-block; color: var(--camel); }
.ours__line { position: absolute; left: -1%; bottom: -.03em; width: 102%; height: .16em; overflow: visible; }
.ours__line path { fill: none; stroke: var(--coral); stroke-width: 6px; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ours__note {
  display: block; margin: .34em 0 0 .12em;
  font-family: "Caveat", cursive; font-weight: 600; font-style: normal;
  font-size: .33em; line-height: 1; letter-spacing: 0;
  color: var(--coral);
  transform: rotate(-3deg); transform-origin: 0 50%;
  opacity: 0;
}

.host__final { display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.host__final.is-live { pointer-events: auto; }
.host__title {
  font-weight: 800;
  font-size: calc((100vw - 40vw - 5vw - var(--pad)) / 4.9);
  line-height: .88;
  letter-spacing: -0.042em;
  color: var(--camel);
}
.host__title span { display: block; overflow: hidden; white-space: nowrap; padding-bottom: .12em; margin-bottom: -.12em; }
.host__title i { display: block; font-style: normal; transform: translateY(108%); will-change: transform; }
.host__body { opacity: 0; }
.host__body p { max-width: 24em; font-size: 21px; line-height: 1.5; color: rgba(246, 242, 234, .8); margin-bottom: 34px; }

.host__photo { position: relative; overflow: hidden; clip-path: inset(100% 0 0 0); }
.host__photo img { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; object-fit: cover; object-position: 50% 30%; will-change: transform; }

/* ---------- 03 What we bring ---------- */
.values { position: relative; background: var(--ink); height: 300vh; }
.values__pin { position: sticky; top: 0; height: 100vh; min-height: 560px; overflow: hidden; display: flex; align-items: center; }
.values__track { display: flex; align-items: center; gap: 9vw; padding: 0 9vw 0 var(--pad); will-change: transform; }
.values__lead {
  flex: none;
  font-weight: 800;
  font-size: min(13.5vw, 26vh);
  line-height: .88;
  letter-spacing: -0.045em;
  color: var(--camel);
  white-space: nowrap;
  padding-right: 3vw;
}
.value { flex: none; display: flex; align-items: flex-end; gap: 3.4vw; }
.value:nth-of-type(2) { align-items: flex-start; margin-top: 7vh; }
.value:nth-of-type(3) { margin-top: -5vh; }
.value__photo { position: relative; overflow: hidden; height: 70vh; aspect-ratio: 2 / 3; }
.value__photo--wide { height: 58vh; aspect-ratio: 10 / 9; }
.value__photo img { position: absolute; top: 0; left: -8%; width: 116%; height: 100%; object-fit: cover; will-change: transform; }
.value__photo--wide img { object-position: 50% 0; }
.value__text { width: 30vw; padding-bottom: .4vh; }
.value:nth-of-type(2) .value__text { padding-top: 2vh; }
.value h3 {
  font-weight: 800;
  font-size: clamp(48px, 6vw, 92px);
  line-height: .92;
  letter-spacing: -0.04em;
}
.value p { max-width: 19em; margin-top: 24px; font-size: 20px; line-height: 1.5; color: rgba(246, 242, 234, .78); }

/* ---------- 04 Our way ---------- */
.story { position: relative; overflow: hidden; padding: 24vh var(--pad) 0; }
.story__text {
  max-width: 21em;
  font-weight: 800;
  font-size: clamp(34px, 4.5vw, 70px);
  line-height: 1.07;
  letter-spacing: -0.035em;
}
.story__text .wd { opacity: .13; }
.story__text .is-camel { color: var(--camel); }
.story__text .pill {
  display: inline-block; flex: none; opacity: .13;
  width: 2.1em; height: .74em;
  vertical-align: -.07em; margin: 0 .08em;
  transform: none; transition: none;
}
.story__text .pill img { animation: none; }
.story__text .pill--baker img { object-position: 50% 16%; }
.story__cta { margin-top: 9vh; }
.story__mark { width: 100%; height: auto; margin-top: 18vh; margin-bottom: -6.5vw; opacity: .085; }

/* ---------- review-only switcher (not part of the design) ---------- */
.proto {
  position: fixed; z-index: 50; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; gap: 2px; padding: 3px;
  border-radius: 999px; background: rgba(20, 25, 32, .72); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(246, 242, 234, .16);
  font-size: 12px; font-weight: 500; letter-spacing: .02em;
}
.proto a { padding: 7px 14px; border-radius: 999px; color: rgba(246, 242, 234, .7); }
.proto a.is-on { background: var(--paper); color: var(--ink); }

/* Desktop is the target for this round. Below is only a safety net. */
@media (max-width: 900px) {
  .header__nav a:not(.cta) { display: none; }
  .scene__foot { flex-direction: column; align-items: flex-start; gap: 18px; }
  .scene__lede { font-size: 16px; }
  .cta { height: 56px; font-size: 16px; padding: 0 22px 0 24px; }
  .host__pin { grid-template-columns: minmax(0, 1fr) 34vw; }
  .host__list { font-size: 11vw; }
  .host__title { font-size: 10.5vw; }
  .host__body p { font-size: 17px; }
  .value__text { width: 62vw; }
  .value__photo { height: 52vh; }
}