/* Idilio 0.3 — homepage port from the approved Next.js prototype. */

@font-face {
	font-family: 'Idilio Serif';
	src: url('../fonts/traditional-arabic-regular.ttf') format('truetype');
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}
@font-face { font-family: 'Founders Grotesk'; src: url('../fonts/founders-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Founders Grotesk'; src: url('../fonts/founders-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
	--idilio-ink: #2c0f05;
	--idilio-charcoal: #1e1e1e;
	--idilio-bone: #fbf7ef;
	--idilio-paper: #fefcf9;
	--idilio-sage: #6d7359;
	--idilio-footer: #211915;
	--idilio-star: #fbbc04; /* Google's rating yellow, review stars (9 October) */
	--idilio-caps: 'brandon-grotesque', 'Hanken Grotesk', sans-serif; /* Brandon stays for everything set in capitals (Javier, 10 October) */
	--idilio-sans: 'Hanken Grotesk', 'Jost', sans-serif; /* trial 10 October, comparing sans: Hanken Grotesk (Soho's) now; 'Montserrat' (Gotham stand-in) before; original 'brandon-grotesque', 'Founders Grotesk', 'Jost', sans-serif */
	--idilio-serif: 'Cardo', Georgia, serif; /* trial 10 October; previous: 'Idilio Serif' (Traditional Arabic) */
	--idilio-section-pad: clamp(32px, 3.2vw, 44px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--idilio-bone);
	color: var(--idilio-charcoal);
	font-family: var(--idilio-sans);
	font-weight: 400;
	overflow-x: hidden;
}
body.admin-bar .idilio-header,
body.admin-bar .idilio-nav-scrim { top: 32px; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { border: 0; }
h1, h2, h3, p, blockquote { margin: 0; }

/* Header */
.idilio-nav-scrim {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 49;
	width: 100%;
	height: 160px;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(0,0,0,.42), rgba(0,0,0,0));
	transition: opacity .35s ease;
}
.idilio-nav-scrim.is-hidden { opacity: 0; }
.idilio-header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 50;
	width: 100%;
	height: 102px;
	color: var(--idilio-bone);
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: height .4s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1), color .25s ease, background-color .35s ease, border-color .35s ease;
}
.idilio-header.is-solid,
.idilio-header.is-scrolled,
.idilio-header:hover,
.idilio-header.is-menu-open {
	color: var(--idilio-charcoal);
	background: var(--idilio-bone);
	border-bottom-color: rgba(44,15,5,.14);
}
/* No shadow, only the 1px divider above (prototype, 9 October). */
.idilio-header.is-scrolled { height: 68px; }
/* Belmond's gesture, approved by Javier on 9 October: the bar slides away while
   the visitor scrolls down and comes back on the first deliberate scroll up. */
