/* ==========================================================================
   myhotelgo — design system

   Self-contained: no framework, no CDN, no web font. Brand colours are
   injected as custom properties from Admin → Settings.

   The look is built on four decisions:
     · a warm neutral ground, because hospitality is warm and cool greys read
       as software rather than hotels;
     · a serif display face against a sans UI face, which is the typographic
       signature of the premium end of this market;
     · crisp 4px radii and hairline rules instead of soft bubbly shapes;
     · shadows that are layered and barely there, so elevation is felt rather
       than seen.
   ========================================================================== */

:root {
  /* Overridden inline by the header from the settings table. */
  --brand: #0b1020;
  --accent: #d4af37;

  /* The navy is near-black, so "lift" is what gradients are built from. */
  --brand-dark: #05070e;
  --brand-lift: #182240;
  --brand-soft: #f2f3f6;
  --accent-deep: #b8942a;
  --accent-soft: #faf5e6;

  /* Warm neutrals */
  --ink:   #191714;
  --ink-2: #55504a;
  --ink-3: #8b847b;
  --ink-4: #b3aca3;
  --line:  #e7e2da;
  --line-strong: #d6cfc4;
  --bg:    #f8f6f3;
  --bg-2:  #f2efea;
  --card:  #ffffff;

  --green: #1f6b4a;  --green-bg: #e8f2ec;
  --amber: #8a6410;  --amber-bg: #fbf2e0;
  --red:   #a32b22;  --red-bg:   #fbeceb;
  --blue:  #1e4f8f;  --blue-bg:  #eaf0f8;
  --teal:  #146068;  --teal-bg:  #e5f1f2;
  --purple:#5b3a94;  --purple-bg:#f0ebf9;
  --grey:  #5f584f;  --grey-bg:  #efece7;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Elevation: several very low-opacity layers rather than one soft blur. */
  --shadow-xs: 0 1px 2px rgba(25,23,20,.05);
  --shadow: 0 1px 2px rgba(25,23,20,.05), 0 2px 8px -2px rgba(25,23,20,.06);
  --shadow-lg: 0 2px 4px rgba(25,23,20,.04), 0 14px 34px -10px rgba(25,23,20,.14);
  --shadow-xl: 0 4px 10px rgba(25,23,20,.05), 0 34px 68px -20px rgba(25,23,20,.22);
  --shadow-glow: inset 0 0 0 1px rgba(255,255,255,.08), 0 24px 64px -20px rgba(0,0,0,.55);

  --sans: "Century Gothic", Questrial, "URW Gothic", Futura, "Avenir Next", Avenir,
          "Trebuchet MS", "Segoe UI", Roboto, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: var(--serif);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 140ms;
  --t: 240ms;
  --t-slow: 620ms;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;

  /* Everything downstream is sized in rem, so lifting the root size on a large
     display scales type, spacing, controls and container widths together. A
     1440px layout dropped unchanged onto a 4K panel leaves a small island of
     content in a sea of background; this is what stops that happening. */
  font-size: 15.5px;
}
@media (min-width: 1600px) { html { font-size: 16.5px; } }
@media (min-width: 2000px) { html { font-size: 18px; } }
@media (min-width: 2560px) { html { font-size: 20px; } }
@media (min-width: 3200px) { html { font-size: 22.5px; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;          /* follows the root scale set above */
  line-height: 1.62;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Page shell: main absorbs the spare height so short pages still pin the
     footer to the bottom of the window. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }
body > .site-footer { flex-shrink: 0; }
body.no-scroll { overflow: hidden; }

/* Display type is set tight and dark; the serif does the heavy lifting. */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.018em;
  margin: 0 0 .5em;
  color: var(--ink);
}
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem); }
h3 { font-size: clamp(1.05rem, .98rem + .35vw, 1.2rem); font-family: var(--sans);
     font-weight: 650; letter-spacing: -.008em; }
h4 { font-size: .98rem; font-family: var(--sans); font-weight: 650; letter-spacing: 0; }

p { margin: 0 0 1.1em; }
a { color: var(--brand); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
small, .small { font-size: .84rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.75rem 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.muted { color: var(--ink-3); }
.dim { color: var(--ink-2); }
.strong { font-weight: 650; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--mono); font-size: .88em; letter-spacing: -.01em; }
.hide { display: none !important; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.mt1 { margin-top: .5rem; } .mt2 { margin-top: 1rem; } .mt3 { margin-top: 1.75rem; } .mt4 { margin-top: 2.5rem; }
.mb1 { margin-bottom: .5rem; } .mb2 { margin-bottom: 1rem; } .mb3 { margin-bottom: 1.75rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Small-caps label, used for eyebrows and section kickers. */
.eyebrow {
  display: inline-block;
  font-size: max(11px, .7rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--ink-3);
}

/* --------------------------------------------------------------- Layout */

/* Containers are in rem, so they widen with the root scale rather than being
   pinned to a pixel ceiling that strands content on a large display. */
.wrap { max-width: 78rem; margin: 0 auto; padding-inline: clamp(1.15rem, .7rem + 1.8vw, 2.75rem); }
.wrap-narrow { max-width: 49rem; margin: 0 auto; padding-inline: clamp(1.15rem, .7rem + 1.8vw, 2.75rem); }
.wrap-mid { max-width: 63rem; margin: 0 auto; padding-inline: clamp(1.15rem, .7rem + 1.8vw, 2.75rem); }

/* Vertical rhythm. Generous but not cavernous — the earlier ceiling left big
   dead bands between sections on a large screen. */
.section { padding-block: clamp(2.5rem, 1.5rem + 2.6vw, 4rem); }
.section-tight { padding-block: clamp(2rem, 1.3rem + 2vw, 3.25rem); }

/* A consistent gap under every section header, so the sections line up with
   each other instead of each carrying its own inline margin. */
.section-head { margin-bottom: clamp(1.5rem, 1.1rem + 1vw, 2.25rem); }

.row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.row-between { justify-content: space-between; }
.row-end { justify-content: flex-end; }
.row-top { align-items: flex-start; }
.spread { flex: 1; }

.grid { display: grid; gap: 1.5rem; }

.fillgrid {
  display: grid; gap: 1.5rem; align-items: stretch;
  /* Equal rows, so a widened card on the last row is exactly as tall as a
     normal one above it rather than a stubbier version of it. */
  grid-auto-rows: 1fr;
}
.fillgrid > * { min-width: 0; }

/* 4 across: 12 tracks, 3 each. */
.fillgrid-4 { grid-template-columns: repeat(12, 1fr); }
.fillgrid-4 > * { grid-column: span 3; }
.fillgrid-4 > :last-child:nth-child(4n + 1) { grid-column: span 12; }
.fillgrid-4 > :nth-last-child(2):nth-child(4n + 1),
.fillgrid-4 > :last-child:nth-child(4n + 2) { grid-column: span 6; }
.fillgrid-4 > :nth-last-child(3):nth-child(4n + 1),
.fillgrid-4 > :nth-last-child(2):nth-child(4n + 2),
.fillgrid-4 > :last-child:nth-child(4n + 3) { grid-column: span 4; }

/* A card left alone on the final row is turned on its side: a full-width slot
   deserves a wide card, not a stretched narrow one with a metre of empty body.
   Only picture cards qualify — a plain text card is fine either way. */
.fillgrid-4 > .hotel-card:last-child:nth-child(4n + 1),
.fillgrid-4 > .dest:last-child:nth-child(4n + 1),
.fillgrid-3 > .hotel-card:last-child:nth-child(3n + 1),
.fillgrid-3 > .dest:last-child:nth-child(3n + 1) {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  align-items: stretch;
}
.fillgrid-4 > .hotel-card:last-child:nth-child(4n + 1) .thumb,
.fillgrid-3 > .hotel-card:last-child:nth-child(3n + 1) .thumb,
.fillgrid-4 > .dest:last-child:nth-child(4n + 1) .dest-media,
.fillgrid-3 > .dest:last-child:nth-child(3n + 1) .dest-media { height: 100%; }
.fillgrid-4 > .hotel-card:last-child:nth-child(4n + 1) .body,
.fillgrid-3 > .hotel-card:last-child:nth-child(3n + 1) .body,
.fillgrid-4 > .dest:last-child:nth-child(4n + 1) .dest-body,
.fillgrid-3 > .dest:last-child:nth-child(3n + 1) .dest-body {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.25rem, 1rem + 1.4vw, 2.5rem);
}
.fillgrid-4 > .hotel-card:last-child:nth-child(4n + 1) h3,
.fillgrid-3 > .hotel-card:last-child:nth-child(3n + 1) h3 { font-size: 1.5rem; }
@media (max-width: 620px) {
  .fillgrid-4 > .hotel-card:last-child:nth-child(4n + 1),
  .fillgrid-4 > .dest:last-child:nth-child(4n + 1),
  .fillgrid-3 > .hotel-card:last-child:nth-child(3n + 1),
  .fillgrid-3 > .dest:last-child:nth-child(3n + 1) { grid-template-columns: 1fr; }
}

/* 3 across: 6 tracks, 2 each. */
.fillgrid-3 { grid-template-columns: repeat(6, 1fr); }
.fillgrid-3 > * { grid-column: span 2; }
.fillgrid-3 > :last-child:nth-child(3n + 1) { grid-column: span 6; }
.fillgrid-3 > :nth-last-child(2):nth-child(3n + 1),
.fillgrid-3 > :last-child:nth-child(3n + 2) { grid-column: span 3; }

/* 2 across: 2 tracks. */
.fillgrid-2 { grid-template-columns: repeat(2, 1fr); }
.fillgrid-2 > :last-child:nth-child(odd) { grid-column: span 2; }

@media (max-width: 1080px) {
  .fillgrid-4 { grid-template-columns: repeat(4, 1fr); }
  .fillgrid-4 > * { grid-column: span 2; }
  .fillgrid-4 > :last-child:nth-child(4n + 1),
  .fillgrid-4 > :nth-last-child(2):nth-child(4n + 1),
  .fillgrid-4 > :last-child:nth-child(4n + 2),
  .fillgrid-4 > :nth-last-child(3):nth-child(4n + 1),
  .fillgrid-4 > :nth-last-child(2):nth-child(4n + 2),
  .fillgrid-4 > :last-child:nth-child(4n + 3) { grid-column: span 2; }
  .fillgrid-4 > :last-child:nth-child(odd) { grid-column: span 4; }
}
@media (max-width: 900px) {
  .fillgrid-3 { grid-template-columns: repeat(4, 1fr); }
  .fillgrid-3 > * { grid-column: span 2; }
  .fillgrid-3 > :last-child:nth-child(3n + 1),
  .fillgrid-3 > :nth-last-child(2):nth-child(3n + 1),
  .fillgrid-3 > :last-child:nth-child(3n + 2) { grid-column: span 2; }
  .fillgrid-3 > :last-child:nth-child(odd) { grid-column: span 4; }
}
@media (max-width: 620px) {
  .fillgrid-2, .fillgrid-3, .fillgrid-4 { grid-template-columns: 1fr; }
  .fillgrid-2 > *, .fillgrid-3 > *, .fillgrid-4 > * { grid-column: span 1 !important; }
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-sidebar { grid-template-columns: 286px 1fr; align-items: start; }
.grid-detail { grid-template-columns: 1fr 348px; align-items: start; }

@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-sidebar, .grid-detail { grid-template-columns: 1fr; }
}
@media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .grid-4 { grid-template-columns: 1fr; } }

/* Section header: eyebrow, title, optional description. */
.section-title {
  position: relative;
  margin-bottom: .35rem;
}
.section-title::after {
  content: "";
  position: absolute; left: 0; bottom: -.6rem;
  width: 0; height: 2px;
  background: var(--accent);
  transition: width var(--t-slow) var(--ease-out) 160ms;
}
.reveal.is-visible .section-title::after,
.section-title.is-visible::after { width: 44px; }

/* ---------------------------------------------------------------- Cards */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.card-pad { padding: 1.5rem; }
.card-head {
  padding: 1.15rem 1.5rem;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.card-head h2, .card-head h3 { margin: 0; }
.card-body { padding: 1.5rem; }
.card-foot { padding: 1.15rem 1.5rem; border-top: 1px solid var(--line); background: var(--bg); }

.card-link {
  display: block; color: inherit; overflow: hidden;
  transition: border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease-out),
              transform var(--t) var(--ease-out);
}
.card-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.card-link:hover {
  text-decoration: none;
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lg);
}

/* -------------------------------------------------------------- Buttons */

/* Primary calls to action are pills with a sliding pair of arrows: one leaves
   to the right as the next arrives from the left, so the button feels like it
   is already moving you along. */
.btn-arrows {
  position: relative; display: inline-block; overflow: hidden;
  width: 1.05em; height: 1.05em; flex-shrink: 0; vertical-align: -.12em;
}
.btn-arrows i {
  position: absolute; inset: 0; font-style: normal; line-height: 1.05;
  transition: transform var(--t-slow) var(--ease-out);
}
.btn-arrows i + i { transform: translateX(-135%); }
.btn:hover .btn-arrows i,
.card-link:hover .btn-arrows i,
a:hover > .btn-arrows i { transform: translateX(135%); }
.btn:hover .btn-arrows i + i,
.card-link:hover .btn-arrows i + i,
a:hover > .btn-arrows i + i { transform: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .72rem 1.35rem;
  font: inherit; font-size: .92rem; font-weight: 600; line-height: 1.2;
  letter-spacing: .01em;
  border: 1px solid var(--brand); border-radius: var(--radius-pill);
  background: var(--brand); color: #fff;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:hover { background: var(--brand-lift); border-color: var(--brand-lift); color: #fff;
             text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-accent {
  background: var(--accent); border-color: var(--accent); color: #24200f;
}
.btn-accent:hover {
  background: var(--accent-deep); border-color: var(--accent-deep); color: #24200f;
  box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--accent) 75%, transparent);
}
.btn-outline { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-outline:hover { background: var(--card); border-color: var(--ink-3); color: var(--ink); }
.btn-ghost {
  background: transparent; border-color: transparent; color: var(--brand);
  padding: .45rem .7rem;
}
.btn-ghost:hover { background: var(--brand-soft); border-color: transparent; color: var(--brand); box-shadow: none; }
.btn-danger { background: var(--red); border-color: var(--red); }
.btn-danger:hover { background: #8a231c; border-color: #8a231c; }
.btn-sm { padding: .42rem .85rem; font-size: .84rem; }
.btn-lg { padding: .95rem 1.9rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------- Forms */

.field { margin-bottom: 1.15rem; }
.label {
  display: block;
  font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-3); margin-bottom: .45rem;
}
.label .req { color: var(--red); }
.hint { font-size: .8rem; color: var(--ink-3); margin-top: .4rem; line-height: 1.5; }

.input, .select, .textarea { border-radius: 12px; }
.input, .select, .textarea {
  width: 100%; padding: .68rem .85rem;
  font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-4); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent);
}
.input:disabled, .select:disabled { background: var(--bg-2); color: var(--ink-3); cursor: not-allowed; }
.textarea { min-height: 118px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%238b847b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center;
  padding-right: 2.1rem;
}
.input-color { padding: .2rem; height: 44px; cursor: pointer; }

.check { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .65rem; font-size: .93rem; }
.check input { margin-top: .3rem; flex-shrink: 0; accent-color: var(--brand); }

.field-row { display: grid; gap: 1.15rem; grid-template-columns: repeat(2, 1fr); }
.field-row-3 { display: grid; gap: 1.15rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 620px) { .field-row, .field-row-3 { grid-template-columns: 1fr; } }

fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; margin: 0 0 1.35rem; }
legend { font-weight: 700; padding: 0 .5rem; font-size: .84rem; letter-spacing: .02em; }

/* --------------------------------------------------------------- Alerts */

