/* Extracted from the static build's per-page <style> block.
   Section layout CSS; tokens come from styles.css. */

/* ==== HOMEPAGE-SPECIFIC LAYOUT ====
   Section CSS lives here so each page reads top-to-bottom.
   Tokens come from styles.css. */

/* --- HERO --- */
.hero {
  position: relative;
  min-height: 100dvh;
  background: var(--c-charcoal);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: var(--c-snow);
}
.hero__media {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 50%;
  background-position: center 42%;
  transform: scale(1.12);
  /* Ken Burns: a very slow vertical drift. JS (heroLayer) owns transform,
     so the pan rides on background-position and composes cleanly. */
  animation: hero-kenburns 26s var(--ease-in-out) infinite alternate;
}
.hero__video-mobile { display: none; }
@media (max-width: 768px) {
  .hero__video-desktop { display: none; }
  .hero__video-mobile { display: block; }
}
@keyframes hero-kenburns {
  from { background-position: center 42%; }
  to   { background-position: center 58%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__media { animation: none; transform: scale(1.04); }
}
.hero.is-loaded .hero__media { /* transform owned by JS once loaded */ }
.hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,20,30,0.10) 0%, rgba(8,20,30,0.18) 42%, rgba(8,20,30,0.64) 100%),
    linear-gradient(72deg, rgba(8,20,30,0.46) 0%, rgba(8,20,30,0.12) 44%, transparent 72%);
}
.hero__content {
  position: relative;
  padding: 80px 80px 100px;
  max-width: 760px;
  width: 100%;
}
.hero__eyebrow {
  font-family: var(--f-body);
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-cool-steel);
  margin-bottom: 30px;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.hero__eyebrow::before {
  content: none;
}
.hero__h {
  font-family: var(--f-hero);
  font-style: normal;
  font-weight: 200;
  font-size: clamp(56px, 8.8vw, 122px);
  line-height: 0.94;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
}
.hero__h .roman { font-style: normal; }
.hero__h .it {
  font-family: var(--f-hero);
  font-style: italic;
  font-weight: 200;
}
.hero__sub {
  font-size: 15px;
  color: rgba(255,255,255,0.7);
  max-width: 420px;
  line-height: 1.75;
  margin: 0 0 40px;
  font-weight: 300;
}
.hero__cta { color: var(--c-snow); }

/* Hero entrance — staggered */
.reveal-h {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity calc(var(--d, 600ms) * var(--motion-scale)) var(--ease-out),
              transform calc(var(--d, 600ms) * var(--motion-scale)) var(--ease-out);
  transition-delay: calc(var(--dl, 0ms) * var(--motion-scale));
}
.hero.is-loaded .reveal-h { opacity: 1; transform: translateY(0); }
.hero.is-loaded .hero__sub { opacity: 0.7; }

.hero__scroll {
  position: absolute;
  right: 52px;
  bottom: 52px;
  width: 1px;
  height: 56px;
  background: rgba(148,165,179,0.4);
  overflow: hidden;
}
.hero__scroll::before {
  content: "";
  position: absolute;
  left: -1.5px; top: -8px;
  width: 4px; height: 8px;
  background: var(--c-cool-steel);
  animation: drop 2.6s var(--ease-in-out) infinite;
}
@keyframes drop {
  0% { top: -8px; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { top: 56px; opacity: 0; }
}
.hero__scroll-label {
  position: absolute;
  right: 52px;
  bottom: 116px;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,0.6);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
@media (max-width: 900px) {
  .hero { min-height: 92vh; min-height: 92svh; }
  .hero__content { padding: 32px 26px 88px; max-width: 100%; }
  .hero__h { font-size: clamp(46px, 13vw, 76px); }
  .hero__sub { font-size: 16px; max-width: 34ch; }
  .hero__scroll, .hero__scroll-label { display: none; }
}

/* --- PRESS STRIP --- */
.press {
  background: var(--c-pearl);
  border-bottom: 1px solid rgba(14,22,32,0.08);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.press__lab-wrap {
  padding: 28px 22px 28px 52px;
  background: var(--c-pearl);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.press__track-wrap {
  flex-grow: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.press__lab {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(14,22,32,0.45);
}
.press__name {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  color: rgba(14,22,32,0.65);
  white-space: nowrap;
}
.press__dot {
  width: auto; height: auto; border-radius: 0; background: none;
  font-family: var(--f-display);
  font-style: italic;
  color: rgba(14,22,32,0.3);
  font-size: 16px;
  flex-shrink: 0;
}
.press__dot::before { content: "\2014"; }
@media (max-width: 700px) { 
  .press { flex-direction: column; align-items: stretch; }
  .press__lab-wrap { padding: 16px; text-align: center; border-bottom: 1px solid rgba(14,22,32,0.08); }
  .press__track-wrap { padding: 16px 0; }
}

/* --- BRAND INTRO --- */
.brand-intro {
  background: var(--c-pearl);
}
/* INTRO — one big line of text, then three differently-sized photographs
   lead. Each image is a labelled category (Rooms / KARE / Eat + Drink) so the
   photography carries meaning, with a heading + short context on the right. */
.brand {
  max-width: 1320px;
  margin: 0 auto;
}
.brand__tri {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 2.4vw, 40px) clamp(24px, 3vw, 52px);
  align-items: start;
}
/* category tile = image + label beneath, the whole thing a link */
.brand__cat {
  display: block;
  text-decoration: none;
  color: inherit;
}
.brand__cat-img {
  position: relative;
  overflow: hidden;
  background: var(--c-bone);
}
.brand__cat-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  font-family: var(--f-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-charcoal);
}
.brand__cat-label .ar {
  width: 26px; height: 1px; background: currentColor; position: relative;
  flex: none; transition: width 420ms var(--ease-out);
}
.brand__cat-label .ar::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
@media (hover: hover) and (pointer: fine) {
  .brand__cat:hover .ar { width: 42px; }
}
.brand__img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.12);
  transition: transform 1900ms var(--ease-in-out);
}
.brand__cat.is-in .brand__img { transform: scale(1); }
@media (hover: hover) and (pointer: fine) {
  .brand__cat:hover .brand__img { transform: scale(1.05); }
}

