/*
 * FlashProp public CSS — single-eproposal template.
 *
 * Aligned to the Hotel O'Clock brand observed on hoteloclock.com:
 *   • Display & body face: Montserrat (Google Fonts), Helvetica fallback
 *   • Primary ink: #122235 (HOC navy)
 *   • Surface: #ffffff and #f6f6f3 (warm off-white)
 *   • Headings: light weight 400, uppercase, generous letter-spacing
 *   • Buttons: 2px outline in HOC navy, uppercase label, no rounded corners
 *
 * All selectors are prefixed `.fp-` to avoid collisions with the
 * active theme. Local layout fallbacks (Helvetica/Arial) keep the page
 * readable if the host blocks Google Fonts.
 */

/* ---------- design tokens ------------------------------------------- */

.fp-eproposal {
	--fp-ink:       #122235;
	--fp-ink-soft:  #41526a;
	--fp-paper:     #ffffff;
	--fp-cream:     #f4f4f4;     /* matches live hoteloclock.com section tint */
	--fp-header-grey: #e6e6e3;   /* comparison table header band (top row + label column + grand total) — a touch darker than --fp-cream */
	--fp-line:      #e3e3df;
	--fp-mute:      #6a6a64;     /* bumped from #8a8a82 to clear WCAG AA contrast on white */

	--fp-sans: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;

	color: var(--fp-ink);
	font-family: var(--fp-sans);
	font-size: 15px;
	line-height: 1.65;
	background: var(--fp-paper);
}

.fp-eproposal,
.fp-eproposal * {
	box-sizing: border-box;
}

.fp-eproposal p { margin: 0 0 1em 0; }
.fp-eproposal strong { font-weight: 600; }
.fp-eproposal a { color: inherit; }

/* Accessible keyboard focus across all interactive elements. */
.fp-eproposal a:focus-visible,
.fp-eproposal button:focus-visible,
.fp-eproposal .fp-button:focus-visible,
.fp-eproposal .fp-property-card__link:focus-visible {
	outline: 2px solid var(--fp-ink);
	outline-offset: 3px;
}

/* Smooth scroll for in-page anchors (hotel name in comparison thead →
 * jumps to the hotel detail section). Scoped via `:has()` so it only
 * applies on pages that actually render an eProposal — avoids changing
 * the host theme's scroll behavior on every other page. */
html:has(.fp-eproposal) { scroll-behavior: smooth; }

/* All display headings inherit the HOC look: Montserrat 400, uppercase,
 * tracked. Sizes vary per section. */
.fp-cover__client-name,
.fp-cover__event,
.fp-hero__title,
.fp-selected-properties__title,
.fp-property-card__name,
.fp-hotel-detail__name,
.fp-signature__name,
.fp-contact__brand {
	font-family: var(--fp-sans);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* ---------- 1. cover ------------------------------------------------- */
/*
 * Live HOC cover: white background, navy ink, HOC logo + monogram
 * centered, one-line tagline below. That's it — no client name, no
 * event name. Minimal editorial opening. The client HQ photo and
 * event details live in the hero block below.
 */
.fp-cover {
	background: var(--fp-paper);
	color: var(--fp-ink);
	padding: 3.5rem 2rem 3rem;
	text-align: center;
}

.fp-cover__inner {
	max-width: 640px;
	margin: 0 auto;
}

.fp-cover__logo {
	width: 240px;
	height: auto;
	margin: 0 auto 1.5rem;
	display: block;
	color: var(--fp-ink);
}

/* Tagline matches the live hoteloclock.com: ~23 px, light weight 300,
 * full opacity, generous line-height for the editorial feel. */
.fp-cover__tagline {
	font-size: 1.45rem;
	line-height: 1.75;
	color: var(--fp-ink);
	font-weight: 300;
	margin: 0;
	letter-spacing: 0.01em;
	/* Keep the HOC slogan on a single line in every language. The FR/DE/ES
	 * strings are longer than EN and otherwise wrap inside the 640px cover
	 * column. The cover is wide enough on desktop/tablet to absorb the
	 * longer lines (centered, overflowing the column harmlessly). The mobile
	 * rule re-enables wrapping on narrow phones, where one line would force
	 * an unreadably small font. */
	white-space: nowrap;
}

/* ---------- 2. hero -------------------------------------------------- */
/*
 * Two-column hero matching the live HOC layout: client HQ photo on
 * the left (sourced from the M13 `client_hq` slot attachment), event
 * brief on the right with a bold mixed-case title and a definition
 * list of RFP details. Light cream background keeps the right column
 * readable.
 */
.fp-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 600px;
	background: var(--fp-cream);
}

.fp-hero__image {
	background-size: cover;
	background-position: center;
	background-color: #d8d8d4;
	min-height: 400px;
	position: relative;
}

.fp-hero__image-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	text-align: center;
	color: var(--fp-mute);
	font-size: 0.85rem;
}

.fp-hero__details {
	padding: 4.5rem 3.5rem;
}

/* Bold uppercase navy title — matches the live HOC h1 exactly. */
.fp-hero__title {
	font-size: 1.85rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fp-ink);
	margin: 0 0 2.25rem;
	line-height: 1.2;
}

