/* ---------------------------------------------------------------------------
   The Farm Stays — v1.4.1
   A marketplace, not an editorial magazine. Warm ivory ground, white surfaces,
   and real property photography doing the decorative work. No gradients, no
   glassmorphism, no serif display face, no oversized rounded cards.

   Colour: the nine approved brand values are declared once in :root and read
   through variables everywhere below. The 1.2.0 sage/green palette has been
   replaced rather than overridden — there is no obsolete layer underneath.

   Hierarchy: teal and forest charcoal carry brand and trust, burnt coral is
   reserved for revenue actions, champagne gold marks premium status, ratings
   and verification. Coral is never decoration; gold is never a background.
   ------------------------------------------------------------------------ */

:root {
	/* ---------------------------------------------------------------------
	   The approved TFS brand colour system. These nine values are the entire
	   frontend colour family. Every rule below reads them through a variable;
	   there are no parallel hard-coded copies anywhere in this stylesheet.
	   --------------------------------------------------------------------- */
	--tfs-primary:        #0F4C45;  /* Deep teal green. Brand, navigation, trust. */
	--tfs-primary-dark:   #123D3A;  /* Forest charcoal. Dark brand areas, footer. */
	--tfs-cta:            #C94F32;  /* Burnt coral. Revenue actions only. */
	--tfs-background:     #FAF7F2;  /* Warm ivory. The site's ground. */
	--tfs-surface:        #FFFFFF;  /* White. Cards and content surfaces. */
	--tfs-gold:           #C9A86A;  /* Champagne gold. Ratings, verification, premium. */
	--tfs-text-primary:   #1C2B2A;  /* Charcoal. */
	--tfs-text-secondary: #6B746F;  /* Warm grey. */
	--tfs-border:         #E8E3DA;  /* Soft beige. */

	/* Interaction states, derived conservatively from the nine above rather
	   than introducing new hues. Coral hover is the same coral darkened;
	   teal hover is forest charcoal, which the palette already contains. */
	--tfs-cta-hover:      #B34328;
	--tfs-cta-quiet:      #FBF1ED;  /* Coral at 6% over ivory. Conversion focus rings. */
	--tfs-primary-quiet:  #EDF2F0;  /* Teal at 8% over white. Nav hover only. */
	--tfs-gold-quiet:     #FAF4E9;  /* Gold at 10% over ivory. Badge grounds. */
	--tfs-on-dark:        #FFFFFF;
	--tfs-on-dark-soft:   #D7E0DC;

	/* Universal system states. Functional only, never decorative. */
	--tfs-error:          #A8331B;
	--tfs-error-bg:       #FBF0ED;
	--tfs-success:        #1E6B4F;
	--tfs-success-bg:     #EDF6F1;

	--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', system-ui, sans-serif;

	--r-card:  12px;
	--r-img:   10px;
	--r-input: 8px;
	--r-btn:   8px;
	--r-badge: 6px;

	--shadow-sm: 0 1px 2px rgba(28,43,42,.05);
	--shadow-md: 0 4px 14px -8px rgba(28,43,42,.28);

	--gutter: 16px;
	--max: 1240px;
	--head-h: 64px;

	/* Every control in a form column resolves to this one height, which is what
	   keeps the mobile search fields aligned rather than nearly aligned. */
	--control-h: 48px;
}

@media (min-width: 720px) { :root { --gutter: 24px; } }

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

/**
 * 1.4.1 — the iOS Safari blank-scroll fix.
 *
 * What was wrong: html carried min-height:100% and body carried min-height:100%
 * on top of it. A percentage height resolves against the initial containing
 * block, and on iOS Safari that block is the LARGE viewport — the height the
 * page has when the browser's top and bottom bars are collapsed. With the bars
 * expanded the visible area is 80–100px shorter, but the document was still
 * sized to the large viewport, so every page could be scrolled past its own
 * footer into empty body background. That is the blank area below the content.
 *
 * The fix is to size the body against the DYNAMIC viewport instead, which is
 * the unit that tracks Safari's chrome as it collapses and expands, and to stop
 * html from participating in the height chain at all. 100vh stays as the
 * fallback for browsers without dvh; on those it behaves exactly as before.
 *
 * min-height (not height) is deliberate: it gives a short page a full-height
 * body so the footer sits at the bottom, and lets a long page be exactly as
 * tall as its content. Nothing here forces a wrapper to fill extra height once
 * the content has ended.
 */
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--tfs-background);
	color: var(--tfs-text-primary);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	display: flex;
	flex-direction: column;
	min-height: 100vh;   /* Fallback for browsers without dynamic viewport units. */
	min-height: 100dvh;  /* Tracks iOS Safari's collapsing chrome. */
}

/* main fills the leftover space on a short page and is content-sized on a long
   one. `min-height: 0` lets it shrink rather than force the body taller than
   its own min-height, which is the safe form for a flex column. */
main { flex: 1 1 auto; min-height: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--tfs-primary); text-underline-offset: 3px; }
a:hover { color: var(--tfs-primary-dark); }

/* Icons carry explicit dimensions. The global img/svg rule sets height:auto,
   which collapses an inline SVG to zero height inside a flex button on some
   iOS builds — the cause of the blank square where the Call icon should be. */
.btn > svg, .head-icon > svg, .chip-link > svg, .sticky-act > svg,
.trust-item > svg, .card-flag > svg, .card-verify > svg, .badge > svg,
.amenity-strip svg, .features li > svg, .foot-social a > svg, .stay-place > svg {
	flex: none; height: auto; align-self: center;
}

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.18; letter-spacing: -0.015em; color: var(--tfs-primary-dark); }
.hero h1, .hero h2 { color: var(--tfs-on-dark); }
h3, h4 { color: var(--tfs-text-primary); }
h1 { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.6rem); font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); font-weight: 680; }
h3 { font-size: 1.06rem; font-weight: 650; }
h4 { font-size: .95rem; font-weight: 650; }
p  { margin: 0 0 1em; }
strong, b { font-weight: 650; }

.num { font-variant-numeric: tabular-nums; font-weight: 650; }

:focus-visible { outline: 2px solid var(--tfs-primary); outline-offset: 2px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 760px; }
.muted { color: var(--tfs-text-secondary); }
.visually-hidden {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--tfs-primary); color: var(--tfs-on-dark); padding: 12px 18px; }
.skip:focus { left: 0; top: 0; }
.section { padding-block: clamp(36px, 5vw, 60px); }
.section-tint { background: var(--tfs-surface); }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head p { margin: 4px 0 0; color: var(--tfs-text-secondary); font-size: .93rem; }
.section-head .link-more { font-size: .92rem; font-weight: 600; text-decoration: none; white-space: nowrap; padding-block: 4px; display: inline-block; }
.section-head .link-more:hover { text-decoration: underline; }

/* --- Buttons ------------------------------------------------------------ */

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font: inherit; font-weight: 650; line-height: 1.1;
	padding: 13px 18px; min-height: 46px;
	border: 1px solid transparent; border-radius: var(--r-btn);
	cursor: pointer; text-decoration: none; text-align: center;
	transition: background-color .12s linear, border-color .12s linear, color .12s linear;
}
.btn-sm { padding: 9px 13px; min-height: 40px; font-size: .9rem; }
.btn-block { display: flex; width: 100%; }

/* Coral is reserved for actions that produce revenue: check availability,
   send enquiry, submit property, run the search. Nothing decorative. */
.btn-primary { background: var(--tfs-cta); color: var(--tfs-on-dark); }
.btn-primary:hover { background: var(--tfs-cta-hover); color: var(--tfs-on-dark); }
/* A conversion button focuses in its own family rather than in the brand teal,
   so the ring reads as part of the button instead of as an unrelated outline. */
.btn-primary:focus-visible, .btn-wa:focus-visible {
	outline: 3px solid var(--tfs-cta-quiet); outline-offset: 2px;
}

/* A WhatsApp button is a conversion, so it is coral like every other one.
   The glyph identifies the channel; the colour identifies the intent. */
/* WhatsApp is Deep Teal, never Burnt Coral. This is a locked brand rule and it
   holds for every WhatsApp control on the site: header, property page, sticky
   bar and shortlist. Coral stays reserved for other conversion actions. */
.btn-wa { background: var(--tfs-primary); color: var(--tfs-on-dark); border-color: var(--tfs-primary); }
.btn-wa:hover { background: var(--tfs-primary-dark); border-color: var(--tfs-primary-dark); color: var(--tfs-on-dark); }
.btn-wa .wa-mark, .btn .call-mark { flex: none; }

/* Secondary actions — Call above all — are teal, never coral. */
.btn-secondary { background: var(--tfs-primary); color: var(--tfs-on-dark); }
.btn-secondary:hover { background: var(--tfs-primary-dark); color: var(--tfs-on-dark); }

.btn-outline { background: var(--tfs-surface); color: var(--tfs-primary); border-color: var(--tfs-border); }
.btn-outline:hover { background: var(--tfs-background); border-color: var(--tfs-primary); color: var(--tfs-primary-dark); }
.btn-outline[aria-pressed="true"] { background: var(--tfs-primary-quiet); border-color: var(--tfs-primary); color: var(--tfs-primary-dark); }
.btn[disabled], .btn[aria-disabled="true"] {
	background: var(--tfs-border); color: var(--tfs-text-secondary);
	border-color: var(--tfs-border); cursor: not-allowed;
}

.link-plain {
	background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
	color: var(--tfs-primary); text-decoration: underline;
}

/* --- Header ------------------------------------------------------------- */

.site-head {
	background: var(--tfs-surface);
	border-bottom: 1px solid var(--tfs-border);
	position: sticky; top: 0; z-index: 50;
}
.head-inner { display: flex; align-items: center; gap: 12px; min-height: var(--head-h); }

