/* Five Keys Design System — round three — components v3.10. Classes start with f-. See DESIGN.md section 7. */

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (max-width:820px){html{scrollbar-width:none}html::-webkit-scrollbar{display:none}} /* 3.31: no page scroll bar at phone and tablet widths; wide desktop keeps it */
body{margin:0;background:var(--f-white);color:var(--f-ink-2);font-family:var(--f-sans);font-weight:300;font-size:var(--f-body);line-height:1.75;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0;border-radius:0;margin:0}
:focus-visible{outline:2px solid var(--f-fg);outline-offset:3px}
::selection{background:var(--f-sand)}

/* ---------- type ---------- */
.f-display{font-family:var(--f-serif);font-weight:300;font-size:var(--f-display);line-height:1.05;letter-spacing:-.01em;color:var(--f-fg);text-wrap:balance}
.f-display i,.f-display em{font-style:italic;font-weight:300}
.f-statement-text{font-family:var(--f-serif);font-weight:300;font-size:var(--f-statement);line-height:1.2;color:var(--f-fg);text-wrap:pretty;max-width:40ch}
.f-statement-text--col{font-size:var(--f-title);max-width:none} /* 3.8: the statement beside a photo, title size */
.f-title{font-family:var(--f-serif);font-weight:300;font-size:var(--f-title);line-height:1.15;color:var(--f-fg);text-wrap:balance;max-width:560px}
.f-title i,.f-title em{font-style:italic;display:block}
.f-title-2{font-family:var(--f-serif);font-weight:400;font-size:var(--f-title-2);line-height:1.2;color:var(--f-fg);text-wrap:balance}
.f-numeral{font-family:var(--f-serif);font-weight:300;font-style:italic;font-size:var(--f-numeral);line-height:1;color:var(--f-fg)}
.f-lead{font-size:var(--f-lead);line-height:1.6;font-weight:300;color:var(--f-fg-2);max-width:48ch;text-wrap:pretty}
.f-body{font-size:var(--f-body);line-height:1.75;color:var(--f-fg-2);max-width:var(--f-measure);text-wrap:pretty}
.f-body+.f-body{margin-top:var(--f-s3)}
.f-small{font-size:var(--f-small);line-height:1.55;font-weight:400;color:var(--f-fg-2)}
.f-eyebrow{font-size:var(--f-eyebrow);line-height:1.4;font-weight:400;color:var(--f-fg-3)} /* 3.7: not used on pages; the component sheet keeps it for its own section labels */
.f-label{font-size:var(--f-label);line-height:1.2;font-weight:500;letter-spacing:var(--f-track);text-transform:uppercase;color:var(--f-fg)}
.f-title+.f-lead,.f-title+.f-body,.f-title-2+.f-body{margin-top:var(--f-s4)}
.f-lead+.f-body{margin-top:var(--f-s3)}

/* ---------- layout ---------- */
.f-container{width:100%;max-width:var(--f-container);margin:0 auto;padding:0 var(--f-gutter)}
.f-col-text{max-width:var(--f-col-text)}
.f-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--f-gap)}
.f-section{background:var(--f-bg);color:var(--f-fg-2);padding:var(--f-section) 0}
.f-section--paper{--f-bg:var(--f-paper);--f-line:rgba(42,39,37,.18)}
.f-section--night{--f-bg:var(--f-night);--f-fg:var(--f-on-night);--f-fg-2:var(--f-on-night-2);--f-fg-3:var(--f-on-night-2);--f-line:var(--f-rule-night);--f-line-strong:rgba(244,240,232,.5);--f-btn-bg:var(--f-on-night);--f-btn-fg:var(--f-night)}
.f-section--rule{border-top:1px solid var(--f-line)}
.f-section--tight{padding-top:var(--f-s8)}
.f-section--quote{padding:calc(var(--f-section) * .75) 0} /* 3.6; unused since 3.8, the quote sits in the band */
.f-head{margin-bottom:var(--f-s7)}
.f-head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--f-s5)}
@media (max-width:640px){.f-head--row{flex-direction:column;align-items:flex-start;gap:var(--f-s4)}}
.f-rule{border:0;border-top:1px solid var(--f-line);margin:0}
.f-rule--short{width:56px;margin-bottom:var(--f-s4)}