.fp-hero__fields { margin: 0; }
.fp-hero__fields dt {
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fp-ink);
	font-weight: 700;
	margin-top: 1.5rem;
}
.fp-hero__fields dd {
	margin: 0.35rem 0 0;
	color: var(--fp-ink);
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.6;
}

/* ---------- 3. comparison ------------------------------------------- */
/*
 * Live HOC comparison table:
 *   • thead row is WHITE with navy bold text — not the inverse.
 *   • Hotel names are bold navy, mixed-case (not uppercase).
 *   • Row labels (tbody th) are bold navy uppercase on a light cream cell.
 *   • Narrative rows (Venue type, Accommodation, Meeting, F&B) embed a
 *     contextual photo above a justified paragraph.
 *   • Data rows (Destination, Distance, Option…) are centered navy bold.
 *   • Totals (Accommodation/Meeting/F&B/Grand) are emphasized via weight
 *     and size — no inverted navy block.
 */
.fp-comparison { padding: 5rem 0; background: var(--fp-paper); }

.fp-comparison__scroll { overflow-x: auto; padding: 0 1.5rem; }

.fp-comparison__table {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	border-collapse: collapse;
	/* Fixed layout: the first column keeps its 16rem label width
	 * (set further down on .fp-comparison__label-col); every other
	 * column splits the remaining width equally. Without this, the
	 * auto-layout algorithm sized each hotel column by its content,
	 * so the narrative-row photos ended up at slightly different
	 * widths — and the 16/10 aspect-ratio rule then gave each photo
	 * a slightly different height on the same row. */
	table-layout: fixed;
	font-size: 0.9rem;
}

.fp-comparison__table th,
.fp-comparison__table td {
	border: 1px solid var(--fp-line);
	padding: 1.25rem 1.1rem;
	vertical-align: top;
	/* Justified text across the whole comparison table. On one-line
	 * content (Confirmed, dates, numeric totals) `justify` has no
	 * visual effect — the line behaves as left-aligned. On the long
	 * narrative paragraphs (Venue type / Accommodation / Meeting /
	 * F&B) the inter-word spread + automatic hyphenation kicks in. */
	text-align: justify;
	text-justify: inter-word;
	hyphens: none;
	color: var(--fp-ink);
}

.fp-comparison__table thead th {
	background: var(--fp-header-grey);
	color: var(--fp-ink);
	font-weight: 700;
	text-align: center;
	/* Vertical-center hotel names so that a long, wrapped name
	 * (e.g. "Imperial Riding School, Autograph Collection" on 2 lines)
	 * aligns with single-line names in the same row. Without this, the
	 * default `vertical-align: top` left wrapped names sitting at the
	 * top of the cell while shorter names baseline-anchored higher. */
	vertical-align: middle;
	padding: 1.4rem 1rem;
	font-size: 1rem;
}

.fp-comparison__table thead th.fp-comparison__label-col {
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.fp-comparison__label-col { width: 16rem; }

.fp-comparison__table tbody th {
	background: var(--fp-header-grey);
	font-weight: 700;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--fp-ink);
	width: 16rem;
	text-align: left;
}

.fp-comparison__venue-name {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--fp-ink);
	letter-spacing: 0.01em;
}

/* Venue name anchor — jumps to the matching hotel detail section
 * further down the page. The underline is now ALWAYS visible (it
 * advertises that the thead acts as a clickable sommaire / table-of-
 * contents for the proposal). Hover dims slightly to confirm the
 * pointer is over an interactive target. */
.fp-comparison__venue-link {
	color: var(--fp-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--fp-ink);
	padding-bottom: 2px;
	transition: opacity 180ms ease;
}
.fp-comparison__venue-link:hover,
.fp-comparison__venue-link:focus-visible {
	opacity: 0.7;
}

/* Narrative rows (Venue type, Accommodation, Meeting, F&B):
 * inline photo on top, justified paragraph underneath. */
.fp-comparison__narrative-cell {
	padding: 0 !important;
	text-align: left;
}

/*
 * The wrapper acts as a white matte (padding 12 px + #fff background)
 * around the actual photo, so the image floats inside the cell with
 * an even white border on all four sides. The 16/10 aspect-ratio
 * lives on the IMG (not the wrapper) so the matte sits AROUND the
 * image, not inside it. !important + .fp-eproposal scope defend
 * against host-theme image resets (Twenty Twenty-Five ships
 * `.entry-content img { height: auto !important }`, others do the
 * same — without the guards the photo would lose its crop).
 */
.fp-eproposal .fp-comparison__photo {
	display: block;
	overflow: hidden;
	background: #fff;
	padding: 12px;
	width: 100% !important;
	box-sizing: border-box;
	border-bottom: 1px solid var(--fp-line);
}

.fp-eproposal .fp-comparison__photo-img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 10 !important;
	object-fit: cover !important;
	display: block;
}

/* Empty-slot placeholder: keep the same 16:10 footprint a real photo
 * would occupy, so the edit-overlay's stacked buttons ("Change photo",
 * "Add by URL") have room to render without clipping. Pre-M37 the empty
 * slot collapsed to ~30 px tall (just the label height) and the overlay
 * was scissored — the reviewer saw only half-buttons. */
.fp-eproposal .fp-comparison__photo--empty {
	position: relative;
	aspect-ratio: 16 / 10;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f4f4f4;
	color: #6a6a64;
	font-size: 0.82rem;
	font-style: italic;
	text-align: center;
}