.idilio-header { transform: translateY(0); }
.idilio-header.is-tucked { transform: translateY(-100%); }
.idilio-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	padding: 0 40px;
}
.idilio-lockup { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.idilio-lockup__mark { position: relative; display: block; width: 47px; height: 46px; } /* emblem 832:820; flower was 48x46 */
.idilio-lockup__word { position: relative; display: block; width: 108px; height: 25px; }
.idilio-lockup img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .25s ease; }
.idilio-lockup .logo-brown { opacity: 0; }
.idilio-header.is-solid .logo-cream,
.idilio-header.is-scrolled .logo-cream,
.idilio-header:hover .logo-cream,
.idilio-header.is-menu-open .logo-cream { opacity: 0; }
.idilio-header.is-solid .logo-brown,
.idilio-header.is-scrolled .logo-brown,
.idilio-header:hover .logo-brown,
.idilio-header.is-menu-open .logo-brown { opacity: 1; }
.idilio-primary-nav {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	align-items: center;
	gap: clamp(28px, 4.1vw, 60px);
	transform: translate(-50%,-50%);
}
.idilio-primary-nav a {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	-webkit-text-stroke: .5px currentColor;
}
.idilio-primary-nav a::after { content: attr(data-text); height: 0; overflow: hidden; visibility: hidden; font-weight: 700; -webkit-text-stroke: 0; }
.idilio-primary-nav a:hover { font-weight: 700; -webkit-text-stroke: 0; }
.idilio-header__right { display: flex; align-items: center; gap: 26px; }
.idilio-language { position: relative; }
.idilio-language > button {
	display: flex;
	align-items: center;
	gap: 3px;
	padding: 8px 0;
	color: inherit;
	background: transparent;
	font-size: 13px;
	letter-spacing: .1em;
	cursor: pointer;
	-webkit-text-stroke: .5px currentColor;
}
.idilio-language svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2; }
.idilio-language__menu {
	position: absolute;
	top: calc(100% + 8px);
	left: -14px;
	display: grid;
	min-width: 76px;
	padding: 5px;
	background: rgba(28,28,30,.88);
	border: 1px solid rgba(251,247,239,.14);
	border-radius: 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-5px);
	/* Closes instantly when the pointer leaves (Javier, 12 October). The
	   bridge below keeps it open while the pointer travels into the list. */
	transition: none;
}
/* Invisible bridge over the 8px gap, so moving down to the list keeps the hover. */
.idilio-language__menu::before { content: ''; position: absolute; top: -12px; right: 0; left: 0; height: 12px; }
.idilio-language:hover .idilio-language__menu,
.idilio-language:has(:focus-visible) .idilio-language__menu,
.idilio-language.is-open .idilio-language__menu { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease; }
.idilio-language__menu a { padding: 7px 10px; color: var(--idilio-bone); font-size: 13px; letter-spacing: .1em; }
.idilio-contact { display: flex; flex-direction: column; gap: 1px; }
.idilio-contact__phone { display: flex; align-items: center; gap: 7px; font-size: 16px; letter-spacing: .04em; -webkit-text-stroke: .5px currentColor; }
.idilio-contact__phone svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.idilio-contact__status { display: flex; align-items: center; gap: 6px; font-size: 12.5px; letter-spacing: .03em; opacity: .75; }
.idilio-contact__status i { width: 8px; height: 8px; border-radius: 50%; background: #2bd952; }
/* Contact card on hover (prototype Navbar). It opens flush right, a little
   past the phone, so it lines up with the header's right edge. */
.idilio-contact-wrap { position: relative; }
.idilio-contact-card { position: absolute; top: 100%; right: -16px; z-index: 80; padding-top: 16px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: none; } /* its 16px top padding is the bridge from the phone */
.idilio-contact-wrap:hover .idilio-contact-card,
.idilio-contact-wrap:has(:focus-visible) .idilio-contact-card { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .22s ease, transform .22s ease; }
.idilio-contact-card__box { width: 320px; padding: 20px 22px; background: rgba(28,28,30,.88); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); border: 1px solid rgba(250,247,242,.14); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.28); }
.idilio-contact-card__row { display: flex; align-items: flex-start; gap: 13px; color: #FBF7EF; text-decoration: none; font-family: var(--idilio-sans); text-transform: none; letter-spacing: .01em; transition: opacity .2s ease; }
.idilio-contact-card__row svg { flex-shrink: 0; width: 17px; height: 17px; margin-top: 2px; fill: none; stroke: #FBF7EF; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.idilio-contact-card__row > span { display: flex; flex-direction: column; gap: 2px; }
.idilio-contact-card__row strong { font-size: 14px; font-weight: 400; }
.idilio-contact-card__row small { font-size: 13px; font-weight: 300; letter-spacing: .02em; color: rgba(250,247,242,.65); }
.idilio-contact-card__mail > span { display: block; font-size: 13.5px; font-weight: 300; line-height: 1.5; color: rgba(250,247,242,.85); }
.idilio-contact-card__mail u { color: #FBF7EF; text-underline-offset: 3px; }
.idilio-contact-card__mail:hover { opacity: .72; }
.idilio-contact-card__rule { display: block; height: 1px; margin: 15px 0; background: rgba(250,247,242,.1); }
.idilio-menu-toggle, .idilio-mobile-menu { display: none; }
body.idilio-menu-lock { overflow: hidden; }

/* Buttons */
.idilio-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 32px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 14px; /* was 15px; Hanken Grotesk reads larger than Brandon (10 October) */
	font-weight: 400;
	letter-spacing: .01em;
	-webkit-text-stroke: .5px currentColor;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.idilio-btn--ghost { color: var(--idilio-bone); border-color: rgba(251,247,239,.65); }
.idilio-btn--ghost:hover { color: var(--idilio-ink); background: var(--idilio-bone); border-color: var(--idilio-bone); }
/* Section buttons (View all homes and the rest), Javier 10 October: filled in
   our deep brown by default, our green (sage) on hover. */
.idilio-btn--outline { color: var(--idilio-bone); background: var(--idilio-ink); border-color: var(--idilio-ink); }
.idilio-btn--outline:hover { color: var(--idilio-bone); background: var(--idilio-sage); border-color: var(--idilio-sage); }
/* The homepage button type, after Unique Homestays (Javier, 9 Oct 2026): our
   pill, small spaced capitals inside. Prototype class `.btn-uh`. */
.idilio-btn--uh { height: 40px; padding: 0 26px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; -webkit-text-stroke: .35px currentColor; }
/* Javier reverted the small caps on 9 October: every homepage button is the
   15px sentence-case pill again. `--uh` stays defined but unused. */
/* Large pill: a CTA alone over a full-bleed photo (homeowners, 9 October). */
.idilio-btn--lg { height: 54px; padding: 0 36px; font-size: 16px; }
.idilio-btn--icon { gap: 8px; }
.idilio-btn--icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.idilio-btn--icon svg .is-dot { fill: currentColor; stroke: none; }

/* Hero */
/* The clip lives on the reel, not the hero, so the search panels can open
   past the hero's bottom edge instead of being cut off (12 October). */
.idilio-hero { position: relative; width: 100%; height: 100vh; min-height: 680px; background: #211915; }
.idilio-hero__reel, .idilio-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.idilio-hero__reel { overflow: hidden; }
.idilio-hero__video { object-fit: cover; opacity: 0; transition: opacity .25s linear; }
.idilio-hero__video.is-active { opacity: 1; }
.idilio-hero__video.is-reframed { transform: scale(1.08) translateY(-3%); }
/* Vimeo hero (inc/hero-video.php): a 16:9 player scaled to cover the hero and
   centred, so mobile shows the centre of the same edit. The poster sits under
   it and stays visible until the player has loaded. */
.idilio-hero__vimeo { --hero-ratio: 1.7778; position: absolute; inset: 0; overflow: hidden; pointer-events: none; container-type: size; }
.idilio-hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The player takes the video's real shape (read from Vimeo, see main.js) and
   is scaled to cover the hero, so a wide cinematic edit never leaves black
   bands above and below (13 October). */
.idilio-hero__vimeo iframe { position: absolute; top: 50%; left: 50%; width: max(100cqw, calc(100cqh * var(--hero-ratio))); height: max(100cqh, calc(100cqw / var(--hero-ratio))); border: 0; transform: translate(-50%, -50%); opacity: 0; transition: opacity .5s ease; }
.idilio-hero__vimeo.is-ready iframe { opacity: 1; }
/* Vimeo's thumbnail, shown at once under the player. Same box as the player,
   so a 16:9 still of a wider edit keeps its black bands outside the hero. */
.idilio-hero__still { position: absolute; top: 50%; left: 50%; width: max(100cqw, calc(100cqh * var(--hero-ratio))); height: max(100cqh, calc(100cqw / var(--hero-ratio))); background: center / cover no-repeat; transform: translate(-50%, -50%); }
/* NO HAY VELO SOBRE EL VÍDEO, y esto no es un olvido.
   El prototipo declara un `bg-black/25` sobre el reel, pero su vídeo activo
   lleva `z-index: 1` y ese div no lleva ninguno, así que el vídeo pinta por
   encima y el velo NO SE VE NUNCA. Al portar la portada el velo se copió con
   `z-index: 2` y entonces sí tapaba, y el hero salía notablemente más apagado
   que en el prototipo. Es además la misma decisión que Javier ya había tomado
   a mano el 19 de septiembre para el hero de Our Homes: vídeo a color pleno y
   la legibilidad la da la sombra del titular, no un filtro encima.
   Si alguien vuelve a necesitar contraste, se sube la sombra del texto. */
.idilio-hero__content {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 36px;
	padding: 0 24px;
	text-align: center;
	transform: translateY(-4.5vh);
	pointer-events: none;
}
.idilio-hero__content h1 {
	max-width: 16ch;
	color: var(--idilio-bone);
	font-family: var(--idilio-serif);
	font-size: clamp(30px,4.3vw,56px);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: .005em;
	text-shadow: 0 1px 28px rgba(0,0,0,.22);
}
.idilio-hero__content .idilio-btn { pointer-events: auto; }

/* The band that holds the search bar on Our Homes: symmetric air above and
   below, on the page's own cream. Without it the bar sits flush against the
   hero and the grid. */
.idilio-search-band { padding: 24px 0; background: var(--idilio-bone); }

/* ------------------------------------------------------------------------- */
/* Search bar — ported from the prototype's HeroSearchBar.                    */
/* Three fields that open their own panels. The parent's real request form is */
/* hidden inside this same <form>; see template-parts/search-bar.php.         */
/* ------------------------------------------------------------------------- */

.idilio-search { position: relative; width: min(672px, calc(100% - 48px)); }
.idilio-search--inflow { width: min(720px, calc(100% - 48px)); } /* +48px for the filters icon, Our Homes only (12 October) */
/* In the hero, pinned to the bottom; panels open upward. */
.idilio-search--hero { position: absolute; left: 50%; bottom: 40px; z-index: 4; transform: translateX(-50%); }
/* In normal flow; panels open downward. */
.idilio-search--inflow { margin-inline: auto; }

.idilio-search__pill {
	display: flex;
	align-items: center;
	padding: 8px 8px 8px 28px;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 4px 16px -6px rgba(0,0,0,.1);
}
.idilio-search__field {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-width: 0;
	padding: 10px 16px;
	color: var(--idilio-charcoal);
	background: none;
	text-align: left;
	cursor: pointer;
}
.idilio-search__value {
	overflow: hidden;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .01em;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.idilio-search__chev { flex-shrink: 0; width: 12px; height: 12px; fill: none; stroke: rgba(30,30,30,.4); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.idilio-search__field[aria-expanded='true'] .idilio-search__chev { stroke: var(--idilio-charcoal); }
.idilio-search__sep { flex-shrink: 0; width: 1px; height: 28px; background: rgba(30,30,30,.15); }
.idilio-search__submit {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-left: 12px;
	padding: 0;
	color: var(--idilio-bone);
	background: var(--idilio-ink); /* brown, green on hover, like the section buttons (10 October) */
	border-radius: 50%;
	cursor: pointer;
	transition: transform .2s ease, background-color .2s ease;
}
.idilio-search__submit:hover { transform: scale(1.05); background: var(--idilio-sage); }
.idilio-search__submit svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Amenity filters (Casita, 12 October): the bare sliders icon inside the
   pill, no circle (Javier: the circle broke the harmony), checkboxes in two
   columns underneath. */
.idilio-filters-wrap { display: flex; flex-shrink: 0; margin-left: 8px; }
.idilio-search__filters {
	position: relative;
	display: grid;
	place-items: center;
	width: 40px;
	height: 48px;
	padding: 0;
	color: var(--idilio-charcoal);
	background: none;
	border: 0;
	cursor: pointer;
	transition: color .2s ease;
}
.idilio-search__filters:hover,
.idilio-search__filters[aria-expanded='true'] { color: var(--idilio-sage); }
.idilio-search__filters svg { width: 24px; height: 24px; fill: #fff; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
/* A ticked filter shows as a small dot, so a closed panel still says it is on. */
.idilio-search__filters.is-active::after { content: ''; position: absolute; top: 9px; right: 4px; width: 7px; height: 7px; background: var(--idilio-sage); border-radius: 50%; }
.idilio-filters-wrap + .idilio-search__submit { margin-left: 8px; }
.idilio-filters { right: 0; width: 420px; padding: 24px 28px 26px; font-family: var(--idilio-sans); }
.idilio-filters.is-up { top: auto; bottom: 100%; margin-bottom: 12px; box-shadow: 0 -12px 40px -12px rgba(0,0,0,.25); }
.idilio-filters.is-down { top: 100%; bottom: auto; margin-top: 12px; box-shadow: 0 12px 40px -12px rgba(0,0,0,.25); }
.idilio-filters__title { margin: 0 0 16px; font-family: var(--idilio-caps); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--idilio-charcoal); }
.idilio-filters__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.idilio-filters__option { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--idilio-charcoal); cursor: pointer; }
.idilio-filters__option input { flex-shrink: 0; width: 18px; height: 18px; margin: 0; accent-color: var(--idilio-ink); cursor: pointer; }

/* Panels */
.idilio-search__pop {
	position: absolute;
	z-index: 20;
	background: #fff;
	border-radius: 16px;
	color: var(--idilio-charcoal);
}
.idilio-search__pop[hidden] { display: none; }
.idilio-search__pop--dates.is-up { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 12px; box-shadow: 0 -12px 40px -12px rgba(0,0,0,.25); }
.idilio-search__pop--dates.is-down { top: 100%; bottom: auto; margin-top: 12px; margin-bottom: 0; box-shadow: 0 12px 40px -12px rgba(0,0,0,.25); }
.idilio-search__pop--centered { left: 50%; right: auto; width: 624px; padding: 24px 32px; transform: translateX(-50%); }

/* Guests panel: adults, children and pets (prototype GuestRow, 12 October). */
.idilio-search .idilio-guests-wrap { display: flex; flex: 1 1 0; min-width: 0; }
.idilio-book .idilio-guests-wrap { position: relative; }
.idilio-guests { right: 64px; width: 288px; padding: 20px; font-family: var(--idilio-sans); }
.idilio-guests.is-up { top: auto; bottom: 100%; margin-bottom: 12px; box-shadow: 0 -12px 40px -12px rgba(0,0,0,.25); }
.idilio-guests.is-down { top: 100%; bottom: auto; margin-top: 12px; box-shadow: 0 12px 40px -12px rgba(0,0,0,.25); }
.idilio-guests--book { right: 0; left: 0; width: auto; }
.idilio-book__field .idilio-search__value { font-size: inherit; font-weight: inherit; letter-spacing: inherit; }
.idilio-book .idilio-guests-wrap .idilio-book__field { width: 100%; }
.idilio-guests__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.idilio-guests__label { font-size: 14px; color: var(--idilio-charcoal); }
.idilio-guests__row { cursor: pointer; }
.idilio-guests__select { position: relative; display: block; flex-shrink: 0; }
.idilio-guests__select select { width: 84px; height: 36px; padding: 0 30px 0 16px; color: var(--idilio-charcoal); background: #fff; border: 1px solid rgba(30,30,30,.2); border-radius: 999px; font-family: var(--idilio-sans); font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer; appearance: none; -webkit-appearance: none; }
.idilio-guests__select select:hover { border-color: rgba(30,30,30,.5); }
.idilio-guests__select select:focus-visible { outline: 1px solid rgba(30,30,30,.4); outline-offset: 3px; }
.idilio-guests__select .idilio-search__chev { position: absolute; top: 50%; right: 13px; transform: translateY(-50%); pointer-events: none; }
.idilio-guests__rule { display: block; height: 1px; margin: 12px 0; background: rgba(30,30,30,.1); }
.idilio-guests__note { margin-top: 14px; font-size: 12px; color: rgba(30,30,30,.55); }
@media (max-width: 600px) { .idilio-guests { right: 0; } }

/* Destination and guests stay native (Javier, 22 September). We style the
   closed state only; the open list belongs to the operating system. */
.idilio-search__field--native { position: relative; cursor: pointer; }
.idilio-search__field--native .idilio-search__value,
.idilio-search__field--native .idilio-search__chev { pointer-events: none; }
.idilio-search__select {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	padding: 0;
	opacity: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}
.idilio-search__field--native:focus-within { outline: 1px solid rgba(30,30,30,.4); outline-offset: 4px; }

/* Two month calendar. Shared shape with the future booking box of the ficha. */
.idilio-cal { position: relative; display: flex; gap: 40px; }
.idilio-cal__nav {
	position: absolute;
	top: 0;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: none;
	color: var(--idilio-charcoal);
	cursor: pointer;
	transition: opacity .15s ease;
}
.idilio-cal__nav:hover { opacity: .7; }
.idilio-cal__nav[disabled] { opacity: .2; cursor: default; }
.idilio-cal__nav svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.idilio-cal__nav--prev { left: 0; }
.idilio-cal__nav--next { right: 0; }
.idilio-cal__month { width: 260px; }
.idilio-cal__title { margin-bottom: 16px; font-size: 15px; text-align: center; }
.idilio-cal__title span + span { margin-left: 8px; }
.idilio-cal__grid { display: grid; grid-template-columns: repeat(7,1fr); row-gap: 4px; text-align: center; }
.idilio-cal__dow { padding-bottom: 8px; color: rgba(30,30,30,.5); font-size: 11px; font-weight: 300; letter-spacing: .08em; }
.idilio-cal__day {
	width: 36px;
	height: 36px;
	margin-inline: auto;
	padding: 0;
	background: none;
	color: var(--idilio-charcoal);
	border-radius: 999px;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background-color .15s ease;
}
.idilio-cal__day:hover { background: rgba(30,30,30,.05); }
.idilio-cal__day.is-past { color: rgba(30,30,30,.25); text-decoration: line-through; cursor: not-allowed; }
.idilio-cal__day.is-past:hover { background: none; }
/* Circles, not a continuous band: the prototype keeps the pill radius on the
   nights in between, so the row breathes instead of reading as a bar. */
.idilio-cal__day.is-range { background: rgba(30,30,30,.1); }
.idilio-cal__day.is-today { box-shadow: inset 0 0 0 1px rgba(30,30,30,.3); }
.idilio-cal__day.is-edge,
.idilio-cal__day.is-edge:hover { background: var(--idilio-ink); color: var(--idilio-bone); border-radius: 999px; box-shadow: none; }
.idilio-cal__blank { width: 36px; height: 36px; }
.idilio-cal__actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(30,30,30,.12); }
.idilio-cal__status { min-height: 18px; color: #8b2d22; font-size: 12px; line-height: 1.4; }
.idilio-cal__clear { flex-shrink: 0; padding: 0; color: var(--idilio-charcoal); background: none; border-bottom: 1px solid currentColor; font-family: var(--idilio-sans); font-size: 12px; cursor: pointer; }
.idilio-search__pop--centered .idilio-cal__actions { position: absolute; right: 32px; bottom: 5px; left: 32px; height: 17px; margin: 0; padding: 0; border: 0; }

/* Guests */
@media (max-width: 900px) {
	.idilio-search { width: calc(100% - 32px); }
	.idilio-search__pill { padding-left: 14px; }
	.idilio-search__field { padding-inline: 10px; }
}

@media (max-width: 760px) {
	/* One month fits, two do not. The arrows still walk month by month. */
	.idilio-cal__month--second { display: none; }
	.idilio-search__pop--centered { width: min(324px, calc(100vw - 24px)); padding: 20px 24px; }
	.idilio-search__pop--centered .idilio-cal__actions { right: 24px; bottom: 4px; left: 24px; }
}

@media (max-width: 600px) {
	.idilio-search--hero { bottom: 14px; }
	.idilio-search { width: calc(100% - 24px); }
	.idilio-search__pill { padding: 6px 6px 6px 10px; }
	.idilio-search__field { padding: 8px; gap: 4px; }
	.idilio-search__value { font-size: 13px; }
	.idilio-search__submit { width: 44px; height: 44px; margin-left: 6px; }
	.idilio-filters-wrap { margin-left: 2px; }
	.idilio-search__filters { width: 32px; height: 44px; }
	.idilio-search__filters svg { width: 20px; height: 20px; }
	.idilio-search__filters.is-active::after { top: 9px; right: 2px; }
	.idilio-filters { right: 0; left: 0; width: auto; padding: 20px 22px 22px; }
	.idilio-search__submit svg { width: 20px; height: 20px; }
	.idilio-cal__month { width: 100%; }
}

/* Homepage sections */
.idilio-section { padding-block: var(--idilio-section-pad); background: var(--idilio-bone); }
.idilio-philosophy { padding-top: calc(var(--idilio-section-pad) * 2); }
/* Intro on Soho House's measurements at 1440px (Javier, 10 October): 56/70
   serif across 960px, 18/26 sans across 576px, about 90px of air above and
   below. Replaces the three pillars. */
.idilio-intro { padding-block: calc(var(--idilio-section-pad) * 2) var(--idilio-section-pad); }
.idilio-intro__inner { max-width: 1008px; margin: 0 auto; padding-inline: 24px; text-align: center; }
.idilio-intro h2 {
	color: #000;
	font-family: var(--idilio-serif);
	font-size: clamp(36px, 3.9vw, 56px);
	font-weight: 400;
	line-height: 1.25;
	/* No balance: like Soho, the first line runs the full 960px. */
}
.idilio-intro p {
	max-width: 576px;
	margin: 26px auto 0;
	color: #000;
	font-family: var(--idilio-sans);
	font-size: clamp(16px, 1.25vw, 18px);
	line-height: 1.45;
	text-wrap: pretty;
}
.idilio-intro h2 + p { margin-top: 22px; }
.idilio-intro .idilio-btn { margin-top: 24px; }
/* Photo band after Lohodi Homes (Javier, 10 October): taller after
   Javier's 11 October visual reviews,
   same technique as theirs, a fixed background, so the page moves and the
   photo stays still. Touch screens (iOS ignores fixed backgrounds) get the
   photo still in the band. Photo: La Almunia at dusk (2560px). Baltanás kept as parallax-fields.jpg. */
.idilio-intro { padding-bottom: calc(var(--idilio-section-pad) * 2); }
.idilio-parallax { height: clamp(330px, 42vw, 700px); background-color: var(--idilio-bone); background-position: center 60%; background-size: cover; background-attachment: fixed; }
@media (hover: none) { .idilio-parallax { background-attachment: scroll; } }
/* The emblem large in the middle of the band, cream (Javier, 10 October). */
.idilio-parallax { display: grid; place-items: center; }
.idilio-parallax__mark { width: clamp(96px, 10vw, 150px); height: auto; filter: drop-shadow(0 2px 14px rgba(0,0,0,.25)); }
.idilio-parallax + .idilio-featured { padding-top: calc(var(--idilio-section-pad) * 2); }
/* Featured Homes fits one desktop screen, heading to button (Javier, 9 Oct):
   wider side margins make the cards narrower and so shorter, same 2:3
   proportions. Vertical rhythm stays the same as every other section. */
/* Every homepage section shares this side margin (Javier, 9 Oct). */
@media (min-width: 1024px) {
	.idilio-featured .idilio-page-pad,
	.idilio-reviews .idilio-page-pad,
	.idilio-collections .idilio-page-pad,
	.idilio-instagram .idilio-page-pad,
	.idilio-philosophy .idilio-wide { padding-inline: clamp(24px, 3.4vw, 56px); }
}
.idilio-wide { width: 100%; max-width: 1440px; margin: 0 auto; padding-inline: clamp(16px,2.2vw,44px); }
.idilio-page-pad { width: 100%; padding-inline: clamp(16px,1.6vw,32px); }
.idilio-section-label {
	margin-bottom: 30px;
	color: var(--idilio-ink);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: .08em;
	text-align: center;
	text-transform: uppercase;
	-webkit-text-stroke: .5px currentColor;
}
.idilio-pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(40px,5vw,96px); }
.idilio-pillars article { text-align: center; }
.idilio-pillars h3 {
	color: var(--idilio-ink);
	font-family: var(--idilio-serif);
	font-size: clamp(30px,3vw,40px);
	font-weight: 400;
	line-height: 1.05;
}
.idilio-pillars p {
	max-width: 42ch;
	margin: 18px auto 0;
	/* Descriptive text in the sans, titles stay serif (Javier, 10 October,
	   after Soho, Belmond and Lohodi). Black and bigger at his request.
	   Picks up Gotham when it replaces Brandon. */
	color: #000;
	font-family: var(--idilio-sans);
	font-size: 16px; /* 18px read too large once Montserrat replaced Brandon */
	line-height: 1.65;
	text-wrap: pretty;
}
.idilio-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 35px;
	margin-top: 18px;
	transition: opacity .2s ease;
}
.idilio-trust:hover { opacity: .7; }
.idilio-trust img:first-child { width: auto; height: 35px; opacity: .82; }
.idilio-trust img:nth-child(2) { width: auto; height: 54px; filter: brightness(0); opacity: .82; }
/* Badges 25% bigger, rating in black like the badges (Javier, 9 Oct). */
.idilio-trust p { color: #000; font-size: 16px; line-height: 1.5; opacity: .82; }
.idilio-trust p span { letter-spacing: .1em; }
/* Under the Loved By Guests title (Javier, 10 October): a step smaller. */
.idilio-trust--reviews { gap: 28px; margin: calc(clamp(20px, 2.4vw, 36px) * -.28) 0 clamp(24px, 2.8vw, 40px); }
.idilio-trust--reviews img:first-child { height: 30px; }
.idilio-trust--reviews img:nth-child(2) { height: 46px; }
.idilio-trust--reviews p { font-size: 14px; line-height: 1.4; text-align: left; }

/* Homes */
/* SIN SCROLL-SNAP, y es deliberado. El prototipo se lo pone a la tira de
   reseñas pero NO a esta. Al portar se le puso a las dos, y con `x mandatory`
   el navegador tiene que aterrizar sobre un punto de anclaje: al pasar el ratón
   por encima, la tira se traga el gesto del trackpad y la página deja de bajar
   con suavidad. Se siente como si la sección fuera una caja aparte. */
.idilio-card-rail { display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; }
/* `hidden` ya impide que la tira se coma la rueda, pero recorta justo en el
   borde, y la última línea de la tarjeta (el precio) termina exactamente ahí:
   cero margen. Con eso, un redondeo de medio píxel o la cola de una «g» se
   quedan fuera y el texto parece hundirse. `clip` hace lo mismo que `hidden`
   sin crear contenedor de scroll, y `overflow-clip-margin` deja pintar unos
   píxeles más allá de la caja. Los navegadores que no entienden `clip` se
   quedan con el `hidden` de la línea de arriba. */
.idilio-card-rail, .idilio-review-rail { overflow-y: clip; overflow-clip-margin: 8px; }
.idilio-card-rail::-webkit-scrollbar, .idilio-review-rail::-webkit-scrollbar { display: none; }
/* The rail sizes the card; in the Our Homes grid the column does, so the
   flex basis and the 260px floor are scoped to the rail or they overflow a
   four-column grid at 1024px. */
.idilio-card-rail .idilio-home-card { flex: 0 0 calc((100% - 12px)/4); min-width: 260px; }

/* Flechas de la tira, portadas del prototipo: mismo círculo blanco de 42px y
   misma sombra que la galería de la ficha, centradas sobre la foto y no sobre
   la tarjeta entera (de ahí el descuento de los 78px del bloque de texto). */
.idilio-card-rail-wrap { position: relative; }
.idilio-rail-arrow {
	position: absolute;
	top: calc((100% - 78px) / 2);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	color: var(--idilio-ink);
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 2px 10px rgba(0,0,0,.12);
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity .2s ease;
}
.idilio-rail-arrow:hover { opacity: .9; }
.idilio-rail-arrow[hidden] { display: none; }
.idilio-rail-arrow--prev { left: 14px; }
.idilio-rail-arrow--next { right: 14px; }
.idilio-rail-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.idilio-rail-arrow--prev svg { transform: rotate(180deg); }
@media (max-width: 767px) { .idilio-rail-arrow { display: none; } }

.idilio-home-card__media { aspect-ratio: 2/3; overflow: hidden; background: #e8e3dc; }
.idilio-home-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease-out; }
.idilio-home-card:hover .idilio-home-card__media img { transform: scale(1.07); }
.idilio-home-card__copy { padding: 16px 8px 0 0; }
.idilio-home-card__copy h3 { font-family: var(--idilio-serif); font-size: 18px; font-weight: 400; line-height: 1.25; }
.idilio-home-card__copy p { margin-top: 6px; font-size: 13px; line-height: 1.4; }
.idilio-home-card__copy p + p { margin-top: 3px; font-size: 13.5px; }
.idilio-home-card__copy strong { font-weight: 400; -webkit-text-stroke: .35px currentColor; }
/* Unique Homestays type rule, homepage Featured Homes only (9 Oct): name in
   sans, details in serif a step under it so the name leads. */
/* Since 12 October the same treatment covers Our Homes and search results
   (.idilio-card-grid), so the house card reads the same on every page. */
.idilio-featured .idilio-home-card__copy h3,
.idilio-card-grid .idilio-home-card__copy h3 { font-family: var(--idilio-sans); font-size: 17px; -webkit-text-stroke: .35px currentColor; }
/* All card text in sans, the name set like the collection card titles
   (Javier, 12 October; replaces the 9 October sans name / serif details). */
.idilio-featured .idilio-home-card__copy p,
.idilio-featured .idilio-home-card__copy p + p,
.idilio-card-grid .idilio-home-card__copy p,
.idilio-card-grid .idilio-home-card__copy p + p { margin-top: 0; font-family: var(--idilio-sans); font-size: 13.5px; line-height: 1.45; color: rgba(44,15,5,.7); }
.idilio-featured .idilio-home-card__copy h3 + p,
.idilio-card-grid .idilio-home-card__copy h3 + p { margin-top: 6px; }
.idilio-featured .idilio-home-card__copy strong,
.idilio-card-grid .idilio-home-card__copy strong { -webkit-text-stroke: 0; }
/* Card text aligned left, the standard in TTT and Casita (Javier, 12 October;
   replaces the centred text of 11 October). */
.idilio-featured .idilio-home-card__copy,
.idilio-card-grid .idilio-home-card__copy { padding-inline: 4px; text-align: left; }
.idilio-section-cta { display: flex; justify-content: center; margin-top: 26px; }

/* Reviews. Ported from the prototype on 9 October 2026, see DESIGN_SYSTEM.md
   "Reseñas de la home". Same side margins as Featured Homes, three cards per
   row, every line taken from the site type scale. */
.idilio-review-rail { display: flex; gap: 20px; overflow-x: auto; overflow-y: hidden; padding: 4px 0; scroll-snap-type: x mandatory; scrollbar-width: none; }
.idilio-review-card {
	/* Fixed levels on every card: name and house, stars, then the quote in a
	   three-line box (order since 12 October, Javier), platform logo pinned to
	   the foot. Symmetric 24px padding. */
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 0 calc((100% - 40px) / 3);
	padding: 24px 48px;
	color: var(--idilio-ink);
	background: #fff;
	border: 1px solid rgba(44,15,5,.08);
	border-radius: 6px;
	text-align: center;
	text-decoration: none;
	scroll-snap-align: start;
	transition: border-color .2s ease, box-shadow .2s ease;
}
a.idilio-review-card:hover { border-color: rgba(44,15,5,.22); box-shadow: 0 2px 12px rgba(44,15,5,.06); }
/* Three lines, always: a longer quote is cut with an ellipsis. */
.idilio-review-card blockquote { display: -webkit-box; height: calc(17px * 1.6 * 3); overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; color: var(--idilio-ink); font-family: var(--idilio-serif); font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.idilio-stars { margin: 14px 0 18px; color: var(--idilio-star); font-size: 14px; letter-spacing: .14em; line-height: 1; }
.idilio-review-card__sig { display: flex; flex-direction: column; align-items: center; width: 100%; }
/* Without stars the quote keeps a little air below the name. */
.idilio-review-card--unrated blockquote { margin-top: 18px; }
.idilio-review-card__guest { margin-top: 0; color: var(--idilio-ink); font-family: var(--idilio-sans); font-size: 16px; line-height: 1.3; -webkit-text-stroke: .35px currentColor; }
.idilio-review-card__meta { margin-top: 2px; color: rgba(44,15,5,.7); font-family: var(--idilio-serif); font-size: 15px; line-height: 1.5; }
.idilio-review-card__source { display: flex; align-items: center; justify-content: center; gap: 6px; height: 24px; margin-top: auto; padding-top: 14px; box-sizing: content-box; }
.idilio-review-card__source img { display: block; width: auto; }
.idilio-reviews .idilio-card-rail-wrap .idilio-rail-arrow { top: 50%; }
.idilio-reviews .idilio-section-cta { margin-top: 26px; }

/* Reviews page: the same card in a grid, current calendar year. */
.idilio-reviews-page { min-height: 70vh; padding-top: calc(82px + clamp(48px,5vw,64px)); padding-bottom: clamp(48px,5vw,80px); background: var(--idilio-bone); }
.idilio-reviews-page h1 { font-family: var(--idilio-serif); font-weight: 400; font-size: clamp(26px,2.6vw,34px); text-align: center; color: var(--idilio-ink); }
.idilio-reviews-page__intro { max-width: 46ch; margin: 12px auto 0; text-align: center; color: rgba(44,15,5,.7); font-size: 15px; line-height: 1.5; }
.idilio-reviews-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; margin-top: clamp(28px,3vw,40px); }
.idilio-reviews-grid .idilio-review-card { flex: none; }
@media (max-width: 1023px) { .idilio-reviews-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 639px) { .idilio-reviews-grid { grid-template-columns: 1fr; } }

/* Footer */
.idilio-footer { padding: 80px 40px 32px; color: var(--idilio-bone); background: var(--idilio-footer); }
.idilio-footer__inner { width: 100%; margin: 0 auto; }
.idilio-footer__grid { display: grid; grid-template-columns: 1.2fr 2fr; gap: 56px; }
.idilio-footer__lockup { display: flex; align-items: center; gap: 18px; }
.idilio-footer__lockup img:first-child { width: 48px; height: 46px; }
.idilio-footer__lockup img:last-child { width: auto; height: 25px; }
/* Same size as the homepage row (Javier, 9 Oct). */
/* Back to the earlier badge size, everything scaled by 0.8 so the proportions hold (Javier, 13 October). */
.idilio-footer__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 40px; }
.idilio-footer__trust img:first-child { width: auto; height: 28px; filter: invert(1); opacity: .9; }
.idilio-footer__trust img:nth-child(2) { width: auto; height: 43px; filter: brightness(0) invert(1); opacity: .9; }
.idilio-footer__trust p { color: rgba(251,247,239,.9); font-size: 13px; line-height: 1.5; }
.idilio-footer__trust b { letter-spacing: .1em; }
.idilio-footer__links { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px 32px; }
.idilio-footer__links div { display: flex; flex-direction: column; align-items: flex-start; }
.idilio-footer__links h3 { margin-bottom: 8px; color: rgba(251,247,239,.6); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.idilio-footer__links a { margin-top: 12px; color: var(--idilio-bone); font-size: 16px; transition: opacity .2s ease; }
.idilio-footer__links a:hover { opacity: .7; }
.idilio-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 72px; padding-top: 24px; border-top: 1px solid rgba(251,247,239,.14); }
.idilio-footer__bottom p { color: rgba(251,247,239,.6); font-size: 14px; }

/* Motion */
.idilio-reveal { opacity: 0; transform: translateY(16px); transition: opacity .9s ease-out, transform .9s ease-out; }
.idilio-reveal.is-visible { opacity: 1; transform: none; }

/* POR QUÉ LAS TARJETAS DE UNA TIRA NO SE DESLIZAN AL APARECER.
   `overflow-x: auto` obliga al navegador a calcular `overflow-y: auto`: una
   tira horizontal es también, quiera o no, un contenedor de scroll vertical.
   La animación de entrada empieza con `translateY(16px)`, y esos 16 px bastan
   para que la tira tenga scroll vertical propio. Entonces la rueda del ratón
   se la come la tira: recorre sus 16 px antes de pasar el gesto a la página,
   y se siente como si la sección fuera una caja aparte que retiene el scroll.
   Dentro de una tira, la entrada es solo un fundido. Sin desplazamiento no hay
   desbordamiento y la rueda pasa de largo. El `overflow-y: hidden` de arriba
   es el cinturón; esto es los tirantes. */
.idilio-card-rail .idilio-reveal,
.idilio-review-rail .idilio-reveal { transform: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
	.idilio-reveal { opacity: 1; transform: none; }
}

@media (max-width: 1279px) {
	.idilio-header__inner { justify-content: center; padding: 0 24px; }
	.idilio-primary-nav, .idilio-contact, .idilio-contact-wrap { display: none; }
	.idilio-header__right { position: absolute; right: 24px; }
	.idilio-menu-toggle {
		position: absolute;
		left: 24px;
		display: flex;
		flex-direction: column;
		gap: 5px;
		padding: 10px 0;
		color: inherit;
		background: transparent;
		cursor: pointer;
	}
	.idilio-menu-toggle span { width: 18px; height: 1.25px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
	.idilio-header.is-menu-open .idilio-menu-toggle span:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
	.idilio-header.is-menu-open .idilio-menu-toggle span:nth-child(2) { opacity: 0; }
	.idilio-header.is-menu-open .idilio-menu-toggle span:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); }
	.idilio-mobile-menu {
		position: absolute;
		top: 100%;
		left: 0;
		display: flex;
		flex-direction: column;
		width: 100%;
		max-height: 0;
		padding: 0 24px;
		color: var(--idilio-charcoal);
		background: var(--idilio-bone);
		overflow: hidden;
		transition: max-height .35s ease, padding .35s ease;
	}
	.idilio-header.is-menu-open .idilio-mobile-menu { max-height: 460px; padding: 18px 24px 32px; }
	.idilio-mobile-menu a { padding: 13px 0; border-bottom: 1px solid rgba(30,30,30,.08); font-size: 18px; }
}

@media (max-width: 900px) {
	.idilio-pillars { grid-template-columns: 1fr; gap: 48px; }
	.idilio-card-rail .idilio-home-card { flex-basis: calc((100% - 4px)/2); }
	.idilio-footer__grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	body.admin-bar .idilio-header, body.admin-bar .idilio-nav-scrim { top: 46px; }
	.idilio-header { height: 76px; }
	.idilio-header.is-scrolled { height: 64px; }
	.idilio-lockup__mark { width: 37px; height: 36px; }
	.idilio-lockup__word { display: none; }
	.idilio-header__right { right: 18px; }
	.idilio-menu-toggle { left: 18px; }
	.idilio-hero { min-height: 620px; }
	.idilio-hero__content { gap: 28px; }
	.idilio-trust > i { display: none; }
	.idilio-card-rail .idilio-home-card { flex-basis: 86%; min-width: 260px; }
	.idilio-review-rail .idilio-review-card { flex-basis: 86vw; padding-inline: 28px; }
	.idilio-footer { padding: 64px 20px 28px; }
	.idilio-footer__links { grid-template-columns: repeat(2,1fr); }
	.idilio-footer__bottom { align-items: flex-start; flex-direction: column; }
}

/* ------------------------------------------------------------------------- */
/* Our Homes (page-idilio-homes.php)                                          */
/* Ported from the prototype: src/app/properties/page.tsx and                 */
/* src/app/properties/properties.module.css.                                  */
/* ------------------------------------------------------------------------- */

.idilio-page-hero {
	position: relative;
	width: 100%;
	/* Every interior page, not the homepage (Javier, 13 October): first exactly
	   half the screen, then "a bit bigger", 58%, then 63%. What follows still shows from
	   the start. svh keeps it exact on mobile, where the browser bar would
	   otherwise change the viewport height. */
	height: 63vh;
	height: 63svh;
	overflow: hidden;
	/* Shows through while the video loads. */
	background: linear-gradient(135deg, #3a3228 0%, #5a4a3a 40%, #7a6a5a 100%);
}
.idilio-page-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.idilio-page-hero__content {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Centred in the part of the video under the header (102px, 76px on
	   mobile), so the copy never crowds the menu (13 October). */
	padding: 102px 24px 0;
	text-align: center;
}
.idilio-page-hero__content h1 {
	max-width: 18ch;
	color: var(--idilio-bone);
	font-family: var(--idilio-serif);
	font-size: clamp(32px,4.5vw,64px);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -.01em;
	/* No veil over the video, same call as the homepage hero: legibility comes
	   from the shadow on the text, not from a filter over the image. */
	text-shadow: 0 1px 28px rgba(0,0,0,.22);
}

.idilio-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 4px;
	row-gap: 24px;
	padding: 12px 8px 64px;
	background: var(--idilio-bone);
}
.idilio-card-grid__item.is-hidden { display: none; }
.idilio-card-grid__item { transition: opacity .2s ease; }
.idilio-card-grid__item.is-map-active { opacity: .72; }
.idilio-load-more { padding-bottom: 72px; background: var(--idilio-bone); }
/* Javier, 12 October: the button sat too far from the last row. Pull it up
   into the grid's bottom padding so the gap reads about 48px (was 114). */
.idilio-card-grid + .idilio-load-more { margin-top: -40px; }
.idilio-empty { padding: 64px 24px 96px; text-align: center; }
.idilio-homes-summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 6px clamp(16px,1.6vw,32px) 0; background: var(--idilio-bone); font-size: 13px; }
.idilio-homes-summary a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.idilio-homes-date-note { margin: 0; padding: 8px clamp(16px,1.6vw,32px) 0; background: var(--idilio-bone); color: rgba(30,30,30,.64); font-size: 12px; }

/* Search results: same card and same search component, with a quiet editorial
   heading instead of inventing a second visual system for this route. */
.idilio-results { min-height: 70vh; padding-top: 82px; background: var(--idilio-bone); }
.idilio-results__head { display: grid; gap: 18px; padding: 64px clamp(20px,4vw,64px) 34px; text-align: center; }
.idilio-results__eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.idilio-results__head h1 { font-family: var(--idilio-serif); font-size: clamp(34px,4vw,58px); font-weight: 400; line-height: 1.12; }
.idilio-results__note { max-width: 660px; margin-inline: auto; color: rgba(30,30,30,.64); font-size: 14px; line-height: 1.6; }
.idilio-results .idilio-search-band { padding-top: 0; }
.idilio-results__empty { display: grid; justify-items: center; gap: 22px; padding: 56px 24px 110px; text-align: center; }
.idilio-results__empty h2 { font-family: var(--idilio-serif); font-size: clamp(28px,3vw,42px); font-weight: 400; }
.idilio-results__empty p { max-width: 560px; color: rgba(30,30,30,.64); line-height: 1.6; }

/* Fewer than four results keep the Our Homes card width (a quarter of the
   row) and sit centred, instead of shrinking to 300px columns. */
@media (min-width: 640px) {
	.idilio-results .idilio-card-grid.idilio-results__grid--1 { grid-template-columns: calc((100% - 4px) / 2); justify-content: center; }
}
@media (min-width: 1024px) {
	.idilio-results .idilio-card-grid.idilio-results__grid--1 { grid-template-columns: calc((100% - 12px) / 4); }
	.idilio-results .idilio-card-grid.idilio-results__grid--2 { grid-template-columns: repeat(2, calc((100% - 12px) / 4)); justify-content: center; }
	.idilio-results .idilio-card-grid.idilio-results__grid--3 { grid-template-columns: repeat(3, calc((100% - 12px) / 4)); justify-content: center; }
}

.idilio-map-toolbar {
	display: flex;
	justify-content: flex-end;
	padding: 14px clamp(16px,1.6vw,32px) 0;
	background: var(--idilio-bone);
}
/* Desktop: the Map button rides on the search bar's row, right edge (13 October). */
.idilio-search-band { position: relative; }
/* From 1100px there is room beside the 720px bar; below, it sits 14px under it. */
@media (min-width: 1100px) {
	.idilio-search-band .idilio-map-toolbar { position: absolute; top: 50%; right: 0; padding-block: 0; background: none; transform: translateY(-50%); }
}
.idilio-map-toggle,
.idilio-homes-map__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 42px;
	padding: 0 17px;
	color: var(--idilio-bone);
	background: var(--idilio-ink);
	border: 1px solid var(--idilio-ink);
	border-radius: 999px;
	font-family: var(--idilio-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity .2s ease, transform .2s ease;
}
.idilio-map-toggle:hover,
.idilio-homes-map__close:hover { opacity: .82; }
/* Map button pure white like the search box, less intrusive (Javier, 13 October). */
/* Map and Close share one format (13 October): pure white, hairline brown
   outline with no shadow, label in our sans, sentence case, semibold, and no
   change at all on hover. */
.idilio-map-toggle,
.idilio-homes-map .idilio-homes-map__close { color: var(--idilio-charcoal); background: #fff; border: .5px solid var(--idilio-ink); box-shadow: none; font-family: var(--idilio-sans); }
.idilio-map-toggle span,
.idilio-homes-map .idilio-homes-map__close span { font-family: var(--idilio-sans); font-size: 14px; font-weight: 600; letter-spacing: .01em; text-transform: none; }
.idilio-map-toggle:hover,
.idilio-homes-map .idilio-homes-map__close:hover { opacity: 1; color: var(--idilio-charcoal); }
.idilio-map-toggle:disabled { opacity: .35; cursor: not-allowed; }
.idilio-map-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.idilio-homes-view { position: relative; background: var(--idilio-bone); }
.idilio-homes-view__results { min-width: 0; }
.idilio-homes-map[hidden] { display: none; }
.idilio-homes-map {
	position: relative;
	min-width: 0;
	overflow: hidden;
	background:
		url('../images/map-stars.svg') repeat,
		#08213c;
}
/* Extra specificity is intentional: MapLibre's stylesheet is loaded after the
   theme and otherwise resets its own container to position:relative. */
.idilio-homes-map .idilio-homes-map__canvas { position: absolute; inset: 0; }
.idilio-homes-map__close {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 4;
	min-width: 42px;
	box-shadow: 0 3px 18px rgba(30,30,30,.16);
}
.idilio-homes-map__close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.idilio-homes-map__status { position: absolute; inset: 50% auto auto 50%; z-index: 2; width: min(280px,80%); transform: translate(-50%,-50%); font-family: var(--idilio-sans); font-size: 13px; text-align: center; }

/* Custom markers keep the Idilio visual language while the base map remains
   deliberately neutral for this first provider test. */
.idilio-map-marker {
	position: relative;
	width: 30px;
	height: 36px;
	padding: 0;
	background: transparent;
	filter: drop-shadow(0 4px 5px rgba(30,30,30,.2));
	cursor: pointer;
	transition: transform .18s ease;
}
.idilio-map-marker::before {
	content: '';
	position: absolute;
	left: 3px;
	top: 1px;
	width: 24px;
	height: 24px;
	background: var(--idilio-ink);
	border: 2px solid var(--idilio-bone);
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
}
.idilio-map-marker span { position: absolute; left: 12px; top: 10px; width: 6px; height: 6px; z-index: 1; background: var(--idilio-bone); border-radius: 50%; }
.idilio-map-marker.is-active,
.idilio-map-marker.is-selected { transform: translateY(-4px) scale(1.16); }
.idilio-map-marker:focus-visible { outline: 2px solid var(--idilio-ink); outline-offset: 4px; }

/* The listing map uses quiet circular markers and a compact name on hover.
   The house page keeps its existing single-property pin. */
.idilio-homes-marker {
	position: relative;
	display: block;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	border-radius: 50%;
	cursor: pointer;
	z-index: 1;
}
.idilio-homes-marker__dot {
	position: absolute;
	left: 9px;
	bottom: 4px;
	width: 14px;
	height: 14px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--idilio-sage);
	box-shadow: 0 2px 5px rgba(8, 25, 42, .45);
	transition: opacity .15s ease, transform .15s ease;
}
.idilio-homes-marker__name {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: max-content;
	max-width: min(190px, 60vw);
	padding: 6px 12px;
	transform: translateX(-50%) scale(.96);
	transform-origin: center bottom;
	border-radius: 999px;
	background: #1d1b19;
	box-shadow: 0 3px 10px rgba(8, 25, 42, .24);
	color: #fff;
	font-family: var(--idilio-sans);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
}
.idilio-homes-marker:hover,
.idilio-homes-marker:focus-visible,
.idilio-homes-marker.is-active,
.idilio-homes-marker.is-selected { z-index: 5; }
.idilio-homes-marker:hover .idilio-homes-marker__dot,
.idilio-homes-marker:focus-visible .idilio-homes-marker__dot,
.idilio-homes-marker.is-active .idilio-homes-marker__dot { opacity: 0; transform: scale(.75); }
.idilio-homes-marker:hover .idilio-homes-marker__name,
.idilio-homes-marker:focus-visible .idilio-homes-marker__name,
.idilio-homes-marker.is-active .idilio-homes-marker__name { opacity: 1; transform: translateX(-50%) scale(1); pointer-events: auto; }
.idilio-homes-marker.is-selected .idilio-homes-marker__dot { opacity: 1; transform: none; box-shadow: 0 0 0 3px rgba(109,115,89,.26), 0 2px 6px rgba(8,25,42,.35); }
.idilio-homes-marker.is-selected .idilio-homes-marker__name { opacity: 0; pointer-events: none; }
.idilio-homes-marker:focus-visible { outline: 2px solid var(--idilio-ink); outline-offset: 2px; }

/* Clicking a map point opens a small photo card. Its photo and title lead to
   the house; the arrows and close button act only inside this card. */
.idilio-homes-map .idilio-homes-popup { z-index: 6; }
.idilio-homes-map .idilio-homes-popup .maplibregl-popup-content { width: min(300px, calc(100vw - 36px)); padding: 0; overflow: hidden; border-radius: 16px; box-shadow: 0 12px 34px rgba(16,30,38,.24); }
.idilio-homes-map .idilio-homes-popup .maplibregl-popup-tip { display: none; }
.idilio-map-preview { overflow: hidden; background: #fff; color: var(--idilio-charcoal); font-family: var(--idilio-sans); }
.idilio-map-preview__media { position: relative; height: 185px; overflow: hidden; background: var(--idilio-stone); }
.idilio-map-preview__media > a { display: block; width: 100%; height: 100%; }
.idilio-map-preview__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.idilio-map-preview__close,
.idilio-map-preview__arrow { position: absolute; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.96); color: var(--idilio-ink); box-shadow: 0 2px 8px rgba(0,0,0,.18); cursor: pointer; }
.idilio-map-preview__close { top: 10px; right: 10px; }
.idilio-map-preview__arrow { top: 50%; transform: translateY(-50%); }
.idilio-map-preview__arrow--previous { left: 10px; }
.idilio-map-preview__arrow--next { right: 10px; }
.idilio-map-preview__arrow[hidden] { display: none; }
.idilio-map-preview__close svg,
.idilio-map-preview__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.idilio-map-preview__dots { position: absolute; bottom: 10px; left: 50%; z-index: 1; display: flex; gap: 4px; transform: translateX(-50%); pointer-events: none; }
.idilio-map-preview__dots span { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.6); box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.idilio-map-preview__dots .is-current { background: #fff; transform: scale(1.25); }
.idilio-map-preview__details { display: grid; gap: 3px; padding: 12px 14px 15px; }
.idilio-map-preview__title { color: var(--idilio-ink); font-size: 15px; font-weight: 600; line-height: 1.3; text-decoration: none; }
.idilio-map-preview__title:hover { text-decoration: underline; text-underline-offset: 2px; }
.idilio-map-preview__details p { margin: 0; color: rgba(44,15,5,.7); font-size: 12px; line-height: 1.4; }
.idilio-map-preview__details .idilio-map-preview__price { margin-top: 5px; color: var(--idilio-ink); font-size: 13px; font-weight: 600; }
@media (max-width: 480px) {
	.idilio-homes-map .idilio-homes-popup .maplibregl-popup-content { width: min(252px, calc(100vw - 32px)); }
	.idilio-map-preview__media { height: 176px; }
}

/* Map open, Casita's proportions (13 October): the cards keep the page margin
   on the left, the map is a rounded panel of about 39% on the right with the
   same margin around it. Once pinned it NEVER moves or resizes (Javier: both
   made it tremble or slide): it sits at the top of the screen with full
   height, and when the header comes back it simply passes over the map's top
   edge. Its controls live at the bottom so the header never covers them. */
@media (min-width: 900px) {
	.idilio-homes-view { --map-gutter: clamp(16px,1.6vw,32px); --map-bar: 0px; }
	body.admin-bar .idilio-homes-view { --map-bar: 32px; }
	.idilio-homes-view.is-map-open { display: grid; grid-template-columns: minmax(0,1fr) 38.7%; column-gap: 12px; align-items: start; padding-right: var(--map-gutter); }
	.idilio-homes-view.is-map-open .idilio-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); padding-right: 0; padding-left: var(--map-gutter); }
	/* Top to bottom of the screen once pinned, margins only left and right (Javier, 13 October). */
	.idilio-homes-map { position: sticky; top: var(--map-bar); height: calc(100vh - var(--map-bar)); border-radius: 0; }
	.idilio-homes-map .idilio-homes-map__close { top: auto; right: auto; bottom: 18px; left: 18px; }
}
/* Three across beside the map (Javier, 13 October). */
@media (min-width: 1200px) {
	.idilio-homes-view.is-map-open .idilio-card-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (min-width: 640px) {
	.idilio-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 26px; padding: 16px 12px 80px; }
}

@media (min-width: 1024px) {
	/* Four cards with narrow gutters: the choice made on 18 September after
	   comparing three and four across. */
	.idilio-card-grid { grid-template-columns: repeat(4,minmax(0,1fr)); row-gap: 28px; padding: 0 clamp(16px,1.6vw,32px) 88px; }
}

@media (max-width: 600px) {
	.idilio-page-hero__content { padding-top: 76px; }
	.idilio-search-band { padding: 22px 0; }
}

@media (max-width: 899px) {
	.idilio-map-lock { overflow: hidden; }
	.idilio-homes-map { position: fixed; inset: 0; z-index: 10000; width: 100%; height: 100svh; min-height: 0; }
	body.admin-bar .idilio-homes-map { top: 46px; height: calc(100svh - 46px); }
	.idilio-homes-map__close { top: max(16px,env(safe-area-inset-top)); right: 16px; }
}

/* ------------------------------------------------------------------------- */
/* Property page (single-accommodation.php)                                   */
/* Ported from the prototype's PropertyDetail. Tuned on La Almunia; every      */
/* house uses this same file, so a change here lands on all twenty-three.      */
/* ------------------------------------------------------------------------- */

.idilio-property { --idilio-paper: #fefcf9; --idilio-stone: #f2ede3; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .idilio-property { padding-bottom: 0; } }

.idilio-property .idilio-section-label { font-family: var(--idilio-sans); font-size: 13px; font-weight: 500; -webkit-text-stroke: .5px currentColor; letter-spacing: .1em; text-transform: uppercase; color: var(--idilio-charcoal); }
.idilio-eyebrow { font-family: var(--idilio-sans); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(30,30,30,.58); }
.idilio-property .idilio-btn--solid { color: var(--idilio-bone); background: var(--idilio-ink); border-color: var(--idilio-ink); }
.idilio-property .idilio-btn--solid:hover { opacity: .88; }

/* Mosaic */
.idilio-mosaic { position: relative; }
.idilio-mosaic__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; height: max(480px, calc(100svh - 230px)); }
.idilio-mosaic__cell { position: relative; margin: 0; overflow: hidden; background: var(--idilio-stone); }
.idilio-mosaic__cell--lead { grid-row: 1 / span 2; }
.idilio-mosaic__cell img { width: 100%; height: 100%; object-fit: cover; }
.idilio-photos-pill {
	position: absolute;
	right: clamp(16px, 2vw, 28px);
	bottom: 28px;
	z-index: 10;
	padding: 11px 20px;
	color: var(--idilio-charcoal);
	background: rgba(255,255,255,.94);
	border-radius: 999px;
	box-shadow: 0 2px 10px rgba(0,0,0,.12);
	font-family: var(--idilio-sans);
	font-size: 13px;
	letter-spacing: .06em;
	cursor: pointer;
}

/* Body */
.idilio-property__body { display: grid; grid-template-columns: minmax(0,1fr); }
.idilio-property__main { padding-inline: 20px; }
@media (min-width: 768px) { .idilio-property__main { padding-inline: 40px; } }
@media (min-width: 1024px) {
	.idilio-property__body { grid-template-columns: minmax(0,1fr) clamp(360px,30vw,500px); }
	.idilio-property__main { padding-left: 40px; padding-right: clamp(40px,4vw,80px); }
}

.idilio-overview { padding-top: 40px; }
.idilio-overview__head { text-align: center; }
.idilio-overview__head h1 { margin-top: 18px; font-family: var(--idilio-serif); font-size: clamp(38px,3.8vw,52px); font-weight: 400; line-height: 1.05; color: var(--idilio-charcoal); }
.idilio-facts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 30px; row-gap: 10px; list-style: none; padding: 0; }
.idilio-facts li { display: flex; align-items: center; }
.idilio-facts i { width: 1px; height: 14px; margin-inline: 12px; background: rgba(30,30,30,.14); }
.idilio-facts span { font-family: var(--idilio-sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
@media (min-width: 640px) { .idilio-facts i { margin-inline: 22px; } .idilio-facts span { font-size: 13px; letter-spacing: .16em; } }

/* The story: three lines and a fold, as in the prototype. */
.idilio-story { max-width: 620px; margin: 44px auto 0; }
.idilio-story__text p { font-family: var(--idilio-serif); font-size: 17px; line-height: 1.85; color: rgba(30,30,30,.86); text-wrap: pretty; }
.idilio-story__text p + p { margin-top: 18px; }
.idilio-story__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.idilio-story.is-open .idilio-story__text { display: block; overflow: visible; }
.idilio-story__toggle { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 0; background: none; color: var(--idilio-charcoal); font-family: var(--idilio-sans); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: opacity .2s ease; }
.idilio-story__toggle:hover { opacity: .6; }
.idilio-story__toggle span { padding-bottom: 3px; border-bottom: 1px solid currentColor; }
.idilio-story__toggle svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.3; transition: transform .3s ease; }
.idilio-story.is-open .idilio-story__toggle svg { transform: rotate(180deg); }

/* Gallery strip */
.idilio-overview__label { margin-top: 64px; margin-bottom: 22px; }
.idilio-strip-wrap { position: relative; }
.idilio-strip { display: flex; gap: 6px; overflow-x: auto; overflow-y: clip; overflow-clip-margin: 8px; scroll-behavior: smooth; scrollbar-width: none; }
.idilio-strip::-webkit-scrollbar { display: none; }
.idilio-strip__item { flex: 0 0 calc((100% - 18px) / 4); min-width: 150px; margin: 0; aspect-ratio: 2/3; overflow: hidden; background: var(--idilio-stone); }
.idilio-strip__item img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .idilio-strip__item { flex-basis: 45vw; } }

