/* ============================================================
   The Hans Hotels (brand) — inner-page components
   Extends css/cappa.css (loaded first). Uses the same brand
   tokens: Heritage Brown #36281F · Warm Taupe Gold #B8A58B ·
   Champagne #D8C9B1 · Ivory #F8F6F2 · Stone #E5E1DB.
   Fonts: Cormorant Garamond (headings) · Montserrat (body).
   ============================================================ */

/* ── Page hero / banner ── */
.page-hero { position: relative; min-height: 62vh; display: flex; align-items: flex-end; overflow: hidden; }
.page-hero-bg { position: absolute; inset: 0; z-index: 0; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(42,32,24,.30) 0%, rgba(42,32,24,.42) 45%, rgba(42,32,24,.78) 100%); }
.page-hero-inner { position: relative; z-index: 2; width: 100%; color: #fff; padding-bottom: clamp(40px, 6vw, 74px); padding-top: 110px; }
.page-hero .eyebrow { color: var(--gold); letter-spacing: 4px; }
.page-hero h1 { color: #fff; font-weight: 400; letter-spacing: clamp(2px, .8vw, 8px); text-transform: uppercase; font-size: clamp(2.4rem, 5.2vw, 4.4rem); margin: 4px 0 0; max-width: 20ch; }
.page-hero .ph-sub { color: rgba(255,255,255,.9); max-width: 56ch; margin: 18px 0 0; font-size: 1.05rem; }

/* ── Breadcrumb ── */
.breadcrumb { font-family: var(--cond); font-size: .74rem; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.8); margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.breadcrumb a { color: rgba(255,255,255,.8); transition: color var(--t); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb .sep { color: rgba(255,255,255,.45); }
.breadcrumb [aria-current="page"] { color: var(--gold); }

/* ── Generic intro / prose ── */
.lead { font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.5; color: var(--ink); }
.prose p { margin-bottom: 1.2rem; }
.prose h3 { margin: 34px 0 var(--gap-h-md); }
/* A leading h3 must not leak its section spacing out of .prose — margin collapsing would push
   the whole block 34px off the heading above it instead of the standard h2 gap. */
.prose > h3:first-child { margin-top: 0; }
.prose ul.ticks { margin: 6px 0 18px; }
.prose ul.ticks li { display: flex; gap: 12px; align-items: flex-start; padding: 7px 0; font-size: .98rem; }
.prose ul.ticks li i { color: var(--gold); margin-top: 5px; font-size: .9rem; flex: none; width: 20px; text-align: center; }
.narrow { max-width: 820px; }

/* ── Two-column split (text + media) ── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 84px); align-items: center; }
.split.reverse .split-media { order: 2; }
.split-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; box-shadow: var(--shadow-sm); }
.split-media.wide img { aspect-ratio: 4/3; }
@media (max-width: 860px) { .split, .split.reverse { grid-template-columns: 1fr; } .split.reverse .split-media { order: 0; } }

/* ── Values / pillars grid ── */
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pillar { background: #fff; border: 1px solid var(--line); padding: 34px 30px; transition: var(--t); }
.pillar:hover { box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.pillar i { font-size: 1.9rem; color: var(--gold); margin-bottom: 16px; display: block; }
.pillar h3 { font-size: 1.45rem; margin-bottom: var(--gap-h-sm); }
.pillar p { font-size: .92rem; margin: 0; }
@media (max-width: 860px) { .pillar-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pillar-grid { grid-template-columns: 1fr; } }

/* ── Value chips ── */
.chip-row { display: flex; flex-wrap: wrap; gap: 12px; }
.chip { font-family: var(--cond); font-size: .82rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dark); background: var(--champagne); padding: 10px 20px; border-radius: 2px; }

/* ── Stat band (dark) ── */
.statband { background: var(--dark); color: #fff; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat .num { font-family: var(--serif); font-size: clamp(2.6rem, 5vw, 3.8rem); color: var(--gold); line-height: 1; }
.stat .lbl { font-family: var(--cond); font-size: .78rem; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.8); margin-top: 10px; }
@media (max-width: 700px) { .stat-grid { grid-template-columns: 1fr 1fr; gap: 34px 20px; } }

/* ── Destination / property cards ── */
.dest-grid { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 4vw, 56px); }
.dest { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.dest:nth-child(even) .dest-img { order: 2; }
.dest-img { position: relative; overflow: hidden; }
.dest-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; box-shadow: var(--shadow-sm); }
.dest-tag { position: absolute; top: 16px; left: 16px; background: rgba(54,40,31,.92); color: #fff; font-family: var(--cond); font-size: .68rem; letter-spacing: 1.5px; text-transform: uppercase; padding: 7px 14px; }
.dest-body h3 { font-size: 2rem; margin: 4px 0 var(--gap-h-md); }
.dest-body .dest-loc { font-family: var(--cond); font-size: .82rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-txt); }
.dest-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 16px 0 18px; }
.dest-meta span { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--body); }
.dest-meta i { color: var(--gold); font-size: .85rem; }
.dest-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
@media (max-width: 860px) { .dest, .dest:nth-child(even) .dest-img { grid-template-columns: 1fr; } .dest:nth-child(even) .dest-img { order: 0; } }

/* ── Offer cards (3-up) ── */
.offers-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.offercard { background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; }
.offercard img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.offercard .oc-body { padding: clamp(20px, 2.2vw, 26px) clamp(18px, 2vw, 24px) clamp(22px, 2.4vw, 28px); display: flex; flex-direction: column; flex: 1; }
.offercard .oc-kicker { font-family: var(--cond); font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-txt); margin-bottom: 6px; }
.offercard h3 { font-size: clamp(1.2rem, 1.7vw, 1.38rem); margin-bottom: var(--gap-h-sm); }
.offercard p { font-size: .88rem; line-height: 1.5; margin-bottom: 14px; }
/* Tick lists had no rule at all — 16px with an inline icon, so wrapped lines lost their
   indent and inflated every card. Compact + flex keeps the 3-up grid inside one viewport. */
