/* =========================================================
   Dream Home Design Studios - main stylesheet
   Brand palette + type from the Dream Home Design Studios brand guide.
   ========================================================= */

@font-face {
	font-family: 'Glacial Indifference';
	src: url('../fonts/GlacialIndifference-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Glacial Indifference';
	src: url('../fonts/GlacialIndifference-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Primary palette */
	--dhds-rose: #E2A09B;
	--dhds-peach: #E8B388;
	--dhds-mustard: #D5C884;
	--dhds-sage: #BDC9B4;
	--dhds-teal: #7CB2AE;

	/* Accent */
	--dhds-mauve: #A37780;
	--dhds-rust: #874A36;
	--dhds-tan: #C5A08D;
	--dhds-bright-teal: #0097B2;

	/* Neutral */
	--dhds-slate: #566874;
	--dhds-gray: #737373;
	--dhds-cream: #F4F2EF;
	--dhds-white: #FFFFFF;
	--dhds-black: #000000;

	--dhds-font-body: 'Glacial Indifference', 'Century Gothic', Futura, sans-serif;
	--dhds-font-heading: 'Cormorant Garamond', Georgia, serif;

	--dhds-max-width: 1200px;
	--dhds-radius: 10px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Safety net: if any one component ever overflows the viewport width,
   this stops it from forcing the whole page into horizontal scroll/zoom
   on mobile (the "have to zoom out to see it" symptom). */
html, body { overflow-x: hidden; }
body {
	margin: 0;
	font-family: var(--dhds-font-body);
	color: var(--dhds-slate);
	background: var(--dhds-cream);
	line-height: 1.6;
	font-size: 17px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--dhds-teal); text-decoration: none; }
a:hover { color: var(--dhds-sage); }

/* Brand guide: Cormorant Garamond headings are regular weight - bold is
   reserved for Glacial Indifference (Title/Subtitle) roles only. */
h1, h2, h3, h4, h5 {
	font-family: var(--dhds-font-heading);
	font-weight: 400;
	color: var(--dhds-slate);
	line-height: 1.2;
	margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: 1.5rem; }
.dhds-accent {
	font-style: italic;
	font-weight: 500;
}
/* "What We Do" style heading: large Cormorant Garamond italic. */
.dhds-heading-italic-lg {
	font-style: italic;
	font-weight: 500;
	font-size: clamp(2.2rem, 4.5vw, 3.2rem);
}

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}
.dhds-skip-link:focus {
	position: fixed; top: 8px; left: 8px;
	width: auto; height: auto; clip: auto;
	background: var(--dhds-white); padding: 12px 16px; z-index: 9999;
	border-radius: 6px;
}

.dhds-container {
	max-width: var(--dhds-max-width);
	margin: 0 auto;
	padding: 0 24px;
}

.dhds-btn {
	display: inline-block;
	font-family: var(--dhds-font-body);
	font-weight: 700;
	padding: 14px 30px;
	border-radius: 999px;
	background: var(--dhds-mauve);
	color: var(--dhds-white);
	border: none;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease;
}
.dhds-btn:hover { background: var(--dhds-rust); color: var(--dhds-white); transform: translateY(-1px); }
.dhds-btn--outline {
	background: transparent;
	border: 2px solid var(--dhds-white);
	color: var(--dhds-white);
}
.dhds-btn--outline:hover { background: var(--dhds-white); color: var(--dhds-slate); }
.dhds-btn--teal { background: var(--dhds-bright-teal); }
.dhds-btn--teal:hover { background: var(--dhds-teal); }

/* ---------- Header ---------- */
.dhds-site-header {
	background: var(--dhds-white);
	border-bottom: 1px solid #eee;
	position: sticky;
	top: 0;
	z-index: 500;
}
.dhds-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 14px;
	padding-bottom: 14px;
}
.dhds-logo { display: flex; align-items: center; }
.dhds-logo img,
.dhds-logo .custom-logo {
	max-height: 60px;
	height: 60px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
	display: block;
	border-radius: 15px;
}

.dhds-nav-list {
	list-style: none;
	display: flex;
	gap: 30px;
	margin: 0;
	padding: 0;
}
.dhds-nav-list a {
	font-family: var(--dhds-font-body);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: opacity 0.2s ease;
}
/* Each menu item gets its own color from the primary brand palette. */
.dhds-nav-list li:nth-child(1) a { color: var(--dhds-rose); }
.dhds-nav-list li:nth-child(2) a { color: var(--dhds-peach); }
.dhds-nav-list li:nth-child(3) a { color: var(--dhds-mustard); }
.dhds-nav-list li:nth-child(4) a { color: var(--dhds-sage); }
.dhds-nav-list li:nth-child(5) a { color: var(--dhds-teal); }
.dhds-nav-list li:nth-child(6) a { color: var(--dhds-mauve); }
.dhds-nav-list a:hover { opacity: 0.6; }