.fp-comparison__narrative {
	padding: 1.5rem 1.4rem;
	font-size: 0.88rem;
	line-height: 1.65;
	color: var(--fp-ink);
	text-align: justify;
	text-justify: inter-word;
	hyphens: none;
}

.fp-comparison__narrative p { margin: 0 0 0.85em; }
.fp-comparison__narrative p:last-child { margin-bottom: 0; }

/* Data cells (Destination, Distance, etc.) — body weight, slightly
 * bigger than the narrative rows for emphasis. Reverted from the
 * earlier semi-bold (600) — the bold visual weight was bleeding into
 * the narrative paragraphs by inheritance and made the whole table
 * read as shouting. Totals and grand-total keep their own bold weight
 * via the more specific selectors below. */
.fp-comparison__table tbody td {
	font-weight: 400;
	font-size: 0.92rem;
}

/* Subtotals: same weight as data, slightly bigger. */
.fp-comparison__total-row td.fp-comparison__total {
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: 0.01em;
}

/* Grand total: largest emphasis, but still on a white surface. */
.fp-comparison__grand-row th,
.fp-comparison__grand-row td.fp-comparison__grand {
	background: var(--fp-header-grey);
	color: var(--fp-ink);
	font-weight: 700;
	font-size: 1.3rem;
	letter-spacing: 0.01em;
}

.fp-na { color: var(--fp-mute); font-style: italic; font-weight: 400; }

.fp-appendix-link {
	word-break: break-all;
	color: var(--fp-ink);
	font-weight: 500;
	font-size: 0.82rem;
	border-bottom: 1px solid var(--fp-line);
	padding-bottom: 1px;
}
.fp-appendix-link:hover { border-bottom-color: var(--fp-ink); }

/* ---------- 4. selected properties ---------------------------------- */
/*
 * Live HOC pattern: only the section *header* sits in a soft grey
 * banner (`rgba(18,34,53,.05)`); the hotel cards below float on
 * paper, separated from one another by generous vertical air.
 * Reproducing the live: section bg = white, heading wrapper = navy
 * tint (5%), cards = white.
 */
.fp-selected-properties {
	background: var(--fp-paper);
}

.fp-selected-properties__heading {
	background: rgba(18, 34, 53, 0.05);
	padding: 3.5rem 2rem;
	text-align: center;
}

.fp-selected-properties__title {
	font-size: 1.6rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fp-ink);
	font-weight: 400;
	margin: 0;
}

.fp-selected-properties__list {
	display: flex;
	flex-direction: column;
	gap: 3rem;
	max-width: 1240px;
	margin: 0 auto;
	padding: 3.5rem 2rem 4rem;
}

.fp-property-card {
	background: var(--fp-paper);
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 320px;
	text-align: left;
	overflow: hidden;
}

.fp-property-card__map {
	background: var(--fp-cream);
	position: relative;
	min-height: 320px;
}

.fp-property-card__map-iframe {
	border: 0;
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
}

.fp-property-card__map-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	text-align: center;
	color: var(--fp-mute);
	font-size: 0.85rem;
	height: 100%;
	min-height: 320px;
}

.fp-property-card__body {
	padding: 3rem 3rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.fp-property-card__location {
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fp-ink);
	font-weight: 500;
	margin: 0 0 0.75rem;
}

.fp-property-card__name {
	font-size: 1.6rem;
	margin: 0 0 1.25rem;
	letter-spacing: 0.04em;
	color: var(--fp-ink);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.2;
}

.fp-property-card__address {
	color: var(--fp-ink);
	font-size: 0.95rem;
	margin: 0 0 2rem;
	line-height: 1.6;
}

.fp-property-card__link {
	display: inline-block;
	padding: 0.95em 1.8em;
	border: 2px solid var(--fp-ink);
	color: var(--fp-ink);
	background: var(--fp-paper);
	text-decoration: none;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	transition: background-color 180ms ease, color 180ms ease;
}

.fp-property-card__link:hover {
	background: var(--fp-ink);
	color: #fff;
}

/* ---------- 5. hotel detail ----------------------------------------- */

/* Section is a 2-column grid: photo column (sticky-stack) on the left,
 * info panel on the right. We deliberately do NOT set min-height — the
 * section's height is driven by the sticky-stack so each photo gets
 * one full scroll step before the next slides over it. The info panel
 * is itself `position: sticky` so it stays visible to the right
 * throughout the entire stack. Magazine-style, copied from
 * hoteloclock.com. */
.fp-hotel-detail {
	display: grid;
	grid-template-columns: 3fr 2fr;
	background: var(--fp-paper);
	border-top: 1px solid var(--fp-line);
	align-items: start;
	/* Anchor jumps from the comparison-table venue links land at the top
	 * of this section. The offset leaves room for any host-theme sticky
	 * header so the hotel name is never tucked under it. */
	scroll-margin-top: 80px;
	/* M46 — visual breath between consecutive hotel blocks. The padding
	 * lives at the BOTTOM of each section (outside the sticky-stack's
	 * scroll context), so the last photo of hotel N unsticks cleanly
	 * BEFORE the gap appears, and the facade of hotel N+1 only starts
	 * pinning AFTER the gap ends. Pure white (--fp-paper) — the gap
	 * inherits the section's own background. */
	padding-bottom: 60px;
}