.offercard ul.ticks { margin: 0 0 18px; }
.offercard ul.ticks li { display: flex; gap: 9px; align-items: flex-start; padding: 3px 0; font-size: .85rem; line-height: 1.45; }
.offercard ul.ticks li i { color: var(--gold); margin-top: 5px; font-size: .74rem; flex: none; width: 15px; text-align: center; }
.offercard .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 900px) { .offers-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .offers-3 { grid-template-columns: 1fr; } }

/* ── Venues (meetings & events) ── */
.venue-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.venue { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.venue img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.venue:hover img { transform: scale(1.06); }
.venue::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42,32,24,0) 40%, rgba(42,32,24,.85) 100%); }
.venue-body { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 28px; color: #fff; }
.venue-body h3 { color: #fff; margin: 0 0 var(--gap-h-md); }
.venue-body p { font-size: .88rem; color: rgba(255,255,255,.86); margin: 0; }
@media (max-width: 860px) { .venue-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .venue-grid { grid-template-columns: 1fr; } }

/* ── Event type list ── */
.evt-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); }
.evt { display: flex; gap: 18px; align-items: flex-start; padding: 26px 30px; border-bottom: 1px solid var(--line); }
.evt:nth-child(odd) { border-right: 1px solid var(--line); }
.evt i { color: var(--gold); font-size: 1.4rem; margin-top: 4px; flex: none; }
.evt h4 { font-size: 1.25rem; margin-bottom: var(--gap-h-sm); }
.evt p { font-size: .9rem; margin: 0; }
@media (max-width: 700px) { .evt-list { grid-template-columns: 1fr; } .evt:nth-child(odd) { border-right: none; } }

/* ── Contact ── */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 5vw, 70px); align-items: start; }
/* Contact column headings — Anya's scale, shared by every property site. The `.section` prefix
   is required to outrank the `.section h1` rule further down this file (same specificity would
   otherwise let it win on source order and snap the heading back to the display size).
   Both take the block gap, not the h1/h2 default, since each introduces a whole column. */