.dhds-menu-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}
.dhds-menu-toggle span {
	display: block;
	width: 26px;
	height: 3px;
	background: var(--dhds-slate);
	border-radius: 2px;
}

@media (max-width: 860px) {
	.dhds-menu-toggle { display: flex; }
	.dhds-primary-nav {
		display: none;
		width: 100%;
		order: 3;
	}
	.dhds-primary-nav.is-open { display: block; }
	.dhds-nav-list {
		flex-direction: column;
		gap: 4px;
		padding: 16px 0;
	}
	.dhds-nav-list a { display: block; padding: 10px 0; }
	.dhds-site-header__inner { flex-wrap: wrap; }
}

/* ---------- Hero ---------- */
.dhds-hero {
	position: relative;
	min-height: 78vh;
	padding: 60px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-size: cover;
	background-position: center;
	color: var(--dhds-white);
}
.dhds-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(86,104,116,0.35) 0%, rgba(86,104,116,0.65) 100%);
}
.dhds-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 760px;
	padding: 0 24px;
}
.dhds-hero h1, .dhds-hero p { color: var(--dhds-white); }
/* Hero headline: Glacial Indifference bold, all caps - the rest of the
   hero (eyebrow, body copy) stays on the Cormorant Garamond/body mix. */
.dhds-hero__headline {
	font-family: var(--dhds-font-body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.dhds-hero__eyebrow {
	font-family: var(--dhds-font-heading);
	font-style: italic;
	font-size: 1.3rem;
	margin-bottom: 0.4em;
	display: block;
}
.dhds-hero__cta { margin-top: 28px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 600px) { .dhds-hero { min-height: 60vh; } }
/* Hero-specific button treatment: "Book a Stay" gets a mauve-to-rose
   gradient (darker pink to lighter pink) instead of the flat mauve used
   elsewhere; "Explore Our Services" gets its own blue-to-sage gradient
   below instead of the default flat/outline look. */
.dhds-hero__cta .dhds-btn {
	background: linear-gradient(135deg, var(--dhds-mauve), var(--dhds-rose));
}
.dhds-hero__cta .dhds-btn:hover {
	background: var(--dhds-peach);
	color: var(--dhds-white);
}
/* "Explore Our Services": gradient fill (primary blue to light sage green)
   instead of the transparent/white-outline look, reversing direction on
   hover. The compound class selector keeps this specific to this one
   button rather than every .dhds-btn--outline site-wide. */
.dhds-hero__cta .dhds-btn.dhds-btn--outline {
	background: linear-gradient(135deg, var(--dhds-teal), var(--dhds-sage));
	border: none;
	color: var(--dhds-white);
}
.dhds-hero__cta .dhds-btn.dhds-btn--outline:hover {
	background: linear-gradient(135deg, var(--dhds-sage), var(--dhds-teal));
	color: var(--dhds-white);
}
@media (max-width: 480px) {
	.dhds-hero__cta { flex-direction: column; align-items: stretch; }
	.dhds-hero__cta .dhds-btn { text-align: center; }
}

/* ---------- Sections ---------- */
.dhds-section { padding: 80px 0; }
.dhds-section--cream { background: var(--dhds-cream); }
.dhds-section-heading { text-align: center; max-width: 700px; margin: 0 auto 50px; }
.dhds-section-heading p { color: var(--dhds-gray); }
@media (max-width: 600px) {
	.dhds-container { padding: 0 18px; }
	.dhds-section { padding: 50px 0; }
	.dhds-guide-section { padding: 50px 0; }
	.dhds-section-heading { margin: 0 auto 32px; }
}

/* ---------- Services ---------- */
.dhds-services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 28px;
}
.dhds-service-card {
	background: var(--dhds-white);
	border-radius: var(--dhds-radius);
	border-top: 4px solid var(--dhds-sage);
	padding: 32px 24px;
	text-align: center;
	box-shadow: 0 4px 18px rgba(86,104,116,0.08);
	transition: transform 0.2s ease;
}
.dhds-service-card:hover { transform: translateY(-4px); }
.dhds-service-card__icon {
	width: 60px; height: 60px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: var(--dhds-white);
	border: 3px solid var(--dhds-sage);
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 2px 10px rgba(86,104,116,0.1);
}
.dhds-service-card__icon img {
	width: 28px;
	height: 28px;
	object-fit: contain;
}
.dhds-service-card p { color: var(--dhds-gray); font-size: 0.95rem; }
/* Each service card picks up its own color from the primary palette,
   matching the treatment already used in the nav. */
.dhds-services-grid .dhds-service-card:nth-child(5n+1) { border-top-color: var(--dhds-rose); }
.dhds-services-grid .dhds-service-card:nth-child(5n+1) .dhds-service-card__icon { border-color: var(--dhds-rose); }
.dhds-services-grid .dhds-service-card:nth-child(5n+2) { border-top-color: var(--dhds-peach); }
.dhds-services-grid .dhds-service-card:nth-child(5n+2) .dhds-service-card__icon { border-color: var(--dhds-peach); }
.dhds-services-grid .dhds-service-card:nth-child(5n+3) { border-top-color: var(--dhds-mustard); }
.dhds-services-grid .dhds-service-card:nth-child(5n+3) .dhds-service-card__icon { border-color: var(--dhds-mustard); }
.dhds-services-grid .dhds-service-card:nth-child(5n+4) { border-top-color: var(--dhds-sage); }
.dhds-services-grid .dhds-service-card:nth-child(5n+4) .dhds-service-card__icon { border-color: var(--dhds-sage); }
.dhds-services-grid .dhds-service-card:nth-child(5n+5) { border-top-color: var(--dhds-teal); }
.dhds-services-grid .dhds-service-card:nth-child(5n+5) .dhds-service-card__icon { border-color: var(--dhds-teal); }

/* ---------- Property cards ---------- */
.dhds-properties-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 32px;
}
.dhds-property-card {
	display: block;
	background: var(--dhds-white);
	border-radius: var(--dhds-radius);
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(86,104,116,0.1);
	color: inherit;
	transition: transform 0.2s ease;
}
.dhds-property-card:hover { transform: translateY(-4px); }
.dhds-property-card__image {
	height: 240px;
	background-size: cover;
	background-position: center;
	position: relative;
}
.dhds-badge {
	position: absolute;
	top: 14px; left: 14px;
	background: var(--dhds-white);
	color: var(--dhds-rust);
	font-size: 0.78rem;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 999px;
}
.dhds-property-card__body { padding: 22px; }
.dhds-property-card__tagline { color: var(--dhds-gray); font-size: 0.95rem; margin-top: -8px; }
.dhds-property-card__meta { display: flex; gap: 16px; color: var(--dhds-gray); font-size: 0.9rem; margin: 10px 0; }
.dhds-link-arrow { font-weight: 700; color: var(--dhds-mauve); }