.brand { text-decoration: none; display: flex; align-items: center; margin-right: auto; min-width: 0; }
.brand-mark { font-weight: 750; font-size: 1.12rem; color: var(--tfs-primary); letter-spacing: -0.03em; }

/* The approved horizontal logo. Height-driven so it keeps its 3.4:1 ratio at
   every breakpoint; the intrinsic width/height on the tag reserves the space
   so the header never shifts as it loads. */
.brand img, .brand-logo { height: 38px; width: auto; max-width: 100%; display: block; }
@media (max-width: 767px) { .brand img, .brand-logo { height: 32px; } }
@media (max-width: 389px) { .brand img, .brand-logo { height: 28px; } }

.head-nav { display: none; }
.nav-list, .head-nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.head-nav a {
	display: block; color: var(--tfs-text-primary); text-decoration: none;
	font-size: .95rem; font-weight: 550; padding: 8px 12px; border-radius: var(--r-btn);
}
.head-nav a:hover, .head-nav .current-menu-item > a { background: var(--tfs-primary-quiet); color: var(--tfs-primary-dark); }

.head-actions { display: flex; align-items: center; gap: 8px; }

.shortlist-link {
	display: none; align-items: center; gap: 6px;
	color: var(--tfs-text-primary); text-decoration: none; font-size: .93rem; font-weight: 550;
	padding: 8px 10px; border-radius: var(--r-btn);
}
.shortlist-link:hover { background: var(--tfs-primary-quiet); color: var(--tfs-primary-dark); }
.shortlist-link svg { flex: none; }
.shortlist-count {
	display: inline-block; min-width: 19px; padding: 0 6px;
	background: var(--tfs-primary); color: var(--tfs-on-dark);
	border-radius: 20px; font-size: .74rem; font-weight: 700; text-align: center; line-height: 19px;
}

.head-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; flex: none;
	border: 1px solid var(--tfs-border); border-radius: var(--r-btn);
	background: var(--tfs-surface); color: var(--tfs-text-primary); cursor: pointer;
	text-decoration: none;
}
.head-icon:hover { background: var(--tfs-background); color: var(--tfs-primary-dark); }
.head-icon-wa { background: var(--tfs-primary); border-color: var(--tfs-primary); color: var(--tfs-on-dark); }
.head-icon-wa:hover { background: var(--tfs-primary-dark); border-color: var(--tfs-primary-dark); color: var(--tfs-on-dark); }
/* The header Call control is teal-outlined so it reads as a real control
   rather than an empty box, which is how it was rendering on phones. */
.head-icon-call { border-color: var(--tfs-primary); color: var(--tfs-primary); background: var(--tfs-surface); }
.head-icon-call:hover { background: var(--tfs-primary-quiet); color: var(--tfs-primary-dark); }
.head-call-text { display: none; }

.menu-toggle .icon-open, .menu-toggle .icon-close { display: flex; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: flex; }

@media (min-width: 900px) {
	.head-nav, .shortlist-link { display: flex; }
	.menu-toggle { display: none; }
	.head-inner { gap: 18px; }
	.head-nav { margin-right: auto; }
	.brand { margin-right: 4px; }
	.head-call-text { display: inline-flex; }
	.head-call-icon { display: none; }
}

/* Mobile menu: a plain panel below the bar. No overlay library, no dependency. */
.mobile-menu {
	border-top: 1px solid var(--tfs-border);
	background: var(--tfs-surface);
	padding: 4px var(--gutter) 18px;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu ul { list-style: none; margin: 0 0 14px; padding: 0; }
.mobile-menu li + li { border-top: 1px solid var(--tfs-border); }
/* Scoped to the link list: the two action buttons below it are .btn and must
   keep their own inline-flex layout. */
.mobile-menu ul a { display: block; padding: 14px 4px; color: var(--tfs-text-primary); text-decoration: none; font-weight: 600; font-size: 1.02rem; }
.mobile-menu ul a:hover { color: var(--tfs-primary-dark); }
.mobile-menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 900px) { .mobile-menu { display: none !important; } }

/* --- Hero --------------------------------------------------------------- */

.hero { position: relative; background: var(--tfs-primary-dark); color: var(--tfs-on-dark); }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-img { width: 100%; height: 100%; object-fit: cover; }
/* One flat scrim, only as dark as the text needs. No decorative gradient. */
.hero-media::after { content: ''; position: absolute; inset: 0; background: rgba(18,61,58,.52); }
.hero-inner { position: relative; padding-block: clamp(44px, 7vw, 88px) clamp(26px, 4vw, 44px); }

.hero-title { color: var(--tfs-on-dark); max-width: 18ch; margin-bottom: .25em; }
.hero-sub { color: var(--tfs-background); font-size: 1.03rem; max-width: 48ch; margin-bottom: 22px; }
.hero-note { color: var(--tfs-on-dark-soft); font-size: .84rem; margin: 12px 0 0; max-width: 64ch; }
.finder-bar + .finder-note, .page-head .hero-note { color: var(--tfs-text-secondary); }

/* --- The finder ---------------------------------------------------------
   Rebuilt structurally rather than patched per device. Three rules do the
   work, and they hold at every width without a magic number:

   1. Every grid item is min-width:0. A grid item defaults to min-width:auto,
      and a date input's intrinsic minimum is wider than a 360px column — that
      was what pushed the card past the viewport and clipped the right edge.
   2. Every control resolves to one height (--control-h) and one horizontal
      padding, so labels, inputs, selects, date fields and the button all sit
      on the same left and right edge.
   3. WebKit's date control is normalised: without this its value is inset and
      vertically centred by the shadow DOM, which is why the date fields read
      as misaligned next to the text inputs even when the boxes lined up.
   --------------------------------------------------------------------- */

.finder {
	display: grid;
	gap: 10px;
	background: var(--tfs-surface);
	color: var(--tfs-text-primary);
	padding: 12px;
	border-radius: var(--r-card);
	box-shadow: var(--shadow-md);
	min-width: 0;
	max-width: 100%;
}
.finder > * { min-width: 0; }
.finder-bar { box-shadow: none; border: 1px solid var(--tfs-border); }

.finder-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.finder-field label, .filter label, .field label {
	font-size: .72rem; font-weight: 650; color: var(--tfs-text-secondary);
	text-transform: uppercase; letter-spacing: .05em;
	padding-inline: 2px;
}

.finder input, .finder select,
.filter input, .filter select,
.field input, .field select, .field textarea {
	font: inherit; font-size: 1rem;
	color: var(--tfs-text-primary); background: var(--tfs-surface);
	border: 1px solid var(--tfs-border); border-radius: var(--r-input);
	padding: 0 12px;
	width: 100%; max-width: 100%; min-width: 0;
	height: var(--control-h); min-height: var(--control-h);
}
.field textarea { padding: 12px; height: auto; min-height: 88px; line-height: 1.5; }

.finder input::placeholder, .filter input::placeholder, .field input::placeholder,
.field textarea::placeholder { color: var(--tfs-text-secondary); opacity: 1; }

/* Native date and number controls, normalised so they measure and align like
   every other field rather than like a browser widget. */
.finder input[type="date"], .filter input[type="date"], .field input[type="date"] {
	-webkit-appearance: none; appearance: none;
}
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
input[type="date"]::-webkit-calendar-picker-indicator { margin: 0; opacity: .55; }
input[type="date"]::-webkit-inner-spin-button { display: none; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

.finder select, .filter select, .field select, .sort-form select {
	appearance: none; -webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236B746F' stroke-width='1.6' d='m1 2 5 4.5L11 2'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center;
	padding-right: 34px;
	text-overflow: ellipsis;
}

.finder input:focus-visible, .finder select:focus-visible,
.filter input:focus-visible, .filter select:focus-visible,
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
	border-color: var(--tfs-primary);
	outline: 2px solid rgba(15,76,69,.22); outline-offset: 0;
}

/* The submit is a control in the same column, so it takes the same height and
   the same edges. It is coral because running the search is a revenue action. */
.finder-go { height: var(--control-h); min-height: var(--control-h); width: 100%; }

.finder-note, .hero-note { font-size: .84rem; line-height: 1.45; }

/* Phones: one column, so left and right edges are identical by construction.
   From 380px the two dates pair up — they are the one natural pair, and the
   row still sits flush with every full-width field above and below it. */
@media (min-width: 380px) and (max-width: 559px) {
	.finder { grid-template-columns: 1fr 1fr; }
	.finder > * { grid-column: 1 / -1; }
	.finder-in, .finder-out { grid-column: auto; }
}

@media (min-width: 560px) {
	.finder { grid-template-columns: 1fr 1fr; }
	.finder-go { grid-column: 1 / -1; }
}
@media (min-width: 1040px) {
	.finder { grid-template-columns: 1.25fr .95fr .95fr .7fr 1.1fr auto; align-items: end; gap: 12px; }
	.finder-go { grid-column: auto; width: auto; padding-inline: 22px; }
}

/* --- Trust strip -------------------------------------------------------- */

.trust { border-bottom: 1px solid var(--tfs-border); background: var(--tfs-surface); }
.trust-grid { display: grid; gap: 2px 24px; grid-template-columns: repeat(2, 1fr); padding-block: 20px; }
@media (min-width: 900px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }
.trust-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; }
.trust-item svg { flex: none; color: var(--tfs-primary); margin-top: 2px; }
.trust-item b { display: block; font-size: .95rem; font-weight: 650; }
.trust-item span { display: block; font-size: .83rem; color: var(--tfs-text-secondary); line-height: 1.4; }

