/*
Theme Name: Ayansh Holidays
Theme URI: https://ayanshholidays.com/
Author: Ayansh Holidays
Description: Bhutan tour operator theme for Ayansh Holidays, Jaigaon. Built from the approved static design - the CSS below is that stylesheet, unchanged.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: ayansh
*/

/* ==========================================================================
   AYANSH HOLIDAYS
   Built to DESIGN-SYSTEM.md. Every colour below was extracted from the
   stylesheets of the reference sites (Rosewood, Raffles); nothing is invented.
   Type stands in for their licensed faces: Playfair Display for Austin/Canela,
   Jost for Engravers Gothic/Akzidenz Grotesk.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,300;0,400;0,500;1,400;1,500&family=Jost:wght@300;400;500&display=swap');

/* --- Tokens ------------------------------------------------------------- */

:root {
  --dzong-black:   #0C1F1E;
  --night-valley:  #061514;
  --ink:           #141414;
  --slate-sage:    #3D4A48;
  --stone-sage:    #727C74;
  --prayer-ivory:  #FAFBF5;
  --rice-paper:    #F1F0E7;
  --sand:          #F0EEE0;
  --khaki-sage:    #CFCBAF;
  --lichen:        #A9A270;
  --monastery-red: #9E2E2E;

  --font-display: "Playfair Display", Georgia, serif;
  --font-body:    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --track-eyebrow: 0.22em;
  --track-nav:     0.16em;

  --s-1: 8px;   --s-2: 16px;  --s-3: 24px;  --s-4: 40px;
  --s-5: 56px;  --s-6: 72px;  --s-7: 104px; --s-8: 152px;

  --w-read: 720px;
  --w-page: 1280px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  0.9s;

  --nav-h: 88px;
}

/* --- Reset -------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--prayer-ivory);
  color: var(--slate-sage);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
img { height: auto; }

/* --- Type --------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 300;
  margin: 0;
}

h1 { font-size: clamp(34px, 5.2vw, 58px); line-height: 1.1;  letter-spacing: -0.015em; }
h2 { font-size: clamp(28px, 3.8vw, 42px); line-height: 1.15; letter-spacing: -0.01em; font-weight: 400; }
h3 { font-size: clamp(21px, 2vw, 26px);   line-height: 1.3;  font-weight: 400; }
h4 { font-size: 19px; line-height: 1.4; font-weight: 400; }

p { margin: 0 0 20px; }
p:last-child { margin-bottom: 0; }

.display {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.4vw, 76px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}

.lede {
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 300;
  line-height: 1.6;
}

.small { font-size: 14px; letter-spacing: 0.02em; }

/* The wide-tracked uppercase label. This single detail carries most of the
   luxury signal on all three reference sites. */
.eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--stone-sage);
  margin: 0 0 var(--s-3);
}
.eyebrow--light { color: var(--khaki-sage); }

em, .italic { font-style: italic; }

a { color: inherit; }

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

.wrap  { width: 100%; max-width: var(--w-page); margin: 0 auto; padding: 0 var(--s-4); }
.read  { width: 100%; max-width: var(--w-read); margin: 0 auto; padding: 0 var(--s-4); }

section { padding: var(--s-6) 0; }
@media (min-width: 900px) { section { padding: var(--s-7) 0; } }

.band-ivory { background: var(--prayer-ivory); }
.band-paper { background: var(--rice-paper); }
.band-sand  { background: var(--sand); }
.band-dark  { background: var(--dzong-black); color: var(--khaki-sage); }
.band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4 { color: var(--prayer-ivory); }

.centre { text-align: center; }

/* A hairline rule, as used for every divider on Rosewood. */
.rule { height: 1px; background: var(--khaki-sage); border: 0; margin: 0; }
.band-dark .rule { background: rgba(207, 203, 175, 0.25); }

/* --- Buttons and links -------------------------------------------------- */

/* Square, small, wide-tracked. No reference site uses a rounded pill. */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  text-decoration: none;
  padding: 17px 38px;
  border: 1px solid transparent;
  background: var(--dzong-black);
  color: var(--prayer-ivory);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--monastery-red); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--prayer-ivory); }

.band-dark .btn-ghost { color: var(--prayer-ivory); border-color: rgba(250,251,245,0.5); }
.band-dark .btn-ghost:hover { background: var(--prayer-ivory); color: var(--dzong-black); }

/* The house link: uppercase, tracked, thin rule beneath. */
.tlink {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--khaki-sage);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tlink:hover { color: var(--monastery-red); border-color: var(--monastery-red); }
.band-dark .tlink { color: var(--prayer-ivory); border-color: rgba(207,203,175,0.4); }
.band-dark .tlink:hover { color: var(--khaki-sage); border-color: var(--khaki-sage); }

.actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }

/* --- Header ------------------------------------------------------------- */

/* Transparent over the hero, solid on scroll — the Rosewood behaviour. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  /* Two stacked rows, so the header sizes itself rather than being pinned to a
     single height. The wordmark row hides on scroll, which is what the
     reference does to reclaim the space. */
  display: block;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: var(--prayer-ivory);
  border-bottom-color: var(--khaki-sage);
}
.site-header .nav-row { height: var(--nav-h); }
.site-header.is-stuck .nav-row { height: 68px; }
/* On scroll the wordmark row collapses away and the navigation carries the name */
.site-header.is-stuck .topbar {
  height: 0; overflow: hidden; border-bottom-color: transparent;
}

.nav-row {
  width: 100%;
  max-width: var(--w-page);
  margin: 0 auto;
  padding: 0 var(--s-4);
  transition: height var(--dur) var(--ease);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand .mark { width: 34px; height: 34px; flex: none; }
.brand-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.05;
  color: var(--prayer-ivory);
  transition: color var(--dur) var(--ease);
}
.brand-name small {
  display: block;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--khaki-sage);
  margin-top: 3px;
}
.is-stuck .brand-name { color: var(--ink); }
.is-stuck .brand-name small { color: var(--stone-sage); }
.is-stuck .brand .mark .mark-fg { fill: var(--prayer-ivory); }

.nav-links { display: none; gap: 34px; align-items: center; }
@media (min-width: 1040px) { .nav-links { display: flex; } }

.nav-links a {
  font-size: 12px;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--prayer-ivory);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.is-stuck .nav-links a { color: var(--slate-sage); }
.nav-links a:hover,
.nav-links a[aria-current="page"] { border-bottom-color: var(--monastery-red); }
.is-stuck .nav-links a:hover { color: var(--monastery-red); }

.nav-right { display: flex; align-items: center; gap: var(--s-3); }

.nav-phone {
  display: none;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--prayer-ivory);
}
.is-stuck .nav-phone { color: var(--slate-sage); }
@media (min-width: 1240px) { .nav-phone { display: inline-block; } }

.nav-cta {
  display: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 26px;
  border: 1px solid rgba(250,251,245,0.55);
  color: var(--prayer-ivory);
  transition: all var(--dur) var(--ease);
}
.is-stuck .nav-cta { border-color: var(--ink); color: var(--ink); }
.nav-cta:hover { background: var(--monastery-red); border-color: var(--monastery-red); color: var(--prayer-ivory); }
@media (min-width: 700px) { .nav-cta { display: inline-block; } }

/* Tap-to-call, always present on mobile */
.nav-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  color: var(--prayer-ivory);
}
.is-stuck .nav-call { color: var(--ink); }
@media (min-width: 1240px) { .nav-call { display: none; } }

.nav-toggle {
  width: 40px; height: 40px;
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 0;
}
@media (min-width: 1040px) { .nav-toggle { display: none; } }
.nav-toggle span {
  display: block; height: 1px; width: 24px;
  background: var(--prayer-ivory);
  transition: background var(--dur) var(--ease), transform 0.4s var(--ease), opacity 0.3s;
}
.is-stuck .nav-toggle span { background: var(--ink); }

/* Full-screen menu — what all three references use on mobile */
.nav-panel {
  position: fixed; inset: 0; z-index: 70;
  background: var(--dzong-black);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--s-6) var(--s-4);
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}
.nav-panel.is-open { opacity: 1; visibility: visible; }
.nav-panel a {
  font-family: var(--font-display);
  font-size: clamp(28px, 7vw, 44px);
  font-weight: 300;
  color: var(--prayer-ivory);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid rgba(207,203,175,0.15);
}
.nav-panel a:last-of-type { border-bottom: 0; }
.nav-panel .panel-foot {
  margin-top: var(--s-5);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--khaki-sage);
}
.nav-close {
  position: absolute; top: 26px; right: var(--s-4);
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  color: var(--prayer-ivory); font-size: 28px; line-height: 1;
  font-family: var(--font-body); font-weight: 300;
}

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

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: var(--s-8) 0 var(--s-6);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,21,20,0.55) 0%, rgba(6,21,20,0.25) 40%, rgba(6,21,20,0.82) 100%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero .display, .hero .lede { color: var(--prayer-ivory); }
/* Over a photograph a hairline border disappears. The hero's ghost button
   gets a brighter edge and a faint backdrop so it stays legible on any image. */
.hero .btn-ghost {
  color: var(--prayer-ivory);
  border-color: rgba(250,251,245,0.85);
  background: rgba(6,21,20,0.28);
  backdrop-filter: blur(2px);
}
.hero .btn-ghost:hover { background: var(--prayer-ivory); color: var(--dzong-black); }
.hero .display { max-width: 15ch; }
.hero .lede { max-width: 48ch; margin-top: var(--s-4); color: rgba(250,251,245,0.86); }