.fp-hotel-detail:last-child {
	padding-bottom: 0; /* no trailing gap before the footer */
}

/* CTA row at the bottom of the info panel — holds the "Website" and
 * "Discover the menu" buttons side by side when both are available. */
.fp-hotel-detail__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.fp-hotel-detail__gallery {
	background: var(--fp-cream);
}

.fp-hotel-detail__sticky-stack {
	position: relative;
}

/* Each photo is `position: sticky; top: 0` — when its top edge reaches
 * the viewport top, it pins; the next image in source order slides
 * over it as the user scrolls. Height is 70vh on desktop, matching
 * the live HOC proposal (~563px / 800px viewport = ~70vh).
 *
 * !important on the dimensional properties + .fp-eproposal scope
 * defends against host-theme image resets (Twenty Twenty-Five and
 * similar ship `.entry-content img { height: auto }` rules that would
 * otherwise collapse the stack to each image's native height). */
.fp-eproposal .fp-hotel-detail__sticky-image {
	position: sticky;
	top: 0;
	display: block;
	overflow: hidden;
	background: var(--fp-cream);
	height: 70vh !important;
	min-height: 480px !important;
	max-height: 720px !important;
	width: 100% !important;
	/* M38 — visible depth for the sticky-stack overlap. Each photo casts
	 * a soft shadow UPWARD; when the next photo in the stack slides over
	 * a pinned one, that shadow lands on the pinned photo's bottom edge,
	 * making the "cards stacking" effect perceptible. Without this cue
	 * the layering looks identical to a normal scroll because each
	 * full-width opaque photo cleanly replaces the previous one. */
	box-shadow: 0 -14px 32px -10px rgba(18, 34, 53, 0.28);
	transition: box-shadow 220ms ease;
}

/* The first photo in each hotel's stack has nothing above it — the
 * upward shadow would fall off-screen and look like a stray glow at
 * the top of the section. Suppress it. */
.fp-eproposal .fp-hotel-detail__sticky-image:first-child {
	box-shadow: none;
}

.fp-eproposal .fp-hotel-detail__photo-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}

.fp-hotel-detail__slot-label {
	position: absolute;
	bottom: 1rem;
	left: 1.25rem;
	font-size: 0.65rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	background: rgba(18, 34, 53, 0.85);
	color: #fff;
	padding: 0.35rem 0.85rem;
	font-weight: 500;
	pointer-events: none;
	z-index: 2;
}

.fp-hotel-detail__gallery-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem;
	text-align: center;
	color: var(--fp-mute);
	font-size: 0.85rem;
	min-height: 400px;
}

/* Info panel is sticky on its own column so the text + brand info
 * stays visible while the user scrolls through the photo stack. */
.fp-hotel-detail__info {
	padding: 4.5rem 3.5rem;
	position: sticky;
	top: 0;
	align-self: start;
	max-height: 100vh;
	overflow-y: auto;
	color: var(--fp-ink);
}

/* Hide native scrollbar on the sticky info pane unless overflow happens —
 * keeps the magazine layout calm. */
.fp-hotel-detail__info::-webkit-scrollbar { width: 6px; }
.fp-hotel-detail__info::-webkit-scrollbar-thumb {
	background: var(--fp-line);
	border-radius: 3px;
}

/* Brand logo as the visual anchor of the info panel — the user's
 * uploaded logo carries its own brand color (e.g. the red Hyatt
 * block, the gold Marriott logo). We just give it room to breathe.
 *
 * Unlike the photo crops above, a logo must keep its native aspect
 * ratio — `object-fit: contain` fits it inside the 180×180 box
 * without distortion. !important locks the upper bounds against
 * host-theme `img { width: 100% }` rules. */
.fp-eproposal .fp-hotel-detail__logo {
	max-width: 180px !important;
	max-height: 180px !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain;
	margin: 0 auto 2rem;
	display: block;
}

.fp-hotel-detail__name {
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0 0 0.5rem;
	color: var(--fp-ink);
	line-height: 1.2;
}

.fp-hotel-detail__chain {
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fp-ink);
	font-weight: 700;
	margin-bottom: 2rem;
}

.fp-hotel-detail__section {
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fp-ink);
	margin: 2.25rem 0 0.85rem;
	font-weight: 600;
}

.fp-hotel-detail__overview {
	line-height: 1.7;
	color: var(--fp-ink);
	font-size: 0.95rem;
	text-align: justify;
	text-justify: inter-word;
	hyphens: none;
}
.fp-hotel-detail__overview--empty {
	color: var(--fp-mute);
	font-style: italic;
	text-align: left;
}

.fp-hotel-detail__keys {
	list-style: disc;
	padding-left: 1.4rem;
	margin: 0 0 1.5rem;
}

.fp-hotel-detail__keys li {
	padding: 0.25rem 0;
	color: var(--fp-ink);
	font-size: 0.92rem;
	line-height: 1.55;
}

.fp-hotel-detail__keys li::marker {
	color: var(--fp-ink);
}

.fp-hotel-detail__keys strong {
	color: var(--fp-ink);
	font-weight: 700;
}

.fp-button {
	display: inline-block;
	padding: 0.85em 1.7em;
	border: 2px solid var(--fp-ink);
	color: var(--fp-ink);
	text-decoration: none;
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 500;
	transition: background-color 180ms ease, color 180ms ease;
}