/* --- Discovery chips ---------------------------------------------------- */

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 719px) {
	.chip-row.scroller {
		flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
		margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px;
		-webkit-overflow-scrolling: touch; scrollbar-width: none;
	}
	.chip-row.scroller::-webkit-scrollbar { display: none; }
	.chip-row.scroller > li { scroll-snap-align: start; flex: none; }
}
.chip-link {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 9px 14px; border: 1px solid var(--tfs-border); border-radius: 999px;
	background: var(--tfs-surface); color: var(--tfs-text-primary); text-decoration: none;
	font-size: .9rem; font-weight: 600; white-space: nowrap;
}
.chip-link:hover { border-color: var(--tfs-primary); background: var(--tfs-primary-quiet); color: var(--tfs-primary-dark); }

/* --- Property card ------------------------------------------------------ */

.grid { display: grid; gap: 26px 20px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.card-media {
	display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden;
	background: var(--tfs-background); border-radius: var(--r-img);
}
.card-media .stay-photo { width: 100%; height: 100%; object-fit: cover; }
.stay-photo-empty { display: block; width: 100%; height: 100%; background: var(--tfs-border); }

.card-flag {
	position: absolute; left: 10px; top: 10px; z-index: 2;
	display: inline-flex; align-items: center; gap: 5px;
	background: rgba(255,255,255,.95); color: var(--tfs-primary-dark);
	font-size: .73rem; font-weight: 700;
	padding: 5px 9px; border-radius: var(--r-badge);
	box-shadow: var(--shadow-sm);
}
/* Verification is a marketplace status, so it carries the gold accent that
   every premium signal on the site uses. One badge colour, not nine. */
.card-flag svg { color: var(--tfs-gold); flex: none; }

.card-save {
	position: absolute; top: 8px; right: 8px; z-index: 3;
	width: 38px; height: 38px; display: grid; place-items: center;
	background: rgba(255,255,255,.94); color: var(--tfs-text-primary);
	border: 0; border-radius: 50%; cursor: pointer;
	box-shadow: var(--shadow-sm);
}
.card-save:hover { background: var(--tfs-on-dark); }
.card-save[aria-pressed="true"] { color: var(--tfs-error); }
.card-save[aria-pressed="true"] svg path { fill: currentColor; stroke: currentColor; }

.card-body { padding: 11px 0 0; display: flex; flex-direction: column; gap: 2px; }
.card-title { font-size: 1.04rem; font-weight: 650; margin: 0; line-height: 1.3; }
.card-title a { color: var(--tfs-text-primary); text-decoration: none; }
.card-title a:hover { color: var(--tfs-primary-dark); }
.card-place { font-size: .875rem; color: var(--tfs-text-secondary); margin: 0; }
.card-cap { font-size: .875rem; color: var(--tfs-text-primary); margin: 3px 0 0; }
.card-facts { font-size: .84rem; color: var(--tfs-text-secondary); margin: 0; }
.card-price { margin: 7px 0 0; font-size: .85rem; color: var(--tfs-text-secondary); display: flex; flex-wrap: wrap; gap: 2px 14px; }
.card-price .num { font-size: 1.02rem; color: var(--tfs-primary-dark); }
.card-verify { display: flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--tfs-primary-dark); margin: 7px 0 0; font-weight: 600; }
.card-verify svg { color: var(--tfs-gold); flex: none; }
.card-more { font-size: .86rem; font-weight: 600; margin: 8px 0 0; color: var(--tfs-primary); }
.card { background: transparent; }
.card-media { box-shadow: var(--shadow-sm); }

.card-hit { position: absolute; inset: 0; z-index: 1; }
.card-save, .card-title a { position: relative; z-index: 2; }

/* A separator, not decoration: it needs to be legible next to the text it splits. */
.dot { color: var(--tfs-text-secondary); padding-inline: 3px; }

/* One badge treatment. Premium status is gold; everything else is neutral.
   Deliberately not a different colour per badge type. */
.badge {
	display: inline-flex; align-items: center; gap: 5px; flex: none;
	font-size: .78rem; font-weight: 650; color: var(--tfs-primary-dark);
	background: var(--tfs-background); border: 1px solid var(--tfs-border);
	padding: 5px 10px; border-radius: var(--r-badge);
}
.badge svg { color: var(--tfs-primary); flex: none; }
.badge-gold { background: var(--tfs-gold-quiet); border-color: #E3D3B4; color: #6E5520; }
.badge-gold svg { color: var(--tfs-gold); }

/* --- Occasion and location tiles --------------------------------------- */

.tile-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 720px) { .tile-grid { grid-template-columns: repeat(3, 1fr); } }
/* Capped columns rather than a fixed six, so three occasions do not stretch into
   three enormous tiles and eight do not shrink into stamps. */
@media (min-width: 1020px) { .tile-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 200px)); justify-content: start; gap: 16px; } }

.tile { display: block; text-decoration: none; color: var(--tfs-text-primary); }
.tile-media {
	position: relative; aspect-ratio: 3 / 2; overflow: hidden;
	border-radius: var(--r-img); background: var(--tfs-border);
}
.tile-media img { width: 100%; height: 100%; object-fit: cover; }
.tile-media::after { content: ''; position: absolute; inset: 0; background: rgba(18,61,58,.16); }
.tile:hover .tile-media::after { background: rgba(18,61,58,.04); }
.tile-name { display: block; font-weight: 650; font-size: .96rem; margin-top: 8px; line-height: 1.25; }
.tile-meta { display: block; font-size: .81rem; color: var(--tfs-text-secondary); }

.area-list { display: grid; gap: 0 32px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 700px) { .area-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .area-list { grid-template-columns: repeat(3, 1fr); } }
.area-list a {
	display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
	padding: 14px 0; border-bottom: 1px solid var(--tfs-border);
	text-decoration: none; color: var(--tfs-text-primary);
}
.area-list a:hover .area-name { color: var(--tfs-primary-dark); text-decoration: underline; }
.area-name { font-weight: 650; font-size: 1rem; }
.area-meta { font-size: .82rem; color: var(--tfs-text-secondary); text-align: right; white-space: nowrap; }

/* --- Find one for me / lead forms -------------------------------------- */

.finder-block { background: var(--tfs-background); border-block: 1px solid var(--tfs-border); }
.finder-block-inner { display: grid; gap: 26px; padding-block: clamp(34px, 5vw, 56px); }
@media (min-width: 940px) { .finder-block-inner { grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: start; } }
.finder-block h2 { margin-bottom: .3em; }
.finder-block p { color: var(--tfs-text-secondary); max-width: 46ch; }

.lead-form { background: var(--tfs-surface); border: 1px solid var(--tfs-border); border-radius: var(--r-card); padding: 20px; }
.lead-grid { display: grid; gap: 12px; }
@media (min-width: 620px) { .lead-grid { grid-template-columns: repeat(2, 1fr); } }
.lead-grid .span-2 { grid-column: 1 / -1; }
.lead-form .field { margin-bottom: 0; }
.lead-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.lead-fine { font-size: .82rem; color: var(--tfs-text-secondary); margin: 10px 0 0; }

/* --- Owner CTA ---------------------------------------------------------- */

.owner-cta { border-top: 1px solid var(--tfs-border); background: var(--tfs-surface); }
.owner-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding-block: 28px; }
.owner-inner h2 { font-size: 1.22rem; margin: 0 0 2px; }
.owner-inner p { margin: 0; color: var(--tfs-text-secondary); font-size: .93rem; max-width: 54ch; }
.owner-text { flex: 1 1 340px; }

/* --- Page heads --------------------------------------------------------- */

.page-head { background: var(--tfs-background); border-bottom: 1px solid var(--tfs-border); padding-block: 20px 26px; }
.page-head h1 { margin-bottom: .18em; }
.page-lede { max-width: 68ch; color: var(--tfs-text-secondary); font-size: .97rem; }
.page-head .finder { margin-top: 16px; }

.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 12px; padding: 0; font-size: .8rem; color: var(--tfs-text-secondary); }
.crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--tfs-border); }
.crumbs a { color: var(--tfs-text-secondary); text-decoration: none; }
.crumbs a:hover { color: var(--tfs-primary-dark); text-decoration: underline; }
/* The current page is a span, never a link. It is also the item most likely
   to be long, so it is allowed to wrap rather than forcing a scroll. */
.crumbs [aria-current="page"] { color: var(--tfs-text-primary); font-weight: 600; }
.crumbs li { min-width: 0; }

/* --- Listing ------------------------------------------------------------ */

.listing { display: grid; gap: 26px; padding-block: 22px 56px; }
@media (min-width: 1000px) { .listing { grid-template-columns: 264px 1fr; gap: 40px; align-items: start; } }

.listing-bar {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin-bottom: 16px; flex-wrap: wrap;
}
.listing-count { margin: 0; font-size: 1.06rem; font-weight: 650; }
.listing-count span { font-weight: 400; color: var(--tfs-text-secondary); font-size: .88rem; display: block; }
.listing-tools { display: flex; align-items: center; gap: 10px; }
.sort-form { display: flex; align-items: center; gap: 8px; }
.sort-form label { font-size: .82rem; color: var(--tfs-text-secondary); }
.sort-form select {
	font: inherit; font-size: .9rem; padding: 8px 30px 8px 10px; min-height: 40px;
	border: 1px solid var(--tfs-border); border-radius: var(--r-input); background-color: var(--tfs-surface); color: var(--tfs-text-primary);
}

.filter-open { display: inline-flex; }
@media (min-width: 1000px) { .filter-open { display: none; } }

/* --- Filters, and the mobile drawer they live in ----------------------- */

.listing-side { min-width: 0; }
@media (max-width: 999px) {
	.listing-side[data-drawer] {
		position: fixed; inset: 0; z-index: 60;
		background: rgba(28,43,42,.45);
		display: flex; align-items: flex-end;
	}
	.listing-side[data-drawer][hidden] { display: none; }
	.listing-side[data-drawer] .filters {
		width: 100%; max-height: 88vh; overflow-y: auto;
		border-radius: var(--r-card) var(--r-card) 0 0; border-bottom: 0;
		padding-bottom: calc(18px + env(safe-area-inset-bottom));
		animation: sheet-up .18s ease-out;
	}
}
@keyframes sheet-up { from { transform: translateY(16px); } to { transform: translateY(0); } }