/* Folds */
.idilio-folds { margin-top: 64px; border-top: 1px solid rgba(30,30,30,.14); }
.idilio-fold { border-bottom: 1px solid rgba(30,30,30,.14); transition: background-color .3s ease; }
.idilio-fold.is-open { background: var(--idilio-paper); }
.idilio-fold__head { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 30px 0; background: none; text-align: left; cursor: pointer; transition: opacity .2s ease; }
.idilio-fold__head:hover { opacity: .7; }
/* Plus and minus instead of an arrow (Le Collectionist). */
.idilio-fold__head i { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.idilio-fold__head i::before, .idilio-fold__head i::after { content: ''; position: absolute; left: 0; top: 50%; width: 14px; height: 1px; background: var(--idilio-charcoal); transition: transform .3s ease; }
.idilio-fold__head i::after { transform: rotate(90deg); }
.idilio-fold.is-open .idilio-fold__head i::after { transform: rotate(0deg); }
.idilio-fold__body { padding-bottom: 36px; }
.idilio-amenities { display: grid; grid-template-columns: 1fr; column-gap: 56px; list-style: none; padding: 0; }
.idilio-amenities li { padding: 11px 0; border-bottom: 1px solid rgba(30,30,30,.14); font-family: var(--idilio-serif); font-size: 15px; color: rgba(30,30,30,.86); }
@media (min-width: 640px) { .idilio-amenities { grid-template-columns: 1fr 1fr; } }
.idilio-rates p { max-width: 660px; font-family: var(--idilio-serif); font-size: 16px; line-height: 1.7; color: rgba(30,30,30,.86); }
.idilio-rates p + p { margin-top: 12px; }
.idilio-rates__note { max-width: 660px; margin-top: 22px; font-family: var(--idilio-sans); font-size: 13px; color: rgba(30,30,30,.58); }
.idilio-detail-list { max-width: 660px; list-style: none; padding: 0; }
.idilio-detail-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 12px 0; border-bottom: 1px solid rgba(30,30,30,.14); }
.idilio-detail-list li span:first-child { font-family: var(--idilio-sans); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(30,30,30,.58); }
.idilio-detail-list li span:last-child { font-family: var(--idilio-serif); font-size: 15px; color: rgba(30,30,30,.86); text-align: right; }