.hero-meta {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(207,203,175,0.3);
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  font-size: 12px; letter-spacing: var(--track-nav); text-transform: uppercase;
  color: var(--khaki-sage);
}

/* Inner pages get a shorter hero */
.hero--page { min-height: 70vh; }
/* Inner pages use busier photographs — dzong facades, crowds — so they need a
   heavier scrim than the homepage to keep the headline readable. */
.hero--page .hero-media::after {
  background: linear-gradient(180deg, rgba(6,21,20,0.62) 0%, rgba(6,21,20,0.5) 45%, rgba(6,21,20,0.8) 100%);
}

/* --- Trust strip -------------------------------------------------------- */

.trust {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--khaki-sage);
  border-bottom: 1px solid var(--khaki-sage);
  padding: var(--s-5) 0;
}
@media (min-width: 900px) { .trust { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); } }
.trust-item .n {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 300;
  color: var(--ink);
  line-height: 1;
  display: block;
}
.trust-item .t {
  display: block; margin-top: 12px;
  font-size: 11px; letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--stone-sage);
}

/* --- Split section ------------------------------------------------------ */

.split { display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
  .split--reverse .split-media { order: 2; }
}
.split-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.split-body { max-width: 46ch; }

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

.cards { display: grid; gap: var(--s-4); }
@media (min-width: 760px)  { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

.card { background: transparent; text-decoration: none; display: block; }
.card-media { overflow: hidden; margin-bottom: var(--s-3); }
.card-media img {
  width: 100%; aspect-ratio: 3/2; object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.card:hover .card-media img { transform: scale(1.05); }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 15px; color: var(--stone-sage); margin-bottom: var(--s-3); }
.card .meta {
  font-size: 11px; letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--lichen); margin-bottom: 10px; display: block;
}

/* --- Lists -------------------------------------------------------------- */

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  padding: 14px 0 14px 30px;
  border-bottom: 1px solid var(--khaki-sage);
  position: relative;
  font-size: 16px;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 23px;
  width: 14px; height: 1px; background: var(--monastery-red);
}
.band-dark .ticks li { border-bottom-color: rgba(207,203,175,0.2); }
.band-dark .ticks li::before { background: var(--khaki-sage); }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); } }
.steps li { counter-increment: step; padding-top: var(--s-3); border-top: 1px solid rgba(207,203,175,0.3); }
.steps li::before {
  content: "0" counter(step);
  display: block;
  font-family: var(--font-display);
  font-size: 30px; font-weight: 300;
  color: var(--khaki-sage);
  margin-bottom: 12px;
}
.steps h3 { color: var(--prayer-ivory); margin-bottom: 8px; }
.steps p { font-size: 15px; color: rgba(207,203,175,0.85); }

/* Pickup points, set as a tracked inline list */
.chips { display: flex; flex-wrap: wrap; gap: 10px 0; list-style: none; margin: 0; padding: 0; }
.chips li {
  font-size: 12px; letter-spacing: var(--track-nav); text-transform: uppercase;
  color: var(--slate-sage);
  padding: 0 18px; border-right: 1px solid var(--khaki-sage);
}
.chips li:first-child { padding-left: 0; }
.chips li:last-child { border-right: 0; }

/* --- Itinerary ---------------------------------------------------------- */

.days { list-style: none; margin: 0; padding: 0; }
.day { border-top: 1px solid var(--khaki-sage); padding: var(--s-4) 0; }
.day:last-child { border-bottom: 1px solid var(--khaki-sage); }
.day .d {
  font-size: 11px; letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--monastery-red); display: block; margin-bottom: 10px;
}
.day h3 { margin-bottom: 6px; }
.day .drive { font-size: 13px; color: var(--stone-sage); font-style: italic; margin-bottom: var(--s-2); }
.day p { font-size: 16px; }
.day .meals {
  margin-top: var(--s-2); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--stone-sage);
}

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

.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th, .tbl td { text-align: left; padding: 15px 14px 15px 0; border-bottom: 1px solid var(--khaki-sage); vertical-align: top; }
.tbl th {
  font-weight: 500; font-size: 11px; letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--stone-sage);
}
.tbl-scroll { overflow-x: auto; }

/* --- FAQ ---------------------------------------------------------------- */

.faq { border-top: 1px solid var(--khaki-sage); }
.faq details { border-bottom: 1px solid var(--khaki-sage); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: var(--s-3) 40px var(--s-3) 0;
  font-family: var(--font-display); font-size: 20px; font-weight: 400; color: var(--ink);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-body); font-size: 20px; font-weight: 300; color: var(--lichen);
  transition: transform 0.4s var(--ease);
}
.faq details[open] summary::after { content: "\2212"; }
.faq .a { padding: 0 0 var(--s-4); max-width: 62ch; font-size: 16px; }