/* ---------- Testimonials ---------- */
.dhds-testimonials-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}
.dhds-testimonial-card {
	background: var(--dhds-white);
	border-left: 4px solid var(--dhds-teal);
	padding: 24px;
	border-radius: 0 var(--dhds-radius) var(--dhds-radius) 0;
	box-shadow: 0 2px 12px rgba(86,104,116,0.06);
}
.dhds-testimonial-card p:first-child {
	font-family: var(--dhds-font-heading);
	font-style: italic;
	font-size: 1.15rem;
	color: var(--dhds-slate);
	overflow-wrap: anywhere;
}
.dhds-testimonial-card cite {
	font-style: normal;
	color: var(--dhds-gray);
	font-size: 0.9rem;
}

/* Review carousel (property page): browses every review instead of a
   fixed handful, ~2 cards visible at a time on desktop, 1 on mobile. */
.dhds-review-slider { position: relative; padding: 0 26px; margin: 0 -26px; }
.dhds-review-slider__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 4px 0;
}
.dhds-review-slider__track::-webkit-scrollbar { display: none; }
.dhds-review-slider__slide {
	flex: 0 0 clamp(240px, 46%, 380px);
	/* Without this, a flex item with flex-shrink:0 can still overflow its
	   own basis to fit its content's natural min-width (flex items default
	   to min-width:auto) - on mobile that was forcing the whole page wider
	   than the viewport, which is why it "needed zooming out" to see. */
	min-width: 0;
	scroll-snap-align: start;
}
.dhds-review-slider .dhds-testimonial-card {
	padding: 18px 20px;
}
.dhds-review-slider .dhds-testimonial-card p:first-child {
	font-size: 1rem;
	line-height: 1.5;
}
.dhds-review-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--dhds-white);
	border: 2px solid var(--dhds-sage);
	color: var(--dhds-slate);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	line-height: 1;
	box-shadow: 0 2px 10px rgba(86,104,116,0.15);
	transition: background 0.2s ease;
	z-index: 2;
}
.dhds-review-slider__arrow:hover { background: var(--dhds-sage); }
.dhds-review-slider__arrow--prev { left: 0; }
.dhds-review-slider__arrow--next { right: 0; }
@media (max-width: 600px) {
	.dhds-review-slider__slide { flex-basis: 88%; }
	.dhds-review-slider__arrow { display: none; }
	.dhds-review-slider { padding: 0; margin: 0; }
	.dhds-review-slider .dhds-testimonial-card { padding: 16px 18px; }
	.dhds-review-slider .dhds-testimonial-card p:first-child { font-size: 0.95rem; }
}

