/* Divine India — front-end styles.
   Colours come from the CSS variables printed by the active scheme, so no
   hex value should ever be hard-coded below except plain black and white. */

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

:root {
	--di-wrap: 1220px;
	--di-gap: clamp(20px, 4vw, 40px);
	--di-section-y: clamp(56px, 7vw, 104px);
	--di-radius: 10px;
	--di-radius-sm: 6px;
	--di-shadow: 0 18px 50px rgba(var(--di-ink-rgb), .10);
	--di-shadow-sm: 0 6px 20px rgba(var(--di-ink-rgb), .07);

	/* Fonts. The dashboard reprints these three, so nothing else changes. */
	--di-display: "Marcellus", Georgia, "Times New Roman", serif;
	--di-body-font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--di-btn-font: var(--di-body-font);

	--di-fs-base: 17px;
	--di-lh-body: 1.65;
	--di-fs-h1: clamp(34px, 5vw, 60px);
	--di-fs-h2: clamp(27px, 3.6vw, 40px);
	--di-fs-h3: clamp(21px, 2.4vw, 27px);
	--di-fs-btn: 15px;
	--di-h-weight: 400;
	--di-b-weight: 400;
	--di-btn-weight: 600;
	--di-h-spacing: -.005em;
	--di-h-transform: none;
	--di-btn-transform: none;

	/* Measured by the script so anything sticky clears the header. */
	--di-head-h: 122px;
	--di-wa: #25d366;
}

html { scroll-padding-top: calc(var(--di-head-h) + 18px); }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
	margin: 0;
	font-family: var(--di-body-font);
	font-size: var(--di-fs-base);
	font-weight: var(--di-b-weight);
	line-height: var(--di-lh-body);
	color: var(--di-body);
	background: var(--di-bg);
	-webkit-font-smoothing: antialiased;
}

img, video, iframe { max-width: 100%; height: auto; display: block; }
a { color: var(--di-accent); text-decoration: none; }
a:hover { color: var(--di-accent-dark); }

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--di-display);
	font-weight: var(--di-h-weight);
	color: var(--di-ink);
	line-height: 1.18;
	margin: 0 0 .5em;
	letter-spacing: var(--di-h-spacing);
	text-transform: var(--di-h-transform);
	text-wrap: balance;
}

.di-h1, .di-hero__title { font-size: var(--di-fs-h1); }
.di-h2 { font-size: var(--di-fs-h2); }
.di-h3 { font-size: var(--di-fs-h3); }

.di-lede {
	font-size: clamp(16px, 1.3vw, 18.5px);
	color: var(--di-body);
	max-width: 62ch;
	margin: 0 0 1.2em;
}

.di-wrap {
	width: 100%;
	max-width: var(--di-wrap);
	margin: 0 auto;
	padding: 0 var(--di-gap);
}

.di-section { padding: var(--di-section-y) 0; }
.di-section__head { max-width: 58ch; margin-bottom: clamp(28px, 4vw, 48px); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.di-skip {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--di-accent); color: var(--di-on-accent);
	padding: 12px 18px;
}
.di-skip:focus { left: 12px; top: 12px; }

.di-icon { flex: 0 0 auto; }