/* --- Testimonials ------------------------------------------------------- */

.quote { max-width: 34ch; }
.quote p {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 25px);
  font-weight: 300; font-style: italic;
  line-height: 1.5; color: var(--ink);
}
.quote .who {
  display: block; margin-top: var(--s-3);
  font-size: 11px; letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--stone-sage);
  font-style: normal; font-family: var(--font-body);
}

/* --- Placeholders ------------------------------------------------------- */

/* Visibly empty by design. Nothing invented ships by accident. */
.ph {
  background: var(--sand);
  border: 1px dashed var(--khaki-sage);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: var(--s-3);
  color: var(--stone-sage);
  font-size: 11px; letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  min-height: 200px;
}
.ph--portrait { aspect-ratio: 4/5; }
.ph--wide     { aspect-ratio: 3/2; }
.ph--avatar   { width: 64px; height: 64px; min-height: 0; border-radius: 50%; font-size: 9px; }
.band-dark .ph { background: rgba(250,251,245,0.04); border-color: rgba(207,203,175,0.3); color: var(--khaki-sage); }

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

.form { display: grid; gap: var(--s-3); max-width: 520px; }
.field label {
  display: block; margin-bottom: 8px;
  font-size: 11px; letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--stone-sage);
}
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 0;
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--khaki-sage);
  border-radius: 0;
  transition: border-color var(--dur) var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-bottom-color: var(--monastery-red);
}

/* --- Contact ------------------------------------------------------------ */

.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { padding: var(--s-3) 0; border-bottom: 1px solid var(--khaki-sage); }
.contact-list .k {
  display: block; font-size: 11px; letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--stone-sage); margin-bottom: 6px;
}
.contact-list a { color: var(--ink); text-decoration: none; font-size: 19px; font-family: var(--font-display); }
.contact-list a:hover { color: var(--monastery-red); }
.band-dark .contact-list li { border-bottom-color: rgba(207,203,175,0.2); }
.band-dark .contact-list a { color: var(--prayer-ivory); }

/* --- Footer — the Four Seasons structure -------------------------------- */

.site-footer { background: var(--night-valley); color: var(--khaki-sage); padding: var(--s-7) 0 var(--s-5); }
.footer-top { text-align: center; margin-bottom: var(--s-7); }
.footer-top .mark { width: 46px; height: 46px; margin: 0 auto var(--s-3); }
.footer-top .name {
  font-family: var(--font-display); font-size: 27px; font-weight: 400;
  color: var(--prayer-ivory); letter-spacing: 0.02em;
}
.footer-top .tag {
  margin-top: 10px;
  font-size: 11px; letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--stone-sage);
}

.footer-cols { display: grid; gap: var(--s-5); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .footer-cols { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); } }

/* Italic serif column headings — the distinctive Four Seasons detail */
.footer-cols h5 {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 20px; color: var(--prayer-ivory);
  margin: 0 0 var(--s-3);
}
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.footer-cols a {
  font-size: 11px; letter-spacing: var(--track-nav); text-transform: uppercase;
  text-decoration: none; color: var(--khaki-sage);
  transition: color var(--dur) var(--ease);
}
.footer-cols a:hover { color: var(--prayer-ivory); }

.footer-social { display: flex; gap: var(--s-3); align-items: center; margin-top: var(--s-6); }
.footer-social a { color: var(--khaki-sage); transition: color var(--dur) var(--ease); }
.footer-social a:hover { color: var(--prayer-ivory); }
.footer-social svg { width: 19px; height: 19px; }
.footer-social .pending { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone-sage); }

.footer-rule { height: 1px; background: rgba(207,203,175,0.2); margin: var(--s-3) 0 var(--s-4); }

.footer-legal {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
  font-size: 11px; letter-spacing: 0.06em; color: var(--stone-sage);
}
.footer-legal a { color: var(--stone-sage); text-decoration: none; }
.footer-legal a:hover { color: var(--khaki-sage); }
.footer-legal .copy { width: 100%; margin-top: var(--s-2); }

/* --- Accessibility ------------------------------------------------------ */

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--dzong-black); color: var(--prayer-ivory);
  padding: 12px 20px; font-size: 13px;
}
.skip-link:focus { left: 12px; top: 12px; }

:focus-visible { outline: 2px solid var(--monastery-red); outline-offset: 3px; }

/* ==========================================================================
   MOTION
   Slow, no bounce, no sideways slides. Everything is disabled for visitors
   whose device asks for reduced motion. The hidden states are scoped to
   html.js so a failed script can never leave the page blank.
   ========================================================================== */