/* placement — small Eat+Drink lower-left, large Rooms centre (arched),
   right column carries the words then the KARE tile beneath */
.brand__cat--eat   { grid-column: 1 / 4;  margin-top: clamp(70px, 11vw, 150px); }
.brand__cat--eat   .brand__cat-img { aspect-ratio: 3 / 4; }
.brand__cat--rooms { grid-column: 4 / 9; }
.brand__cat--rooms .brand__cat-img { aspect-ratio: 4 / 5; }
.brand__aside { grid-column: 9 / 13; padding-top: 6px; }
.brand__h {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(30px, 2.7vw, 42px);
  line-height: 1.08;
  margin: 0 0 22px;
  color: var(--c-charcoal);
  max-width: 16ch;
  letter-spacing: -0.01em;
}
.brand__h .it { font-style: italic; }
.brand__body {
  color: rgba(14,22,32,0.74);
  font-size: 15px;
  line-height: 1.66;
  margin: 0 0 30px;
  max-width: 40ch;
}
.brand__cat--kare .brand__cat-img { aspect-ratio: 5 / 6; }
.brand__foot {
  grid-column: 1 / 13;
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: clamp(36px, 5vw, 64px);
}
.brand__foot .rule { flex: 1; height: 1px; background: rgba(14,22,32,0.16); }
.brand__cta { color: var(--c-olive); }

@media (max-width: 900px) {
  .brand__tri { grid-template-columns: 1fr 1fr; gap: 16px 14px; }
  .brand__aside { grid-column: 1 / 3; order: -1; padding-top: 0; margin-bottom: 8px; }
  .brand__aside .brand__cat--kare { display: none; }
  .brand__h { font-size: clamp(28px, 7vw, 38px); max-width: none; }
  .brand__body { font-size: 14.5px; max-width: 52ch; }
  .brand__cat--eat   { grid-column: 1 / 2; margin-top: 40px; }
  .brand__cat--rooms { grid-column: 2 / 3; }
  .brand__cat--rooms .brand__cat-img { aspect-ratio: 3 / 4; }
  /* surface the KARE tile back into the grid on mobile */
  .brand__cat--kare-m { display: block; grid-column: 1 / 3; margin-top: 8px; }
  .brand__cat--kare-m .brand__cat-img { aspect-ratio: 16 / 10; }
  .brand__cat-label { font-size: 11px; letter-spacing: 0.16em; }
  .brand__foot { margin-top: 30px; }
}
.brand__cat--kare-m { display: none; }

/* --- POOL MOMENT (arrival breath, before KARE) — editorial on cream so it
   contrasts the KARE banner rather than stacking a second full-bleed band --- */
.pool-moment { background: var(--c-pearl); padding: clamp(88px, 10vw, 150px) clamp(40px, 8vw, 132px); }
.pool-moment__inner {
  max-width: 1380px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(40px, 5vw, 92px); align-items: center;
}
.pool-moment__fig {
  grid-column: 1 / 6; position: relative; overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--c-bone);
}
.pool-moment__fig .img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.04); transition: transform 1700ms var(--ease-in-out);
}
@media (hover: hover) and (pointer: fine) { .pool-moment__fig:hover .img { transform: scale(1.08); } }
.pool-moment__text { grid-column: 7 / 13; }
.pool-moment__text .eyebrow { margin-bottom: 26px; }
.pool-moment__h {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(36px, 4.4vw, 68px); line-height: 1.04;
  letter-spacing: -0.012em; color: var(--c-charcoal);
  margin: 0 0 28px; max-width: 15ch;
}
.pool-moment__h .it { font-style: italic; }
.pool-moment__body { color: rgba(14,22,32,0.7); font-size: 15px; line-height: 1.74; max-width: 42ch; margin: 0; }
.pool-moment__cta { margin-top: 32px; color: var(--c-olive); }
@media (max-width: 900px) {
  .pool-moment { padding: 84px 24px; }
  .pool-moment__inner { display: flex; flex-direction: column; gap: 30px; align-items: stretch; }
  .pool-moment__fig { aspect-ratio: 5 / 4; }
}
@media (max-width: 700px) {
  /* arrival breath → one immersive full-bleed image, words beneath */
  .pool-moment__inner { gap: 28px; }
  .pool-moment__fig {
    margin-left: -24px; margin-right: -24px;
    width: calc(100% + 48px);
    aspect-ratio: 4 / 5;
  }
  .pool-moment__h { font-size: clamp(30px, 8vw, 40px); margin-bottom: 20px; }
  .pool-moment__body { font-size: 14.5px; }
}

/* --- KARE AYURVEDA — photography-led editorial --- */
.kare2 { background: var(--c-pearl); padding-bottom: clamp(96px, 12vw, 180px); }