.filters { border: 1px solid var(--tfs-border); border-radius: var(--r-card); padding: 16px; background: var(--tfs-surface); }
.filters-head { display: none; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 12px; }
.filters-head h2 { margin: 0; font-size: 1.1rem; }
@media (max-width: 999px) {
	.listing-side[data-drawer] .filters-head { display: flex; position: sticky; top: 0; background: var(--tfs-surface); padding-block: 6px 10px; z-index: 2; }
}
.filter-close { border: 0; background: none; padding: 8px; cursor: pointer; color: var(--tfs-text-secondary); line-height: 0; }

.filters-row { display: grid; gap: 12px; }
@media (min-width: 620px) and (max-width: 999px) { .filters-row { grid-template-columns: repeat(2, 1fr); } }
.filter { display: flex; flex-direction: column; gap: 4px; }

.filter-features { border: 0; border-top: 1px solid var(--tfs-border); margin: 16px 0 0; padding: 14px 0 0; }
.filter-features legend { font-size: .74rem; font-weight: 650; color: var(--tfs-text-secondary); padding: 0; text-transform: uppercase; letter-spacing: .05em; }
.feature-grid { display: grid; gap: 2px; margin-top: 6px; }
@media (min-width: 620px) and (max-width: 999px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
.feature-check { display: flex; align-items: center; gap: 9px; font-size: .92rem; cursor: pointer; min-height: 40px; }
.feature-check input { width: 18px; height: 18px; accent-color: var(--tfs-primary); flex: none; }

.filters-actions {
	display: flex; align-items: center; gap: 14px; margin-top: 16px;
	padding-top: 14px; border-top: 1px solid var(--tfs-border);
}
@media (max-width: 999px) { .filters-actions .btn { flex: 1 1 auto; } }

/* --- Pagination and empty state ---------------------------------------- */

.pagination { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 40px; }
.pagination .page-numbers {
	min-width: 42px; padding: 10px 12px; text-align: center;
	border: 1px solid var(--tfs-border); border-radius: var(--r-input);
	color: var(--tfs-text-primary); text-decoration: none; font-variant-numeric: tabular-nums;
}
.pagination .current { background: var(--tfs-primary); color: var(--tfs-on-dark); border-color: var(--tfs-primary); }
.pagination .dots { border-color: transparent; }

.empty { max-width: 58ch; padding: 30px 0; }
.empty h2 { margin-bottom: .35em; }
.empty-alt { margin-top: 16px; font-size: .9rem; }

/* --- Property page ------------------------------------------------------ */

.stay-top { padding-top: 18px; }
.stay-headline { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.stay-headline h1 { margin-bottom: .15em; }
.stay-place { color: var(--tfs-text-secondary); font-size: .95rem; margin: 0 0 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.stay-place .drive { color: var(--tfs-text-primary); font-weight: 600; }
.ref {
	display: inline-block; font-size: .76rem; color: var(--tfs-text-secondary);
	font-variant-numeric: tabular-nums;
	border: 1px solid var(--tfs-border); border-radius: var(--r-badge); padding: 2px 8px;
}

/* Gallery: one dominant image on desktop, a swipeable rail on phones. */
.gallery { position: relative; margin-bottom: 4px; }
.gallery-grid { display: grid; gap: 8px; grid-template-columns: 1fr; }
.gallery figure { margin: 0; }
.gallery-lead { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-img); background: var(--tfs-background); }
.gallery-lead .g-img { width: 100%; height: 100%; object-fit: cover; }
.g-empty { display: block; width: 100%; height: 100%; background: var(--tfs-border); }
.gallery-rest { display: none; }
.gallery-scroll { display: none; }

@media (max-width: 899px) {
	.gallery-scroll {
		display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch; margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter); scrollbar-width: none;
	}
	.gallery-scroll::-webkit-scrollbar { display: none; }
	.gallery-scroll figure {
		flex: 0 0 88%; scroll-snap-align: center; margin: 0;
		aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-img); background: var(--tfs-background);
	}
	.gallery-scroll img { width: 100%; height: 100%; object-fit: cover; }
	.gallery-grid { display: none; }
}
@media (min-width: 900px) {
	.gallery-grid { grid-template-columns: 1.6fr 1fr; align-items: stretch; }
	/* The supporting grid fills the lead image's height rather than leaving a
	   dead strip below it, which is where the "View all photos" button sits. */
	.gallery-rest { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 8px; }
	.gallery-rest figure { overflow: hidden; border-radius: var(--r-img); background: var(--tfs-background); min-height: 0; }
	.gallery-rest .g-img { width: 100%; height: 100%; object-fit: cover; }
}
.gallery-count {
	position: absolute; right: 12px; bottom: 12px; z-index: 2;
	display: inline-flex; align-items: center; gap: 6px;
	background: rgba(255,255,255,.95); color: var(--tfs-text-primary);
	border: 1px solid var(--tfs-border); border-radius: var(--r-btn);
	padding: 8px 12px; font-size: .85rem; font-weight: 650; text-decoration: none;
}
.gallery-count:hover { background: var(--tfs-on-dark); color: var(--tfs-primary-dark); }

.stay-body { display: grid; gap: 30px; padding-block: 24px 52px; }
@media (min-width: 1000px) { .stay-body { grid-template-columns: 1fr 348px; gap: 52px; align-items: start; } }
.stay-main { min-width: 0; }

.glance {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 12px;
	border: 1px solid var(--tfs-border); border-radius: var(--r-card);
	padding: 16px 18px; margin-bottom: 18px;
}
@media (min-width: 640px) { .glance { grid-template-columns: repeat(4, 1fr); } }
.glance-item { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.glance-figure { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.7rem); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.glance-label { font-size: .82rem; color: var(--tfs-text-secondary); line-height: 1.3; }

.amenity-strip { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 26px; padding: 0; }
.amenity-strip li {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--tfs-surface); color: var(--tfs-text-primary);
	border: 1px solid var(--tfs-border);
	border-radius: var(--r-badge); padding: 6px 11px; font-size: .86rem; font-weight: 600;
}
.amenity-strip svg { flex: none; color: var(--tfs-primary); }

.stay-section { margin-bottom: 32px; scroll-margin-top: calc(var(--head-h) + 12px); }
.stay-section h2 { margin-bottom: .5em; }
.stay-section > p:last-child { margin-bottom: 0; }

.highlights, .rules { list-style: none; margin: 0; padding: 0; }
.highlights { display: grid; gap: 9px 26px; }
@media (min-width: 700px) { .highlights { grid-template-columns: repeat(2, 1fr); } }
.highlights li, .rules li { position: relative; padding-left: 26px; margin: 0; max-width: 64ch; line-height: 1.5; }
.rules li { margin-bottom: 9px; }
.highlights li::before {
	content: ''; position: absolute; left: 0; top: .22em;
	width: 17px; height: 17px; border-radius: 50%;
	background: var(--tfs-primary-quiet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%230F4C45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m2 6.3 2.6 2.6L10 3.4'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.rules li::before { content: ''; position: absolute; left: 6px; top: .62em; width: 5px; height: 5px; background: var(--tfs-text-secondary); border-radius: 50%; }

.features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; }
@media (min-width: 640px) { .features { grid-template-columns: repeat(3, 1fr); } }
.features li { display: flex; align-items: center; gap: 9px; font-size: .93rem; }
.features li svg { flex: none; color: var(--tfs-primary); }
.features li[hidden] { display: none; }
.features-more { margin-top: 14px; }

.prose p, .prose li { max-width: 68ch; }
.prose h2, .prose h3 { margin-top: 1.4em; }

.price-table { border: 1px solid var(--tfs-border); border-radius: var(--r-card); overflow: hidden; margin: 0 0 14px; }
.price-table dl { margin: 0; }
.price-row {
	display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
	padding: 12px 16px; border-bottom: 1px solid var(--tfs-border);
}
.price-row:last-child { border-bottom: 0; }
.price-row dt { color: var(--tfs-text-secondary); font-size: .92rem; }
.price-row dd { margin: 0; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.price-note { font-size: .88rem; color: var(--tfs-text-secondary); max-width: 64ch; margin-bottom: .45em; }
.price-caveat { color: var(--tfs-text-secondary); font-size: .85rem; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 12px; padding: 0; }
.chip {
	display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto;
	border: 1px solid var(--tfs-border); border-radius: var(--r-input);
	padding: 8px 11px; background: var(--tfs-surface); min-width: 0;
}
.chip-label { font-size: .73rem; color: var(--tfs-text-secondary); }
.chip-value { font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }

.photo-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 700px) { .photo-strip { grid-template-columns: repeat(4, 1fr); } }
.photo-strip figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-img); background: var(--tfs-background); }
.photo-strip img { width: 100%; height: 100%; object-fit: cover; }