html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change: opacity, transform;
}
html.js .reveal.is-visible { opacity: 1; transform: none; }

html.js .stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
html.js .stagger.is-visible > * { opacity: 1; transform: none; }
html.js .stagger.is-visible > *:nth-child(1) { transition-delay: 0s; }
html.js .stagger.is-visible > *:nth-child(2) { transition-delay: 0.1s; }
html.js .stagger.is-visible > *:nth-child(3) { transition-delay: 0.2s; }
html.js .stagger.is-visible > *:nth-child(4) { transition-delay: 0.3s; }

html.js .hero-in { opacity: 0; transform: translateY(20px); }
html.js .is-loaded .hero-in {
  opacity: 1; transform: none;
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
html.js .is-loaded .hero-in:nth-child(1) { transition-delay: 0.1s; }
html.js .is-loaded .hero-in:nth-child(2) { transition-delay: 0.25s; }
html.js .is-loaded .hero-in:nth-child(3) { transition-delay: 0.4s; }
html.js .is-loaded .hero-in:nth-child(4) { transition-delay: 0.55s; }
html.js .is-loaded .hero-in:nth-child(5) { transition-delay: 0.7s; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal, html.js .stagger > *, html.js .hero-in {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .card:hover .card-media img { transform: none; }
  * { scroll-behavior: auto !important; }
}

/* On a narrow screen "Ayansh Holidays" wrapped onto two lines beside the mark,
   which read as a mistake rather than a lockup. Hold it on one line and let the
   type size come down instead. */
@media (max-width: 480px) {
  .brand-name { font-size: 17px; white-space: nowrap; }
  .brand-name small { font-size: 8px; letter-spacing: 0.16em; }
  .brand .mark { width: 28px; height: 28px; }
  .nav-row { gap: var(--s-2); padding: 0 var(--s-3); }
  .wrap, .read { padding: 0 var(--s-3); }
}

/* ==========================================================================
   ROSEWOOD HONG KONG SECTION TYPES
   Rebuilt 9 Aug 2026 after screenshotting rosewoodhotels.com/en/hong-kong
   section by section. Six repeating block types, in their rhythm:
     3-up bleed grid -> full-bleed feature + black bar -> text/cards split
     -> full-bleed feature + black bar -> text/cards split -> peek carousel
   ========================================================================== */

/* --- Two-tier header ---------------------------------------------------- */
/* Their top row is wordmark-centred with small links either side; the second
   row carries the navigation and one dark reserve button. */

.topbar {
  height: 74px;
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  overflow: hidden;
  transition: height var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.topbar-row {
  width: 100%; max-width: var(--w-page); margin: 0 auto; padding: 0 var(--s-4);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.topbar-side {
  font-size: 11px; letter-spacing: var(--track-nav); text-transform: uppercase;
  text-decoration: none; color: var(--prayer-ivory);
  border-bottom: 1px solid currentColor; padding-bottom: 3px; justify-self: start;
}
.topbar-side--right { justify-self: end; border-bottom: 0; }
.wordmark {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 400; letter-spacing: 0.16em;
  text-transform: uppercase; text-decoration: none;
  color: var(--prayer-ivory); white-space: nowrap;
}
.is-stuck .topbar { border-bottom-color: var(--khaki-sage); }
.is-stuck .topbar-side, .is-stuck .wordmark { color: var(--ink); }
@media (max-width: 900px) {
  .topbar { height: 58px; }
  .topbar-side { display: none; }
  .topbar-row { grid-template-columns: 1fr; justify-items: center; }
  .wordmark { font-size: 19px; letter-spacing: 0.14em; }
}

/* --- Full-width dark call-to-action bar --------------------------------- */
/* Their "RESERVE NOW" / "SHOP NOW" strip. Sits directly under a feature image
   with no gap, which is what makes it read as part of the picture. */

.cta-bar {
  display: block; width: 100%;
  background: var(--night-valley); color: var(--prayer-ivory);
  text-align: center; text-decoration: none;
  padding: 26px 20px;
  font-size: 12px; font-weight: 500;
  letter-spacing: var(--track-nav); text-transform: uppercase;
  transition: background var(--dur) var(--ease);
}
.cta-bar:hover { background: var(--monastery-red); }

/* --- Feature: full-bleed image with centred text ------------------------ */

.feature { position: relative; padding: 0; }
.feature-media { position: relative; height: 82vh; min-height: 520px; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.feature-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,21,20,0.35), rgba(6,21,20,0.55));
}
.feature-body {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--s-4);
}
.feature-body h2 { color: var(--prayer-ivory); max-width: 18ch; }
.feature-body p {
  color: rgba(250,251,245,0.9); max-width: 46ch; margin-top: var(--s-3);
  font-size: clamp(16px, 1.4vw, 19px); font-weight: 300;
}

/* --- Three-up bleeding grid --------------------------------------------- */
/* Tall portrait images running edge to edge, as under their "What's on". */

.bleed3 {
  display: grid; gap: var(--s-5);
  grid-template-columns: 1fr;
  margin-top: var(--s-5);
}
@media (min-width: 800px) {
  .bleed3 { grid-template-columns: repeat(3, 1fr); gap: 80px; }
}
.bleed3 figure { margin: 0; position: relative; overflow: hidden; }
.bleed3 img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  transition: transform 1.6s var(--ease);
}
.bleed3 a:hover img { transform: scale(1.04); }
/* Images bleed to the screen edge; the captions do not. On the reference the
   first block's text is inset from the edge while its image runs flush, and
   text touching the edge of a phone screen reads as broken. */