/* ---------- Dual path CTA (home page bottom) ---------- */
.dhds-dual-cta {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
@media (max-width: 760px) { .dhds-dual-cta { grid-template-columns: 1fr; } }
.dhds-dual-cta__panel {
	padding: 90px 40px;
	text-align: center;
	color: var(--dhds-white);
}
.dhds-dual-cta__panel--book { background: var(--dhds-teal); }
.dhds-dual-cta__panel--services { background: var(--dhds-rose); }
.dhds-dual-cta__panel h2, .dhds-dual-cta__panel p { color: var(--dhds-white); }

/* ---------- Property single page ---------- */
.dhds-property-hero {
	padding: 50px 0 0;
}
/* Airbnb-style hero collage: one big photo + a 2x2 grid of four more.
   Every tile opens the full-photo lightbox below at its own index. */
.dhds-hero-gallery {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 8px;
	height: 480px;
	border-radius: var(--dhds-radius);
	overflow: hidden;
	background: var(--dhds-cream);
}
.dhds-hero-gallery__count-badge {
	display: none;
	position: absolute;
	bottom: 14px; right: 14px;
	background: rgba(0,0,0,0.6);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 999px;
	pointer-events: none;
}
.dhds-hero-gallery__item {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: none;
	cursor: pointer;
	background: none;
}
.dhds-hero-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dhds-hero-gallery__item:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.dhds-hero-gallery__item:nth-child(2) { grid-column: 3; grid-row: 1; }
.dhds-hero-gallery__item:nth-child(3) { grid-column: 4; grid-row: 1; }
.dhds-hero-gallery__item:nth-child(4) { grid-column: 3; grid-row: 2; }
.dhds-hero-gallery__item:nth-child(5) { grid-column: 4; grid-row: 2; }
.dhds-hero-gallery__more {
	position: absolute;
	bottom: 14px;
	right: 14px;
	background: #fff;
	color: var(--dhds-slate);
	font-weight: 700;
	font-size: 0.85rem;
	padding: 8px 16px;
	border-radius: 999px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
@media (max-width: 760px) {
	.dhds-hero-gallery { grid-template-columns: 1fr; grid-template-rows: 1fr; height: 320px; }
	.dhds-hero-gallery__item:first-child { grid-column: 1; grid-row: 1; }
	.dhds-hero-gallery__item:not(:first-child) { display: none; }
	.dhds-hero-gallery__count-badge { display: block; }
}

/* Full-photo lightbox, opened from the hero collage. Swipeable on touch via
   native scroll-snap; arrow buttons + counter for everyone else. */
.dhds-gallery-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(18,22,24,0.95);
}
.dhds-gallery-modal[hidden] { display: none; }
.dhds-gallery-modal__track {
	display: flex;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.dhds-gallery-modal__track::-webkit-scrollbar { display: none; }
.dhds-gallery-modal__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 70px;
}
.dhds-gallery-modal__slide img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.dhds-gallery-modal__close,
.dhds-gallery-modal__arrow {
	position: absolute;
	background: rgba(255,255,255,0.92);
	border: none;
	cursor: pointer;
	color: var(--dhds-slate);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(0,0,0,0.25);
	transition: background 0.2s ease, transform 0.15s ease;
}
.dhds-gallery-modal__close:hover,
.dhds-gallery-modal__arrow:hover { background: #fff; }
.dhds-gallery-modal__close {
	top: 20px; right: 20px;
	width: 44px; height: 44px;
	border-radius: 50%;
	font-size: 1.8rem;
	line-height: 1;
	z-index: 2;
}
.dhds-gallery-modal__arrow {
	top: 50%;
	transform: translateY(-50%);
	width: 46px; height: 46px;
	border-radius: 50%;
	font-size: 1.6rem;
	line-height: 1;
}
.dhds-gallery-modal__arrow:hover { transform: translateY(-50%) scale(1.05); }
.dhds-gallery-modal__arrow--prev { left: 20px; }
.dhds-gallery-modal__arrow--next { right: 20px; }
.dhds-gallery-modal__counter {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(255,255,255,0.92);
	color: var(--dhds-slate);
	padding: 6px 16px;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
	.dhds-gallery-modal__slide { padding: 24px 16px; }
	.dhds-gallery-modal__arrow { display: none; }
}

.dhds-property-layout {
	display: grid;
	/* Even split: description and booking widget each get half the width. */
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	margin-top: 50px;
	align-items: start;
}
@media (max-width: 900px) { .dhds-property-layout { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .dhds-property-layout { margin-top: 30px; gap: 30px; } }

/* Once the layout stacks to one column, let the booking panel break out of
   the page's fixed side padding and use a share of the viewport width
   instead - a "certain amount of pixels" of padding was eating into the
   widget's usable space and making the (already-wide) third-party embed
   feel more cramped than it needed to be. */
@media (max-width: 900px) {
	.dhds-booking-panel {
		width: 95vw;
		max-width: 95vw;
		margin-left: calc(50% - 47.5vw);
		margin-right: calc(50% - 47.5vw);
	}
}

.dhds-property-stats {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	margin: 18px 0;
	color: var(--dhds-gray);
}
.dhds-amenities-list {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
}
.dhds-amenities-list li {
	padding-left: 26px;
	position: relative;
}
.dhds-amenities-list li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	color: var(--dhds-teal);
	font-weight: 700;
}

/* Amenities panel: gradient across the primary palette (rose to peach to
   mustard) instead of the rust panel used everywhere else on this page -
   a soft white overlay tones the gradient down so the (already slate-
   colored by default) heading/list text stays easy to read over it. */
.dhds-amenities-panel { position: relative; }
.dhds-amenities-panel::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, var(--dhds-rose) 0%, var(--dhds-peach) 50%, var(--dhds-mustard) 100%);
}
.dhds-amenities-panel::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,0.55);
}
.dhds-amenities-panel > .dhds-container { position: relative; z-index: 1; }
.dhds-amenities-panel .dhds-amenities-list li::before { color: var(--dhds-slate); }
.dhds-booking-panel {
	position: sticky;
	top: 110px;
	background: var(--dhds-cream);
	border-radius: var(--dhds-radius);
	padding: 24px;
	min-width: 0;
	overflow-wrap: break-word;
}
.dhds-booking-panel iframe,
.dhds-booking-panel embed,
.dhds-booking-panel img { max-width: 100%; }
@media (max-width: 900px) { .dhds-booking-panel { position: static; } }
/* Third-party booking calendars (Hospitable etc.) aren't ours to restyle and
   can render at a fixed pixel width wider than a phone screen. Rather than
   let that force the whole page to horizontally scroll/zoom out, contain the
   overflow to just the widget - worst case it scrolls sideways in its own box. */