/* cinematic banner — full-bleed photograph, headline resting on it */
.kare2__banner {
  position: relative;
  height: clamp(480px, 84vh, 880px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.kare2__banner-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 42%;
}
@media (prefers-reduced-motion: no-preference) {
  .kare2__banner-img { animation: kareKenBurns 2600ms var(--ease-out) both; }
  @keyframes kareKenBurns { from { transform: scale(1.1); } to { transform: scale(1); } }
}
.kare2__banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,22,32,0.72), rgba(14,22,32,0.06) 48%, rgba(14,22,32,0.14));
}
.kare2__banner-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: 1440px; margin: 0 auto;
  padding: clamp(40px, 6vw, 96px) clamp(24px, 8vw, 132px);
  color: var(--c-snow);
}
.kare2__eyebrow {
  font-family: var(--f-body);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.kare2__h {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(46px, 6.6vw, 108px);
  line-height: 0.95;
  letter-spacing: -0.018em;
  color: var(--c-snow);
  margin: 18px 0 0;
  max-width: 15ch;
}
.kare2__h .it { font-style: italic; }

/* editorial spread — a dominant photo, a column of words, a smaller photo
   dropped lower. Sizes and offsets do the talking. */
.kare2__spread {
  max-width: 1440px; margin: 0 auto;
  padding: clamp(64px, 8vw, 132px) clamp(24px, 8vw, 132px) 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(28px, 3vw, 64px);
  align-items: start;
}
.kare2__fig {
  position: relative;
  overflow: hidden;
  background: var(--c-bone);
}
.kare2__fig-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.04);
  transition: transform 1700ms var(--ease-in-out);
}
@media (hover: hover) and (pointer: fine) {
  .kare2__fig:hover .kare2__fig-img { transform: scale(1.08); }
}
.kare2__fig--lead { grid-column: 1 / 7; aspect-ratio: 4 / 5; }
.kare2__lede { grid-column: 7 / 10; padding-top: clamp(18px, 5vw, 72px); }
.kare2__fig--sec { grid-column: 10 / 13; aspect-ratio: 3 / 4; margin-top: clamp(48px, 9vw, 150px); }
.kare2__cap {
  font-family: var(--f-display);
  font-style: italic; font-size: 14px;
  color: rgba(14,22,32,0.5);
  margin: 14px 0 0;
}
.kare2__lead {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(23px, 2.1vw, 32px);
  line-height: 1.3;
  color: var(--c-charcoal);
  letter-spacing: -0.008em;
  margin: 0 0 24px;
}
.kare2__lead .it { font-style: italic; }
.kare2__body {
  color: rgba(14,22,32,0.74);
  font-size: 15px; line-height: 1.72;
  margin: 0 0 30px;
}
.kare2__credit {
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(14,22,32,0.16);
  font-family: var(--f-body);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(14,22,32,0.52);
}
.kare2__credit span { display: flex; align-items: center; gap: 12px; }
.kare2__credit span::before { content: ""; width: 18px; height: 1px; background: var(--c-slate); flex: none; }

/* programmes — photo tiles at varied sizes, uppercase label + drawing arrow */
.kare2__programmes { max-width: 1440px; margin: clamp(92px, 11vw, 172px) auto 0; padding: 0 clamp(24px, 8vw, 132px); }
.kare2__pg-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding-bottom: 30px; margin-bottom: clamp(40px, 5vw, 76px);
  border-bottom: 1px solid rgba(14,22,32,0.16);
}
.kare2__pg-head .lab {
  font-family: var(--f-body); font-size: 12px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-charcoal);
}
.kare2__pg-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 3vw, 56px); align-items: start; }
.kare2__pg { display: block; color: inherit; text-decoration: none; }
.kare2__pg--a { grid-column: 1 / 4; margin-top: clamp(40px, 7vw, 104px); }
.kare2__pg--a .kare2__pg-img { aspect-ratio: 3 / 4; }
.kare2__pg--b { grid-column: 4 / 9; }
.kare2__pg--b .kare2__pg-img { aspect-ratio: 5 / 6; }
.kare2__pg--c { grid-column: 9 / 13; margin-top: clamp(64px, 11vw, 168px); }
.kare2__pg--c .kare2__pg-img { aspect-ratio: 3 / 4; }
.kare2__pg-img { position: relative; overflow: hidden; background: var(--c-bone); }
.kare2__pg-img .img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.04);
  transition: transform 1600ms var(--ease-in-out);
}
@media (hover: hover) and (pointer: fine) {
  .kare2__pg:hover .kare2__pg-img .img { transform: scale(1.08); }
}
.kare2__pg-num {
  position: absolute; top: 18px; left: 18px; z-index: 1;
  font-family: var(--f-display); font-style: italic; font-size: 13px;
  color: rgba(255,255,255,0.8);
}
.kare2__pg-cat {
  margin-top: 18px;
  font-family: var(--f-body); font-size: 10px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-slate);
}
.kare2__pg-name {
  margin-top: 8px;
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(24px, 2vw, 30px); line-height: 1.04;
  letter-spacing: -0.01em; color: var(--c-charcoal);
}
.kare2__pg-name .it { font-style: italic; }
.kare2__pg-meta {
  margin-top: 12px;
  font-family: var(--f-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(14,22,32,0.5);
  display: flex; align-items: center; gap: 12px;
}
.kare2__pg-meta .ar { width: 24px; height: 1px; background: currentColor; position: relative; flex: none; transition: width 420ms var(--ease-out); }
.kare2__pg-meta .ar::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
@media (hover: hover) and (pointer: fine) {
  .kare2__pg:hover .kare2__pg-meta .ar { width: 40px; }
}
.kare2__foot {
  max-width: 1440px; margin: clamp(48px, 6vw, 84px) auto 0;
  padding: 0 clamp(24px, 8vw, 132px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px;
}
.kare2__consult {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 28px;
  background: var(--c-aegean);
  color: var(--c-snow);
  text-decoration: none;
  font-family: var(--f-body);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: background 360ms var(--ease-out);
}
.kare2__consult:hover { background: var(--c-charcoal); }

@media (max-width: 900px) {
  .kare2__spread { display: flex; flex-direction: column; gap: 14px; }
  .kare2__fig--lead, .kare2__fig--sec { aspect-ratio: 4 / 5; }
  .kare2__lede { padding-top: 28px; }
  .kare2__fig--sec { margin-top: 8px; }
  .kare2__pg-row { display: flex; flex-direction: column; gap: 48px; }
  .kare2__pg--a, .kare2__pg--b, .kare2__pg--c { margin-top: 0; }
  .kare2__pg--a .kare2__pg-img,
  .kare2__pg--b .kare2__pg-img,
  .kare2__pg--c .kare2__pg-img { aspect-ratio: 4 / 5; }
}

/* --- SECTION HEADER --- */
.sec-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: end;
  max-width: 1200px;
  margin: 0 auto 120px;
}
.sec-head__h {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: var(--t-section);
  line-height: 1;
  margin: 22px 0 0;
  letter-spacing: -0.01em;
}
.sec-head__h .it { font-style: italic; }
.sec-head__right {
  display: flex; flex-direction: column;
  gap: 22px; align-items: flex-start;
  max-width: 46ch; padding-bottom: 8px;
}
.sec-head__right p { color: rgba(14,22,32,0.78); margin: 0; }
.sec-head__right .cta-line { color: var(--c-olive); }
@media (max-width: 900px) {
  .sec-head { grid-template-columns: 1fr; gap: 22px; align-items: start; margin-bottom: 48px; }
}

/* --- ROOMS BENTO --- */
.rooms-section { background: var(--c-pearl); }

/* Editorial Rooms — one aesthetic, sized five ways. A large setting photo,
   a short manifesto, and a typographic index instead of five lookalike cards. */
.rooms-ed {
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(36px, 5vw, 96px);
  align-items: start;
}
.rooms-ed__fig {
  grid-column: 1 / 7;
  position: relative; overflow: hidden; background: var(--c-bone);
  aspect-ratio: 4 / 5;
}
.rooms-ed__fig .img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.04); transition: transform 1700ms var(--ease-in-out);
}
@media (hover: hover) and (pointer: fine) { .rooms-ed__fig:hover .img { transform: scale(1.08); } }
.rooms-ed__body { grid-column: 7 / 13; padding-top: clamp(6px, 2vw, 40px); }
.rooms-ed__lead {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(21px, 1.9vw, 28px); line-height: 1.38;
  color: var(--c-charcoal); margin: 0 0 40px; max-width: 38ch;
  letter-spacing: -0.005em;
}
.rooms-ed__lead .it { font-style: italic; }