.bleed3 figcaption { padding: var(--s-4) 0 0; }
.bleed3 figure:first-child figcaption { padding-left: var(--s-4); }
.bleed3 figure:last-child figcaption  { padding-right: var(--s-4); }
@media (max-width: 799px) {
  .bleed3 figcaption { padding-left: var(--s-4); padding-right: var(--s-4); }
}
.bleed3 .cap-eyebrow {
  font-size: 11px; letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--lichen); display: block; margin-bottom: 8px;
}
.bleed3 h3 { margin-bottom: 6px; }
.bleed3 p { font-size: 16px; color: var(--slate-sage); max-width: 42ch; }
.bleed3 .card-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-3); }
.bleed3 .btn { padding: 14px 30px; }
.bleed3 a { text-decoration: none; display: block; }

/* --- Text column beside three cards ------------------------------------- */
/* Their Dining and Experiences blocks: a quarter-width text column on the
   left, three cards filling the rest. */

.textcards { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 960px) {
  .textcards { grid-template-columns: 1fr 2.6fr; gap: var(--s-6); }
}
.textcards-intro { max-width: 32ch; }
.textcards-intro p { margin-top: var(--s-3); font-size: 16px; }
.textcards-grid { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 620px) { .textcards-grid { grid-template-columns: repeat(3, 1fr); } }
.textcards-grid .card-media img { aspect-ratio: 4/5; }
.textcards-grid h3 { font-size: 21px; }
.textcards-grid .sub {
  font-style: italic; font-family: var(--font-display);
  color: var(--stone-sage); font-size: 15px;
}

/* The small "2 — 3" counter that sits above their carousels. */
.counter {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 12px; letter-spacing: 0.1em; color: var(--stone-sage);
  margin-bottom: var(--s-5);
}
.counter span:nth-child(2) { width: 26px; height: 1px; background: var(--khaki-sage); }

/* --- Peek carousel ------------------------------------------------------ */
/* Centre image large, neighbours cropped off both edges. Scroll-snap does the
   work, so it needs no JavaScript and still drags on a phone. */

/* Sized in viewport units, not percentages: the side padding shrinks a flex
   container's content box, so a percentage basis would be measured against the
   remaining strip rather than the screen. */
.peek {
  display: flex; gap: 6vw;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 0 11vw var(--s-3);
}
.peek::-webkit-scrollbar { display: none; }
.peek figure {
  margin: 0; flex: 0 0 78vw; scroll-snap-align: center;
}
@media (min-width: 900px) {
  /* Measured from the reference at 1440px: 450px slides, 291px gutters. As
     fractions of the viewport that is 31.25vw and 20.2vw, which leaves roughly a
     200px sliver of each neighbour showing at the edges. */
  .peek { gap: 20.2vw; padding: 0 34.4vw var(--s-3); }
  .peek figure { flex: 0 0 31.25vw; }
}
.peek img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.peek figcaption { margin-top: var(--s-4); }
.peek .cap-eyebrow {
  display: block; margin-bottom: var(--s-2);
  font-size: 11px; letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--ink);
}
.peek figcaption p { font-size: 16px; color: var(--slate-sage); margin-bottom: var(--s-3); }
.peek figcaption .tlink { font-size: 11px; }
.peek-hint {
  text-align: center; margin-top: var(--s-2);
  font-size: 11px; letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--lichen);
}

/* --- Newsletter-style bar ----------------------------------------------- */
/* Their "Stay connected" strip: headline left, dark button right, hairlines
   above and below. */

.strip {
  border-top: 1px solid var(--khaki-sage);
  border-bottom: 1px solid var(--khaki-sage);
  padding: var(--s-5) 0;
  display: grid; gap: var(--s-4); align-items: center;
}
@media (min-width: 800px) { .strip { grid-template-columns: 1fr auto; } }
.strip h2 { max-width: 20ch; }