.where-grid { display: grid; gap: 0; border: 1px solid var(--tfs-border); border-radius: var(--r-card); overflow: hidden; margin: 0; }
@media (min-width: 620px) { .where-grid { grid-template-columns: repeat(2, 1fr); } }
.where-item { padding: 13px 16px; border-top: 1px solid var(--tfs-border); }
.where-item:first-child { border-top: 0; }
@media (min-width: 620px) {
	.where-item:nth-child(odd) { border-right: 1px solid var(--tfs-border); }
	.where-item:nth-child(2) { border-top: 0; }
}
.where-item dt { font-size: .76rem; color: var(--tfs-text-secondary); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.where-item dd { margin: 0; font-weight: 600; }

/* --- Enquiry rail ------------------------------------------------------- */

.stay-rail { position: static; min-width: 0; }
@media (min-width: 1000px) { .stay-rail { position: sticky; top: calc(var(--head-h) + 16px); } }

.ask { border: 1px solid var(--tfs-border); border-radius: var(--r-card); background: var(--tfs-surface); padding: 18px; box-shadow: var(--shadow-sm); }
.ask-price { margin: 0 0 14px; font-size: .85rem; color: var(--tfs-text-secondary); }
.ask-price strong { display: block; font-size: 1.6rem; font-weight: 700; color: var(--tfs-text-primary); font-variant-numeric: tabular-nums; line-height: 1.15; }
.ask-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
/* Date inputs carry a wide intrinsic minimum; without this they push the rail
   a few pixels past the viewport at 360px. */
.ask-fields .field { margin: 0; min-width: 0; }
.ask-fields input { min-width: 0; }
.ask-fields .span-2 { grid-column: 1 / -1; }
.ask .btn { margin-bottom: 9px; }
.ask-promise { font-size: .83rem; color: var(--tfs-text-secondary); margin: 2px 0 12px; }
.ask-fine { font-size: .81rem; color: var(--tfs-text-secondary); margin: 12px 0 0; line-height: 1.45; }
.ask-assure { display: flex; gap: 8px; align-items: flex-start; font-size: .85rem; color: var(--tfs-text-secondary); margin: 0 0 12px; }
.ask-assure svg { flex: none; color: var(--tfs-primary); margin-top: 2px; }

/* --- Mobile sticky bar --------------------------------------------------
   Price on the left, the two contact controls on the right. Both controls are
   real 48px targets with their own visible treatment, so neither can render as
   an empty square: the Call control is a teal-outlined button and WhatsApp is
   the coral conversion. Labels drop below 380px; the glyphs never do.
   --------------------------------------------------------------------- */

.sticky-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
	display: flex; align-items: center; gap: 10px;
	padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom));
	background: var(--tfs-surface); border-top: 1px solid var(--tfs-border);
	box-shadow: 0 -4px 16px -12px rgba(28,43,42,.5);
}
.sticky-bar[hidden] { display: none; }

.sticky-price { margin-right: auto; line-height: 1.2; min-width: 0; }
.sticky-price strong {
	display: block; font-size: 1.05rem; font-weight: 700;
	font-variant-numeric: tabular-nums; color: var(--tfs-primary-dark);
	white-space: nowrap;
}
.sticky-price span { display: block; font-size: .74rem; color: var(--tfs-text-secondary); }

.sticky-acts { display: flex; align-items: center; gap: 8px; flex: none; }

.sticky-act {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	min-height: 48px; height: 48px; min-width: 48px;
	padding-inline: 14px;
	border: 1px solid transparent; border-radius: var(--r-btn);
	font: inherit; font-size: .93rem; font-weight: 650; line-height: 1;
	text-decoration: none; white-space: nowrap;
	transition: background-color .12s linear, border-color .12s linear, color .12s linear;
}
.sticky-act > svg { flex: none; height: auto; }

.sticky-call { background: var(--tfs-surface); color: var(--tfs-primary); border-color: var(--tfs-primary); }
.sticky-call:hover, .sticky-call:active { background: var(--tfs-primary-quiet); color: var(--tfs-primary-dark); }

.sticky-wa { background: var(--tfs-primary); color: var(--tfs-on-dark); border-color: var(--tfs-primary); }
.sticky-wa:hover, .sticky-wa:active { background: var(--tfs-primary-dark); border-color: var(--tfs-primary-dark); color: var(--tfs-on-dark); }

/* Narrow devices: the Call label goes, the target does not. WhatsApp keeps its
   word for as long as there is room for it, which is what the brief asked. */
@media (max-width: 379px) {
	.sticky-bar { gap: 8px; padding-inline: 12px; }
	.sticky-act { padding-inline: 0; width: 48px; }
	.sticky-act .sticky-label { display: none; }
	.sticky-price strong { font-size: .98rem; }
}
@media (min-width: 380px) and (max-width: 429px) {
	.sticky-call { padding-inline: 0; width: 48px; }
	.sticky-call .sticky-label { display: none; }
}

@media (min-width: 1000px) { .sticky-bar { display: none !important; } }

/**
 * Reserving room for the sticky bar — 1.4.1.
 *
 * What was wrong: the reservation was `body { padding-bottom: 76px }`. The
 * footer is the last flex child of body, so body's own padding rendered BELOW
 * the footer — 76px of ivory page background under the dark footer, which is
 * the blank strip seen at the bottom of every property page. The number was
 * wrong as well: the bar is 8 + 48 + 8 = 64px plus the home-indicator inset,
 * so on a notched iPhone it was simultaneously showing a gap and covering the
 * last line of the footer.
 *
 * The fix puts the reservation inside the footer instead. The footer's own dark
 * background grows to sit behind the bar, so the document still ends at the
 * footer — no blank strip — while the bar covers padding rather than content.
 * The height is declared once, from the bar's real measurements.
 */
:root { --sticky-h: 64px; }

body.has-sticky .site-foot {
	padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom) + 8px);
}

/* Pages with a sticky bar but no footer below the fold still need the last
   content clear of it — the small print sits directly above the bar. */
body.has-sticky .foot-base { margin-bottom: 0; }

@media (min-width: 1000px) {
	body.has-sticky .site-foot { padding-bottom: 0; }
}

/* --- Forms -------------------------------------------------------------- */

.callback { margin-top: 14px; }
.callback-row { display: grid; gap: 12px; }
@media (min-width: 620px) { .callback-row { grid-template-columns: 1.2fr 1fr .7fr; } }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.hp { position: absolute; left: -9999px; }
.callback-fine { font-size: .82rem; color: var(--tfs-text-secondary); margin-top: 10px; }
.callback-done {
	border: 1px solid var(--tfs-success); background: var(--tfs-success-bg);
	border-radius: var(--r-input); padding: 14px 16px; margin: 0; font-weight: 600; color: var(--tfs-success);
}
.callback-error {
	border: 1px solid var(--tfs-border); background: var(--tfs-error-bg); border-radius: var(--r-input);
	padding: 12px 14px; margin: 0 0 16px; color: var(--tfs-error);
}
.callback-or { margin: 30px 0 56px; padding-top: 22px; border-top: 1px solid var(--tfs-border); }
.page-body { padding-block: 30px 60px; }

/* --- Shortlist ---------------------------------------------------------- */

.shortlist-page { padding-block: 28px 60px; max-width: 780px; }
.shortlist-items { list-style: none; margin: 0 0 24px; padding: 0; }
.shortlist-items li {
	display: flex; align-items: center; gap: 14px;
	padding: 12px 0; border-bottom: 1px solid var(--tfs-border);
}
.shortlist-items img { width: 84px; height: 63px; object-fit: cover; border-radius: var(--r-img); flex: none; background: var(--tfs-background); }
.shortlist-body { flex: 1; min-width: 0; }
.shortlist-body a { font-weight: 650; color: var(--tfs-text-primary); text-decoration: none; }
.shortlist-body a:hover { color: var(--tfs-primary-dark); }
.shortlist-body span { display: block; font-size: .8rem; color: var(--tfs-text-secondary); font-variant-numeric: tabular-nums; }
.shortlist-remove { background: none; border: 0; color: var(--tfs-text-secondary); cursor: pointer; font-size: .85rem; text-decoration: underline; padding: 6px; }
.shortlist-note { font-size: .86rem; color: var(--tfs-text-secondary); margin: 12px 0; }
.shortlist-actions .btn { margin-bottom: 8px; }

.similar { background: var(--tfs-background); border-top: 1px solid var(--tfs-border); padding-block: 40px 52px; }

/* --- Footer ------------------------------------------------------------- */

.site-foot { background: var(--tfs-primary-dark); color: var(--tfs-on-dark-soft); padding-block: 42px 0; margin-top: auto; }
.site-foot .foot-col + .foot-col { }
.foot-grid { display: grid; gap: 28px; }
@media (min-width: 620px) { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 30px; } }
.foot-name { font-size: 1.18rem; font-weight: 750; color: var(--tfs-on-dark); margin: 0 0 .35em; letter-spacing: -0.02em; }
.foot-line { max-width: 34ch; font-size: .92rem; margin-bottom: .8em; }
.foot-hours { font-size: .87rem; margin: 0 0 .5em; }
.foot-phone { margin: 0 0 10px; }
.foot-phone a { color: var(--tfs-on-dark); font-weight: 650; font-size: 1.02rem; text-decoration: none; }
.foot-phone a:hover { text-decoration: underline; }
.foot-head { font-size: .76rem; font-weight: 700; color: var(--tfs-on-dark); margin-bottom: 1em; text-transform: uppercase; letter-spacing: .07em; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: 6px; font-size: .9rem; }
/* Padded so each row clears the 24px minimum tap target on a phone. */
.site-foot a { color: var(--tfs-on-dark); text-decoration: none; display: inline-block; padding-block: 4px; }
.site-foot a:hover { color: var(--tfs-on-dark); text-decoration: underline; }
.foot-social { display: flex; gap: 10px; margin-top: 12px; }
.foot-social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border: 1px solid var(--tfs-primary); border-radius: var(--r-btn); color: var(--tfs-on-dark);
}
.foot-social a:hover { background: rgba(255,255,255,.1); }
.foot-base { border-top: 1px solid var(--tfs-primary); margin-top: 34px; padding-block: 16px 24px; }
.foot-base p { font-size: .8rem; color: var(--tfs-on-dark-soft); margin: 0; max-width: 76ch; }