.section .contact-info h1 { font-size: clamp(1.6rem, 2.5vw, 2.05rem); line-height: 1.2; margin: 0 0 var(--gap-h-block); }
.section .contact-form h2 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); line-height: 1.2; margin: 0 0 var(--gap-h-block); }
.contact-info .ci-block { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-info .ci-block:first-of-type { padding-top: 0; }
.contact-info .ci-ico { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex: none; }
.contact-info h4 { font-size: 1.3rem; margin-bottom: var(--gap-h-sm); }
.contact-info p, .contact-info a { font-size: .96rem; color: var(--body); margin: 0; }
.contact-info a:hover { color: var(--gold-txt); }
.contact-form { background: #fff; border: 1px solid var(--line); padding: clamp(28px, 4vw, 44px); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; margin-bottom: 18px; }
.field label { font-family: var(--cond); font-size: .74rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-txt); margin-bottom: var(--gap-label); }
.field input, .field select, .field textarea { border: 1px solid var(--line); background: var(--bg); padding: 13px 15px; font-family: var(--sans); font-size: .95rem; color: var(--ink); width: 100%; }
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.map-embed { margin-top: clamp(40px, 5vw, 64px); border: 1px solid var(--line); overflow: hidden; line-height: 0; }
.map-embed iframe { width: 100%; height: 420px; border: 0; display: block; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } }

/* ── Careers ── */
.perk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.perk { text-align: center; padding: 30px 22px; border: 1px solid var(--line); background: #fff; }
.perk i { font-size: 1.8rem; color: var(--gold); margin-bottom: 14px; display: block; }
.perk h4 { font-size: 1.2rem; margin-bottom: var(--gap-h-sm); }
.perk p { font-size: .88rem; margin: 0; }
@media (max-width: 900px) { .perk-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .perk-grid { grid-template-columns: 1fr; } }
.dept-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dept { display: flex; align-items: center; gap: 14px; padding: 20px 24px; background: var(--bg-2); }
.dept i { color: var(--gold); font-size: 1.2rem; }
.dept h4 { font-size: 1.15rem; margin: 0; }
@media (max-width: 860px) { .dept-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .dept-grid { grid-template-columns: 1fr; } }

/* ── Blog ── */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.post { background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; transition: var(--t); }
.post:hover { box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.post-img { display: block; overflow: hidden; aspect-ratio: 16/10; }
.post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.post:hover .post-img img { transform: scale(1.05); }
.post-body { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.post-meta { font-family: var(--cond); font-size: .72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-txt); margin-bottom: 10px; }
.post-body h3 { font-size: 1.5rem; margin-bottom: var(--gap-h-md); line-height: 1.25; }
.post-body h3 a:hover { color: var(--gold-d); }
.post-body p { font-size: .92rem; margin-bottom: 16px; }
.post-link { margin-top: auto; font-family: var(--cond); font-size: .8rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-d); display: inline-flex; align-items: center; gap: 8px; }
.post-link i { transition: transform var(--t); }
.post-link:hover i { transform: translateX(5px); }
/* .pillar i (decorative card icon) must not leak onto the CTA arrow — it pushed it off-centre */
.pillar .post-link i { font-size: 1em; margin-bottom: 0; display: inline-block; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }

/* Blog filter chips */
.chip-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: clamp(34px, 4vw, 50px); }
.chip-nav button { font-family: var(--cond); font-size: .76rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dark); background: transparent; border: 1px solid var(--line-2); padding: 9px 20px; cursor: pointer; transition: var(--t); }
.chip-nav button:hover, .chip-nav button.active { background: var(--gold); color: var(--dark); border-color: var(--gold); }