/* Two ways in */
.idilio-two-ways { margin-top: 0; padding: 40px 20px; text-align: center; background: var(--idilio-paper); }
.idilio-two-ways > p:nth-of-type(2) { max-width: 460px; margin: 12px auto 0; font-family: var(--idilio-serif); font-size: 15px; line-height: 1.7; color: rgba(30,30,30,.86); }
.idilio-two-ways__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }

/* Booking rail */
.idilio-rail { display: none; }
@media (min-width: 1024px) {
	.idilio-rail { display: block; padding-left: clamp(28px,2.6vw,48px); padding-right: clamp(20px,2.6vw,48px); padding-bottom: 32px; border-left: 1px solid rgba(30,30,30,.14); }
}
.idilio-rail__sticky { position: sticky; top: 100px; z-index: 20; margin-top: 40px; }
.idilio-book { position: relative; display: grid; gap: 10px; padding: 22px; background: var(--idilio-paper); border: 1px solid rgba(30,30,30,.14); }
.idilio-book__field { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 52px; padding: 0 20px 0 22px; background: #fff; border: 1px solid rgba(30,30,30,.14); border-radius: 999px; font-family: var(--idilio-sans); font-size: 15px; color: var(--idilio-charcoal); text-align: left; cursor: pointer; }
.idilio-book__field select { width: 100%; padding: 0; background: none; border: 0; outline: 0; font: inherit; color: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; }
.idilio-book__cta { justify-content: center; margin-top: 4px; text-align: center; }
.idilio-book__note { font-family: var(--idilio-sans); font-size: 12px; line-height: 1.5; color: rgba(30,30,30,.58); text-align: center; }
/* The calendar hangs leftwards over the page; JavaScript chooses above or
   below from the space that is actually visible. */
.idilio-book__pop { right: 0; left: auto; width: 624px; padding: 24px 32px; transform: none; }
/* Same airy panel as the homepage search and the prototype: the clear link
   sits quietly in the bottom padding instead of a ruled footer. */
.idilio-book__pop .idilio-cal__actions { position: absolute; right: 32px; bottom: 5px; left: 32px; height: 17px; margin: 0; padding: 0; border: 0; }
@media (max-width: 760px) {
	.idilio-book__pop { width: min(324px, calc(100vw - 24px)); padding: 20px 24px; }
	.idilio-book__pop .idilio-cal__actions { right: 24px; bottom: 4px; left: 24px; }
}
.idilio-rail__human { margin-top: 16px; font-family: var(--idilio-sans); font-size: 13px; color: rgba(30,30,30,.58); text-align: center; }
.idilio-rail__human a { color: var(--idilio-charcoal); border-bottom: 1px solid currentColor; padding-bottom: 1px; }

/* The area */
.idilio-area { display: grid; grid-template-columns: minmax(0,1fr); border-top: 1px solid rgba(30,30,30,.14); }
@media (min-width: 1024px) { .idilio-area { grid-template-columns: minmax(0,1fr) clamp(360px,30vw,500px); } }
.idilio-area__map { position: relative; width: 100%; min-height: 520px; overflow: hidden; background: var(--idilio-stone); }
.idilio-area__canvas, .idilio-area__canvas.maplibregl-map { position: absolute; inset: 0; }
.idilio-area__map .idilio-map-marker { cursor: default; }
.idilio-area__credit { position: absolute; right: 10px; bottom: 6px; z-index: 2; margin: 0; font-family: var(--idilio-sans); font-size: 10px; color: rgba(30,30,30,.45); }
.idilio-area__credit a { color: inherit; text-decoration: none; }
.idilio-area__cta { position: absolute; left: 50%; bottom: 28px; z-index: 2; transform: translateX(-50%); }
.idilio-area__panel { padding: 56px clamp(28px,2.6vw,48px); background: var(--idilio-sage); color: var(--idilio-bone); }
.idilio-area__panel .idilio-section-label { color: var(--idilio-bone); }
.idilio-area__panel ul { margin-top: 28px; list-style: none; padding: 0; }
.idilio-area__panel li { margin-top: 18px; }
.idilio-area__panel li .idilio-eyebrow { display: block; color: var(--idilio-bone); }
.idilio-area__panel li span:last-child { font-family: var(--idilio-serif); font-size: 15px; color: rgba(251,247,239,.88); }

/* Guest book */
.idilio-guestbook { padding: 64px 20px; }
@media (min-width: 768px) { .idilio-guestbook { padding-inline: 40px; } }
.idilio-guestbook__lead { max-width: 560px; margin-top: 16px; margin-bottom: 22px; font-family: var(--idilio-serif); font-size: 17px; line-height: 1.7; color: rgba(30,30,30,.86); }
.idilio-property-reviews { padding: 64px 0; background: var(--idilio-bone); text-align: center; }
.idilio-property-reviews .idilio-page-pad { max-width: 1440px; margin-inline: auto; padding-inline: clamp(20px,3.4vw,56px); }
.idilio-property-reviews h2.idilio-section-label {
	margin-bottom: 20px;
	color: var(--idilio-ink);
	font-family: var(--idilio-serif);
	font-size: clamp(22px,2.25vw,32px);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	-webkit-text-stroke: 0;
}
.idilio-property-reviews .idilio-card-rail-wrap { text-align: left; }
.idilio-property-reviews .idilio-review-rail--short { justify-content: center; }
.idilio-property-reviews .idilio-card-rail-wrap .idilio-rail-arrow { top: 50%; display: none; }
.idilio-property-reviews--many .idilio-card-rail-wrap .idilio-rail-arrow { display: grid; }
@media (max-width: 1023px) { .idilio-property-reviews .idilio-card-rail-wrap .idilio-rail-arrow { display: grid; } }
.idilio-property-reviews .idilio-card-rail-wrap .idilio-rail-arrow[hidden] { display: none; }
.idilio-property-reviews .idilio-guestbook__lead { margin: 0 auto 24px; text-align: center; }
.idilio-property-reviews .idilio-section-cta { margin-top: 26px; }

/* Lightbox */
.idilio-lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(30,30,30,.96); }
.idilio-lightbox[hidden] { display: none; }
.idilio-lightbox__scroll { height: 100%; overflow-y: auto; padding: 72px clamp(16px,4vw,64px) 64px; display: grid; gap: 10px; }
@media (min-width: 900px) { .idilio-lightbox__scroll { grid-template-columns: 1fr 1fr; } }
.idilio-lightbox figure { margin: 0; }
.idilio-lightbox img { width: 100%; height: auto; }
.idilio-lightbox__close { position: fixed; top: 18px; right: 22px; z-index: 2; width: 44px; height: 44px; color: var(--idilio-bone); background: rgba(255,255,255,.12); border-radius: 999px; font-size: 26px; line-height: 1; cursor: pointer; }