.alert {
  padding: .9rem 1.1rem; border-radius: var(--radius);
  border: 1px solid; border-left-width: 3px;
  margin-bottom: 1.15rem; font-size: .93rem;
}
.alert-success { background: var(--green-bg); border-color: #c2ddcf; border-left-color: var(--green); color: #16543a; }
.alert-error   { background: var(--red-bg);   border-color: #f0c8c5; border-left-color: var(--red);   color: #85221b; }
.alert-info    { background: var(--blue-bg);  border-color: #cbdcf1; border-left-color: var(--blue);  color: #1a4478; }
.alert-warn    { background: var(--amber-bg); border-color: #eddcb4; border-left-color: var(--amber); color: #74530d; }
.alert a { color: inherit; text-decoration: underline; }

/* --------------------------------------------------------------- Badges */

.badge {
  display: inline-block; padding: .2rem .55rem;
  font-size: max(11px, .7rem); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  border-radius: var(--radius-sm); white-space: nowrap;
}
.badge-green  { background: var(--green-bg);  color: var(--green); }
.badge-amber  { background: var(--amber-bg);  color: var(--amber); }
.badge-red    { background: var(--red-bg);    color: var(--red); }
.badge-blue   { background: var(--blue-bg);   color: var(--blue); }
.badge-teal   { background: var(--teal-bg);   color: var(--teal); }
.badge-purple { background: var(--purple-bg); color: var(--purple); }
.badge-grey   { background: var(--grey-bg);   color: var(--grey); }

.pill {
  display: inline-block; padding: .28rem .75rem; border-radius: 100px;
  background: var(--card); border: 1px solid var(--line); font-size: .82rem; color: var(--ink-2);
}

/* --------------------------------------------------------------- Tables */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: .91rem; }
table.data th {
  text-align: left; font-size: max(11px, .69rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3);
  padding: .85rem 1.5rem; border-bottom: 1px solid var(--line); white-space: nowrap;
  background: var(--bg);
}
table.data td { padding: .95rem 1.5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr { transition: background var(--t-fast) var(--ease); }
table.data tbody tr:hover { background: var(--bg); }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }

.empty { padding: 3.5rem 1.5rem; text-align: center; color: var(--ink-3); }
.empty-icon { font-size: 2rem; color: var(--ink-4); margin-bottom: .6rem; }

/* ----------------------------------------------------------- Public nav */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--brand);
  background: color-mix(in srgb, var(--brand) 92%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              padding var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
/* How far down the page you are, drawn in gold along the foot of the bar. */
.site-header::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px;
  width: var(--scrolled, 0%);
  background: linear-gradient(90deg,
              color-mix(in srgb, var(--accent) 35%, transparent), var(--accent));
  opacity: 0; transition: opacity var(--t) var(--ease);
  pointer-events: none;
}
.site-header.is-stuck::after { opacity: 1; }

.site-header .wrap {
  display: flex; align-items: center; gap: 1.5rem; height: 74px;
  border-radius: 0;
  transition: height var(--t) var(--ease), background var(--t) var(--ease),
              border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
              padding var(--t) var(--ease);
  border: 1px solid transparent;
}

/* Once the page moves, the bar lifts off the edge and becomes a floating
   capsule — the one moment of chrome on the whole site, and the thing people
   remember about the navigation. */
.site-header.is-stuck {
  background: transparent; border-bottom-color: transparent;
  backdrop-filter: none;
  padding-block: .6rem;
}
.site-header.is-stuck .wrap {
  height: 60px;
  max-width: 74rem;
  padding-inline: clamp(1rem, .6rem + 1.2vw, 1.6rem);
  border-radius: var(--radius-pill);
  background: var(--brand-dark);
  background: color-mix(in srgb, var(--brand-dark) 88%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 18px 44px -16px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
}
.site-header.is-stuck::after { left: 50%; transform: translateX(-50%); max-width: 74rem; }

@media (max-width: 900px) {
  .site-header.is-stuck { padding-block: .45rem; }

  /* The capsule is constrained directly rather than by padding the header:
     a later rule in the phone block re-declares .site-header.is-stuck, and
     inline padding there was being lost. Sizing the capsule to the container
     width leaves its edges on the same line as the page content, whatever
     else touches the header. */
  .site-header.is-stuck .wrap {
    height: 56px;
    max-width: calc(100% - 2 * clamp(1.15rem, .7rem + 1.8vw, 2.75rem));
    margin-inline: auto;
    padding-inline: 1rem;
  }
}

.brand {
  display: flex; align-items: center; gap: .7rem;
  color: #fff; font-family: var(--display); font-weight: 600;
  font-size: 1.2rem; letter-spacing: -.01em;
}
.brand:hover { text-decoration: none; color: #fff; }
.brand-mark {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: var(--accent); color: #1a1608;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
}
.brand img { max-height: 36px; width: auto; }

.site-nav { display: flex; gap: 2rem; margin-left: auto; align-items: center; }
.site-nav a {
  position: relative;
  color: rgba(255,255,255,.72); font-size: .88rem; font-weight: 500; letter-spacing: .01em;
  transition: color var(--t-fast) var(--ease);
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t) var(--ease-out);
}
.site-nav a:hover, .site-nav a.on { color: #fff; text-decoration: none; }
.site-nav a:hover::after, .site-nav a.on::after { transform: scaleX(1); }
.site-nav .btn { color: #24200f; }
.site-nav .btn::after { display: none; }

.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  color: #fff; display: grid; place-items: center;
  font-weight: 650; font-size: .82rem; flex-shrink: 0;
}

.notice-bar {
  background: var(--accent-soft);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: #5c4708; font-size: .89rem;
}
.notice-bar .wrap { display: flex; align-items: center; gap: 1rem; padding-block: .7rem; flex-wrap: wrap; }

/* ---- Mobile drawer ---- */

.nav-toggle {
  display: none;
  width: 42px; height: 42px; margin-left: auto;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  color: #fff; cursor: pointer;
  align-items: center; justify-content: center;
  transition: background var(--t-fast) var(--ease);
}
.nav-toggle:hover { background: rgba(255,255,255,.18); }
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block; width: 17px; height: 1.5px; border-radius: 2px;
  background: currentColor; transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -5.5px; }
.nav-toggle span::after  { top: 5.5px; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translateY(5.5px) rotate(45deg); }
body.nav-open .nav-toggle span::after  { transform: translateY(-5.5px) rotate(-45deg); }

.nav-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(5,7,14,.62); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t) var(--ease), visibility var(--t) var(--ease);
}
body.nav-open .nav-scrim { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 95;
  width: min(330px, 87vw);
  max-width: 100%;
  background: var(--brand);
  border-left: 1px solid rgba(255,255,255,.08);
  box-shadow: -24px 0 70px -24px rgba(0,0,0,.7);
  transform: translateX(100%);
  transition: transform var(--t) var(--ease-out);
  display: flex; flex-direction: column;
  overscroll-behavior: contain;
}
body.nav-open .drawer { transform: none; }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0;
}
.drawer-close {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: rgba(255,255,255,.08); border: 0; border-radius: var(--radius);
  color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.drawer-close:hover { background: rgba(255,255,255,.18); }

.drawer-body { flex: 1; overflow-y: auto; padding: .85rem; }
.drawer-body a {
  display: flex; align-items: center; gap: .8rem;
  min-height: 48px; padding: .7rem .85rem;
  border-radius: var(--radius);
  color: rgba(255,255,255,.82); font-size: .98rem; font-weight: 500;
}
.drawer-body a:hover, .drawer-body a:focus-visible {
  background: rgba(255,255,255,.09); color: #fff; text-decoration: none;
}
.drawer-body a.on { background: rgba(255,255,255,.07); color: #fff; }
.drawer-body a .ico { width: 20px; text-align: center; opacity: .6; flex-shrink: 0; }

.drawer-divider { height: 1px; background: rgba(255,255,255,.09); margin: .85rem .85rem; }
.drawer-label {
  font-size: max(11px, .68rem); text-transform: uppercase; letter-spacing: .14em;
  color: rgba(255,255,255,.38); font-weight: 700; padding: .5rem .85rem .3rem;
}
.drawer-foot { padding: 1rem; border-top: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
.drawer-user {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem .85rem; margin-bottom: .6rem;
  background: rgba(255,255,255,.06); border-radius: var(--radius);
}
.drawer-user .who { min-width: 0; }
.drawer-user .who strong { display: block; color: #fff; font-size: .92rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-user .who span { font-size: .76rem; color: rgba(255,255,255,.52); }

@media (max-width: 900px) {
  .site-nav { display: none; }
  .nav-toggle { display: flex; }
  .site-header .wrap { height: 64px; }
}
@media (min-width: 901px) { .drawer, .nav-scrim { display: none; } }

/* ------------------------------------------------------------------ Hero */

.hero {
  position: relative;
  isolation: isolate;
  /* The ceiling is generous so a tall 4K panel gets a hero in proportion to
     the screen rather than a short band with a large photograph behind it. */
  min-height: clamp(32rem, 78vh, 62rem);
  display: flex; align-items: flex-end;
  padding-block: clamp(4rem, 3rem + 6vw, 8rem) clamp(5rem, 3rem + 8vw, 9rem);
  color: #fff;
  background: var(--brand);
  overflow: hidden;
}

/* Photography sits behind everything, drifting very slowly. */
.hero-media {
  position: absolute; inset: 0; z-index: -3;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  transform: scale(1.06);
  animation: heroDrift 26s var(--ease) infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.4%, -1.2%, 0); }
}

/* Two scrims: one darkens the whole frame, one weights the reading side. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(to top, rgba(5,7,14,.94) 0%, rgba(5,7,14,.55) 42%, rgba(5,7,14,.28) 100%),
    linear-gradient(to right, rgba(5,7,14,.78) 0%, rgba(5,7,14,.30) 52%, transparent 88%);
}
/* A whisper of gold light in the upper corner. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(46% 52% at 84% 12%,
              color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 68%);
  pointer-events: none;
}

.hero .wrap { width: 100%; }
.hero-inner { max-width: none; }

/* Headline left, supporting line right, both on one horizontal band. */
.hero-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.75rem, 1rem + 3vw, 4.5rem);
  align-items: end;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .75rem;
  margin-bottom: 1.5rem;
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .2em;
  color: rgba(255,255,255,.78);
}
.hero-eyebrow::before {
  content: ""; width: 34px; height: 1px; background: var(--accent);
}
.hero-eyebrow .dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  60%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent); }
}

.hero h1 {
  color: #fff;
  font-size: clamp(2.15rem, 1.35rem + 3.4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -.028em;
  font-weight: 500;
  max-width: 22ch;
  margin-bottom: 0;
  text-wrap: balance;
}
.hero-copy p {
  color: rgba(255,255,255,.8);
  max-width: none;
  font-size: clamp(1rem, .94rem + .4vw, 1.12rem);
  line-height: 1.7;
  margin-bottom: 0;
  padding-left: clamp(1rem, .5rem + 1.4vw, 2rem);
  padding-bottom: .35rem;
  border-left: 1px solid rgba(255,255,255,.16);
}
@media (max-width: 880px) {
  .hero-copy { grid-template-columns: 1fr; gap: 1.15rem; }
  .hero-copy p { padding-left: 0; padding-bottom: 0; border-left: 0; max-width: 60ch; }
}

.hero-trust {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .85rem 1.5rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .85rem; color: rgba(255,255,255,.7);
}
.hero-trust span { display: inline-flex; align-items: center; gap: .5rem; letter-spacing: .01em; }
.hero-trust .tick { color: var(--accent); font-style: normal; font-size: .82rem; }

/* -------------------------------------------------------- Search widget */

.searchbar {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 1.15rem;
  display: grid; gap: .9rem;
  grid-template-columns: 1.7fr 1fr 1fr .85fr auto;
  align-items: end;
}
.searchbar .field { margin: 0; }
.searchbar .label { font-size: max(11px, .68rem); letter-spacing: .12em; }
.searchbar .input, .searchbar .select { border-color: var(--line); }
.searchbar-row {
  grid-column: 1 / -1;
  display: grid; gap: .9rem;
  grid-template-columns: 1fr 1fr auto;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
}
.searchbar-row .field { margin: 0; }
@media (max-width: 940px) { .searchbar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .searchbar-row { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .searchbar { grid-template-columns: 1fr; } }

.search-summary { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
  font-size: .88rem; color: var(--ink-2); }

/* ---------------------------------------------------------- Hotel cards */

.hotel-card { overflow: hidden; }
.fillgrid .hotel-card .thumb { aspect-ratio: auto; height: clamp(9.5rem, 7rem + 5vw, 13rem); }
.hotel-card .thumb {
  aspect-ratio: 3 / 2;
  background: var(--bg-2) center/cover no-repeat;
  position: relative;
  transition: transform var(--t-slow) var(--ease-out);
}
.card-link:hover .thumb { transform: scale(1.045); }
.hotel-card .thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,7,14,.30), transparent 48%);
}
.thumb.no-photo, .shot.no-photo {
  background: linear-gradient(150deg, var(--brand-lift) 0%, var(--brand) 100%);
  display: grid; place-items: center;
}
.thumb.no-photo::after, .shot.no-photo::after {
  content: attr(data-initial);
  font-family: var(--display); font-size: 2.1rem; font-weight: 600;
  color: color-mix(in srgb, var(--accent) 62%, transparent);
  background: none; position: static;
}
.shot.no-photo::after { font-size: 1.5rem; }

.hotel-card .thumb .flag {
  position: absolute; top: .75rem; left: .75rem; z-index: 1;
  background: rgba(255,255,255,.93); color: var(--ink);
  font-size: max(11px, .65rem); font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  padding: .28rem .6rem; border-radius: var(--radius-sm);
}
.hotel-card .body { padding: 1.15rem 1.25rem 1.35rem; }
.hotel-card h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
.hotel-card .loc { font-size: .85rem; color: var(--ink-3); margin-bottom: .85rem; }
.hotel-card .loc .dist { color: var(--brand); font-weight: 600; }
.price-from { font-size: .76rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .07em; }
.price-from strong {
  display: block; font-family: var(--display); font-size: 1.2rem;
  color: var(--ink); letter-spacing: -.01em; text-transform: none;
  font-variant-numeric: tabular-nums;
}

.stars { color: var(--accent); letter-spacing: .08em; font-size: .85rem; }
.stars .off { color: var(--line-strong); }
.rating-value { font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; }

.amenity-list { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: 0; }
.amenity-list li {
  font-size: .81rem; color: var(--ink-2);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .28rem .65rem;
}

/* ------------------------------------------------------------ Room rows */

.room-row { display: grid; grid-template-columns: 200px 1fr 210px; gap: 1.5rem; padding: 1.5rem; align-items: center; }
.room-row + .room-row { border-top: 1px solid var(--line); }
.room-row .shot { aspect-ratio: 4/3; border-radius: var(--radius); background: var(--bg-2) center/cover no-repeat; }
@media (max-width: 800px) { .room-row { grid-template-columns: 1fr; } .room-row .shot { max-width: 280px; } }

.gallery { display: grid; gap: .5rem; grid-template-columns: 2fr 1fr 1fr; border-radius: var(--radius-lg); overflow: hidden; }
.gallery img { aspect-ratio: 4/3; object-fit: cover; width: 100%; transition: transform var(--t-slow) var(--ease-out); }
.gallery img:first-child { grid-row: span 2; aspect-ratio: 1; }
.gallery img:hover { transform: scale(1.03); }
@media (max-width: 700px) {
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery img:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16/10; }
}

/* --------------------------------------------------------------- Totals */

.totals { list-style: none; margin: 0; padding: 0; font-size: .93rem; }
.totals li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0;
             font-variant-numeric: tabular-nums; }
.totals li.total {
  border-top: 1px solid var(--line); margin-top: .5rem; padding-top: .85rem;
  font-weight: 700; font-size: 1.1rem; font-family: var(--display);
}
.totals .lbl { color: var(--ink-2); font-family: var(--sans); font-weight: 400; }

/* ---------------------------------------------------------------- Steps */

.steps { display: flex; gap: .6rem; list-style: none; padding: 0; margin: 0 0 2rem;
         font-size: .78rem; flex-wrap: wrap; text-transform: uppercase; letter-spacing: .1em; }
.steps li { display: flex; align-items: center; gap: .5rem; color: var(--ink-4); font-weight: 600; }
.steps li::after { content: ""; width: 22px; height: 1px; background: var(--line-strong); margin-left: .5rem; }
.steps li:last-child::after { display: none; }
.steps li.on { color: var(--brand); }
.steps li.done { color: var(--green); }

/* ------------------------------------------------------------------- QR */

.qr-box { background: #fff; padding: 1rem; border-radius: var(--radius);
          display: inline-block; border: 1px solid var(--line); }
.qr-box svg { display: block; }

/* ----------------------------------------------------------- Breadcrumb */

.crumbs { font-size: .8rem; color: var(--ink-3); margin-bottom: 1.35rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: .4rem; color: var(--line-strong); }
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--brand); }

/* ----------------------------------------------------------- Pagination */

.pager { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: 1.75rem; }
.pager a, .pager span {
  min-width: 38px; padding: .45rem .65rem; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); font-size: .88rem; color: var(--ink-2);
}
.pager a:hover { border-color: var(--ink-4); text-decoration: none; color: var(--ink); }
.pager .on { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }
.pager .gap { border: 0; background: none; }

/* ---------------------------------------------------------------- Stats */

.stat { padding: 1.35rem 1.5rem; }
.stat .k {
  font-size: max(11px, .68rem); text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-3); font-weight: 700;
}
.stat .v {
  font-family: var(--display); font-size: 2rem; font-weight: 600;
  line-height: 1.1; margin-top: .45rem; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.stat .sub { font-size: .81rem; color: var(--ink-3); margin-top: .3rem; }
.stat.accent .v { color: var(--brand); }

.bar { height: 5px; border-radius: 100px; background: var(--bg-2); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--brand); border-radius: 100px;
              transition: width var(--t-slow) var(--ease-out); }

.meter-list { list-style: none; padding: 0; margin: 0; font-size: .89rem; }
.meter-list li { padding: .5rem 0; }
.meter-list .row { justify-content: space-between; margin-bottom: .35rem; gap: .5rem; }

/* --------------------------------------------------------------- Footer */

.site-footer {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--brand-dark); color: rgba(255,255,255,.58);
  padding: 0 0 1.5rem;
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  font-size: .9rem;
}
.site-footer::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px; z-index: 2;
  background: linear-gradient(to right, transparent, var(--accent) 22%, var(--accent) 78%, transparent);
  opacity: .75;
}
.site-footer::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(52% 60% at 78% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 68%),
    radial-gradient(46% 70% at 6% 100%, rgba(255,255,255,.05), transparent 70%);
}
.site-footer h4 {
  color: #fff; font-family: var(--sans);
  font-size: max(11px, .68rem); text-transform: uppercase; letter-spacing: .15em;
  margin-bottom: 1.05rem; font-weight: 700;
}
.site-footer a { color: rgba(255,255,255,.58); display: block; padding: .24rem 0; }
.site-footer a:hover { color: #fff; text-decoration: none; }

/* --- Masthead: wordmark, promise, handles --- */
.foot-mast {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem 2.5rem;
  padding-block: clamp(2.25rem, 1.5rem + 2.4vw, 3.75rem) clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.foot-word {
  display: block; color: #fff; font-family: var(--display); font-weight: 600;
  font-size: clamp(2rem, 1.3rem + 2.9vw, 3.6rem); line-height: .95; letter-spacing: -.035em;
}
.foot-word:hover { color: #fff; text-decoration: none; }
.foot-word .dot { color: var(--accent); }
.foot-claim {
  margin: .85rem 0 0; max-width: 42ch; font-size: .95rem; line-height: 1.65;
  color: rgba(255,255,255,.62);
}
.foot-mast-right { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.foot-mast-right .social { justify-content: flex-end; }
@media (min-width: 561px) { .foot-mast-right { align-items: flex-end; } }

.social { display: flex; flex-wrap: wrap; gap: .55rem; }
.social a {
  width: 2.55rem; height: 2.55rem; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.72);
  transition: color var(--t) var(--ease), background var(--t) var(--ease),
              border-color var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.social a svg { width: 1.05rem; height: 1.05rem; fill: currentColor; display: block; }
.social a:hover {
  color: #1c1500; background: var(--accent);
  border-color: var(--accent); transform: translateY(-3px);
}
.social a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Written against .site-footer .legal so it outweighs the link reset that
   flattens everything else in that bar — that reset was stripping the padding
   and squashing the button into a 79px box with the label wrapping inside. */
.site-footer .legal .to-top {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .35rem .35rem .35rem 1.05rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.72); white-space: nowrap; line-height: 1;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease),
              background var(--t) var(--ease);
}
.site-footer .legal .to-top:hover {
  color: #fff; border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.1);
  text-decoration: none;
}
.site-footer .legal .to-top .arw {
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--accent); color: #1c1500;
  transition: transform var(--t) var(--ease-out);
}
.site-footer .legal .to-top .arw svg { width: .9rem; height: .9rem; stroke-width: 2.4; }
.site-footer .legal .to-top:hover .arw { transform: translateY(-3px); }

/* --- Link columns --- */
.site-footer .cols {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.35fr; gap: 2.5rem;
  padding-block: clamp(2rem, 1.4rem + 2vw, 3rem);
}
.foot-contact { font-style: normal; line-height: 1.75; }
.foot-contact .ln {
  display: grid; grid-template-columns: 1.9rem 1fr; gap: .75rem;
  align-items: start; margin-bottom: .95rem;
}
.foot-contact .ln:last-child { margin-bottom: 0; }
.foot-contact .ic {
  width: 1.9rem; height: 1.9rem; border-radius: var(--radius-sm);
  display: grid; place-items: center; margin-top: .1rem;
  background: rgba(255,255,255,.06); color: var(--accent);
}
.foot-contact .ic svg { width: .95rem; height: .95rem; }
.foot-contact a { display: inline; padding: 0; }

.foot-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.15rem; }
.foot-badges span {
  font-size: max(11px, .66rem); font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  padding: .32rem .6rem; border-radius: 100px;
  border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.6);
}