.fp-button:hover {
	background: var(--fp-ink);
	color: #fff;
}

/* ---------- 6. footer ------------------------------------------------ */
/*
 * Live HOC footer: light cream signature section with a round
 * portrait of the signing co-founder on the left and a justified
 * thank-you message on the right. Below it, a compact white strip
 * carries HOC's brand + address + legal as a safety net for when the
 * WordPress theme's site-wide footer isn't visible.
 */
.fp-eproposal-footer {
	background: var(--fp-cream);
	color: var(--fp-ink);
	padding: 5rem 2rem;
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 4rem;
	align-items: center;
	max-width: 100%;
}

.fp-signature {
	text-align: center;
	max-width: 280px;
	margin-left: auto;
}

/*
 * Signing portrait in the footer signature block.
 *
 * Scoped under .fp-eproposal and uses !important on the critical
 * cropping properties (border-radius, object-fit, width/height,
 * aspect-ratio) because mainstream host themes (Astra, OceanWP,
 * Twenty Twenty-Five, etc.) reset image styles via rules like
 * `.entry-content img { border-radius: 0; height: auto }` that would
 * otherwise un-crop the circle. The aspect-ratio + min/max width
 * keep the frame square even if the host theme forces a fluid width.
 */
.fp-eproposal .fp-signature__portrait {
	width: 140px !important;
	height: 140px !important;
	min-width: 140px;
	max-width: 140px;
	aspect-ratio: 1 / 1 !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	object-position: center top;
	margin: 0 auto 1.25rem;
	display: block;
	box-shadow: 0 2px 8px rgba(18, 34, 53, 0.08);
}

.fp-signature__name {
	font-size: 1.4rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	margin: 0 0 0.4rem;
	color: var(--fp-ink);
	text-transform: none;
	font-family: var(--fp-sans);
}

.fp-signature__role {
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fp-ink);
	margin: 0;
	font-weight: 500;
}

.fp-signature-message {
	max-width: 480px;
}

.fp-signature-message p {
	line-height: 1.75;
	color: var(--fp-ink);
	font-size: 1rem;
	margin: 0;
	text-align: justify;
	text-justify: inter-word;
	hyphens: none;
}

/* Multi-column contact strip — replicates the live HOC pattern:
 *   brand+address | CALL US (round portraits) | MAIL US | social
 * with a legal/regulatory row underneath.
 */
.fp-contact-strip {
	background: var(--fp-paper);
	border-top: 1px solid var(--fp-line);
	padding: 3.5rem 2rem 1.5rem;
	color: var(--fp-ink);
}

.fp-contact-strip__inner {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 0.5fr;
	gap: 2.5rem;
	align-items: start;
}

.fp-contact-strip__col {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.fp-contact-strip__col--social {
	flex-direction: row;
	gap: 0.5rem;
	align-items: flex-start;
	justify-content: flex-end;
}

/* Brand column: horizontal layout — round monogram on the left, name
 * + address stacked on the right. No card chrome (no background, no
 * border) — sits flush on the contact-strip surface, matching the
 * minimal HOC reference. */
.fp-contact-strip__col--brand {
	flex-direction: row;
	align-items: center;
	gap: 1rem;
}

.fp-contact-strip__logo {
	width: 58px;
	height: 58px;
	flex-shrink: 0;
	color: var(--fp-ink);
	margin: 0;
}

.fp-contact-strip__brand-text {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
	/* Drop the centered block down so the bold "Hotel O'Clock" line sits at
	 * the logo's vertical centre (instead of its upper third), with the
	 * one-line address tucked just below. Reset on mobile (see media query). */
	transform: translateY(10px);
}

.fp-contact-strip__brand {
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: none;
	margin: 0;
	color: var(--fp-ink);
	font-size: 1.05rem;
	line-height: 1.2;
}

.fp-contact-strip__address {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--fp-ink);
	/* One line on desktop/tablet — the brand column (2fr) is wide enough.
	 * Re-enabled to wrap on phones in the media query below. */
	white-space: nowrap;
}

.fp-contact-strip__address strong {
	font-weight: 700;
	letter-spacing: 0.02em;
}

.fp-contact-strip__label {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--fp-ink);
	opacity: 0.7;
	margin: 0;
}

/* Round portrait + tooltip dialer — same UX as the live HOC.
 * Tooltip is CSS-only: revealed on `:hover` / `:focus-visible`,
 * positioned beneath the portrait, with a small arrow on top. */
.fp-cofounder-dial {
	display: flex;
	gap: 0.85rem;
	flex-wrap: wrap;
}

.fp-cofounder-dial__item {
	position: relative;
	display: inline-block;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: visible;
	text-decoration: none;
}

.fp-eproposal .fp-cofounder-dial__portrait {
	width: 56px !important;
	height: 56px !important;
	min-width: 56px;
	max-width: 56px;
	aspect-ratio: 1 / 1 !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	object-position: center top;
	display: block;
	transition: transform 200ms ease, box-shadow 200ms ease;
	box-shadow: 0 1px 3px rgba(18, 34, 53, 0.12);
}

.fp-cofounder-dial__item:hover .fp-cofounder-dial__portrait,
.fp-cofounder-dial__item:focus-visible .fp-cofounder-dial__portrait {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(18, 34, 53, 0.22);
}