/* Blog article body */
.article { max-width: 780px; margin-inline: auto; }
/* Title needs breathing room before the lead — the global * reset zeroes heading margins */
.article h1 { margin: 0 0 var(--gap-h-block); }
.article p { margin-bottom: 1.3rem; }
.article h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 40px 0 var(--gap-h-md); }
.article h3 { margin: 30px 0 var(--gap-h-md); }
.article blockquote { border-left: 3px solid var(--gold); padding: 6px 0 6px 26px; margin: 26px 0; font-family: var(--serif); font-size: 1.4rem; color: var(--ink); line-height: 1.5; }
.article ul.ticks li { display: flex; gap: 12px; align-items: flex-start; padding: 7px 0; }
.article ul.ticks li i { color: var(--gold); margin-top: 6px; font-size: .82rem; flex: none; }
.article-figure { margin: 30px 0; }
.article-figure img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.article-figure figcaption { font-size: .82rem; color: var(--body); margin-top: 10px; text-align: center; }
.article-back { margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--line); }

/* ── FAQ accordion ── */
.faq-list { max-width: 860px; margin-inline: auto; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 24px 46px 24px 0; position: relative;
  font-family: var(--serif); font-size: 1.3rem; color: var(--ink); line-height: 1.3; }
.faq-q::after { content: "\f067"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: 4px; top: 26px; font-size: .9rem; color: var(--gold); transition: transform var(--t); }
.faq-q[aria-expanded="true"]::after { content: "\f068"; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--t); }
.faq-a p { padding: 0 0 24px; margin: 0; font-size: .96rem; }

/* ── Dark CTA band ── */
.cta-band { background: linear-gradient(rgba(42,32,24,.86), rgba(42,32,24,.86)), url("https://assets.simplotel.com/simplotel/image/upload/f_auto,q_auto,w_1600/the-hans-hotels/Dlx_Suite_Room_1_0d199aa2.jpeg") center/cover; color: rgba(255,255,255,.86); text-align: center; }

/* ── Room detail rows (rooms page) ── */
.roomrow { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.roomrow + .roomrow { margin-top: clamp(48px, 7vw, 92px); }
.roomrow:nth-child(even) .roomrow-media { order: 2; }
.roomrow-media { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.roomrow-media img { width: 100%; height: 100%; object-fit: cover; box-shadow: var(--shadow-sm); }
.roomrow-media img:first-child { grid-row: 1 / span 2; aspect-ratio: 3/4; }
.roomrow-media img:not(:first-child) { aspect-ratio: 4/3; }
.room-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 18px 0 34px; }
.room-meta span { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--body); }
.room-meta i { color: var(--gold); font-size: .85rem; }
.roomrow-body .room-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 16px 0 18px; }
.roomrow-body .room-meta span { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--body); }
.roomrow-body .room-meta i { color: var(--gold); font-size: .85rem; }
.roomrow-body ul.ticks { display: grid; grid-template-columns: 1fr 1fr; margin: 6px 0 22px; }
.roomrow-body ul.ticks li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: .92rem; }
.roomrow-body ul.ticks li i { color: var(--gold); margin-top: 6px; font-size: .78rem; flex: none; }
@media (max-width: 860px) { .roomrow, .roomrow:nth-child(even) .roomrow-media { grid-template-columns: 1fr; } .roomrow:nth-child(even) .roomrow-media { order: 0; } .roomrow-body ul.ticks { grid-template-columns: 1fr; } }