.dhds-widget-scroll {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Airbnb-style "Show more" description truncation. Collapsed height only
   applies once JS confirms the content actually overflows it (.is-truncated) -
   otherwise short descriptions would show a pointless fade with no button. */
.dhds-description.is-truncated {
	position: relative;
	max-height: 220px;
	overflow: hidden;
}
.dhds-description.is-truncated.is-expanded { max-height: none; }
.dhds-description.is-truncated:not(.is-expanded)::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 70px;
	background: linear-gradient(180deg, rgba(244,242,239,0) 0%, var(--dhds-cream) 90%);
	pointer-events: none;
}
.dhds-description-toggle {
	margin-top: 14px;
	background: none;
	border: 2px solid var(--dhds-slate);
	border-radius: 999px;
	padding: 10px 22px;
	font-family: var(--dhds-font-body);
	font-weight: 700;
	color: var(--dhds-slate);
	cursor: pointer;
}
.dhds-description-toggle:hover { background: var(--dhds-slate); color: var(--dhds-white); }

/* ---------- Blog ---------- */
.dhds-blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 32px;
}
.dhds-blog-card {
	background: var(--dhds-white);
	border-radius: var(--dhds-radius);
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(86,104,116,0.08);
}
.dhds-blog-card__image { height: 200px; background-size: cover; background-position: center; }
.dhds-blog-card__body { padding: 22px; }
.dhds-blog-card__meta { color: var(--dhds-gray); font-size: 0.85rem; }
/* Excerpt text matches the title's slate color instead of inheriting the
   card link's default color - the whole card is one <a>, so without this
   the excerpt (and, on hover, the title) picks up the anchor's link color. */
.dhds-blog-card__excerpt { color: var(--dhds-slate); }
.dhds-blog-card:hover h3,
.dhds-blog-card:hover .dhds-blog-card__excerpt,
.dhds-blog-card:hover .dhds-link-arrow { color: var(--dhds-sage); }
.dhds-single-post { max-width: 760px; margin: 0 auto; padding: 60px 24px; }
.dhds-single-post .dhds-post-thumb { border-radius: var(--dhds-radius); margin-bottom: 30px; }
.dhds-single-post .entry-content > * + * { margin-top: 1.2em; }
/* Auto-style plain bulleted lists in post content with small dots cycling
   through the primary palette - a condensed version of .dhds-guide-bullets
   used on the property page, applied automatically instead of needing a
   custom class from the editor. */