/* --- Footer: social icons and the credit line --------------------------- */

.social-row { display: flex; gap: 18px; margin-top: var(--s-3); }
.social-row a {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(207,203,175,0.35);
  color: var(--khaki-sage);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.social-row a:hover {
  color: var(--night-valley); background: var(--khaki-sage); border-color: var(--khaki-sage);
}
.social-row svg { width: 18px; height: 18px; }

.footer-credit {
  font-size: 12px; letter-spacing: 0.04em; color: var(--stone-sage);
  padding-bottom: var(--s-2);
}
.footer-credit a {
  font-size: 15px; font-weight: 500; letter-spacing: 0.06em;
  color: var(--prayer-ivory); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.footer-credit a:hover { border-bottom-color: var(--prayer-ivory); }

/* The legal row is now a single line above the credit, so it no longer needs
   the copyright to wrap onto its own row. */
.footer-legal .copy { width: auto; margin-top: 0; }

/* A solid header action, matching the dark RESERVE button on the reference. */
.nav-cta--solid {
  background: var(--dzong-black);
  border-color: var(--dzong-black);
  color: var(--prayer-ivory);
}
.is-stuck .nav-cta--solid { background: var(--dzong-black); border-color: var(--dzong-black); color: var(--prayer-ivory); }
.nav-cta--solid:hover { background: var(--monastery-red); border-color: var(--monastery-red); }

/* --- Carousel controls -------------------------------------------------- */
/* Circular arrows, as on the reference hero. The slides are also clickable:
   tapping a neighbour brings it to the centre, which is how the gallery reads
   to anyone who does not think to drag. */

.peek-nav {
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  margin-top: var(--s-4);
}
.peek-btn {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--khaki-sage);
  background: transparent; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.peek-btn:hover { background: var(--dzong-black); border-color: var(--dzong-black); color: var(--prayer-ivory); }
.peek-btn:disabled { opacity: 0.3; cursor: default; }
.peek-btn:disabled:hover { background: transparent; color: var(--ink); border-color: var(--khaki-sage); }
.peek-btn svg { width: 20px; height: 20px; }

.peek-count {
  font-size: 12px; letter-spacing: 0.12em; color: var(--stone-sage);
  min-width: 58px; text-align: center;
}
.peek-count b { font-weight: 500; color: var(--ink); }

/* Neighbouring slides dim slightly and lift on hover, so it is obvious they
   can be brought forward. */
.peek figure { cursor: pointer; transition: opacity var(--dur) var(--ease); }
.peek figure img { transition: transform 1.2s var(--ease); }
.peek figure:hover img { transform: scale(1.03); }
.peek figure.is-side { opacity: 0.72; }
.peek figure.is-side:hover { opacity: 1; }

/* --- Collapsing space between same-coloured sections -------------------- */
/* Two neighbouring sections on the same background each contribute their own
   140px of padding, so 280px of empty page opens up with no colour change to
   explain it. Where the band colour does change, the full gap is doing useful
   work and stays. */

.band-ivory + .band-ivory,
.band-paper + .band-paper,
.band-sand  + .band-sand,
.band-dark  + .band-dark { padding-top: 0; }

/* A hairline-bordered strip already reads as a divider, so the section after it
   needs less air still. */
section:has(.strip) { padding-bottom: var(--s-5); }
section:has(.strip) + section { padding-top: var(--s-5); }

/* The trust strip has its own rules top and bottom for the same reason. */
section:has(.trust) { padding-top: var(--s-5); padding-bottom: var(--s-5); }

/* --- The chorten mark --------------------------------------------------- */
/* A fixed-colour PNG rather than an SVG that inherits, so the header carries
   both versions and shows whichever suits the background it is currently on. */

.brand .mark { display: block; width: auto; height: 38px; position: relative; flex: none; }
.brand .mark img {
  height: 100%; width: auto; display: block;
  transition: opacity var(--dur) var(--ease);
}
.brand .mark .mark-d { position: absolute; inset: 0; opacity: 0; }
.is-stuck .brand .mark .mark-w { opacity: 0; }
.is-stuck .brand .mark .mark-d { opacity: 1; }

.footer-mark { height: 74px; width: auto; margin: 0 auto 18px; display: block; }

@media (max-width: 480px) {
  .brand .mark { height: 30px; }
  .footer-mark { height: 58px; }
}

/* --- Guest photo grid ---------------------------------------------------- */
/* Real traveller photographs, mixed portrait and landscape. The column counts
   below are chosen so the five pictures fill every cell exactly at each
   breakpoint - the widest photograph takes two columns, the rest take one:
     mobile   2 cols  = 2 + 1 + 1 + 1 + 1  (three rows, no gap)
     tablet   3 cols  = 2 + 1 / 1 + 1 + 1  (two rows, no gap)
     desktop  6 cols  = 2 + 1 + 1 + 1 + 1  (one row, no gap) */

.guests {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-1);
}
.guests figure:first-child { grid-column: span 2; }

@media (min-width: 700px) {
  .guests { grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
}
@media (min-width: 1000px) {
  .guests { grid-template-columns: repeat(6, 1fr); gap: var(--s-2); }
}

.guests figure {
  margin: 0;
  overflow: hidden;
  background: var(--sand);
}

.guests img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
@media (min-width: 700px)  { .guests img { height: 300px; } }
@media (min-width: 1000px) { .guests img { height: 340px; } }

.guests figure:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .guests figure:hover img { transform: none; }
}

/* --- Promises grid ------------------------------------------------------- */
/* The five pre-booking worries, answered. Two columns on desktop; the last
   item spans both so the row never ends with a hole. */

.promises {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 800px) {
  .promises { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-4); }
  .promises > *:last-child { grid-column: 1 / -1; max-width: 62ch; }
}