.rooms-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(14,22,32,0.16); }
.rooms-index__row {
  display: grid; grid-template-columns: 44px 1.3fr 1.5fr 26px;
  align-items: baseline; gap: 20px;
  padding: 24px 0; border-bottom: 1px solid rgba(14,22,32,0.13);
  color: inherit; text-decoration: none; position: relative;
  transition: padding-left 380ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .rooms-index__row:hover { padding-left: 16px; } }
.rooms-index__num { font-family: var(--f-display); font-style: italic; font-size: 14px; color: var(--c-olive); }
.rooms-index__name { font-family: var(--f-display); font-weight: 300; font-size: clamp(23px, 1.9vw, 30px); line-height: 1; letter-spacing: -0.01em; }
.rooms-index__name .it { font-style: italic; }
.rooms-index__spec {
  font-family: var(--f-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(14,22,32,0.5);
  display: flex; flex-wrap: wrap; gap: 6px 16px;
}
.rooms-index__arrow {
  justify-self: end; font-family: var(--f-display); font-size: 19px;
  color: rgba(14,22,32,0.4);
  transition: transform 360ms var(--ease-out), color 360ms var(--ease-out);
}
.rooms-index__row:hover .rooms-index__arrow { transform: translateX(6px); color: var(--c-olive); }

/* "In every room" — a labelled module so the detail photos read with context */
.rooms-detail {
  max-width: 1440px; margin: clamp(64px, 8vw, 132px) auto 0;
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(28px, 3.5vw, 64px); align-items: start;
}
.rooms-detail__intro { grid-column: 1 / 4; padding-top: 4px; }
.rooms-detail__intro .eyebrow { margin-bottom: 20px; }
.rooms-detail__intro p { font-size: 14.5px; line-height: 1.72; color: rgba(14,22,32,0.68); margin: 0; max-width: 32ch; }
.rooms-detail__fig { position: relative; overflow: hidden; background: var(--c-bone); }
.rooms-detail__fig .img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.04); transition: transform 1700ms var(--ease-in-out);
}
@media (hover: hover) and (pointer: fine) { .rooms-detail__fig:hover .img { transform: scale(1.08); } }
.rooms-detail__fig--a { grid-column: 5 / 9; aspect-ratio: 4 / 5; }
.rooms-detail__fig--b { grid-column: 9 / 13; aspect-ratio: 4 / 5; }
.rooms-detail__cap { margin-top: 14px; font-family: var(--f-display); font-style: italic; font-size: 14px; color: rgba(14,22,32,0.5); }

@media (max-width: 900px) {
  .rooms-ed { display: flex; flex-direction: column; gap: 30px; }
  .rooms-ed__fig { aspect-ratio: 4 / 5; }
  .rooms-index__row { grid-template-columns: 28px 1fr; grid-auto-rows: auto; gap: 4px 14px; padding: 20px 0; }
  .rooms-index__num { grid-row: 1; }
  .rooms-index__name { grid-column: 2; }
  .rooms-index__spec { grid-column: 2; }
  .rooms-index__arrow { display: none; }
  .rooms-detail { grid-template-columns: 1fr 1fr; gap: 16px 14px; }
  .rooms-detail__intro { grid-column: 1 / 3; margin-bottom: 10px; }
  .rooms-detail__intro p { max-width: none; }
  .rooms-detail__fig--a { grid-column: 1 / 2; aspect-ratio: 4 / 5; }
  .rooms-detail__fig--b { grid-column: 2 / 3; aspect-ratio: 4 / 5; }
  .rooms-detail__cap { font-size: 13px; }
}
@media (max-width: 600px) {
  /* phones: stack the two detail photos full-width so they read as real
     photography rather than two cramped half-width thumbnails */
  .rooms-detail { grid-template-columns: 1fr; gap: 28px; }
  .rooms-detail__intro { grid-column: 1 / 2; margin-bottom: 4px; }
  .rooms-detail__fig--a,
  .rooms-detail__fig--b { grid-column: 1 / 2; aspect-ratio: 3 / 2; }
}