/* ----------------------------------------------------------------- buttons */
.di-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	padding: 13px 26px;
	font-family: var(--di-btn-font);
	font-size: var(--di-fs-btn); font-weight: var(--di-btn-weight);
	letter-spacing: .01em; text-transform: var(--di-btn-transform);
	line-height: 1.3; text-align: center;
	border: 1px solid transparent; border-radius: var(--di-radius-sm);
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.di-btn--solid { background: var(--di-accent); color: var(--di-on-accent); }
.di-btn--solid:hover { background: var(--di-accent-dark); color: var(--di-on-accent); }
.di-btn--line { border-color: var(--di-line); color: var(--di-ink); background: transparent; }
.di-btn--line:hover { border-color: var(--di-accent); color: var(--di-accent); }
.di-btn--ghost { background: var(--di-accent-soft); color: var(--di-accent-dark); }
.di-btn--ghost:hover { background: var(--di-accent); color: var(--di-on-accent); }
.di-btn--glass {
	background: rgba(255,255,255,.14); color: #fff;
	border-color: rgba(255,255,255,.4); backdrop-filter: blur(6px);
}
.di-btn--glass:hover { background: #fff; color: var(--di-ink); border-color: #fff; }
.di-btn--wa { background: var(--di-wa); color: #fff; border-color: var(--di-wa); }
.di-btn--wa:hover { background: #1eb85a; border-color: #1eb85a; color: #fff; }
.di-btn--lg { padding: 15px 30px; font-size: calc(var(--di-fs-btn) + 1px); }

.di-link { color: var(--di-accent); font-weight: 600; }
.di-link--arrow { display: inline-flex; align-items: center; gap: 7px; }
.di-link--arrow .di-icon { transition: transform .18s ease; }
.di-link--arrow:hover .di-icon { transform: translateX(4px); }

.di-notice {
	background: var(--di-accent-soft); color: var(--di-ink-soft);
	border-left: 3px solid var(--di-accent);
	padding: 14px 18px; border-radius: var(--di-radius-sm); font-size: 15px;
}

/* ----------------------------------------------------------------- header shell */
/* Top bar and header share one wrapper, so the two rows can never print on
   top of each other. The wrapper is the sticky element on inner pages and
   floats over the hero on the home page. */
.di-headwrap {
	position: sticky; top: 0; z-index: 60;
	background: var(--di-bg);
	transition: box-shadow .25s ease;
}
.di-headwrap.is-stuck { box-shadow: var(--di-shadow-sm); }

/* Past 40px the top bar folds away, so the sticky strip stays shallow and
   the page keeps its reading height. */
.di-headwrap.is-stuck .di-topbar { display: none; }

.di-topbar {
	background: var(--di-dark);
	color: rgba(255,255,255,.74);
	font-size: 13.5px;
}
.di-topbar__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 18px; min-height: 44px;
}
.di-topbar a { color: rgba(255,255,255,.84); }
.di-topbar a:hover { color: var(--di-accent); }
.di-topbar__msg { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; }
.di-topbar__msg a { color: #fff; font-weight: 600; white-space: nowrap; }
.di-topbar__links { display: flex; align-items: center; gap: 16px; min-width: 0; }
.di-topbar__links a { display: inline-flex; align-items: center; gap: 7px; }
.di-topbar__mail { max-width: min(34vw, 300px); }
.di-topbar__mail span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.di-topbar__social { opacity: .78; }
.di-topbar__social:hover { opacity: 1; }
@media (max-width: 1240px) { .di-topbar__link { display: none; } }
@media (max-width: 900px) {
	.di-topbar__label { display: none; }
	.di-topbar__inner { justify-content: space-between; min-height: 40px; }
	.di-topbar__mail { max-width: 46vw; }
}

/* Top bar on phones, set under Divine India -> Layout.
   hide    — the strip is gone entirely
   compact — phone and email only, as icons, nothing else
   full    — everything stays */
@media (max-width: 782px) {
	.di-topbar-hide .di-topbar { display: none; }

	.di-topbar-compact .di-topbar__social,
	.di-topbar-compact .di-topbar__link { display: none; }
	.di-topbar-compact .di-topbar__inner { gap: 10px; min-height: 38px; }
	.di-topbar-compact .di-topbar__msg { font-size: 13px; }
	.di-topbar-compact .di-topbar__mail span {
		max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	}
}

@media (max-width: 560px) {
	.di-topbar-compact .di-topbar__mail span { display: none; }
	.di-topbar-compact .di-topbar__mail {
		display: grid; place-items: center; width: 32px; height: 32px;
		border: 1px solid rgba(255,255,255,.2); border-radius: 50%; max-width: none;
	}
	.di-topbar-full .di-topbar__inner { flex-wrap: wrap; padding-block: 8px; row-gap: 6px; }
}

/* ----------------------------------------------------------------- header */
.di-header {
	position: relative; z-index: 2;
	background: var(--di-bg);
	border-bottom: 1px solid var(--di-line);
	transition: background-color .25s ease, border-color .25s ease;
}
.di-header__inner {
	display: flex; align-items: center; gap: 20px;
	min-height: 78px;
	transition: min-height .25s ease;
}
/* The bar tightens once the page starts moving. */
.di-headwrap.is-stuck .di-header__inner { min-height: 68px; }
@media (max-width: 782px) {
	.di-header__inner { min-height: 64px; }
	.di-headwrap.is-stuck .di-header__inner { min-height: 58px; }
}

.di-brand { margin-right: auto; min-width: 0; }
.di-brand__text { display: block; line-height: 1.1; }
.di-brand__name {
	display: block; font-family: var(--di-display);
	font-size: clamp(21px, 2.2vw, 26px); color: var(--di-ink); white-space: nowrap;
}
.di-brand__sub {
	display: block; font-size: 11px; letter-spacing: .22em;
	text-transform: uppercase; color: var(--di-accent); margin-top: 3px;
}
.di-brand__text--light .di-brand__name { color: #fff; }
.custom-logo { max-height: 56px; width: auto; }

.di-menu, .di-submenu { list-style: none; margin: 0; padding: 0; }
.di-menu { display: flex; align-items: center; gap: 2px; }
.di-menu > li { position: relative; }
.di-menu > li > a {
	display: block; padding: 10px 13px;
	font-size: 15px; font-weight: 600; color: var(--di-ink); white-space: nowrap;
}
.di-menu > li > a:hover,
.di-menu > .current-menu-item > a,
.di-menu > .current-menu-ancestor > a,
.di-menu > .current_page_parent > a,
.di-menu > .current_page_ancestor > a { color: var(--di-accent); }
.di-submenu .current-menu-item > a { color: var(--di-accent); background: var(--di-accent-soft); }

.di-submenu {
	position: absolute; top: calc(100% + 6px); left: 0; min-width: 232px;
	background: var(--di-bg); border: 1px solid var(--di-line);
	border-radius: var(--di-radius-sm); box-shadow: var(--di-shadow);
	padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.di-menu li:hover > .di-submenu,
.di-menu li:focus-within > .di-submenu { opacity: 1; visibility: visible; transform: none; }
.di-submenu a {
	display: block; padding: 9px 12px; font-size: 14.5px;
	color: var(--di-ink-soft); border-radius: 4px;
}
.di-submenu a:hover { background: var(--di-accent-soft); color: var(--di-accent-dark); }
.di-submenu .di-submenu { top: -8px; left: 100%; }

.di-submenu-toggle { display: none; }

.di-header__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.di-icon-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; padding: 0; flex: 0 0 auto;
	background: transparent; color: var(--di-ink);
	border: 1px solid var(--di-line); border-radius: var(--di-radius-sm);
	cursor: pointer;
}
.di-icon-btn:hover { border-color: var(--di-accent); color: var(--di-accent); }
.di-header__cta { white-space: nowrap; }
.di-burger { display: none; }
.di-burger__close { display: none; }
.di-burger[aria-expanded="true"] .di-burger__open { display: none; }
.di-burger[aria-expanded="true"] .di-burger__close { display: block; }

.di-searchbar { border-top: 1px solid var(--di-line); padding: 18px 0; background: var(--di-bg-alt); }

.di-searchform { display: flex; gap: 10px; max-width: 620px; }
.di-searchform input[type="search"] {
	flex: 1; min-width: 0; padding: 13px 16px; font: inherit; font-size: 15px;
	border: 1px solid var(--di-line); border-radius: var(--di-radius-sm);
	background: var(--di-bg); color: var(--di-ink);
}
.di-searchform button {
	display: inline-flex; align-items: center; justify-content: center;
	width: 50px; flex: 0 0 auto; border: 0; border-radius: var(--di-radius-sm);
	background: var(--di-accent); color: var(--di-on-accent); cursor: pointer;
}

/* Home and landing pages: the shell floats over the hero. */
.di-transparent-header .di-headwrap {
	position: absolute; top: 0; left: 0; right: 0;
	background: transparent; box-shadow: none;
}
.di-transparent-header .di-topbar { background: rgba(0,0,0,.34); }
.di-transparent-header .di-header {
	position: static; background: transparent;
	border-bottom-color: rgba(255,255,255,.16);
}
.di-transparent-header .di-header .di-brand__name,
.di-transparent-header .di-header .di-menu > li > a { color: #fff; }
.di-transparent-header .di-header .di-icon-btn { color: #fff; border-color: rgba(255,255,255,.4); }
.di-transparent-header .di-header .di-icon-btn:hover { border-color: #fff; }

.di-transparent-header .di-headwrap.is-stuck {
	position: fixed;
	background: var(--di-bg);
	box-shadow: var(--di-shadow-sm);
	animation: di-drop .3s ease;
}
.di-transparent-header .di-headwrap.is-stuck .di-topbar { display: none; }
.di-transparent-header .di-headwrap.is-stuck .di-header { border-bottom-color: var(--di-line); }
.di-transparent-header .di-headwrap.is-stuck .di-brand__name,
.di-transparent-header .di-headwrap.is-stuck .di-menu > li > a { color: var(--di-ink); }
.di-transparent-header .di-headwrap.is-stuck .di-icon-btn { color: var(--di-ink); border-color: var(--di-line); }

@keyframes di-drop {
	from { transform: translateY(-100%); }
	to { transform: none; }
}

/* The WordPress toolbar is fixed on desktop, so anything pinned sits below
   it. Under 601px the toolbar scrolls away, so the offset is dropped. */
.admin-bar .di-headwrap { top: 32px; }
.admin-bar .di-nav { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .di-headwrap { top: 46px; }
	.admin-bar .di-nav { top: 46px; }
}
@media (max-width: 600px) {
	.admin-bar .di-headwrap { top: 0; }
	.admin-bar.di-transparent-header .di-headwrap.is-stuck { top: 0; }
}

.di-nav-scrim {
	position: fixed; inset: 0; z-index: 55;
	background: rgba(var(--di-ink-rgb), .5);
}

/* ----------------------------------------------------------------- hero */
.di-hero {
	position: relative;
	display: flex; align-items: center;
	overflow: hidden; isolation: isolate;
	color: #fff;
	background-color: var(--di-dark);
	/* Solid header: the hero starts below it, so it only needs its own pad.
	   Floating header: the header sits on top of the hero, so the pad has to
	   clear the measured header height as well. */
	padding-top: clamp(52px, 7vw, 104px);
	padding-bottom: clamp(52px, 7vw, 110px);
}
.di-transparent-header .di-hero { padding-top: calc(var(--di-head-h) + clamp(40px, 5vw, 80px)); }

/* min-height on the floating variant has to cover the header too, otherwise
   a "full height" hero is short by the height of the bar. */
.di-hero--tall { min-height: min(84vh, 760px); }
.di-transparent-header .di-hero--full { min-height: 100vh; min-height: 100svh; }
.di-hero--compact { min-height: 0; }
.di-hero--full { min-height: 88vh; min-height: 88svh; }

.di-hero__bg { position: absolute; inset: 0; z-index: -2; }
.di-hero__layer {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
}
.di-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.di-hero__layer--poster { display: none; }

.di-hero__slides { position: absolute; inset: 0; }
.di-hero__slide {
	position: absolute; inset: 0;
	opacity: 0; transition: opacity 1s ease;
}
.di-hero__slide.is-on { opacity: 1; }
.di-hero__img { width: 100%; height: 100%; object-fit: cover; }
.di-hero__slide.is-on .di-hero__img { animation: di-kenburns 10s ease-out both; }

@keyframes di-kenburns {
	from { transform: scale(1); }
	to { transform: scale(1.07); }
}

.di-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(
		100deg,
		rgba(0,0,0,calc(var(--di-ov, .55) + .16)) 0%,
		rgba(0,0,0,var(--di-ov, .55)) 48%,
		rgba(0,0,0,calc(var(--di-ov, .55) * .5)) 100%
	);
}
.di-hero--center::after {
	background: linear-gradient(180deg, rgba(0,0,0,calc(var(--di-ov, .55) + .1)), rgba(0,0,0,var(--di-ov, .55)));
}

/* The wrap keeps the page's own gutters so the hero text starts on the same
   line as the logo above it. The copy block inside is what gets the reading
   width — putting a max-width on the wrap itself centred the whole column. */
.di-hero__inner { position: relative; width: 100%; }
.di-hero__copy { max-width: 740px; }
.di-hero--center .di-hero__copy { max-width: 880px; margin-inline: auto; text-align: center; }
.di-hero--center .di-hero__eyebrow,
.di-hero--center .di-hero__actions,
.di-hero--center .di-hero__badges { justify-content: center; }
.di-hero--center .di-hero__text { margin-inline: auto; }

.di-hero__eyebrow {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin: 0 0 20px; padding: 0;
}
.di-hero__eyebrow span {
	display: inline-flex; align-items: center;
	padding: 5px 13px; border-radius: 100px;
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.26);
	font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
	color: #fff; white-space: nowrap;
}
.di-hero__title {
	color: #fff; margin: 0 0 .32em;
	font-size: var(--di-fs-h1);
	line-height: 1.08;
	text-wrap: balance;
}
.di-hero__text {
	font-size: clamp(16px, 1.3vw, 18.5px);
	color: rgba(255,255,255,.9); max-width: 56ch; margin: 0;
}
.di-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.di-hero__badges {
	list-style: none; margin: 30px 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 10px 24px;
	font-size: 14.5px; color: rgba(255,255,255,.88);
}
.di-hero__badges li { display: flex; align-items: center; gap: 8px; }
.di-hero__badges .di-icon { color: var(--di-accent); }

.di-hero__dots {
	position: absolute; left: 50%; transform: translateX(-50%);
	bottom: 26px; z-index: 3; display: flex; gap: 8px;
}
.di-hero.has-search .di-hero__dots { bottom: clamp(20px, 3vw, 34px); }
.di-hero__dot {
	width: 26px; height: 4px; padding: 0; border: 0; border-radius: 100px;
	background: rgba(255,255,255,.45); cursor: pointer;
	transition: width .2s ease, background-color .2s ease;
}
.di-hero__dot.is-on { width: 42px; background: #fff; }

/* ------------------------------------------------------------- booking bar */
/* Its own section, sitting after the hero. On desktop a negative margin pulls
   it up so it straddles the hero's bottom edge; because it is outside the
   hero it is never touched by that section's overflow:hidden. Below 1024px
   the pull is dropped and it simply stacks. */
.di-booking {
	position: relative; z-index: 5;
	margin-top: -46px;
	margin-bottom: clamp(18px, 3vw, 34px);
}
.di-booking__card {
	background: var(--di-bg);
	border: 1px solid var(--di-line);
	border-radius: var(--di-radius);
	box-shadow: var(--di-shadow);
	overflow: hidden;
	max-width: 100%;
}
.di-booking__card > * { max-width: 100%; }

/* The plugin's bar ships its own padding, so only add some when it has none. */
.di-booking__card > :only-child:not(form):not([class*="hbp-"]) { padding: 18px; }

/* On desktop the plugin's row has to shrink to the card rather than run past
   it. Flex and grid children default to min-width:auto, which is what lets a
   long field push the whole bar wider than its container. */
@media (min-width: 1025px) {
	.di-booking__card form,
	.di-booking__card .hbp-search,
	.di-booking__card .hbp-search-bar,
	.di-booking__card .hbp-search-form,
	.di-booking__card .hbp-search-row {
		width: 100%;
		max-width: 100%;
		margin: 0;
		box-sizing: border-box;
	}
	.di-booking__card .hbp-search-field,
	.di-booking__card .hbp-field,
	.di-booking__card .hbp-col { min-width: 0; }
	.di-booking__card input,
	.di-booking__card select { max-width: 100%; box-sizing: border-box; }
}

@media (max-width: 1024px) {
	/* Stacked, full width, and every row the plugin might print is forced to
	   one column. Its default row uses fixed pixel widths, which is what
	   pushed the page sideways on a phone. */
	.di-booking {
		margin-top: 0;
		margin-bottom: 0;
		padding: 22px 0 26px;
	}
	.di-booking__card { padding: 16px; }

	.di-booking__card form,
	.di-booking__card .hbp-search,
	.di-booking__card .hbp-search-bar,
	.di-booking__card .hbp-search-form,
	.di-booking__card .hbp-search-row,
	.di-booking__card .hbp-search-fields,
	.di-booking__card .hbp-form-row,
	.di-rooms-page__search form,
	.di-rooms-page__search .hbp-search-bar {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 12px !important;
		width: 100% !important;
		min-width: 0 !important;
		float: none !important;
	}

	.di-booking__card .hbp-search-field,
	.di-booking__card .hbp-field,
	.di-booking__card .hbp-col,
	.di-rooms-page__search .hbp-search-field {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		flex: 1 1 100% !important;
		margin: 0 !important;
		border-right: 0 !important;
		border-bottom: 1px solid var(--di-line) !important;
		padding: 0 0 12px !important;
	}

	.di-booking__card input,
	.di-booking__card select,
	.di-booking__card button,
	.di-booking__card .hbp-btn,
	.di-rooms-page__search input,
	.di-rooms-page__search select,
	.di-rooms-page__search button {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		font-size: 16px !important; /* stops iOS zooming in on focus */
	}
}

@media (max-width: 1024px) {
	/* A "tall" hero measured against the viewport gets out of hand on a
	   narrow screen, where the copy is already stacking. Cap it here rather
	   than waiting for the phone breakpoint. */
	.di-hero--tall { min-height: min(70vh, 600px); }
	.di-hero--full { min-height: min(82vh, 700px); }
	.di-transparent-header .di-hero--full { min-height: min(86vh, 740px); }
}

@media (max-width: 860px) {
	.di-hero__video { display: none; }
	.di-hero__layer--poster { display: block; }
}

@media (max-width: 600px) {
	.di-booking { padding: 18px 0 22px; }
	.di-booking__card { padding: 12px; border-radius: var(--di-radius-sm); }
	.di-booking__card .hbp-search-field:last-child,
	.di-booking__card .hbp-field:last-child { border-bottom: 0 !important; padding-bottom: 0 !important; }
}

/* ----------------------------------------------------------------- intro */
.di-intro__grid {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 5vw, 70px); align-items: center;
}
.di-intro__media { position: relative; }
.di-intro__img-main {
	width: 100%; border-radius: var(--di-radius);
	aspect-ratio: 4 / 5; object-fit: cover;
}
.di-intro__media.has-second .di-intro__img-main { aspect-ratio: 4 / 4.4; }
.di-intro__img-second {
	position: absolute; right: -26px; bottom: -34px;
	width: 46%; aspect-ratio: 1; object-fit: cover;
	border: 8px solid var(--di-bg); border-radius: var(--di-radius);
	box-shadow: var(--di-shadow);
}
.di-placeholder {
	display: grid; place-items: center; text-align: center; padding: 30px;
	background: var(--di-bg-alt); color: var(--di-muted);
	border: 1px dashed var(--di-line); border-radius: var(--di-radius);
	min-height: 260px; font-size: 14px;
}

.di-checklist { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; }
.di-checklist li { display: flex; align-items: flex-start; gap: 11px; }
.di-checklist .di-icon { color: var(--di-accent); margin-top: 3px; }
.di-intro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }

@media (max-width: 860px) {
	.di-intro__grid { grid-template-columns: 1fr; }
	.di-intro__img-second { right: 0; bottom: -20px; width: 40%; }
}

/* ----------------------------------------------------------------- stats */
.di-stats { background: var(--di-bg-alt); }
.di-stats__top {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: clamp(26px, 4vw, 56px); align-items: center;
	margin-bottom: clamp(30px, 4vw, 52px);
}
.di-stats__intro .di-lede { margin-bottom: 0; }
.di-stats__media { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.di-stats__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--di-radius); }
.di-stats__grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
	border-top: 1px solid var(--di-line); padding-top: clamp(24px, 3vw, 38px);
}
.di-stat { text-align: left; }
.di-stat + .di-stat { border-left: 1px solid var(--di-line); padding-left: 24px; }
.di-stat__num {
	display: block; font-family: var(--di-display);
	font-size: clamp(32px, 4vw, 48px); color: var(--di-ink); line-height: 1;
}
.di-stat__label { display: block; margin-top: 10px; font-size: 14.5px; color: var(--di-muted); }
@media (max-width: 860px) { .di-stats__top { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
	.di-stats__grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
	.di-stat:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* ----------------------------------------------------------------- rooms */
.di-rooms { background: var(--di-bg-alt); }
.di-rooms .di-section__head { margin-bottom: 8px; }

/* ----------------------------------------------------------------- amenities */
.di-amenity-grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
	background: var(--di-line); border: 1px solid var(--di-line);
	border-radius: var(--di-radius); overflow: hidden;
}
.di-amenity { background: var(--di-bg); padding: 30px 26px; }
.di-amenity__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; margin-bottom: 16px;
	border-radius: 50%; background: var(--di-accent-soft); color: var(--di-accent-dark);
}
.di-amenity__title { font-size: 19px; margin-bottom: 6px; }
.di-amenity__text { margin: 0; font-size: 15px; color: var(--di-muted); }
@media (max-width: 1000px) { .di-amenity-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .di-amenity-grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- reviews */
.di-reviews { padding: var(--di-section-y) 0; background: var(--di-bg); }
.di-reviews__head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 28px; flex-wrap: wrap; margin-bottom: 34px;
}
.di-reviews__head .di-lede { margin-bottom: 0; }

.di-rating-card {
	display: grid; justify-items: center; gap: 6px;
	padding: 20px 28px; min-width: 210px;
	background: var(--di-bg-alt); border: 1px solid var(--di-line);
	border-radius: var(--di-radius);
}
.di-rating-card__score { font-family: var(--di-display); font-size: 42px; line-height: 1; color: var(--di-ink); }
.di-rating-card__count { font-size: 13.5px; color: var(--di-muted); }

.di-stars { display: inline-flex; gap: 2px; color: var(--di-line); }
.di-star.is-on { color: var(--di-accent); }

.di-reviews__rail {
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr);
	gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
	padding-bottom: 8px; scrollbar-width: thin;
}
.di-review {
	scroll-snap-align: start;
	background: var(--di-bg); border: 1px solid var(--di-line);
	border-radius: var(--di-radius); padding: 26px;
	display: flex; flex-direction: column; gap: 14px;
}
.di-review__text { margin: 0; font-size: 15.5px; color: var(--di-ink-soft); }
.di-review__by { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.di-review__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.di-review__avatar--letter {
	display: grid; place-items: center;
	background: var(--di-accent-soft); color: var(--di-accent-dark);
	font-weight: 700; font-size: 18px;
}
.di-review__when { display: block; font-size: 13px; color: var(--di-muted); }

.di-rail-nav { display: flex; gap: 10px; margin-top: 22px; }
.di-rail-btn {
	width: 44px; height: 44px; display: grid; place-items: center;
	background: transparent; color: var(--di-ink);
	border: 1px solid var(--di-line); border-radius: 50%; cursor: pointer;
}
.di-rail-btn:hover { border-color: var(--di-accent); color: var(--di-accent); }
.di-rail-btn[data-di-rail-prev] .di-icon { transform: rotate(90deg); }
.di-rail-btn[data-di-rail-next] .di-icon { transform: rotate(-90deg); }

/* ----------------------------------------------------------------- CTA band */
.di-cta-band { background: var(--di-dark-alt); color: #fff; padding: clamp(48px, 6vw, 84px) 0; }
.di-cta-band__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 30px; flex-wrap: wrap;
}
.di-cta-band__title { color: #fff; margin-bottom: .3em; }
.di-cta-band__text { margin: 0; color: rgba(255,255,255,.78); max-width: 52ch; }
/* The accent is a deep colour, so on the dark bands an eyebrow set in it
   comes out at about 2:1 against the background and is hard to read. On a
   dark surface it switches to the pale tint of the same accent, which keeps
   the palette's character and reads cleanly. */
.di-cta-band .di-eyebrow,
.di-rooms .di-eyebrow,
.di-facilities.has-bg .di-eyebrow,
.di-section.has-bg .di-eyebrow,
.di-footer .di-eyebrow { color: var(--di-accent-soft); }
.di-cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ----------------------------------------------------------------- banner */
.di-banner {
	position: relative; isolation: isolate;
	background: var(--di-bg-alt);
	border-bottom: 1px solid var(--di-line);
	padding: clamp(46px, 6vw, 82px) 0 clamp(36px, 4.4vw, 58px);
}
.di-banner--slim { padding: clamp(36px, 4.6vw, 62px) 0 clamp(28px, 3.4vw, 44px); }
.di-banner--tall { padding: clamp(64px, 8.5vw, 120px) 0 clamp(48px, 6vw, 84px); }
.di-banner__bg {
	position: absolute; inset: 0; z-index: -2;
	background-size: cover; background-position: center;
}
.di-banner.has-image { border-bottom: 0; color: #fff; }
.di-banner.has-image::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(0,0,0,calc(var(--di-ov, .6) + .1)), rgba(0,0,0,var(--di-ov, .6)));
}
.di-banner.has-image .di-banner__title { color: #fff; }
.di-banner.has-image .di-banner__text,
.di-banner.has-image .di-banner__meta { color: rgba(255,255,255,.86); }
.di-banner.has-image .di-crumbs,
.di-banner.has-image .di-crumbs a,
.di-banner.has-image .di-crumbs__current { color: rgba(255,255,255,.82); }
.di-banner__inner { position: relative; }
.di-banner--center .di-banner__inner { text-align: center; max-width: 780px; margin-inline: auto; }
.di-banner--center .di-crumbs, .di-banner--center .di-banner__meta { justify-content: center; }
/* Page titles read as a smaller cousin of the hero title, so both follow the
   H1 size set in the dashboard rather than a separate hardcoded scale. */
.di-banner__title {
	font-size: clamp(28px, calc(var(--di-fs-h1) * .78), 52px);
	line-height: 1.12; margin: 0;
}
.di-banner__text { margin: 14px 0 0; max-width: 62ch; font-size: clamp(15px, 1.2vw, 17px); }
.di-banner__meta {
	display: flex; flex-wrap: wrap; gap: 8px 22px;
	margin-top: 16px; font-size: 14.5px; color: var(--di-muted);
}
.di-banner__meta span { display: inline-flex; align-items: center; gap: 7px; }
.di-transparent-header .di-banner { padding-top: calc(var(--di-head-h) + clamp(30px, 4vw, 56px)); }

.di-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--di-muted); margin-bottom: 14px; }
.di-crumbs a { color: var(--di-muted); }
.di-crumbs a:hover { color: var(--di-accent); }
.di-crumbs__current { color: var(--di-ink); }

/* ----------------------------------------------------------------- contact */
.di-contact-top { padding-bottom: 0; }
.di-quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.di-quick {
	display: block; padding: 26px 24px;
	background: var(--di-bg); border: 1px solid var(--di-line);
	border-radius: var(--di-radius); color: var(--di-ink);
	transition: border-color .18s ease, transform .18s ease;
}
.di-quick:hover { border-color: var(--di-accent); transform: translateY(-2px); color: var(--di-ink); }
.di-quick__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 50%;
	background: var(--di-accent-soft); color: var(--di-accent-dark); margin-bottom: 16px;
}
.di-quick__label { display: block; font-size: 13px; color: var(--di-muted); margin-bottom: 4px; }
.di-quick__value { display: block; font-size: 17px; }
.di-quick__meta { display: block; font-size: 13.5px; color: var(--di-muted); margin-top: 4px; }