/* Mobile booking bar */
.idilio-mobile-book { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: var(--idilio-paper); border-top: 1px solid rgba(30,30,30,.14); }
.idilio-mobile-book span { font-family: var(--idilio-serif); font-size: 17px; color: var(--idilio-charcoal); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (min-width: 1024px) { .idilio-mobile-book { display: none; } }

@media (max-width: 767px) {
	.idilio-mosaic__grid { display: flex; height: auto; gap: 4px; overflow-x: auto; overflow-y: clip; overflow-clip-margin: 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.idilio-mosaic__grid::-webkit-scrollbar { display: none; }
	.idilio-mosaic__cell { flex: 0 0 88vw; aspect-ratio: 4/5; scroll-snap-align: start; }
	.idilio-mosaic__cell--lead { grid-row: auto; }
	.idilio-photos-pill { right: auto; left: 50%; transform: translateX(-50%); bottom: 16px; }
	.idilio-overview { padding-top: 28px; }
	.idilio-two-ways { margin-inline: -20px; }
}

/* Live quote in the booking rail (inc/pricing.php, quote.js). Airbnb's
   breakdown order, in the rail's own quiet type. */
.idilio-quote { display: grid; gap: 8px; padding: 14px 4px 4px; border-top: 1px solid rgba(30,30,30,.1); font-family: var(--idilio-sans); font-size: 14px; color: var(--idilio-charcoal); }
.idilio-quote[hidden] { display: none; }
.idilio-quote__row { display: flex; justify-content: space-between; gap: 12px; }
.idilio-quote__row span:first-child { color: rgba(30,30,30,.72); }
.idilio-quote__row--discount span:last-child { color: var(--idilio-sage); }
.idilio-quote__row--total { margin-top: 4px; padding-top: 10px; border-top: 1px solid rgba(30,30,30,.1); font-weight: 700; }
.idilio-quote__row--total span:first-child { color: var(--idilio-charcoal); }
.idilio-quote__small, .idilio-quote__msg { font-size: 12px; line-height: 1.5; color: rgba(30,30,30,.58); }
.idilio-quote__msg { font-size: 13px; color: var(--idilio-charcoal); }
/* Occupied nights on the property calendar (Casita strikes them through). */
.idilio-cal__day.is-blocked { color: rgba(30,30,30,.28); text-decoration: line-through; cursor: not-allowed; }


/* ─── Homepage sections ported from the prototype, 9 October 2026 (0.14.0) ──
   Featured Collections, the homeowners invitation and Instagram. The whole home
   stays cream. Next to a full-bleed photo or the footer, the neighbouring
   section carries the full 88px gap on its own (DESIGN_SYSTEM.md). */
/* Order since 10 October (Javier): Collections, homeowners, Reviews,
   Instagram. Collections and Reviews carry the 88px next to the photo. */
.idilio-collections { padding-bottom: calc(var(--idilio-section-pad) * 2); }
.idilio-reviews { padding-top: calc(var(--idilio-section-pad) * 2); }

/* Homepage collections: one edge-to-edge row after Belmond's "Explore our
   world" (Javier, 10 October). The rail ignores the page margin, keeps a
   slim gutter on the first card and lets the next card peek out. 4:5 photos,
   name below in sans, left aligned. */
.idilio-collection-row { --idilio-col-gutter: 16px; }
.idilio-collection-rail { display: flex; gap: 12px; padding-inline: var(--idilio-col-gutter); scroll-padding-inline: var(--idilio-col-gutter); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; }
.idilio-collection-rail::-webkit-scrollbar { display: none; }
.idilio-collection-rail .idilio-collection-card { display: block; flex: 0 0 69vw; scroll-snap-align: start; }
/* 10 October: narrowed to 20.5vw, shortened to Belmond's 4:5, then taller three times (5, 5 and 10 %) at Javier's request. */
.idilio-collection-rail .idilio-collection-card__media { aspect-ratio: 4/6.06; }
.idilio-collection-card__media { position: relative; display: block; aspect-ratio: 4/5; overflow: hidden; border-radius: 16px; background: #e8e3dc; }
.idilio-collection-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease-out; }
.idilio-collection-card:hover .idilio-collection-card__media img { transform: scale(1.025); }
.idilio-collection-card h3 { padding-top: 16px; color: var(--idilio-charcoal); font-size: 17px; font-weight: 400; line-height: 1.25; -webkit-text-stroke: .35px currentColor; }
.idilio-collections .idilio-section-cta { margin-top: 28px; }
@media (min-width: 640px) { .idilio-collection-rail .idilio-collection-card { flex-basis: 39vw; } }
@media (min-width: 1024px) {
	.idilio-collection-row { --idilio-col-gutter: 20px; }
	.idilio-collection-rail .idilio-collection-card { flex-basis: 20.5vw; }
}
/* Arrows placed exactly like Explore Our Homes (Javier, 12 October): same
   height on the photo and the same inset from the page margin, although this
   rail runs edge to edge. */
.idilio-collection-row .idilio-rail-arrow { top: calc(50% - 39px); }
.idilio-collection-row .idilio-rail-arrow--prev { left: calc(var(--idilio-col-pad) / 2 + 14px); }
.idilio-collection-row .idilio-rail-arrow--next { right: calc(var(--idilio-col-pad) / 2 + 14px); }
/* Both homepage rails: arrows halfway between the page margin and the screen
   edge (Javier, 12 October). The house rail sits inside the margin, so it
   pulls its arrows half a margin outwards. */
.idilio-featured .idilio-rail-arrow--prev { left: calc(14px - var(--fh-pad) / 2); }
.idilio-featured .idilio-rail-arrow--next { right: calc(14px - var(--fh-pad) / 2); }
/* Same card size as Explore Our Homes at every width (Javier, 12 October):
   same 2:3 photo and the same width, computed from the homepage page margin.
   The rail is edge to edge, so its inner box is the screen minus the slim
   gutters; adding them back gives the full width the house rail measures from. */
.idilio-collection-row { --idilio-col-pad: clamp(16px,1.6vw,32px); }
.idilio-collection-rail .idilio-collection-card__media { aspect-ratio: 2/3; }
.idilio-collection-rail .idilio-collection-card { min-width: 260px; }
/* House cards carry three lines (name, place, price); collection cards one.
   The title box reserves the same height so both sections measure the same. */
.idilio-collection-rail .idilio-collection-card h3 { min-height: 82px; }
.idilio-collection-rail .idilio-collection-card { flex-basis: calc((100% + 2 * var(--idilio-col-gutter) - 2 * var(--idilio-col-pad)) * .86); }
@media (min-width: 601px) { .idilio-collection-rail .idilio-collection-card { flex-basis: calc((100% + 2 * var(--idilio-col-gutter) - 2 * var(--idilio-col-pad) - 4px) / 2); } }
@media (min-width: 901px) { .idilio-collection-rail .idilio-collection-card { flex-basis: calc((100% + 2 * var(--idilio-col-gutter) - 2 * var(--idilio-col-pad) - 12px) / 4); } }
@media (min-width: 1024px) { .idilio-collection-row { --idilio-col-pad: clamp(24px,3.4vw,56px); } }
/* Belmond's "Explore Our World" title in our serif, replacing the small
   label (Javier, 10 October), centred at his request; sentence
   weight, roughly their size relative to the screen. */
.idilio-collections__title, .idilio-section-title { margin: 0 0 clamp(20px, 2.4vw, 36px); padding-inline: 16px; color: var(--idilio-charcoal); font-family: var(--idilio-serif); font-size: clamp(24px,3.3vw,43px); font-weight: 400; line-height: 1.1; letter-spacing: -.005em; text-align: center; } /* Hero line minus 10%, then 15% smaller again (Javier, 10 October). */
@media (min-width: 1024px) { .idilio-collections__title { padding-inline: 20px; } }
/* Same centred serif title on Explore Our Homes and Loved By Guests (Javier, 10 October). */
/* Names under the homepage photos, a step smaller like Belmond's (10 October). The index keeps 19px. */
.idilio-collection-rail .idilio-collection-card h3 { padding-top: 14px; }
.idilio-collection-rail .idilio-collection-card h3 { text-align: left; } /* left like the house cards (Javier, 12 October) */

.idilio-owners { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(330px, 42vw, 700px); /* same height as the photo band after the intro (Javier, 12 October); was 76svh */ overflow: hidden; background: var(--idilio-bone); }
.idilio-owners__photo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 52% center; }
/* Same still-photo scroll as the band after the intro (Javier, 10 October):
   on screens with a mouse the photo becomes a fixed background. Touch
   screens keep the <img>, since iOS ignores fixed backgrounds. */
@media (hover: hover) {
	.idilio-owners { background-position: center; background-size: cover; background-attachment: fixed; }
	.idilio-owners__photo { display: none; }
}
@media (min-width: 768px) { .idilio-owners__photo { object-position: center; } }
.idilio-owners__inner { width: 100%; padding: 56px 16px; } /* 56px on phones so the block matches the 330px photo band; 80px from tablet up */
@media (min-width: 768px) { .idilio-owners__inner { padding-block: 80px; } }
@media (min-width: 768px) { .idilio-owners__inner { padding-inline: 24px; } }
@media (min-width: 1024px) { .idilio-owners__inner { padding-inline: clamp(24px, 3.4vw, 56px); } }
.idilio-owners__copy { max-width: 640px; margin-inline: auto; text-align: center; } /* centred like every other homepage title (Javier, 11 October) */
.idilio-owners .idilio-section-label { margin-bottom: 24px; color: var(--idilio-bone); text-align: left; }
.idilio-owners h2 { color: var(--idilio-bone); text-shadow: 0 1px 24px rgba(0,0,0,.4); font-family: var(--idilio-serif); font-size: clamp(32px,3.4vw,53px); /* 15% smaller, 10 October */ font-weight: 400; line-height: 1.08; text-wrap: balance; }
.idilio-owners p { max-width: 600px; margin: 18px auto 0; text-shadow: 0 1px 18px rgba(0,0,0,.45); color: var(--idilio-bone); font-family: var(--idilio-sans); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.45; }
.idilio-owners .idilio-btn { margin-top: 30px; }

.idilio-instagram { padding-bottom: calc(var(--idilio-section-pad) * 2); }
.idilio-instagram__rail { display: flex; gap: 12px; max-width: 1532px; margin: 0 auto; overflow-x: auto; overflow-y: clip; overflow-clip-margin: 8px; scrollbar-width: none; }
.idilio-instagram__rail::-webkit-scrollbar { display: none; }
.idilio-instagram__slot { flex: 0 0 41vw; aspect-ratio: 9/16; border: 1px solid rgba(44,15,5,.18); border-radius: 8px; background: var(--idilio-paper); }
@media (min-width: 640px) { .idilio-instagram__slot { flex-basis: 27.5vw; } }
@media (min-width: 768px) { .idilio-instagram__rail { gap: 20px; } }
@media (min-width: 1024px) { .idilio-instagram__slot { flex-basis: 21vw; } }
@media (min-width: 1280px) { .idilio-instagram__rail { display: grid; grid-template-columns: repeat(6,1fr); overflow: visible; } }

/* Collections index keeps its simple grid and descriptive lines. */
/* Collections index (12 October): video hero kept; three per row at the size
   of the homepage collection cards (332 x 499 px at 1440, 2:3, 12px gap). */
.idilio-collections-index { padding: calc(var(--idilio-section-pad) * 1.5) 16px calc(var(--idilio-section-pad) * 2); }
.idilio-collections-index .idilio-collections-grid { grid-template-columns: minmax(0, 1fr); justify-content: center; gap: clamp(28px,3vw,40px) 12px; }
.idilio-collections-index .idilio-collection-card__media { aspect-ratio: 2/3; border-radius: 16px; }
.idilio-collections-index .idilio-collection-card h3 { font-size: 17px; }
@media (min-width: 640px) { .idilio-collections-index .idilio-collections-grid { grid-template-columns: repeat(2, minmax(0, 340px)); } }
@media (min-width: 1024px) { .idilio-collections-index .idilio-collections-grid { grid-template-columns: repeat(3, 23.1vw); } }
.idilio-collection-card__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 14px; }
.idilio-collection-card__meta h3 { padding-top: 0; }
.idilio-collection-card__count { flex-shrink: 0; color: rgba(30,30,30,.6); font-size: 13.5px; }