/* ---------- buttons and links ---------- */
.f-btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 28px;border:1px solid var(--f-fg);color:var(--f-fg);background:transparent;font-size:var(--f-label);font-weight:500;letter-spacing:var(--f-track);text-transform:uppercase;line-height:1;cursor:pointer;white-space:nowrap;transition:background var(--f-fast) var(--f-ease),color var(--f-fast) var(--f-ease),border-color var(--f-fast) var(--f-ease)}
@media (hover:hover){.f-btn:hover{background:var(--f-fg);color:var(--f-bg)}} /* 3.37: every hover sits in (hover:hover), so a tap on a phone does not leave a button in its hover colours */
.f-btn--fill{background:var(--f-btn-bg);color:var(--f-btn-fg);border-color:var(--f-btn-bg)}
@media (hover:hover){.f-btn--fill:hover{background:transparent;color:var(--f-fg);border-color:var(--f-fg)}}
.f-btn--white{border-color:#fff;color:#fff}
@media (hover:hover){.f-btn--white:hover{background:#fff;color:var(--f-ink)}}
.f-btn--white-fill{background:#fff;color:var(--f-ink);border-color:#fff} /* 3.14: the hero primary, Book now */
@media (hover:hover){.f-btn--white-fill:hover{background:transparent;color:#fff;border-color:#fff}}
.f-btn--sm{height:44px;padding:0 22px}
.f-btn--wide{min-width:240px}
.f-actions{display:flex;gap:var(--f-s3);flex-wrap:wrap;align-items:center}
.f-link{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;font-size:var(--f-label);font-weight:500;letter-spacing:var(--f-track);text-transform:uppercase;color:var(--f-fg);line-height:1}
.f-link::before{content:"";width:40px;height:1px;background:currentColor;transition:width var(--f-fast) var(--f-ease)}
@media (hover:hover){.f-link:hover::before{width:56px}}
.f-link--white{color:#fff}
.f-link--inline{display:inline;font:inherit;letter-spacing:0;text-transform:none;color:var(--f-fg);border-bottom:1px solid var(--f-line-strong);padding-bottom:1px}
.f-link--inline::before{display:none}
@media (hover:hover){.f-link--inline:hover{border-color:var(--f-fg)}}

/* ---------- header (7.1; 3.28: 72px paper row, live-text wordmark; 3.17: one row, brand left, links right) ---------- */
.f-header{background:var(--f-paper);color:var(--f-ink);border-bottom:1px solid var(--f-rule)}
.f-header__row{display:flex;align-items:center;justify-content:space-between;gap:var(--f-s5);height:72px}
.f-header__brand{display:flex;align-items:center;gap:14px;flex-shrink:0;color:var(--f-ink)}
.f-header__mark{height:36px;width:auto}
.f-header__wordmark,.f-float__name{font-family:var(--f-serif);font-weight:600;font-size:24px;line-height:1;letter-spacing:.22em;text-transform:uppercase;transform:translateY(1px)} /* 3.28: text, not the PNG; "Holiday Homes" stays in the footer lockup */
.f-header__action{display:none}
.f-header__nav ul{display:flex;align-items:center;gap:40px}
.f-header__nav a{font-size:var(--f-label);font-weight:500;letter-spacing:var(--f-track);text-transform:uppercase;color:var(--f-ink-2);transition:color var(--f-fast) var(--f-ease)}
.f-header__nav a[aria-current]{color:var(--f-ink)}@media (hover:hover){.f-header__nav a:hover{color:var(--f-ink)}}
.f-header__menu{display:none}
/* 3.28: over the hero photograph (landing page only; the hero must be dark at the top, see 7.1) */
.f-header--over{position:absolute;top:0;left:0;right:0;z-index:2;background:transparent;border-bottom-color:rgba(253,252,250,.14)}
.f-header--over .f-header__brand{color:#fff}
.f-header--over .f-header__nav a{color:rgba(255,255,255,.82)}
.f-header--over .f-header__nav a[aria-current]{color:#fff}@media (hover:hover){.f-header--over .f-header__nav a:hover{color:#fff}}
.f-hero--under{--f-scrim:linear-gradient(to bottom, rgba(30,27,25,.42) 0%, rgba(30,27,25,.18) 120px, rgba(30,27,25,.44) 40%, rgba(30,27,25,.6) 100%)} /* 3.28: the veil is darker in the top 72px, under the header, then the 3.8 veil */
@media (max-width:820px){
  .f-header__row{display:grid;grid-template-columns:1fr auto;height:auto;gap:0 12px} /* brand left, menu right, as on desktop (3.17) */
  .f-header__brand{grid-column:1;grid-row:1;justify-self:start;height:72px;gap:12px}
  .f-header__mark{height:32px}
  .f-header__wordmark,.f-float__name{font-size:21px}
  .f-header__action{grid-column:2;grid-row:1;display:flex;justify-content:flex-end;align-items:center;height:72px}
  .f-header__menu{display:inline-flex;align-items:center;height:44px;padding:0 4px;border:0;background:none;font-size:var(--f-label);font-weight:500;letter-spacing:var(--f-track);text-transform:uppercase;color:var(--f-ink);cursor:pointer}
  .f-header__nav{grid-column:1 / -1;grid-row:2;display:none;border-top:1px solid var(--f-rule)}
  .f-header.is-open .f-header__nav{display:block}
  .f-header__nav ul{flex-direction:column;gap:0;align-items:stretch}
  .f-header__nav li{border-top:1px solid var(--f-rule)}
  .f-header__nav li:first-child{border-top:0}
  .f-header__nav a{display:block;padding:18px 0}
  /* 3.28: over the photo the Menu is white; the open list gets a night ground so the links read on any crop */
  .f-header--over .f-header__menu{color:#fff}
  .f-header--over.is-open{background:var(--f-night);border-bottom-color:var(--f-rule-night)}
  .f-header--over .f-header__nav,.f-header--over .f-header__nav li{border-top-color:var(--f-rule-night)}
  .f-header--over .f-header__nav a{color:rgba(244,240,232,.82)}
}

/* ---------- all photographs (7.38, 3.18) ---------- */
.f-photos{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--f-s3)}
.f-photos figure{aspect-ratio:3/2;background:var(--f-sand);overflow:hidden}
.f-photos img{width:100%;height:100%;object-fit:cover}
@media (max-width:1024px){.f-photos{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.f-photos{grid-template-columns:repeat(2,1fr)}}

/* ---------- floating bar (7.33, 3.14) ---------- */
.f-float{position:fixed;top:0;left:0;right:0;z-index:20;background:var(--f-paper);color:var(--f-ink);border-bottom:1px solid var(--f-rule);transform:translateY(-100%);visibility:hidden;transition:transform var(--f-fast) var(--f-ease),visibility 0s linear var(--f-fast)}
.f-float.is-visible,.is-float .f-float{transform:none;visibility:visible;transition:transform var(--f-fast) var(--f-ease),visibility 0s}
.f-float__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:64px}
.f-float__brand{display:inline-flex;align-items:center;justify-self:start}
.f-float__mark{height:36px;width:auto}
.f-float__name{display:none}
.f-float__nav{display:flex;gap:var(--f-s5);align-items:center}
.f-float__nav a{font-size:var(--f-label);font-weight:500;letter-spacing:var(--f-track);text-transform:uppercase;color:var(--f-ink-2);transition:color var(--f-fast) var(--f-ease)}
@media (hover:hover){.f-float__nav a:hover{color:var(--f-ink)}}
.f-float__action{display:flex;justify-content:flex-end}
.f-float__ask{display:inline-flex;align-items:center;gap:10px;height:40px;font-size:var(--f-label);font-weight:500;letter-spacing:var(--f-track);text-transform:uppercase;color:var(--f-ink);transition:color var(--f-fast) var(--f-ease)} /* 3.40: the WhatsApp glyph beside the word, no box, label style like the nav; until 3.39 a 40px filled .f-btn--sm "Ask on WhatsApp" (the user: "not the biggest fan of this button's design"; outlined, rule link, serif italic, glyph alone and underlined label were compared) */
@media (hover:hover){.f-float__ask:hover{color:var(--f-ink-2)}}
.f-float__glyph{display:block;width:18px;height:18px;flex:none}
.f-float__long{display:none}
.f-float.is-demo{position:static;transform:none;visibility:visible}
@media (max-width:820px){.f-float__row{grid-template-columns:auto 1fr;height:56px}.f-float__nav{display:none}.f-float__mark{height:32px}
  /* 3.33: on phone the action is the WhatsApp glyph alone, ink on paper like the mark at the left, flush right in a 40px tap area; 3.32 was a 40px ink circle, 3.21 the word alone */
  .f-float__brand{gap:12px;color:var(--f-ink)}.f-float__name{display:block} /* 3.34: "Five Keys" beside the mark, as in the phone header */
  .f-float__word{display:none}
  .f-float__glyph{display:block;width:26px;height:26px}
  .f-float__ask{width:40px;gap:0;justify-content:flex-end}}
@media (prefers-reduced-motion:reduce){.f-float{transition:none}}

/* ---------- hero ---------- */
.f-hero{position:relative;height:max(600px,100vh);height:max(600px,100svh);background:var(--f-paper);color:#fff;overflow:hidden;display:flex;align-items:center} /* 3.8: content centred vertically; 3.38: fills the screen on every width (was clamp(600px,88vh,820px)) */
.f-hero__media{position:absolute;inset:0}
.f-hero__media img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 900ms var(--f-ease)}
.f-hero__media.is-loaded img,.is-static .f-hero__media img{opacity:1}
.f-hero__media::after{content:"";position:absolute;inset:0;background:var(--f-scrim)}
.f-hero__content{position:relative;width:100%;text-align:center}
.f-hero__title{color:#fff;margin:0 auto;max-width:920px}
.f-hero__title span{display:block}
.f-hero__title .is-italic{font-style:italic}
.f-hero__action{margin-top:var(--f-s5);display:flex;justify-content:center;gap:var(--f-s3);flex-wrap:wrap} /* 3.14: Browse our homes and Book now */
.f-hero .f-load{opacity:0;transform:translateY(12px);transition:opacity 700ms var(--f-ease),transform 700ms var(--f-ease)}
.f-hero .f-load:nth-child(2){transition-delay:200ms}
.f-hero .f-load:nth-child(3){transition-delay:400ms}
.f-hero.is-in .f-load,.is-static .f-hero .f-load{opacity:1;transform:none}
@media (max-width:640px){.f-hero{height:max(520px,100vh);height:max(520px,100svh)}.f-hero__title{max-width:340px}.f-hero__action{flex-direction:column;align-items:center}.f-hero__action .f-btn{width:100%;max-width:280px}} /* 3.30: the hero fills the phone screen; svh so it does not jump with the browser bar */
@media (prefers-reduced-motion:reduce){.f-hero__media img,.f-hero .f-load{transition:none;opacity:1;transform:none}}

/* ---------- statement ---------- */
.f-statement{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--f-gap)}
.f-statement__body{grid-column:1/11}
.f-statement__body::before{content:"";display:block;width:56px;height:1px;background:var(--f-line-strong);margin-bottom:var(--f-s4)}
@media (max-width:820px){.f-statement__body{grid-column:1/-1}}

/* ---------- keys ---------- */
.f-keys{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--f-line);border-bottom:1px solid var(--f-line)}
.f-keys__cell{padding:var(--f-s5) var(--f-s4) var(--f-s5) 0;border-left:1px solid var(--f-line);padding-left:var(--f-s4)}
.f-keys__cell:first-child{border-left:0;padding-left:0}
.f-keys__name{margin-top:var(--f-s3)}
.f-keys__line{margin-top:var(--f-s1);color:var(--f-fg-3)}
@media (max-width:820px){
  .f-keys{grid-template-columns:repeat(2,1fr);border-top:0}
  .f-keys__cell,.f-keys__cell:first-child{border-left:0;padding-left:0;border-top:1px solid var(--f-line)}
  .f-keys__cell:last-child{grid-column:1/-1}
}
@media (max-width:640px){
  .f-keys{grid-template-columns:1fr}
  .f-keys__cell{display:grid;grid-template-columns:56px 1fr;column-gap:var(--f-s3);padding:var(--f-s4) 0}
  .f-keys__cell .f-numeral{grid-row:1/3;padding-top:4px}
  .f-keys__name{margin-top:0}
}

/* ---------- meta row (7.16) ---------- */
.f-meta,.f-home__meta{display:flex;flex-wrap:wrap}
.f-meta>div,.f-home__meta>div{padding-right:var(--f-s4);margin-right:var(--f-s4);border-right:1px solid var(--f-line)}
.f-meta>div:last-child,.f-home__meta>div:last-child{border-right:0;margin-right:0;padding-right:0}
.f-meta .f-label,.f-home__meta .f-label{color:var(--f-fg-3)}
.f-meta .f-small,.f-home__meta .f-small{margin-top:6px;color:var(--f-fg)}
.f-num{font-variant-numeric:tabular-nums}
@media (max-width:640px){.f-meta{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:var(--f-s3) var(--f-s5)}.f-meta>div{border-right:0;margin-right:0;padding-right:0}.f-meta:has(>div:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- homes ---------- */
.f-homes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--f-gap)}
.f-home{display:flex;flex-direction:column;min-width:0;container-type:inline-size}
.f-home__media{position:relative;aspect-ratio:2/3;background:var(--f-sand);overflow:hidden}
.f-home__media img{width:100%;height:100%;object-fit:cover}
.f-home__tag{position:absolute;left:var(--f-s4);bottom:var(--f-s4);color:#fff;font-size:var(--f-label);font-weight:500;letter-spacing:var(--f-track);text-transform:uppercase}
.f-home__media::after{content:"";position:absolute;inset:0;background:var(--f-scrim);opacity:0;transition:opacity var(--f-fast) var(--f-ease)}
.f-home:has(.f-home__tag) .f-home__media::after{opacity:.7}
.f-home__name{margin-top:var(--f-s4)}
.f-home__area{margin-top:4px;color:var(--f-fg-3)}
.f-home__meta{margin-top:var(--f-s4);padding-top:var(--f-s3);border-top:1px solid var(--f-line)}
.f-home__link{margin-top:var(--f-s4)}
@media (max-width:820px){.f-homes{grid-template-columns:1fr}.f-home__media{aspect-ratio:3/2}} /* listing photos are 3:2; a portrait crop enlarged them */
@media (max-width:820px){ /* 3.20: stacked cards close with a ruled link row, 56px apart */
  .f-homes{row-gap:56px}
  .f-home__name,.f-home__meta{margin-top:var(--f-s3)}
  .f-home__link{margin-top:var(--f-s4);display:flex;justify-content:center;align-items:center;gap:12px;height:52px;padding:0;border:1px solid var(--f-ink)} /* 3.35: a full-width outlined button; the ruled row read as one more fact */
  .f-home__link::before{display:none}
  .f-home__link::after{content:"\2192"}
}
@media (max-width:640px){
  .f-home__meta{display:block;padding-top:0}
  .f-home__meta>div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--f-s3);padding:10px 0;margin-right:0;border-right:0;border-bottom:1px solid var(--f-line)}
  .f-home__meta .f-small{margin-top:0}
}
@container (max-width:340px){
  .f-home__meta{display:block;padding-top:0}
  .f-home__meta>div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--f-s3);padding:10px 0;margin-right:0;border-right:0;border-bottom:1px solid var(--f-line)}
  .f-home__meta .f-small{margin-top:0}
}

/* ---------- editorial ---------- */
.f-editorial{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--f-gap);align-items:start}
.f-editorial__media{grid-column:1/8;display:grid;grid-template-columns:8fr 4fr;gap:var(--f-gap);align-items:end}
.f-editorial__media figure{background:var(--f-sand)}
.f-editorial__media .is-tall{aspect-ratio:4/5}
.f-editorial__media .is-small{aspect-ratio:3/4;margin-bottom:var(--f-s8)}
.f-editorial__media img{width:100%;height:100%;object-fit:cover}
.f-editorial__body{grid-column:8/13;padding-top:var(--f-s8)}
.f-editorial--flip .f-editorial__media{grid-column:6/13;order:2}
.f-editorial--flip .f-editorial__body{grid-column:1/6;order:1}
.f-editorial__body .f-link,.f-editorial__body .f-btn{margin-top:var(--f-s5)}
.f-editorial__media--one{grid-template-columns:1fr} /* 3.8: one tall photo, no offset */
.f-editorial__mark{display:block;width:72px;height:auto;margin-bottom:var(--f-s5)} /* 3.10: the five-keys mark alone, above the statement */
.f-editorial--keys .f-statement-text::before{content:"";display:block;width:56px;height:1px;background:var(--f-line-strong);margin-bottom:var(--f-s4)} /* 3.8: the statement's hairline (3.10: on the statement, so the mark sits above it) */
.f-editorial--keys .f-statement-text+.f-title-2{margin-top:var(--f-s7)}
.f-editorial--keys{align-items:stretch}
.f-editorial--keys .f-editorial__media{align-items:stretch}
.f-editorial--keys .f-editorial__media .is-tall{aspect-ratio:auto;height:100%} /* 3.8: the photo runs the full height of the text column */
@media (max-width:820px){.f-editorial--keys .f-editorial__media .is-tall{aspect-ratio:4/5;height:auto}}
.f-editorial--keys .f-title-2+.f-list{margin-top:var(--f-s4)}
@media (max-width:820px){
  .f-editorial__media,.f-editorial--flip .f-editorial__media{grid-column:1/-1;order:1;grid-template-columns:1fr}
  .f-editorial__media .is-small{display:none}
  .f-editorial__body,.f-editorial--flip .f-editorial__body{grid-column:1/-1;order:2;padding-top:0}
}

/* ---------- ruled list ---------- */
.f-list{border-top:1px solid var(--f-line)}
.f-list li{display:grid;grid-template-columns:1fr 1fr;gap:var(--f-s4);align-items:baseline;padding:18px 0;border-bottom:1px solid var(--f-line)}
.f-list__name{font-family:var(--f-serif);font-weight:400;font-size:24px;line-height:1.2;color:var(--f-fg)}
.f-list__line{color:var(--f-fg-3)}
.f-list--cols{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--f-s7);border-top:0}
.f-list--keys li{grid-template-columns:48px 112px 1fr} /* 3.8: numbered, for the five keys; 3.9: fixed name column so the lines start aligned, 256px for the line at 1440 */
.f-list--keys .f-list__line{text-wrap:balance}
.f-list__num{font-family:var(--f-serif);font-style:italic;font-weight:300;font-size:28px;line-height:1;color:var(--f-fg);padding-top:2px}
.f-list--cols li{border-top:1px solid var(--f-line);border-bottom:0}
@media (max-width:640px){.f-list li{grid-template-columns:1fr}.f-list--cols{grid-template-columns:1fr}.f-list--keys li{grid-template-columns:40px 1fr}.f-list--keys .f-list__line{grid-column:2}}

/* ---------- band ---------- */
.f-band{position:relative}
.f-band__media{height:560px;background:var(--f-sand)}
.f-band__media img{width:100%;height:100%;object-fit:cover}
.f-band__panel{position:relative;margin-top:-160px;background:var(--f-white);padding:var(--f-s7) var(--f-s7) 0;max-width:640px}
.f-band__panel .f-title-2+.f-body{margin-top:var(--f-s3)}
.f-band__panel .f-actions{margin-top:var(--f-s5)}
.f-band--quote{padding-bottom:var(--f-s8)} /* 3.8: the guest quote in the band panel; unused since 3.23, the landing page shows the guides (7.39) */
.f-band--quote .f-quote{text-align:left;max-width:none;margin:0}
@media (max-width:820px){.f-band__media{height:360px}.f-band__panel{margin-top:0;padding:var(--f-s5) 0 0;max-width:none}}

/* ---------- quote ---------- */
.f-quote{text-align:center;max-width:720px;margin:0 auto}
.f-quote__text{font-family:var(--f-serif);font-style:italic;font-weight:300;font-size:34px;line-height:1.3;color:var(--f-fg);text-wrap:pretty}
.f-quote__name{margin-top:var(--f-s4);color:var(--f-fg-3)}
@media (max-width:640px){.f-quote__text{font-size:26px}}

/* ---------- stats ---------- */
.f-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--f-line)}
.f-stat{padding:var(--f-s5) var(--f-s4) 0 0}
.f-stat .f-label{margin-top:var(--f-s2);color:var(--f-fg-3)}
.f-stat--sans .f-numeral{font-family:var(--f-sans);font-style:normal;font-weight:400;font-size:40px;letter-spacing:-.01em}
@media (max-width:640px){.f-stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- forms ---------- */
.f-form{display:grid;grid-template-columns:1fr 1fr;gap:var(--f-s5) var(--f-gap)}
.f-form .is-full{grid-column:1/-1}
.f-field{display:flex;flex-direction:column}
.f-field .f-label{color:var(--f-fg-3)}
.f-field input,.f-field select,.f-field textarea{width:100%;height:48px;padding:0;border-bottom:1px solid var(--f-line-strong);color:var(--f-fg);font-size:var(--f-body);font-weight:300;transition:border-color var(--f-fast) var(--f-ease)}
.f-field textarea{height:auto;min-height:96px;padding:12px 0;resize:vertical;line-height:1.6}
.f-field select{appearance:none;-webkit-appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2357524D' stroke-width='1'/%3E%3C/svg%3E") no-repeat right center;padding-right:24px;cursor:pointer}
.f-field input::placeholder,.f-field textarea::placeholder{color:var(--f-fg-3)}
@media (hover:hover){.f-field input:hover,.f-field select:hover,.f-field textarea:hover{border-color:var(--f-fg)}}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{outline:0;border-color:var(--f-fg);border-bottom-width:2px}
.f-field__help{margin-top:8px;color:var(--f-fg-3)}
.f-form__foot{grid-column:1/-1;display:flex;align-items:center;gap:var(--f-s4);flex-wrap:wrap;margin-top:var(--f-s2)}
@media (max-width:640px){.f-form{grid-template-columns:1fr}}

/* ---------- enquiry ---------- */
.f-enquiry{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--f-gap)}
.f-enquiry__intro{grid-column:1/6}
.f-enquiry__form{grid-column:7/13}
.f-enquiry__intro .f-body{margin-top:var(--f-s4)}
.f-enquiry__side{grid-column:7/13} /* 3.15: WhatsApp in place of the form, journal pages */
.f-enquiry__side .f-actions{margin-top:var(--f-s5)}
.f-enquiry__help{margin-top:var(--f-s3);color:var(--f-fg-3)}
/* 3.22: the WhatsApp section is a night band with one display title and one button (the user, 7 Oct 2026: "keep it simpler", a better call to action; option J of eleven) */
.f-ask .f-enquiry{align-items:center}
.f-ask__title{font-size:min(var(--f-display),56px);max-width:none}
.f-ask__btn{height:56px;padding:0 32px}
.f-ask__glyph{margin-right:12px;flex-shrink:0}
.f-ask__note{margin-top:var(--f-s3);color:var(--f-fg-3)}
.f-footer{border-top:1px solid var(--f-rule-night)} /* 3.22: separates the footer from the night ask band */
@media (max-width:820px){.f-enquiry__intro,.f-enquiry__form,.f-enquiry__side{grid-column:1/-1}.f-ask__btn{width:100%}.f-ask .f-enquiry__side{margin-top:var(--f-s2)}}

/* ---------- footer ---------- */
.f-footer{background:var(--f-night);color:var(--f-on-night-2);--f-fg:var(--f-on-night);--f-fg-2:var(--f-on-night-2);--f-fg-3:var(--f-on-night-2);--f-line:var(--f-rule-night);padding:var(--f-s8) 0 var(--f-s5)}
.f-footer__top{display:grid;grid-template-columns:5fr 7fr;gap:var(--f-gap)}
.f-footer__brand{display:inline-flex;flex-direction:column;align-items:center;color:var(--f-on-night)} /* 3.29: the vertical lockup as the white mark and live text; it was logo-white-flat.png (3.10) */
.f-footer__mark{height:64px;width:auto}
.f-footer__name{margin-top:14px;font-family:var(--f-serif);font-weight:600;font-size:28px;line-height:1;letter-spacing:.22em;margin-right:-.22em;text-transform:uppercase}
.f-footer__sub{display:flex;align-items:center;align-self:stretch;gap:10px;margin-top:9px;font-family:var(--f-serif);font-weight:500;font-size:10px;line-height:1;letter-spacing:.32em;text-transform:uppercase;color:var(--f-on-night-2)}
.f-footer__sub::before,.f-footer__sub::after{content:"";flex:1;height:1px;background:currentColor;opacity:.6}
.f-footer__sub::after{margin-left:-.22em}
.f-footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--f-gap)}
.f-footer__cols .f-label{color:var(--f-on-night-2);margin-bottom:var(--f-s3)}
.f-footer__cols li{margin-top:10px}
.f-footer__cols a{color:var(--f-on-night);font-size:var(--f-small);font-weight:300;transition:color var(--f-fast) var(--f-ease)}
@media (hover:hover){.f-footer__cols a:hover{color:#fff}}
.f-footer__bottom{margin-top:var(--f-s8);padding-top:var(--f-s4);border-top:1px solid var(--f-gold);display:flex;justify-content:space-between;gap:var(--f-s4);flex-wrap:wrap;font-size:var(--f-small);color:var(--f-on-night-2)}
@media (max-width:820px){.f-footer__top{grid-template-columns:1fr}.f-footer__top>div:first-child{text-align:center} /* 3.36: the lockup centred on the page; it was centred on itself at the left */
  .f-footer__cols{grid-template-columns:1fr 1fr;gap:var(--f-s5) var(--f-gap);margin-top:var(--f-s6)} /* 3.29: Homes and Five Keys side by side, Reach us under both; it was one long column */
  .f-footer__cols>div:nth-child(3){grid-column:1 / -1}
  .f-footer__cols li{margin-top:0}.f-footer__cols a{display:inline-block;padding:7px 0}} /* 3.29: 34px tap rows */

/* ---------- crumbs (7.17) ---------- */
.f-crumbs{display:flex;flex-wrap:wrap;padding:var(--f-s4) 0;font-size:var(--f-small);font-weight:400;color:var(--f-fg-3)}
.f-crumbs li+li::before{content:"/";margin:0 12px}
.f-crumbs a{color:var(--f-fg-3);transition:color var(--f-fast) var(--f-ease)}
.f-crumbs [aria-current]{color:var(--f-fg)}@media (hover:hover){.f-crumbs a:hover{color:var(--f-fg)}}

/* ---------- property head (7.18) ---------- */
.f-prop-head{display:grid;grid-template-columns:7fr 5fr;gap:var(--f-gap);align-items:end;padding:var(--f-s6) 0 var(--f-s6)}
.f-prop-head .f-title{max-width:none}
.f-prop-head .f-meta{margin-top:var(--f-s4)}
.f-prop-head__side{display:flex;justify-content:flex-end;padding-bottom:6px}
@media (max-width:820px){.f-prop-head{grid-template-columns:1fr;padding-top:var(--f-s5)}.f-prop-head__side{justify-content:flex-start}}

/* ---------- gallery (7.19) ---------- */
.f-gallery{display:grid;grid-template-columns:8fr 4fr;grid-template-rows:1fr 1fr;gap:var(--f-gap);height:640px}
.f-gallery figure{background:var(--f-sand);overflow:hidden;min-height:0}
.f-gallery figure:first-child{grid-row:1/3}
.f-gallery img{width:100%;height:100%;object-fit:cover}
.f-gallery__foot{display:flex;justify-content:flex-end;align-items:baseline;gap:var(--f-s4);margin-top:var(--f-s3)} /* 3.25: only the link now, kept at the right */
.f-gallery__foot .f-small{color:var(--f-fg-3)}
@media (max-width:820px){
  .f-gallery{grid-template-columns:1fr;grid-template-rows:auto;height:auto}
  .f-gallery figure:first-child{grid-row:auto;aspect-ratio:4/5}
  .f-gallery figure:nth-child(n+2){display:none}
  .f-gallery__foot{flex-direction:column;align-items:flex-start;gap:var(--f-s3)}
}

/* ---------- property body (7.20) ---------- */
.f-prop{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--f-gap);align-items:start}
.f-prop__body{grid-column:1/8;min-width:0}
.f-prop__aside{grid-column:9/13;position:sticky;top:160px} /* 3.26: the 88px floating bar plus 72px of air; was 32px */
.f-prop__section{padding:var(--f-s7) 0;border-top:1px solid var(--f-line)}
.f-prop__section:first-child{border-top:0;padding-top:0}
.f-prop__section .f-head{margin-bottom:var(--f-s5)}
.f-prop__section .f-link{margin-top:var(--f-s4)}
.f-prop__section>.f-checklist li:last-child,.f-prop__section>.f-list li:last-child,.f-prop__section>.f-amenities li:nth-last-child(-n+2){border-bottom:0}
@media (max-width:640px){.f-prop__section>.f-amenities li:nth-last-child(2){border-bottom:1px solid var(--f-line)}}
@media (max-width:1024px){
  .f-prop__body,.f-prop__aside{grid-column:1/-1}
  .f-prop__aside{position:static;order:-1;margin-bottom:var(--f-s6)}
}

/* ---------- checklist (7.21) ---------- */
.f-checklist{border-top:1px solid var(--f-line)}
.f-checklist li{display:grid;grid-template-columns:72px 1fr;gap:var(--f-s4);padding:var(--f-s4) 0;border-bottom:1px solid var(--f-line)}
.f-checklist .f-numeral{font-size:40px;padding-top:2px}
.f-checklist__name{font-family:var(--f-serif);font-weight:400;font-size:24px;line-height:1.2;color:var(--f-fg)}
.f-checklist__text{margin-top:6px;color:var(--f-fg-2);max-width:var(--f-measure)}
@media (max-width:640px){.f-checklist li{grid-template-columns:48px 1fr;gap:var(--f-s3)}.f-checklist .f-numeral{font-size:32px}}

/* ---------- amenities (7.22) ---------- */
.f-amenities{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--f-s7);border-top:1px solid var(--f-line)}
.f-amenities li{padding:12px 0;border-bottom:1px solid var(--f-line);font-size:var(--f-small);font-weight:400;line-height:1.55;color:var(--f-fg-2)}
@media (max-width:640px){.f-amenities{grid-template-columns:1fr}}