/* --- Ratings and stars --------------------------------------------------
   Gold is the site's premium signal, so every star on every surface is the
   same gold and the same shape. An unfilled star is a beige outline rather
   than a grey one, so a 3-star rating still sits inside the warm palette.
   ------------------------------------------------------------------------ */

.stars { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
.star { flex: none; }
.star-on   { fill: var(--tfs-gold); }
.star-half { fill: var(--tfs-gold); opacity: .55; }
.star-off  { fill: var(--tfs-border); }

.rating-inline {
	display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
	margin: 0 0 8px; text-decoration: none; color: var(--tfs-text-primary);
	font-size: .92rem;
}
.rating-inline:hover { color: var(--tfs-primary-dark); }
.rating-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.rating-count { color: var(--tfs-text-secondary); text-decoration: underline; text-underline-offset: 3px; }

.rating-compact {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: .84rem; color: var(--tfs-text-primary); margin: 2px 0 0;
}
.rating-compact svg { color: var(--tfs-gold); flex: none; }
.rating-compact b { font-variant-numeric: tabular-nums; }
.rating-compact span { color: var(--tfs-text-secondary); }

/* --- Badges -------------------------------------------------------------
   One treatment, two tones. Premium and verification status is gold-family;
   everything else is a neutral beige chip. Deliberately not a different
   colour per badge — that is how a marketplace starts looking like a sale.
   ------------------------------------------------------------------------ */

.badge-row { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.badge-row-sm { margin-top: 7px; }
.badge-row-sm .badge { font-size: .72rem; padding: 3px 8px; }
.card-flag-gold { color: #6E5520; }
.card-flag-gold svg { color: var(--tfs-gold); }

/* --- Property reviews --------------------------------------------------- */

.reviews { scroll-margin-top: calc(var(--head-h) + 12px); }

.review-summary {
	display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
	background: var(--tfs-surface); border: 1px solid var(--tfs-border);
	border-radius: var(--r-card); padding: 18px 20px; margin-bottom: 20px;
}
.review-score { display: flex; flex-direction: column; line-height: 1; }
.review-avg { font-size: 2.6rem; font-weight: 700; color: var(--tfs-primary-dark); font-variant-numeric: tabular-nums; }
.review-outof { font-size: .78rem; color: var(--tfs-text-secondary); margin-top: 4px; }
.review-score-meta p { margin: 6px 0 0; font-size: .9rem; color: var(--tfs-text-secondary); }

.review-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .review-list { grid-template-columns: repeat(2, 1fr); } }

.review {
	background: var(--tfs-surface); border: 1px solid var(--tfs-border);
	border-radius: var(--r-card); padding: 16px 18px;
}
.review-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.review-name { font-weight: 650; color: var(--tfs-text-primary); }
.review-body { margin: 0 0 8px; color: var(--tfs-text-primary); line-height: 1.55; }
.review-meta { margin: 0; font-size: .8rem; color: var(--tfs-text-secondary); }

/* The write form is closed by default: it is useful, but it is not what most
   visitors came for, and an open form pushes the next property off the screen. */
.review-write { border: 1px solid var(--tfs-border); border-radius: var(--r-card); background: var(--tfs-surface); }
.review-write > summary {
	display: flex; align-items: center; gap: 8px;
	padding: 14px 18px; cursor: pointer; font-weight: 650; color: var(--tfs-primary);
	list-style: none;
}
.review-write > summary::-webkit-details-marker { display: none; }
.review-write > summary:hover { color: var(--tfs-primary-dark); }
.review-write[open] > summary { border-bottom: 1px solid var(--tfs-border); }
.review-write .lead-form { border: 0; border-radius: 0; }
.review-intro { font-size: .88rem; color: var(--tfs-text-secondary); margin: 0 0 16px; max-width: 60ch; }

.field-label { font-size: .74rem; font-weight: 650; color: var(--tfs-text-secondary); text-transform: uppercase; letter-spacing: .05em; padding-inline: 2px; }
.field-hint { font-size: .8rem; color: var(--tfs-text-secondary); }

/* Star input: five radios in reverse DOM order, so the CSS sibling selector
   can light up the chosen star and everything before it. Works as five
   labelled radios with CSS off, which is why it is not a JS widget. */
.star-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; margin-top: 4px; }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input label { cursor: pointer; padding: 3px; line-height: 0; color: var(--tfs-border); }
.star-input label svg { fill: currentColor; }
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label { color: var(--tfs-gold); }
.star-input input:focus-visible + label { outline: 2px solid var(--tfs-primary); outline-offset: 2px; border-radius: 4px; }

/* --- Homepage testimonials ---------------------------------------------- */

.tfs-reviews { background: var(--tfs-background); }
.tfs-reviews-agg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 0; font-size: .93rem; color: var(--tfs-text-secondary); }
.tfs-reviews-agg strong { color: var(--tfs-primary-dark); font-size: 1.1rem; font-variant-numeric: tabular-nums; }

.testimonials { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .testimonials { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .testimonials { grid-template-columns: repeat(3, 1fr); } }
.testimonial {
	background: var(--tfs-surface); border: 1px solid var(--tfs-border);
	border-radius: var(--r-card); padding: 18px 20px;
}
.testimonial-body { margin: 10px 0 12px; line-height: 1.55; }
.testimonial-meta { margin: 0; font-size: .82rem; color: var(--tfs-text-secondary); }
.testimonial-name { font-weight: 650; color: var(--tfs-text-primary); }

/* --- Certifications ----------------------------------------------------- */

.cert-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.cert-row-home { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--tfs-border); }
.cert-row-partner { margin-top: 14px; }
.cert-row-footer { margin: 14px 0 4px; }

.cert { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.cert-logo { width: auto; max-height: 44px; flex: none; }
.cert-text { display: flex; flex-direction: column; line-height: 1.25; }
.cert-text strong { font-size: .88rem; font-weight: 650; color: var(--tfs-primary-dark); }
.cert-number { font-size: .74rem; color: var(--tfs-text-secondary); font-variant-numeric: tabular-nums; }
.cert-footer .cert-text strong { color: var(--tfs-on-dark); }
.cert-footer .cert-number { color: var(--tfs-on-dark-soft); }
.cert-footer .cert-logo { max-height: 38px; }
a.cert:hover .cert-text strong { color: var(--tfs-gold); }

/* --- Booking modes and rooms -------------------------------------------- */

.modes { scroll-margin-top: calc(var(--head-h) + 12px); }
.mode-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .mode-grid { grid-template-columns: repeat(2, 1fr); } }

.mode-card {
	display: flex; flex-direction: column; gap: 3px;
	background: var(--tfs-surface); border: 1px solid var(--tfs-border);
	border-radius: var(--r-card); padding: 16px 18px;
	text-decoration: none; color: var(--tfs-text-primary);
}
.mode-card:hover { border-color: var(--tfs-primary); }
.mode-name { font-weight: 650; color: var(--tfs-primary-dark); }
.mode-price { font-size: 1.18rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tfs-primary-dark); }
.mode-note { font-size: .84rem; color: var(--tfs-text-secondary); }

.room-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.room {
	display: grid; gap: 14px; align-items: start;
	background: var(--tfs-surface); border: 1px solid var(--tfs-border);
	border-radius: var(--r-card); padding: 14px;
}
@media (min-width: 700px) { .room { grid-template-columns: 240px 1fr 190px; } }
.room-media { border-radius: var(--r-img); overflow: hidden; aspect-ratio: 4 / 3; background: var(--tfs-background); }
.room-media img { width: 100%; height: 100%; object-fit: cover; }
.room-name { margin: 0 0 4px; font-size: 1.05rem; }
.room-facts { margin: 0 0 8px; font-size: .86rem; color: var(--tfs-text-secondary); }
.room-desc { margin: 0 0 8px; font-size: .92rem; }
.room-amenities { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.room-amenities li {
	font-size: .78rem; color: var(--tfs-text-secondary);
	border: 1px solid var(--tfs-border); border-radius: var(--r-badge); padding: 3px 8px;
}
.room-buy { min-width: 0; }
.room-price { margin: 0 0 10px; font-size: .8rem; color: var(--tfs-text-secondary); display: flex; flex-direction: column; }
.room-price .num { font-size: 1.16rem; color: var(--tfs-primary-dark); }
.room-price .room-price-alt { margin-top: 6px; }

.card-rooms { display: flex; align-items: center; gap: 5px; margin: 5px 0 0; font-size: .84rem; color: var(--tfs-text-secondary); }
.card-rooms svg { color: var(--tfs-primary); flex: none; }
.card-rooms .num { color: var(--tfs-primary-dark); }

.ask-rooms { margin: -6px 0 12px; font-size: .86rem; color: var(--tfs-text-secondary); }
.ask-rooms strong { color: var(--tfs-primary-dark); font-variant-numeric: tabular-nums; }

/* --- Partner landing page -----------------------------------------------
   Its own layout, not the guest homepage's. One audience, one action, and no
   property search anywhere on the page.
   ------------------------------------------------------------------------ */

.partner-hero { position: relative; background: var(--tfs-primary-dark); color: var(--tfs-on-dark); }
.partner-hero .hero-media { position: absolute; inset: 0; overflow: hidden; }
.partner-hero .hero-media::after { content: ''; position: absolute; inset: 0; background: rgba(18,61,58,.62); }
.partner-hero .hero-img { width: 100%; height: 100%; object-fit: cover; }
.partner-hero-inner { position: relative; padding-block: clamp(28px, 5vw, 64px) clamp(28px, 4vw, 52px); }
.partner-hero .crumbs a, .partner-hero .crumbs li, .partner-hero .crumbs span { color: var(--tfs-on-dark-soft); }
.partner-hero .crumbs a:hover { color: var(--tfs-on-dark); }
.partner-hero .hero-title { max-width: 16ch; }
.partner-hero .hero-note { color: var(--tfs-on-dark-soft); }

.partner-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.partner-actions .btn-outline {
	background: transparent; color: var(--tfs-on-dark); border-color: rgba(255,255,255,.5);
}
.partner-actions .btn-outline:hover { background: rgba(255,255,255,.12); color: var(--tfs-on-dark); border-color: var(--tfs-on-dark); }

.partner-body { display: grid; gap: 32px; padding-block: clamp(28px, 4vw, 48px); }
@media (min-width: 1000px) { .partner-body { grid-template-columns: 1fr 400px; gap: 48px; align-items: start; } }
.partner-main { min-width: 0; }
.partner-section { margin-bottom: 34px; }
.partner-section:last-child { margin-bottom: 0; }
.partner-section h2 { margin-bottom: .55em; }
.partner-section .muted { font-size: .9rem; max-width: 64ch; }

.who-grid { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .who-grid { grid-template-columns: repeat(3, 1fr); } }
.who-grid li {
	background: var(--tfs-surface); border: 1px solid var(--tfs-border);
	border-radius: var(--r-card); padding: 14px 16px;
}
.who-grid svg { color: var(--tfs-primary); margin-bottom: 6px; }
.who-grid b { display: block; font-size: .95rem; color: var(--tfs-primary-dark); }
.who-grid span { display: block; font-size: .82rem; color: var(--tfs-text-secondary); line-height: 1.4; }

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(2, 1fr); } }
.steps li { counter-increment: step; position: relative; padding-left: 44px; }
.steps li::before {
	content: counter(step);
	position: absolute; left: 0; top: 0;
	width: 30px; height: 30px; display: grid; place-items: center;
	background: var(--tfs-primary); color: var(--tfs-on-dark);
	border-radius: 50%; font-size: .92rem; font-weight: 700;
}
.steps b { display: block; color: var(--tfs-primary-dark); }
.steps span { display: block; font-size: .88rem; color: var(--tfs-text-secondary); line-height: 1.45; }