/* A collection page (12 October): Our Homes without the hero, Casita's way. */
.idilio-collection-page { padding-top: 102px; background: var(--idilio-bone); }
.idilio-collection-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 8px clamp(16px,1.6vw,32px) 0; }
.idilio-collection-head h1 { color: var(--idilio-charcoal); font-family: var(--idilio-serif); font-size: clamp(30px,3vw,43px); font-weight: 400; line-height: 1.1; }
.idilio-collection-head__count { flex-shrink: 0; color: rgba(30,30,30,.6); font-size: 14px; }
@media (max-width: 760px) { .idilio-collection-page { padding-top: 76px; } }
.idilio-collections-index__intro { max-width: 46ch; margin: 0 auto clamp(32px,3.4vw,48px); color: var(--idilio-ink); font-family: var(--idilio-serif); font-size: 20px; line-height: 1.5; text-align: center; text-wrap: balance; }
.idilio-collections-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(28px,3vw,44px) 10px; }
@media (min-width: 1024px) { .idilio-collections-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
.idilio-collection-card--overlay { position: relative; min-width: 0; }
.idilio-collection-card--overlay .idilio-collection-card__media { border-radius: 20px; }
.idilio-collection-card--overlay .idilio-collection-card__media::after { content: ''; position: absolute; inset: 44% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.44)); pointer-events: none; }
.idilio-collection-card--overlay h3 { position: absolute; right: clamp(14px,1.35vw,22px); bottom: clamp(14px,1.35vw,22px); left: clamp(14px,1.35vw,22px); z-index: 1; padding: 0; color: #fff; font-size: 17px; font-weight: 400; line-height: 1.2; text-align: left; text-wrap: balance; text-shadow: 0 1px 8px rgba(0,0,0,.28); }
@media (max-width: 559px) { .idilio-collection-card--overlay h3 { right: 12px; bottom: 12px; left: 12px; } }
.idilio-collection-card--overlay:focus-visible { outline: 2px solid var(--idilio-charcoal); outline-offset: 4px; border-radius: 20px; }
.idilio-collection-card p { margin-top: 6px; color: rgba(30,30,30,.7); font-family: var(--idilio-serif); font-size: 16px; line-height: 1.45; text-wrap: pretty; }
.idilio-collections-index .idilio-section-cta { margin-top: clamp(36px,3.6vw,52px); }
@media (max-width: 600px) { .idilio-collections-grid { grid-template-columns: 1fr; } }

/* Brandon for anything set in capitals: menu, section labels, eyebrows,
   footer headings, fact labels (Javier, 10 October). The running sans is
   whatever --idilio-sans is on trial. */
.idilio-primary-nav a,
.idilio-section-label,
.idilio-property .idilio-section-label,
.idilio-footer__links h3,
.idilio-results__eyebrow,
.idilio-homes-map__close,
.idilio-eyebrow,
.idilio-facts span,
.idilio-story__toggle,
.idilio-detail-list li span:first-child,
.idilio-btn--uh { font-family: var(--idilio-caps); }

/* ------------------------------------------------------------------------- */
/* Homeowners (page-homeowners.php)                                           */
/* Ported as it is from the prototype on 11 October: OwnersHero, OwnersTabs   */
/* and components/owners/HomeownersContent.tsx. Same measures; type mapped to */
/* the theme system (serif titles, sans text, Brandon only in capitals).      */
/* ------------------------------------------------------------------------- */

/* Homeowners hero: same height as every interior page (13 October). */
/* Its title, line and two buttons are the tallest hero copy: on short laptop
   screens the title follows the screen height so everything stays inside. */
@media (max-height: 860px) and (min-width: 601px) {
	.idilio-owners-hero .idilio-page-hero__content h1 { font-size: clamp(30px, 6.4vh, 64px); }
	.idilio-owners-hero__subline { margin-top: 12px; }
	.idilio-owners-hero__ctas { margin-top: 22px; }
}
@media (max-height: 740px) and (max-width: 600px) {
	.idilio-owners-hero .idilio-page-hero__content h1 { font-size: 28px; }
	.idilio-owners-hero__subline { margin-top: 10px; }
	.idilio-owners-hero__ctas { flex-wrap: nowrap; gap: 8px; margin-top: 16px; }
	.idilio-owners-hero__ctas .idilio-btn { padding-inline: 16px; white-space: nowrap; }
}
.idilio-owners-hero .idilio-page-hero__content h1 { max-width: 800px; margin-inline: auto; font-weight: 400; }
.idilio-owners-hero__subline { max-width: 500px; margin: 20px auto 0; color: rgba(251,247,239,.9); font-family: var(--idilio-sans); font-size: clamp(14px,1.2vw,18px); font-weight: 300; letter-spacing: .08em; text-shadow: 0 1px 20px rgba(0,0,0,.32); }
.idilio-owners-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 36px; }

/* Sticky anchors. When the header slides away the bar sits at the top; when
   the header comes back, the bar steps down beneath it. */