/* ---------- booking (7.23) ---------- */
.f-booking{background:var(--f-paper);--f-bg:var(--f-paper);--f-line:rgba(42,39,37,.18);padding:var(--f-s5)}
.f-booking__price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.f-booking__price .f-title-2{color:var(--f-brass-text);font-variant-numeric:tabular-nums}
.f-booking__price .f-small{color:var(--f-fg-3)}
.f-booking .f-form{margin-top:var(--f-s5);gap:var(--f-s4)}
.f-booking .f-btn{width:100%;margin-top:var(--f-s5)}
.f-booking__help{margin-top:var(--f-s3);color:var(--f-fg-3)}
@media (max-width:640px){.f-booking{padding:var(--f-s4)}.f-booking .f-form{grid-template-columns:1fr 1fr}.f-booking .f-form .is-full{grid-column:1/-1}}

/* ---------- lines (7.32) ---------- */
.f-lines,.f-booking__lines{margin-top:var(--f-s5);border-top:1px solid var(--f-line)}
.f-lines div,.f-booking__lines div{display:flex;justify-content:space-between;gap:var(--f-s3);padding:10px 0;border-bottom:1px solid var(--f-line);font-size:var(--f-small);font-weight:400;color:var(--f-fg-2)}
.f-lines div span:last-child,.f-booking__lines div span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.f-lines .is-total,.f-booking__lines .is-total{color:var(--f-fg);font-weight:500}