.fp-cofounder-dial__tooltip {
	position: absolute;
	bottom: calc( 100% + 10px );
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: var(--fp-ink);
	color: #fff;
	padding: 0.55rem 0.85rem;
	border-radius: 4px;
	white-space: nowrap;
	font-size: 0.78rem;
	line-height: 1.4;
	opacity: 0;
	pointer-events: none;
	transition: opacity 180ms ease, transform 180ms ease;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	align-items: center;
}

.fp-cofounder-dial__tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--fp-ink);
}

.fp-cofounder-dial__item:hover .fp-cofounder-dial__tooltip,
.fp-cofounder-dial__item:focus-visible .fp-cofounder-dial__tooltip {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.fp-cofounder-dial__name {
	font-weight: 600;
	letter-spacing: 0.02em;
}

.fp-cofounder-dial__phone {
	font-weight: 400;
	letter-spacing: 0.04em;
	opacity: 0.85;
	font-size: 0.74rem;
}

.fp-contact-strip__mail {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	color: var(--fp-ink);
	text-decoration: none;
	font-size: 0.95rem;
	border-bottom: 1px solid transparent;
	padding-bottom: 1px;
	align-self: flex-start;
	/* Nudge the envelope + address 3px left so they sit flush under the
	 * "ÉCRIVEZ-NOUS" label. */
	transform: translateX(-3px);
}

.fp-contact-strip__mail:hover {
	border-bottom-color: var(--fp-ink);
}

.fp-contact-strip__mail-icon {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	background: rgba(18, 34, 53, 0.05);
	color: var(--fp-ink);
	border-radius: 50%;
	padding: 8px;
	box-sizing: border-box;
	/* The icon box is already centered with the email line box
	 * (align-items: center on the parent). This small nudge optically
	 * re-centers it against the lowercase email text — whose visual weight
	 * (x-height) plus the upper-heavy envelope glyph otherwise read ~2px
	 * high. transform keeps the icon out of layout flow (no reflow). */
	transform: translateY(2px);
}

.fp-contact-strip__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--fp-ink);
	opacity: 0.7;
	transition: opacity 180ms ease;
	text-decoration: none;
}

.fp-contact-strip__social:hover,
.fp-contact-strip__social:focus-visible {
	opacity: 1;
}

.fp-contact-strip__social svg {
	width: 22px;
	height: 22px;
}

.fp-contact-strip__legal {
	max-width: 1240px;
	margin: 2.5rem auto 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--fp-line);
	font-size: 0.78rem;
	color: var(--fp-ink);
	opacity: 0.75;
	text-align: left;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.6rem;
	align-items: center;
}

.fp-contact-strip__legal a {
	color: var(--fp-ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 1px;
}

.fp-contact-strip__legal a:hover {
	border-bottom-color: var(--fp-ink);
}

.fp-empty {
	padding: 6rem 2rem;
	text-align: center;
	color: var(--fp-mute);
	font-style: italic;
}

/* ---------- Password gate ------------------------------------------ */
/*
 * Premium HOC-branded gate shown when an eProposal is
 * password-protected and the visitor hasn't entered the password yet.
 * Same visual rhythm as the cover (logo + tagline) so the brand is
 * established before any secret content is exposed.
 */
.fp-pwgate {
	--fp-ink:       #122235;
	--fp-paper:     #ffffff;
	--fp-cream:     #f4f4f4;
	--fp-line:      #e3e3df;

	font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: var(--fp-ink);
	background: var(--fp-paper);
	min-height: 70vh;
	padding: 5rem 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.fp-pwgate__inner {
	max-width: 460px;
	width: 100%;
	text-align: center;
}

.fp-pwgate__logo {
	width: 200px;
	height: auto;
	margin: 0 auto 1.5rem;
	display: block;
	color: var(--fp-ink);
}

.fp-pwgate__brand {
	font-size: 1.5rem;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0 0 1.5rem;
	color: var(--fp-ink);
}

.fp-pwgate__tagline {
	font-size: 1.05rem;
	font-weight: 300;
	letter-spacing: 0.01em;
	color: var(--fp-ink);
	margin: 0;
	line-height: 1.55;
}

.fp-pwgate__divider {
	width: 48px;
	height: 1px;
	background: var(--fp-ink);
	margin: 2.5rem auto;
	opacity: 0.4;
}

.fp-pwgate__intro {
	font-size: 0.95rem;
	color: var(--fp-ink);
	margin: 0 0 2rem;
	line-height: 1.65;
}

.fp-pwgate__form {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	max-width: 360px;
	margin: 0 auto;
}

.fp-pwgate__input {
	padding: 1em 1.1em;
	border: 1px solid var(--fp-line);
	background: var(--fp-paper);
	color: var(--fp-ink);
	font-size: 0.95rem;
	font-family: inherit;
	letter-spacing: 0.04em;
	transition: border-color 200ms ease, box-shadow 200ms ease;
	text-align: center;
}

.fp-pwgate__input:focus {
	outline: none;
	border-color: var(--fp-ink);
	box-shadow: 0 0 0 3px rgba(18, 34, 53, 0.08);
}

.fp-pwgate__input::placeholder {
	color: rgba(18, 34, 53, 0.4);
	letter-spacing: 0.04em;
}

.fp-pwgate__submit {
	padding: 1em 1.6em;
	border: 2px solid var(--fp-ink);
	background: var(--fp-paper);
	color: var(--fp-ink);
	font-size: 0.78rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background-color 180ms ease, color 180ms ease;
}

.fp-pwgate__submit:hover,
.fp-pwgate__submit:focus-visible {
	background: var(--fp-ink);
	color: #fff;
	outline: none;
}

.fp-pwgate__help {
	margin: 2.5rem 0 0;
	font-size: 0.82rem;
	color: rgba(18, 34, 53, 0.65);
	line-height: 1.55;
}

.fp-pwgate__help a {
	color: var(--fp-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--fp-line);
	padding-bottom: 1px;
}

.fp-pwgate__help a:hover {
	border-bottom-color: var(--fp-ink);
}

/* WP-injected `aria-hidden` accessibility label appears as a visually
 * hidden span — make sure it stays hidden inside our centred form. */
.fp-pwgate .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

@media ( max-width: 700px ) {
	.fp-pwgate { padding: 3rem 1.25rem; min-height: 60vh; }
	.fp-pwgate__logo { width: 160px; }
	.fp-pwgate__tagline { font-size: 0.95rem; }
}

/* ---------- 7. Instagram bandeau ----------------------------------- */
/*
 * Two render modes share the same wrapper:
 *   .fp-ig-feed--live   → Smash Balloon shortcode delegate; the
 *                          plugin brings its own grid CSS, we just
 *                          provide the section frame.
 *   .fp-ig-feed--static → 10-tile fallback grid with brand-tinted
 *                          tiles and an Instagram glyph at the
 *                          center of each.
 */
.fp-ig-feed {
	background: var(--fp-cream);
	padding: 3.5rem 2rem 4rem;
}

.fp-ig-feed--live .sb_instagram_header,
.fp-ig-feed--live #sb_instagram { max-width: 1240px; margin: 0 auto; }

.fp-ig-feed__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 6px;
	max-width: 1240px;
	margin: 0 auto;
}

.fp-ig-feed__tile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	background: var(--fp-ink);
	text-decoration: none;
	overflow: hidden;
	transition: background-color 180ms ease;
}