/* --- FOOD BAND --- */
.food {
  height: 88vh;
  min-height: 720px;
  position: relative;
  overflow: hidden;
  background-image: url("../../photos/cand-h.jpg");
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}
.food__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(12,14,16,0.78) 0%, rgba(12,14,16,0.32) 55%, transparent 100%);
}
.food__content {
  position: relative;
  padding: 60px 80px 100px;
  color: var(--c-snow);
  max-width: 720px;
}
.food__eyebrow {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,0.7);
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
}
.food__eyebrow::before {
  content: "\2014\2002";
  width: auto; height: auto; background: none;
  color: currentColor;
  opacity: 0.7;
}
.food__h {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.02;
  margin: 24px 0 24px;
  letter-spacing: -0.008em;
  max-width: 14ch;
}
.food__h .it { font-style: italic; }
.food__body { color: rgba(255,255,255,0.7); max-width: 52ch; margin: 0 0 32px; }
.food__venues {
  display: flex; gap: 36px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.food__venue {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
  display: flex; flex-direction: column; gap: 6px;
}
.food__venue strong {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  letter-spacing: 0;
  color: var(--c-snow);
  text-transform: none;
}
@media (max-width: 900px) {
  .food { height: auto; min-height: 580px; }
  .food__content { padding: 48px 24px 64px; }
}

/* --- EXPERIENCES --- */
.experiences { background: var(--c-pearl); }
.exp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(36px, 4.5vw, 88px);
  max-width: 1160px;
  margin: 0 auto;
}
.exp-col { display: flex; flex-direction: column; gap: clamp(108px, 13vw, 188px); }
/* Right column drops a touch → composed editorial spread, not a 2×2 grid. */
.exp-col--offset { margin-top: clamp(84px, 11vw, 150px); }
.exp-card { display: block; }
/* Desktop: medium images that hug the CENTRELINE, so the whitespace frames
   the outer margins instead of pooling in a dead gap down the middle. */
@media (min-width: 701px) {
  .exp-card { max-width: 404px; }
  .exp-col:first-child .exp-card { margin-left: auto; }
  .exp-col--offset .exp-card { margin-right: auto; }
}
.exp-col:first-child .exp-card:nth-child(1) .exp-card__img-wrap { aspect-ratio: 4 / 5; }
.exp-col:first-child .exp-card:nth-child(2) .exp-card__img-wrap { aspect-ratio: 1 / 1; }
.exp-col--offset .exp-card:nth-child(1) .exp-card__img-wrap { aspect-ratio: 1 / 1; }
.exp-col--offset .exp-card:nth-child(2) .exp-card__img-wrap { aspect-ratio: 4 / 5; }
.exp-card__img-wrap {
  position: relative;
  overflow: hidden;
  background: var(--c-bone);
  aspect-ratio: 4/3;
  margin-bottom: 22px;
}
.exp-card__img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1400ms var(--ease-in-out);
}
@media (hover: hover) and (pointer: fine) {
  .exp-card:hover .exp-card__img { transform: scale(1.04); }
}
.exp-card__num {
  position: absolute;
  top: 22px; left: 22px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  z-index: 1;
}
.exp-card__eyebrow {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-olive);
  margin-bottom: 10px;
}
.exp-card__h {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(25px, 2.1vw, 32px);
  line-height: 1.1;
  margin: 0 0 12px;
  letter-spacing: -0.005em;
}
.exp-card__h .it { font-style: italic; }
.exp-card__body { color: rgba(14,22,32,0.78); max-width: 38ch; margin: 0 0 16px; font-size: 14.5px; line-height: 1.66; }
.exp-card__cta { color: var(--c-olive); }
@media (max-width: 700px) {
  .exp-grid { grid-template-columns: 1fr; }
  .exp-col { gap: clamp(60px, 9vw, 96px); margin-top: 0; }
  .exp-col--offset { margin-top: clamp(60px, 9vw, 96px); }
}

/* --- PULL QUOTE --- */
.quote-section {
  background: var(--c-aegean);
  color: var(--c-snow);
  padding: 260px clamp(40px, 8vw, 132px);
  position: relative;
  overflow: hidden;
}
.quote {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.quote__mark {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 140px;
  line-height: 1;
  color: var(--c-olive);
  margin-bottom: -40px;
  display: block;
}
.quote__text {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(34px, 3.6vw, 56px);
  line-height: 1.18;
  margin: 0 0 36px;
  text-wrap: balance;
  letter-spacing: -0.005em;
}
.quote__attr {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
}
.quote__attr .pub {
  font-family: var(--f-script, var(--f-display));
  font-style: italic;
  font-size: 18px;
  color: var(--c-olive);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 12px;
}

/* --- TESTIMONIALS --- */
.testimonials { background: var(--c-bone); padding-top: 190px; padding-bottom: 190px; }
.testi-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 64px;
  max-width: 1320px;
  margin: 0 auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.testi-grid::-webkit-scrollbar { display: none; }
.testi {
  display: flex; flex-direction: column;
  gap: 24px;
  flex: 0 0 calc((100% - 128px) / 3); /* 3 items in view minus 2 gaps */
  scroll-snap-align: start;
}
.testi__mark {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 64px;
  line-height: 0.4;
  height: 26px;
  color: var(--c-olive);
  opacity: 0.8;
  user-select: none;
}
.testi__text {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 25px;
  line-height: 1.42;
  color: var(--c-charcoal);
  margin: 0;
  letter-spacing: -0.005em;
}
.testi__text .it { font-style: italic; }
.testi__by {
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--c-charcoal);
  display: inline-flex; align-items: baseline; gap: 9px;
}
.testi__by .place {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
  letter-spacing: 0;
  color: rgba(14,22,32,0.5);
}
@media (max-width: 900px) { .testi-grid { grid-template-columns: 1fr; gap: 60px; } }