/* ---------- host (7.24) ---------- */
.f-host{display:grid;grid-template-columns:120px 1fr;gap:var(--f-s5);align-items:center}
.f-host figure{aspect-ratio:3/4;background:var(--f-sand);overflow:hidden}
.f-host img{width:100%;height:100%;object-fit:cover}
.f-host .f-small{margin-top:8px;color:var(--f-fg-3);max-width:40ch}

/* ---------- map (7.25) ---------- */
.f-map figure{aspect-ratio:16/7;background:var(--f-sand);overflow:hidden}
.f-map img{width:100%;height:100%;object-fit:cover}
.f-map__caption{margin-top:var(--f-s2);color:var(--f-fg-3)}
.f-map .f-list{margin-top:var(--f-s5)}

/* ---------- guestbook (7.26) ---------- */
.f-guestbook{border-top:1px solid var(--f-line)}
.f-guestbook li{padding:var(--f-s4) 0;border-bottom:1px solid var(--f-line)}
.f-guestbook__who{color:var(--f-fg-3)}
.f-guestbook__line{margin-top:6px;max-width:var(--f-measure)}

/* ---------- shell and rail (7.27) ---------- */
.f-shell{display:grid;grid-template-columns:240px 1fr;background:var(--f-white);color:var(--f-ink-2)}
.f-rail{position:sticky;top:0;max-height:100vh;overflow:auto;align-self:start;display:flex;flex-direction:column;gap:var(--f-s6);padding:var(--f-s5) var(--f-s5) var(--f-s4);border-right:1px solid var(--f-rule);min-height:100vh}
.f-rail__brand img{width:150px;height:auto} /* 3.10: logo-black-flat.png */
.f-rail__nav{display:flex;flex-direction:column;gap:var(--f-s6)}
.f-rail__group .f-label{color:var(--f-ink-3);margin-bottom:var(--f-s2)}
.f-rail__group a{display:block;padding:8px 0;font-size:var(--f-small);font-weight:400;color:var(--f-ink-2);transition:color var(--f-fast) var(--f-ease)}
@media (hover:hover){.f-rail__group a:hover{color:var(--f-ink)}}
.f-rail__group a[aria-current]{color:var(--f-ink);font-weight:500}
.f-rail__group a[aria-current]::before{content:"";display:inline-block;width:16px;height:1px;background:currentColor;vertical-align:middle;margin-right:10px}
.f-rail__foot{margin-top:auto;padding-top:var(--f-s4);border-top:1px solid var(--f-rule);font-size:var(--f-small);font-weight:400;color:var(--f-ink-3)}
.f-rail__foot b{display:block;font-weight:400;color:var(--f-ink)}
.f-main{padding:var(--f-s6) var(--f-s7) var(--f-s8);min-width:0}
@media (max-width:820px){
  .f-shell{grid-template-columns:1fr}
  .f-rail{position:static;max-height:none;min-height:0;border-right:0;border-bottom:1px solid var(--f-rule);padding:var(--f-s4) var(--f-gutter);gap:var(--f-s3);flex-direction:row;flex-wrap:wrap;align-items:center}
  .f-rail__group{display:flex;gap:var(--f-s4);align-items:center}
  .f-rail__brand img{width:100px}
  .f-rail__group .f-label{display:none}
  .f-rail__group a{padding:6px 0;white-space:nowrap}
  .f-rail__nav{flex-direction:row;gap:var(--f-s4);width:calc(100% + 2 * var(--f-gutter));margin:0 calc(-1 * var(--f-gutter));padding:0 var(--f-gutter) 4px;overflow-x:auto}
  .f-rail__foot{display:none}
  .f-main{padding:var(--f-s5) var(--f-gutter) var(--f-s7)}
}