.site-footer .legal {
  border-top: 1px solid rgba(255,255,255,.09);
  padding-top: 1.4rem; font-size: .78rem; color: rgba(255,255,255,.42);
  gap: .9rem 1.5rem; align-items: center;
}
.site-footer .legal > :first-child { margin-right: auto; }
.legal-links { flex: 0 1 auto; }
.to-top { flex-shrink: 0; min-width: max-content; }
.site-footer .legal a { display: inline; padding: 0; color: rgba(255,255,255,.5); }
.legal-links { display: flex; flex-wrap: wrap; gap: 1.15rem; }

@media (max-width: 900px) { .site-footer .cols { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 560px) {
  .site-footer .cols { grid-template-columns: 1fr; }
  .foot-mast { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Admin shell
   ========================================================================== */

.admin { display: flex; min-height: 100vh; }

.sidebar {
  width: 252px; flex-shrink: 0;
  background: var(--brand); color: rgba(255,255,255,.68);
  position: fixed; inset: 0 auto 0 0; z-index: 60; overflow-y: auto;
  display: flex; flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.06);
}
.sidebar-head { padding: 1.35rem 1.15rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.sidebar-head .brand { font-size: 1.05rem; }
.sidebar-scope {
  font-size: max(11px, .68rem); color: rgba(255,255,255,.4);
  text-transform: uppercase; letter-spacing: .12em; margin-top: .45rem;
}
.sidebar nav { padding: .85rem .7rem; flex: 1; }
.sidebar .group {
  font-size: max(11px, .64rem); text-transform: uppercase; letter-spacing: .15em;
  color: rgba(255,255,255,.32); padding: 1.1rem .7rem .45rem; font-weight: 700;
}
.sidebar a {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .7rem; border-radius: var(--radius);
  color: rgba(255,255,255,.68); font-size: .89rem;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.sidebar a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.sidebar a.on {
  background: rgba(255,255,255,.09); color: #fff; font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent);
}
.sidebar a .ico { width: 18px; text-align: center; flex-shrink: 0; opacity: .65; }
.sidebar a.on .ico { opacity: 1; color: var(--accent); }
.sidebar-foot { padding: .7rem; border-top: 1px solid rgba(255,255,255,.07); }

.admin-main { flex: 1; min-width: 0; margin-left: 252px; display: flex; flex-direction: column; }
.admin-bar {
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.admin-bar .inner { display: flex; align-items: center; gap: 1rem; padding: 1rem 2rem; }
.admin-bar h1 { font-size: 1.3rem; margin: 0; }
.admin-bar .sub {
  font-size: .72rem; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .1em; margin-top: .15rem;
}
.admin-content { padding: 2rem; flex: 1; }

.sidebar-toggle { display: none; background: none; border: 0; font-size: 1.3rem;
                  cursor: pointer; padding: .2rem .4rem; color: var(--ink); }
.scrim { display: none; position: fixed; inset: 0; background: rgba(5,7,14,.5); z-index: 55; }

@media (max-width: 1000px) {
  .sidebar { transform: translateX(-100%); transition: transform var(--t) var(--ease-out); }
  .sidebar.open { transform: none; }
  .admin-main { margin-left: 0; }
  .sidebar-toggle { display: block; }
  .scrim.on { display: block; }
  .admin-content { padding: 1.15rem; }
  .admin-bar .inner { padding: .85rem 1.15rem; }
}

/* Room board */
.room-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .65rem; }
.room-tile {
  border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--radius);
  padding: .7rem; background: var(--card); text-align: left; font: inherit;
  transition: box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.room-tile:hover { box-shadow: var(--shadow); }
.room-tile .no { font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
.room-tile .ty { font-size: max(11px, .7rem); color: var(--ink-3); margin-bottom: .4rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-tile.s-AVAILABLE   { border-left-color: var(--green); }
.room-tile.s-HELD        { border-left-color: var(--amber); }
.room-tile.s-BOOKED      { border-left-color: var(--blue); }
.room-tile.s-OCCUPIED    { border-left-color: var(--purple); }
.room-tile.s-CLEANING    { border-left-color: var(--teal); }
.room-tile.s-MAINTENANCE { border-left-color: var(--red); }

.legend { display: flex; gap: 1.15rem; flex-wrap: wrap; font-size: .82rem; color: var(--ink-2); }
.legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: .4rem; }

/* Settings */
.settings-nav { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.settings-nav a {
  padding: .5rem .95rem; border-radius: var(--radius); font-size: .87rem;
  background: transparent; border: 1px solid var(--line); color: var(--ink-2);
  transition: all var(--t-fast) var(--ease);
}
.settings-nav a:hover { border-color: var(--ink-4); color: var(--ink); text-decoration: none; }
.settings-nav a.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }

.setting-row {
  padding: 1.35rem 0; border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 320px 1fr; gap: 2rem; align-items: start;
}
.setting-row:last-child { border-bottom: 0; }
.setting-row .meta .name { font-weight: 650; font-size: .94rem; }
.setting-row .meta .help { font-size: .82rem; color: var(--ink-3); margin-top: .3rem; line-height: 1.55; }
@media (max-width: 780px) { .setting-row { grid-template-columns: 1fr; gap: .65rem; } }

/* ==========================================================================
   Motion
   ========================================================================== */

.js-motion .reveal {
  opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
  will-change: opacity, transform;
}
.js-motion .reveal.is-visible { opacity: 1; transform: none; will-change: auto; }
.js-motion .reveal-left  { transform: translate3d(-24px, 0, 0); }
.js-motion .reveal-right { transform: translate3d(24px, 0, 0); }
.js-motion .reveal-scale { transform: scale(.97); }

.stat .v[data-count] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .js-motion .reveal { opacity: 1 !important; transform: none !important; }
  .section-title::after { width: 44px; }
  .hero-media { animation: none; transform: scale(1.02); }
}

/* ==========================================================================
   Homepage sections
   ========================================================================== */

/* ---- Featured showcase --------------------------------------------------
   One hotel at a time, crossfading. Slides are stacked in the same grid cell
   so the frame never changes height between them, which is what stops the
   page jumping as it advances. */

.showcase {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--brand);
  box-shadow: var(--shadow-lg);
}

.showcase-track { display: grid; }
.showcase-slide {
  grid-area: 1 / 1;                 /* every slide occupies the same cell */
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  min-height: 27rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-slow) var(--ease), visibility var(--t-slow) var(--ease);
}
.showcase-slide.on { opacity: 1; visibility: visible; }

.showcase-media {
  position: relative;
  background: var(--brand-lift) center/cover no-repeat;
  min-width: 0;
  transform: scale(1.02);
  transition: transform 9s var(--ease);
}
.showcase-slide.on .showcase-media { transform: scale(1.09); }
.showcase-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 55%, rgba(11,16,32,.55) 100%);
}

.showcase-body {
  min-width: 0;
  padding: clamp(1.75rem, 1rem + 3vw, 3.25rem);
  display: flex; flex-direction: column; justify-content: center;
  color: #fff;
}
/* Content lifts in just behind the crossfade. */
.showcase-slide.on .showcase-body > * {
  animation: showcaseIn var(--t-slow) var(--ease-out) backwards;
}
.showcase-slide.on .showcase-body > *:nth-child(1) { animation-delay: .10s; }
.showcase-slide.on .showcase-body > *:nth-child(2) { animation-delay: .16s; }
.showcase-slide.on .showcase-body > *:nth-child(3) { animation-delay: .22s; }
.showcase-slide.on .showcase-body > *:nth-child(4) { animation-delay: .28s; }
.showcase-slide.on .showcase-body > *:nth-child(5) { animation-delay: .34s; }
.showcase-slide.on .showcase-body > *:nth-child(6) { animation-delay: .40s; }
@keyframes showcaseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.showcase-body h3 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.15rem);
  color: #fff; margin: .5rem 0 .35rem; letter-spacing: -.02em;
}
.showcase-loc { color: rgba(255,255,255,.65); font-size: .88rem; margin-bottom: 1rem; }
.showcase-desc { color: rgba(255,255,255,.76); font-size: .95rem; max-width: 40ch; margin-bottom: 1.25rem; }
.showcase-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.5rem;
  padding: 1.15rem 0; margin-bottom: 1.35rem;
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.showcase-meta .m .v {
  font-family: var(--display); font-size: 1.25rem; font-weight: 600;
  color: var(--accent); line-height: 1;
}
.showcase-meta .m .c {
  font-size: max(11px, .66rem); text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.5); margin-top: .3rem;
}
.showcase-body .amenity-list li {
  background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.8);
}

/* Controls */
.showcase-nav {
  position: absolute; right: 1.15rem; bottom: 1.15rem; z-index: 3;
  display: flex; align-items: center; gap: .5rem;
}
.showcase-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  color: #fff; font-size: 1rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.showcase-btn:hover { background: rgba(255,255,255,.25); transform: translateY(-1px); }

.showcase-dots {
  position: absolute; left: clamp(1.75rem, 1rem + 3vw, 3.25rem); bottom: 1.35rem; z-index: 3;
  display: flex; gap: .5rem; align-items: center;
}
.showcase-dot {
  width: 30px; height: 3px; border-radius: 100px; border: 0; padding: 0;
  background: rgba(255,255,255,.28); cursor: pointer; position: relative;
  transition: background var(--t-fast) var(--ease);
}
/* The visible bar is 3px; the thing you press is 36x35. */
.showcase-dot::after { content: ''; position: absolute; inset: -16px -3px; }
.showcase-dot:hover { background: rgba(255,255,255,.5); }
.showcase-dot.on { background: rgba(255,255,255,.32); }
/* The active dot fills to show how long is left on the slide. */
.showcase-dot .fill {
  position: absolute; inset: 0; width: 0;
  background: var(--accent); border-radius: 100px;
}
.showcase-dot.on .fill { width: 100%; transition: width linear var(--slide-ms, 6000ms); }
.showcase.is-paused .showcase-dot.on .fill { transition: none; }

.showcase-flag {
  position: absolute; top: 1.15rem; left: 1.15rem; z-index: 3;
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(11,16,32,.62); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.16);
  padding: .4rem .8rem; border-radius: 100px;
  font-size: max(11px, .68rem); font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: #fff;
}
.showcase-flag .dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  animation: pulse 2.6s var(--ease) infinite;
}

.showcase-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem; margin-top: 1rem; font-size: .82rem; color: var(--ink-3);
}

@media (max-width: 900px) {
  .showcase-slide { grid-template-columns: 1fr; min-height: 0; }
  .showcase-media { min-height: 14rem; }
  .showcase-media::after {
    background: linear-gradient(to bottom, transparent 45%, rgba(11,16,32,.75) 100%);
  }
  .showcase-dots { position: static; padding: 0 clamp(1.75rem, 1rem + 3vw, 3.25rem) 1.35rem; }
  .showcase-nav { top: 1.15rem; bottom: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-slide, .showcase-media { transition: none; }
  .showcase-slide.on .showcase-media { transform: scale(1.02); }
  .showcase-slide.on .showcase-body > * { animation: none; }
  .showcase-dot .fill { display: none; }
}

/* ---- Popular destinations -----------------------------------------------
   A landmark photograph carries each card, with the detail sitting on a solid
   footer rather than floating over the image — so the text stays legible
   whatever the photograph happens to be. */

/* grid-auto-rows: 1fr keeps every card the same height across rows, not just
   within one — otherwise a destination with a shorter description leaves the
   whole second row visibly stubbier than the first. */
.dest-grid { gap: 1.5rem; }
@media (min-width: 2000px) { .dest-grid { gap: 1.75rem; } }

.dest {
  display: flex; flex-direction: column;
  border-radius: var(--radius); overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  color: inherit; text-decoration: none;
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out),
              border-color var(--t) var(--ease);
}
.dest:hover {
  text-decoration: none; transform: translateY(-4px);
  box-shadow: var(--shadow-xl); border-color: var(--line-strong);
}

.dest-media {
  position: relative;
  height: clamp(10rem, 7rem + 7vw, 15.5rem);
  background: var(--brand-lift) center/cover no-repeat;
  overflow: hidden;
}
.dest-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,7,14,.72) 0%, rgba(5,7,14,.12) 55%, transparent 100%);
}
.dest-media .shot {
  position: absolute; inset: 0;
  background: inherit; background-size: cover; background-position: center;
  transition: transform var(--t-slow) var(--ease-out);
}
.dest:hover .dest-media .shot { transform: scale(1.06); }

/* Rank chip, so the ordering reads as a ranking rather than an accident. */
.dest-rank {
  position: absolute; top: .85rem; left: .85rem; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(11,16,32,.62); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff; font-family: var(--display); font-size: .88rem; font-weight: 600;
  display: grid; place-items: center;
}
.dest-landmark {
  position: absolute; left: .95rem; right: .95rem; bottom: .8rem; z-index: 2;
  color: rgba(255,255,255,.9); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .11em; font-weight: 700;
  display: flex; align-items: center; gap: .45rem;
}
.dest-landmark::before {
  content: ""; width: 14px; height: 1px; background: var(--accent); flex-shrink: 0;
}

.dest-body {
  padding: 1.15rem 1.25rem 1.25rem;
  display: flex; flex-direction: column; flex: 1;
}
.dest-body h3 { margin: 0 0 .25rem; font-size: 1.15rem; font-family: var(--display); font-weight: 600; }
.dest-blurb {
  font-size: .88rem; color: var(--ink-2); margin: 0 0 1rem;
  flex: 1;                              /* pushes the stats row to the bottom */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dest-stats {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-top: .9rem; border-top: 1px solid var(--line);
}
.dest-stats .n { font-size: .82rem; color: var(--ink-3); }
.dest-stats .n strong { color: var(--ink); font-weight: 650; }
.dest-stats .p { font-size: .76rem; color: var(--ink-3); text-align: right; }
.dest-stats .p strong {
  display: block; font-family: var(--display); font-size: 1.02rem;
  color: var(--brand); font-variant-numeric: tabular-nums;
}

/* ---- Collections: category tiles with photography behind ---- */
.collection {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); min-height: 15rem;
  background: var(--brand-lift) center/cover no-repeat;
  color: #fff; isolation: isolate;
}
.collection::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to top, rgba(5,7,14,.88) 6%, rgba(5,7,14,.35) 52%, rgba(5,7,14,.12) 100%);
  transition: background var(--t) var(--ease);
}
.collection:hover::after {
  background: linear-gradient(to top, rgba(5,7,14,.92) 6%, rgba(5,7,14,.5) 58%, rgba(5,7,14,.2) 100%);
}
.collection-body {
  position: relative; z-index: 1;
  height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.35rem;
}
.collection h3 { color: #fff; margin: 0 0 .15rem; font-size: 1.15rem; }
.collection .n { font-size: .8rem; color: rgba(255,255,255,.7); }
.collection .go {
  margin-top: .85rem; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--accent);
  display: inline-flex; align-items: center; gap: .4rem;
  transform: translateY(4px); opacity: 0;
  transition: transform var(--t) var(--ease-out), opacity var(--t) var(--ease-out);
}
.collection:hover .go, .collection:focus-visible .go { transform: none; opacity: 1; }
.collection:hover { text-decoration: none; }
@media (hover: none) { .collection .go { transform: none; opacity: 1; } }

/* ---- Editorial spotlight ---- */
.spotlight {
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: stretch;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--brand); color: #fff;
  box-shadow: var(--shadow-lg);
}
/* Grid children default to min-width:auto and refuse to shrink below their
   content, which pushes them out of the panel on a narrow phone. */
.spotlight-media, .spotlight-body { min-width: 0; }
.spotlight-media { background: var(--brand-lift) center/cover no-repeat; min-height: 24rem; }
.spotlight-body {
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  display: flex; flex-direction: column; justify-content: center;
}
.spotlight-body h2 { color: #fff; font-weight: 500; max-width: 16ch; }
.spotlight-body p { color: rgba(255,255,255,.76); max-width: 44ch; }
.spotlight-body .hero-eyebrow { flex-wrap: wrap; }
.spotlight-figures {
  display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; margin: 1.75rem 0;
  padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14);
}
.spotlight-figures div .fig {
  font-family: var(--display); font-size: 1.9rem; font-weight: 600;
  line-height: 1; letter-spacing: -.02em; color: var(--accent);
}
.spotlight-figures div .cap {
  font-size: max(11px, .7rem); text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.55); margin-top: .4rem;
}
@media (max-width: 900px) {
  .spotlight { grid-template-columns: 1fr; }
  .spotlight-media { min-height: 15rem; }
}

/* ---- Numbered process (kept for interior pages) ---- */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; counter-reset: step; }
.step-item { counter-increment: step; position: relative; padding-top: 3.25rem; }
.step-item::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--display); font-size: 2.4rem; font-weight: 600;
  line-height: 1; color: var(--accent); letter-spacing: -.03em;
}
.step-item::after {
  content: ""; position: absolute; top: 1.25rem; left: 3.5rem; right: -1.25rem;
  height: 1px; background: var(--line);
}
.step-item:last-child::after { display: none; }
.step-item h3 { margin-bottom: .4rem; }
.step-item p { color: var(--ink-2); margin: 0; font-size: .93rem; }
@media (max-width: 820px) {
  .steps-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .step-item { padding-top: 0; padding-left: 3.5rem; }
  .step-item::before { font-size: 1.9rem; }
  .step-item::after { display: none; }
}

/* ==========================================================================
   How it works — the one dark panel on the homepage, so it stops the scroll.
   ========================================================================== */

.process {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, var(--brand-lift) 0%, var(--brand) 46%, var(--brand-dark) 100%);
  color: rgba(255,255,255,.72);
  padding: clamp(1.75rem, 1.1rem + 2.6vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.75rem, 1rem + 3vw, 4rem);
  box-shadow: var(--shadow-glow);
}
.process::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(38% 46% at 88% 8%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(30% 40% at 4% 96%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
}
/* A faint rule grid, the sort of texture a printed brochure would have. */
.process::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 100% 2.75rem;
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
}

/* The grid stretches this column to the height of the steps beside it, so its
   two groups are pushed apart to fill it: the heading stays at the top and the
   figures and button sit at the foot, finishing level with the last step. The
   gap is the floor for when there is no slack to share out. */
.process-copy {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
}
.process-copy > * { min-width: 0; }
.process-copy .eyebrow { color: var(--accent); }
.process-copy h2 {
  color: #fff; margin: .65rem 0 0;
  font-size: clamp(1.75rem, 1.25rem + 1.9vw, 2.75rem);
  line-height: 1.08; letter-spacing: -.025em; font-weight: 500;
}
.process-copy h2::after { display: none; }
.process-lede { margin: 1rem 0 0; font-size: 1rem; line-height: 1.72; }

.process-figures {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin-top: 0;
  padding-top: clamp(1.25rem, 1rem + 1vw, 1.85rem);
  border-top: 1px solid rgba(255,255,255,.13);
}
.process-figures .v {
  font-family: var(--display); font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.15rem);
  font-weight: 600; color: #fff; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.process-figures .k {
  margin-top: .4rem; font-size: max(11px, .68rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: .13em; color: rgba(255,255,255,.5);
}
.process .btn-accent { margin-top: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); align-self: flex-start; }