.partner-form-rail { min-width: 0; }
@media (min-width: 1000px) { .partner-form-rail { position: sticky; top: calc(var(--head-h) + 16px); } }
.partner-form { box-shadow: var(--shadow-md); scroll-margin-top: calc(var(--head-h) + 16px); }
.partner-form h2 { font-size: 1.24rem; margin-bottom: .25em; }
.partner-form-lede { font-size: .88rem; color: var(--tfs-text-secondary); margin-bottom: 16px; }
.partner-form .field { margin-bottom: 12px; }
.partner-form .btn-block { margin-top: 4px; }
.partner-form-alt { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--tfs-border); }
.partner-form-alt .btn { margin-bottom: 8px; }
.partner-form-alt p.muted { font-size: .86rem; margin-bottom: 10px; }

.partner-copy { padding-block: 0 40px; }
.partner-close { background: var(--tfs-primary-dark); color: var(--tfs-on-dark); text-align: center; padding-block: clamp(34px, 5vw, 54px); }
.partner-close h2 { color: var(--tfs-on-dark); margin-bottom: .3em; }
.partner-close p { color: var(--tfs-on-dark-soft); margin-bottom: 20px; }

/* --- Motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- Progressive disclosure — 1.4.0 -------------------------------------
   The complete text is always in the HTML. These rules only affect how much
   of it is painted, and they only take effect once the script has added
   .is-collapsed — so with JavaScript off, or before it runs, everything is
   visible and nothing shifts.

   The clamp heights are generous on purpose. The brief is progressive
   disclosure, not a teaser: about five lines on a phone, one to two short
   paragraphs on a desktop, at the section's normal type size. Typography is
   not shrunk to fit more in.
   --------------------------------------------------------------------- */

.expandable { position: relative; }

.expandable-body > *:first-child { margin-top: 0; }
.expandable-body > *:last-child  { margin-bottom: 0; }

.expandable.is-collapsed .expandable-body {
	overflow: hidden;
	/* The fade tells a reader there is more, without a hard cut mid-word. */
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 42px), transparent 100%);
	        mask-image: linear-gradient(to bottom, #000 calc(100% - 42px), transparent 100%);
}

/* Mobile first: roughly 4–5 lines at the body line-height. */
.expandable-short.is-collapsed  .expandable-body { max-height: 7.4em; }
.expandable-medium.is-collapsed .expandable-body { max-height: 9.2em; }
.expandable-tall.is-collapsed   .expandable-body { max-height: 14em; }

/* Desktop shows more before asking — one to two short paragraphs. */
@media (min-width: 760px) {
	.expandable-short.is-collapsed  .expandable-body { max-height: 9em; }
	.expandable-medium.is-collapsed .expandable-body { max-height: 15em; }
	.expandable-tall.is-collapsed   .expandable-body { max-height: 22em; }
}

.expandable-toggle {
	display: inline-flex; align-items: center; gap: 6px;
	margin-top: 10px; padding: 8px 0; min-height: 44px;
	background: none; border: 0; cursor: pointer;
	font: inherit; font-size: .93rem; font-weight: 650;
	color: var(--tfs-primary); text-decoration: underline; text-underline-offset: 3px;
}
.expandable-toggle:hover { color: var(--tfs-primary-dark); }
.expandable-toggle::after {
	content: ''; width: 8px; height: 8px; flex: none;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .15s linear;
}
.expandable-toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }

/* Readable body copy in a collapsed region: this is a reading surface, and the
   width and rhythm matter more here than anywhere else on the page. */
.stay-section.prose .expandable-body { max-width: 68ch; line-height: 1.7; }
.stay-section.prose .expandable-body p { margin: 0 0 1em; }

/* --- Reviews archive and the homepage review link — 1.4.0 --------------- */

.tfs-reviews-more { margin: 20px 0 0; }
.tfs-reviews-more .btn { display: inline-flex; }

.reviews-page { max-width: 1000px; }
.reviews-head { margin-bottom: 26px; }
.reviews-head h1 { margin: 0 0 8px; }
.reviews-intro { color: var(--tfs-text-secondary); max-width: 62ch; margin: 10px 0 0; }
.reviews-list { margin-top: 22px; }
.reviews-count { margin: 16px 0 0; font-size: .86rem; color: var(--tfs-text-secondary); }
.reviews-empty { color: var(--tfs-text-secondary); padding: 30px 0; }

.testimonial .expandable-body { margin: 10px 0 0; line-height: 1.6; }
.testimonial .expandable-toggle { margin-top: 6px; min-height: 40px; font-size: .88rem; }
.testimonial-meta a { color: var(--tfs-text-secondary); }
.testimonial-meta a:hover { color: var(--tfs-primary-dark); }

/* Pagination. Real links, real tap targets, server-rendered. */
.pager { margin: 28px 0 0; }
.pager ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.pager a, .pager span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; min-height: 44px; padding: 0 12px;
	border: 1px solid var(--tfs-border); border-radius: var(--r-btn);
	background: var(--tfs-surface); color: var(--tfs-text-primary);
	text-decoration: none; font-size: .92rem; font-weight: 600;
}
.pager a:hover { border-color: var(--tfs-primary); color: var(--tfs-primary-dark); }
.pager .current { background: var(--tfs-primary); border-color: var(--tfs-primary); color: var(--tfs-on-dark); }
.pager .dots { border-color: transparent; background: none; min-width: 24px; padding: 0 4px; }

/* ===========================================================================
   1.4.3 — specification compliance pass
   =========================================================================== */

/* --- Quick filters, above the results and labelled as filters ----------- */

.quick-filters {
	display: flex; align-items: center; gap: 12px;
	margin: 0 0 20px; padding-bottom: 2px;
}
.quick-filters-label {
	flex: none; font-size: .8rem; font-weight: 700; letter-spacing: .04em;
	text-transform: uppercase; color: var(--tfs-text-secondary);
}
.quick-filters .chip-row { margin: 0; }
@media (max-width: 719px) {
	.quick-filters { display: block; }
	.quick-filters-label { display: block; margin-bottom: 8px; }
}

/* A section's own closing action, below the results it belongs to. */
.section-foot { margin: 26px 0 0; text-align: center; }
.section-foot .btn { display: inline-flex; }
@media (min-width: 720px) { .section-foot { text-align: left; } }

/* --- Occasions: four tiles ---------------------------------------------- */

@media (min-width: 720px) { .tile-grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* --- Events at The Farm Stays ------------------------------------------- */

.event-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px)  { .event-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (min-width: 1020px) { .event-grid { grid-template-columns: repeat(6, 1fr); } }
.event-grid a {
	display: block; border-radius: var(--r-img); overflow: hidden;
	background: var(--tfs-border); aspect-ratio: 4 / 3;
}
.event-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.event-grid a:hover img { transform: scale(1.04); }

/* --- Property page: compact pricing facts ------------------------------- */

.price-meta { margin: 16px 0 0; display: grid; gap: 0; }
.price-meta-row {
	display: grid; grid-template-columns: 1fr; gap: 2px;
	padding: 11px 0; border-bottom: 1px solid var(--tfs-border);
}
.price-meta-row:last-child { border-bottom: 0; padding-bottom: 0; }
.price-meta dt { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tfs-text-secondary); margin: 0; }
.price-meta dd { margin: 0; font-size: .95rem; }
@media (min-width: 620px) {
	.price-meta-row { grid-template-columns: 168px 1fr; gap: 16px; align-items: baseline; }
	.price-meta dt { padding-top: 1px; }
}

/* --- Save control beside the property title ----------------------------- */