/* ---------- page head (7.28) ---------- */
.f-page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--f-s5);padding-bottom:var(--f-s5);border-bottom:1px solid var(--f-line)}
.f-page-head .f-title{max-width:none}
.f-page-head__actions{display:flex;gap:var(--f-s3);align-items:center;flex-wrap:wrap}
.f-page-head__actions .f-field{min-width:160px}
.f-page-head__actions .f-field select{height:44px}
@media (max-width:640px){.f-page-head{flex-direction:column;align-items:flex-start;gap:var(--f-s4)}}

/* ---------- panels (7.29) ---------- */
.f-panel{margin-top:var(--f-s7);min-width:0}
.f-panel__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--f-s4);padding-bottom:var(--f-s3);border-bottom:1px solid var(--f-line);margin-bottom:var(--f-s4)}
.f-panel__title{font-size:var(--f-lead);font-weight:400;line-height:1.3;color:var(--f-fg)}
.f-panel__note{color:var(--f-fg-3);text-align:right}
.f-panel__foot{margin-top:var(--f-s3);color:var(--f-fg-3)}
.f-panel__head+.f-tasks,.f-panel__head+.f-guestbook,.f-panel__head+.f-list{border-top:0}
.f-panel__head+.f-table--plain tr:first-child td{border-top:0}
.f-panels{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--f-s7);margin-top:var(--f-s7)}
.f-panels .f-panel{margin-top:0}
@media (max-width:1024px){.f-panels{grid-template-columns:1fr;gap:var(--f-s6)}}
@media (max-width:640px){.f-panel__head{flex-direction:column;align-items:flex-start;gap:6px}.f-panel__note{text-align:left}}