/* No-image tile (entry without a captured thumbnail, or image load
 * failed): navy block with the glyph in white, inverts on hover. */
.fp-ig-feed__tile:hover,
.fp-ig-feed__tile:focus-visible {
	background: var(--fp-paper);
}

.fp-ig-feed__glyph {
	width: 36px;
	height: 36px;
	display: block;
	color: #fff;
	transition: color 180ms ease, opacity 200ms ease;
	position: relative;
	z-index: 2;
}

.fp-ig-feed__tile:hover .fp-ig-feed__glyph,
.fp-ig-feed__tile:focus-visible .fp-ig-feed__glyph {
	color: var(--fp-ink);
}

/* With-image tile: hot-linked Instagram thumbnail from hoteloclock.com
 * fills the tile. Glyph is hidden by default and reappears on hover
 * (with a drop shadow + dimmed image) to signal that the tile is
 * clickable. */
.fp-ig-feed__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 220ms ease, transform 220ms ease;
}

.fp-ig-feed__tile--has-image .fp-ig-feed__glyph {
	opacity: 0;
	color: #fff;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.fp-ig-feed__tile--has-image:hover .fp-ig-feed__image,
.fp-ig-feed__tile--has-image:focus-visible .fp-ig-feed__image {
	opacity: 0.35;
	transform: scale(1.03);
}

.fp-ig-feed__tile--has-image:hover .fp-ig-feed__glyph,
.fp-ig-feed__tile--has-image:focus-visible .fp-ig-feed__glyph {
	opacity: 1;
	color: #fff;
}

/* Cancel the bg invert on with-image tiles — the image already fills
 * the surface, no need to flash white behind it. */
.fp-ig-feed__tile--has-image:hover,
.fp-ig-feed__tile--has-image:focus-visible {
	background: var(--fp-ink);
}

.fp-ig-feed__follow {
	text-align: center;
	margin: 2rem 0 0;
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.fp-ig-feed__follow a {
	color: var(--fp-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--fp-ink);
	padding-bottom: 2px;
}

/* ---------- responsive ---------------------------------------------- */

@media (max-width: 900px) {
	.fp-hero,
	.fp-hotel-detail,
	.fp-eproposal-footer,
	.fp-property-card {
		grid-template-columns: 1fr;
	}
	.fp-hero__details,
	.fp-hotel-detail__info { padding: 2.75rem 1.75rem; }
	.fp-comparison__table { font-size: 0.82rem; }
	.fp-cover__logo { width: 180px; }
	.fp-cover { padding: 2.5rem 1.25rem 2rem; }
	.fp-cover__tagline { font-size: 1.1rem; line-height: 1.55; white-space: normal; }
	.fp-hero__title { font-size: 1.5rem; }
	.fp-selected-properties__heading { padding: 2.25rem 1rem; }
	.fp-selected-properties__title { font-size: 1.25rem; }
	.fp-selected-properties__list { padding: 2.25rem 1rem 3rem; }
	.fp-property-card__body { padding: 2rem 1.75rem; }
	.fp-property-card__name { font-size: 1.3rem; }
	.fp-eproposal-footer {
		gap: 2.5rem;
		padding: 3.5rem 1.5rem;
		text-align: center;
	}
	.fp-signature { margin-left: auto; margin-right: auto; }
	.fp-signature-message p { text-align: left; }
	.fp-contact-strip { padding: 2.5rem 1.25rem 1rem; }
	.fp-contact-strip__inner {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
	/* Phones: the brand block is full-width, so let the address wrap again
	 * (one line would overflow) and drop the desktop title nudge. */
	.fp-contact-strip__address { white-space: normal; }
	.fp-contact-strip__brand-text { transform: none; }
	.fp-contact-strip__col--social {
		justify-content: flex-start;
	}
	.fp-contact-strip__legal {
		font-size: 0.72rem;
		gap: 0.4rem;
	}
	.fp-eproposal .fp-comparison__photo-img { aspect-ratio: 4 / 3 !important; }
	.fp-ig-feed__grid { grid-template-columns: repeat(2, 1fr); }
	.fp-ig-feed { padding: 2.5rem 1rem 3rem; }
	.fp-ig-feed__glyph { width: 28px; height: 28px; }

	/* Bypass the sticky-stack on mobile — pinning ~13 photos at 70vh
	 * each turns the section into ~9 viewports of scroll, which is
	 * exhausting on a phone. Fall back to a regular vertical list.
	 *
	 * !important on the dimensional overrides is required because the
	 * desktop rule above (.fp-eproposal .fp-hotel-detail__sticky-image)
	 * uses !important to defend against theme resets; we have to match
	 * its weight to swap the desktop 70vh for a mobile 4/3 thumbnail. */
	.fp-eproposal .fp-hotel-detail__sticky-image {
		position: static;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		aspect-ratio: 4 / 3 !important;
	}
	.fp-hotel-detail__info {
		position: static;
		max-height: none;
		overflow: visible;
	}

	/* M46 — smaller white gap between hotels on mobile (cards are
	 * already stacked vertically, less aggressive separation needed). */
	.fp-hotel-detail {
		padding-bottom: 30px;
	}
	.fp-hotel-detail:last-child {
		padding-bottom: 0;
	}
}

/* ---------- RTL overrides for Arabic eProposals --------------------- */

.fp-eproposal[dir="rtl"] { direction: rtl; }

.fp-eproposal[dir="rtl"] .fp-hero {
	grid-template-columns: 1fr 1fr;
	direction: rtl;
}
.fp-eproposal[dir="rtl"] .fp-hero__details { text-align: right; }
.fp-eproposal[dir="rtl"] .fp-hero__title::after { left: auto; right: 0; }
.fp-eproposal[dir="rtl"] .fp-hero__fields dt,
.fp-eproposal[dir="rtl"] .fp-hero__fields dd { text-align: right; }

.fp-eproposal[dir="rtl"] .fp-comparison__table { direction: rtl; }
.fp-eproposal[dir="rtl"] .fp-comparison__table th,
.fp-eproposal[dir="rtl"] .fp-comparison__table td { text-align: right; }

.fp-eproposal[dir="rtl"] .fp-hotel-detail { direction: rtl; }
.fp-eproposal[dir="rtl"] .fp-hotel-detail__info { text-align: right; }
.fp-eproposal[dir="rtl"] .fp-hotel-detail__section::after { left: auto; right: 0; }

.fp-eproposal[dir="rtl"] .fp-contact {
	text-align: left;
	margin-left: 0;
	margin-right: auto;
}
.fp-eproposal[dir="rtl"] .fp-contact__logo { margin: 0 auto 1.5rem 0; }
.fp-eproposal[dir="rtl"] .fp-selected-properties__list { direction: rtl; }
.fp-eproposal[dir="rtl"] .fp-property-card { text-align: right; }
.fp-eproposal[dir="rtl"] .fp-eproposal-footer { direction: rtl; }
.fp-eproposal[dir="rtl"] .fp-signature { text-align: right; }

/* ---------- 10. Reduced-motion accessibility ------------------------- */
/*
 * Honor the visitor's prefers-reduced-motion setting (system-level
 * "reduce motion" in macOS / iOS / Android / Windows). When set, kill
 * the smooth-scroll on anchor jumps and shorten all transitions to a
 * near-instant flash. The plugin doesn't use keyframe animations, so
 * this single block covers every animated surface. */
@media (prefers-reduced-motion: reduce) {
	html:has(.fp-eproposal) {
		scroll-behavior: auto;
	}
	.fp-eproposal,
	.fp-eproposal *,
	.fp-eproposal *::before,
	.fp-eproposal *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Non-destructive photo framing (Reframe modal) ----------
 * The visual editor's Reframe tool stores a per-eProposal framing
 * (focal point + zoom + rotation) as CSS custom properties on the slot
 * <img>. Reproduced here in pure CSS so the published page needs no JS.
 * Defaults are identity (centre, no zoom, no rotation) so an unframed
 * photo renders exactly as before. Slot images are object-fit: cover,
 * which object-position keys off. */
.fp-framed {
	object-fit: cover;
	object-position: var( --fp-fx, 50% ) var( --fp-fy, 50% );
	transform: rotate( var( --fp-fr, 0deg ) ) scale( var( --fp-fz, 1 ) );
	transform-origin: var( --fp-fx, 50% ) var( --fp-fy, 50% );
}