.promises h3 { margin: 0 0 var(--s-2); }
.promises p  { margin: 0; }
.promises > * { border-top: 1px solid var(--khaki-sage); padding-top: var(--s-3); }

/* --- Who answers the phone ----------------------------------------------- */
/* A small portrait beside the contact details. Kept modest: the phone number
   is still the thing being emphasised, the face is reassurance beside it. */

.who-answers {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--khaki-sage);
}
.who-answers img {
  width: 88px;
  height: 88px;
  flex: none;
  object-fit: cover;
  object-position: 50% 30%;   /* keep the face centred on a landscape crop */
  border-radius: 50%;
}
.who-answers .eyebrow { margin-bottom: 6px; }
.who-answers p { margin: 0; font-size: 15px; line-height: 1.6; }

/* --- Embedded map ------------------------------------------------------- */
/* A plain Google Maps iframe - no API key, nothing to bill. Wrapped so it keeps
   its shape on a phone instead of collapsing to nothing. */
.map-embed {
  position: relative;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--khaki-sage);
  background: var(--sand);
  overflow: hidden;
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 600px) { .map-embed { aspect-ratio: 4 / 3; } }

/* --- Location map ------------------------------------------------------- */
/* Full-bleed, with the details card sitting over it. The live Google embed is
   1-2MB and runs their scripts on every visit, so the section shows a still
   image and only swaps in the real map when someone asks for it. */

.map-band { padding: 0; position: relative; }
.map-shell {
  position: relative;
  height: clamp(380px, 58vh, 620px);
  overflow: hidden;
  background: var(--sand);
}
.map-shell img,
.map-shell iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; object-fit: cover; display: block;
}
.map-shell::after {          /* keeps the card legible over a busy map */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6,21,20,0.42) 0%, rgba(6,21,20,0.10) 46%, rgba(6,21,20,0) 70%);
  pointer-events: none;
}
.map-shell.is-live::after { display: none; }

.map-card {
  position: absolute; z-index: 2;
  top: var(--s-4); left: var(--s-4);
  max-width: 340px;
  background: var(--prayer-ivory);
  padding: var(--s-4);
  border: 1px solid var(--khaki-sage);
}
.map-card .eyebrow { margin-bottom: 10px; }
.map-card h3 { margin-bottom: 10px; }
.map-card p { font-size: 15px; color: var(--slate-sage); margin-bottom: var(--s-3); }
.map-card .btn { padding: 14px 26px; }
.map-card .btn + .btn { margin-top: 10px; }

/* The button that swaps the still for the interactive map */
.map-load {
  position: absolute; z-index: 2; right: var(--s-4); bottom: var(--s-4);
  background: var(--prayer-ivory); color: var(--ink);
  border: 1px solid var(--khaki-sage);
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: var(--track-nav); text-transform: uppercase;
  padding: 13px 22px; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.map-load:hover { background: var(--dzong-black); color: var(--prayer-ivory); border-color: var(--dzong-black); }

@media (max-width: 680px) {
  .map-shell { height: 460px; }
  .map-card {
    position: static; max-width: none; margin: 0;
    border-left: 0; border-right: 0;
  }
  .map-band .map-shell { height: 300px; }
  .map-load { right: var(--s-3); bottom: var(--s-3); }
}

/* --- Spam trap ---------------------------------------------------------- */
/* A field only a bot will fill in. It must never be seen or reached by a real
   visitor, so it is taken out of the layout and hidden from screen readers.
   Positioned off-screen rather than display:none, because some bots skip
   fields that are set to display:none. */
.form .hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
  margin: 0; padding: 0;
}