/* ---------- stats, dashboard use ---------- */
.f-stat__note{margin-top:8px;color:var(--f-fg-3)}
.f-stat__unit{font-size:var(--f-small);font-weight:400;color:var(--f-fg-3);margin-right:6px;letter-spacing:0}
.f-stats--dash{margin-top:var(--f-s4);border-top:0}
.f-stats--dash .f-stat{padding-right:var(--f-s5);margin-right:0;border-top:0}

/* ---------- table (7.30) ---------- */
.f-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.f-table{width:100%;border-collapse:collapse;font-size:var(--f-small);font-weight:400;line-height:1.5;color:var(--f-fg-2)}
.f-table th{text-align:left;padding:0 16px 14px 0;font-size:var(--f-label);font-weight:500;letter-spacing:var(--f-track);text-transform:uppercase;color:var(--f-fg-3);border-bottom:1px solid var(--f-line);white-space:nowrap}
.f-table td{padding:14px 16px 14px 0;border-bottom:1px solid var(--f-line);vertical-align:top}
.f-table th:last-child,.f-table td:last-child{padding-right:0}
.f-table .is-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.f-table .is-nowrap{white-space:nowrap}
.f-table td b{display:block;font-weight:400;color:var(--f-fg)}
.f-table__sub{display:block;color:var(--f-fg-3)}
.f-table--plain th{display:none}
.f-table--plain tr:first-child td{border-top:1px solid var(--f-line)}
.f-status{font-weight:400;white-space:nowrap}
.f-status--ok{color:var(--f-success)}
.f-status--bad{color:var(--f-danger)}
.f-status--wait{color:var(--f-fg-3)}