/* --- JOURNAL ASYMMETRIC --- */
.journal { background: var(--c-pearl); padding-top: 190px; padding-bottom: 190px; }
.journal-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 56px;
  max-width: 1440px;
  margin: 0 auto;
  align-items: start;
}
.j-card { display: block; }
.j-card.feature .j-card__img-wrap { aspect-ratio: 5/6; }
.j-card.standard .j-card__img-wrap { aspect-ratio: 4/5; margin-top: 64px; }
.j-card.standard:nth-of-type(3) .j-card__img-wrap { margin-top: 0; }
.j-card__img-wrap {
  position: relative;
  overflow: hidden;
  background: var(--c-bone);
  margin-bottom: 22px;
}
.j-card__img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1400ms var(--ease-in-out);
}
@media (hover: hover) and (pointer: fine) {
  .j-card:hover .j-card__img { transform: scale(1.04); }
}
.j-card__date {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(14,22,32,0.5);
  font-weight: 500;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 12px;
}
.j-card__date .cat { color: var(--c-olive); }
.j-card__h {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.2;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.j-card.feature .j-card__h { font-size: clamp(28px, 2.4vw, 38px); }
.j-card.feature .j-card__h .it { font-style: italic; }
.j-card__excerpt {
  font-size: 13px;
  color: rgba(14,22,32,0.5);
  line-height: 1.7;
  margin: 0;
  max-width: 42ch;
}
.j-card.feature .j-card__excerpt { font-size: 15px; max-width: 50ch; }
@media (max-width: 900px) {
  .journal-grid { grid-template-columns: 1fr; }
  .j-card.standard .j-card__img-wrap { margin-top: 0; }
}

/* --- BOOKING BAND --- */
.booking {
  background: var(--c-charcoal);
  color: var(--c-snow);
  padding: 150px clamp(40px, 8vw, 132px);
}
.booking__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.booking__h {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(38px, 4vw, 60px);
  line-height: 1.05;
  margin: 22px 0 0;
  letter-spacing: -0.005em;
  max-width: 14ch;
}
.booking__h .it { font-style: italic; }
.booking__form {
  background: var(--c-snow);
  padding: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  color: var(--c-charcoal);
}
.booking__field {
  display: flex; flex-direction: column;
  gap: 8px;
}
.booking__field label {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(14,22,32,0.45);
  font-weight: 500;
}
.booking__field input, .booking__field select {
  border: 0;
  border-bottom: 1px solid rgba(14,22,32,0.15);
  padding: 10px 0;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 15px;
  background: transparent;
  color: var(--c-charcoal);
  outline: none;
  transition: border-color calc(200ms * var(--motion-scale)) var(--ease-out);
}
.booking__field input:focus, .booking__field select:focus {
  border-color: var(--c-aegean);
}
.booking__submit {
  grid-column: 1 / 3;
  background: var(--c-charcoal);
  color: var(--c-snow);
  padding: 18px 32px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  margin-top: 12px;
  transition: background-color calc(200ms * var(--motion-scale)) var(--ease-out);
}
.booking__submit:hover { background: var(--c-aegean); }
@media (max-width: 900px) {
  .booking__inner { grid-template-columns: 1fr; gap: 40px; }
  .booking__form { padding: 24px; }
}

/* Section padding tweaks */
.s-brand { padding: 220px clamp(40px, 8vw, 132px); }
.s-rooms { padding: 220px clamp(40px, 8vw, 132px); }
.s-experiences { padding: 220px clamp(40px, 8vw, 132px); }
@media (max-width: 900px) {
  .s-brand, .s-rooms, .s-experiences { padding: 96px 24px; }
}

/* ---------- PHONE REFINEMENTS (≤600px) ---------- */
@media (max-width: 600px) {
  .s-brand, .s-rooms, .s-experiences { padding: 76px 22px; }

  /* Brand intro: numeral becomes a quiet corner mark, not a giant block */
  .brand { gap: 8px; }
  .brand__numeral {
    font-size: 96px;
    text-align: left;
    opacity: 0.08;
    margin-bottom: -18px;
  }
  .brand__h { font-size: clamp(32px, 9vw, 44px); margin: 18px 0; }
  .brand__body { font-size: 15px; }

  /* Press strip: tighter, smaller */
  .press { padding: 22px 0; }
  .press__name { font-size: 17px; }

  /* KARE split */
  .kare-split__content { padding: 56px 22px; }
  .kare-split__media { min-height: 56vh; }
  .kare-split__numeral { font-size: 200px; bottom: -56px; }

  /* Section headers */
  .sec-head { margin-bottom: 40px; gap: 18px; }

  /* Rooms bento: feature image not too tall, names sized down */
  .bento { gap: 20px; }
  .bento__card.feature .bento__img { min-height: 420px; }
  .bento__img { min-height: 300px; }
  .bento__card.feature .bento__name { font-size: 30px; }

  /* Food band */
  .food { min-height: 70vh; }
  .food__content { padding: 40px 22px 56px; }
  .food__venues { gap: 24px; }

  /* Experiences */
  .exp-grid { gap: 28px; }
  .exp-card__img-wrap { aspect-ratio: 3/2; }

  /* Pull quote */
  .quote-section { padding: 120px 24px; }
  .quote__mark { font-size: 96px; margin-bottom: -28px; }

  /* Testimonials */
  .testimonials { padding-top: 80px; padding-bottom: 80px; }
  .testi-grid { gap: 44px; }

  /* Journal */
  .journal { padding-top: 80px; padding-bottom: 80px; }
  .journal-grid { gap: 28px; }

  /* Moodboard already drag-scrolls; tighten heading */
  .moodboard__head { flex-direction: column; align-items: flex-start; gap: 14px; }

  /* Booking: single-column form, comfortable targets */
  .booking { padding: 80px 22px; }
  .booking__inner { gap: 32px; }
  .booking__form { grid-template-columns: 1fr; gap: 20px; padding: 22px; }
  .booking__submit { grid-column: 1 / 2; padding: 18px; }
  .booking__field input, .booking__field select { font-size: 16px; } /* avoids iOS zoom */
}

/* ============================================================
   BOUTIQUE MOBILE LAYER
   The phone build is art-directed, not a collapsed desktop:
   varied image sizes, dome-topped feature imagery, 2-up pairs,
   restrained serif type and generous air. Scoped to small
   screens — the desktop composition above is untouched.
   ============================================================ */

/* ---- TABLET / LARGE PHONE (≤900px) ---- */
@media (max-width: 900px) {
  .s-brand, .s-rooms, .s-experiences { padding: 104px 26px; }

  /* Hero — restrained, legible over photography */
  .hero__content { padding: 40px 26px 92px; }
  .hero__eyebrow { font-size: 15px; margin-bottom: 18px; }
  .hero__h { font-size: clamp(44px, 11vw, 66px); line-height: 1.0; }
  .hero__sub { font-size: 15px; line-height: 1.7; max-width: 34ch; }

  /* Headlines stay quiet — restraint over scale */
  .sec-head__h { font-size: clamp(26px, 6.4vw, 34px); letter-spacing: -0.01em; }
  .sec-head { margin-bottom: 40px; }
  .kare-split__h { font-size: clamp(27px, 6.6vw, 36px); }
  .kare-split__content { padding: 72px 26px; }
  .kare-split__list { gap: 12px 26px; }
  .food__h { font-size: clamp(30px, 7vw, 42px); }
  .booking__h { font-size: clamp(27px, 6.4vw, 34px); }
  .brand__h { font-size: clamp(27px, 6.6vw, 36px); }
}

/* ---- PHONE (≤640px) — the real re-composition ---- */
@media (max-width: 640px) {
  .s-brand, .s-rooms, .s-experiences { padding: 104px 24px; }
  .sec-head { margin-bottom: 34px; }
  .sec-head__h { font-size: clamp(25px, 6.2vw, 30px); }
  .sec-head__right p { font-size: 14px; }

  /* ---------- ROOMS — a swipeable gallery (its own idea: one room at a
     time, peeking the next, edge-to-edge). Native touch scroll-snap. ------ */
  .bento {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 4px -24px 0;
    padding: 0 24px;
  }
  .bento::-webkit-scrollbar { display: none; }
  .bento__card,
  .bento__card.feature {
    flex: 0 0 80vw;
    grid-column: auto;
    grid-row: auto;
    scroll-snap-align: center;
  }
  .bento__img,
  .bento__card.feature .bento__img {
    min-height: 0;
    height: auto;
    aspect-ratio: 4 / 5;
    width: 100%;
  }
  .bento__card.feature .bento__img-wrap { border-radius: 0; }
  .bento__name,
  .bento__card.feature .bento__name { font-size: 23px; }
  .bento__meta { padding-top: 14px; gap: 6px; }
  .bento__num { top: 14px; left: 16px; font-size: 13px; }
  .bento__metarow {
    font-size: 13px; letter-spacing: 0; text-transform: none;
    font-family: var(--f-display); font-style: italic; font-weight: 300;
    color: rgba(14,22,32,0.5); gap: 9px;
  }
  .bento__metarow span.dot { width: 3px; height: 3px; }

  /* ---------- EXPERIENCES — a swipeable editorial rail. Each entry a full
     card (image + words) you swipe through; progress dots beneath. ---------- */
  .exp-grid {
    display: flex; flex-direction: row; flex-wrap: nowrap;
    gap: 14px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin: 0 -22px; padding: 2px 22px 4px;
    scrollbar-width: none;
  }
  .exp-grid::-webkit-scrollbar { display: none; }
  .exp-col { display: contents; }
  .exp-card {
    flex: 0 0 80%; scroll-snap-align: start;
    width: auto; max-width: none; margin: 0; text-align: left;
  }
  .exp-card__img-wrap,
  .exp-col:first-child .exp-card:nth-child(1) .exp-card__img-wrap,
  .exp-col:first-child .exp-card:nth-child(2) .exp-card__img-wrap,
  .exp-col--offset .exp-card:nth-child(1) .exp-card__img-wrap,
  .exp-col--offset .exp-card:nth-child(2) .exp-card__img-wrap { aspect-ratio: 4 / 5; }
  .exp-card__img-wrap { width: 100%; margin: 0 0 18px; }
  .exp-card:nth-child(even) { text-align: left; }
  .exp-card:nth-child(even) .exp-card__eyebrow { justify-content: flex-start; }
  .exp-card:nth-child(even) .exp-card__body { margin-left: 0; }
  .exp-card:nth-child(even) .exp-card__num { left: 16px; right: auto; }
  .exp-card__eyebrow { font-size: 9px; margin-bottom: 10px; }
  .exp-card__h { font-size: clamp(21px, 5.6vw, 26px); margin-bottom: 10px; }
  .exp-card__body { display: block; font-size: 13.5px; line-height: 1.66; max-width: none; }
  .exp-card__cta.cta-line { font-size: 16px; }
  .exp-card__num { top: 16px; left: 16px; }

  /* ---------- JOURNAL — one arched feature, then the other notes as a
     quiet date + headline list (no cramped thumbnails). ---------- */
  .journal-grid { display: flex; flex-direction: column; gap: 24px; }
  .j-card.feature .j-card__img-wrap { aspect-ratio: 5 / 6; margin-bottom: 18px; }
  .j-card.feature .j-card__h { font-size: clamp(24px, 6.2vw, 30px); }
  .j-card.feature .j-card__excerpt { font-size: 14px; line-height: 1.7; }
  .j-card.standard { display: block; padding-top: 22px; border-top: 1px solid rgba(14,22,32,0.12); }
  .j-card.standard .j-card__img-wrap { display: none; }
  .j-card.standard .j-card__date { margin-bottom: 7px; }
  .j-card.standard .j-card__h { font-size: 19px; line-height: 1.28; margin: 0; }
  .j-card.standard .j-card__excerpt { display: none; }

  /* ---------- TESTIMONIALS — a single swipeable line ---------- */
  .testi-grid {
    display: flex; flex-wrap: nowrap;
    gap: 16px; overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -24px; padding: 2px 24px 0;
  }
  .testi-grid::-webkit-scrollbar { display: none; }
  .testi { flex: 0 0 84vw; scroll-snap-align: center; gap: 16px; }
  .testi__text { font-size: 20px; line-height: 1.46; }
  .testi__mark { font-size: 54px; height: 22px; }

  /* Brand intro: arched photo leads, text below (tight) */
  .brand { gap: 20px; }
  .brand__media { aspect-ratio: 5 / 4; }
  .brand__numeral { font-size: 44px; left: 18px; bottom: 12px; }
  .brand__h { font-size: clamp(25px, 6.4vw, 32px); margin: 0 0 14px; }
  .brand__body { font-size: 14px; line-height: 1.68; }

  /* Press strip */
  .press { padding: 22px 0; }
  .press__name { font-size: 17px; }

  /* KARE split */
  .kare-split__content { padding: 60px 22px; }
  .kare-split__media { min-height: 58vh; }
  .kare-split__numeral { font-size: 200px; bottom: -56px; }

  /* Food band */
  .food { min-height: 66vh; }
  .food__content { padding: 40px 22px 56px; }
  .food__venues { gap: 24px; }

  /* Pull quote */
  .quote-section { padding: 116px 24px; }
  .quote__text { font-size: clamp(27px, 7.5vw, 36px); }
  .quote__mark { font-size: 88px; margin-bottom: -26px; }

  /* Moodboard: tighten heading */
  .moodboard__head { flex-direction: column; align-items: flex-start; gap: 14px; }

  /* Booking: single-column form, comfortable targets */
  .booking { padding: 80px 22px; }
  .booking__inner { gap: 32px; }
  .booking__form { grid-template-columns: 1fr; gap: 20px; padding: 22px; }
  .booking__submit { grid-column: 1 / 2; padding: 18px; }
  .booking__field input, .booking__field select { font-size: 16px; } /* avoids iOS zoom */
}

/* ---- SMALL PHONE (≤380px) ---- */
@media (max-width: 380px) {
  .s-brand, .s-rooms, .s-experiences { padding: 72px 18px; }
  .hero__content { padding: 32px 20px 80px; }
  .bento__card.feature .bento__img { min-height: 400px; }
  .booking__form { padding: 18px; }
}

/* ============================================================
   BRAND GATEWAY — authoritative mobile composition.
   Placed last so it wins the cascade over older fragments.
   Big stacked category images, KARE included (the legacy
   "hide by default" rule sat after its own media query and
   killed the mobile KARE tile — fixed here with intent).
   ============================================================ */
@media (max-width: 700px) {
  /* mosaic: heading, a wide ROOMS feature, then EAT + KARE side by side —
     varied sizes instead of three identical stacked blocks. */
  .brand__tri { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  .brand__aside {
    order: 1; grid-column: 1 / 3;
    margin: 0 0 16px; padding: 0;
  }
  .brand__aside .brand__cat--kare { display: none !important; }
  .brand__h { font-size: clamp(28px, 7.6vw, 40px); max-width: none; margin: 0 0 18px; }
  .brand__body { font-size: 15px; line-height: 1.7; max-width: none; margin: 0; }

  .brand__cat { display: block; width: 100%; margin: 0 !important; }
  .brand__cat--rooms { order: 2; grid-column: 1 / 3; }
  .brand__cat--rooms .brand__cat-img { aspect-ratio: 16 / 10; }   /* wide feature */
  .brand__cat--eat { order: 3; grid-column: 1 / 2; }
  .brand__cat--kare-m { order: 4; grid-column: 2 / 3; display: block !important; }
  .brand__cat--eat .brand__cat-img,
  .brand__cat--kare-m .brand__cat-img { aspect-ratio: 1 / 1; }    /* twin squares */
  .brand__cat-label { font-size: 11px; letter-spacing: 0.16em; margin: 12px 0 4px; }
  .brand__cat--rooms .brand__cat-label { font-size: 12px; letter-spacing: 0.18em; }
  .brand__cat-label .ar { width: 24px; }
  .brand__foot { order: 5; grid-column: 1 / 3; margin-top: 18px; }
}

/* ============================================================
   MOBILE SWIPE RAILS — rooms index + KARE signature programmes.
   Turn tall vertical stacks into horizontal scroll-snap rails
   (progress dots via the shared .swipe-cue, ≤640px).
   ============================================================ */
.rooms-index__thumb { display: none; }   /* hidden on desktop; shown in the mobile rail below */
@media (max-width: 640px) {
  /* ---- Rooms: the typographic index becomes a card rail ---- */
  .rooms-index {
    display: flex; flex-direction: row; flex-wrap: nowrap;
    gap: 14px; border-top: 0;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin: 4px -22px 0; padding: 2px 22px 4px; scrollbar-width: none;
  }
  .rooms-index::-webkit-scrollbar { display: none; }
  .rooms-index li { flex: 0 0 70%; scroll-snap-align: start; }
  .rooms-index__row {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 0; padding: 0; border-bottom: 0;
  }
  .rooms-index__thumb {
    display: block; position: relative; overflow: hidden;
    background: var(--c-bone); aspect-ratio: 4 / 5; margin-bottom: 14px;
  }
  .rooms-index__thumb .img {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    transform: scale(1.04);
  }
  .rooms-index__num { grid-row: auto; }
  .rooms-index__name { font-size: 24px; margin-bottom: 8px; }
  .rooms-index__spec { font-size: 10px; }

  /* ---- KARE signature programmes → swipe rail ---- */
  .kare2__pg-row {
    display: flex; flex-direction: row; flex-wrap: nowrap;
    gap: 14px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin: 0 -24px; padding: 2px 24px 4px; scrollbar-width: none;
  }
  .kare2__pg-row::-webkit-scrollbar { display: none; }
  .kare2__pg { flex: 0 0 76%; scroll-snap-align: start; }
  .kare2__pg--a, .kare2__pg--b, .kare2__pg--c { margin-top: 0; }
  .kare2__pg--a .kare2__pg-img,
  .kare2__pg--b .kare2__pg-img,
  .kare2__pg--c .kare2__pg-img { aspect-ratio: 4 / 5; }
}