.dhds-single-post .entry-content ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.dhds-single-post .entry-content ul li {
	padding-left: 22px;
	position: relative;
}
.dhds-single-post .entry-content ul li::before {
	content: '';
	position: absolute; left: 0; top: 7px;
	width: 9px; height: 9px;
	border-radius: 50%;
}
.dhds-single-post .entry-content ul li:nth-child(5n+1)::before { background: var(--dhds-rose); }
.dhds-single-post .entry-content ul li:nth-child(5n+2)::before { background: var(--dhds-peach); }
.dhds-single-post .entry-content ul li:nth-child(5n+3)::before { background: var(--dhds-mustard); }
.dhds-single-post .entry-content ul li:nth-child(5n+4)::before { background: var(--dhds-sage); }
.dhds-single-post .entry-content ul li:nth-child(5n+5)::before { background: var(--dhds-teal); }

/* ---------- Contact ---------- */
.dhds-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}
@media (max-width: 760px) { .dhds-contact-grid { grid-template-columns: 1fr; } }
.dhds-contact-card {
	background: var(--dhds-white);
	border-radius: var(--dhds-radius);
	padding: 34px;
	box-shadow: 0 4px 18px rgba(86,104,116,0.08);
	border-top: 4px solid var(--dhds-sage);
}
.dhds-contact-card--retreat { border-top-color: var(--dhds-teal); }
.dhds-contact-card input[type="text"],
.dhds-contact-card input[type="email"],
.dhds-contact-card input[type="tel"],
.dhds-contact-card textarea,
.dhds-contact-card select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #ddd;
	border-radius: 8px;
	font-family: var(--dhds-font-body);
	margin-bottom: 16px;
	font-size: 1rem;
}
.dhds-contact-card label { font-weight: 700; display: block; margin-bottom: 6px; }

/* ---------- About page ---------- */
.dhds-about-team {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 32px;
	margin-top: 40px;
}
.dhds-team-member { text-align: center; }
.dhds-team-member img {
	width: 180px; height: 180px;
	object-fit: cover;
	border-radius: 50%;
	margin: 0 auto 16px;
}

/* ---------- Services page: brand-guide style sections ----------
   Mimics the Dream Home Design Studios brand guide document itself:
   alternating cream/rust full-bleed panels, a small caps eyebrow label,
   split regular+italic serif headings, and colored accents drawn from
   the primary palette against the rust/accent panels for contrast. */
.dhds-guide-section { padding: 90px 0; }
.dhds-guide-section--white { background: var(--dhds-white); }
.dhds-guide-section--rust { background: var(--dhds-rust); color: var(--dhds-white); }
.dhds-guide-section--rust h2,
.dhds-guide-section--rust h3,
.dhds-guide-section--rust h4,
.dhds-guide-section--rust p { color: var(--dhds-white); }
.dhds-guide-section--slate { background: var(--dhds-slate); color: var(--dhds-white); }
.dhds-guide-section--slate h2,
.dhds-guide-section--slate h3,
.dhds-guide-section--slate h4,
.dhds-guide-section--slate p { color: var(--dhds-white); }

/* Guest Reviews: its own full-width section between the description/booking
   layout and the room tour below, instead of living inside the (now
   half-width) description column. The adjacent-sibling rule tightens the
   gap to whatever room section follows, since that section's own 90px top
   padding on top of this section's padding was reading as excess whitespace. */
.dhds-property-reviews { padding: 40px 0 0; }
.dhds-property-reviews + .dhds-guide-section { padding-top: 50px; }
@media (max-width: 600px) {
	.dhds-property-reviews { padding: 24px 0 0; }
	.dhds-property-reviews + .dhds-guide-section { padding-top: 30px; }
}

.dhds-guide-heading {
	font-size: clamp(2.2rem, 4.6vw, 3.4rem);
	font-weight: 400;
	line-height: 1.08;
	margin-bottom: 0.45em;
}
.dhds-guide-heading em { font-style: italic; font-weight: 500; }

.dhds-guide-columns {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 50px;
	align-items: start;
}
@media (max-width: 860px) { .dhds-guide-columns { grid-template-columns: 1fr; } }

/* Photo stack: 2x2 grid of placeholder blocks until real photos are
   supplied - swap each block's markup for an <img> whenever photos are
   ready. A 2x2 grid (rather than one tall single column) keeps each
   tile a sensible size instead of one portrait block running very tall
   with empty space around it. */
.dhds-photo-stack {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.dhds-photo-stack__block {
	border-radius: var(--dhds-radius);
	background: var(--dhds-cream);
	border: 1px dashed var(--dhds-tan);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dhds-tan);
	font-family: var(--dhds-font-body);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	padding: 10px;
}
.dhds-guide-section--white .dhds-photo-stack__block { background: var(--dhds-cream); }
.dhds-photo-stack__block:nth-child(1) { aspect-ratio: 4 / 3; }
.dhds-photo-stack__block:nth-child(2) { aspect-ratio: 3 / 4; }
.dhds-photo-stack__block:nth-child(3) { aspect-ratio: 3 / 4; }
.dhds-photo-stack__block:nth-child(4) { aspect-ratio: 4 / 3; }
@media (max-width: 480px) { .dhds-photo-stack { grid-template-columns: 1fr; } }