/* The WhatsApp card carries WhatsApp's own green so the glyph reads correctly
   instead of looking like a generic chat bubble. */
.di-quick--wa .di-quick__icon { background: var(--di-wa); color: #fff; }
.di-quick--wa:hover { border-color: var(--di-wa); }

/* A grid item will not shrink below the min-content width of what it holds, so
   one unbreakable token — info@fortunehomeserviceapartment.com — widens the
   whole column and every card in it. `overflow-x: clip` on the body then slices
   the row off at the viewport edge instead of scrolling. Let the item shrink,
   and let the long string break. */
.di-quick-grid > *,
.di-info-list li,
.di-info-list li > span,
.di-contact-card,
.di-footer__contact li,
.di-footer__contact li > span { min-width: 0; }

.di-quick__label,
.di-quick__value,
.di-quick__meta,
.di-contact-card__value,
.di-info-list li p,
.di-info-list li a,
.di-footer__contact a,
.di-topbar__mail span { overflow-wrap: anywhere; }

@media (max-width: 1000px) { .di-quick-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .di-quick-grid { grid-template-columns: 1fr; } }

/* Four stacked cards is a lot of scrolling before the form comes into view, so
   tighten them up once there is only one per row. */
@media (max-width: 520px) {
	.di-quick { padding: 18px 16px; }
	.di-quick__icon { width: 40px; height: 40px; margin-bottom: 12px; }
	.di-quick__value { font-size: 16px; }
}

.di-contact-main__grid {
	display: grid; grid-template-columns: 1fr 1.05fr;
	gap: clamp(30px, 5vw, 64px); align-items: start;
}
@media (max-width: 940px) { .di-contact-main__grid { grid-template-columns: 1fr; } }

.di-info-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 22px; }
.di-info-list li { display: flex; gap: 16px; }
.di-info-list h3 { font-size: 18px; margin: 0 0 4px; }
.di-info-list p { margin: 0 0 6px; }
.di-info-list__icon {
	display: inline-flex; align-items: center; justify-content: center;
	flex: 0 0 auto; width: 44px; height: 44px;
	border: 1px solid var(--di-line); border-radius: var(--di-radius-sm);
	color: var(--di-accent);
}

.di-rating-inline {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	padding: 16px 20px; border-radius: var(--di-radius);
	background: var(--di-accent-soft); color: var(--di-ink-soft); font-size: 15px;
}

.di-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.di-contact-card {
	padding: 24px; background: var(--di-bg);
	border: 1px solid var(--di-line); border-radius: var(--di-radius);
}
.di-contact-card__icon { color: var(--di-accent); display: block; margin-bottom: 12px; }
.di-contact-card__label { font-size: 16px; margin-bottom: 6px; }
.di-contact-card__value { font-size: 15px; }