/* The steps themselves, threaded on a single rail. */
.process-steps { position: relative; display: grid; gap: clamp(1rem, .7rem + 1vw, 1.5rem); align-content: start; }
.process-steps::before {
  content: ""; position: absolute; left: 1.72rem; top: 1.5rem; bottom: 1.5rem; width: 1px;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--accent) 60%, transparent), rgba(255,255,255,.09));
}

.pstep {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 3.45rem 1fr; gap: 1.15rem;
  align-items: start;
  padding: clamp(1.1rem, .85rem + .8vw, 1.6rem);
  border-radius: var(--radius);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(10px);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              transform var(--t) var(--ease-out);
}
.pstep:hover {
  background: rgba(255,255,255,.075);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  transform: translateX(4px);
}
.pstep-mark {
  width: 3.45rem; height: 3.45rem; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background: rgba(11,16,32,.85);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
}
.pstep-mark svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
.pstep-mark .n {
  position: absolute; right: -.35rem; bottom: -.35rem;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--accent); color: #1c1500;
  font-size: max(11px, .68rem); font-weight: 800; display: grid; place-items: center;
  font-family: var(--sans); letter-spacing: 0;
}
.pstep h3 { color: #fff; margin: .3rem 0 .3rem; font-size: 1.08rem; letter-spacing: -.01em; }
.pstep p { margin: 0; font-size: .9rem; line-height: 1.68; color: rgba(255,255,255,.62); }

@media (max-width: 980px) {
  .process { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .process-steps::before { display: none; }
  .pstep { grid-template-columns: 1fr; gap: .85rem; }
  .process-figures { grid-template-columns: 1fr; text-align: left; gap: .85rem; }
  .process-figures > div { display: flex; align-items: baseline; gap: .7rem; }
  .process-figures .k { margin-top: 0; }
}

/* ---- Review cards ---- */
.review-card { display: flex; flex-direction: column; height: 100%; padding: 1.6rem; }
/* A struck quote mark in the corner, the way an editorial pull-quote is set. */
.review-card { position: relative; overflow: hidden; }
.review-card::before {
  content: "\201C"; position: absolute; top: -1.35rem; right: .65rem;
  font-family: var(--display); font-size: 7rem; line-height: 1;
  color: color-mix(in srgb, var(--accent) 20%, transparent); pointer-events: none;
}
.review-card .quote {
  font-family: var(--display); font-size: 1.08rem; line-height: 1.55;
  color: var(--ink); margin: .85rem 0 1.15rem; flex: 1;
}
.review-card .who { display: flex; align-items: center; gap: .7rem;
  padding-top: 1.15rem; border-top: 1px solid var(--line); }
.review-card .who .initial {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center; font-weight: 700; font-size: .85rem;
}
.review-card .who .nm { font-weight: 650; font-size: .9rem; }
.review-card .who .at { font-size: .8rem; color: var(--ink-3); }

/* ---- Inner page header (About, Contact) ---- */
.pagehead {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--brand); color: #fff;
  padding-block: clamp(3.5rem, 2.25rem + 5vw, 7rem);
}
/* The same gold light that sits in the homepage hero, so an interior page
   arrives feeling like the same building rather than an annexe. */
.pagehead::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(44% 54% at 86% 8%,
              color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 68%);
}
.pagehead-media {
  position: absolute; inset: 0; z-index: -2;
  background-position: center; background-size: cover;
  transform: scale(1.04);
}
.pagehead.has-media::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(5,7,14,.92) 0%, rgba(5,7,14,.62) 55%, rgba(5,7,14,.35) 100%);
}
.pagehead h1 {
  color: #fff; margin: 0 0 .75rem; max-width: 20ch;
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.5rem);
  line-height: 1.06; letter-spacing: -.028em; font-weight: 500;
}
.pagehead p {
  color: rgba(255,255,255,.78); max-width: 56ch; margin: 0;
  font-size: clamp(1rem, .94rem + .35vw, 1.12rem); line-height: 1.7;
}
.pagehead .hero-eyebrow { margin-bottom: 1rem; }

/* Breadcrumb: quiet, but it tells a visitor where they have landed. */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-bottom: 1.35rem; font-size: .8rem; color: rgba(255,255,255,.55);
}
.crumbs a { color: rgba(255,255,255,.72); }
.crumbs a:hover { color: var(--accent); text-decoration: none; }
.crumbs .sep { opacity: .45; }
.crumbs [aria-current] { color: #fff; }

/* ==========================================================================
   Closing call to action — the last thing on an interior page
   ========================================================================== */

.cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius-xl);
  background: linear-gradient(150deg, var(--brand-lift), var(--brand) 55%, var(--brand-dark));
  color: rgba(255,255,255,.72);
  padding: clamp(2rem, 1.4rem + 3vw, 4rem) clamp(1.5rem, 1rem + 3vw, 4rem);
  text-align: center;
  box-shadow: var(--shadow-glow);
}
/* Light: a wash of gold from above and a cooler one rising from the corner. */
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(40% 60% at 50% -10%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%),
    radial-gradient(34% 50% at 8% 108%, rgba(255,255,255,.07), transparent 70%);
}

/* Pattern: three layers that give the panel something to sit on.
   A ring set spreading from the upper right, the way a pin's reach is drawn
   on a map; a fine dot grid for texture; and a set of hairlines running with
   the panel's own gradient. All of it is masked so it is strongest at the top
   and gone by the time it reaches the text at the bottom. */
.cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    repeating-radial-gradient(circle at 88% 12%,
      transparent 0 46px,
      rgba(212,175,55,.10) 46px 47.5px,
      transparent 47.5px 92px),
    radial-gradient(rgba(255,255,255,.075) 1px, transparent 1.4px),
    repeating-linear-gradient(150deg,
      rgba(255,255,255,.035) 0 1px,
      transparent 1px 14px);
  background-size: auto, 24px 24px, auto;
  background-position: center, center, center;
  mask-image: radial-gradient(130% 105% at 50% -5%, #000 12%, rgba(0,0,0,.45) 52%, transparent 88%);
  -webkit-mask-image: radial-gradient(130% 105% at 50% -5%, #000 12%, rgba(0,0,0,.45) 52%, transparent 88%);
}

/* The rings drift very slowly, so the panel reads as lit rather than printed.
   One full cycle takes two minutes; nothing about it asks to be watched. */
@media (prefers-reduced-motion: no-preference) {
  .cta-band::after { animation: ctaDrift 120s linear infinite alternate; }
}
@keyframes ctaDrift {
  from { background-position: center, center, center; }
  to   { background-position: 6% -4%, 24px 24px, center; }
}
.cta-band .eyebrow { color: var(--accent); }
.cta-band h2 {
  color: #fff; margin: .8rem auto .9rem; max-width: 20ch;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  line-height: 1.08; letter-spacing: -.028em; font-weight: 500;
}
.cta-band h2::after { display: none; }
.cta-band p { margin: 0 auto; max-width: 52ch; line-height: 1.72; }
.cta-band .btn-row { justify-content: center; margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); }

/* Long-form CMS copy */
.prose h2 { font-size: 1.4rem; margin-top: 2rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.5rem; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.25rem; margin-bottom: 1.25rem; }
.prose li { margin-bottom: .4rem; }

/* ---- Partner band ---- */
.partner-band {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid; grid-template-columns: 1.25fr .75fr; gap: 0; align-items: stretch;
}
.partner-copy { padding: clamp(1.75rem, 1rem + 3vw, 3.25rem); align-self: center; }
.partner-media {
  position: relative; min-height: 22rem;
  background: var(--brand-lift) center/cover no-repeat;
}
.partner-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(255,255,255,.14) 0%, transparent 30%);
}
@media (max-width: 820px) {
  .partner-media { min-height: 13rem; order: -1; }
}
.partner-band > * { min-width: 0; }
/* The heading used to stop at 20ch and wrap to three lines while the copy ran
   to 52ch and the figures to the full column, so the block narrowed as it went
   up. All three now share the column's width and one right edge. */