/* ---------- bars (7.31) ---------- */
.f-bars{display:grid;grid-template-columns:repeat(var(--n,12),1fr);gap:12px;height:200px;align-items:end;border-bottom:1px solid var(--f-line-strong)}
.f-bars__bar{height:var(--v,50%);background:var(--f-ink)}
.f-bars__bar.is-now{background:var(--f-ink-3)}
.f-bars__bar.is-future{background:var(--f-sand)}
.f-bars__labels{display:grid;grid-template-columns:repeat(var(--n,12),1fr);gap:12px;margin-top:10px;text-align:center}
.f-bars__labels span{font-size:var(--f-label);font-weight:500;letter-spacing:var(--f-track);text-transform:uppercase;color:var(--f-fg-3)}
.f-bars__key{display:flex;gap:var(--f-s4);flex-wrap:wrap;margin-top:var(--f-s4);font-size:var(--f-small);font-weight:400;color:var(--f-fg-3)}
.f-bars__key i{display:inline-block;width:12px;height:12px;vertical-align:-1px;margin-right:8px}
.f-bars-table{margin-top:var(--f-s4)}
.f-bars-table summary{cursor:pointer;font-size:var(--f-label);font-weight:500;letter-spacing:var(--f-track);text-transform:uppercase;color:var(--f-fg);list-style:none;display:inline-flex;align-items:center;gap:12px}
.f-bars-table summary::-webkit-details-marker{display:none}
.f-bars-table summary::before{content:"";width:40px;height:1px;background:currentColor}
.f-bars-table .f-table{margin-top:var(--f-s4)}
@media (max-width:640px){.f-bars{height:140px;gap:6px}.f-bars__labels{gap:6px}.f-bars__labels span{font-size:10px;letter-spacing:.08em}}