/* Real per-room photo grid (property page room-tour sections) - same
   rhythm as the photo stack above, but filled with actual images. */
.dhds-room-photos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.dhds-room-photos img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--dhds-radius);
	aspect-ratio: 4 / 3;
}
.dhds-room-photos img:nth-child(2),
.dhds-room-photos img:nth-child(3) { aspect-ratio: 3 / 4; }
@media (max-width: 480px) { .dhds-room-photos { grid-template-columns: 1fr; } }

/* Compact variant for the "stacked" room layout (Pool): built for a small
   handful of portrait photos, not the 2x2 landscape-oriented grid above -
   without this, 3 tall portrait photos rendered comically large since
   nothing capped their height. Fixed, modest max-height + a capped overall
   width keeps them as a tidy strip under the heading/text instead. */
.dhds-room-photos.dhds-room-photos--stacked {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 620px;
	margin: 30px auto 0;
	gap: 14px;
}
.dhds-room-photos.dhds-room-photos--stacked img {
	aspect-ratio: 3 / 4;
	max-height: 240px;
}
@media (max-width: 600px) {
	.dhds-room-photos.dhds-room-photos--stacked { gap: 8px; }
	.dhds-room-photos.dhds-room-photos--stacked img { max-height: 170px; }
}
@media (max-width: 420px) {
	.dhds-room-photos.dhds-room-photos--stacked { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
}

/* Visually swap which side the photos land on without changing the 1.2fr/0.8fr
   column weighting - direction:rtl flips render order, then each child is
   flipped back to normal ltr text/layout. */
.dhds-guide-columns--reverse { direction: rtl; }
.dhds-guide-columns--reverse > * { direction: ltr; }

/* Pool section (and any "stacked" room layout): full-width photo grid up
   top, text below - a more spotlighted treatment for the property's
   marquee feature instead of the same side-by-side format as every
   other room. */
.dhds-room-stacked-text { max-width: 640px; margin-top: 0; }

/* Small pill tags under a room description (e.g. "Queen bed", "Pool slide") -
   same dot-cycling idea as the Services page options list, just condensed
   into a chip instead of a full list item. */
.dhds-room-highlights {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
}
.dhds-room-highlights li {
	font-family: var(--dhds-font-body);
	font-size: 0.82rem;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1.5px solid currentColor;
	white-space: nowrap;
}
.dhds-room-highlights li:nth-child(5n+1) { color: var(--dhds-rose); }
.dhds-room-highlights li:nth-child(5n+2) { color: var(--dhds-peach); }
.dhds-room-highlights li:nth-child(5n+3) { color: var(--dhds-mustard); }
.dhds-room-highlights li:nth-child(5n+4) { color: var(--dhds-sage); }
.dhds-room-highlights li:nth-child(5n+5) { color: var(--dhds-teal); }
.dhds-guide-section--rust .dhds-room-highlights li,
.dhds-guide-section--slate .dhds-room-highlights li { color: var(--dhds-white); border-color: var(--dhds-white); }

.dhds-travel-map iframe { display: block; width: 100%; min-height: 280px; border: 0; }
.dhds-travel-map--placeholder {
	background: var(--dhds-cream);
	border: 1px dashed var(--dhds-tan);
	border-radius: var(--dhds-radius);
	padding: 24px;
	text-align: center;
}

/* Options list (e.g. Interior Design consult types): colored dot marker
   cycling through the primary palette, title + short description. */
.dhds-guide-options { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.dhds-guide-options li { display: flex; gap: 16px; align-items: flex-start; }
.dhds-guide-options__dot { flex: none; width: 14px; height: 14px; border-radius: 50%; margin-top: 6px; }
.dhds-guide-options h4 { margin: 0 0 4px; font-family: var(--dhds-font-body); font-weight: 700; font-size: 1rem; color: var(--dhds-slate); }
.dhds-guide-options p { margin: 0; color: var(--dhds-gray); font-size: 0.95rem; }
.dhds-guide-options li:nth-child(4n+1) .dhds-guide-options__dot { background: var(--dhds-rose); }
.dhds-guide-options li:nth-child(4n+2) .dhds-guide-options__dot { background: var(--dhds-peach); }
.dhds-guide-options li:nth-child(4n+3) .dhds-guide-options__dot { background: var(--dhds-mustard); }
.dhds-guide-options li:nth-child(4n+4) .dhds-guide-options__dot { background: var(--dhds-sage); }

/* Offer-card grid (e.g. Airbnb listing services): white cards over a
   rust panel, each with its own primary-color left border. */
.dhds-offer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin-top: 40px;
}
.dhds-offer-card {
	background: var(--dhds-white);
	color: var(--dhds-slate);
	border-radius: var(--dhds-radius);
	padding: 22px 24px;
	border-left: 5px solid var(--dhds-rose);
	box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.dhds-offer-card h4 { margin: 0 0 6px; font-family: var(--dhds-font-body); font-weight: 700; font-size: 1rem; color: var(--dhds-slate) !important; }
.dhds-offer-card p { margin: 0; color: var(--dhds-gray) !important; font-size: 0.92rem; }
.dhds-offer-grid .dhds-offer-card:nth-child(6n+1) { border-left-color: var(--dhds-rose); }
.dhds-offer-grid .dhds-offer-card:nth-child(6n+2) { border-left-color: var(--dhds-peach); }
.dhds-offer-grid .dhds-offer-card:nth-child(6n+3) { border-left-color: var(--dhds-mustard); }
.dhds-offer-grid .dhds-offer-card:nth-child(6n+4) { border-left-color: var(--dhds-sage); }
.dhds-offer-grid .dhds-offer-card:nth-child(6n+5) { border-left-color: var(--dhds-teal); }
.dhds-offer-grid .dhds-offer-card:nth-child(6n+6) { border-left-color: var(--dhds-tan); }

/* Simple two-item bullet list (e.g. Furniture Sourcing add-ons). */
.dhds-guide-bullets { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.dhds-guide-bullets li { padding-left: 30px; position: relative; }
.dhds-guide-bullets li::before {
	content: '';
	position: absolute; left: 0; top: 6px;
	width: 16px; height: 16px;
	border-radius: 50%;
}
.dhds-guide-bullets li:nth-child(5n+1)::before { background: var(--dhds-rose); }
.dhds-guide-bullets li:nth-child(5n+2)::before { background: var(--dhds-peach); }
.dhds-guide-bullets li:nth-child(5n+3)::before { background: var(--dhds-mustard); }
.dhds-guide-bullets li:nth-child(5n+4)::before { background: var(--dhds-sage); }
.dhds-guide-bullets li:nth-child(5n+5)::before { background: var(--dhds-teal); }
.dhds-guide-bullets strong { display: block; color: var(--dhds-slate); margin-bottom: 2px; }

.dhds-guide-cta-row { margin-top: 26px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.dhds-guide-link {
	font-weight: 700;
	color: var(--dhds-rust);
	border-bottom: 2px solid var(--dhds-mustard);
	padding-bottom: 2px;
}
.dhds-guide-link:hover { color: var(--dhds-mauve); }

/* Direct Booking Websites: slim "faux pop-up" banner, floated up over
   the section above it, sitting right before the footer. */
.dhds-popup-banner {
	max-width: 900px;
	margin: -40px auto 60px;
	background: var(--dhds-teal);
	color: var(--dhds-white);
	border-radius: 20px;
	padding: 34px 40px;
	box-shadow: 0 18px 40px rgba(86,104,116,0.25);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	position: relative;
	z-index: 2;
}
.dhds-popup-banner p { color: var(--dhds-white); margin: 0; }
.dhds-popup-banner strong {
	display: block;
	font-family: var(--dhds-font-heading);
	font-style: italic;
	font-weight: 500;
	font-size: 1.4rem;
	margin-bottom: 4px;
}
.dhds-popup-banner .dhds-btn { background: var(--dhds-white); color: var(--dhds-teal); flex: none; }
.dhds-popup-banner .dhds-btn:hover { background: var(--dhds-cream); color: var(--dhds-teal); }
@media (max-width: 700px) {
	.dhds-popup-banner { flex-direction: column; text-align: center; margin-top: -20px; }
}

/* ---------- Footer ---------- */
.dhds-site-footer {
	background: var(--dhds-slate);
	color: #dbe2e5;
}
.dhds-site-footer__inner {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 32px;
	padding: 46px 24px 38px;
}
@media (max-width: 760px) { .dhds-site-footer__inner { grid-template-columns: 1fr; gap: 28px; padding: 40px 24px 30px; } }
.dhds-footer-logo { max-height: 56px; margin-bottom: 12px; filter: brightness(0) invert(1); }
.dhds-site-footer h4 { color: var(--dhds-white); font-family: var(--dhds-font-body); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.dhds-site-footer a { color: #dbe2e5; }
.dhds-site-footer a:hover { color: var(--dhds-peach); }
/* Two columns instead of one long list - keeps the footer from running
   tall with 6+ menu items stacked in a single column. */
.dhds-footer-nav-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 16px;
}
.dhds-site-footer__bottom {
	border-top: 1px solid rgba(255,255,255,0.15);
	padding: 14px 24px;
	font-size: 0.85rem;
	color: #b7c1c6;
}