.partner-band h2 { margin-bottom: .6rem; }
.partner-band p { color: var(--ink-2); margin: 0; }
.partner-points { display: flex; gap: 1.25rem 2.25rem; flex-wrap: wrap; margin-top: 1.5rem; }
.partner-points div .fig {
  font-family: var(--display); font-size: 1.6rem; font-weight: 600; color: var(--brand); line-height: 1;
}
.partner-points div .cap { font-size: .74rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-3); margin-top: .35rem; }
@media (max-width: 820px) {
  .partner-band { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ==========================================================================
   Mobile app section
   ========================================================================== */

.appcta {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--brand-lift) 0%, var(--brand) 58%, var(--brand-dark) 100%);
  color: #fff;
  padding: clamp(2rem, 1.2rem + 3.5vw, 4rem);
}
.appcta::before {
  content: ""; position: absolute; inset: auto -18% -62% 42%; height: 125%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%,
              color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
}
.appcta-grid { display: grid; grid-template-columns: 1fr auto; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
/* One measure for both, so the heading ends on the same line as the copy
   under it instead of turning over three lines and stopping short. */
.appcta h2, .appcta p { max-width: 25rem; }
.appcta h2 { color: #fff; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem); font-weight: 500; }
.appcta p { color: rgba(255,255,255,.76); }
.appcta .hero-eyebrow { margin-bottom: 1.15rem; }

.appcta-list { list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: grid; gap: .7rem; }
.appcta-list li { display: flex; gap: .7rem; align-items: flex-start; font-size: .93rem; color: rgba(255,255,255,.84); }
.appcta-list .tick { color: var(--accent); flex-shrink: 0; font-style: normal; }

.store-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.store-btn {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: .65rem 1.2rem .65rem 1rem;
  border-radius: var(--radius); background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18); color: #fff; text-decoration: none;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.store-btn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.32);
                   transform: translateY(-2px); text-decoration: none; color: #fff; }
.store-btn svg { width: 25px; height: 25px; flex-shrink: 0; fill: currentColor; }
.store-btn .lines { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.store-btn .small-line { font-size: max(11px, .64rem); color: rgba(255,255,255,.6);
  text-transform: uppercase; letter-spacing: .11em; }
.store-btn .big-line { font-size: .97rem; font-weight: 650; }

.appcta-notify { margin-top: 1.75rem; max-width: 27rem; }
.appcta-notify .row { gap: .55rem; flex-wrap: nowrap; }
.appcta-notify .input {
  background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2); color: #fff;
}
.appcta-notify .input::placeholder { color: rgba(255,255,255,.45); }
.appcta-notify .input:focus { border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.appcta-note { font-size: .78rem; color: rgba(255,255,255,.55); margin: .75rem 0 0; }

@media (max-width: 860px) {
  .appcta-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .appcta h2, .appcta p { max-width: none; }
  .appcta-list li { text-align: left; }
  .store-row, .appcta-notify { justify-content: center; margin-inline: auto; }
  .phone { order: -1; margin-bottom: 1rem; transform: rotate(0); }
}

/* ---- Device mock-up ---- */

/* Two devices, leaning opposite ways: the one in front is being searched on,
   the one behind carries the pass a guest arrives with. */
.phones {
  position: relative; min-width: 0; max-width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 2.5rem 0 1rem;
  min-height: clamp(400px, 40vw, 560px);
}

.phone {
  position: relative;
  width: clamp(206px, 18vw, 262px);
  aspect-ratio: 9 / 19;
  border-radius: 38px; padding: 8px;
  background: linear-gradient(150deg, #4a5265 0%, #191d27 44%, #0a0d14 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 0 0 2.5px rgba(0,0,0,.55),
    0 2px 3px rgba(255,255,255,.12),
    0 48px 90px -34px rgba(0,0,0,.85);
  transition: transform var(--t-slow) var(--ease-out);
}

/* The negative margin is what makes them overlap; the translates alone only
   pushed the pair apart. */
.phone-front { transform: rotate(5deg) translateY(2%); z-index: 2; }
.phone-back  { transform: rotate(-9deg) translateY(-7%) scale(.93); z-index: 1; margin-right: -21%; }
.appcta:hover .phone-front { transform: rotate(3deg) translateY(calc(2% - 12px)); }
.appcta:hover .phone-back  { transform: rotate(-11deg) translateY(-9%) scale(.93); }

/* Side buttons, on the edges rather than drawn as pseudo elements on one
   side only. */
.phone-btn {
  position: absolute; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, #3b4252, #171b24);
}
.phone-btn-vol { left: -3px; top: 21%; height: 11%; }
.phone-btn-pwr { right: -3px; top: 27%; height: 9%; }

/* A single sweep of light across the glass. */
.phone-glare {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(122deg,
    rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 18%,
    transparent 38%, transparent 100%);
}

.phone-home {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  width: 32%; height: 3.5px; border-radius: 100px;
  background: rgba(0,0,0,.35); z-index: 6;
}

.phone-screen {
  position: relative; height: 100%; border-radius: 32px; overflow: hidden;
  background: var(--bg); display: flex; flex-direction: column;
}
.phone-notch { position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 33%; height: 20px; border-radius: 100px; background: #0a0d14; z-index: 5; }

.js-motion .appcta.is-visible .ui-card { animation: cardIn var(--t-slow) var(--ease-out) backwards; }
.js-motion .appcta.is-visible .ui-card:nth-of-type(1) { animation-delay: .34s; }
.js-motion .appcta.is-visible .ui-card:nth-of-type(2) { animation-delay: .46s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   AI assistant
   ========================================================================== */

.chat { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 120;
        display: flex; flex-direction: column; align-items: flex-end; gap: .7rem; }

.chat-launcher {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .8rem 1.3rem; border: 1px solid rgba(255,255,255,.14); border-radius: 100px;
  background: var(--brand); color: #fff; font: inherit; font-weight: 600; font-size: .9rem;
  cursor: pointer; box-shadow: var(--shadow-xl);
  transition: transform var(--t) var(--ease), background var(--t) var(--ease);
}
.chat-launcher:hover { background: var(--brand-lift); transform: translateY(-2px); }
.chat-launcher-icon { color: var(--accent); font-size: max(11px, .62rem); }
.chat.open .chat-launcher { display: none; }

.chat-panel {
  width: min(392px, calc(100vw - 2.5rem));
  height: min(580px, calc(100vh - 7rem));
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column; overflow: hidden;
}
.chat-panel[hidden] { display: none; }

.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.15rem; background: var(--brand); color: #fff; flex-shrink: 0; }
.chat-head strong { font-family: var(--display); font-weight: 600; font-size: 1rem; }
.chat-sub { font-size: .72rem; color: rgba(255,255,255,.6);
  text-transform: uppercase; letter-spacing: .08em; margin-top: .1rem; }
.chat-close { background: none; border: 0; color: rgba(255,255,255,.7);
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
.chat-close:hover { color: #fff; }

.chat-log { flex: 1; overflow-y: auto; padding: 1.15rem;
  display: flex; flex-direction: column; gap: .75rem;
  background: var(--bg); overscroll-behavior: contain; }

.chat-msg { max-width: 87%; padding: .7rem .95rem; border-radius: var(--radius-lg);
  font-size: .91rem; line-height: 1.55; }
.chat-msg p { margin: 0 0 .6rem; }
.chat-msg p:last-child { margin-bottom: 0; }
.chat-msg.bot { background: var(--card); border: 1px solid var(--line);
  border-bottom-left-radius: var(--radius-sm); align-self: flex-start; }
.chat-msg.me { background: var(--brand); color: #fff;
  border-bottom-right-radius: var(--radius-sm); align-self: flex-end; }
.chat-msg.error { background: var(--red-bg); border-color: #f0c8c5; color: var(--red); }
.chat-msg.thinking { color: var(--ink-3); font-style: italic; }

.chat-suggestions { display: flex; flex-direction: column; gap: .45rem; align-items: flex-start; }
.chat-chip { font: inherit; font-size: .83rem; text-align: left;
  padding: .5rem .9rem; border-radius: 100px;
  border: 1px solid var(--line); background: var(--card); color: var(--brand); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.chat-chip:hover { background: var(--brand-soft); border-color: var(--line-strong); }

.chat-hotels { display: flex; flex-direction: column; gap: .55rem; }
.chat-hotel { display: flex; gap: .75rem; align-items: center; padding: .55rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); color: inherit; text-decoration: none;
  transition: border-color var(--t-fast) var(--ease); }
.chat-hotel:hover { border-color: var(--brand); text-decoration: none; }
.chat-hotel-img { width: 58px; height: 58px; flex-shrink: 0; border-radius: var(--radius-sm);
  background: var(--bg-2) center/cover no-repeat; }
.chat-hotel-meta { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.chat-hotel-meta strong { font-size: .89rem; }
.chat-hotel-loc { font-size: .78rem; color: var(--ink-3); }
.chat-hotel-price { font-size: .81rem; color: var(--brand); font-weight: 650; }

.chat-form { display: flex; gap: .55rem; align-items: flex-end; padding: .8rem;
  border-top: 1px solid var(--line); background: var(--card); flex-shrink: 0; }
.chat-input { flex: 1; resize: none; font: inherit; font-size: .92rem;
  padding: .6rem .75rem; border: 1px solid var(--line-strong); border-radius: var(--radius);
  max-height: 120px; }
.chat-input:focus { outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent); }
.chat-send { width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: var(--radius);
  background: var(--brand); color: #fff; font-size: 1.05rem; cursor: pointer; }
.chat-send:hover { background: var(--brand-lift); }

.chat-foot { margin: 0; padding: .6rem .9rem .8rem; font-size: .74rem; color: var(--ink-3);
  background: var(--card); border-top: 1px solid var(--line); flex-shrink: 0; }
/* Padding on an inline button grows the box you can press without moving the
   line it sits in, which is what this needs: it reads as a link mid-sentence
   but has to be reachable with a thumb. */
.chat-linkbtn { background: none; border: 0; padding: .5rem 0; font: inherit; font-size: .74rem;
  color: var(--brand); text-decoration: underline; cursor: pointer; }
.chat-linkbtn:disabled { color: var(--green); text-decoration: none; cursor: default; }

@media (max-width: 480px) {
  .chat { right: .75rem; bottom: .75rem; left: .75rem; align-items: stretch; }
  .chat-panel { width: 100%; height: min(78vh, 580px); }
  .chat-launcher { align-self: flex-end; }
}

/* ==========================================================================
   Responsive refinements
   ========================================================================== */

/* Control sizing keys off width as well as pointer type. A phone-width window
   on a desktop reports a fine pointer, and a 31px button is a poor target
   there too; a touchscreen laptop is the same case from the other side. */
@media (hover: none) and (pointer: coarse), (max-width: 820px) {
  .btn, .site-nav a, .sidebar a, .pager a, .settings-nav a { min-height: 44px; }
  .btn-sm { min-height: 38px; }

  /* The box a filter checkbox lives in, and the box itself. */
  .check { min-height: 34px; align-items: center; }
  .check input { width: 18px; height: 18px; margin-top: 0; }
}

@media (hover: none) and (pointer: coarse) {
  .card-link:hover { transform: none; box-shadow: var(--shadow-xs); }
  .card-link:hover .thumb { transform: none; }
  .btn:hover { transform: none; }
  .gallery img:hover { transform: none; }
}

@media (max-width: 380px) {
  body { font-size: 15px; }
  .card-pad, .card-body, .card-head, .card-foot { padding: 1.1rem; }
  table.data th, table.data td { padding-inline: 1.1rem; }
  .hero-trust { gap: .6rem 1rem; font-size: .81rem; }
}

/* Ultra-wide displays. The root scale above already grows type and spacing;
   these steps let the grid use the extra width instead of leaving it empty,
   while keeping prose to a readable measure. */
@media (min-width: 2000px) {
  .wrap { max-width: 88rem; }
  .grid-4 { grid-template-columns: repeat(5, 1fr); }
  .grid-detail { grid-template-columns: 1fr 26rem; }
  /* The headline block grows with the shell so the hero does not read as a
     small caption pinned to the corner of a very large photograph. */
  .hero-inner { max-width: 54rem; }
  .hero h1 { max-width: 17ch; }
}
@media (min-width: 3000px) {
  .wrap { max-width: 104rem; }
  .grid-4 { grid-template-columns: repeat(6, 1fr); }
  .grid-3 { grid-template-columns: repeat(4, 1fr); }
  .hero-inner { max-width: 62rem; }
  /* Prose still stops at a readable measure however wide the shell gets. */
  .hero-copy p, .appcta p { max-width: 54ch; }
}

@media (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: 2.5rem 3rem; }
  .chat-panel { height: calc(100vh - 4rem); }
}

/* Dense tables become labelled stacks on narrow screens. */
@media (max-width: 560px) {
  table.data.stackable thead { display: none; }
  table.data.stackable tr { display: block; padding: .85rem 0; border-bottom: 1px solid var(--line); }
  table.data.stackable td {
    display: flex; justify-content: space-between; gap: 1rem;
    border: 0; padding: .35rem 1.15rem; text-align: right;
  }
  table.data.stackable td::before {
    content: attr(data-label);
    font-size: max(11px, .68rem); text-transform: uppercase; letter-spacing: .1em;
    color: var(--ink-3); font-weight: 700; text-align: left;
  }
}

/* Print — receipts and confirmations */
@media print {
  .site-header, .site-footer, .sidebar, .admin-bar, .no-print, .btn, .chat { display: none !important; }
  body { background: #fff; font-size: 12px; }
  .admin-main { margin: 0; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}


/* ==========================================================================
   Sign in / create an account
   ========================================================================== */

.auth {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  min-height: min(46rem, 82vh);
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--card);
  box-shadow: var(--shadow-xl);
  margin-block: clamp(1.5rem, 1rem + 2vw, 3rem);
}

/* The brand side: photograph, scrim, and the reasons to bother. */
.auth-aside {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  background: var(--brand); color: rgba(255,255,255,.75);
}
.auth-aside-media {
  position: absolute; inset: 0; z-index: -2;
  background: center/cover no-repeat; transform: scale(1.04);
  animation: heroDrift 30s var(--ease) infinite alternate;
}
.auth-aside::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(5,7,14,.95), rgba(5,7,14,.62) 55%, rgba(5,7,14,.42)),
    radial-gradient(44% 40% at 88% 6%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%);
}
.auth-aside .brand { color: #fff; }
.auth-aside h2 {
  color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.35rem);
  line-height: 1.12; letter-spacing: -.025em; font-weight: 500; margin: 0 0 .9rem;
}
.auth-aside h2::after { display: none; }
.auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.auth-points li {
  display: grid; grid-template-columns: 1.4rem 1fr; gap: .65rem;
  align-items: start; font-size: .92rem; line-height: 1.55;
}
.auth-points .tick {
  color: var(--accent); font-style: normal; font-size: .8rem; line-height: 1.6;
}
.auth-quote {
  margin: 0; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14);
  font-family: var(--display); font-size: 1.02rem; line-height: 1.6; color: rgba(255,255,255,.85);
}
.auth-quote cite {
  display: block; margin-top: .6rem; font-family: var(--sans); font-style: normal;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .13em; color: rgba(255,255,255,.5);
}

.auth-main {
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  display: flex; flex-direction: column; justify-content: center;
}
.auth-main h1 {
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.15rem); margin-bottom: .5rem; letter-spacing: -.02em;
}
.auth-main > form, .auth-main > .authbits { max-width: 32rem; width: 100%; }
.auth-foot {
  margin-top: 1.75rem; padding-top: 1.35rem; border-top: 1px solid var(--line);
  font-size: .92rem; color: var(--ink-2);
}

/* "or" divider */
.or-rule {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .9rem;
  margin: 1.35rem 0; color: var(--ink-3);
  font-size: max(11px, .68rem); font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
}
.or-rule::before, .or-rule::after { content: ""; height: 1px; background: var(--line); }

.btn-google {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  width: 100%; padding: .82rem 1.2rem;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-family: var(--sans); font-size: .95rem; font-weight: 600; cursor: pointer;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
              transform var(--t) var(--ease-out);
}
.btn-google:hover {
  text-decoration: none; color: var(--ink);
  border-color: var(--ink-4); box-shadow: var(--shadow); transform: translateY(-1px);
}
.btn-google:active { transform: none; box-shadow: none; }
.btn-google svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; min-height: 0; }
  .auth-aside { order: 2; gap: 1.75rem; }
  .auth-aside .brand { display: none; }
}

/* ==========================================================================
   Contact — the office panel
   ========================================================================== */

.office {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(158deg, var(--brand-lift), var(--brand) 60%, var(--brand-dark));
  color: rgba(255,255,255,.7);
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.35rem);
  box-shadow: var(--shadow-glow);
}
.office::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(42% 48% at 90% 4%,
              color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
}
.office h3 { color: #fff; margin: .55rem 0 1.25rem; font-size: 1.35rem; }
.office .eyebrow { color: var(--accent); }
.office-line {
  display: grid; grid-template-columns: 3rem 1fr; gap: 1.05rem;
  align-items: center; padding-block: 1.05rem;
  border-top: 1px solid rgba(255,255,255,.11);
}
.office-line:first-of-type { border-top: 0; padding-top: 0; }
/* A tile rather than a ring: at this size the Feather stroke needs a ground
   to sit on, otherwise it floats in the dark panel. */
.office-line .ic {
  width: 3rem; height: 3rem; border-radius: var(--radius);
  display: grid; place-items: center; align-self: start;
  background: linear-gradient(150deg,
              color-mix(in srgb, var(--accent) 22%, transparent),
              rgba(255,255,255,.04));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.office-line .ic svg { width: 1.3rem; height: 1.3rem; }
.office-line .k {
  font-size: max(11px, .66rem); font-weight: 700; text-transform: uppercase;
  letter-spacing: .13em; color: rgba(255,255,255,.5); margin-bottom: .25rem;
}
.office-line .v { color: #fff; line-height: 1.6; font-size: .95rem; }
.office-line .v a { color: #fff; }
.office-line .v a:hover { color: var(--accent); text-decoration: none; }
.office .btn { margin-top: 1.35rem; }


/* ==========================================================================
   Overlay chips — the small pills that sit on a photograph
   ========================================================================== */

.chip-row {
  position: absolute; left: .85rem; right: .85rem; bottom: .85rem; z-index: 2;
  display: flex; flex-wrap: wrap; gap: .4rem; pointer-events: none;
}
.chip {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .34rem .7rem; border-radius: var(--radius-pill);
  background: rgba(11,16,32,.58); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap;
}
.chip svg { width: .82rem; height: .82rem; opacity: .9; }
.chip-light {
  background: rgba(255,255,255,.94); color: var(--ink);
  border-color: rgba(255,255,255,.94);
}
.chip-accent { background: var(--accent); border-color: var(--accent); color: #1c1500; }

/* ==========================================================================
   Why book with us
   ========================================================================== */

.why {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
  display: flex; flex-direction: column;
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out),
              border-color var(--t) var(--ease);
}
.why::after {
  content: ""; position: absolute; inset: auto -30% -55% auto;
  width: 14rem; height: 14rem; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 68%);
  opacity: 0; transition: opacity var(--t-slow) var(--ease);
}
.why:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.why:hover::after { opacity: 1; }
.why-ico {
  width: 3.25rem; height: 3.25rem; border-radius: var(--radius);
  display: grid; place-items: center; margin-bottom: 1.15rem;
  background: linear-gradient(150deg, var(--brand-lift), var(--brand));
  color: var(--accent);
  box-shadow: 0 10px 22px -12px rgba(11,16,32,.6);
}
.why-ico svg { width: 1.45rem; height: 1.45rem; }
.why h3 { margin: 0 0 .45rem; font-size: 1.08rem; letter-spacing: -.01em; }
.why p { margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.68; }
.why-n {
  position: absolute; top: 1.15rem; right: 1.35rem;
  font-family: var(--display); font-size: 2.4rem; font-weight: 600;
  line-height: 1; color: var(--line); letter-spacing: -.03em;
  transition: color var(--t) var(--ease);
}
.why:hover .why-n { color: color-mix(in srgb, var(--accent) 55%, transparent); }


/* ==========================================================================
   Opening reveal — the curtain that lifts on the first page of a visit
   ==========================================================================
   Hidden by default and only shown once html carries .js-motion, which the
   pre-paint script in the header adds. A visitor with JavaScript off, or one
   who has asked for reduced motion, never meets a curtain that cannot lift.
   ========================================================================== */

.intro { display: none; }

html.js-motion .intro {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  /* Transparent on purpose: the colour lives on the two halves below, so when
     they part there is nothing left covering the page. */
  background: transparent;
  pointer-events: none;
  animation: introOut 1.85s var(--ease-out) forwards;
}
html.js-motion body.intro-done .intro { display: none; }
/* Scrolling is held for the second and a half the curtain is up, so the
   reveal is not spoiled by a stray wheel event. Gated on .js-motion, and
   lifted by a timer that does not depend on the main script file. */
html.js-motion.intro-lock body { overflow: hidden; }

/* The two halves that part to reveal the page. */
.intro::before, .intro::after {
  content: ""; position: absolute; left: 0; right: 0; height: 50.5%;
  background: var(--brand-dark);
  animation-duration: .85s; animation-delay: 1s;
  animation-timing-function: cubic-bezier(.76, 0, .24, 1);
  animation-fill-mode: forwards;
}
.intro::before { top: 0;    animation-name: introUp; }
.intro::after  { bottom: 0; animation-name: introDown; }

@keyframes introUp   { to { transform: translateY(-101%); } }
@keyframes introDown { to { transform: translateY(101%); } }
@keyframes introOut  { 0%, 96% { opacity: 1; } 100% { opacity: 1; visibility: hidden; } }

.intro-inner {
  position: relative; z-index: 1; text-align: center;
  animation: introFade .5s var(--ease) .95s forwards;
}
@keyframes introFade { to { opacity: 0; transform: translateY(-14px); } }

/* The wordmark rises from behind a mask, one word at a time. */
.intro-word {
  display: flex; overflow: hidden; align-items: baseline; justify-content: center;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.25rem, 1.4rem + 4vw, 4.75rem);
  line-height: 1.1; letter-spacing: -.035em; color: #fff;
}
.intro-word span {
  display: block; transform: translateY(105%);
  animation: introRise .95s var(--ease-out) forwards;
}
.intro-word span:nth-child(2) { color: var(--accent); animation-delay: .12s; }
@keyframes introRise { to { transform: none; } }

/* A gold rule draws itself under the mark, then a hairline fills across it. */
.intro-rule {
  position: relative; height: 2px; margin: 1.35rem auto 0;
  width: min(15rem, 46vw);
  background: rgba(255,255,255,.14); overflow: hidden;
  transform: scaleX(0); transform-origin: left;
  animation: introRule .5s var(--ease-out) .3s forwards;
}
.intro-rule::after {
  content: ""; position: absolute; inset: 0;
  background: var(--accent); transform: translateX(-100%);
  animation: introFill .75s var(--ease-out) .55s forwards;
}
@keyframes introRule { to { transform: scaleX(1); } }
@keyframes introFill { to { transform: none; } }

.intro-tag {
  margin: 1.1rem 0 0; font-size: max(11px, .7rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: .26em; color: rgba(255,255,255,.45);
  opacity: 0; animation: introTag .5s var(--ease) .5s forwards;
}
@keyframes introTag { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html.js-motion .intro { display: none; }
}

/* ==========================================================================
   Trust strip — the hotels that are live, scrolling quietly
   ========================================================================== */

/* Label on its own line, names running underneath it. Side by side the two
   collided: the track is far wider than the viewport, so the names slid
   straight across the label. */
.marquee {
  border-block: 1px solid var(--line);
  background: var(--card);
  padding-block: 1.05rem 1.15rem;
  overflow: hidden;
}
.marquee-label {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-bottom: .85rem;
  font-size: max(11px, .68rem); font-weight: 700; text-transform: uppercase;
  letter-spacing: .16em; color: var(--ink-3); white-space: nowrap;
}
.marquee-label .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  animation: pulseGreen 2.4s var(--ease) infinite;
}
@keyframes pulseGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31,107,74,.5); }
  60%      { box-shadow: 0 0 0 7px rgba(31,107,74,0); }
}
.marquee-track {
  display: flex; gap: 2.75rem; width: max-content;
  animation: marquee 96s linear infinite;
  will-change: transform;
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-track > span {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--display); font-size: 1.02rem; color: var(--ink-2);
  white-space: nowrap;
}
.marquee-track > span::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); opacity: .55;
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* ==========================================================================
   Our story — overlapping photographs beside the copy
   ========================================================================== */

.story {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1.2rem + 4vw, 5rem); align-items: center;
}
.story-media { position: relative; padding: 0 3.5rem 3.5rem 0; }
.story-media .a {
  border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--brand-lift) center/cover no-repeat;
  box-shadow: var(--shadow-lg);
}
/* The inset photograph overlaps the corner of the first, the way a print
   layout would tuck a second frame under the first. */
.story-media .b {
  position: absolute; right: 0; bottom: 0; width: 58%;
  border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--brand) center/cover no-repeat;
  border: 6px solid var(--bg);
  box-shadow: var(--shadow-xl);
}
.story-badge {
  position: absolute; left: -1rem; top: 8%; z-index: 2;
  background: var(--accent); color: #1c1500;
  border-radius: var(--radius); padding: .9rem 1.15rem;
  box-shadow: var(--shadow-lg); text-align: center;
}
.story-badge .v {
  display: block; font-family: var(--display); font-size: 1.6rem;
  font-weight: 600; line-height: 1; letter-spacing: -.02em;
}
.story-badge .k {
  display: block; margin-top: .3rem; font-size: max(11px, .6rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; opacity: .75;
}
.story-copy h2 { margin: .7rem 0 0; }
.story-copy p { color: var(--ink-2); line-height: 1.78; margin: 1.15rem 0 0; }
.story-figures {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
  margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  padding-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-top: 1px solid var(--line);
}
.story-figures .v {
  font-family: var(--display); font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  font-weight: 600; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.story-figures .k {
  margin-top: .35rem; font-size: max(11px, .66rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3);
}
@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; }
  .story-media { padding: 0 2.5rem 2.5rem 0; width: 100%; max-width: 26rem; justify-self: center; }
  .story-badge { left: 0; }
}

/* ==========================================================================
   Inclusions — four promises over one wide photograph
   ========================================================================== */

.inclusions {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 1.3rem + 3vw, 4rem);
  color: rgba(255,255,255,.7);
  background: var(--brand);
  box-shadow: var(--shadow-glow);
}
.inclusions-media {
  position: absolute; inset: 0; z-index: -2;
  background: center/cover no-repeat; transform: scale(1.03);
}
.inclusions::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(5,7,14,.94), rgba(5,7,14,.72) 55%, rgba(5,7,14,.6)),
    radial-gradient(40% 46% at 88% 6%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
}
.inclusions .eyebrow { color: var(--accent); }
.inclusions h2 {
  color: #fff; margin: .75rem 0 0; max-width: 18ch;
  font-size: clamp(1.7rem, 1.2rem + 2.1vw, 2.85rem);
  line-height: 1.08; letter-spacing: -.026em; font-weight: 500;
}
.inclusions h2::after { display: none; }
.incl-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; margin-top: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg); overflow: hidden;
}
.incl {
  background: rgba(5,7,14,.42); backdrop-filter: blur(6px);
  padding: clamp(1.25rem, 1rem + 1.2vw, 1.85rem);
  transition: background var(--t) var(--ease);
}
.incl:hover { background: rgba(5,7,14,.18); }
.incl-ico {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
}
.incl-ico svg { width: 1.2rem; height: 1.2rem; }
.incl h3 { color: #fff; margin: 0 0 .4rem; font-size: 1rem; letter-spacing: -.005em; }
.incl p { margin: 0; font-size: .88rem; line-height: 1.65; color: rgba(255,255,255,.6); }
@media (max-width: 900px) { .incl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .incl-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Questions — a plain accordion, no library
   ========================================================================== */

.faq { display: grid; gap: .75rem; }
.faq-item {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.faq-item[open] { border-color: var(--line-strong); box-shadow: var(--shadow); }
.faq-item summary {
  display: flex; align-items: center; gap: 1.15rem; cursor: pointer;
  padding: clamp(1rem, .85rem + .6vw, 1.4rem) clamp(1.15rem, .9rem + .8vw, 1.65rem);
  font-family: var(--display); font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  font-weight: 600; color: var(--ink); list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--brand); }
.faq-item summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.faq-q { flex: 1; min-width: 0; }
.faq-mark {
  position: relative; flex-shrink: 0; width: 1.85rem; height: 1.85rem;
  border-radius: 50%; border: 1px solid var(--line-strong);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              transform var(--t) var(--ease-out);
}
.faq-mark::before, .faq-mark::after {
  content: ""; position: absolute; inset: 50% 28%; height: 1.5px;
  background: var(--ink-2); transform: translateY(-50%);
  transition: transform var(--t) var(--ease), background var(--t) var(--ease);
}
.faq-mark::after { transform: translateY(-50%) rotate(90deg); }
.faq-item[open] .faq-mark {
  background: var(--brand); border-color: var(--brand); transform: rotate(180deg);
}
.faq-item[open] .faq-mark::before,
.faq-item[open] .faq-mark::after { background: #fff; }
.faq-item[open] .faq-mark::after { transform: translateY(-50%); }
.faq-a {
  padding: 0 clamp(1.15rem, .9rem + .8vw, 1.65rem) clamp(1.15rem, .9rem + .8vw, 1.5rem);
  padding-right: clamp(3.5rem, 3rem + 2vw, 5rem);
  color: var(--ink-2); line-height: 1.75; margin: 0;
}
.faq-item[open] .faq-a { animation: faqIn .32s var(--ease-out); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }

.faq-split {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 1.2rem + 3vw, 4rem); align-items: start;
}
@media (max-width: 900px) { .faq-split { grid-template-columns: 1fr; } }


/* ==========================================================================
   Hero headline — each word rises from behind its own mask
   ==========================================================================
   The words are wrapped server-side so the sentence still reads correctly to
   a screen reader and to a browser with no JavaScript; only the transform is
   conditional on .js-motion.
   ========================================================================== */

.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; }
.hero h1 .w > i { display: inline-block; font-style: inherit; }

html.js-motion .hero h1 .w > i {
  transform: translateY(112%);
  animation: wordRise .95s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: calc(var(--i, 0) * 70ms + var(--hero-delay, 0ms));
}
@keyframes wordRise { to { transform: none; } }

/* The rest of the hero follows the headline up. */
html.js-motion .hero-eyebrow,
html.js-motion .hero-copy p,
html.js-motion .hero-trust {
  opacity: 0;
  animation: heroUp .8s var(--ease-out) forwards;
}
html.js-motion .hero-eyebrow { animation-delay: calc(var(--hero-delay, 0ms) + 60ms); }
html.js-motion .hero-copy p  { animation-delay: calc(var(--hero-delay, 0ms) + 340ms); }
html.js-motion .hero-trust   { animation-delay: calc(var(--hero-delay, 0ms) + 460ms); }
@keyframes heroUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* A visitor who arrives through the opening curtain waits for it to lift. */
html.js-motion body.intro-playing .hero { --hero-delay: 1500ms; }

@media (prefers-reduced-motion: reduce) {
  html.js-motion .hero h1 .w > i,
  html.js-motion .hero-eyebrow,
  html.js-motion .hero-copy p,
  html.js-motion .hero-trust { animation: none; opacity: 1; transform: none; }
}

/* ==========================================================================
   Testimonials — a rail that keeps moving
   ========================================================================== */

.rail {
  position: relative;
  /* The track is wider than the viewport by design; without this the page
     itself gains a horizontal scrollbar. */
  overflow: hidden;
  /* Fade the two ends so cards enter and leave rather than being cut off. */
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.rail-track {
  display: flex; gap: 1.5rem; width: max-content;
  animation: railRun 62s linear infinite;
  will-change: transform;
}
.rail:hover .rail-track,
.rail:focus-within .rail-track { animation-play-state: paused; }
@keyframes railRun { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .rail { mask-image: none; -webkit-mask-image: none; overflow-x: auto; }
  .rail-track { animation: none; }
}

.tcard {
  flex: 0 0 clamp(19rem, 26vw, 27rem);
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  position: relative; overflow: hidden;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
              transform var(--t) var(--ease-out);
}
.tcard:hover {
  border-color: var(--line-strong); box-shadow: var(--shadow-lg); transform: translateY(-4px);
}
/* The opening quote, set as a mark rather than punctuation. */
.tcard::before {
  content: "\201C";
  position: absolute; top: -2.1rem; right: .9rem;
  font-family: var(--display); font-size: 8rem; line-height: 1;
  color: color-mix(in srgb, var(--accent) 18%, transparent);
  pointer-events: none;
}
.tcard-stars { display: flex; gap: .18rem; margin-bottom: 1rem; color: var(--accent); }
.tcard-stars svg { width: .95rem; height: .95rem; fill: currentColor; stroke: none; }
.tcard-stars .off { color: var(--line-strong); }
.tcard-body {
  font-family: var(--display); font-size: 1.05rem; line-height: 1.62;
  color: var(--ink); margin: 0 0 1.5rem; flex: 1;
}
.tcard-who {
  display: flex; align-items: center; gap: .85rem;
  padding-top: 1.15rem; border-top: 1px solid var(--line);
}
.tcard-face {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--brand-lift), var(--brand));
  color: var(--accent); font-family: var(--display); font-size: 1.1rem; font-weight: 600;
}
.tcard-who .nm { display: block; font-weight: 650; font-size: .95rem; color: var(--ink); }
.tcard-who .at { display: block; font-size: .81rem; color: var(--ink-3); margin-top: .12rem; }
.tcard-who .at a { color: var(--ink-2); }