/* Two-column tick list (room-detail amenities) */
.prose ul.ticks.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
@media (max-width: 560px) { .prose ul.ticks.two-col { grid-template-columns: 1fr; } }
.cta-band .eyebrow { color: var(--gold); }
.cta-band h2 { color: #fff; }
.cta-band p { max-width: 600px; margin: 0 auto 26px; }
.cta-band .btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── Section on stone bg helper ── */
.bg-stone { background: var(--bg-2); }
.form-status { font-size: .88rem; margin-top: 12px; min-height: 20px; }
/* ── Rooms summary cards (image-top card grid, "Know More") ── */
.roomsum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 34px); }
.roomsum-card { background: #fff; box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; transition: var(--t); }
.roomsum-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.roomsum-card > img { width: 100%; aspect-ratio: 16/11; object-fit: cover; display: block; }
.roomsum-body { padding: clamp(24px, 2.4vw, 34px); display: flex; flex-direction: column; flex: 1; }
.roomsum-body h3 { font-family: var(--serif); font-weight: 500; font-size: 1.7rem; line-height: 1.2; color: var(--ink); margin: 0 0 var(--gap-h-md); }
.roomsum-body p { font-size: .95rem; color: var(--body); margin: 0 0 18px; }
.roomsum-specs { list-style: disc; padding-left: 20px; margin: 0 0 26px; color: var(--body); font-size: .93rem; }
.roomsum-specs li { padding: 3px 0; }
.roomsum-card .btn-know { align-self: flex-start; margin-top: auto; background: var(--dark); color: #fff; font-family: var(--cond); font-size: .76rem; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; padding: 14px 30px; border: 1px solid var(--dark); transition: var(--t); }
.roomsum-card .btn-know:hover { background: #000; border-color: #000; color: #fff; }
@media (max-width: 900px) { .roomsum-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .roomsum-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }
/* ── Image-only hero banner + breadcrumb/title bar below (per client) ── */
.page-hero::after { background: rgba(20,17,13,.16); }
.page-bar { background: var(--bg); border-bottom: 1px solid var(--line); padding: 22px 0; }
.page-bar .container { display: flex; flex-direction: column; gap: 10px; }
.page-bar .breadcrumb { margin: 0; color: var(--body); }
.page-bar .breadcrumb a { color: var(--body); }
.page-bar .breadcrumb a:hover { color: var(--gold-d); }
.page-bar .breadcrumb .sep { color: var(--line-2); }
.page-bar .breadcrumb [aria-current="page"] { color: var(--gold-d); }
.page-bar h1 { margin: 0; font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.15; }
/* ── H1 as its own page heading, separate from the breadcrumb strip ── */
.page-bar { padding: 18px 0 0; border-bottom: none; }
.page-head { background: var(--bg); padding: 40px 0 0; }
.page-head h1 { margin: 0; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.14; color: var(--ink); }
.page-head + .section { padding-top: 36px; }
.page-head + .booking { margin-top: 34px; }
/* Promoted content H1 (former section h2) keeps the H2 size — "just replace" */
.section h1 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); font-weight: 500; }

/* Get Directions button inside the light Contact panel (the footer variant is .ftr-directions) */
.ci-directions { display: inline-flex; align-items: center; gap: 8px; font-family: var(--cond); font-size: .78rem;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-txt); border: 1px solid var(--gold);
  padding: 9px 18px; transition: var(--t); }
.ci-directions:hover { background: var(--gold-txt); border-color: var(--gold-txt); color: #fff; }
.ci-directions i { font-size: .72rem; }

/* ── Gallery collage (mosaic) ── */
.gallery-collage { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 12px; grid-auto-flow: dense; }
.gallery-collage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-collage img.g-wide { grid-column: span 2; }
.gallery-collage img.g-tall { grid-row: span 2; }
.gallery-collage img.g-big { grid-column: span 2; grid-row: span 2; }
@media (max-width: 860px) { .gallery-collage { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; } }
@media (max-width: 520px) { .gallery-collage img.g-tall { grid-row: span 1; } }

/* ── Room gallery slider ── */
.gallery-carousel { position: relative; }
.gallery-carousel .carousel-viewport { overflow: hidden; }
.gallery-carousel .carousel-track { display: flex; gap: 18px; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.gallery-carousel .gc-slide { flex: 0 0 min(60%, 620px); margin: 0; opacity: .45; transform: scale(.94); transition: opacity .55s ease, transform .55s cubic-bezier(.4,0,.2,1); overflow: hidden; border-radius: 3px; }
.gallery-carousel .gc-slide.is-active { opacity: 1; transform: scale(1); }
.gallery-carousel .gc-slide img { width: 100%; height: 440px; object-fit: cover; display: block; }
@media (max-width: 900px) { .gallery-carousel .gc-slide { flex: 0 0 82%; } .gallery-carousel .gc-slide img { height: 300px; } }