.idilio-owners-tabs { position: sticky; top: 0; z-index: 40; background: rgba(251,247,239,.96); border-bottom: 1px solid rgba(44,15,5,.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: top .5s cubic-bezier(.4,0,.2,1); }
body:has(.idilio-header:not(.is-tucked)) .idilio-owners-tabs { top: 102px; }
/* This page counts as a dark-hero page, so the header shrinks to 68px once
   scrolled. The bar has to follow it or it hangs 34px below (Javier, 12 October). */
body:has(.idilio-header.is-scrolled:not(.is-tucked)) .idilio-owners-tabs { top: 68px; }
.idilio-owners-tabs__inner { display: flex; align-items: center; justify-content: center; height: 56px; max-width: 980px; margin: 0 auto; padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
.idilio-owners-tabs__inner::-webkit-scrollbar { display: none; }
.idilio-owners-tabs a { display: flex; flex-shrink: 0; align-items: center; height: 100%; padding: 0 24px; color: var(--idilio-ink); font-family: var(--idilio-caps); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; -webkit-text-stroke: .5px currentColor; transition: opacity .2s ease; }
.idilio-owners-tabs a:hover { opacity: .6; }
/* The bar organises the page (Javier, 12 October): one section on screen at a
   time. Without JS every panel stays visible, as a normal long page. */
.idilio-owners-tabs a { position: relative; }
.idilio-owners-tabs a::after { position: absolute; left: 24px; right: 24px; bottom: 14px; height: 1px; background: currentColor; transform: scaleX(0); transition: transform .3s ease; content: ''; }
.idilio-owners-tabs a.is-active::after { transform: scaleX(1); }
.idilio-owners-tabs a.is-active:hover { opacity: 1; }
.idilio-owners-page.is-tabbed .idilio-owners-panel:not(.is-active) { display: none; }
.idilio-owners-panel { scroll-margin-top: 160px; }
.idilio-owners-page.is-tabbed .idilio-owners-panel.is-active { animation: idilio-panel-in .35s ease both; }
@keyframes idilio-panel-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 767px) {
	body:has(.idilio-header.is-scrolled:not(.is-tucked)) .idilio-owners-tabs { top: 64px; }
}
@media (max-width: 600px) {
	body:has(.idilio-header:not(.is-tucked)) .idilio-owners-tabs { top: 76px; }
	body:has(.idilio-header.is-scrolled:not(.is-tucked)) .idilio-owners-tabs { top: 64px; }
	.idilio-owners-tabs a { padding: 0 12px; }
	.idilio-owners-tabs a::after { left: 12px; right: 12px; }
}

.idilio-owners-page section[id] { scroll-margin-top: 124px; }
.idilio-owners-section { padding: clamp(58px,6.5vw,88px) clamp(20px,2.8vw,40px); background: var(--idilio-bone); color: var(--idilio-ink); }
.idilio-owners-section.is-paper { background: var(--idilio-paper); }
.idilio-owners-wrap { max-width: 1180px; margin: 0 auto; }
.idilio-owners-label { color: var(--idilio-sage); font-family: var(--idilio-caps); font-size: 15px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; -webkit-text-stroke: .5px currentColor; }
/* Font rule applied to this page on 12 October: serif titles, sans text, Brandon caps only for labels, tabs and small markers. */
.idilio-owners-heading { margin-bottom: 30px; color: var(--idilio-ink); font-family: var(--idilio-serif); font-size: clamp(26px,3vw,40px); font-weight: 400; line-height: 1.12; letter-spacing: -.005em; text-wrap: balance; text-align: center; text-transform: none; -webkit-text-stroke: 0; }
.idilio-owners-lede { max-width: 720px; margin: -8px auto 56px; color: rgba(44,15,5,.7); font-family: var(--idilio-sans); font-size: 17px; line-height: 1.6; text-align: center; }
.idilio-owners-lede.is-wide { max-width: 760px; margin-bottom: 50px; }
.idilio-owners-small { max-width: 700px; margin: 24px auto 0; color: rgba(44,15,5,.55); font-family: var(--idilio-sans); font-size: 13px; text-align: center; }

/* Overview */
.idilio-owners-intro { display: grid; grid-template-columns: 1fr; gap: 40px; }
.idilio-owners-intro__title { margin-top: 24px; font-family: var(--idilio-serif); font-size: clamp(38px,4.6vw,64px); font-weight: 400; line-height: 1.2; text-wrap: balance; } /* 1.04 made Cardo's ascenders and descenders collide (13 October). */
.idilio-owners-intro__body p { color: rgba(44,15,5,.78); font-family: var(--idilio-sans); font-size: 18px; line-height: 1.6; text-wrap: pretty; }
.idilio-owners-intro__body p + p { margin-top: 22px; }
@media (min-width: 1024px) {
	.idilio-owners-intro { grid-template-columns: .9fr 1.1fr; gap: 96px; }
	.idilio-owners-intro__body { padding-top: 48px; }
}

/* Two ways */
.idilio-owners-ways { display: grid; grid-template-columns: 1fr; border-block: 1px solid rgba(44,15,5,.16); }
.idilio-owners-ways article { padding-block: 40px; }
.idilio-owners-ways__num { color: var(--idilio-sage); font-family: var(--idilio-serif); font-size: 20px; }
.idilio-owners-ways h3 { margin-top: 18px; font-family: var(--idilio-serif); font-size: clamp(30px,3vw,42px); font-weight: 400; line-height: 1.1; }
.idilio-owners-ways__text { max-width: 52ch; margin-top: 20px; color: rgba(44,15,5,.78); font-family: var(--idilio-sans); font-size: 16px; line-height: 1.6; }
.idilio-owners-ways ul { margin: 28px 0 0; padding: 0; list-style: none; }
.idilio-owners-ways li { display: flex; align-items: flex-start; gap: 12px; margin-top: 11px; color: rgba(44,15,5,.74); font-family: var(--idilio-sans); font-size: 15px; }
.idilio-owners-ways li span { color: var(--idilio-sage); }
.idilio-owners-ways__note { margin-top: 28px; color: rgba(44,15,5,.6); font-family: var(--idilio-sans); font-size: 14px; }
@media (min-width: 1024px) {
	.idilio-owners-ways { grid-template-columns: 1fr 1fr; }
	.idilio-owners-ways article { padding-block: 56px; }
	.idilio-owners-ways article:first-child { padding-right: 64px; }
	.idilio-owners-ways article + article { padding-left: 64px; border-left: 1px solid rgba(44,15,5,.16); }
}

/* Record */
.idilio-owners-record { background: var(--idilio-sage); color: var(--idilio-bone); }
.idilio-owners-record__inner { max-width: 1100px; margin: 0 auto; padding: clamp(64px,7vw,96px) clamp(20px,2.8vw,40px); text-align: center; }
.idilio-owners-record h2 { font-family: var(--idilio-serif); font-size: clamp(34px,4vw,54px); font-weight: 400; line-height: 1.2; }
.idilio-owners-record__intro { max-width: 640px; margin: 18px auto 0; color: rgba(251,247,239,.82); font-family: var(--idilio-sans); font-size: 17px; line-height: 1.6; }
.idilio-owners-record__stats { display: grid; grid-template-columns: 1fr 1fr; row-gap: 40px; margin-top: 48px; }
.idilio-owners-record__value { font-family: var(--idilio-serif); font-size: clamp(32px,3.5vw,50px); line-height: 1; }
.idilio-owners-record__label { margin-top: 12px; color: rgba(251,247,239,.72); font-family: var(--idilio-caps); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.idilio-owners-record__verify { margin-top: 40px; color: rgba(251,247,239,.58); font-family: var(--idilio-sans); font-size: 12px; }
@media (min-width: 768px) { .idilio-owners-record__stats { grid-template-columns: repeat(4,1fr); column-gap: 32px; } }

/* Performance cases */
.idilio-owners-case { display: grid; grid-template-columns: 1fr; align-items: stretch; }
.idilio-owners-case + .idilio-owners-case { margin-top: 72px; }
.idilio-owners-case__media { position: relative; min-height: 360px; }
.idilio-owners-case__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.idilio-owners-case__body { display: flex; flex-direction: column; justify-content: center; padding-block: 36px; }
.idilio-owners-case__label { color: var(--idilio-sage); font-family: var(--idilio-caps); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.idilio-owners-case h3 { margin-top: 18px; font-family: var(--idilio-serif); font-size: clamp(30px,3vw,42px); font-weight: 400; line-height: 1.1; }
.idilio-owners-case__detail { margin-top: 16px; color: rgba(44,15,5,.7); font-family: var(--idilio-sans); font-size: 16px; line-height: 1.6; }
.idilio-owners-case__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(44,15,5,.14); }
.idilio-owners-case__field { color: rgba(44,15,5,.5); font-family: var(--idilio-caps); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.idilio-owners-case__value { margin-top: 8px; color: rgba(44,15,5,.72); font-family: var(--idilio-sans); font-size: 16px; line-height: 1.35; }
@media (min-width: 1024px) {
	.idilio-owners-case { grid-template-columns: 1fr 1fr; }
	.idilio-owners-case__body { padding-left: 64px; }
	.idilio-owners-case.is-flipped .idilio-owners-case__media { order: 2; }
	.idilio-owners-case.is-flipped .idilio-owners-case__body { order: 1; padding-left: 0; padding-right: 64px; }
}

/* Owner stories */
.idilio-owners-stories { display: grid; grid-template-columns: 1fr; gap: 48px; max-width: 1240px; margin: 0 auto; }
.idilio-owners-stories__media { position: relative; aspect-ratio: 3/2; overflow: hidden; }
.idilio-owners-stories__media img { width: 100%; height: 100%; object-fit: cover; }
.idilio-owners-stories__body { padding-top: 24px; }
.idilio-owners-pending { display: inline-flex; padding: 7px 12px 6px; border: 1px solid color-mix(in srgb, var(--idilio-sage) 35%, transparent); border-radius: 999px; color: var(--idilio-sage); font-family: var(--idilio-caps); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.idilio-owners-stories blockquote { margin: 20px 0 0; color: rgba(44,15,5,.72); font-family: var(--idilio-sans); font-size: 17px; line-height: 1.5; }
.idilio-owners-stories__meta { margin-top: 18px; color: rgba(44,15,5,.5); font-family: var(--idilio-sans); font-size: 12px; letter-spacing: .06em; }
@media (min-width: 768px) { .idilio-owners-stories { grid-template-columns: repeat(3,1fr); gap: 28px; } }

/* What we look after */
.idilio-owners-services { display: grid; grid-template-columns: 1fr; gap: 48px; }
.idilio-owners-services__intro { margin-top: 22px; font-family: var(--idilio-serif); font-size: clamp(30px,3.2vw,44px); line-height: 1.12; text-wrap: balance; }
.idilio-owners-services__grid { display: grid; grid-template-columns: 1fr; }
.idilio-owners-services__grid article { padding-block: 28px; border-top: 1px solid rgba(44,15,5,.16); }
.idilio-owners-services__grid h3 { font-family: var(--idilio-sans); font-size: 15px; font-weight: 500; -webkit-text-stroke: .5px currentColor; }
.idilio-owners-services__grid p { margin-top: 12px; color: rgba(44,15,5,.72); font-family: var(--idilio-sans); font-size: 16px; line-height: 1.6; }
@media (min-width: 768px) { .idilio-owners-services__grid { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
@media (min-width: 1024px) { .idilio-owners-services { grid-template-columns: .75fr 1.25fr; gap: 96px; } }

/* Process */
.idilio-owners-steps { max-width: 980px; margin: 0 auto; border-top: 1px solid rgba(44,15,5,.16); }
.idilio-owners-steps article { display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding-block: 32px; border-bottom: 1px solid rgba(44,15,5,.16); }
.idilio-owners-steps__num { color: var(--idilio-sage); font-family: var(--idilio-serif); font-size: 22px; }
.idilio-owners-steps h3 { font-family: var(--idilio-serif); font-size: clamp(24px,2.4vw,32px); font-weight: 400; line-height: 1.15; }
.idilio-owners-steps__text { grid-column-start: 2; color: rgba(44,15,5,.72); font-family: var(--idilio-sans); font-size: 16px; line-height: 1.6; }
@media (min-width: 768px) {
	.idilio-owners-steps article { grid-template-columns: 80px .55fr 1fr; gap: 40px; padding-block: 40px; }
	.idilio-owners-steps__text { grid-column-start: auto; }
}

/* FAQ */
.idilio-owners-faq { max-width: 820px; margin: 0 auto; border-top: 1px solid rgba(44,15,5,.16); }
.idilio-owners-faq details { border-bottom: 1px solid rgba(44,15,5,.16); }
.idilio-owners-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 24px; cursor: pointer; list-style: none; font-family: var(--idilio-sans); font-size: 16px; font-weight: 500; -webkit-text-stroke: .5px currentColor; }
.idilio-owners-faq summary::-webkit-details-marker { display: none; }
.idilio-owners-faq summary span { color: var(--idilio-sage); font-size: 22px; -webkit-text-stroke: 0; }
.idilio-owners-faq details p { max-width: 68ch; padding-bottom: 28px; color: rgba(44,15,5,.72); font-family: var(--idilio-sans); font-size: 16px; line-height: 1.65; }

/* Contact */
.idilio-owners-contact { background: var(--idilio-sage); color: var(--idilio-bone); }
.idilio-owners-contact__inner { max-width: 860px; margin: 0 auto; padding: clamp(80px,10vw,132px) clamp(20px,2.8vw,40px); text-align: center; }
.idilio-owners-contact__inner > img { margin: 0 auto; }
.idilio-owners-contact__label { margin-top: 30px; color: rgba(251,247,239,.72); font-family: var(--idilio-caps); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.idilio-owners-contact h2 { margin-top: 20px; font-family: var(--idilio-serif); font-size: clamp(40px,5vw,64px); font-weight: 400; line-height: 1.2; }
.idilio-owners-contact__text { max-width: 650px; margin: 22px auto 0; color: rgba(251,247,239,.82); font-family: var(--idilio-sans); font-size: 17px; line-height: 1.65; }
.idilio-owners-contact__ctas { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; margin-top: 40px; }
@media (min-width: 640px) { .idilio-owners-contact__ctas { flex-direction: row; flex-wrap: wrap; } }
.idilio-btn--bone { color: var(--idilio-ink); background: var(--idilio-bone); border-color: var(--idilio-bone); }
.idilio-btn--bone:hover { opacity: .88; }

/* Explore Our Homes runs past the side margins (Javier, 11 October). The
   page margin is kept only at an end the rail has reached: at rest the first
   card sits on the left margin and the next one runs off the right edge;
   scrolled to the end, the last card sits on the right margin and the earlier
   ones run off the left. In between, cards run to both edges. Card sizes are unchanged: the rail grows by the
   page margin it now bleeds into, so each basis subtracts that growth and the
   cards measure exactly what they did inside the margin. */
.idilio-featured { --fh-pad: clamp(16px,1.6vw,32px); --fh-gutter: var(--fh-pad); }
@media (min-width: 1024px) { .idilio-featured { --fh-pad: clamp(24px,3.4vw,56px); } }
.idilio-featured .idilio-card-rail {
	--fh-growth: calc(2 * var(--fh-pad) - 2 * var(--fh-gutter));
	margin-inline: calc(-1 * var(--fh-pad));
	padding-inline: var(--fh-gutter);
	scroll-padding-inline: var(--fh-gutter);
}
.idilio-featured .idilio-card-rail .idilio-home-card { flex-basis: calc((100% - var(--fh-growth) - 12px)/4); }
@media (max-width: 900px) { .idilio-featured .idilio-card-rail .idilio-home-card { flex-basis: calc((100% - var(--fh-growth) - 4px)/2); } }
@media (max-width: 600px) { .idilio-featured .idilio-card-rail .idilio-home-card { flex-basis: calc((100% - var(--fh-growth)) * .86); } }

/* Collections, same rule as Explore Our Homes (Javier, 11 October): the row
   keeps the page margin only at the end it has reached and runs to the screen
   edge on any side that still scrolls. Cards are sized in vw, so they keep
   their exact size; only the end gutter changes. */
.idilio-collection-row { --idilio-col-gutter: clamp(16px,1.6vw,32px); }
@media (min-width: 1024px) { .idilio-collection-row { --idilio-col-gutter: clamp(24px,3.4vw,56px); } }

/* Property editorial layer: the homepage's Cardo / Hanken / Brandon language.
   Piloted on La Almunia on 11 October and extended to every house on
   12 October once Javier approved it. */
.idilio-property--editorial { color: var(--idilio-ink); }
.idilio-property--editorial .idilio-photos-pill {
	color: var(--idilio-bone);
	background: var(--idilio-ink);
	box-shadow: none;
	font-family: var(--idilio-sans);
	font-size: 14px;
	letter-spacing: .01em;
	transition: background-color .2s ease;
}
.idilio-property--editorial .idilio-photos-pill:hover { background: var(--idilio-sage); }
.idilio-property--editorial .idilio-property__main { padding-inline: clamp(20px,3.2vw,44px); }
.idilio-property--editorial .idilio-overview { padding-top: 40px; }
.idilio-property--editorial .idilio-overview__head h1 {
	margin-top: 18px;
	color: var(--idilio-ink);
	font-size: clamp(38px,3.8vw,52px);
	line-height: 1.05;
}
.idilio-property--editorial .idilio-facts { margin-top: 30px; }
.idilio-property--editorial .idilio-story { max-width: 620px; margin-top: 44px; }
.idilio-property--editorial .idilio-story__text p,
.idilio-property--editorial .idilio-two-ways > p:nth-of-type(2),
.idilio-property--editorial .idilio-guestbook__lead,
.idilio-property--editorial .idilio-area-story p {
	color: rgba(44,15,5,.78);
	font-family: var(--idilio-sans);
	font-size: 15px;
	line-height: 1.65;
}
.idilio-property--editorial .idilio-story__toggle {
	font-family: var(--idilio-sans);
	font-size: 14px;
	letter-spacing: .01em;
	text-transform: none;
}
.idilio-property--editorial .idilio-overview__label,
.idilio-property--editorial .idilio-featured h2.idilio-section-label,
.idilio-property--editorial .idilio-highlights > .idilio-section-label,
.idilio-property--editorial .idilio-two-ways > .idilio-section-label,
.idilio-property--editorial .idilio-area__panel > .idilio-section-label {
	color: var(--idilio-ink);
	font-family: var(--idilio-serif);
	font-size: clamp(22px,2.25vw,32px);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	-webkit-text-stroke: 0;
}
.idilio-property--editorial .idilio-highlights { margin-top: 64px; }
.idilio-property--editorial .idilio-highlights > .idilio-section-label { margin-bottom: 14px; }
.idilio-property--editorial .idilio-highlights__list {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	column-gap: 40px;
	list-style: none;
	padding: 0;
}
.idilio-property--editorial .idilio-highlights__list li {
	position: relative;
	padding: 8px 0 8px 19px;
	color: rgba(44,15,5,.78);
	font-family: var(--idilio-sans);
	font-size: 15px;
	line-height: 1.5;
}
.idilio-property--editorial .idilio-highlights__list li::before {
	position: absolute;
	left: 0;
	top: 17px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--idilio-ink);
	content: '';
}
.idilio-property--editorial .idilio-overview__label { margin-block: 64px 22px; }
.idilio-property--editorial .idilio-folds { margin-top: 64px; }
/* Label margin removed so the title sits centred between the rules; padding keeps the row height. */
.idilio-property--editorial .idilio-fold__head { padding-block: 43px; }
.idilio-property--editorial .idilio-fold__head .idilio-section-label {
	margin: 0;
	color: var(--idilio-ink);
	font-family: var(--idilio-caps);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: .1em;
	text-transform: uppercase;
	-webkit-text-stroke: .5px currentColor;
}
.idilio-property--editorial .idilio-amenities li {
	position: relative;
	padding: 8px 0 8px 19px;
	border: 0;
	color: rgba(44,15,5,.78);
	font-family: var(--idilio-sans);
	font-size: 15px;
	line-height: 1.4;
}
.idilio-property--editorial .idilio-amenities li::before {
	position: absolute;
	left: 0;
	top: 19px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--idilio-ink);
	content: '';
}
.idilio-property--editorial .idilio-detail-list li span:last-child,
.idilio-property--editorial .idilio-area__panel li span:last-child {
	font-family: var(--idilio-sans);
	font-size: 15px;
}
.idilio-property--editorial .idilio-area__panel > .idilio-section-label { color: var(--idilio-bone); }
.idilio-property--editorial .idilio-area-story { max-width: 660px; }
.idilio-property--editorial .idilio-area-story p + p { margin-top: 18px; }
.idilio-property--editorial .idilio-area-activities { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; padding: 0; list-style: none; }
.idilio-property--editorial .idilio-area-activities li {
	padding: 7px 14px;
	border: 1px solid rgba(44,15,5,.14);
	border-radius: 999px;
	font-family: var(--idilio-sans);
	font-size: 12px;
}
.idilio-property--editorial .idilio-area-story__photo { width: 100%; aspect-ratio: 21/9; margin-top: 32px; object-fit: cover; }
.idilio-property--editorial .idilio-two-ways { margin-top: 64px; padding-block: 40px; }
/* Full bleed across the main column: cancel its side padding. */
.idilio-property--editorial .idilio-two-ways { margin-inline: calc(-1 * clamp(20px,3.2vw,44px)); padding-inline: clamp(20px,3.2vw,44px); }
.idilio-property--editorial .idilio-two-ways > .idilio-section-label { text-align: center; }
.idilio-property--editorial .idilio-two-ways > p:nth-of-type(2) { max-width: 460px; margin-top: 12px; }
.idilio-property--editorial .idilio-two-ways__actions { margin-top: 22px; }
.idilio-property--editorial .idilio-btn--solid:hover {
	opacity: 1;
	background: var(--idilio-sage);
	border-color: var(--idilio-sage);
}
.idilio-property--editorial .idilio-book { padding: clamp(20px,2.2vw,30px); }
.idilio-property--editorial .idilio-guestbook { padding-block: 64px; text-align: center; }
.idilio-property--editorial .idilio-guestbook__lead { max-width: 560px; margin: 0 auto 24px; }
.idilio-property--editorial .idilio-featured { padding-block: 64px; }
.idilio-property--editorial .idilio-featured h2.idilio-section-label { margin-bottom: 22px; text-align: center; }
.idilio-property--editorial .idilio-mobile-book span { font-family: var(--idilio-sans); }
@media (max-width: 767px) {
	.idilio-property--editorial .idilio-overview { padding-top: 28px; }
	.idilio-property--editorial .idilio-highlights__list { grid-template-columns: 1fr; }
	.idilio-property--editorial .idilio-overview__label { margin-block: 64px 22px; }
	.idilio-property--editorial .idilio-folds,
	.idilio-property--editorial .idilio-two-ways { margin-top: 64px; }
	.idilio-property--editorial .idilio-guestbook { padding-block: 64px; }
}

/* ------------------------------------------------------------------------- */
/* Our Story (page-our-story.php), 12 October 2026                            */
/* Built only from the site's own measures: the interior video hero, the      */
/* homepage intro widths (960 serif, 576 sans), the fixed photo band and the  */
/* section button. Cream throughout, paper only behind the founders.          */
/* ------------------------------------------------------------------------- */
.idilio-story-hero .idilio-page-hero__content h1 { max-width: none; }
.idilio-story-hero__subline { margin-top: 14px; color: rgba(251,247,239,.92); font-family: var(--idilio-caps); font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 1px 20px rgba(0,0,0,.32); }

/* Standfirst: the opening paragraph in serif, centred, on the intro's 960px. */
.idilio-story-lead { padding-block: calc(var(--idilio-section-pad) * 2.4) calc(var(--idilio-section-pad) * 2); }
.idilio-story-lead p { max-width: 900px; margin: 0 auto; padding-inline: 24px; color: var(--idilio-ink); font-family: var(--idilio-serif); font-size: clamp(21px, 1.9vw, 27px); line-height: 1.5; text-align: center; text-wrap: pretty; }

/* Founders: portrait left, text right, on paper. */
.idilio-story-people { padding-block: calc(var(--idilio-section-pad) * 2); background: var(--idilio-paper); }
.idilio-story-people__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(40px, 6vw, 112px); max-width: 1200px; margin: 0 auto; padding-inline: clamp(20px, 3.2vw, 44px); }
.idilio-story-people__photo { margin: 0; }
.idilio-story-people__photo img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 30%; }
.idilio-story-people__copy { max-width: 520px; }
.idilio-story-people__copy .idilio-section-label { margin-bottom: 24px; font-family: var(--idilio-caps); font-size: 13px; letter-spacing: .1em; text-align: left; }
.idilio-story-people__copy p:not(.idilio-section-label) { color: #000; font-family: var(--idilio-sans); font-size: clamp(16px, 1.15vw, 17px); line-height: 1.6; text-wrap: pretty; }
.idilio-story-people__copy p + p { margin-top: 18px; }

/* Spain: the paragraph on the intro's 576px, then two homes side by side. */
.idilio-story-spain { padding-block: calc(var(--idilio-section-pad) * 2); }
.idilio-story-spain__text { max-width: 640px; margin: 0 auto; padding-inline: 24px; color: #000; font-family: var(--idilio-sans); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; text-align: center; text-wrap: pretty; }
.idilio-story-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 1080px; margin: clamp(48px, 5vw, 72px) auto 0; padding-inline: clamp(20px, 3.2vw, 44px); }
.idilio-story-pair figure { margin: 0; }
.idilio-story-pair img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
/* Casa Palacios: keep the two armchairs and the green beams, lose the television on the left. */
.idilio-story-pair figure:nth-child(2) img { object-position: 70% center; }
.idilio-story-pair figcaption { margin-top: 12px; color: rgba(44,15,5,.7); font-family: var(--idilio-sans); font-size: 13.5px; line-height: 1.45; }

.idilio-story-close { padding-block: var(--idilio-section-pad) calc(var(--idilio-section-pad) * 2.4); text-align: center; }
.idilio-story-close p { max-width: 576px; margin: 0 auto 28px; padding-inline: 24px; color: var(--idilio-ink); font-family: var(--idilio-serif); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; }

@media (max-width: 767px) {
	.idilio-story-people__inner { grid-template-columns: 1fr; gap: 32px; }
	.idilio-story-people__copy { max-width: none; }
	.idilio-story-pair { grid-template-columns: 1fr; gap: 28px; }
}

/* ------------------------------------------------------------------------- */
/* Request to book dialog (single-accommodation.php, request.js), 13 October  */
/* After Casita's "Inquiry details": details left, the stay and total right.  */
/* Fields follow the search box (white, soft outline); one pill button.       */
/* ------------------------------------------------------------------------- */
html.idilio-request-open { overflow: hidden; }
.idilio-request {
	width: min(900px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	margin: auto;
	padding: 0;
	overflow: auto;
	color: var(--idilio-charcoal);
	background: var(--idilio-bone);
	border: 0;
	border-radius: 16px;
	box-shadow: 0 24px 80px -24px rgba(0,0,0,.45);
}
.idilio-request::backdrop { background: rgba(30,18,10,.45); }
.idilio-request__close { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; color: var(--idilio-charcoal); background: #fff; border: .5px solid rgba(44,15,5,.35); border-radius: 50%; cursor: pointer; }
.idilio-request__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.idilio-request__grid { display: grid; grid-template-columns: 1fr; }
.idilio-request__form { display: grid; gap: 14px; padding: 36px 28px 28px; }
.idilio-request__form h2,
.idilio-request__done h2 { font-family: var(--idilio-serif); font-size: clamp(28px, 2.6vw, 36px); font-weight: 400; line-height: 1.2; color: var(--idilio-ink); }
.idilio-request__intro { margin-bottom: 6px; font-size: 15px; line-height: 1.5; color: rgba(30,30,30,.72); }
.idilio-request__field { display: grid; gap: 6px; }
.idilio-request__field span { font-size: 13px; color: rgba(30,30,30,.7); }
.idilio-request__field input,
.idilio-request__field textarea { width: 100%; padding: 12px 16px; color: var(--idilio-charcoal); background: #fff; border: 1px solid rgba(30,30,30,.18); border-radius: 12px; font-family: var(--idilio-sans); font-size: 15px; line-height: 1.4; }
.idilio-request__field input { height: 48px; }
.idilio-request__field textarea { resize: vertical; min-height: 104px; }
.idilio-request__field input:focus,
.idilio-request__field textarea:focus { outline: none; border-color: var(--idilio-ink); }
.idilio-request__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.idilio-request__error { font-size: 13px; line-height: 1.45; color: #9b2c1f; }
.idilio-request__submit { width: 100%; margin-top: 4px; }
.idilio-request__submit:disabled { opacity: .6; cursor: progress; }
.idilio-request__small { font-size: 12px; line-height: 1.5; color: rgba(30,30,30,.6); }
.idilio-request__small a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.idilio-request__summary { order: -1; padding: 28px 28px 8px; }
.idilio-request__house { padding-right: 48px; font-family: var(--idilio-serif); font-size: 24px; line-height: 1.2; color: var(--idilio-ink); }
.idilio-request__summary dl { display: grid; gap: 10px; margin: 16px 0; }
.idilio-request__summary dl div { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.idilio-request__summary dt { color: rgba(30,30,30,.6); }
.idilio-request__summary dd { margin: 0; text-align: right; }
.idilio-request__quote { padding-top: 14px; border-top: 1px solid rgba(44,15,5,.12); }
.idilio-request__badge { display: inline-block; margin-top: 16px; padding: 6px 12px; font-size: 12px; color: var(--idilio-ink); background: #fff; border: .5px solid rgba(44,15,5,.35); border-radius: 999px; }
.idilio-request__done { display: grid; justify-items: start; gap: 16px; padding: 48px 32px; }
.idilio-request__done[hidden], .idilio-request__grid[hidden] { display: none; }
.idilio-request__done p { max-width: 46ch; font-size: 15px; line-height: 1.55; }
@media (min-width: 760px) {
	.idilio-request__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); }
	.idilio-request__form { padding: 44px 40px 36px; }
	.idilio-request__summary { order: 0; margin: 16px 16px 16px 0; padding: 36px 28px; background: #fff; border-radius: 12px; }
	.idilio-request__done { padding: 64px 48px; }
}