/* ==========================================================================
   Milestones — the About page timeline
   ========================================================================== */

.timeline { position: relative; display: grid; gap: 0; }
.timeline::before {
  content: ""; position: absolute; left: 5.75rem; top: .75rem; bottom: .75rem; width: 1px;
  background: linear-gradient(to bottom, transparent,
              color-mix(in srgb, var(--accent) 55%, transparent) 12%,
              var(--line) 88%, transparent);
}
.mstone {
  display: grid; grid-template-columns: 4.75rem 2rem 1fr; gap: 0 1.15rem;
  align-items: start; padding-block: clamp(1.1rem, .9rem + .8vw, 1.6rem);
}
.mstone + .mstone { border-top: 1px solid var(--line); }
.mstone-year {
  font-family: var(--display); font-size: 1.15rem; font-weight: 600;
  color: var(--ink); text-align: right; letter-spacing: -.01em; padding-top: .1rem;
}
.mstone-dot {
  position: relative; z-index: 1; width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--line-strong); color: var(--accent);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.mstone-dot svg { width: .95rem; height: .95rem; }
.mstone:hover .mstone-dot { border-color: var(--accent); background: var(--accent-soft); }
.mstone h3 { margin: 0 0 .3rem; font-size: 1.08rem; }
.mstone p { margin: 0; color: var(--ink-2); font-size: .94rem; line-height: 1.7; }
@media (max-width: 640px) {
  .timeline::before { left: 1rem; }
  .mstone { grid-template-columns: 2rem 1fr; gap: 0 1rem; }
  .mstone-year { grid-column: 2; text-align: left; font-size: .95rem; color: var(--accent);
                 padding-top: 0; margin-bottom: .3rem; }
  .mstone-dot { grid-row: 1 / span 2; }
}

/* ==========================================================================
   Values — a plain lettered list, no boxes
   ========================================================================== */

.values { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.value { display: grid; grid-template-columns: 2.75rem 1fr; gap: 1.15rem; align-items: start; }
.value-mark {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); color: var(--brand);
  font-family: var(--display); font-weight: 600; font-size: .95rem;
}
.value h3 { margin: .3rem 0 .4rem; font-size: 1.1rem; }
.value p { margin: 0; color: var(--ink-2); line-height: 1.72; font-size: .94rem; }
@media (max-width: 760px) { .values { grid-template-columns: 1fr; } }

/* ==========================================================================
   Mission — one sentence, given the room it deserves
   ========================================================================== */

/* Centred in the section: the one place on the page where a single sentence
   is the whole content, so it is set on the axis rather than to the margin. */
.mission { display: grid; gap: 1.35rem; justify-items: center; text-align: center; }
.mission blockquote {
  margin: 0; max-width: 26ch; font-family: var(--display); font-weight: 500;
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 3.1rem);
  line-height: 1.2; letter-spacing: -.024em; color: var(--ink);
}
.mission blockquote em { font-style: normal; color: var(--brand); position: relative; }
.mission blockquote em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .1em; height: .3em;
  background: color-mix(in srgb, var(--accent) 42%, transparent);
  z-index: -1; border-radius: 2px;
}
.mission blockquote { isolation: isolate; }
.mission-sign {
  display: inline-flex; align-items: center; gap: .85rem;
  justify-self: center; margin-top: .5rem;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .16em;
  font-weight: 700; color: var(--ink-3);
}
.mission-sign::before, .mission-sign::after {
  content: ""; width: 2.25rem; height: 1px; background: var(--line-strong);
}


/* ==========================================================================
   Century Gothic tuning
   ==========================================================================
   The body face is a wide geometric with a small x-height. Left alone it runs
   about 8% narrower on the eye and 10% wider on the line than the grotesque
   these rules were set for, so type gets a shade larger and every piece of
   letter-spaced small caps gets pulled back in.
   ========================================================================== */

body { font-size: 1.02rem; letter-spacing: -.002em; }

/* Uppercase tracking: geometric caps are already wide, so the generous
   tracking these labels carried now reads as gaps rather than emphasis. */
.eyebrow,
.label,
.hero-eyebrow,
.site-footer h4,
.drawer-label,
.intro-tag,
.mission-sign,
.to-top,
.marquee-label,
.foot-badges span,
.process-figures .k,
.story-figures .k,
.stat .k,
.dest-landmark,
.badge,
.pill,
.crumbs,
.office-line .k { letter-spacing: .09em; }

.hero-eyebrow, .intro-tag, .mission-sign { letter-spacing: .15em; }

/* Buttons and navigation: no extra tracking at all — the face supplies it. */
.btn, .site-nav a, .btn-google, .chip, .tcard-who .nm { letter-spacing: 0; }

/* The display serif keeps its own tighter fitting; only the sans changed. */
h1, h2, h3, h4, .section-title, .foot-word,
.hero h1, .process-copy h2, .cta-band h2, .inclusions h2,
.mission blockquote, .tcard-body { letter-spacing: -.022em; }

/* Small print needs a little more leading in a face this open. */
.small, .hint, .muted.small, .foot-badges span { line-height: 1.6; }

/* Century Gothic sets numerals wide; tabular figures keep counters from
   jumping about as they count up. */
.stat .v, .process-figures .v, .story-figures .v, .mstone-year,
.price-from strong, .money { font-variant-numeric: tabular-nums; }


/* The mark on a submitted contact form — a drawn tick in a ring, rather than
   a stray character sitting on its own. */
.sent-mark {
  display: inline-grid; place-items: center;
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent-deep);
}
.sent-mark svg { width: 1.9rem; height: 1.9rem; stroke-width: 2.4; }

/* The listing card in the contact sidebar shares the promise-card icon tile. */
.card-body > .why-ico { margin-bottom: 1.1rem; }


/* ==========================================================================
   Hero wordmark
   ==========================================================================
   The name of the place, set bold and raised a letter at a time. It sits
   between the kicker and the headline so the hero opens with the brand and
   then says what it does.
   ========================================================================== */

/* ==========================================================================
   The hero wordmark
   ==========================================================================
   The name, set the way the logo and the footer signature are set: display
   face, lower case, the last two letters in the accent.

   It sits directly inside .wrap rather than inside .hero-inner, because that
   column is capped at 62rem on large screens and the cap was cropping the end
   of the word. Sizing is deliberately conservative — the string measures
   4.89em in this face, and the tightest case is a 1920 screen where the
   container has stopped growing at 78rem but the viewport has not, so the vw
   term is held to a size that still fits there.
   ========================================================================== */

.hero-word {
  margin: 0 0 clamp(1.5rem, 1rem + 2vw, 3rem);
}

/* The mark tracks the scroll rather than sitting still: --hero-p runs 0 at the
   top of the page to 1 once the hero has gone, so the letters draw together,
   the mark drifts up and it fades out — and every step of it runs backwards
   when the page is scrolled back up, because it is a position, not a
   one-way animation. */
html.js-motion .hero-word {
  --p: var(--hero-p, 0);
  transform: translate3d(0, calc(var(--p) * -3rem), 0);
  opacity: calc(1 - var(--p) * .72);
  will-change: transform, opacity;
}
html.js-motion .hero-word .mark { padding-right: calc(var(--p) * 16%); }
@media (prefers-reduced-motion: reduce) {
  html.js-motion .hero-word { transform: none; opacity: 1; }
  html.js-motion .hero-word .mark { padding-right: 0; }
}
.hero-word .mark {
  display: flex; justify-content: space-between; align-items: baseline;
  width: 100%;
  font-family: var(--display);
  font-weight: 600;
  /* One size cannot serve every width: below the container's cap the column
     is ~92vw of the screen, and above it the column stops growing while the
     screen does not, so the ratio keeps falling. The steps below follow the
     container's own breakpoints and hold the letters at about 92% of the
     column at every size — tight enough to read as one word, with the
     remainder distributed evenly by space-between. */
  font-size: 17vw;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: rgba(255,255,255,.94);
}
.hero-word .l.tail > i { color: var(--accent); }
/* Each letter rides in its own mask. The mask is opened out past the line box
   at both ends — the serif's ascenders overshoot the top of the line by about
   a tenth of an em and the descenders on y and g drop below it — and the
   extra depth is pulled back out of the layout so the line box is unchanged.
   Nothing leaks during the rise: the letter starts below the mask entirely. */
.hero-word .l {
  display: inline-block; overflow: hidden;
  padding-block: .2em .3em;
  margin-block: -.2em -.3em;
}
.hero-word .l > i { display: inline-block; font-style: normal; }

/* Above the fold again, so the letters rise on load — after the opening
   curtain has lifted, when there is one. */
html.js-motion .hero-word .l > i {
  transform: translateY(112%);
  animation: wordRise 1s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: calc(var(--i, 0) * 55ms + var(--hero-delay, 0ms) + 120ms);
}

/* The headline comes in behind the mark. */
html.js-motion .hero h1 .w > i {
  animation-delay: calc(var(--i, 0) * 60ms + var(--hero-delay, 0ms) + 620ms);
}
html.js-motion .hero-copy p { animation-delay: calc(var(--hero-delay, 0ms) + 900ms); }
html.js-motion .hero-trust { animation-delay: calc(var(--hero-delay, 0ms) + 1020ms); }

/* The mark carries the weight, so the headline steps down under it. */
.hero h1 { font-size: clamp(1.75rem, 1.15rem + 2.3vw, 2.9rem); max-width: 26ch; }
.hero .hero-eyebrow { margin-bottom: 1rem; }

@media (prefers-reduced-motion: reduce) {
  html.js-motion .hero-word .l > i { animation: none; opacity: 1; transform: none; }
}


/* ==========================================================================
   Amenity icons on a hotel card
   ==========================================================================
   Four at most: enough to tell one property from another at a glance, few
   enough that the row never becomes a second paragraph.
   ========================================================================== */

.amenity-icons {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-top: .85rem; padding-top: .8rem;
  border-top: 1px solid var(--line);
}
.amenity-icons span {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .55rem;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--ink-2);
  font-size: .72rem; font-weight: 600; white-space: nowrap;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.amenity-icons svg { width: .85rem; height: .85rem; flex-shrink: 0; color: var(--ink-3); }
.card-link:hover .amenity-icons span { background: var(--accent-soft); color: var(--ink); }
.card-link:hover .amenity-icons svg { color: var(--accent-deep); }

/* On the narrow cards of a four-across row, drop the labels and keep the
   marks — the row would otherwise wrap to three lines. */
@media (min-width: 621px) {
  .fillgrid-4 .amenity-icons span > em { display: none; }
  .fillgrid-4 .amenity-icons span { padding: .32rem; }
  .fillgrid-4 .amenity-icons svg { width: .95rem; height: .95rem; }
  /* A card widened onto its own row has the space for words again. */
  .fillgrid-4 > .hotel-card:last-child:nth-child(4n + 1) .amenity-icons span > em { display: inline; }
  .fillgrid-4 > .hotel-card:last-child:nth-child(4n + 1) .amenity-icons span { padding: .28rem .55rem; }
}
.amenity-icons span > em { font-style: normal; }



/* ==========================================================================
   Nav: sign in and book now, read as one pair
   ==========================================================================
   Sitting loose in the nav they inherited the 2rem link gap and looked like
   two unrelated items. Grouped, separated from the links by a hairline, and
   spaced against each other rather than against the menu.
   ========================================================================== */

.nav-auth {
  display: inline-flex; align-items: center; gap: .85rem;
  padding-left: 1.6rem; margin-left: -.4rem;
  position: relative;
}
.nav-auth::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 1px; height: 1.5rem; transform: translateY(-50%);
  background: rgba(255,255,255,.16);
}
.site-nav .nav-signin {
  font-size: .88rem; color: rgba(255,255,255,.72);
  padding: .5rem .2rem;
}
.site-nav .nav-signin:hover { color: #fff; }
.site-nav .nav-signin::after { bottom: .3rem; }

@media (max-width: 1080px) {
  .nav-auth { padding-left: 1.15rem; gap: .65rem; }
}


/* A button carrying a hotel name can be longer than a 320px screen. Below the
   phone break, let a label wrap rather than push past the edge. */
@media (max-width: 620px) {
  .btn { white-space: normal; }
}


/* ==========================================================================
   Editorial prose — heading left, argument right
   ==========================================================================
   For a CMS body written as a run of h2 + paragraphs. Each heading is pulled
   into its own column with a numeral above it, and the paragraphs sit beside
   it; a hairline separates one point from the next. The markup is ordinary
   prose, so an administrator writing in the editor gets the layout for free.
   ========================================================================== */

.prose-split { counter-reset: point; }
.prose-split > h2 {
  counter-increment: point;
  grid-column: 1; margin: 0;
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  letter-spacing: -.02em; line-height: 1.2;
}
.prose-split > h2::before {
  content: counter(point, decimal-leading-zero);
  display: block; margin-bottom: .65rem;
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; color: var(--accent-deep);
}
.prose-split > h2::after { display: none; }

@media (min-width: 861px) {
  .prose-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
                 column-gap: clamp(2rem, 1.2rem + 3vw, 4.5rem); }
  .prose-split > * { grid-column: 2; }
  .prose-split > h2 { grid-column: 1; align-self: start; }
  /* Each heading starts a new row, so its paragraphs sit alongside it. */
  .prose-split > h2 { grid-row: auto; }
}

/* The rule between points is drawn on the heading, so it spans both columns
   and never lands under a lone paragraph. */
.prose-split > h2 { padding-top: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.prose-split > h2:first-child { padding-top: 0; }
.prose-split > h2:not(:first-child) { border-top: 1px solid var(--line); }
@media (min-width: 861px) {
  .prose-split > h2:not(:first-child) {
    box-shadow: 0 -1px 0 0 var(--line), 100vw -1px 0 0 var(--line);
    border-top: 0;
  }
}
.prose-split > p {
  color: var(--ink-2); line-height: 1.8; margin: 0 0 1rem;
  font-size: clamp(.98rem, .94rem + .2vw, 1.08rem);
}
.prose-split > p:last-child { margin-bottom: 0; }
@media (min-width: 861px) {
  .prose-split > h2 + p { padding-top: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
  .prose-split > h2:first-child + p { padding-top: 0; }
}


/* The action on a featured slide had nothing under it: .amenity-list resets
   its own margin, so the spacing utility on it never took, and the button sat
   flush against the chips. It gets its own step, larger than the gaps between
   the lines above it because it is the thing being asked for. */
.showcase-body > :last-child {
  margin-top: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
}
.showcase-body .amenity-list { margin-bottom: 0; }

/* Sized against the container at each of its own steps. */
@media (min-width: 1210px) { .hero-word .mark { font-size: 13.8rem; } }
@media (min-width: 2000px) { .hero-word .mark { font-size: 15.5rem; } }
@media (min-width: 3000px) { .hero-word .mark { font-size: 18.5rem; } }



/* ==========================================================================
   Room views — the rest of the set beside the main shot
   ========================================================================== */

.room-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin-top: .35rem; }
.room-shots img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius-sm); display: block;
  transition: opacity var(--t) var(--ease);
}
.room-row:hover .room-shots img { opacity: .88; }
.room-shots img:hover { opacity: 1; }
@media (max-width: 800px) {
  .room-shots { max-width: 280px; }
}


/* ==========================================================================
   Small screens
   ==========================================================================
   The bar comes down to a height that leaves the page some room, the mark and
   the toggle come down with it, and the drawer takes the whole screen instead
   of covering five sixths of it.
   ========================================================================== */