.stay-save {
	display: inline-flex; align-items: center; gap: 7px;
	min-height: 44px; padding: 0 14px; flex: none;
	background: var(--tfs-surface); border: 1px solid var(--tfs-border);
	border-radius: var(--r-btn); cursor: pointer;
	font: inherit; font-size: .9rem; font-weight: 600; color: var(--tfs-text-primary);
}
.stay-save:hover { border-color: var(--tfs-primary); color: var(--tfs-primary-dark); }
.stay-save svg { flex: none; }
.stay-save[aria-pressed="true"] { border-color: var(--tfs-cta); color: var(--tfs-cta); }
.stay-save[aria-pressed="true"] svg { fill: var(--tfs-cta); }

/* --- Location note, said once ------------------------------------------- */

.location-note {
	margin: 14px 0 0; font-size: .88rem; color: var(--tfs-text-secondary);
	padding-left: 12px; border-left: 2px solid var(--tfs-border);
}

/* --- Reviews empty state ------------------------------------------------ */

.reviews-none { margin: 0 0 18px; color: var(--tfs-text-secondary); font-size: .95rem; }
.reviews-none a { font-weight: 650; }

/* --- Callback: a prompt, with the form behind it ------------------------ */

.callback-prompt {
	margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--tfs-border);
	font-size: .95rem; color: var(--tfs-text-secondary);
}
.callback-prompt .link-plain { font-size: inherit; }
.drawer[hidden] { display: none; }

/* --- The desktop enquiry rail is a DESKTOP rail -------------------------
   Below 1000px it used to stack under the page as a second, taller copy of
   the sticky bar's job: price, dates, guests, WhatsApp, Call, shortlist and
   fine print, all of it a scroll below controls already fixed to the screen.
   The sticky bar is the mobile conversion surface, so the rail steps aside. */

@media (max-width: 999px) { .stay-rail { display: none; } }

/* --- Footer: compact on a phone, unchanged on a desktop ----------------- */

details.foot-col > summary {
	list-style: none; cursor: pointer;
	display: flex; align-items: center; justify-content: space-between;
	min-height: 48px;
}
details.foot-col > summary::-webkit-details-marker { display: none; }

@media (max-width: 719px) {
	.foot-grid { gap: 0; }
	details.foot-col {
		border-top: 1px solid rgba(255, 255, 255, .14);
		padding: 0;
	}
	details.foot-col > summary { padding-block: 4px; margin: 0; }
	/* A chevron drawn in CSS, so the accordion costs no icon and no script. */
	details.foot-col > summary::after {
		content: ''; width: 9px; height: 9px; flex: none; margin-left: 12px;
		border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translate(-3px, -3px);
		transition: transform .15s linear;
	}
	details.foot-col[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
	details.foot-col > ul, details.foot-col > div > ul, details.foot-col ul { padding-bottom: 10px; }
	.foot-brand { margin-bottom: 18px; }
	.foot-line { display: none; }
	.site-foot { padding-block: 28px 0; }
}

@media (min-width: 720px) {
	/* Desktop: always open, no affordance, exactly as before. */
	details.foot-col > summary { cursor: default; pointer-events: none; }
	details.foot-col > summary::after { display: none; }
}

.foot-legal {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px;
	margin-bottom: 10px; font-size: .86rem;
}
.foot-legal a { color: var(--tfs-on-dark); text-decoration: none; padding-block: 6px; }
.foot-legal a:hover { text-decoration: underline; }
.foot-legal .dot { color: var(--tfs-on-dark-soft); opacity: .5; padding: 0 4px; }
.foot-copy { font-size: .84rem; }

/* --- Full-screen photo viewer ------------------------------------------
   One gallery system. This is built by script from the data the gallery
   already carries, so there is no second set of <img> tags in the page. */

.pv {
	position: fixed; inset: 0; z-index: 200;
	background: rgba(18, 61, 58, .97);
	display: flex; flex-direction: column;
	padding-bottom: env(safe-area-inset-bottom);
}
.pv[hidden] { display: none; }
.pv-bar {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 12px 16px; color: var(--tfs-on-dark); flex: none;
	padding-top: calc(12px + env(safe-area-inset-top));
}
.pv-count { font-size: .9rem; font-variant-numeric: tabular-nums; color: var(--tfs-on-dark-soft); }
.pv-title { font-weight: 650; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-close {
	background: none; border: 0; color: var(--tfs-on-dark); cursor: pointer;
	width: 44px; height: 44px; display: grid; place-items: center; flex: none;
	font-size: 1.6rem; line-height: 1; border-radius: 50%;
}
.pv-close:hover { background: rgba(255, 255, 255, .12); }
.pv-stage { flex: 1; position: relative; display: grid; place-items: center; min-height: 0; padding: 0 8px; }
.pv-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.pv-nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
	background: rgba(0, 0, 0, .45); color: #fff; font-size: 1.5rem; line-height: 1;
	display: grid; place-items: center;
}
.pv-nav:hover { background: rgba(0, 0, 0, .68); }
.pv-prev { left: 10px; }
.pv-next { right: 10px; }
.pv-thumbs {
	display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px;
	flex: none; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.pv-thumbs::-webkit-scrollbar { display: none; }
.pv-thumbs button {
	flex: none; width: 74px; height: 56px; padding: 0; cursor: pointer;
	border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: none;
}
.pv-thumbs button[aria-current="true"] { border-color: var(--tfs-gold); }
.pv-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 719px) { .pv-thumbs { display: none; } .pv-nav { width: 42px; height: 42px; } }

body.pv-open { overflow: hidden; }

/* --- Similar farmhouses: swipe on a phone, a row on a desktop ----------- */

@media (max-width: 719px) {
	.similar-grid {
		display: flex; gap: 12px;
		overflow-x: auto; scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch; scrollbar-width: none;
		/* Bleed to the screen edge so the next card peeks and the row reads
		   as scrollable without a scrollbar or an instruction. */
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
		padding-bottom: 4px;
	}
	.similar-grid::-webkit-scrollbar { display: none; }
	.similar-grid > .card { flex: 0 0 78%; scroll-snap-align: start; }
}
@media (min-width: 720px)  { .similar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .similar-grid { grid-template-columns: repeat(4, 1fr); } }

/* TFS refresh: compact mobile-first discovery */
.tfs-mobile-search>summary{display:none}
@media(max-width:767px){
 .hero-inner{padding-top:24px;padding-bottom:26px}
 .hero-title{font-size:clamp(1.65rem,7vw,2.3rem)}
 .hero-sub{font-size:.92rem;line-height:1.45}
 .tfs-mobile-search{width:100%;margin-top:14px}
 .tfs-mobile-search>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;background:white;color:#17332c;border:1px solid #dedbd1;border-radius:16px;padding:17px 18px;font-weight:700;box-shadow:0 5px 18px rgba(0,0,0,.09);cursor:pointer}
 .tfs-mobile-search>summary::-webkit-details-marker{display:none}
 .tfs-mobile-search[open]>summary{border-radius:16px 16px 0 0}
 .tfs-mobile-search .finder{margin-top:0;border-radius:0 0 16px 16px;max-height:65vh;overflow-y:auto}
 .card{overflow:hidden;border-radius:24px}
 .card-media{aspect-ratio:1.5}
 .card-title{line-height:1.3}
}

.tfs-moments-scroll{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;padding:8px 2px 15px}
.tfs-moment{flex:0 0 102px;scroll-snap-align:start;border:0;background:transparent;cursor:pointer;display:flex;flex-direction:column;gap:8px;align-items:center;font:inherit;color:inherit;text-align:center}
.tfs-moment-ring{width:92px;height:92px;padding:4px;border:2px solid #c9a15e;border-radius:50%}.tfs-moment-ring img{width:100%;height:100%;object-fit:cover;border-radius:50%}.tfs-moment>span:last-child{font-size:.8rem;line-height:1.25}
.tfs-moment-viewer:not([hidden]){position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:35px 16px}
.tfs-moment-stage{height:min(80vh,850px);max-width:min(450px,100%);width:100%;display:flex;align-items:center;justify-content:center}.tfs-moment-stage img,.tfs-moment-stage video{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
.tfs-moment-close{position:absolute;right:20px;top:12px;border:0;background:transparent;color:white;font-size:40px;cursor:pointer}.tfs-moment-visit{color:#fff;margin-top:15px;font-weight:700}
/* Premium listing cards: balanced sizes without changing existing semantics. */
.grid>.card{background:#fff;border:1px solid #e8e3da;border-radius:24px;overflow:hidden;box-shadow:0 2px 12px rgba(24,35,30,.045);transition:transform .18s ease,box-shadow .18s ease}
@media(hover:hover){.grid>.card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(24,35,30,.1)}}
.grid>.card .card-media{border-radius:0;aspect-ratio:1.5;box-shadow:none}
.grid>.card .card-body{padding:15px 18px 18px;flex:1}
.grid>.card .card-title{font-size:1.14rem;line-height:1.3}
.grid>.card .card-price{margin-top:auto;padding-top:13px;border-top:1px solid #eee8df}
.grid>.card .card-price .num{font-size:1.34rem;font-weight:750}
.grid>.card .card-flag{left:14px;top:14px;background:white;border:1px solid #e5d1a5;border-radius:100px;padding:8px 12px;color:#825f2d}
.grid>.card .card-save{top:12px;right:12px;width:42px;height:42px}
/* Equal-height review cards, expandable by the already supported review controls. */
.testimonials>*,.review-list>*{min-width:0;height:100%}
.testimonial,.review-list .review{height:100%;display:flex;flex-direction:column}
.testimonial-meta,.review-meta{margin-top:auto}
@media(prefers-reduced-motion:reduce){.grid>.card{transition:none}}

/* Staging hotfix: show full discovery on desktop, compact on mobile. */
.tfs-desktop-search{display:block}
.tfs-mobile-search{display:none}
@media(max-width:767px){
 .tfs-desktop-search{display:none}
 .tfs-mobile-search{display:block}
 .hero-inner{padding-top:28px;padding-bottom:30px}
 .hero{min-height:0}
}