/* form */
.di-form-card {
	background: var(--di-bg); border: 1px solid var(--di-line);
	border-radius: var(--di-radius); padding: clamp(24px, 3.4vw, 40px);
	box-shadow: var(--di-shadow-sm);
}
.di-form-card__text { margin-top: -6px; color: var(--di-muted); font-size: 15px; }
.di-form { display: grid; gap: 16px; }
.di-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .di-form__row { grid-template-columns: 1fr; } }

.di-field { display: grid; gap: 7px; }
.di-field > span { font-size: 14px; font-weight: 600; color: var(--di-ink-soft); }
.di-field input, .di-field select, .di-field textarea {
	width: 100%; padding: 13px 15px;
	font: inherit; font-size: 15.5px; color: var(--di-ink);
	background: var(--di-bg); border: 1px solid var(--di-line);
	border-radius: var(--di-radius-sm);
}
.di-field input:focus, .di-field select:focus, .di-field textarea:focus {
	border-color: var(--di-accent); outline: none;
	box-shadow: 0 0 0 3px rgba(var(--di-accent-rgb), .14);
}
.di-field textarea { resize: vertical; min-height: 110px; }
.di-hp { position: absolute; left: -9999px; }
.di-form .di-btn { justify-self: start; }
.di-form .di-btn--ghost { margin-top: -6px; }

.di-alert { padding: 14px 18px; border-radius: var(--di-radius-sm); font-size: 15px; margin: 0 0 6px; }
.di-alert--ok { background: var(--di-accent-soft); color: var(--di-accent-dark); }
.di-alert--bad { background: #fdecec; color: #92302f; }

/* map */
.di-map iframe, .di-map-section__frame iframe { width: 100%; border: 0; display: block; }
.di-map iframe { border-radius: var(--di-radius); }
.di-map-section { position: relative; margin-top: clamp(20px, 4vw, 40px); }
.di-map-section__frame { height: clamp(320px, 46vw, 500px); filter: saturate(.92); }
.di-map-section__frame iframe { height: 100%; }
.di-map-card {
	position: relative; margin-top: -120px; margin-left: auto;
	width: min(360px, 100%);
	background: var(--di-bg); border: 1px solid var(--di-line);
	border-radius: var(--di-radius); padding: 26px;
	box-shadow: var(--di-shadow);
}
.di-map-card p { margin: 0 0 10px; font-size: 15px; }
.di-map-card__phone { display: flex; align-items: center; gap: 8px; color: var(--di-accent); }
@media (max-width: 720px) {
	.di-map-card { margin: -60px auto 0; }
}

/* ----------------------------------------------------------------- blog */
.di-blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}
.di-blog-layout.has-sidebar { grid-template-columns: minmax(0, 1fr) 320px; }
@media (max-width: 1024px) { .di-blog-layout.has-sidebar { grid-template-columns: 1fr; } }

/* Card count comes from the dashboard. The class can sit on the grid itself
   or on the layout wrapper, so both the home strip and the blog index work. */
.di-post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.4vw, 30px);
}
.di-post-grid.di-cols-2,
.di-cols-2 > .di-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.di-post-grid.di-cols-3,
.di-cols-3 > .di-post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.di-post-grid.di-cols-4,
.di-cols-4 > .di-post-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* A sidebar takes a column away, so the cards drop to two whatever the
   setting says. This is what left the blank third column before. */
.di-blog-layout.has-sidebar > .di-post-grid,
.di-blog-layout.has-sidebar.di-cols-3 > .di-post-grid,
.di-blog-layout.has-sidebar.di-cols-4 > .di-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1240px) {
	.di-post-grid.di-cols-4,
	.di-cols-4 > .di-post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
	.di-blog-layout.has-sidebar > .di-post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
	.di-post-grid,
	.di-post-grid.di-cols-3,
	.di-post-grid.di-cols-4,
	.di-cols-3 > .di-post-grid,
	.di-cols-4 > .di-post-grid,
	.di-blog-layout.has-sidebar > .di-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.di-post-grid,
	.di-post-grid.di-cols-2,
	.di-post-grid.di-cols-3,
	.di-post-grid.di-cols-4,
	.di-cols-2 > .di-post-grid,
	.di-cols-3 > .di-post-grid,
	.di-cols-4 > .di-post-grid,
	.di-blog-layout.has-sidebar > .di-post-grid { grid-template-columns: 1fr; }
}

/* An odd card at the end must not leave a hole on the right. */
.di-post-grid > * { min-width: 0; }

.di-post-card {
	background: var(--di-bg); border: 1px solid var(--di-line);
	border-radius: var(--di-radius); overflow: hidden;
	display: flex; flex-direction: column;
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.di-post-card:hover { border-color: var(--di-accent); transform: translateY(-3px); box-shadow: var(--di-shadow-sm); }
.di-post-card__media { display: block; overflow: hidden; background: var(--di-bg-alt); }
.di-post-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .4s ease; }
.di-post-card:hover .di-post-card__media img { transform: scale(1.04); }
.di-post-card__media .di-placeholder { min-height: 190px; border: 0; border-radius: 0; }
.di-post-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.di-post-card__date { font-size: 13px; color: var(--di-muted); }
.di-post-card__title { font-size: clamp(18px, 1.5vw, 21px); margin: 0; line-height: 1.3; }
.di-post-card__title a { color: var(--di-ink); }
.di-post-card__title a:hover { color: var(--di-accent); }
.di-post-card__excerpt { margin: 0; font-size: 15px; color: var(--di-muted); }
.di-post-card .di-link { margin-top: auto; padding-top: 4px; }

.di-sidebar { display: grid; gap: 22px; }
.di-widget { border: 1px solid var(--di-line); border-radius: var(--di-radius); padding: 22px; }
.di-widget__title { font-size: 18px; margin-bottom: 12px; }
.di-widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15px; }

/* ------------------------------------------------------------ contents list */
.di-toc__title {
	margin: 0 0 14px; font-family: var(--di-body-font);
	font-size: 11.5px; font-weight: 700; letter-spacing: .16em;
	text-transform: uppercase; color: var(--di-muted);
}
.di-toc__list { list-style: none; counter-reset: di-toc; margin: 0; padding: 0; display: grid; gap: 11px; }
.di-toc__item { counter-increment: di-toc; }
.di-toc__item a {
	display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px;
	font-size: 14.5px; line-height: 1.45; color: var(--di-ink-soft);
	transition: color .16s ease;
}
.di-toc__item a::before { content: counter(di-toc) "."; color: var(--di-muted); font-weight: 600; }
.di-toc__item--h3 { padding-left: 18px; }
.di-toc__item--h3 a { font-size: 14px; }
.di-toc__item a:hover { color: var(--di-accent); }
.di-toc__item.is-active > a { color: var(--di-accent); font-weight: 700; }
.di-toc__item.is-active > a::before { color: var(--di-accent); }

.di-toc--side {
	position: sticky; top: calc(var(--di-head-h) + 20px);
	border: 1px solid var(--di-line); border-radius: var(--di-radius);
	background: var(--di-bg); padding: 24px 22px;
	max-height: calc(100vh - var(--di-head-h) - 60px); overflow-y: auto;
}
.admin-bar .di-toc--side { top: calc(var(--di-head-h) + 52px); }

.di-toc--inline {
	display: none; margin: 0 0 26px;
	border: 1px solid var(--di-line); border-radius: var(--di-radius);
	background: var(--di-bg-alt);
}
.di-toc--inline summary {
	display: flex; align-items: center; gap: 10px;
	padding: 14px 18px; cursor: pointer; list-style: none;
	font-weight: 600; color: var(--di-ink);
}
.di-toc--inline summary::-webkit-details-marker { display: none; }
.di-toc--inline summary > span { flex: 1; }
.di-toc--inline summary .di-icon--chevron { transition: transform .2s ease; }
.di-toc--inline[open] summary .di-icon--chevron { transform: rotate(180deg); }
.di-toc--inline .di-toc__list { padding: 0 18px 18px; }
@media (max-width: 1024px) { .di-toc--inline { display: block; } }