@media (max-width: 620px) {
  .site-header .wrap { height: 58px; gap: .75rem; }
  .site-header.is-stuck .wrap { height: 52px; }
  .site-header.is-stuck { padding-block: .4rem; }

  .brand { font-size: 1.05rem; gap: .55rem; }
  .brand-mark { width: 30px; height: 30px; font-size: .95rem; }
  .brand img { max-height: 30px; }

  .nav-toggle { width: 38px; height: 38px; }

  /* Drawer icons are drawn marks now rather than glyphs, so they need a box
     rather than a text slot. */
  .drawer-body a .ico { display: inline-flex; align-items: center; justify-content: center; }
  .drawer-body a .ico svg { width: 1.05rem; height: 1.05rem; }
}

@media (max-width: 420px) {
  .drawer { width: 100%; border-left: 0; }
}

/* ==========================================================================
   Centred on small screens
   ==========================================================================
   Below the phone break everything stacks to a single column, and page level
   copy reads better on the axis than pushed against the left margin.

   Cards are the exception. A card is already a centred object in the column;
   centring the text inside it as well leaves ragged lines floating in the
   middle of a box, so everything inside a card keeps its left edge. The
   footer keeps its own alignment too.
   ========================================================================== */

@media (max-width: 620px) {
  /* Page level copy: headings, intros, the blocks that are not cards. */
  .hero-inner,
  .hero-copy,
  .section-head,
  .mission,
  .story-copy,
  .cta-band,
  .pagehead,
  .auth-main .authbits,
  .auth-aside,
  .empty,
  .pager,
  .value > div,
  .mstone > div,
  .faq-split > :first-child { text-align: center; }

  /* text-align does not move a flex or grid child, so the rows inside those
     blocks need centring of their own. */
  .hero-eyebrow,
  .eyebrow,
  .mission-sign,
  .hero-trust,
  .btn-row,
  .story-figures,
  .process-figures,
  .marquee-label,
  .crumbs,
  .pager { justify-content: center; }

  .hero-trust { justify-content: center; text-align: center; }
  .hero-word .mark { justify-content: space-between; }

  /* Marks belonging to those blocks come onto the axis with them. */
  .value-mark, .mstone-dot { margin-inline: auto; }
  .value { justify-items: center; }
  .mstone { justify-items: center; }
  .mstone-year { text-align: center; }

  /* A paragraph with a reading measure needs its auto margins, or it centres
     its text inside a box that is still pinned to the left. */
  /* A measure-capped block centres its text inside a box that is still pinned
     to the left, so the box needs centring too. The headline was the worst of
     these: at 540px its 22ch box left 106px of empty space on the right. */
  .hero h1, .hero-copy p, .mission blockquote,
  .story-copy p, .cta-band p, .section-head p, .pagehead h1, .pagehead p,
  .faq-split > :first-child p, .auth-quote { margin-inline: auto; }

  /* --- Inside a card, nothing moves ----------------------------------- */
  .card, .card-head, .card-body, .card-foot, .prose-split,
  .process-copy, .process-lede, .inclusions, .partner-copy, .spotlight-body,
  .appcta-grid > div:first-child, .appcta h2, .appcta p,
  .hotel-card .body, .dest-body, .collection-body,
  .why, .incl, .tcard, .tcard-who,
  .office, .office-line, .pstep,
  .room-row, .room-row > div,
  .faq-item, .faq-item summary, .faq-a,
  .field, .label, .input, .select, .textarea, .check,
  table, .table-scroll, .totals, .faq,
  .searchbar, .prose li, .drawer-body a { text-align: left; }

  .why-ico, .incl-ico, .pstep-mark, .tcard-face,
  .card-body > .why-ico, .room-row .shot, .room-shots { margin-inline: 0; }

  .tcard-who { flex-direction: row; gap: .85rem; }
  .pstep { justify-items: stretch; }
  .drawer-body a { justify-content: flex-start; }

  /* The office panel goes back to its icon beside the text. */
  .office-line { grid-template-columns: 3rem 1fr; justify-items: stretch; gap: 1.05rem; }
  .office-line .ic { align-self: start; }
}



/* ==========================================================================
   Small screens, second pass
   ==========================================================================
   Section headers stack rather than trying to hold a heading and a link on
   one line, the figure rows inside the panels run three across instead of
   collapsing into a ragged stack, and the app section's controls get the
   full width of the card.
   ========================================================================== */

@media (max-width: 620px) {
  /* A heading and its "see all" link cannot share a line at this width, and
     space-between leaves them at opposite edges of two wrapped rows. */
  .section-head.row {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .85rem;
  }
  .section-head.row > * { width: 100%; }
  .section-head.row > a { text-align: center; }

  /* Figures inside a panel: three across, sized to fit the card rather than
     stacking one per line. */
  .process-figures,
  .story-figures,
  .partner-points,
  .spotlight-figures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem .6rem;
    text-align: left;
  }
  /* The story figures are the exception: they belong to the page copy above
     them, which is centred, rather than to a card. */
  .story-figures, .story-figures > div { text-align: center; }
  .process-figures > div,
  .story-figures > div,
  .partner-points > div,
  .spotlight-figures > div { display: block; }

  .process-figures .v, .story-figures .v,
  .partner-points .fig, .spotlight-figures div .fig { font-size: 1.3rem; line-height: 1.1; }
  .process-figures .k, .story-figures .k,
  .partner-points div .cap, .spotlight-figures div .cap {
    font-size: max(11px, .58rem); letter-spacing: .05em; line-height: 1.35; margin-top: .3rem;
  }
  .spotlight-figures { margin: 1.5rem 0; padding-top: 1.25rem; }
  .partner-points { margin-top: 1.35rem; }

  /* The app card: its own centring is dropped so it matches every other
     panel, and its controls take the full width. */
  .appcta-grid { justify-items: stretch; text-align: left; }
  .store-row, .appcta-notify { margin-inline: 0; justify-content: flex-start; }
  .store-row { display: grid; grid-template-columns: 1fr; gap: .6rem; }
  .store-btn { width: 100%; justify-content: flex-start; }
  .appcta-notify { max-width: none; }
  .appcta-notify .row { flex-wrap: wrap; }
  .appcta-notify .row .input { flex: 1 1 100%; }
  .appcta-notify .row .btn { width: 100%; }
}

/* The strip is slower still on a phone: the same track crossing a narrower
   screen reads as much faster than it does on a desktop. */
@media (max-width: 620px) {
  .marquee-track { animation-duration: 140s; }
}


/* The device behind wears a pill rather than a notch, so the two are not the
   same phone drawn twice. */
.phone-notch-island {
  top: 8px; width: 26%; height: 17px; border-radius: 100px;
  background: #05070c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}




/* ==========================================================================
   The app screens
   ==========================================================================
   Built as the real interface rather than a suggestion of one: a status bar
   with drawn signal, wifi and battery, an app bar, a search field, filter
   chips, result cards and a tab bar. Everything on them comes from the live
   catalogue, and the pass carries a real code.
   ========================================================================== */

.ui {
  position: relative; z-index: 1;
  height: 100%; display: flex; flex-direction: column;
  background: var(--bg); overflow: hidden;
  font-size: 10px;                    /* the screens scale from this one value */
}
.ui-dark { background: var(--brand-dark); }

/* ---- Status bar ---- */
.ui-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1em 1.4em .2em; flex-shrink: 0;
  color: #fff; font-weight: 700; font-size: 1.05em; letter-spacing: -.01em;
}
.ui-status-light { color: var(--ink); }
.ui-status .ic { display: inline-flex; align-items: center; gap: .45em; }
.ui-status svg { height: 1em; fill: currentColor; display: block; }
.ui-status .sig { width: 1.5em; }
.ui-status .wifi { width: 1.35em; }
.ui-status .bat { width: 2.2em; }

/* ---- App bar ---- */
.ui-appbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8em; padding: .9em 1.4em .7em; flex-shrink: 0;
}
.ui-appbar .hello em { display: block; font-style: normal; font-size: .95em; color: var(--ink-3); }
.ui-appbar .hello b {
  display: block; font-family: var(--display); font-size: 1.5em;
  font-weight: 600; color: var(--ink); letter-spacing: -.02em; margin-top: .15em;
}
.ui-appbar .ava {
  width: 2.9em; height: 2.9em; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--brand-lift), var(--brand));
  color: var(--accent); font-weight: 700; font-size: 1.05em;
}

/* ---- Search field ---- */
.ui-search {
  display: flex; align-items: center; gap: .6em;
  margin: 0 1.4em; padding: .85em .9em; flex-shrink: 0;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 1.2em; box-shadow: var(--shadow-xs);
  font-size: 1em; color: var(--ink-2); white-space: nowrap;
}
.ui-search svg { width: 1.3em; height: 1.3em; color: var(--ink-3); flex-shrink: 0; }
.ui-search span:first-of-type { flex: 1; min-width: 0; overflow: hidden; }
.ui-search .tune {
  display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%;
  background: var(--brand); flex-shrink: 0;
}
.ui-search .tune svg { width: 1.05em; height: 1.05em; color: var(--accent); }

/* ---- Filter chips ---- */
.ui-chips {
  display: flex; gap: .5em; padding: .9em 1.4em .2em; flex-shrink: 0;
  overflow: hidden;
}
.ui-chips span {
  padding: .45em .85em; border-radius: 100px; white-space: nowrap;
  background: var(--card); border: 1px solid var(--line);
  color: var(--ink-2); font-size: .95em; font-weight: 600;
}
.ui-chips .on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---- Results ---- */
.ui-scroll { flex: 1; overflow: hidden; padding: 0 1.4em; display: flex;
             flex-direction: column; gap: .8em; }
.ui-rowhead {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: 1em; flex-shrink: 0;
}
.ui-rowhead b { font-size: 1.15em; color: var(--ink); font-weight: 700; }
.ui-rowhead i { font-style: normal; font-size: .95em; color: var(--brand); font-weight: 600; }

.ui-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 1.1em; overflow: hidden; flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}
.ui-card .shot {
  display: block; height: 7.4em; position: relative;
  background: var(--brand-lift) center/cover no-repeat;
}
.ui-card .fav {
  position: absolute; top: .55em; right: .55em;
  width: 2em; height: 2em; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.92);
}
.ui-card .fav svg { width: 1.05em; height: 1.05em; color: var(--red); }
.ui-card .tag {
  position: absolute; left: .55em; bottom: .55em;
  background: rgba(11,16,32,.72); color: #fff;
  font-size: .82em; font-weight: 700; padding: .25em .6em; border-radius: 100px;
}
.ui-card .body { padding: .75em .85em .85em; }
.ui-card .r1 { display: flex; align-items: baseline; justify-content: space-between; gap: .5em; }
.ui-card .r1 b { font-size: 1.05em; color: var(--ink); font-weight: 700; }
.ui-card .star { display: inline-flex; align-items: center; gap: .2em;
                 font-size: .92em; font-weight: 700; color: var(--ink); flex-shrink: 0; }
.ui-card .star svg { width: .9em; height: .9em; fill: var(--accent); stroke: none; }
.ui-card .loc { display: flex; align-items: center; gap: .25em;
                font-size: .9em; color: var(--ink-3); margin-top: .2em; }
.ui-card .loc svg { width: .9em; height: .9em; flex-shrink: 0; }
.ui-card .r2 { display: flex; align-items: baseline; justify-content: space-between;
               gap: .5em; margin-top: .5em; }
.ui-card .pr { font-family: var(--display); font-size: 1.2em; font-weight: 600; color: var(--brand); }
.ui-card .pr em { font-family: var(--sans); font-style: normal; font-size: .7em;
                  font-weight: 400; color: var(--ink-3); }
.ui-card .free { font-size: .82em; font-weight: 700; color: var(--green); }

/* ---- Tab bar ---- */
.ui-tabs {
  display: flex; justify-content: space-around; align-items: center;
  background: var(--card); border-top: 1px solid var(--line);
  padding: .7em .4em 1.1em; flex-shrink: 0;
}
.ui-tabs span { display: flex; flex-direction: column; align-items: center; gap: .3em; }
.ui-tabs svg { width: 1.5em; height: 1.5em; color: var(--ink-4); }
.ui-tabs em { font-style: normal; font-size: .8em; font-weight: 600; color: var(--ink-4); }
.ui-tabs .on svg, .ui-tabs .on em { color: var(--brand); }

/* ---- The pass screen ---- */
.ui-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9em 1.3em; color: #fff; flex-shrink: 0;
}
.ui-nav svg { width: 1.5em; height: 1.5em; }
.ui-nav .back { transform: rotate(180deg); opacity: .8; display: block; }
.ui-nav .act { opacity: .8; }
.ui-nav .ttl { font-weight: 700; font-size: 1.1em; }

.ui-pass {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: .4em 1.3em 1.4em; text-align: center; color: #fff; overflow: hidden;
}
.ui-pass .tick {
  width: 3.2em; height: 3.2em; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--green) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 60%, transparent);
  flex-shrink: 0;
}
.ui-pass .tick svg { width: 1.6em; height: 1.6em; color: #6ee7a8; stroke-width: 3; }
.ui-pass h4 { margin: .7em 0 .2em; font-size: 1.35em; font-family: var(--display); font-weight: 600; }
.ui-pass > p { margin: 0 0 1em; font-size: .92em; color: rgba(255,255,255,.55); }

.pass-card {
  width: 100%; background: #fff; border-radius: 1.2em;
  padding: .8em .8em .9em; text-align: left; flex-shrink: 0;
  box-shadow: 0 1.4em 2.6em -1.2em rgba(0,0,0,.6);
}
.pass-top { display: flex; align-items: center; gap: .6em; padding-bottom: .7em;
            border-bottom: 1px dashed var(--line-strong); }
.pass-top .shot { width: 2.8em; height: 2.8em; border-radius: .6em; flex-shrink: 0;
                  background: var(--brand-lift) center/cover no-repeat; }
.pass-top .meta { min-width: 0; }
.pass-top b { display: block; font-size: 1em; color: var(--ink); font-weight: 700; }
.pass-top i { display: block; font-style: normal; font-size: .85em; color: var(--ink-3); margin-top: .1em; }

.pass-qr { width: 54%; margin: .8em auto .5em; aspect-ratio: 1; }
.pass-qr svg { width: 100%; height: 100%; display: block; }
.pass-ref { text-align: center; font-family: var(--mono); font-size: .95em;
            font-weight: 700; letter-spacing: .06em; color: var(--brand); }

.pass-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6em .5em;
             margin-top: .9em; padding-top: .8em; border-top: 1px solid var(--line); }
.pass-grid em { display: block; font-style: normal; font-size: .78em; font-weight: 700;
                text-transform: uppercase; letter-spacing: .08em; color: var(--ink-4); }
.pass-grid b { display: block; font-size: .92em; color: var(--ink); font-weight: 700; margin-top: .1em; }

.ui-cta {
  display: block; width: 100%; margin-top: auto; padding: .95em;
  border-radius: 100px; background: var(--accent); color: #1c1500;
  font-weight: 700; font-size: 1em; flex-shrink: 0;
}

/* The screens are sized from one font-size, so they scale as a unit. */
@media (max-width: 1200px) { .ui { font-size: 9px; } }
@media (max-width: 860px)  { .ui { font-size: 8.5px; } }
@media (max-width: 620px)  { .ui { font-size: 5.8px; } }
@media (max-width: 400px)  { .ui { font-size: 5.4px; } }

/* Both devices stay on a phone, just smaller and closer together. */
@media (max-width: 860px) {
  .phones { min-height: 0; padding: 1.5rem 0 .5rem; }
  .appcta-grid > * { min-width: 0; }
}
@media (max-width: 620px) {
  /* A rotated element's footprint is wider than the element: at this aspect
     ratio each degree of tilt costs about 2% of the width. So the tilt comes
     down as well as the size, and the pair is sized against the rotated
     footprint rather than the flat one. */
  .phone { width: min(37vw, 148px); border-radius: 24px; padding: 4px; }
  .phone-screen { border-radius: 21px; }
  .phone-back { margin-right: -26%; }
  .phone-front { transform: rotate(3deg) translateY(2%); }
  .phone-back  { transform: rotate(-5deg) translateY(-4%) scale(.95); }
  .phone-notch { width: 36%; height: 14px; top: 6px; }
  .phone-notch-island { width: 30%; height: 12px; top: 6px; }
  .phone-home { height: 2.5px; bottom: 4px; }
}


/* ==========================================================================
   Pillars — the About page's narrative, as panels
   ==========================================================================
   Each point gets a numeral, a rule that draws itself across as the panel
   arrives, and a wash of light that follows the pointer. The whole set is
   read out of ordinary CMS headings and paragraphs.
   ========================================================================== */

.pillars-band {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--bg-2);
}
.pillars-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 44% at 82% 6%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    radial-gradient(32% 40% at 6% 96%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 70%);
}

.pillars {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1000px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .pillars { grid-template-columns: 1fr; } }

.pillar {
  position: relative; overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out),
              border-color var(--t) var(--ease);
}
.pillar:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--line-strong);
}

/* The numeral sits behind the text and warms up on approach. */
.pillar-n {
  position: absolute; top: .35rem; right: 1rem;
  font-family: var(--display); font-weight: 600;
  font-size: 4.5rem; line-height: 1; letter-spacing: -.04em;
  color: var(--line);
  transition: color var(--t-slow) var(--ease), transform var(--t-slow) var(--ease-out);
}
.pillar:hover .pillar-n {
  color: color-mix(in srgb, var(--accent) 45%, transparent);
  transform: translateY(-3px) scale(1.04);
}

/* A gold rule that draws across when the panel comes into view. */
.pillar-rule {
  display: block; height: 2px; width: 2.75rem; margin-bottom: 1.15rem;
  background: linear-gradient(to right, var(--accent), color-mix(in srgb, var(--accent) 25%, transparent));
  border-radius: 2px;
  transform-origin: left;
}
.js-motion .pillar .pillar-rule { transform: scaleX(0); }
.js-motion .pillar.is-visible .pillar-rule {
  animation: ruleDraw .7s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 80ms + 180ms);
}
@keyframes ruleDraw { to { transform: scaleX(1); } }
.pillar:hover .pillar-rule { width: 4.5rem; transition: width var(--t) var(--ease-out); }

.pillar h3 {
  position: relative; z-index: 1;
  margin: 0 0 .6rem; font-size: 1.2rem; letter-spacing: -.015em;
}
.pillar-body { position: relative; z-index: 1; }
.pillar-body p { margin: 0 0 .75rem; color: var(--ink-2); line-height: 1.75; font-size: .95rem; }
.pillar-body p:last-child { margin-bottom: 0; }
.pillar-body ul { margin: 0 0 .75rem; padding-left: 1.1rem; color: var(--ink-2); }

/* A lead paragraph with no heading of its own runs the full width and reads
   as the introduction it is. */