/* ---------- tasks: a ruled list with a rule-link per row ---------- */
.f-tasks{border-top:1px solid var(--f-line)}
.f-tasks li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--f-s4);padding:14px 0;border-bottom:1px solid var(--f-line);font-size:var(--f-small);font-weight:400;color:var(--f-fg-2)}
.f-tasks li.is-done{color:var(--f-fg-3)}
.f-tasks li.is-done span:first-child{text-decoration:line-through}

/* ---------- journal entries (7.34, 3.15) ---------- */
.f-entries{border-top:1px solid var(--f-line)}
.f-entry{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--f-gap);align-items:start;padding:var(--f-s6) 0;border-bottom:1px solid var(--f-line)}
.f-entry__media{grid-column:1/5;display:block;aspect-ratio:4/3;background:var(--f-sand);overflow:hidden}
.f-entry__media img{width:100%;height:100%;object-fit:cover}
.f-entry__body{grid-column:6/13}
.f-entry__title{margin-top:0} /* 3.24: no meta line above it */
.f-entry__body .f-body{margin-top:var(--f-s3)}
.f-entry__body .f-link{margin-top:var(--f-s4)}
@media (max-width:820px){.f-entry__media,.f-entry__body{grid-column:1/-1}.f-entry{gap:var(--f-s4)}}

/* ---------- post head and figure (7.35, 3.15) ---------- */
.f-post-head{padding:var(--f-s6) 0}
.f-post-head .f-title{max-width:720px}
.f-post-head .f-lead{margin-top:var(--f-s4)}
.f-post-head .f-meta{margin-top:var(--f-s5)}
.f-figure__media{aspect-ratio:16/7;background:var(--f-sand);overflow:hidden}
.f-figure__media img{width:100%;height:100%;object-fit:cover}
.f-figure--body .f-figure__media{aspect-ratio:3/2}
.f-figure figcaption{margin-top:var(--f-s2);color:var(--f-fg-3)}
.f-post{padding-top:var(--f-s7)}
.f-post .f-prop__section>*+*{margin-top:var(--f-s4)}
.f-post .f-prop__section>.f-list,.f-post .f-prop__section>.f-figure{margin-top:var(--f-s5)}
.f-post .f-prop__section>.f-map__caption{margin-top:var(--f-s2)}
@media (max-width:640px){.f-figure__media{aspect-ratio:4/3}}

/* ---------- at a glance (7.36, 3.15) ---------- */
.f-glance{background:var(--f-paper);--f-bg:var(--f-paper);--f-line:rgba(42,39,37,.18);padding:var(--f-s5)}
.f-glance .f-lines{margin-top:var(--f-s4)}
.f-glance .f-btn{width:100%;margin-top:var(--f-s5)}
.f-glance__help{margin-top:var(--f-s3);color:var(--f-fg-3)}
@media (max-width:1024px){.f-post .f-prop__aside{order:0;margin:var(--f-s6) 0 0}} /* a guide reads text first; the property page keeps its booking box on top */
@media (max-width:640px){.f-glance{padding:var(--f-s4)}}

/* ---------- online booking note (7.37, 3.16) ---------- */
.f-soon{display:flex;justify-content:space-between;align-items:baseline;gap:var(--f-s3);margin-top:var(--f-s5);padding-top:var(--f-s3);border-top:1px solid var(--f-line)}
.f-soon .f-label{color:var(--f-fg-3)}
.f-soon .f-small{color:var(--f-fg)}
.f-booking__lines+.f-soon{margin-top:0;border-top:0;padding-top:10px}

/* ---------- guides on the landing page (7.39, 3.23) ---------- */
.f-guides{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--f-gap);align-items:end}
.f-guides__title{grid-column:1/8}
.f-guides__all{grid-column:10/13;justify-self:end}
.f-guides__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--f-gap);margin-top:var(--f-s6)}
.f-guide__media{display:block;aspect-ratio:4/3;background:var(--f-sand);overflow:hidden}
.f-guide__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--f-fast) var(--f-ease)}
@media (hover:hover){.f-guide__media:hover img{transform:scale(1.02)}}
.f-guide__title{margin-top:var(--f-s3)} /* 3.24: no meta line above it */
.f-guide__title a{color:inherit;text-decoration:none}
@media (hover:hover){.f-guide__title a:hover{text-decoration:underline;text-underline-offset:4px}}
.f-guide__line{margin-top:var(--f-s2);color:var(--f-fg-3)}
@media (max-width:820px){.f-guides{display:block}.f-guides__all{margin-top:var(--f-s3);display:inline-block}.f-guides__grid{grid-template-columns:1fr;gap:var(--f-s6)}}