/* ------------------------------------------------------------ single post */
.di-single__cover { margin: 0 0 28px; }
.di-single__cover img {
	width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
	border-radius: var(--di-radius);
}
.di-single__cover figcaption { margin-top: 10px; font-size: 13.5px; color: var(--di-muted); }
.di-single__body { max-width: 74ch; }
.di-single__foot {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 18px; margin-top: 36px; padding-top: 24px;
	border-top: 1px solid var(--di-line);
}
.di-share { display: flex; align-items: center; gap: 10px; }
.di-share__label { font-size: 13.5px; color: var(--di-muted); }
.di-share__btn {
	width: 40px; height: 40px; display: grid; place-items: center;
	border: 1px solid var(--di-line); border-radius: 50%;
	color: var(--di-ink-soft); transition: all .18s ease;
}
.di-share__btn:hover { transform: translateY(-2px); color: #fff; }
.di-share__btn--whatsapp:hover { background: var(--di-wa); border-color: var(--di-wa); }
.di-share__btn--facebook:hover { background: #1877f2; border-color: #1877f2; }
.di-share__btn--twitter:hover { background: #111; border-color: #111; }
.di-share__btn--linkedin:hover { background: #0a66c2; border-color: #0a66c2; }

/* Copy link: the tick replaces the chain for a moment after a successful copy. */
.di-share__btn--copy { background: transparent; cursor: pointer; font: inherit; }
.di-share__btn--copy:hover { background: var(--di-ink); border-color: var(--di-ink); }
.di-share__done { display: none; }
.di-share__btn--copy.is-done { background: var(--di-accent); border-color: var(--di-accent); color: #fff; }
.di-share__btn--copy.is-done .di-share__copy { display: none; }
.di-share__btn--copy.is-done .di-share__done { display: block; }

.di-side-card {
	border: 1px solid var(--di-line); border-radius: var(--di-radius);
	background: var(--di-bg-alt); padding: 24px; display: grid; gap: 12px;
}
.di-side-card__title { font-size: 20px; margin: 0; }
.di-side-card p { margin: 0; font-size: 14.5px; color: var(--di-muted); }
.di-side-card .di-btn { width: 100%; }

.di-related {
	margin-top: clamp(40px, 6vw, 72px);
	padding-top: clamp(30px, 4vw, 50px);
	border-top: 1px solid var(--di-line);
}
.di-related .di-h2 { margin-bottom: 26px; }

.di-prose { max-width: 74ch; }
.di-prose--wide { max-width: 90ch; }
.di-prose h2 { margin-top: 1.6em; scroll-margin-top: calc(var(--di-head-h) + 20px); }
.di-prose h3 { margin-top: 1.4em; scroll-margin-top: calc(var(--di-head-h) + 20px); }
.di-prose p, .di-prose ul, .di-prose ol { margin: 0 0 1.15em; }
.di-prose img { border-radius: var(--di-radius); }
.di-prose blockquote {
	margin: 1.6em 0; padding: 4px 0 4px 22px;
	border-left: 3px solid var(--di-accent);
	font-family: var(--di-display); font-size: 21px; color: var(--di-ink);
}
.di-prose table { width: 100%; border-collapse: collapse; }
.di-prose th, .di-prose td { border: 1px solid var(--di-line); padding: 10px 12px; text-align: left; }

.di-taglist a {
	display: inline-block; margin: 0 6px 6px 0; padding: 5px 12px;
	background: var(--di-bg-alt); border-radius: 100px; font-size: 13.5px; color: var(--di-ink-soft);
}
.di-taglist a:hover { background: var(--di-accent-soft); color: var(--di-accent-dark); }

.pagination, .navigation.pagination { margin-top: 40px; }
.page-numbers {
	display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px;
	border: 1px solid var(--di-line); border-radius: var(--di-radius-sm);
	color: var(--di-ink); margin-right: 6px;
}
.page-numbers.current, .page-numbers:hover { background: var(--di-accent); color: var(--di-on-accent); border-color: var(--di-accent); }

.di-comments { margin-top: 50px; max-width: 74ch; }
.di-comment-list { list-style: none; padding: 0; }
.di-comment-list .children { list-style: none; padding-left: 24px; }
.di-comments .comment-form input[type="text"],
.di-comments .comment-form input[type="email"],
.di-comments .comment-form input[type="url"],
.di-comments .comment-form textarea {
	width: 100%; padding: 12px 14px; font: inherit;
	border: 1px solid var(--di-line); border-radius: var(--di-radius-sm);
}

/* ----------------------------------------------------------------- 404 */
.di-404 { text-align: center; padding-top: clamp(70px, 10vw, 140px); }
.di-404 .di-lede { margin-left: auto; margin-right: auto; }
.di-404 .di-searchform { margin: 0 auto 26px; }
.di-404__code { font-family: var(--di-display); font-size: clamp(70px, 14vw, 150px); line-height: 1; color: var(--di-accent-soft); margin: 0; }
.di-404__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ----------------------------------------------------------------- footer */
.di-footer { background: var(--di-dark); color: rgba(255,255,255,.72); padding-top: clamp(46px, 6vw, 80px); }
.di-footer__top {
	display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
	gap: clamp(26px, 4vw, 54px); padding-bottom: clamp(34px, 5vw, 50px);
}
.di-footer a { color: rgba(255,255,255,.78); }
.di-footer a:hover { color: var(--di-accent); }
.di-footer__heading {
	font-size: 17px; color: #fff; margin: 0 0 18px;
	font-family: var(--di-display); font-weight: var(--di-h-weight);
	letter-spacing: var(--di-h-spacing); text-transform: var(--di-h-transform);
}
.di-footer__heading .di-icon { display: none; }
.di-footer__about { font-size: 14.5px; margin: 16px 0; max-width: 40ch; line-height: 1.7; }
.di-footer__logo img { max-height: 58px; width: auto; }
.di-footer__social { display: flex; gap: 10px; flex-wrap: wrap; }
.di-footer__social a {
	display: grid; place-items: center; width: 38px; height: 38px;
	border: 1px solid rgba(255,255,255,.18); border-radius: 50%;
	transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.di-footer__social a:hover { background: var(--di-accent); border-color: var(--di-accent); color: #fff; transform: translateY(-2px); }
.di-footer__menu, .di-footer__contact, .di-footer__legal { list-style: none; margin: 0; padding: 0; }
.di-footer__menu li + li { margin-top: 10px; }
.di-footer__menu a, .di-footer__contact { font-size: 14.5px; }
.di-footer__menu a { display: inline-block; }
.di-footer__contact li { display: flex; gap: 11px; margin-bottom: 14px; line-height: 1.65; }
.di-footer__contact .di-icon { color: var(--di-accent); margin-top: 3px; flex: none; }
/* One column so the WhatsApp card and the Book now button are the same
   width. Side by side they sized to their own content and looked mismatched. */
.di-footer__actions { display: grid; gap: 10px; margin-top: 4px; }
.di-footer__actions .di-btn { margin: 0; width: 100%; }
.di-footer .di-btn--line { border-color: rgba(255,255,255,.28); color: #fff; }
.di-footer .di-btn--line:hover { border-color: var(--di-accent); color: var(--di-accent); background: transparent; }

.di-footer__bottom {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
	padding: 20px 0; border-top: 1px solid rgba(255,255,255,.12);
	font-size: 13.5px;
}
.di-footer__bottom p { margin: 0; }
.di-footer__legal { display: flex; gap: 18px; flex-wrap: wrap; }

/* Accordion columns. Desktop always shows the panel; the toggle is phone only. */
.di-footer__panel { display: block; }

@media (max-width: 1000px) {
	.di-footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
	.di-footer__top { grid-template-columns: 1fr; gap: 0; }
	.di-footer__col--brand { padding-bottom: 22px; }

	.di-footer--foldable .di-footer__col:not(.di-footer__col--brand) {
		border-top: 1px solid rgba(255,255,255,.12);
	}
	.di-footer--foldable .di-footer__heading {
		display: flex; align-items: center; justify-content: space-between;
		gap: 12px; width: 100%;
		margin: 0; padding: 16px 2px; cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.di-footer--foldable .di-footer__heading .di-icon {
		display: block; flex: none; color: var(--di-accent);
		transition: transform .22s ease;
	}
	.di-footer--foldable .di-footer__heading[aria-expanded="true"] .di-icon { transform: rotate(45deg); }

	.di-footer--foldable .di-footer__panel {
		display: grid; grid-template-rows: 0fr;
		transition: grid-template-rows .26s ease;
	}
	.di-footer--foldable .di-footer__panel > * { min-height: 0; overflow: hidden; }
	.di-footer--foldable .di-footer__panel.is-open { grid-template-rows: 1fr; }
	.di-footer--foldable .di-footer__panel.is-open > * { padding-bottom: 18px; }

	/* No JS: show everything rather than hide it. */
	.no-js .di-footer--foldable .di-footer__panel { grid-template-rows: 1fr; }
	.no-js .di-footer--foldable .di-footer__heading .di-icon { display: none; }

	.di-footer__bottom { justify-content: center; text-align: center; }
	.di-footer__legal { justify-content: center; }
}

/* Floating WhatsApp bubble — only printed when the option is on. */
.di-float-wa {
	position: fixed; right: 18px; bottom: 18px; z-index: 70;
	display: grid; place-items: center; width: 54px; height: 54px;
	border-radius: 50%; background: var(--di-wa); color: #fff;
	box-shadow: 0 10px 26px rgba(0,0,0,.24);
	transition: transform .18s ease;
}
.di-float-wa:hover { color: #fff; transform: translateY(-3px); }

/* Back to top. */
.di-to-top {
	position: fixed; right: 18px; bottom: 18px; z-index: 65;
	display: grid; place-items: center; width: 44px; height: 44px;
	border: 0; border-radius: 50%; cursor: pointer;
	background: var(--di-dark); color: #fff;
	box-shadow: 0 8px 22px rgba(0,0,0,.2);
	opacity: 0; transform: translateY(10px);
	transition: opacity .2s ease, transform .2s ease;
}
.di-to-top.is-on { opacity: 1; transform: none; }
.di-to-top:hover { background: var(--di-accent); }
.di-float-wa ~ .di-to-top { bottom: 84px; }

@media (max-width: 560px) {
	.di-float-wa { width: 50px; height: 50px; right: 14px; bottom: 14px; }
	.di-to-top { width: 40px; height: 40px; right: 14px; bottom: 14px; }
	.di-float-wa ~ .di-to-top { bottom: 76px; }
}

/* ----------------------------------------------------------------- mobile nav */
@media (max-width: 1024px) {
	.di-burger { display: inline-flex; }
	.di-header__cta { display: none; }

	.di-nav {
		position: fixed; top: 0; right: 0; bottom: 0; z-index: 58;
		width: min(360px, 88vw);
		background: var(--di-bg);
		padding: 92px 24px 32px;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform .28s ease;
		box-shadow: -20px 0 50px rgba(var(--di-ink-rgb), .18);
	}
	.di-nav.is-open { transform: none; }

	.di-menu { flex-direction: column; align-items: stretch; gap: 0; }
	.di-menu > li { border-bottom: 1px solid var(--di-line); }
	.di-menu > li > a { padding: 14px 4px; font-size: 16.5px; }
	.di-transparent-header .di-nav .di-menu > li > a { color: var(--di-ink); }
	.di-menu > li > a::after { display: none; }

	.di-menu li { position: relative; }
	.di-submenu {
		position: static; opacity: 1; visibility: visible; transform: none;
		border: 0; box-shadow: none; padding: 0 0 10px 14px;
		display: none; min-width: 0; background: transparent;
	}
	.di-submenu.is-open { display: block; }

	.di-submenu-toggle {
		display: grid; place-items: center;
		position: absolute; top: 6px; right: 0;
		width: 40px; height: 40px;
		background: transparent; border: 0; color: var(--di-ink); cursor: pointer;
	}
	.di-submenu-toggle[aria-expanded="true"] .di-icon { transform: rotate(180deg); }

	.di-nav__foot { display: grid; gap: 10px; margin-top: 26px; }
	.di-nav__foot .di-btn { width: 100%; justify-content: center; }
	.di-nav__foot .di-btn--wa { background: var(--di-wa); border-color: var(--di-wa); color: #fff; }
}
@media (min-width: 1025px) {
	.di-nav__foot { display: none; }
	.di-nav-scrim { display: none !important; }
}

/* Booking plugin sits inside the theme's rhythm. */
.di-rooms .hbp-slider, .di-rooms .hbp-rooms-list { padding-top: 0; }

/* =================================================================
   Sections added in 1.1: facilities, welcome, gallery, FAQ,
   services, about, rooms filter.
   ================================================================= */

.di-eyebrow {
	font-size: 13px; letter-spacing: .14em; color: var(--di-accent);
	margin: 0 0 14px;
}
.di-rule { position: relative; padding-bottom: 16px; }
.di-rule::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 62px; height: 2px; background: var(--di-accent);
}
.di-section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.di-section__head--center .di-lede { margin-left: auto; margin-right: auto; }
.di-section__head--split {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 24px; flex-wrap: wrap; max-width: none;
}
.di-section__head--split .di-lede { margin-bottom: 0; }

/* ------------------------------------------------------------ facilities */
.di-facilities { padding: var(--di-section-y) 0; background: var(--di-bg-alt); }
.di-facilities.has-bg {
	background-size: cover; background-position: center; background-attachment: scroll;
	color: #fff; position: relative; isolation: isolate;
}
.di-facilities.has-bg::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(rgba(var(--di-ink-rgb), .86), rgba(var(--di-ink-rgb), .9));
}
.di-facilities.has-bg .di-h2,
.di-facilities.has-bg .di-facility__title { color: #fff; }
.di-facilities.has-bg .di-lede,
.di-facilities.has-bg .di-facility__text { color: rgba(255,255,255,.76); }
.di-facilities.has-bg .di-facility { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }
.di-facilities.has-bg .di-facility__icon { background: rgba(255,255,255,.1); color: var(--di-accent); }

.di-facility-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.di-facility {
	background: var(--di-bg); border: 1px solid var(--di-line);
	border-radius: var(--di-radius); padding: 28px 26px;
}
.di-facility__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; margin-bottom: 16px;
	border-radius: 50%; background: var(--di-accent-soft); color: var(--di-accent-dark);
}
.di-facility__title { font-size: 19px; margin-bottom: 8px; }
.di-facility__text { margin: 0; font-size: 15px; color: var(--di-muted); }
@media (max-width: 960px) { .di-facility-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .di-facility-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ welcome */
.di-welcome__grid {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 5vw, 68px); align-items: center;
}
.di-welcome__media { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; }
.di-welcome__media img { width: 100%; border-radius: var(--di-radius); object-fit: cover; }
.di-welcome__img-1 { aspect-ratio: 3 / 4; }
.di-welcome__img-2 { aspect-ratio: 3 / 4; margin-top: 34px; }
.di-welcome__sub { color: var(--di-accent); font-family: var(--di-display); font-size: 19px; margin: -6px 0 14px; }
.di-welcome__body .di-btn { margin-top: 18px; }
@media (max-width: 860px) {
	.di-welcome__grid { grid-template-columns: 1fr; }
	.di-welcome__img-2 { margin-top: 0; }
}

/* ------------------------------------------------------------ gallery */
.di-gallery-section { background: var(--di-bg-alt); }
.di-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.di-gallery--page { grid-template-columns: repeat(3, 1fr); gap: 18px; }
.di-gallery__item {
	position: relative; display: block; overflow: hidden;
	border-radius: var(--di-radius); background: var(--di-bg-alt);
}
.di-gallery__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .35s ease; }
.di-gallery__item:hover img { transform: scale(1.05); }
.di-gallery__zoom {
	position: absolute; inset: 0; display: grid; place-items: center;
	background: rgba(var(--di-ink-rgb), .45); color: #fff;
	opacity: 0; transition: opacity .2s ease;
}
.di-gallery__item:hover .di-gallery__zoom,
.di-gallery__item:focus-visible .di-gallery__zoom { opacity: 1; }
@media (max-width: 900px) { .di-gallery, .di-gallery--page { grid-template-columns: 1fr 1fr; } }

.di-lightbox {
	position: fixed; inset: 0; z-index: 200;
	display: grid; place-items: center; padding: 28px;
	background: rgba(0,0,0,.88);
}
.di-lightbox img { max-width: min(1100px, 92vw); max-height: 86vh; width: auto; border-radius: 6px; }
.di-lightbox__btn {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 48px; height: 48px; display: grid; place-items: center;
	background: rgba(255,255,255,.12); color: #fff;
	border: 0; border-radius: 50%; cursor: pointer;
}
.di-lightbox__btn:hover { background: rgba(255,255,255,.24); }
.di-lightbox__prev { left: 16px; }
.di-lightbox__prev .di-icon { transform: rotate(90deg); }
.di-lightbox__next { right: 16px; }
.di-lightbox__next .di-icon { transform: rotate(-90deg); }
.di-lightbox__close { top: 18px; right: 18px; transform: none; }

/* ------------------------------------------------------------ FAQ */
.di-faq-section { background: var(--di-bg); }
.di-faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.di-faq__item {
	background: var(--di-bg); border: 1px solid var(--di-line);
	border-radius: var(--di-radius); overflow: hidden;
}
.di-faq__item[open] { border-color: var(--di-accent); }
.di-faq__q {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 18px 22px; cursor: pointer; list-style: none;
	font-weight: 600; color: var(--di-ink); font-size: 16.5px;
}
.di-faq__q::-webkit-details-marker { display: none; }
.di-faq__q .di-icon { flex: 0 0 auto; color: var(--di-accent); transition: transform .2s ease; }
.di-faq__item[open] .di-faq__q { color: var(--di-accent-dark); }
.di-faq__item[open] .di-faq__q .di-icon { transform: rotate(45deg); }
.di-faq__a { padding: 0 22px 20px; }
.di-faq__a p { margin: 0; color: var(--di-body); font-size: 15.5px; }

.di-faq-page { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: clamp(28px, 5vw, 60px); align-items: start; }
.di-faq-page__help {
	margin-top: 28px; padding: 24px;
	background: var(--di-bg-alt); border-radius: var(--di-radius);
}
.di-faq-page__help p { font-size: 15px; }
.di-faq-page .di-faq { max-width: none; }
@media (max-width: 900px) { .di-faq-page { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ services */
.di-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 34px; }
.di-tile {
	position: relative; min-height: 230px; display: flex; align-items: flex-end;
	border-radius: var(--di-radius); overflow: hidden;
	background: var(--di-accent-soft); background-size: cover; background-position: center;
}
.di-tile::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0) 60%);
}
.di-tile__label {
	position: relative; z-index: 1; margin: 20px;
	padding: 10px 18px; background: var(--di-dark); color: #fff;
	font-size: 15px; font-weight: 600; border-radius: 4px;
}
@media (max-width: 860px) { .di-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .di-tiles { grid-template-columns: 1fr; } }

.di-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.di-service {
	background: var(--di-bg); border: 1px solid var(--di-line);
	border-radius: var(--di-radius); padding: 28px 26px;
	transition: border-color .18s ease, transform .18s ease;
}
.di-service:hover { border-color: var(--di-accent); transform: translateY(-2px); }
.di-service__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; margin-bottom: 14px;
	border-radius: 14px;
	background: var(--di-accent-soft); color: var(--di-accent-dark);
}
.di-service__title { font-size: 19px; margin-bottom: 8px; }
.di-service__text { margin: 0; font-size: 15px; color: var(--di-muted); }
@media (max-width: 960px) { .di-service-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .di-service-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ about */
.di-about__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 66px); align-items: center; }
.di-about__intro { font-family: var(--di-display); font-size: clamp(18px, 1.8vw, 21px); color: var(--di-ink); }
.di-about__body p { margin: 0 0 1.1em; max-width: 68ch; }
.di-about__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.di-about__media { position: relative; }
.di-about__img-1 { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: var(--di-radius); }
.di-about__img-2 {
	width: 52%; aspect-ratio: 1; object-fit: cover;
	position: absolute; right: -18px; bottom: -32px;
	border: 8px solid var(--di-bg); border-radius: var(--di-radius);
	box-shadow: var(--di-shadow);
}
.di-about-long { background: var(--di-bg-alt); }
.di-about-long__cols { columns: 2; column-gap: clamp(28px, 4vw, 56px); }
.di-about-long__cols p { margin: 0 0 1.1em; break-inside: avoid; }
@media (max-width: 900px) {
	.di-about__grid { grid-template-columns: 1fr; }
	.di-about__img-2 { right: 0; bottom: -20px; width: 44%; }
	.di-about-long__cols { columns: 1; }
}

/* ------------------------------------------------------------ rooms page */
.di-rooms-page__search { margin-bottom: 26px; }
.di-room-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.di-chip {
	display: inline-flex; align-items: center; padding: 9px 18px;
	border: 1px solid var(--di-line); border-radius: 100px;
	font-size: 14.5px; font-weight: 600; color: var(--di-ink-soft);
	background: var(--di-bg);
}
.di-chip:hover { border-color: var(--di-accent); color: var(--di-accent); }
.di-chip.is-on { background: var(--di-accent); border-color: var(--di-accent); color: var(--di-on-accent); }

/* Long room dropdowns stay usable on desktop. */
.di-submenu { max-height: min(70vh, 520px); overflow-y: auto; }
.di-room-link a { display: flex; justify-content: space-between; gap: 14px; }
.di-room-link--all a { color: var(--di-accent); font-weight: 600; border-top: 1px solid var(--di-line); margin-top: 6px; padding-top: 12px; }
@media (max-width: 1024px) { .di-submenu { max-height: none; overflow: visible; } }

/* ------------------------------------------------------------ tablet */
@media (max-width: 1024px) {
	.di-section { padding: clamp(46px, 7vw, 68px) 0; }
	.di-section__head--split { align-items: flex-start; }
}

/* ------------------------------------------------------------ small screens */
@media (max-width: 782px) {
	body { font-size: 16px; }
	.di-section { padding: 46px 0; }

	/* Hero on phones. With the solid header the hero simply follows it, so a
	   flat pad is right. With the floating header the live --di-head-h value
	   is added, which already accounts for a hidden or compact top bar. */
	.di-hero {
		padding-top: clamp(34px, 9vw, 52px);
		padding-bottom: 40px;
		text-align: left;
	}
	.di-transparent-header .di-hero { padding-top: calc(var(--di-head-h) + 28px); }

	/* Height is whatever the copy needs, nothing more. A viewport-based
	   minimum here only adds dead space above the booking bar. */
	.di-hero--tall, .di-hero--full, .di-hero--compact { min-height: 0; }

	.di-hero__inner { max-width: 100%; }
	.di-hero__copy { max-width: 100%; }

	.di-hero__eyebrow { gap: 6px; margin-bottom: 14px; }
	.di-hero__eyebrow span { font-size: 11px; padding: 4px 10px; letter-spacing: .07em; }

	/* Still driven by the H1 size set in the dashboard, scaled down for the
	   narrow column and capped so a long headline cannot run away. */
	.di-hero__title {
		font-size: clamp(26px, calc(var(--di-fs-h1) * .64), 40px);
		line-height: 1.16;
		margin-bottom: 12px;
	}
	.di-hero__text { font-size: 15.5px; line-height: 1.6; max-width: 100%; margin-bottom: 0; }

	/* Two buttons on one row when they fit, which saves a whole row of height. */
	.di-hero__actions { gap: 10px; margin-top: 20px; }
	.di-hero__actions .di-btn { flex: 1 1 46%; min-width: 150px; justify-content: center; }

	/* Badges in two columns instead of one long wrapping line. */
	.di-hero__badges {
		display: grid; grid-template-columns: 1fr 1fr;
		gap: 8px 14px; margin-top: 18px; font-size: 13px;
	}

	.di-hero__dots { bottom: 14px; }
	.di-hero.has-search .di-hero__dots { display: none; }

	.di-banner { padding-top: 46px; }
	.di-transparent-header .di-banner { padding-top: calc(var(--di-head-h) + 34px); }
	.di-reviews__rail { grid-auto-columns: minmax(82%, 1fr); }
	.di-form-card { padding: 22px; }
	.di-section__head--split { gap: 14px; }
}

@media (max-width: 480px) {
	.di-hero__eyebrow { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.di-hero__eyebrow::-webkit-scrollbar { display: none; }
	.di-hero__badges { grid-template-columns: 1fr; gap: 8px; }
	.di-hero__actions .di-btn { flex: 1 1 100%; }
}

/* The booking plugin ships its own container widths; keep them inside ours. */
.di-rooms .hbp-slider,
.di-rooms-page .hbp-rooms-list,
.di-rooms-page .hbp-slider { max-width: var(--di-wrap); margin-inline: auto; }
.di-rooms-page .hbp-search-bar { box-shadow: var(--di-shadow-sm); }

/* Nothing on the page may push the viewport sideways. "clip" is used rather
   than "hidden" because hidden on html or body turns them into scroll
   containers, which quietly kills position: sticky on the header. */
html, body { max-width: 100%; overflow-x: clip; }
@supports not (overflow: clip) {
	body { overflow-x: hidden; }
}
img, table, pre { max-width: 100%; }
table { display: block; overflow-x: auto; }
.di-prose table { display: table; }

/* =================================================================
   2.0 — motion, hover and pointer effects.
   Everything here is decoration. It is written last so it can lift
   the earlier rules, and it is switched off wholesale for anyone who
   asks their system for reduced motion.
   ================================================================= */

/* ------------------------------------------------------------ buttons */
.di-btn {
	position: relative; overflow: hidden; isolation: isolate;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease,
		transform .2s cubic-bezier(.2, .7, .3, 1), box-shadow .2s ease;
}
.di-btn::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.28) 50%, transparent 80%);
	transform: translateX(-120%);
	transition: transform .55s ease;
}
.di-btn:hover::before { transform: translateX(120%); }
.di-btn:hover { transform: translateY(-2px); }
.di-btn:active { transform: translateY(0); transition-duration: .06s; }

.di-btn--solid:hover { box-shadow: 0 10px 24px rgba(var(--di-accent-rgb), .32); }
.di-btn--line:hover { box-shadow: 0 8px 20px rgba(var(--di-ink-rgb), .1); }
.di-btn--glass:hover { box-shadow: 0 10px 26px rgba(0,0,0,.24); }

/* The WhatsApp button gets its own treatment: a soft green glow, a lift,
   and a ring that pulses out of the mark once on hover. */
.di-btn--wa {
	background: linear-gradient(135deg, #25d366 0%, #1ebe5a 100%);
	border-color: transparent; color: #fff;
	box-shadow: 0 4px 14px rgba(37, 211, 102, .28);
}
.di-btn--wa:hover {
	background: linear-gradient(135deg, #2ae070 0%, #16a34a 100%);
	color: #fff; border-color: transparent;
	box-shadow: 0 12px 28px rgba(37, 211, 102, .42);
}
.di-btn--wa .di-icon {
	position: relative;
	transition: transform .25s cubic-bezier(.2, .7, .3, 1);
}
.di-btn--wa:hover .di-icon { transform: rotate(-8deg) scale(1.12); }

.di-footer .di-btn--wa { padding: 14px 22px; font-size: calc(var(--di-fs-btn) + .5px); }
.di-footer .di-btn--wa::after {
	content: ""; position: absolute; left: 22px; top: 50%;
	width: 20px; height: 20px; margin-top: -10px;
	border-radius: 50%; border: 2px solid rgba(255,255,255,.65);
	opacity: 0; pointer-events: none;
}
.di-footer .di-btn--wa:hover::after { animation: di-wa-ring .9s ease-out; }

@keyframes di-wa-ring {
	from { opacity: .8; transform: scale(.6); }
	to { opacity: 0; transform: scale(2.4); }
}

/* ------------------------------------------------------------ nav */
.di-menu > li > a { position: relative; transition: color .18s ease; }
.di-menu > li > a::after {
	content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px;
	height: 2px; border-radius: 2px; background: var(--di-accent);
	transform: scaleX(0); transform-origin: left;
	transition: transform .26s cubic-bezier(.2, .7, .3, 1);
}
.di-menu > li > a:hover::after,
.di-menu > .current-menu-item > a::after,
.di-menu > .current-menu-ancestor > a::after,
.di-menu > .current_page_parent > a::after,
.di-menu > .current_page_ancestor > a::after { transform: scaleX(1); }

.di-submenu a { transition: background-color .16s ease, color .16s ease, padding-left .16s ease; }
.di-submenu a:hover { padding-left: 16px; }

.di-icon-btn { transition: border-color .18s ease, color .18s ease, transform .18s ease, background-color .18s ease; }
.di-icon-btn:hover { transform: translateY(-2px); }
.di-burger .di-icon { transition: transform .22s ease; }
.di-burger:hover .di-icon { transform: scale(1.08); }

.di-topbar a { transition: color .18s ease, opacity .18s ease; }
.di-topbar__social { transition: transform .18s ease, opacity .18s ease; }
.di-topbar__social:hover { transform: translateY(-2px); }

/* ------------------------------------------------------------ cards */
/* One shared lift, and a light that follows the pointer across the card.
   The --di-mx / --di-my pair is written by the script on mousemove. */
.di-post-card,
.di-quick,
.di-facility,
.di-service,
.di-tile,
.di-review,
.di-side-card,
.di-widget {
	position: relative;
	transition: transform .26s cubic-bezier(.2, .7, .3, 1),
		box-shadow .26s ease, border-color .26s ease;
}
.di-post-card:hover,
.di-quick:hover,
.di-facility:hover,
.di-service:hover,
.di-review:hover {
	transform: translateY(-5px);
	box-shadow: 0 18px 38px rgba(var(--di-ink-rgb), .12);
	border-color: var(--di-accent);
}

.di-spotlight::after {
	content: ""; position: absolute; inset: 0; z-index: 0;
	border-radius: inherit; pointer-events: none;
	background: radial-gradient(
		220px circle at var(--di-mx, 50%) var(--di-my, 50%),
		rgba(var(--di-accent-rgb), .13), transparent 62%
	);
	opacity: 0; transition: opacity .3s ease;
}
.di-spotlight:hover::after { opacity: 1; }
.di-spotlight > * { position: relative; z-index: 1; }

/* Icon chips inside the feature cards. */
.di-facility__icon, .di-service__icon, .di-info-list__icon, .di-quick__icon {
	transition: transform .26s cubic-bezier(.2, .7, .3, 1), background-color .26s ease, color .26s ease;
}
.di-facility:hover .di-facility__icon,
.di-service:hover .di-service__icon,
.di-quick:hover .di-quick__icon {
	transform: translateY(-3px) rotate(-6deg) scale(1.06);
	background: var(--di-accent); color: var(--di-on-accent);
}
.di-quick--wa:hover .di-quick__icon { background: var(--di-wa); color: #fff; }

/* ------------------------------------------------------------ images */
.di-gallery__item,
.di-intro__media img,
.di-welcome__media img,
.di-about__media img,
.di-stats__media img { overflow: hidden; }

.di-gallery__item img { transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
.di-gallery__item:hover img { transform: scale(1.06); }
.di-gallery__zoom { transition: opacity .25s ease, transform .25s ease; }
.di-gallery__item:hover .di-gallery__zoom { transform: scale(1.08); }

.di-intro__media, .di-welcome__media, .di-about__media { overflow: visible; }
.di-intro__img-main, .di-intro__img-second,
.di-welcome__img-1, .di-welcome__img-2,
.di-about__img-1, .di-about__img-2 {
	overflow: hidden; border-radius: var(--di-radius);
	transition: transform .4s cubic-bezier(.2, .7, .3, 1), box-shadow .4s ease;
}
.di-intro__img-main:hover, .di-welcome__img-1:hover, .di-about__img-1:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 44px rgba(var(--di-ink-rgb), .16);
}

/* ------------------------------------------------------------ links */
.di-link { position: relative; }
.di-link--arrow .di-icon { transition: transform .22s cubic-bezier(.2, .7, .3, 1); }
.di-link--arrow:hover .di-icon { transform: translateX(5px); }

.di-footer__menu a { position: relative; display: inline-block; transition: transform .2s ease, color .18s ease; }
.di-footer__menu a::before {
	content: ""; position: absolute; left: -12px; top: 50%;
	width: 6px; height: 1px; background: var(--di-accent);
	transform: scaleX(0); transform-origin: left;
	transition: transform .2s ease;
}
.di-footer__menu a:hover { transform: translateX(8px); }
.di-footer__menu a:hover::before { transform: scaleX(1); }

.di-footer__contact a { transition: color .18s ease; }
.di-footer__social a { transition: background-color .2s ease, border-color .2s ease, transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease; }
.di-footer__social a:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 8px 18px rgba(0,0,0,.28); }

.di-taglist a { transition: background-color .18s ease, color .18s ease, transform .18s ease; }
.di-taglist a:hover { transform: translateY(-2px); }

.di-chip { transition: border-color .18s ease, color .18s ease, background-color .18s ease, transform .18s ease; }
.di-chip:hover { transform: translateY(-2px); }

.di-share__btn { transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .22s cubic-bezier(.2,.7,.3,1); }
.di-share__btn:hover { transform: translateY(-3px) scale(1.05); }

.di-toc__item a { transition: color .16s ease, transform .16s ease; }
.di-toc__item a:hover { transform: translateX(3px); }

.di-hero__badges li { transition: transform .2s ease; }
.di-hero__badges li:hover { transform: translateX(3px); }
.di-hero__eyebrow span { transition: background-color .22s ease, border-color .22s ease, transform .22s ease; }
.di-hero__eyebrow span:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }

.di-float-wa { transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease; }
.di-float-wa:hover { transform: translateY(-4px) scale(1.06); box-shadow: 0 16px 34px rgba(37,211,102,.45); }
.di-to-top:hover { transform: translateY(-3px); }

/* ------------------------------------------------------------ reveal */
/* Sections fade up the first time they scroll into view. The class is
   added by the script, so a page with JS off shows everything at once. */
/* The classes are only ever added by the script, so a page without JS never
   hides anything. This belt-and-braces rule covers the moment between the
   stylesheet loading and the script running. */
.no-js .di-reveal, .no-js .di-reveal-stagger > * { opacity: 1; transform: none; }

.di-reveal { opacity: 0; transform: translateY(22px); }
.di-reveal.is-in {
	opacity: 1; transform: none;
	transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
}
.di-reveal-stagger > * { opacity: 0; transform: translateY(18px); }
.di-reveal-stagger.is-in > * {
	opacity: 1; transform: none;
	transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
}
.di-reveal-stagger.is-in > *:nth-child(2) { transition-delay: .07s; }
.di-reveal-stagger.is-in > *:nth-child(3) { transition-delay: .14s; }
.di-reveal-stagger.is-in > *:nth-child(4) { transition-delay: .21s; }
.di-reveal-stagger.is-in > *:nth-child(5) { transition-delay: .28s; }
.di-reveal-stagger.is-in > *:nth-child(6) { transition-delay: .35s; }
.di-reveal-stagger.is-in > *:nth-child(n+7) { transition-delay: .42s; }

/* Focus stays obvious for keyboard users through all of the above. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var(--di-accent);
	outline-offset: 3px;
	border-radius: 3px;
}

/* Touch screens have no hover, so the lift is dropped rather than left
   stuck on after a tap. */
/* A touch screen has no pointer to hover with. Tapping a card fires :hover
   and then leaves it stuck, so every decorative hover is dropped here. */
@media (hover: none) {
	.di-btn:hover, .di-post-card:hover, .di-quick:hover, .di-facility:hover,
	.di-service:hover, .di-review:hover, .di-footer__menu a:hover,
	.di-footer__social a:hover, .di-share__btn:hover,
	.di-chip:hover, .di-taglist a:hover, .di-toc__item a:hover,
	.di-hero__badges li:hover, .di-hero__eyebrow span:hover,
	.di-icon-btn:hover, .di-topbar__social:hover,
	.di-float-wa:hover, .di-wa-cta:hover, .di-swipe-arrow:hover:not(:disabled) { transform: none; }

	.di-facility:hover .di-facility__icon,
	.di-service:hover .di-service__icon,
	.di-quick:hover .di-quick__icon,
	.di-wa-cta:hover .di-wa-cta__mark {
		transform: none;
		background: var(--di-accent-soft); color: var(--di-accent-dark);
	}
	.di-quick--wa:hover .di-quick__icon { background: var(--di-wa); color: #fff; }
	.di-wa-cta:hover .di-wa-cta__mark { background: rgba(255,255,255,.18); color: #fff; }

	.di-gallery__item:hover img,
	.di-intro__img-main:hover, .di-welcome__img-1:hover, .di-about__img-1:hover { transform: none; }

	.di-spotlight::after { display: none; }
	.di-btn::before, .di-wa-cta::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.di-reveal, .di-reveal-stagger > * { opacity: 1 !important; transform: none !important; }
	.di-btn::before, .di-spotlight::after { display: none; }
	.di-footer .di-btn--wa:hover::after { animation: none; }
}

/* ------------------------------------------------- footer WhatsApp card */
/* A proper card rather than a plain button: the mark sits in its own tile,
   the number is readable at a glance, and the whole thing lifts and lights
   up under the cursor. */
.di-wa-cta {
	position: relative; isolation: isolate; overflow: hidden;
	display: flex; align-items: center; gap: 14px;
	width: 100%;
	padding: 13px 16px;
	border-radius: var(--di-radius-sm);
	background: linear-gradient(135deg, #25d366 0%, #17a34a 100%);
	color: #fff;
	box-shadow: 0 6px 18px rgba(37, 211, 102, .26);
	transition: transform .26s cubic-bezier(.2, .7, .3, 1), box-shadow .26s ease;
}
.di-wa-cta::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(115deg, transparent 22%, rgba(255,255,255,.3) 50%, transparent 78%);
	transform: translateX(-120%);
	transition: transform .6s ease;
}
.di-wa-cta:hover {
	color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 16px 34px rgba(37, 211, 102, .42);
}
.di-wa-cta:hover::before { transform: translateX(120%); }

.di-wa-cta__mark {
	position: relative;
	display: grid; place-items: center; flex: 0 0 auto;
	width: 44px; height: 44px; border-radius: 14px;
	background: rgba(255,255,255,.18);
	transition: transform .3s cubic-bezier(.2, .7, .3, 1), background-color .3s ease;
}
.di-wa-cta__mark::after {
	content: ""; position: absolute; inset: 0;
	border-radius: inherit; border: 2px solid rgba(255,255,255,.7);
	opacity: 0;
}
.di-wa-cta:hover .di-wa-cta__mark {
	background: rgba(255,255,255,.28);
	transform: rotate(-8deg) scale(1.06);
}
.di-wa-cta:hover .di-wa-cta__mark::after { animation: di-wa-ring 1s ease-out; }

.di-wa-cta__copy { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.di-wa-cta__label {
	font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
	color: rgba(255,255,255,.8);
}
.di-wa-cta__value {
	font-family: var(--di-btn-font);
	font-size: 15.5px; font-weight: 700; letter-spacing: .01em;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.di-wa-cta__mark { width: 40px; height: 40px; border-radius: 12px; }
.di-wa-cta__go {
	margin-left: auto; flex: 0 0 auto;
	display: grid; place-items: center;
	opacity: .8; transition: transform .26s cubic-bezier(.2, .7, .3, 1), opacity .26s ease;
}
.di-wa-cta:hover .di-wa-cta__go { transform: translateX(4px); opacity: 1; }

@media (hover: none) {
	.di-wa-cta:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.di-wa-cta::before { display: none; }
	.di-wa-cta:hover .di-wa-cta__mark::after { animation: none; }
}

/* --------------------------------------------------- hero without copy */
/* Video or slider on its own. With no text to keep readable the section
   just needs a sensible height, so it is driven by the chosen height
   setting rather than by the copy inside it. */
.di-hero--bare { padding-top: 0; padding-bottom: 0; }
.di-hero--bare.di-hero--compact { min-height: min(48vh, 420px); }
.di-hero--bare.di-hero--tall { min-height: min(72vh, 660px); }
.di-hero--bare.di-hero--full { min-height: 88vh; min-height: 88svh; }
.di-hero--bare .di-hero__dots { bottom: clamp(18px, 3vw, 30px); }

@media (max-width: 1024px) {
	.di-hero--bare.di-hero--tall { min-height: min(56vh, 460px); }
	.di-hero--bare.di-hero--full { min-height: min(70vh, 560px); }
}
@media (max-width: 782px) {
	.di-hero--bare { padding-top: 0; padding-bottom: 0; }
	.di-hero--bare.di-hero--compact { min-height: 240px; }
	.di-hero--bare.di-hero--tall { min-height: 320px; }
	.di-hero--bare.di-hero--full { min-height: 400px; }
}

/* =================================================================
   Swipeable card rows.
   Below 1024px the card grids become a side-scrolling row that snaps
   card by card: three across on a tablet, two on a small tablet, one
   at a time on a phone. Desktop keeps the ordinary grid. Native
   scroll-snap does the work, so the momentum and the scrollbar
   behaviour are the ones the device already uses.
   ================================================================= */
.di-swipe-wrap { position: relative; }

@media (max-width: 1024px) {
	.di-cards-swipe .di-post-grid,
	.di-cards-swipe .di-facility-grid,
	.di-cards-swipe .di-service-grid,
	.di-cards-swipe .di-amenity-grid,
	.di-cards-swipe .di-tiles,
	.di-cards-swipe .di-gallery {
		display: grid !important;
		grid-auto-flow: column;
		grid-template-columns: none !important;
		grid-auto-columns: var(--di-swipe-col, calc((100% - 32px) / 3));
		gap: 16px;

		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;

		/* Room for the card shadow and lift, without a visible scrollbar. */
		padding-bottom: 10px;
		scrollbar-width: none;
	}

	.di-cards-swipe .di-post-grid::-webkit-scrollbar,
	.di-cards-swipe .di-facility-grid::-webkit-scrollbar,
	.di-cards-swipe .di-service-grid::-webkit-scrollbar,
	.di-cards-swipe .di-amenity-grid::-webkit-scrollbar,
	.di-cards-swipe .di-tiles::-webkit-scrollbar,
	.di-cards-swipe .di-gallery::-webkit-scrollbar { display: none; }

	.di-cards-swipe .di-post-grid > *,
	.di-cards-swipe .di-facility-grid > *,
	.di-cards-swipe .di-service-grid > *,
	.di-cards-swipe .di-amenity-grid > *,
	.di-cards-swipe .di-tiles > *,
	.di-cards-swipe .di-gallery > * {
		scroll-snap-align: start;
		min-width: 0;
		height: auto;
	}

	/* The sidebar layout on the blog keeps its own two-column rule, so the
	   grid there is left alone rather than turned into a rail. */
	.di-cards-swipe .di-blog-layout.has-sidebar .di-post-grid {
		display: grid !important;
		grid-auto-flow: row;
		overflow: visible;
	}
}

@media (max-width: 782px) {
	.di-cards-swipe .di-post-grid,
	.di-cards-swipe .di-facility-grid,
	.di-cards-swipe .di-service-grid,
	.di-cards-swipe .di-amenity-grid,
	.di-cards-swipe .di-tiles,
	.di-cards-swipe .di-gallery { --di-swipe-col: calc((100% - 16px) / 2); }
}

@media (max-width: 600px) {
	/* One card at a time, with a sliver of the next one showing so it is
	   obvious there is more to swipe to. */
	.di-cards-swipe .di-post-grid,
	.di-cards-swipe .di-facility-grid,
	.di-cards-swipe .di-service-grid,
	.di-cards-swipe .di-amenity-grid,
	.di-cards-swipe .di-tiles { --di-swipe-col: 87%; }

	.di-cards-swipe .di-gallery { --di-swipe-col: 74%; }
}

/* ------------------------------------------------------- rail controls */
/* Arrows and dots are built by the script, and only for a row that really
   overflows. A row of three cards on a tablet that already fits gets none. */
.di-swipe-nav {
	display: flex; align-items: center; justify-content: space-between;
	gap: 14px; margin-top: 16px;
}
.di-swipe-dots { display: flex; flex-wrap: wrap; gap: 7px; }
.di-swipe-dot {
	width: 8px; height: 8px; padding: 0;
	border: 0; border-radius: 50%; cursor: pointer;
	background: var(--di-line);
	transition: background-color .2s ease, width .2s ease;
}
.di-swipe-dot.is-on { background: var(--di-accent); width: 22px; border-radius: 4px; }

.di-swipe-arrows { display: flex; gap: 8px; margin-left: auto; }
.di-swipe-arrow {
	display: grid; place-items: center;
	width: 42px; height: 42px; padding: 0;
	background: var(--di-bg); color: var(--di-ink);
	border: 1px solid var(--di-line); border-radius: 50%;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.di-swipe-arrow:hover:not(:disabled) {
	background: var(--di-accent); border-color: var(--di-accent);
	color: var(--di-on-accent); transform: translateY(-2px);
}
.di-swipe-arrow:disabled { opacity: .35; cursor: default; }
.di-swipe-arrow svg { width: 18px; height: 18px; }
.di-swipe-arrow--prev svg { transform: rotate(180deg); }

/* On the dark sections the controls follow the background. */
.di-rooms .di-swipe-arrow,
.di-gallery-section .di-swipe-arrow { background: var(--di-bg); }

@media (max-width: 600px) {
	.di-swipe-nav { margin-top: 14px; }
	.di-swipe-arrow { width: 38px; height: 38px; }
}

/* ------------------------------------------------- buttons on phones */
/* Every button spans the column, so the tap target is the full width of
   the content and two buttons never end up as odd stubs beside each other.
   The exceptions are the controls that are icons by design — slider arrows,
   the burger, the search toggle — which stay their own size. */
@media (max-width: 600px) {
	.di-btn,
	.di-wa-cta,
	.wp-block-button__link,
	.wp-element-button,
	.wpcf7-submit,
	.wpforms-submit,
	.hbp-btn,
	.hbp-sb-btn,
	.hbp-list-btn,
	.hbp-rc-btn,
	.hbp-lr-btn,
	.hbp-slide-btn,
	.hbp-avail-btn,
	.hbp-cta-btn,
	.hbp-pager-btn {
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	.di-hero__actions,
	.di-intro__actions,
	.di-about__actions,
	.di-cta-band__actions,
	.di-section__head--split .di-btn,
	.di-footer__actions { width: 100%; }

	.di-hero__actions,
	.di-intro__actions,
	.di-about__actions,
	.di-cta-band__actions { display: grid; gap: 10px; }

	/* Icon-only controls keep their shape. */
	.di-swipe-arrow,
	.di-icon-btn,
	.di-burger,
	.di-hero__dot,
	.di-to-top,
	.di-float-wa,
	.di-share__btn,
	.hbp-slider-arrow,
	.hbp-gallery-arrow,
	.hbp-rc-nav { width: auto; }

	.di-swipe-arrow { width: 38px; }
	.di-to-top { width: 44px; }
}

/* --------------------------------------------------------- brand logos */
/* The width comes from the dashboard as an inline style; height follows the
   image so a logo of any proportion stays undistorted. */
.di-brand__logo { display: inline-flex; line-height: 0; }
.di-brand__logo img,
.di-header .custom-logo-link img {
	height: auto; max-width: 100%;
	display: block;
	max-height: 64px; object-fit: contain; object-position: left center;
}
.di-footer__logo { display: inline-flex; line-height: 0; margin-bottom: 18px; }
.di-footer__logo img {
	height: auto; max-width: 100%;
	display: block;
	max-height: 56px; object-fit: contain; object-position: left center;
}

@media (max-width: 782px) {
	.di-brand__logo img,
	.di-header .custom-logo-link img { max-height: 46px; }
	.di-footer__logo img { max-height: 48px; }
}

/* ------------------------------------------------------- footer credit */
.di-footer__credit {
	margin: 0;
	font-size: 13.5px;
	color: rgba(255,255,255,.6);
}
.di-footer__credit a {
	color: rgba(255,255,255,.78);
	text-decoration: none;
	border-bottom: 1px solid rgba(255,255,255,.22);
	padding-bottom: 1px;
	transition: color .18s ease, border-color .18s ease;
}
.di-footer__credit a:hover {
	color: var(--di-accent-soft);
	border-color: var(--di-accent-soft);
}

/* The bottom bar now holds three things, so it wraps rather than squeezing. */
.di-footer__bottom { flex-wrap: wrap; row-gap: 12px; }

@media (max-width: 782px) {
	.di-footer__bottom { flex-direction: column; text-align: center; }
	.di-footer__legal { justify-content: center; }
	.di-footer__credit { width: 100%; }
}