.pillar:first-child:not(:has(h3)) {
  grid-column: 1 / -1;
  background: linear-gradient(150deg, var(--brand-lift), var(--brand) 60%, var(--brand-dark));
  border-color: transparent; color: rgba(255,255,255,.78);
}
.pillar:first-child:not(:has(h3)) .pillar-body p {
  color: rgba(255,255,255,.82);
  font-family: var(--display); font-size: clamp(1.1rem, .95rem + .8vw, 1.6rem);
  line-height: 1.5;
}
.pillar:first-child:not(:has(h3)) .pillar-n { color: rgba(255,255,255,.12); }


/* ==========================================================================
   Photograph viewer
   ========================================================================== */

/* The thumbnails become buttons, so they need the chrome stripping off. */
.shot-btn {
  display: block; padding: 0; border: 0; background: none; cursor: zoom-in;
  width: 100%; position: relative; overflow: hidden;
  border-radius: inherit;
}
.shot-btn img { display: block; width: 100%; }
.shot-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.gallery .shot-btn { height: 100%; }
.gallery .shot-btn img { height: 100%; object-fit: cover; }
.gallery .shot-btn:first-child { grid-row: span 2; }
.gallery > .shot-btn:first-child img { aspect-ratio: 1; }

.gallery-more {
  position: absolute; right: .85rem; bottom: .85rem;
  background: rgba(11,16,32,.72); color: #fff; backdrop-filter: blur(8px);
  font-size: .74rem; font-weight: 700; padding: .35rem .7rem;
  border-radius: var(--radius-pill); pointer-events: none;
}
.gallery { position: relative; }

/* The room's main shot gets a zoom mark on hover. */
.shot-btn-main { border-radius: var(--radius); }
.shot-zoom {
  position: absolute; right: .5rem; bottom: .5rem;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(11,16,32,.6); color: #fff; backdrop-filter: blur(6px);
  opacity: 0; transform: scale(.85);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.shot-zoom svg { width: .9rem; height: .9rem; }
.shot-btn-main:hover .shot-zoom, .shot-btn-main:focus-visible .shot-zoom {
  opacity: 1; transform: none;
}

.room-shots .shot-btn { border-radius: var(--radius-sm); }
.room-shots .shot-btn img { aspect-ratio: 4/3; object-fit: cover; }

/* ---- The overlay ---- */
.viewer {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(.5rem, 2vw, 2rem);
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(5,7,14,.93);
  backdrop-filter: blur(10px);
  animation: viewerIn .28s var(--ease-out);
}
.viewer[hidden] { display: none; }
@keyframes viewerIn { from { opacity: 0; } }

.viewer-stage {
  margin: 0; min-width: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem;
}
.viewer-stage img {
  max-width: 100%; max-height: 78vh; display: block;
  border-radius: var(--radius); object-fit: contain;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.9);
  opacity: 0; transform: scale(.985);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.viewer-stage img.is-in { opacity: 1; transform: none; }
.viewer-stage figcaption {
  color: rgba(255,255,255,.72); font-size: .9rem; text-align: center;
}

.viewer-close, .viewer-nav {
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff; cursor: pointer; border-radius: 50%;
  display: grid; place-items: center;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              transform var(--t) var(--ease-out);
}
.viewer-close:hover, .viewer-nav:hover {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35);
}
.viewer-nav { width: 3rem; height: 3rem; font-size: 1.8rem; line-height: 1; }
.viewer-nav:hover { transform: scale(1.06); }
.viewer-close {
  position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem);
  width: 2.75rem; height: 2.75rem; font-size: 1.6rem; line-height: 1;
}
.viewer-count {
  position: absolute; left: 50%; bottom: clamp(1rem, 3vw, 2rem); transform: translateX(-50%);
  color: rgba(255,255,255,.6); font-size: .8rem; font-weight: 700;
  letter-spacing: .1em;
}

@media (max-width: 620px) {
  .viewer { grid-template-columns: 1fr; }
  .viewer-nav {
    position: absolute; bottom: clamp(1rem, 4vw, 2rem);
    width: 2.75rem; height: 2.75rem;
  }
  .viewer-prev { left: 22%; }
  .viewer-next { right: 22%; }
  .viewer-count { bottom: calc(clamp(1rem, 4vw, 2rem) + .8rem); }
  .viewer-stage img { max-height: 62vh; }
}

@media (prefers-reduced-motion: reduce) {
  .viewer { animation: none; }
  .viewer-stage img { transition: none; opacity: 1; transform: none; }
}


/* The story photographs sit inside a block that is padded on one side only,
   so on a centred phone layout the whole group sat 39px off the axis with the
   badge hard against the left edge. Even padding puts the main frame on the
   centre line with the badge and the inset frame balanced either side of it. */
@media (max-width: 620px) {
  .story-media {
    padding: 0 2rem 2.75rem;
    width: 100%; max-width: 22rem; justify-self: center;
  }
  .story-badge { left: 0; top: 7%; }
  .story-badge .k { line-height: 1.35; }
}


/* The button beneath a split section's heading follows it onto the axis. */
@media (max-width: 620px) {
  .faq-split > :first-child .btn { margin-inline: auto; display: inline-flex; }
}


/* ==========================================================================
   The place network behind the app section
   ==========================================================================
   Nodes joined by routes, sitting behind the panel to say the app reaches
   across the country. The whole thing is masked so it is strongest on the
   right, under the devices, and gone before it reaches the copy on the left.
   ========================================================================== */

.appcta-net {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
  mask-image: linear-gradient(105deg, transparent 6%, rgba(0,0,0,.45) 38%, #000 78%);
  -webkit-mask-image: linear-gradient(105deg, transparent 6%, rgba(0,0,0,.45) 38%, #000 78%);
}

.appcta-net .net-links path {
  fill: none;
  stroke: rgba(255,255,255,.16);
  stroke-width: 1;
  stroke-linecap: round;
}
.appcta-net .net-nodes circle { fill: rgba(255,255,255,.4); }
.appcta-net .net-hubs circle {
  fill: var(--accent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent));
}
.appcta-net .net-pulse circle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  opacity: 0;
}

/* The routes draw themselves in as the panel arrives, then the two hubs keep
   a slow pulse going. */
.js-motion .appcta .net-links path {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
}
.js-motion .appcta.is-visible .net-links path {
  animation: netDraw 1.6s var(--ease-out) forwards;
}
.js-motion .appcta .net-nodes circle,
.js-motion .appcta .net-hubs circle { opacity: 0; }
.js-motion .appcta.is-visible .net-nodes circle,
.js-motion .appcta.is-visible .net-hubs circle {
  animation: netNode .6s var(--ease-out) forwards;
}

/* Staggered so the network spreads outward rather than appearing at once. */
.js-motion .appcta.is-visible .net-links path:nth-child(3n + 1) { animation-delay: .15s; }
.js-motion .appcta.is-visible .net-links path:nth-child(3n + 2) { animation-delay: .35s; }
.js-motion .appcta.is-visible .net-links path:nth-child(3n + 3) { animation-delay: .55s; }
.js-motion .appcta.is-visible .net-nodes circle:nth-child(odd)  { animation-delay: .5s; }
.js-motion .appcta.is-visible .net-nodes circle:nth-child(even) { animation-delay: .7s; }
.js-motion .appcta.is-visible .net-hubs circle { animation-delay: .9s; }

@keyframes netDraw { to { stroke-dashoffset: 0; } }
@keyframes netNode { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  .appcta.is-visible .net-pulse circle {
    animation: netPulse 3.6s var(--ease-out) infinite;
  }
  .appcta.is-visible .net-pulse circle:nth-child(2) { animation-delay: 1.8s; }
}
@keyframes netPulse {
  0%   { r: 5;  opacity: .55; stroke-width: 1.5; }
  70%  { r: 34; opacity: 0;   stroke-width: .5; }
  100% { r: 34; opacity: 0;   stroke-width: .5; }
}

/* On a phone the panel is a tall single column. Stretched over the whole of
   it, a slice-scaled network of this aspect ratio would show only a narrow
   vertical sliver of itself, so it becomes a band across the lower half
   instead, where it sits behind the devices. */
@media (max-width: 860px) {
  .appcta-net {
    inset: auto 0 0 0;
    height: 38%;
    mask-image: linear-gradient(to bottom, transparent 2%, rgba(0,0,0,.45) 32%, #000 70%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 2%, rgba(0,0,0,.45) 32%, #000 70%);
  }
}


/* ==========================================================================
   Verified on both sides
   ==========================================================================
   Identity is the part of this that people worry about, so it gets a section
   of its own rather than a line in a card: the case on the left, the four
   checks listed down the right.
   ========================================================================== */

.trust-split {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(2rem, 1.2rem + 3vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) { .trust-split { grid-template-columns: 1fr; } }

/* The badge: the one place the platform says NIN out loud. */
.nin-badge {
  display: inline-flex; align-items: center; gap: .85rem;
  margin-top: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  padding: .8rem 1.35rem .8rem 1rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(150deg, var(--brand-lift), var(--brand));
  color: #fff;
  box-shadow: 0 14px 30px -14px rgba(11,16,32,.7);
}
.nin-badge svg { width: 1.5rem; height: 1.5rem; color: var(--accent); flex-shrink: 0; }
.nin-badge span { display: grid; line-height: 1.2; font-size: .92rem; }
.nin-badge b { font-weight: 700; letter-spacing: .04em; }
.nin-badge em {
  font-style: normal; font-size: max(11px, .68rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.5); margin-top: .2rem;
}

.trust-list { list-style: none; margin: 0; padding: 0; display: grid; }
.trust-list li {
  display: grid; grid-template-columns: 3.25rem 1fr; gap: 1.25rem;
  align-items: start;
  padding-block: clamp(1.15rem, .9rem + 1vw, 1.75rem);
  border-top: 1px solid var(--line);
}
.trust-list li:first-child { border-top: 0; padding-top: 0; }
.tl-ico {
  width: 3.25rem; height: 3.25rem; border-radius: var(--radius);
  display: grid; place-items: center;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  color: var(--accent-deep);
  transition: background var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.tl-ico svg { width: 1.4rem; height: 1.4rem; }
.trust-list li:hover .tl-ico { transform: translateY(-3px); background: #fff; }
.trust-list h3 { margin: .35rem 0 .35rem; font-size: 1.08rem; letter-spacing: -.01em; }
.trust-list p { margin: 0; color: var(--ink-2); font-size: .93rem; line-height: 1.7; }

@media (max-width: 620px) {
  .trust-lead { text-align: center; }
  .trust-lead .eyebrow { justify-content: center; }
  .trust-lead p { margin-inline: auto; }
  .trust-list li { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: .75rem; }
  .tl-ico { margin-inline: auto; }
}


/* ==========================================================================
   Identity check and paperless filing
   ==========================================================================
   The illustration is drawn rather than photographed, for the same reason the
   icons are: it inherits the brand colours, it costs one request, and a face
   nobody can identify is the honest way to picture identity checking.
   ========================================================================== */

.idcheck {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, var(--brand-lift) 0%, var(--brand) 52%, var(--brand-dark) 100%);
  color: rgba(255,255,255,.74);
  padding: clamp(1.75rem, 1.1rem + 3vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: center;
  box-shadow: var(--shadow-glow);
}
.idcheck::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(42% 48% at 18% 8%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%),
    radial-gradient(36% 44% at 92% 96%, rgba(255,255,255,.07), transparent 70%);
}

.idcheck-art { min-width: 0; }
.idcheck-art svg { width: 100%; height: auto; display: block; overflow: visible; }

/* --- the device --- */
.id-device { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.18); stroke-width: 1.5; }
.id-screen { fill: rgba(5,7,14,.5); stroke: rgba(255,255,255,.07); stroke-width: 1; }

/* --- the face: a shape, not a person --- */
.id-face { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; opacity: .85; }

.id-brackets { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 2.5; stroke-linecap: round; }

/* --- the result --- */
.id-verified rect { fill: color-mix(in srgb, var(--green) 42%, transparent); stroke: color-mix(in srgb, var(--green) 70%, transparent); stroke-width: 1; }
.id-verified text {
  fill: #d8f7e6; font-family: var(--sans); font-size: 15px; font-weight: 700;
  text-anchor: middle; letter-spacing: .02em;
}
.id-tick { fill: none; stroke: #7ff0b4; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* --- documents, filed --- */
.id-doc rect { fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.16); stroke-width: 1.25; }
.id-doc path { stroke: rgba(255,255,255,.3); stroke-width: 3; stroke-linecap: round; fill: none; }
.id-doc-tick { fill: var(--accent); stroke: none; }
.id-doc-mark { stroke: #1c1500 !important; stroke-width: 2.4 !important; fill: none; }

/* The credential: a card of its own, below the device rather than half over
   it. The gold disc carries the mark, the number is masked the way the
   platform actually stores it. */
.id-chip-body {
  fill: rgba(255,255,255,.09);
  stroke: color-mix(in srgb, var(--accent) 45%, transparent);
  stroke-width: 1.25;
}
.id-chip-disc { fill: var(--accent); }
.id-chip-glyph { fill: none; stroke: #1c1500; stroke-width: 1.8; stroke-linejoin: round; }
.id-chip-label {
  fill: rgba(255,255,255,.5); font-family: var(--sans); font-size: 10px;
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.id-chip-num {
  fill: #fff; font-family: var(--mono); font-size: 15px;
  font-weight: 700; letter-spacing: .1em;
}

.id-wires { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 1.25; stroke-dasharray: 3 5; }

/* --- movement: the sweep runs, the results land after it --- */
@media (prefers-reduced-motion: no-preference) {
  .idcheck.is-visible .id-scan { animation: idSweep 3.4s var(--ease) infinite; }
  .idcheck.is-visible .id-doc  { animation: idFloat 6s var(--ease) infinite alternate; }
  .idcheck.is-visible .id-doc-2 { animation-delay: -3s; }
}
@keyframes idSweep {
  0%   { transform: translateY(0);    opacity: 0; }
  8%   { opacity: 1; }
  46%  { transform: translateY(176px); opacity: 1; }
  54%  { transform: translateY(176px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 0; }
}
@keyframes idFloat { from { transform: translateY(0); } to { transform: translateY(-8px); } }

.js-motion .idcheck .id-verified { opacity: 0; }
.js-motion .idcheck.is-visible .id-verified { animation: idPop .6s var(--ease-out) 1.5s forwards; }
@keyframes idPop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.js-motion .idcheck .id-doc-tick, .js-motion .idcheck .id-doc-mark { opacity: 0; }
.js-motion .idcheck.is-visible .id-doc-tick,
.js-motion .idcheck.is-visible .id-doc-mark { animation: idPop .5s var(--ease-out) 1.9s forwards; }

.js-motion .idcheck .id-chip { opacity: 0; }
.js-motion .idcheck.is-visible .id-chip { animation: idPop .6s var(--ease-out) 2.2s forwards; }

/* --- the copy --- */
.idcheck-copy .eyebrow { color: var(--accent); }
.idcheck-copy h2 { color: #fff; }
.idcheck-copy h2::after { display: none; }
.idcheck-lede { margin: 1.15rem 0 0; line-height: 1.75; }

.idcheck-list {
  list-style: none; margin: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem) 0 0; padding: 0;
  display: grid; gap: 1px; background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.11); border-radius: var(--radius-lg); overflow: hidden;
}
.idcheck-list li {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: start;
  padding: clamp(1rem, .85rem + .7vw, 1.35rem);
  background: rgba(5,7,14,.28);
  transition: background var(--t) var(--ease);
}
.idcheck-list li:hover { background: rgba(5,7,14,.05); }
.idcheck-list .ic {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  color: var(--accent);
}
.idcheck-list .ic svg { width: 1.15rem; height: 1.15rem; }
.idcheck-list h3 { color: #fff; margin: .3rem 0 .25rem; font-size: 1rem; }
.idcheck-list p { margin: 0; font-size: .89rem; line-height: 1.65; color: rgba(255,255,255,.6); }

@media (max-width: 900px) {
  .idcheck { grid-template-columns: 1fr; }
  .idcheck-art { max-width: 22rem; margin-inline: auto; order: -1; }
}
@media (max-width: 620px) {
  .idcheck-copy { text-align: center; }
  .idcheck-copy .eyebrow { justify-content: center; }
  .idcheck-lede { margin-inline: auto; }
  .idcheck-list li { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: .7rem; }
  .idcheck-list .ic { margin-inline: auto; }
}


/* A <summary> that opens a panel is a control, so it is sized like one. */
.disclosure {
  display: flex; align-items: center; gap: .5rem;
  min-height: 34px; padding: .35rem 0;
  cursor: pointer; font-weight: 600; color: var(--brand);
}
.disclosure:hover { text-decoration: underline; }


/* ==========================================================================
   The occupant register at the front desk
   ==========================================================================
   Reception works down a list of faces: the photograph the register returned
   beside the name, so the person at the counter can be matched to the record
   without reading anything.
   ========================================================================== */

.occ-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}

.occ-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .5rem; }
.occ-list li {
  display: grid; grid-template-columns: 3rem 1fr auto; gap: .9rem;
  align-items: center;
  padding: .7rem .85rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card);
}

.occ-face {
  width: 3rem; height: 3rem; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
  border: 1px solid var(--line);
}
.occ-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.occ-initial { font-weight: 700; font-size: 1.1rem; }

.occ-who strong { display: inline-block; margin-right: .4rem; }
.occ-who .small { line-height: 1.5; }

.occ-state { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }

/* The lookup row: NIN, an optional name, and the button, on one line where
   there is room and stacked on a tablet held upright. */
.occ-add {
  display: grid; gap: .75rem; align-items: end;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 1rem; border-radius: var(--radius);
  background: var(--bg-alt, var(--brand-soft));
  border: 1px dashed var(--line-strong);
}
.occ-add:has(#occ_name) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.occ-add .btn { white-space: nowrap; }

@media (max-width: 640px) {
  .occ-list li { grid-template-columns: 2.5rem 1fr; }
  .occ-state { grid-column: 1 / -1; justify-content: flex-start; }
  .occ-add, .occ-add:has(#occ_name) { grid-template-columns: 1fr; }
}


/* The profile picture, where a guest replaces the one off their NIN record. */
.avatar-edit {
  display: grid; grid-template-columns: 5rem 1fr; gap: 1.25rem;
  align-items: start; margin-bottom: 1.75rem;
  padding-bottom: 1.75rem; border-bottom: 1px solid var(--line);
}
.avatar-preview {
  width: 5rem; height: 5rem; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
  border: 1px solid var(--line); font-size: 1.6rem; font-weight: 700;
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-edit-body p { margin: .25rem 0 .75rem; }
.avatar-form { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.avatar-form .input { padding: .45rem .6rem; font-size: .88rem; }

@media (max-width: 620px) {
  .avatar-edit { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .avatar-edit-body .label { text-align: center; }
  .avatar-form { justify-content: center; }
}


/* The payout controls in the settlements table: an amount and its button on
   one line, wrapping under each other on a narrow screen. */
.payout-form { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.payout-form .input { width: 8rem; padding: .4rem .6rem; font-size: .88rem; }
.payout-form .btn { white-space: nowrap; }
@media (max-width: 900px) { .payout-form { justify-content: flex-start; } }