/* Riviera, one system (Geri, 2026-10-21; static/riviera-system.html): 4 colours, 2 fonts, 1 motif.
   Cream ground, navy ink/rules/buttons, sea blue only for the poster band at the top of a page, sun only as an accent
   (the sun, "luxury", ad tags). DM Serif Display for names and headings (Geri, 2026-10-22: Abril Fatface was hard to read), Josefin Sans for text. The sun sits in the
   poster band; the arch frames agency photos. Never: another accent colour, a colour per agency or destination,
   coloured rows, gradients, sun yellow as text on cream. The old olive/terracotta/plum names map onto the system. */
:root {
  --bg: #f6eedf; --paper: #fbf6ec; --ink: #15324a; --muted: #5f6a72; --line: rgba(21,50,74,.18); --sand: #ece2cf;
  --sky: #2a6f97; --sun: #e8a33d; --sun-ink: #8a5a14;   /* sun-ink: the sun darkened for text on cream */
  --sea: var(--ink); --sea-dark: #0c2234;   /* links and buttons are navy */
  --olive: var(--ink); --olive-bg: var(--sand); --terra: var(--sun-ink); --terra-bg: var(--sand); --plum: var(--ink);
  --serif: "DM Serif Display", Georgia, serif;
  --sans: "Josefin Sans", "Helvetica Neue", Arial, sans-serif;
  /* one type scale (Geri, 2026-10-22: "fix the font sizes"): every size on the site is one of these; phones get
     their own values below, so all pages scale together */
  --fs-hero: clamp(34px, 4.2vw, 54px);   /* the home headline and the villa report's name */
  --fs-h1: 46px; --fs-h2: 32px; --fs-h3: 22px;
  --fs-name: 24px;     /* a villa or agency name in a list or card */
  --fs-name-s: 20px;   /* a name inside a table row or under a photo */
  --fs-lede: 19px; --fs-body: 17px; --fs-small: 15px; --fs-fine: 14px;
  --fs-caps: 12px;     /* labels in spaced capitals */
}
@media (max-width: 820px) {
  :root { --fs-hero: clamp(28px, 8.4vw, 40px); --fs-h1: 34px; --fs-h2: 26px; --fs-h3: 20px; --fs-name: 21px;
    --fs-name-s: 18px; --fs-lede: 17px; --fs-body: 16px; --fs-small: 14px; --fs-fine: 13px; --fs-caps: 11px; }
}
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
/* DM Serif Display has one weight: never let the browser fake a bold */
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--fs-body)/1.6 var(--sans); -webkit-font-smoothing: antialiased; font-synthesis: none; }
main { max-width: 1080px; margin: 0 auto; padding: 0 20px 56px; }
.bar { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
a { color: var(--sea); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.1; margin: 0; color: var(--ink); }
h1 { font-size: var(--fs-h1); margin: 0 0 12px; }
h2 { font-size: var(--fs-h2); margin: 0 0 18px; }
h3 { font-size: var(--fs-h3); margin: 0 0 6px; }
p { margin: 0 0 12px; }
.lede { font-size: var(--fs-lede); color: var(--muted); max-width: 680px; }
.fine { font-size: var(--fs-fine); color: var(--muted); }
.kicker { font-size: var(--fs-caps); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.crumb { font-size: var(--fs-fine); color: var(--muted); margin: 0 0 14px; }
.code { font-family: ui-monospace, Consolas, monospace; font-size: var(--fs-fine); background: var(--sand); padding: 2px 7px; border-radius: 3px; }
.narrow { max-width: 760px; }
.center { text-align: center; }

/* header */
.top { border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 50;
  transition: background-color .25s, box-shadow .25s, border-color .25s; }
.top.scrolled { box-shadow: 0 2px 14px rgba(31,29,26,.08); }
/* home: the header floats transparent over the hero photo, white text, until the page scrolls */
.has-overlay .top { position: fixed; left: 0; right: 0; }
.top.overlay:not(.scrolled) { background: transparent; border-bottom-color: rgba(246,238,223,.25); }
.top.overlay:not(.scrolled) .brand, .top.overlay:not(.scrolled) nav a { color: var(--bg); }
.top.overlay:not(.scrolled) nav .quiet { color: rgba(255,255,255,.75); }
.top.overlay:not(.scrolled) nav .sep { background: rgba(255,255,255,.35); }
.has-overlay .veil { padding-top: 150px; }   /* room for the header floating over the photo */
/* home hero fills exactly the first screen on any device (svh: phones' browser bars don't push it below the fold) */
.has-overlay .cover .veil { min-height: 100vh; min-height: 100svh; box-sizing: border-box; display: flex; align-items: center;
  padding-top: 110px; padding-bottom: 60px; }
.has-overlay .cover .inner { width: 100%; }
.top .bar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 16px; }
.brand { font: 800 24px "Fraunces", var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--ink); text-decoration: none; text-transform: lowercase; white-space: nowrap; }
/* the logo: each "i" is dotted with a small golden sun (option E) */
.brand .dotcom { font-weight: 400; }
/* "luxury" stands apart: italic, lighter, in the suns' gold (a deeper gold on light backgrounds for contrast) */
.brand .lux { color: var(--sun); }   /* same font as the other words, the sun's gold; no spaces: the colour separates the words */
/* "luxury": upright, light, gold, open spacing (no italic, no script: clean, even edges) */
.brand .logodraw { user-select: none; }
.brand .logotext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.top.overlay:not(.scrolled) .brand .lux { color: var(--sun); }   /* ".com", like Booking.com: part of the name, a step quieter */
.brand { word-spacing: -.04em; }   /* logo font: Fraunces 800, soft and wonky (Geri, option 3 of static/logo-fonts.html) */
nav { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; margin-left: auto; font-size: var(--fs-small); }
nav a { color: var(--ink); text-decoration: none; } nav a:hover { color: var(--sea); }
nav .sep { width: 1px; height: 18px; background: var(--line); }
nav .quiet { color: var(--muted); }

/* buttons: square-ish, hotel-like */
.button, .checker button, .stack button, .filters button, .rows button, .agencylist button, .search button,
.askbar button, .alertform button, .offerbox button {
  display: inline-block; border: 0; border-radius: 0; background: var(--sea); color: var(--bg); font: 700 var(--fs-fine) var(--sans);
  letter-spacing: .08em; text-transform: uppercase; padding: 15px 26px 13px;   /* closer: buttons are phrases (Geri, 2026-10-22) */ text-decoration: none; cursor: pointer; text-align: center; }
.button:hover, .checker button:hover, .stack button:hover, .rows button:hover, .agencylist button:hover,
.askbar button:hover, .alertform button:hover, .offerbox button:hover { background: var(--sea-dark); }
.button.ghost { background: transparent; color: var(--sea); border: 1px solid var(--sea); padding: 10px 18px; font-size: var(--fs-fine); }
.button.light { background: #fff; color: var(--sea); }

/* where the client is: plain text, no boxes */
.steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 0 0 14px; margin: 22px 0 26px; border-bottom: 1px solid var(--line); font-size: var(--fs-small); color: var(--muted); }
.steps li + li::before { content: "—"; margin-right: 22px; color: var(--line); }
.steps li.done { color: var(--olive); }
.steps li.now { color: var(--ink); font-weight: 700; }

/* the checking tool */
.checker { background: var(--paper); border-radius: 6px; padding: 28px 28px 22px; display: grid; gap: 10px; box-shadow: 0 24px 60px rgba(0,0,0,.2); }
.checker h2 { font-size: var(--fs-h3); margin-bottom: 4px; }
.checker label, .stack label, .filters label, .alertform label { display: grid; gap: 6px; font-size: var(--fs-small); font-weight: 700; color: var(--ink); }
.checker input, .stack input, .stack textarea, .filters select, .alertform input {
  width: 100%; padding: 13px 14px; border: 1px solid #d4c9b7; border-radius: 3px; background: #fff; font: 16px var(--sans); color: var(--ink); }
.checker input:focus, .stack input:focus, .stack textarea:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px rgba(31,95,115,.12); }
.checker .or { margin: 0; text-align: center; color: var(--muted); font-size: var(--fs-fine); font-style: italic; }
.checker button { margin-top: 6px; }
.checker .hint { font-size: var(--fs-fine); color: var(--muted); margin: 4px 0 0; }

/* home */
/* the poster band (home, villa lists): flat sea blue, one sun, a navy horizon. Our own drawing, never an agency photo */
.cover { width: 100vw; margin-left: calc(50% - 50vw); background: var(--sky); position: relative; overflow: hidden; }
.cover::before { content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%; background: var(--sun);
  right: max(40px, calc(50% - 480px)); top: 120px; }
.cover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: var(--ink); }
.veil { position: relative; padding: 72px 20px; }
/* one left edge on every page: 1040 = the 1080 page width minus the header's 2 x 20px padding */
.cover .inner { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.cover h1 { color: var(--bg); font-size: var(--fs-h1); line-height: 1; }
.cover .lede, .cover .kicker { color: var(--bg); }
.cover.slim::before { width: 150px; height: 150px; top: 30px; }
.cover.slim .veil { padding: 40px 20px 46px; }
.cover.slim .inner { display: block; }
.cover.slim h1 { margin: 0; }
.block { padding: 60px 0 0; }
/* how it works: one line, three circles, titles only; hover reveals the words; arrows flow */
.journey { list-style: none; padding: 0; margin: 8px 0 0; position: relative; display: grid; grid-template-columns: 1fr 90px 1fr 90px 1fr; align-items: start; }
.journey::before { content: ""; position: absolute; top: 28px; left: 16.5%; right: 16.5%; border-top: 1px solid #cbbfab; }
.step { position: relative; text-align: center; padding-bottom: 6px; }
.step .dot { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px;
  border-radius: 50%; background: var(--bg); border: 1px solid var(--ink); font: 500 22px var(--serif); }
.step h3 { font-size: 20px; margin: 0; }
.arrows { position: relative; z-index: 1; display: flex; justify-content: center; gap: 1px; height: 56px; align-items: center; color: var(--sea); }
.arrows span { font-size: 34px; font-weight: 700; line-height: 1; background: var(--bg); padding: 0 2px; opacity: .3; animation: flow 1.5s ease-in-out infinite; }
.arrows span:nth-child(2) { animation-delay: .2s; }
.arrows span:nth-child(3) { animation-delay: .4s; }
@keyframes flow { 0% { opacity: .25; transform: translateX(-5px); } 45% { opacity: 1; transform: translateX(2px); } 100% { opacity: .25; transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { .arrows span { animation: none; opacity: .7; } }
/* a full-width stripe; its text starts on the page's one left edge (it used to touch the sides of a box) */
.band { margin-top: 72px; width: 100vw; margin-left: calc(50% - 50vw); box-sizing: border-box; background: var(--sand);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 34px max(20px, calc(50vw - 520px));
  display: flex; gap: 20px 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.band h2 { margin-bottom: 6px; }
.band p { margin: 0; color: var(--muted); max-width: 620px; }
.band .button.light { background: var(--sea); color: #fff; }

/* villa cards */
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px 5px; }   /* columns 5px apart (Geri, 2026-10-22) */
.vcard { display: grid; gap: 0; align-content: start; color: var(--ink); text-decoration: none; max-width: 520px; }
/* agency photos are landscape: shown 3:2, square corners, like a postcard (Geri: the arch cropped them) */
.vcard img, .noimg { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: var(--sand); border-radius: 0; margin-bottom: 10px; }
.vname { font: 400 var(--fs-name)/1.1 var(--serif); }
.facts { font-size: var(--fs-small); color: var(--muted); }
.also { font-size: var(--fs-small); color: var(--muted); margin: 2px 0 0; }   /* neutral: other names are a fact, not a fault */

/* results flow */
.flow { max-width: 820px; }
.narrowform { max-width: 520px; }
.formerror { background: var(--terra-bg); color: var(--terra); font-weight: 700; font-size: var(--fs-small); padding: 10px 12px; border-radius: 3px; margin: 0; }
.choices { display: grid; margin-top: 8px; border-top: 1px solid var(--line); }
.choice { display: grid; gap: 2px; border-bottom: 1px solid var(--line); padding: 16px 0; color: var(--ink); text-decoration: none; }
.choice:hover strong { color: var(--sea); }
.choice strong { font: 400 var(--fs-name) var(--serif); }
.choice span { color: var(--muted); font-size: var(--fs-small); }
.next { margin-top: 28px; border-top: 2px solid var(--sea); padding: 22px 0 0; }
.next h2 { font-size: var(--fs-h3); margin-bottom: 8px; }
.next p { max-width: 640px; }
.next .again { margin: 14px 0 0; font-size: var(--fs-small); color: var(--muted); }
.linkline { word-break: break-all; font-size: var(--fs-fine); color: var(--muted); }

/* villa report */
.report { margin: 0; padding-top: 28px; }   /* the page's full width, like the header (one left and right edge) */
.report h1 { font-size: var(--fs-h1); margin-bottom: 4px; }
.titlebar { margin-bottom: 4px; }
/* the report's poster: sea band, the sun, the name and a scoreboard on the left, the agency photo as a landscape
   postcard (3:2, cream border) standing on the horizon on the right */
.reportcover { position: relative; margin: 0; overflow: hidden; background: var(--sky); color: var(--bg);
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 32px; align-items: end; padding: 30px 32px 0; }
.reportcover::before { content: ""; position: absolute; width: 130px; height: 130px; border-radius: 50%; background: var(--sun); left: 46%; top: 28px; }
.reportcover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: var(--ink); }
.reportcover > * { position: relative; }
.reportcover figcaption { padding: 40px 0 40px; }
.reportcover .arch { overflow: hidden; border: 6px solid var(--bg); aspect-ratio: 3 / 2; margin-bottom: 24px; }
.reportcover .arch .srcimg, .reportcover .arch img { width: 100%; height: 100%; object-fit: cover; }
.reportcover h1 { color: var(--bg); font-size: var(--fs-hero); line-height: 1; margin: 0 0 6px; }
.soldas { margin: 0 0 10px; font: 700 var(--fs-caps) var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--bg); }
.titlebar .soldas { color: var(--muted); }
.soldas a { color: inherit; text-decoration: none; }
.soldas a:hover { text-decoration: underline; }
.reportcover .mainname { color: var(--bg); opacity: .85; font-size: var(--fs-fine); margin: 0 0 4px; }
.scoreboard { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 18px 0 0; }
.scoreboard b { display: block; font: 400 var(--fs-h2)/1 var(--serif); }
.scoreboard span { font: 700 var(--fs-caps) var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.answerblock h2 { margin-top: 44px; }
.checked { border-left: 3px solid var(--terra); padding: 4px 0 4px 18px; margin: 0 0 24px; }
.checked.ok { border-left-color: var(--olive); }
.checked p { margin: 0; font-size: var(--fs-lede); }
.warnword { color: var(--terra); }


/* where to book it: two groups, one line per agency */
.group { margin-bottom: 26px; }
.group h3 { font: 700 var(--fs-small) var(--sans); letter-spacing: .04em; margin: 0 0 4px; display: flex; gap: 8px; align-items: center; }
.group h3::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--olive); }
.group.warn h3::before { background: var(--terra); }
.group h3 span { color: var(--muted); font-weight: 400; }
.rows { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
.rows li { display: grid; grid-template-columns: 220px 1fr auto; gap: 20px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.rows .agency { font: 400 var(--fs-name-s) var(--serif); color: var(--ink); text-decoration: none; }
.rows .agency:hover { color: var(--sea); }
.rows .shown { font-size: var(--fs-body); color: var(--muted); }
.group.warn .shown { color: var(--terra); }
.rows .act { display: flex; gap: 14px; align-items: center; justify-content: flex-end; }
.rows button { padding: 10px 26px; }
.perk { color: var(--plum); font-size: var(--fs-fine); }

/* booking: every agency in one list, each with a badge */
.booking h2 { margin-bottom: 16px; }
.reportcover + .booking { padding-top: 28px; }
/* no agency photo on the cover (decoration); the sun moves to the right */
.reportcover.noart { grid-template-columns: 1fr; padding-bottom: 10px; }
.reportcover.noart::before { left: auto; right: 48px; }
.agencylist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.agencylist li { display: grid; grid-template-columns: 30px 1fr 150px; gap: 20px; align-items: center; background: var(--paper);
  border: 1px solid var(--line); border-radius: 6px; padding: 16px 22px; }
.agencylist .who { display: grid; gap: 2px; justify-items: start; }
.agencylist .agency { font: 400 var(--fs-name) var(--serif); }
.agencylist .shown { font-size: var(--fs-small); color: var(--muted); }   /* every agency's own name, neutral */
.agencylist .shown.other { color: var(--terra); }                   /* owner-confirmed name differs */
.agencylist .nameline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rec { font: 700 var(--fs-caps) var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--sea);
  padding: 5px 10px 4px; border-radius: 2px; text-decoration: none; }
.partnertag { font-size: var(--fs-caps); color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--muted); }
/* the real-name seal: a thin hallmark, not a coloured pill */
.seal { justify-self: start; display: inline-flex; align-items: center; gap: 9px; font: 700 var(--fs-caps) var(--sans);
  letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; }
.seal svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.seal.ok { color: var(--olive); }
.seal.warn { color: var(--terra); }
.agencylist .act { display: grid; gap: 6px; justify-items: stretch; text-align: center; }
.agencylist .act button, .agencylist .act .button { width: 100%; padding: 12px 18px; }
.agencylist .perk { font-size: var(--fs-fine); color: var(--plum); }
.stickybook { display: none; }

/* evidence + about */
details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; margin-bottom: 10px; }
details summary { cursor: pointer; color: var(--sea); font-weight: 700; font-size: var(--fs-small); }
figure { margin: 0; }
/* proof: the same photo from every agency, the name each one uses over it */
.shots { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 14px; margin-bottom: 14px; }
.shot.empty { display: grid; place-items: center; background: var(--sand); border-radius: 4px; aspect-ratio: 4 / 3; }
.shot.empty span { font-size: var(--fs-fine); color: var(--muted); text-align: center; padding: 0 16px; }
.moreshots { border: 0; padding: 0; margin: 0; }
.moreshots summary { margin: 4px 0 16px; }
.proof .fine { margin-bottom: 14px; }
.swipehint { display: none; font-size: var(--fs-fine); color: var(--muted); margin: -8px 0 12px; }
.shot { position: relative; border-radius: 4px; overflow: hidden; }
.shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 18px 16px;
  background: linear-gradient(180deg, rgba(15,20,25,0) 0%, rgba(15,20,25,.78) 100%); color: #fff; }
.shot strong { display: block; font: 400 var(--fs-name)/1.2 var(--serif); }
.shot.other strong { color: #f3b48f; }
.shot span { display: block; font-size: var(--fs-fine); opacity: .85; margin-top: 2px; }
.block h3 { margin: 22px 0 4px; }
.factlist { margin: 0; display: grid; max-width: 680px; border-top: 1px solid var(--ink); }
.factlist > div { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.factlist dt { color: var(--muted); font-size: var(--fs-small); }
.factlist dd { margin: 0; font-weight: 700; }
.keepbtns { display: flex; gap: 10px; flex-wrap: wrap; }
.keep p { color: var(--muted); }
.forsellers { margin-top: 40px; }
.forsellers summary { color: var(--muted); font-weight: 400; }
.method { font-size: var(--fs-fine); color: var(--muted); border-top: 1px solid var(--line); padding-top: 16px; margin-top: 44px; }

/* chips + statuses (agency pages, villa cards) */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
.chip { display: inline-block; font-size: var(--fs-fine); padding: 3px 10px; border-radius: 3px; background: var(--sand); color: var(--muted); }
.chip.ok { background: var(--olive-bg); color: var(--olive); }
.chip.warn { background: var(--terra-bg); color: var(--terra); }
.nolink { font-size: var(--fs-fine); color: var(--muted); }
.partner { font-size: var(--fs-fine); font-style: italic; color: var(--plum); margin-left: 8px; }
.status { font-size: var(--fs-fine); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.status.ok { color: var(--olive); } .status.warn { color: var(--terra); }
.calls { font-size: var(--fs-small); color: var(--muted); }

/* agencies */
.pagehead { padding: 40px 0 10px; }
.ranking { list-style: none; padding: 0; margin: 10px 0 14px; border-top: 1px solid var(--ink); }
.ranking li { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); padding: 16px 0; }
.ranking .agency { font: 400 var(--fs-name) var(--serif); color: var(--ink); text-decoration: none; }
.ranking .fine { margin: 2px 0 0; }
.ranking .calls { display: block; }
.score { font: 400 30px var(--sans); white-space: nowrap; }
h1 .score { font-size: .7em; margin-left: 12px; }
.score.ok { color: var(--olive); } .score.warn { color: var(--terra); } .score.mid { color: #8a6d1e; } .score.none { color: var(--muted); }

/* forms, misc */
.filters { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; margin-top: 18px; }
.filters select { width: auto; }
.stack { display: grid; gap: 14px; max-width: 560px; margin-top: 14px; }
.stack button { justify-self: start; }
pre { white-space: pre-wrap; word-break: break-all; background: var(--sand); padding: 14px; font-size: var(--fs-fine); border-radius: 3px; }
code { font-size: var(--fs-caps); }
.refcode { font: 700 54px/1 var(--sans); letter-spacing: .04em; margin: 6px 0 22px; color: var(--sea); }
.plain { padding-left: 22px; } .plain li { margin-bottom: 8px; }
.numbered { padding-left: 22px; margin-top: 20px; } .numbered li { margin-bottom: 16px; }
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin: 24px 0 16px; }
.tiers > div { border-top: 1px solid var(--ink); padding-top: 16px; }
.tiers .price { font-weight: 700; color: var(--sea); margin: 0 0 10px; }
.tiers ul { padding-left: 18px; margin: 0; color: var(--muted); } .tiers li { margin-bottom: 6px; }
.search { display: flex; gap: 8px; max-width: 560px; margin-top: 14px; }
.search input { flex: 1; padding: 12px 14px; border: 1px solid #d4c9b7; border-radius: 3px; font: 16px var(--sans); }
table.admin { width: 100%; border-collapse: collapse; font-size: var(--fs-fine); display: block; overflow-x: auto; margin-bottom: 30px; }
table.admin th, table.admin td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.admin th { color: var(--muted); font-weight: 700; }
.summary { font: 400 var(--fs-name)/1.45 var(--serif); margin: 14px 0; }
.pagehead + h2, table.admin + form { margin-top: 18px; }

/* footer (Geri, 2026-10-22): a navy band, the poster's horizon colour, so the page ends as it starts; links split by
   audience (clients · agencies · booking sites), then the disclosure and one small legal line */
footer { margin-top: 72px; background: var(--ink); color: rgba(246,238,223,.72); font-size: var(--fs-fine); padding: 52px 0 36px; }
footer .fcols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 36px;
  border-bottom: 1px solid rgba(246,238,223,.18); }
footer .fbrand p { margin: 10px 0 0; max-width: 260px; font: 400 var(--fs-name-s)/1.25 var(--serif); color: var(--bg); }
footer .brand, footer .brand .logodraw { color: var(--bg); }
footer nav { display: grid; gap: 9px; align-content: start; margin: 0; font-size: var(--fs-fine); }
footer b { margin-bottom: 4px; font: 700 var(--fs-caps)/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--bg); }
footer a { color: rgba(246,238,223,.82); text-decoration: none; }
footer a:hover { color: var(--bg); text-decoration: underline; }
footer .fdisclose { max-width: 720px; margin: 22px 0 0; line-height: 1.6; }
footer .flegal { margin: 14px 0 0; font-size: var(--fs-caps); }
@media (max-width: 820px) {
  footer { padding: 40px 0 28px; }
  footer .fcols { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  footer .fbrand { grid-column: 1 / -1; }
}

/* map (internal) */
.mapwrap { overflow-x: auto; background: var(--paper); border: 1px solid var(--line); padding: 12px; border-radius: 3px; }
.map { width: 100%; min-width: 760px; height: auto; display: block; }
.map .mh { font-size: var(--fs-fine); font-weight: 700; fill: var(--sea); letter-spacing: .04em; text-transform: uppercase; }
.map .bx { fill: var(--bg); stroke: #cdbfa8; }
.map .bx.engine { fill: var(--sand); }
.map .bx.core { fill: var(--ink); stroke: var(--ink); }
.map .bx.private { fill: #fff; stroke: #b3a68f; stroke-dasharray: 5 4; }
.map .bx.money { fill: var(--terra-bg); stroke: var(--terra); }
.map .t { font-size: var(--fs-small); font-weight: 600; fill: var(--ink); }
.map .s { font-size: 12.5px; fill: var(--muted); }
.map .inv { fill: #fff; }
.map .ln { fill: none; stroke: var(--muted); stroke-width: 1.6; }
.map .lm { fill: none; stroke: var(--terra); stroke-width: 2.2; stroke-dasharray: 6 4; }
.map .dash { stroke-dasharray: 4 4; }

.vgrid > *, .tiers > *, .cover .inner > *, .rows li > * { min-width: 0; }

@media (max-width: 820px) {
  .cover .inner, .tiers { grid-template-columns: 1fr; gap: 22px; }
  .journey { grid-template-columns: 1fr; }
  .journey::before { display: none; }
  .arrows { height: 84px; transform: rotate(90deg); }
  .step { padding-bottom: 0; }
  .veil { padding: 36px 20px; }
  .has-overlay .cover .veil { padding-top: 150px; padding-bottom: 40px; align-items: flex-end; }
  .cover::before { width: 130px; height: 130px; top: 90px; right: 20px; }
  .cover.slim::before { width: 90px; height: 90px; top: 20px; }
  .top nav { gap: 16px; font-size: var(--fs-fine); }
  .reportcover { grid-template-columns: 1fr; padding: 22px 20px 0; gap: 0; }
  .reportcover::before { width: 80px; height: 80px; left: auto; right: 20px; top: 20px; }
  .reportcover figcaption { padding: 20px 0 22px; }
  .reportcover .arch { order: 2; margin-bottom: 20px; }
  .rows li { grid-template-columns: 1fr; gap: 4px; }
  .agencylist li { grid-template-columns: 30px 1fr; gap: 10px; padding: 16px 18px; }
  .agencylist li > .seal, .agencylist li > .act { grid-column: 2; }
  /* phones: each shared photo is a swipe row; the next agency's version peeks in from the right */
  .shots { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%; gap: 10px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0 -20px 14px; padding: 0 20px; scroll-padding: 0 20px; }
  .shots::-webkit-scrollbar { display: none; }
  .shot { scroll-snap-align: start; }
  .swipehint { display: block; }
  .stickybook { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; gap: 12px; align-items: center;
    justify-content: space-between; background: var(--paper); border-top: 1px solid var(--line); padding: 10px 16px;
    box-shadow: 0 -8px 24px rgba(0,0,0,.08); }
  .stickybook strong { display: block; font: 400 var(--fs-body) var(--serif); }
  .stickybook span { font-size: var(--fs-fine); color: var(--plum); }
  .stickybook .button { padding: 12px 26px; }
  body:has(.stickybook) footer { padding-bottom: 96px; }
  .rows .act { justify-content: flex-start; flex-wrap: wrap; margin-top: 6px; }
  .factlist > div { grid-template-columns: 130px 1fr; }
  .steps li + li::before { margin-right: 10px; }
  nav { margin-left: 0; gap: 16px; } nav .sep { display: none; }
  .band { padding-top: 28px; padding-bottom: 28px; }
}
@media print {
  .top, footer, .noprint, .steps, form, .band, .forsellers { display: none !important; }
  body { background: #fff; }
  details { display: block; } details > div { display: grid !important; }
}

/* photos shown from the agency's own site, always credited; if the site blocks embedding, only the credit link shows */
.srcimg { position: relative; display: block; }
.srcimg img { display: block; }
.credit { position: absolute; right: 8px; bottom: 8px; font-size: 11px; color: #fff; background: rgba(15,20,25,.55);
  padding: 2px 7px; border-radius: 2px; text-decoration: none; z-index: 2; }
.srcimg.blocked img { display: none; }
.srcimg.blocked { min-height: 120px; background: var(--sand); }
.srcimg.blocked .credit { position: static; display: inline-block; margin: 16px; background: none; color: var(--sea); font-size: var(--fs-fine); }
.reportcover .srcimg .credit { top: 12px; bottom: auto; }
.shot .credit { top: 8px; bottom: auto; }
.covercredit { position: absolute; right: 16px; bottom: 10px; margin: 0; font-size: 11px; color: rgba(255,255,255,.75); }
.cover { position: relative; }
a.shot.empty { text-decoration: none; position: relative; }
a.shot.empty figcaption { background: none; color: var(--ink); padding: 0 14px 12px; }
a.shot.empty span { color: var(--sea); }
.stack select { width: 100%; padding: 12px 14px; border: 1px solid #d4c9b7; border-radius: 3px; background: #fff; font: 16px var(--sans); }

/* review screen (internal) */
.rvilla { border-top: 1px solid var(--ink); padding: 18px 0 8px; }
.rvilla h2 { font-size: var(--fs-name); margin-bottom: 8px; }
.rline { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.okname { color: var(--olive); font-weight: 700; font-size: var(--fs-fine); margin-left: 6px; }
.othername { color: var(--terra); font-weight: 700; font-size: var(--fs-fine); margin-left: 6px; }
.rpairs { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.rpair { display: flex; gap: 3px; }
.rpair img { width: 110px; height: 80px; object-fit: cover; border-radius: 2px; }
.rbtns { display: grid; gap: 8px; }
.rbtns button { border: 0; border-radius: 3px; background: var(--olive); color: #fff; font: 700 var(--fs-fine) var(--sans); padding: 10px 18px; cursor: pointer; }
.rbtns .reject { background: var(--terra); }

/* "What each agency says": one column per agency, rows that differ get a quiet terracotta label */
.factwrap { overflow-x: auto; }
table.facts { border-collapse: collapse; width: 100%; background: var(--paper); font-size: var(--fs-body); }
table.facts th, table.facts td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.facts tr:first-child th { font: 400 var(--fs-body) var(--serif); border-bottom: 1px solid var(--ink); }
table.facts th span { display: table; margin-top: 3px; font: 700 10px var(--sans); color: var(--ink); background: var(--sun);
  padding: 2px 6px 1px; letter-spacing: .08em; text-transform: uppercase; }

/* "Check this website before you pay" */
.factlist { padding-left: 20px; display: grid; gap: 10px; font-size: var(--fs-lede); max-width: 680px; }

/* alert form at the end of a villa report */
.alertform { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 44px; }
.alertform label { flex: 1 1 280px; }
.linkbutton { background: none; border: 0; color: var(--sea); padding: 0; text-decoration: underline; cursor: pointer; font: inherit; }

/* villa list: how many places to book, under the facts */
/* the card is our own Riviera poster (agency photos are used only as evidence): sea, sun, horizon, the name on it,
   and one small tag, top left, in normal letters */
.vposter { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--sky); margin-bottom: 8px; }
.vposter::before { content: ""; position: absolute; width: 22%; aspect-ratio: 1; border-radius: 50%; background: var(--sun); right: 7%; top: 10%; }
.vposter::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8%; background: var(--ink); }
.vposter .vname { position: absolute; left: 14px; right: 14px; bottom: calc(8% + 12px); color: var(--bg); }
.vcard:hover .vposter { background: #2f7aa5; }
.vtag { position: absolute; top: 10px; left: 10px; background: var(--bg); color: var(--ink); padding: 5px 9px 3px;
  font: 600 var(--fs-fine)/1.3 var(--sans); box-shadow: 0 2px 8px rgba(12,34,52,.18); }
/* the photo credit on cards: small, in the corner, out of the photo's way */
.vcard .srcimg .credit { right: 0; bottom: 10px; font-size: 10px; padding: 2px 6px; border-radius: 0; }
.vcard .hit { font-size: var(--fs-small); color: var(--ink); }
/* the card's name and destination sit tight together (Geri, 2026-10-22: "name too big, too much empty space") */
.vcard .vname { font-size: var(--fs-name); line-height: 1.1; }
.vcard .facts { line-height: 1.4; }   /* searched by a name: which agency uses it */
/* home: real numbers for this week as flip-clock counters (Geri); ink tiles, limewash digits, gold label */
.counters { display: flex; flex-wrap: wrap; gap: 14px 48px; margin: 0 0 22px; }
.counter { display: flex; align-items: center; gap: 12px; }   /* "[9][5] listings checked this week" on one line */
.flip { display: flex; gap: 3px; perspective: 300px; }
.flip .d { position: relative; width: 28px; height: 40px; border-radius: 2px; background: var(--ink);
  color: var(--bg); font: 400 30px/42px var(--serif); text-align: center; box-shadow: 0 2px 5px rgba(31,29,26,.22);
  animation: flipin .5s cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc(var(--i) * .12s + .2s); transform-origin: 50% 50%; }
.flip .d::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.6); }
@keyframes flipin { from { transform: rotateX(-90deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .flip .d { animation: none; } }
.counter .clabel { margin: 0; }   /* the section heading's own size (h2, 30px), same as the digits */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.filters input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 3px; font: inherit; background: var(--paper); }

.checknote { margin: 2px 0 0; font-size: var(--fs-fine); color: var(--muted); }

/* "What each agency says" groups: The villa / Services included / Amenities / Guest reviews */
table.facts tr.group th { font: 600 var(--fs-fine) var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  padding-top: 22px; border-bottom: 1px solid var(--ink); background: var(--bg); }
.subhead { margin: -4px 0 18px; font-size: var(--fs-body); }

/* asking the agencies: a tick per row, one button under the list */
.agencylist .pick input { width: 20px; height: 20px; accent-color: var(--sea); cursor: pointer; }
.agencylist .viewlink { font-size: var(--fs-small); color: var(--sea); }
.askbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }
.askbar button { padding: 14px 24px; font-size: 17px; }
.askbar button:disabled { opacity: .45; cursor: default; }
.stack .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stack .consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: var(--fs-small); }
.stack .consent input { width: 18px; height: 18px; margin-top: 2px; }


/* "Same villa, different names": one photo that flips between agencies (after TinEye's compare), then one row
   per agency (after Google Lens "exact matches") */
.flipview { border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: var(--paper); }
.flipimg { position: relative; }
.flipimg .srcimg { display: block; position: relative; }
.flipimg img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.flipimg .credit { top: 14px; right: 14px; bottom: auto; }
.vpos { position: absolute; top: 14px; left: 14px; background: rgba(31,29,26,.7); color: #fff; font-size: var(--fs-fine);
  padding: 4px 10px; border-radius: 3px; letter-spacing: .03em; }
.vprev, .vnext { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.88); color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.18); padding: 0 0 3px; }
.vprev { left: 14px; } .vnext { right: 14px; }
.vprev:hover, .vnext:hover { background: #fff; }
.vcap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 60px 22px 18px; color: #fff; font-size: var(--fs-body);
  background: linear-gradient(transparent, rgba(0,0,0,.6)); pointer-events: none; }
.vcap strong { font: 400 var(--fs-name) var(--serif); }
.vtabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 1px solid var(--line); }
.vtab { background: var(--paper); border: 0; border-right: 1px solid var(--line); color: var(--ink); padding: 15px 10px;
  font: 600 var(--fs-small) var(--sans); cursor: pointer; }
.vtab:last-child { border-right: 0; }
.vtab.on { background: var(--sea); color: #fff; }
.vtab:disabled { color: var(--muted); opacity: .45; cursor: default; }
.samephoto { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; }
.samephoto figure { margin: 0; min-width: 0; }
.samephoto .srcimg img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.samephoto .srcimg.blocked { aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; }
.samephoto figcaption { padding: 8px 0 0; font-size: var(--fs-fine); color: var(--muted); }
.samephoto figcaption b { display: block; font: 400 var(--fs-name-s)/1.2 var(--serif); color: var(--ink); }
@media (max-width: 820px) {   /* phones: swipe sideways, the next agency's copy peeks in */
  .samephoto { grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; scroll-padding: 0 20px; }
  .samephoto figure { scroll-snap-align: start; }
}
.vrows { list-style: none; padding: 0; margin: 18px 0 0; border-top: 1px solid var(--line); }
.vrows li { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.vrows li > div { display: grid; gap: 2px; }
.vrows b { font: 400 var(--fs-name-s) var(--serif); }
.vcount { font-size: var(--fs-fine); color: var(--muted); }
.vthumbs { display: flex; gap: 6px; justify-content: flex-end; }
.vthumbs img { width: 60px; height: 45px; object-fit: cover; border-radius: 3px; }
@media (max-width: 820px) {
  .vrows li { grid-template-columns: 1fr auto; }
  .vthumbs { display: none; }
  .vtabs { grid-auto-columns: minmax(130px, 1fr); overflow-x: auto; }
  .vprev, .vnext { width: 38px; height: 38px; font-size: 22px; }
}

/* "Where it's sold": the facts, every agency alike, alphabetical */
.otherlist { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.otherlist li { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1fr) 200px; gap: 16px;
  align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
/* tables use the plain text font only (Geri: "the font should be simple, don't use the headings font"): one size,
   the agency semibold, everything else regular. Fixed columns, the same in every row, so each sits under its head */
.otherlist .agency, .otherlist .shown, .offercell { font: 400 var(--fs-body)/1.35 var(--sans); color: var(--ink); }
.otherlist .agency { font-weight: 600; }
/* "Partner offer · Ad": separate from the facts, visibly an ad (EU comparison-tool principles) */
.offerbox { margin-top: 26px; background: var(--sand); border-radius: 6px; padding: 18px 22px; }
.offerbox .adlabel { margin: 0 0 6px; font: 700 var(--fs-caps) var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.offerbox .adlabel a { color: var(--muted); text-decoration: none; }
.otherlist .listhead { padding: 8px 0; font: 700 var(--fs-caps) var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.otherlist .agency .adtag { font-family: var(--sans); margin-left: 6px; vertical-align: 3px; }
.adtag { display: inline-block; font: 700 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
  background: var(--sun); padding: 2px 6px 1px; margin-right: 4px; vertical-align: 2px; }
.askpick { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 4px 0 14px; }
.askpick label { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); }
.askpick input { width: 18px; height: 18px; accent-color: var(--sea); }
.offerbox .fine { margin: 12px 0 0; }
@media (max-width: 820px) { .otherlist li { grid-template-columns: 1fr; gap: 2px; } .otherlist .listhead { display: none; } }
.offerbox button:disabled { opacity: .45; cursor: default; }
.otherlist .askcell { text-align: right; }
.button.small { padding: 9px 16px; font-size: var(--fs-fine); white-space: nowrap; }
@media (max-width: 820px) { .otherlist .askcell { text-align: left; margin-top: 6px; } }

/* Home search: villa name or destination first; "Browse all villas" beside it; link check folded away.
   Flat on the poster: cream field, navy button, no card or shadow */
.checker.herosearch { background: none; box-shadow: none; padding: 0; border-radius: 0; }
.herosearch label { color: var(--bg); font-size: var(--fs-caps); letter-spacing: .22em; text-transform: uppercase; }
.herosearch .searchrow { gap: 0 !important; background: var(--bg); }
.herosearch .searchrow input { border: 0; border-radius: 0; background: var(--bg); letter-spacing: 0; text-transform: none; }
.herosearch .browse a { color: var(--bg) !important; }
.herosearch .searchrow { display: flex; gap: 8px; margin-top: 2px; }
.herosearch .searchrow input { flex: 1; min-width: 0; }
.herosearch .searchrow button { white-space: nowrap; margin-top: 0; }
/* "Get the full picture" is long: on small phones the button goes under the box, full width */
@media (max-width: 480px) {
  .herosearch .searchrow { flex-direction: column; }
  .herosearch .searchrow input, .herosearch .searchrow button { width: 100%; }
}
.herosearch .browse { margin: 2px 0 0; font-size: var(--fs-small); }
.herosearch .browse { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.herosearch .browse a { color: var(--sea); font-weight: 700; text-decoration: none; }

/* home: "People recently searched" / the counters, centred over the villas (Geri) */
.home-recent > h2, .home-recent > p { text-align: center; }
/* the same space above and below the heading (Geri, 2026-10-22) */
.home-recent { padding-top: 48px; }
.home-recent > h2 { margin-bottom: 48px; }
.home-recent > p { margin: 28px 0 0; }
.home-recent > .destintro { max-width: 640px; margin: -24px auto 36px; font-size: var(--fs-body); }   /* "Browse all villas" clear of the last row */
.home-recent .counters { justify-content: center; }

/* home H1: "Verify luxury villas" (the domain phrase) always on one line (Geri); the size follows the screen width
   so it fits on phones, and the pitch takes the full width (the sun sits behind on the right) */
.nowrap { white-space: nowrap; }
.has-overlay .cover .inner { display: block; }
.has-overlay .cover .pitch { max-width: 820px; }
.has-overlay .cover h1 { font-size: var(--fs-hero); }
.has-overlay .cover .herosearch { max-width: 560px; margin-top: 26px; }

/* home example, an org chart (Geri, 2026-10-22): "Same villa" on top, arrows to the same photo at each agency with
   the name it uses. Phone first: the photos stack, branching off one line; desktop: three across. */
.tree { --line: 2px solid var(--bg); margin-top: 34px; max-width: 560px; color: var(--bg); }
/* the headline is the only big text (Geri: "too much text, but all of it is crucial"): the chart's heading is a label
   in spaced capitals and the names are captions, so it reads as a picture */
/* the same lettering as the search button (Geri: "Get the full picture" and this label should match) */
.troot { margin: 0; font: 700 var(--fs-fine)/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.tkids { list-style: none; margin: 10px 0 0 14px; padding: 0; }
.tkids li { position: relative; display: block;
  padding: 6px 0 6px 38px; animation: tin .5s ease both; animation-delay: calc(var(--k) * .25s + .2s); }
/* the line down from "Same villa" (stops at the last photo) and the arrow into each photo */
.tkids li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: var(--line); }
.tkids li:first-child::before { top: -8px; }
/* the last branch curves into its arrow instead of stopping in a hard corner */
.tkids li:last-child::before { bottom: calc(50% - 1px); width: 16px; border-bottom: var(--line); border-bottom-left-radius: 14px; }
.tkids li:last-child .tarrow { left: 16px; width: 14px; }
.tarrow { position: absolute; left: 0; top: calc(50% - 1px); width: 30px; border-top: var(--line); }
.tarrow::after { content: ""; position: absolute; right: -3px; top: -7px; border: 6px solid transparent; border-left: 9px solid var(--bg); border-right: 0; }
.tlines { display: none; }
.tclue { margin: 8px 0 0; font: 400 var(--fs-name-s)/1.25 var(--serif); }
/* each agency is a name tag (no agency photos on the home page: marketing is decoration, not review): its name for
   the villa, the agency, and a link to the same photo on its own site */
.ttag { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; background: var(--bg); color: var(--ink);
  padding: 10px 14px 9px; box-shadow: 0 6px 16px rgba(12,34,52,.25); }
.ttag .tname { font: 400 var(--fs-body)/1.2 var(--serif); }
.ttag .tagency { grid-column: 1; font: 700 var(--fs-caps)/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ttag a { grid-column: 2; grid-row: 1 / 3; font: 600 var(--fs-fine) var(--sans); color: var(--ink); white-space: nowrap; }
@keyframes tin { from { opacity: 0; transform: translateX(-10px); } }
@media (prefers-reduced-motion: reduce) { .tkids li { animation: none; } }
/* desktop: headline and search on the left; the chart on the right, three across */
@media (min-width: 821px) {
  .withstory .tree { text-align: center; }
  .has-overlay .cover.withstory::before { top: 72px; }   /* the sun sits above the chart's label, not behind it */
}
/* headline and chart side by side only where both fit (below this they stack, the chart under the search) */
@media (min-width: 1080px) {
  .has-overlay .cover.withstory .inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .withstory .tree { margin-top: 0; }
  /* the lines are one drawing (views.tree_lines), with room under "Same villa" */
  .tlines { display: block; margin-top: 12px; overflow: visible; }
  .tlines line { stroke: var(--bg); stroke-width: 2; stroke-linecap: round; }
  .tlines path { fill: var(--bg); }
  .tkids { display: flex; margin: 0; }
  .tkids { gap: 8px; }
  .tkids li { flex: 1; display: flex; padding: 8px 0 0; animation-name: tdown; }
  .tkids li::before, .tarrow { display: none; }
  /* three tags across: name, agency, link stacked and centred */
  .ttag { flex: 1; grid-template-columns: 1fr; padding: 14px 8px 12px; }
  .ttag a { grid-column: 1; grid-row: auto; margin-top: 6px; }
  }
@keyframes tdown { from { opacity: 0; transform: translateY(-8px); } }

/* phones: a menu button instead of the row of links (Geri, 2026-10-22); the links open as a full-width list */
.menubtn { display: none; }
@media (max-width: 820px) {
  .top .bar { flex-wrap: wrap; gap: 0; padding-top: 12px; padding-bottom: 12px; }
  .brand { font-size: clamp(20px, 6vw, 24px); }
  .menubtn { display: block; position: relative; width: 44px; height: 44px; margin: -6px -10px -6px auto; padding: 0;
    border: 0; background: none; color: var(--ink); cursor: pointer; }
  .menubtn span, .menubtn span::before, .menubtn span::after { position: absolute; left: 11px; width: 22px; height: 2px;
    background: currentColor; transition: transform .2s, background-color .2s; }
  .menubtn span { top: 21px; }
  .menubtn span::before, .menubtn span::after { content: ""; left: 0; }
  .menubtn span::before { top: -7px; } .menubtn span::after { top: 7px; }
  .top.open .menubtn span { background: transparent; }
  .top.open .menubtn span::before { transform: translateY(7px) rotate(45deg); }
  .top.open .menubtn span::after { transform: translateY(-7px) rotate(-45deg); }
  .top nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 10px 0 0; font-size: var(--fs-body); }
  .top.open nav { display: flex; }
  .top nav a { padding: 14px 0; border-top: 1px solid var(--line); }
  /* over the home poster: cream lines until it scrolls; an open menu is always solid cream */
  .top.overlay:not(.scrolled) .menubtn { color: var(--bg); }
  .top.overlay.open { background: var(--bg); box-shadow: 0 8px 24px rgba(12,34,52,.18); }
  .top.overlay.open .brand, .top.overlay.open nav a, .top.overlay.open .menubtn { color: var(--ink); }
  .has-overlay .cover .veil { padding-top: 96px; }   /* the header is one line now */
}
/* phones: the report's three figures stay on one line */
@media (max-width: 820px) {   /* four figures in four even columns; labels may wrap */
  .scoreboard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .scoreboard span { display: block; letter-spacing: .06em; line-height: 1.25; }
  .reportcover .status { overflow-wrap: anywhere; }
}
/* the smallest phones: smaller photos in the chart so the names fit beside them */
@media (max-width: 380px) {
  .tkids li { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; padding-left: 34px; }
  .tarrow { width: 26px; } .tkids li:last-child .tarrow { width: 10px; }
  .tname a { letter-spacing: .08em; }
}

/* the villa record (Geri, 2026-10-22; after Companies House + Carfax): status line in the poster, names on record
   with the photo proof, "show only differences" on the facts, a dated history */
.reportcover .status { margin: 14px 0 0; font-size: var(--fs-fine); color: var(--bg); opacity: .85; }
.reportcover .status .code { background: rgba(246,238,223,.16); color: var(--bg); }
table.record { width: 100%; border-collapse: collapse; border-top: 1px solid var(--ink); }
table.record th { padding: 10px 12px 8px 0; text-align: left; font: 700 var(--fs-caps) var(--sans); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
table.record td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.record td { font-size: var(--fs-body); color: var(--ink); }
table.record .nm { font-weight: 600; }
table.record .dt { white-space: nowrap; color: var(--muted); font-size: var(--fs-small); }
table.record .pf a { font-weight: 600; white-space: nowrap; }
table.record .pf span { display: block; margin-top: 2px; font-size: var(--fs-fine); color: var(--muted); }
.filelabel.samehead { margin-top: 30px; }   /* lettering from .filelabel, like "WHERE TO BOOK" (Geri) */
.onlydiff { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: var(--fs-small); cursor: pointer; }
.onlydiff input { width: 18px; height: 18px; accent-color: var(--ink); }
section.diffonly tr.same { display: none; }
.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--ink); }
.timeline li { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 6px 0 6px 20px; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--sun); }
.timeline time { color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
@media (max-width: 820px) {
  /* phones: each record row stacks; the column heads go */
  table.record tr:first-child { display: none; }
  table.record tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  table.record td { padding: 0; border: 0; }
  table.record .nm { grid-column: 1; }
  table.record .dt { grid-column: 2; grid-row: 1; text-align: right; }
  table.record .pf { grid-column: 1 / -1; margin-top: 4px; }
  .timeline li { grid-template-columns: 1fr; gap: 0; }
}
/* the cover's text column may shrink to the phone's width; long lines wrap instead of stretching it */
.reportcover figcaption { min-width: 0; }
.reportcover .status { white-space: normal; }
.reportcover h1 { overflow-wrap: break-word; }

/* the dossier (Geri, 2026-10-22: Riviera colours + dossier): the villa record as a case file. Same 4 colours and
   2 fonts: a cream file card with a tab (the registry code) on the sea poster, round stamps in sun-ink for what was
   checked, numbered sections like a file's */
/* the sea band runs edge to edge; the file card lines up with the logo and the menu (Geri: same width as nav and sections) */
.reportcover.dossier { display: block; width: 100vw; margin-left: calc(50% - 50vw); padding: 59px max(20px, calc(50vw - 520px)) 42px; }   /* 32px of sea above the tab and below the card (+10px navy strip) */
.reportcover.dossier::before { display: none; }   /* no sun on the record (Geri) */
.filecard { position: relative; border-radius: 10px; background: var(--bg); color: var(--ink); padding: 30px 30px 24px;
  box-shadow: 0 14px 30px rgba(12,34,52,.28); }
/* like a real folder (Geri: "make it like a dossier"): a tab with rounded top corners carrying a paper label with the
   file number (no back cover layer: Geri) */
.filetab { position: absolute; left: 22px; top: -27px; height: 28px; padding: 0 14px; display: flex; align-items: center;
  background: var(--bg); border-radius: 10px 10px 0 0; }   /* rounded like a paper folder's tab (Geri) */
.filetab span { padding: 3px 8px 1px; border-radius: 3px; font-size: 10px !important; background: var(--paper); border: 1px solid var(--line);
  font: 700 var(--fs-caps)/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.dossier figcaption { padding: 0; }
.dossier .soldas, .dossier h1, .dossier .scoreboard, .dossier .status, .dossier .mainname { color: var(--ink); }
.dossier .soldas { color: var(--sun-ink); }
.dossier .status { opacity: 1; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; margin-top: 18px; }
.dossier .scoreboard { border-top: 1px solid var(--ink); padding-top: 14px; }
.stamps { position: absolute; right: 22px; top: 20px; display: flex; gap: 10px; }
.stamp { display: grid; place-content: center; width: 124px; height: 124px; padding: 14px; border: 2px solid var(--sun-ink); border-radius: 50%;
  color: var(--sun-ink); text-align: center; transform: rotate(-9deg); font: 700 10px/1.3 var(--sans); letter-spacing: .14em;
  text-transform: uppercase; box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 5px var(--sun-ink); opacity: .9; }
.stamp b { display: block; margin-top: 4px; font: 400 17px/1.1 var(--serif); letter-spacing: 0; text-transform: none; }
.stamp.two { transform: rotate(7deg); }
.dossier h1 { padding-right: 150px; }
.namesline { margin: 16px 150px 0 0; padding-top: 14px; border-top: 1px solid var(--ink); font: 400 var(--fs-name-s)/1.3 var(--serif); color: var(--ink); }
.namesline .hl { white-space: nowrap; color: var(--sun-ink); text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 2px; text-underline-offset: 5px; }
/* the sea band starts right under the header (no cream gap) */
.report > .reportcover.dossier:first-child { margin-top: -28px; }
/* "Every place to book it" is a dossier card too, without the tab (Geri, 2026-10-22; section numbers removed):
   the paper tone and a soft shadow lift it off the cream page */
.report > section.booking, .report > section.factsec { margin-top: 40px; padding: 28px 30px 22px; background: var(--paper); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(12,34,52,.12); }
@media (max-width: 820px) { .report > section.booking, .report > section.factsec { padding: 22px 16px 16px; } }
/* the card's opening matches the cover: a gold label in spaced capitals, one serif line, a navy rule over the table */
.filelabel { margin: 0 0 8px; font: 700 var(--fs-caps)/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--sun-ink); }
h2.fileline { margin: 0 0 18px; font: 400 var(--fs-name)/1.25 var(--serif); }
.booking .otherlist { border-top: 0; }   /* no rule above the sand head row (Geri) */
@media (max-width: 820px) {
  .reportcover.dossier { padding: 47px 20px 30px; }
  .filecard { padding: 22px 18px 18px; }
  /* phones: the stamp floats right and the text flows around the circle, like a stamp on a page */
  .stamps { position: static; float: right; display: block; margin: -6px -6px 4px 10px; shape-outside: circle(50%); }
  .stamp { width: 88px; height: 88px; padding: 8px; font-size: 8px; }
  .stamp b { font-size: 13px; }
  .dossier h1 { padding-right: 0; }
  .namesline { margin-right: 0; }
  .filetab { left: 12px; padding: 0 12px; }
}
.booking > .fine { margin: 12px 0 0; }   /* the commission note clear of the last row */
/* table heads stand out as heads (Geri, 2026-10-22): a sand band, navy capitals; the band reaches a little past the
   text on both sides (box-shadow) so the columns don't move */
.otherlist .listhead { background: var(--sand); color: var(--ink); box-shadow: -12px 0 0 var(--sand), 12px 0 0 var(--sand); border-bottom: 0; }
table.record th { background: var(--sand); color: var(--ink); border-bottom: 0; }
table.record th:first-child, table.record td:first-child { padding-left: 12px; }

/* the merged table's "Same photo" column: the link, and where the photo sits on the agency's page under it */
.photocell a { font-weight: 600; white-space: nowrap; }
.photocell .where { display: block; font-size: var(--fs-fine); color: var(--muted); }
.booking > .fine + .fine { margin-top: 2px; }
@media (max-width: 820px) { .photocell { margin-top: 4px; } .photocell .where { display: inline; margin-left: 8px; } }
.otherlist .askcell .button { white-space: nowrap; }
.otherlist .shown a { color: var(--ink); text-underline-offset: 3px; }   /* each agency's name for the villa links to its page (Geri) */
a.adtag { text-decoration: none; }   /* the AD tag links to the partner explanation */

/* the booking table, tighter (Geri, 2026-10-22: "Booking.com and others have it better"): short rows, one smaller
   size, calm links (underline on hover only), a soft highlight on the row under the pointer, a compact button */
.booking .otherlist li { grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr) 128px minmax(0, 1fr) 176px; gap: 14px;
  padding: 9px 12px; margin: 0 -12px; }
.booking .otherlist li:not(.listhead):hover { background: var(--bg); }
.booking .otherlist .listhead { padding: 8px 12px; box-shadow: none; }
.booking .otherlist .agency, .booking .otherlist .shown, .booking .otherlist .offercell, .booking .photocell { font-size: var(--fs-small); }
.booking .otherlist a { text-decoration: none; }
.booking .otherlist a:hover { text-decoration: underline; }
.booking .photocell a { font-weight: 400; color: var(--muted); }
.booking .otherlist .button.small { padding: 8px 14px 7px; font-size: var(--fs-caps); }
@media (max-width: 820px) {
  .booking .otherlist li { grid-template-columns: 1fr; gap: 1px; padding: 12px; }
  .booking .otherlist .askcell { margin-top: 8px; }
}
.dossier .soldas { letter-spacing: .12em; }   /* labels a little closer together (Geri), matching .filelabel */

/* "What each agency says" in the same style as the booking table (Geri): sand head row with the agencies in navy
   capitals, compact rows in the plain font, group rows as small gold labels */
.factsec table.facts { background: none; font-size: var(--fs-small); }
.factsec table.facts th, .factsec table.facts td { padding: 8px 12px; }
.factsec table.facts tr.head th { background: var(--sand); color: var(--ink); border-bottom: 0;
  font: 700 var(--fs-caps)/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.factsec table.facts th { font-weight: 600; }
.factsec table.facts tr.group th { background: none; border-bottom: 1px solid var(--line); padding-top: 18px;
  font: 700 var(--fs-caps)/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--sun-ink); }
.factsec table.facts tr:not(.head):not(.group):hover { background: var(--bg); }
.factsec .onlydiff { margin-bottom: 14px; }
.factsec > .fine { margin: 12px 0 0; }
/* every label in capitals uses the same, closer letter spacing (Geri, 2026-10-22: "all headings like this are too
   far apart"): gold labels, table heads, group labels */
.filelabel, .dossier .soldas, .booking .otherlist .listhead, .factsec table.facts tr.head th,
.factsec table.facts tr.group th, table.record th { letter-spacing: .05em; }
.factsec .factwrap { margin: 0 -12px; }   /* the table text starts on the card's text edge, like the booking table */

/* phones, Google Flights-style (Geri, 2026-10-22): compact rows, no sideways tables */
.factphone { display: none; }
@media (max-width: 820px) {
  /* booking: the agency and its name on the left, the photo link on the right; the partner row is a highlighted box */
  .booking .otherlist li { grid-template-columns: 1fr auto; grid-template-areas: "agency photo" "shown photo" "offer offer" "ask ask";
    gap: 2px 12px; align-items: center; padding: 11px 12px; }
  .booking .otherlist .agency { grid-area: agency; }
  .booking .otherlist .shown { grid-area: shown; color: var(--muted); }
  .booking .otherlist .shown a { color: var(--muted); }
  .booking .photocell { grid-area: photo; margin: 0; font-size: var(--fs-fine); }
  .booking .otherlist .offercell { grid-area: offer; }
  .booking .otherlist .offercell:empty, .booking .otherlist .askcell:empty { display: none; }
  .booking .otherlist .askcell { grid-area: ask; margin-top: 8px; }
  .booking .otherlist .askcell .button { display: block; text-align: center; }
  .booking .otherlist li.partner { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; margin: 6px 0 8px; }
  .booking .otherlist li.partner .offercell { margin-top: 6px; font-weight: 600; }
  /* facts: one line per fact, the agencies grouped by their answer */
  .factsec .factwrap { display: none; }
  .factphone { display: block; }
  .fgroup { margin: 16px 0 4px; font: 700 var(--fs-caps)/1.2 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--sun-ink); }
  .frow { display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
  .frow .fl { font-weight: 600; }
  .frow .fl i { display: table; margin-top: 3px; font: 700 9px var(--sans); font-style: normal; letter-spacing: .05em;
    text-transform: uppercase; background: var(--sun); padding: 2px 5px 1px; }
  .frow .ans { display: block; }
  .frow .ans b { font-weight: 600; margin-right: 4px; }
  section.diffonly .frow.same, section.diffonly .fgroup.same { display: none; }
}

/* villa cards as small dossiers (Geri, 2026-10-22), matching the villa record's cover: a sea panel, a cream file card
   with a rounded tab, gold label, serif name, "Listed under N different names" */
.vfile .vsea { display: block; padding: 16px 0 0; }   /* no sea panel (Geri): the file card sits on the page */
.vfile .filecard { display: block; padding: 18px 18px 14px; border-radius: 8px; background: var(--paper); box-shadow: 0 8px 22px rgba(12,34,52,.14); }
.vfile .filetab { left: 14px; top: -24px; height: 25px; padding: 0 10px; }
.vfile .filelabel { display: block; margin: 0 0 6px; }
.vfile .vname { display: block; font: 400 var(--fs-name)/1.15 var(--serif); color: var(--ink); }
.vfile .vline { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ink); font: 400 var(--fs-body)/1.3 var(--serif); }
.vfile .vline .hl { color: var(--sun-ink); text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.vfile .vplaces { display: block; margin-top: 6px; font-size: var(--fs-fine); color: var(--muted); }
.vfile:hover .filecard { box-shadow: 0 10px 26px rgba(12,34,52,.22); }
.vfile:hover .vname { text-decoration: underline; text-underline-offset: 4px; }
.vfile .hit { margin-top: 8px; }
.vfile .filetab { background: var(--paper); }
.vgrid:has(.vfile) { gap: 22px 16px; }   /* dossier cards need a little air between them */

/* no rule between the name and "Listed under…" (Geri, 2026-10-22: "that horizontal line is so ugly"): space does the job */
.vfile .vline { border-top: 0; padding-top: 0; margin-top: 8px; }
.namesline { border-top: 0; padding-top: 0; margin-top: 10px; }
.vfile .filetab { top: -23px; height: 24px; padding: 0 10px; }   /* the folder tab carries the destination (Geri) */
/* "Listed under N different names" in the plain text font (Geri, 2026-10-22), the count semibold in gold */
.vfile .vline, .namesline { font-family: var(--sans); font-weight: 400; }
.vfile .vline { font-size: var(--fs-small); }
.vfile .vline .hl, .namesline .hl { font-weight: 600; }

/* home chart with photos again (Geri, 2026-10-22): photo on top of each tag, the name, the agency as the credit link */
.ttag.ph { display: block; padding: 6px 6px 10px; }
.ttag.ph .tphoto { display: block; aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 8px; background: var(--sand); }
.ttag.ph .tphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ttag.ph .tname { display: block; padding: 0 4px; }
.ttag.ph a.tagency { display: block; margin-top: 3px; padding: 0 4px; text-decoration: none; }
.ttag.ph a.tagency:hover { text-decoration: underline; }
@media (max-width: 1079px) {   /* stacked: photo left, name and agency right */
  .ttag.ph { display: grid; grid-template-columns: 104px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: end; }
  .ttag.ph .tphoto { grid-row: 1 / 3; margin: 0; }
  .ttag.ph .tname { align-self: end; }
  .ttag.ph a.tagency { align-self: start; grid-column: 2; }
}
@media (max-width: 1079px) {
  .ttag.ph .tphoto { grid-column: 1; grid-row: 1 / 3; }
  .ttag.ph .tname { grid-column: 2; grid-row: 1; align-self: end; padding: 0; }
  .ttag.ph a.tagency { grid-column: 2; grid-row: 2; align-self: start; padding: 0; }
}
.tclue { font: 400 var(--fs-body)/1.35 var(--sans); }   /* the clue in the text font; the quoted names keep the serif (Geri) */
.ttag .tname { font: 600 var(--fs-small)/1.3 var(--sans); }   /* names under the photos in the clear text font (Geri) */

/* tags, clearer (Geri): agency label first, then the name, bold, no quotes; the whole tag is the link */
a.ttag.ph { text-decoration: none; color: var(--ink); }
a.ttag.ph:hover .tname { text-decoration: underline; text-underline-offset: 3px; }
.ttag.ph .tagency { display: block; margin: 0 0 2px; padding: 0 4px; font: 700 var(--fs-caps)/1.3 var(--sans); letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); }
.ttag.ph .tname { display: block; padding: 0 4px; font: 600 var(--fs-small)/1.25 var(--sans); }
@media (max-width: 1079px) {
  .ttag.ph .tagency { grid-column: 2; grid-row: 1; align-self: end; padding: 0; }
  .ttag.ph .tname { grid-column: 2; grid-row: 2; align-self: start; }
}
@media (max-width: 1079px) { .ttag.ph .tname { padding: 0; } }
.vfile .vsea { padding-top: 24px; }
/* even padding on the villa cards (Geri: "the spacing is not even"): the same space above the name, below the last
   line and on the left */
.vfile .filecard { padding: 18px; }
.vfile .vname { line-height: 1.05; }
.vfile .vline { line-height: 1.2; }
.vfile .filecard { padding: 22px 18px 16px; }   /* evens out the serif line and the underline: 18px of space on every side */
/* less empty space before the footer (Geri, 2026-10-22): 40px above the agency band, and when a page ends with that
   band it sits straight on the navy footer (no cream strip between them) */
.home-recent + .band, .band { margin-top: 40px; }
footer { margin-top: 40px; }
main:has(> .band:last-child) { padding-bottom: 0; }
main:has(> .band:last-child) + footer, body:has(main > .band:last-child) footer { margin-top: 0; }
main:has(> .report) { padding-bottom: 0; }   /* villa pages: 40px from the last section to the footer, not ~100px */

/* layouts for any number of agencies (Geri, 2026-10-22: "a villa can have 25 names") */
.otherlist:not(.all) li.more { display: none; }
.showall { margin: 12px 0 0; padding: 8px 14px; border: 1px solid var(--ink); background: none; color: var(--ink);
  font: 600 var(--fs-small) var(--sans); cursor: pointer; border-radius: 4px; }
.showall:hover { background: var(--bg); }
/* the facts: one line per fact on every screen (a 25-column table can't work), label left, answers right */
.factsec .factwrap { display: none; }
.factphone { display: block; }
@media (min-width: 821px) {
  .fgroup { margin: 18px 0 4px; font: 700 var(--fs-caps)/1.2 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--sun-ink); }
  .frow { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
  .frow .fl { font-weight: 600; }
  .frow .fl i { display: table; margin-top: 3px; font: 700 9px var(--sans); font-style: normal; letter-spacing: .05em;
    text-transform: uppercase; background: var(--sun); padding: 2px 5px 1px; }
  .frow .ans { display: block; }
  .frow .ans b { font-weight: 600; margin-right: 6px; }
  section.diffonly .frow.same, section.diffonly .fgroup.same { display: none; }
  .frow:hover { background: var(--bg); }
}
.frow .ans span[title] { border-bottom: 1px dotted var(--muted); cursor: help; }
/* the same-photo strip never squeezes: at most 4, evenly */
@media (min-width: 821px) { .samephoto { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); } }
/* fact answers (Geri: "visually confusing"): the value in a sand chip, its agencies after it; "Not listed by N
   agencies" one quiet line; yes/no facts as "2 of 5 agencies" */
.frow .ans { display: flex; align-items: baseline; gap: 8px; margin: 2px 0; }
.frow .ans b.chip { flex: none; min-width: 34px; padding: 2px 8px 1px; border-radius: 4px; background: var(--sand);
  font-weight: 600; text-align: center; margin: 0; }
.frow .ans .who { color: var(--ink); }
.frow .ans.none { color: var(--muted); font-size: var(--fs-fine); }
.frow .ans span[title] { border-bottom: 1px dotted var(--muted); cursor: help; }
/* the booking table framed (Geri, 2026-10-22): a thin border with rounded corners, no lines between rows; every other
   row faintly tinted so the eye can follow across */
.booking .otherlist { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.booking .otherlist li { margin: 0; border-bottom: 0; }
.booking .otherlist .listhead { border-radius: 0; }
.booking .otherlist li:not(.listhead):nth-child(odd) { background: rgba(21,50,74,.035); }
.booking .otherlist li:not(.listhead):hover { background: var(--bg); }
@media (max-width: 820px) {
  .booking .otherlist li.partner { margin: 0; border: 0; border-radius: 0; background: var(--bg); }
}

/* "Compare agencies" as booking options, like Google Hotels (Geri, 2026-10-22): one row per agency, the agency and a
   quiet "calls it …" line on the left, the offer, ONE action on the right; no column heads */
.booking .otherlist.options li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: none;
  gap: 4px 18px; align-items: center; padding: 12px 16px; }
.booking .options .opt { display: grid; gap: 2px; min-width: 0; }
.booking .options .agency { font: 600 var(--fs-body)/1.25 var(--sans); }
.booking .options .calls { font-size: var(--fs-fine); color: var(--muted); }
.booking .options .calls a { color: var(--muted); }
.booking .options .offercell { font-size: var(--fs-small); text-align: right; }
.booking .options .askcell { justify-self: end; }
.booking .options .viewlink { display: inline-block; padding: 7px 14px 6px; border: 1px solid var(--ink); border-radius: 4px;
  font: 600 var(--fs-fine) var(--sans); color: var(--ink); text-decoration: none; white-space: nowrap; }
.booking .options .viewlink:hover { background: var(--ink); color: var(--bg); }
@media (max-width: 820px) {
  .booking .otherlist.options li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: none; padding: 12px; }
  .booking .options .opt { grid-column: 1; grid-row: 1; }
  .booking .options .askcell { grid-column: 2; grid-row: 1; margin: 0; }
  .booking .options .offercell { grid-column: 1 / -1; grid-row: 2; text-align: left; }
  .booking .options .offercell:empty { display: none; }
  .booking .options li.partner .askcell { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; justify-self: stretch; }
}
@media (max-width: 820px) {   /* undo the old table's phone areas inside the new option rows */
  .booking .options .opt .agency, .booking .options .opt .calls { grid-area: auto; }
  .booking .options .opt { display: grid; grid-template-columns: 1fr; }
}
.booking .options .calls a { white-space: nowrap; }   /* "photo 15 of 32" never breaks in the middle */

/* three things per row (Geri, after Google Flights): agency · its name for the villa · action; the partner's offer
   sits beside its button */
.booking .otherlist.options li { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) auto auto; }
.booking .options .agency { font: 600 var(--fs-body)/1.25 var(--sans); }
.booking .options .calls { font: 400 var(--fs-body)/1.25 var(--sans); color: var(--ink); }
@media (max-width: 820px) {
  .booking .otherlist.options li { grid-template-columns: minmax(0, 1fr) auto; }
  .booking .options .agency { grid-column: 1; grid-row: 1; }
  .booking .options .calls { grid-column: 1; grid-row: 2; font-size: var(--fs-small); color: var(--muted); }
  .booking .options .askcell { grid-column: 2; grid-row: 1 / 3; }
  .booking .options .offercell { grid-column: 1 / -1; grid-row: 3; }
  .booking .options li.partner .askcell { grid-column: 1 / -1; grid-row: 4; }
}
@media (min-width: 821px) {   /* the same columns in every row, so the names line up under each other */
  .booking .otherlist.options li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 210px 168px; }
}
.offerlabel { font-weight: 600; }

/* the list holds only agency + its name (Geri, 2026-10-22); the name links to the listing */
.booking .otherlist.names li { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 2fr); gap: 4px 18px; padding: 11px 16px; }
.booking .names .calls { color: var(--ink); text-decoration: none; }
.booking .names .calls:hover { text-decoration: underline; }
@media (max-width: 820px) {
  .booking .otherlist.names li { grid-template-columns: 1fr; padding: 10px 12px; }
  .booking .names .agency, .booking .names .calls { grid-column: 1; grid-row: auto; }
  .booking .names .calls { font-size: var(--fs-small); color: var(--muted); }
}
/* the partner offer: its own ad box under the list, clearly separate from the results */
.adbox { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--sun); border-radius: 8px; background: var(--bg); }
.adhead { margin: 0 0 8px; font: 700 var(--fs-caps)/1.2 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--sun-ink); }
.adhead .adtag { margin-right: 6px; }
.adrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 6px 0; font-size: var(--fs-small); }
.adrow + .adrow { border-top: 1px solid var(--line); }
.adrow b { font-weight: 600; }
.adrow .muted { color: var(--muted); }
.adrow .adoffer { display: block; margin-top: 2px; }
.adrow .button { flex: none; }
@media (max-width: 820px) { .adrow { flex-direction: column; align-items: stretch; } .adrow .button { text-align: center; } }

/* partners in the list: AD tag + one short offer line; one enquiry bar for the whole villa (Geri: scales to 10) */
.booking .names .rowoffer { display: block; margin-top: 2px; font: 400 var(--fs-fine)/1.3 var(--sans); color: var(--sun-ink); }
.booking .names .adtag { margin-left: 6px; }
.askbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: 8px; font-size: var(--fs-small); }
.askbar .button { flex: none; }
@media (max-width: 820px) { .askbar { flex-direction: column; align-items: stretch; text-align: center; } }
.askpick { display: grid; gap: 8px; margin: 4px 0 6px; }

/* the photo proof card, under the cover, same dossier card as the others (Geri) */
.report > section.photosec { margin-top: 40px; padding: 24px 30px 22px; background: var(--paper); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(12,34,52,.12); }
.photosec .filelabel.samehead { margin-top: 0; }
@media (max-width: 820px) { .report > section.photosec { padding: 20px 16px 16px; } }
@media (min-width: 821px) { .booking .names .rowoffer { grid-column: 1; grid-row: 2; margin-top: -2px; } }
@media (max-width: 820px) { .booking .names .rowoffer { grid-column: 1; grid-row: auto; } }

/* the same photo at each agency, inside the cover card under "Listed under N different names" (Geri) */
.dossier .samephoto { margin-top: 20px; }
.dossier .samephoto figcaption b { font-size: var(--fs-small); font-family: var(--sans); font-weight: 600; }
.samemore { margin: 8px 0 0; font-size: var(--fs-fine); color: var(--muted); }
@media (max-width: 820px) { .dossier .samephoto { margin: 16px -18px 0; padding: 0 18px; scroll-padding: 0 18px; } }
.dossier .samephoto figcaption { padding: 8px 0 0; }   /* the cover strips figcaption spacing; the photo captions need it */

/* the same photo at each agency as a sideways strip (Geri, 2026-10-22): desktop shows 3 and half of the 4th, so it's
   clear there are more; arrows on desktop, swipe on phones; works for any number of agencies */
.samewrap { position: relative; }
.dossier .samephoto, .samephoto { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 15px) / 3.5);
  gap: 5px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.samephoto::-webkit-scrollbar { display: none; }
.samephoto figure { scroll-snap-align: start; }
.sp-prev, .sp-next { position: absolute; top: calc((100% - 40px) / 2 - 20px); width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--bg); color: var(--ink); font: 400 26px/1 var(--serif); cursor: pointer; box-shadow: 0 4px 12px rgba(12,34,52,.3); z-index: 3; }
.sp-prev { left: -14px; } .sp-next { right: -14px; }
.sp-prev:hover, .sp-next:hover { background: var(--ink); color: var(--bg); }
@media (max-width: 820px) {
  .dossier .samephoto, .samephoto { grid-auto-columns: 78%; }
  .sp-prev, .sp-next { display: none; }   /* phones swipe */
}
/* the strip is the agency list now (Geri): a plain tile where an agency has no shared photo; captions with the
   name (link to the listing), the agency, AD + offer for partners; the enquiry bar under it */
.samephoto .nophoto { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; background: var(--sand);
  border-radius: 2px; font-size: var(--fs-fine); color: var(--muted); text-align: center; padding: 10px; }
.dossier .samephoto figcaption { display: grid; gap: 1px; }
.samephoto figcaption .nm { font: 600 var(--fs-small)/1.3 var(--sans); color: var(--ink); text-decoration: none; }
.samephoto figcaption .nm:hover { text-decoration: underline; }
.samephoto figcaption .ag { font-size: var(--fs-fine); color: var(--muted); }
.samephoto figcaption .rowoffer { font-size: var(--fs-fine); color: var(--sun-ink); }
.dossier .askbar { margin-top: 18px; background: var(--paper); }

/* no photos on the villa page (Geri, 2026-10-22): one small card per agency in the cover, a "Verify photo" button that
   opens the matching photo on the agency's own site */
.agencycards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 20px; }
.agencycards:not(.all) .acard.more { display: none; }
.acard { display: flex; flex-direction: column; gap: 2px; padding: 14px 14px 12px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--paper); }
.acard .nm { font: 600 var(--fs-body)/1.3 var(--sans); color: var(--ink); text-decoration: none; }
.acard .nm:hover { text-decoration: underline; }
.acard .ag { font-size: var(--fs-small); color: var(--muted); }
.acard .rowoffer { font-size: var(--fs-fine); color: var(--sun-ink); }
.verifybtn { align-self: flex-start; margin-top: 10px; padding: 6px 12px 5px; border: 1px solid var(--ink); border-radius: 4px;
  font: 600 var(--fs-fine) var(--sans); color: var(--ink); text-decoration: none; white-space: nowrap; }
.verifybtn:hover { background: var(--ink); color: var(--bg); }
@media (max-width: 820px) { .agencycards { grid-template-columns: 1fr 1fr; gap: 8px; } .acard { padding: 12px; } }
@media (max-width: 380px) { .agencycards { grid-template-columns: 1fr; } }

/* the agency cards as a sideways strip (Geri): 3 and a half visible on desktop, arrows; phones show 1.5 and swipe */
.agencycards { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 30px) / 3.5);
  gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-top: 20px; padding-bottom: 2px; }
.agencycards::-webkit-scrollbar { display: none; }
.agencycards .acard { scroll-snap-align: start; }
.samewrap .sp-prev, .samewrap .sp-next { top: calc(50% - 10px); }
@media (max-width: 820px) { .agencycards { grid-template-columns: none; grid-auto-columns: 64%; gap: 8px; } }
.samewrap .sp-prev { left: -26px; } .samewrap .sp-next { right: -26px; } .samewrap .sp-prev, .samewrap .sp-next { width: 34px; height: 34px; font-size: 22px; }

/* booking section (Geri): recommended partners (ad) then all places to book */
.bookhead { margin: 18px 0 8px; display: flex; align-items: center; gap: 6px; }
.booking .otherlist.partners { border: 1px solid var(--sun); border-radius: 8px; overflow: hidden; }
.booking .otherlist.partners li { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 1.2fr); gap: 4px 18px;
  padding: 11px 16px; background: var(--bg); }
.booking .partners .calls { color: var(--ink); }
.booking .partners .rowoffer { margin: 0; font-size: var(--fs-small); }
@media (max-width: 820px) { .booking .otherlist.partners li { grid-template-columns: 1fr; padding: 10px 12px; } }
.booking .otherlist.partners li { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.booking > .bookhead:first-child { margin-top: 0; }
/* partners and the enquiry button in ONE box (Geri) */
.partnerbox { display: flex; align-items: center; gap: 16px; border: 1px solid var(--sun); border-radius: 8px; background: var(--bg); padding-right: 16px; }
.partnerbox .otherlist.partners { flex: 1; border: 0; border-radius: 0; }
.partnerbox .button { flex: none; }
@media (max-width: 820px) { .partnerbox { flex-direction: column; align-items: stretch; padding: 0 12px 12px; } .partnerbox .button { text-align: center; } }
.partnerbox .otherlist.partners li { background: none; }   /* one tone for the whole box */
@media (max-width: 820px) {
  .partnerbox .otherlist.partners li { grid-template-columns: 1fr; padding: 12px 0 10px; }
  .partnerbox .otherlist.partners .agency, .partnerbox .otherlist.partners .rowoffer { grid-column: 1; grid-row: auto; }
}
.booking .partnerbox .otherlist li:not(.listhead) { background: none; }
.partnerbox .pname { font-weight: 400; color: var(--muted); margin-left: 4px; }
.booking .otherlist.partners li { grid-template-columns: 1fr; gap: 2px; }

/* partner rows: who | offer tag (Geri: no clutter) */
.booking .partnerbox .otherlist.partners li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px;
  align-items: center; padding: 14px 16px; }
.partnerbox .who { display: grid; gap: 2px; }
.partnerbox .who b { font: 600 var(--fs-body)/1.25 var(--sans); }
.partnerbox .pname { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.partnerbox .offertag { justify-self: start; display: grid; gap: 1px; padding: 6px 12px 5px; border-radius: 6px; background: var(--sand);
  font-size: var(--fs-small); color: var(--ink); }
.partnerbox .offertag span { font: 700 9px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--sun-ink); }
.partnerbox .otherlist.partners li + li { border-top: 1px solid var(--line); }
@media (max-width: 820px) {
  .booking .partnerbox .otherlist.partners li { grid-template-columns: 1fr; gap: 8px; padding: 14px 0 12px; }
  .partnerbox .who, .partnerbox .offertag { grid-column: 1; grid-row: auto; }
}
@media (max-width: 820px) { .partnerbox { gap: 4px; } .booking .partnerbox .otherlist.partners li { padding-bottom: 8px; } }
@media (max-width: 820px) {   /* even spacing inside the partner box on phones: 16px around, 12px between */
  .partnerbox { padding: 16px; gap: 12px; }
  .booking .partnerbox .otherlist.partners li { padding: 0; gap: 10px; }
  .booking .partnerbox .otherlist.partners li + li { padding-top: 12px; }
  .partnerbox .otherlist.partners { margin: 0; }
}
.booking .partnerbox .otherlist.partners li { grid-template-areas: none; grid-template-rows: none; grid-auto-rows: auto; }   /* no empty rows left over from the old table */

/* what we always compare (Geri, 2026-10-22): the villa in one line, then one row per agency: services it lists, rating */
.villaline { margin: 0 0 6px; font: 600 var(--fs-body)/1.4 var(--sans); }
.flags { margin: 0 0 14px; font-size: var(--fs-small); color: var(--muted); }
.flags .flag { margin-right: 12px; border-bottom: 1px dotted var(--muted); cursor: help; }
.flags i { font: 700 9px var(--sans); font-style: normal; letter-spacing: .05em; text-transform: uppercase; background: var(--sun);
  color: var(--ink); padding: 2px 5px 1px; margin-right: 4px; }
.incl { list-style: none; margin: 14px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.incl li { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 12px 16px; }
.incl li:nth-child(odd) { background: rgba(21,50,74,.035); }
.incl .agency { font-weight: 600; }
.stags { display: flex; flex-wrap: wrap; gap: 6px; }
.stag { padding: 3px 9px 2px; border-radius: 12px; background: var(--sand); font-size: var(--fs-fine); }
.incl .none { font-size: var(--fs-fine); color: var(--muted); }
.rate { font-size: var(--fs-small); white-space: nowrap; }
.rate span { color: var(--muted); }
.rate.none { color: var(--muted); font-size: var(--fs-fine); }
@media (max-width: 820px) {
  .incl li { grid-template-columns: 1fr auto; padding: 12px; }
  .incl .agency { grid-column: 1; } .incl .rate { grid-column: 2; grid-row: 1; }
  .incl .stags { grid-column: 1 / -1; }
}

/* the villa's figures as chips per agency (Geri): white with a thin line; gold outline where agencies differ */
.ftag { padding: 2px 9px 1px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); font-size: var(--fs-fine); font-weight: 600; }
.ftag.diff { border: 1.5px solid var(--sun); background: #fdf3e2; cursor: help; }
.flags .ftag { margin-right: 4px; }

/* what each agency says as aligned columns (Geri: "in lines") with a "Highlight differences" toggle */
.cmpwrap { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-top: 12px; }
table.cmp { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
table.cmp th, table.cmp td { padding: 11px 14px; text-align: left; vertical-align: top; }
table.cmp tr.head th { background: var(--sand); font: 700 var(--fs-caps)/1.3 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
table.cmp tr:not(.head):nth-child(even) { background: rgba(21,50,74,.035); }
table.cmp tr:not(.head) th { font-weight: 600; white-space: nowrap; }
table.cmp td { white-space: nowrap; font-weight: 600; }
table.cmp td.nl { color: var(--muted); font-weight: 400; }
table.cmp td.inc { white-space: normal; font-weight: 400; }
table.cmp td.inc .stags { display: flex; flex-wrap: wrap; gap: 5px; }
table.cmp td.inc, table.cmp td.rv { font-weight: 400; }
table.cmp td.rv span { color: var(--muted); }
table.cmp .stag { display: inline-block; }
section.hl table.cmp td.d, section.hl table.cmp th.d { background: #fdf0d8; box-shadow: inset 0 0 0 0 var(--sun); }
section.hl table.cmp tr.head th.d { background: var(--sun); }
@media (max-width: 820px) {
  .cmpwrap { border: 0; border-radius: 0; overflow: visible; }
  table.cmp, table.cmp tbody { display: block; }
  table.cmp tr.head { display: none; }
  table.cmp tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; }
  table.cmp tr:not(.head):nth-child(even) { background: none; }
  table.cmp th, table.cmp td { padding: 0; }
  table.cmp tr > th { grid-column: 1 / -1; font-size: var(--fs-body); margin-bottom: 4px; }
  table.cmp td { display: flex; justify-content: space-between; gap: 6px; padding: 3px 6px; border-radius: 4px; }
  table.cmp td::before { content: attr(data-label); font-weight: 400; color: var(--muted); }
  table.cmp td.inc, table.cmp td.rv { grid-column: 1 / -1; display: block; }
  table.cmp td.inc::before, table.cmp td.rv::before { display: block; margin-bottom: 4px; font-size: var(--fs-fine); }
}

/* "Compare agencies" with the highlight switch on the right of the same line (Geri) */
.cmphead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cmphead .fileline { margin: 0; }
.cmphead .onlydiff { margin: 0; font-size: var(--fs-small); gap: 8px; }
.cmphead .onlydiff input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw { position: relative; width: 34px; height: 20px; border-radius: 10px; background: var(--line); transition: background .2s; flex: none; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(12,34,52,.3); transition: transform .2s; }
.onlydiff input:checked + .sw { background: var(--sun); }
.onlydiff input:checked + .sw::after { transform: translateX(14px); }
.onlydiff input:focus-visible + .sw { outline: 2px solid var(--ink); outline-offset: 2px; }
.factsec .cmpwrap { margin-top: 14px; }
@media (max-width: 820px) {   /* compact agency blocks (Geri: "make mobile better"): name, one line of figure tags, service tags */
  table.cmp tr { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; margin-bottom: 8px; }
  table.cmp tr > th { flex-basis: 100%; margin: 0 0 2px; }
  table.cmp td { display: inline-flex; gap: 4px; padding: 3px 9px 2px; border: 1px solid var(--line); border-radius: 12px;
    font-size: var(--fs-fine); background: var(--paper); }
  table.cmp td::before { font-size: var(--fs-fine); }
  table.cmp td.nl { display: none; }
  table.cmp td.inc { flex-basis: 100%; display: block; padding: 0; border: 0; background: none; }
  table.cmp td.inc::before { display: none; }
  section.hl table.cmp td.d { background: #fdf0d8; border-color: var(--sun); }
  .cmphead { margin-bottom: 4px; }
}

/* desktop: services as ✓ columns, one line per agency; the tags column is for phones only */
table.cmp .inc { display: none; }
table.cmp .svc { text-align: center; font-weight: 600; }
table.cmp td.svc.nl { color: var(--line); }
table.cmp tr.head th.svc { text-align: center; }
table.cmp th, table.cmp td { padding: 11px 10px; }
@media (max-width: 820px) {
  table.cmp td.svc { display: none; }
  table.cmp td.inc { display: block; }
}
@media (min-width: 821px) {   /* every column fits: fixed layout, the agency column wider, headers may wrap */
  table.cmp { table-layout: fixed; }
  table.cmp tr.head th { white-space: normal; font-size: 10px; letter-spacing: .03em; padding: 10px 6px; vertical-align: bottom; }
  table.cmp tr.head th:first-child { width: 22%; padding-left: 14px; }
  table.cmp td, table.cmp tr:not(.head) th { padding: 11px 6px; }
  table.cmp tr:not(.head) th { padding-left: 14px; white-space: normal; }
  .cmpwrap { overflow-x: auto; }
}

/* back to: figures as columns, services as compact tags in one line (Geri) */
table.cmp .inc { display: table-cell; }
table.cmp td.inc .stags { flex-wrap: nowrap; gap: 4px; }
table.cmp .stag { padding: 2px 8px 1px; font-size: 11px; white-space: nowrap; }
table.cmp .stag.plus { background: none; border: 1px solid var(--line); cursor: help; }
@media (min-width: 821px) {
  table.cmp { table-layout: auto; }
  table.cmp .stag.x { display: none; }
  table.cmp tr.head th { font-size: var(--fs-caps); white-space: nowrap; padding: 10px; }
  table.cmp tr.head th:first-child { width: auto; padding-left: 14px; }
  table.cmp td, table.cmp tr:not(.head) th { padding: 11px 10px; vertical-align: middle; }
  table.cmp tr:not(.head) th { padding-left: 14px; white-space: nowrap; }
  table.cmp tr.head th.inc { width: 52%; }
}
@media (max-width: 820px) {
  table.cmp td.inc { display: block; }
  table.cmp td.inc .stags { flex-wrap: wrap; }
  table.cmp .stag.plus { display: none; }
}
@media (max-width: 820px) {   /* phones: compact again (a later padding rule had enlarged the figure tags) */
  table.cmp tr > th { padding: 0; }
  table.cmp td { padding: 3px 9px 2px; }
  table.cmp td.inc { padding: 0; }
  table.cmp .stag { font-size: var(--fs-fine); padding: 3px 9px 2px; }
}

/* every section of the villa record is the same dossier card with the same heading (Geri) */
.report > section.card { margin-top: 40px; padding: 28px 30px 26px; background: var(--paper); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(12,34,52,.12); }
.report > section.card > h2.fileline, .report > section.factsec h2.fileline { margin: 0 0 16px; font: 400 var(--fs-name)/1.25 var(--serif); }
@media (max-width: 820px) { .report > section.card { padding: 22px 16px 18px; } }
/* similar villas: same heading, no card behind them (Geri): the villa cards sit on the page */
.report > section.similar { margin-top: 40px; }
.report > section.similar > h2.fileline { margin: 0 0 16px; font: 400 var(--fs-name)/1.25 var(--serif); }
.report > section.similar { padding-top: 0; }

/* compare agencies (Geri, 2026-10-23): what every agency lists once, each row only its extras, in plain words */
.common { margin: 0 0 12px; font-size: var(--fs-small); }
.common b { font-weight: 600; }
table.cmp td.inc { display: table-cell; font-weight: 400; white-space: normal; }
table.cmp .also { font-size: var(--fs-small); }
table.cmp .none { color: var(--muted); font-size: var(--fs-small); }
@media (max-width: 820px) {
  table.cmp td.inc { display: block; flex-basis: 100%; padding: 2px 0 0; border: 0; background: none; }
  table.cmp td.inc .also::before { content: "Also: "; font-weight: 600; }
}

/* partner row: who | offer | View listing + Enquire (Geri, 2026-10-23) */
.partnerbox { padding-right: 0; }
.booking .partnerbox .otherlist.partners li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.pacts { display: flex; align-items: flex-start; gap: 10px; }
.pacts .viewlink { margin-top: 1px; padding: 9px 14px 8px; }
.penq { display: grid; justify-items: center; gap: 4px; }
.penq small { font-size: var(--fs-fine); color: var(--muted); }
@media (max-width: 820px) {
  .partnerbox { padding: 16px; }
  .pacts { grid-column: 1; flex-direction: column-reverse; align-items: stretch; gap: 8px; }
  .pacts .viewlink, .penq .button { text-align: center; }
  .penq { justify-items: stretch; text-align: center; }
}
.pacts .viewlink { display: inline-block; border: 1px solid var(--ink); border-radius: 4px; font: 600 var(--fs-fine) var(--sans);
  color: var(--ink); text-decoration: none; white-space: nowrap; }
.pacts .viewlink:hover { background: var(--ink); color: var(--bg); }
@media (max-width: 820px) {
  .booking .partnerbox .otherlist.partners li { grid-template-columns: 1fr !important; }
  .partnerbox .who, .partnerbox .offertag, .pacts { grid-column: 1 / -1; width: 100%; }
  .partnerbox .offertag { justify-self: stretch; }
  .partnerbox .otherlist.partners { width: 100%; }
}
.pacts { align-items: center; } .penq .button { padding-left: 28px; padding-right: 28px; }
@media (max-width: 820px) { .pacts { align-items: stretch; } .penq { display: block; } .penq .button, .pacts .viewlink { display: block; width: 100%; box-sizing: border-box; text-align: center; } }
@media (max-width: 820px) { table.cmp td.inc .also::before { content: "Included: "; } }

/* villa cards as vintage luggage labels (Geri, 2026-10-23): thick navy edge, thin gold inner ring, the destination on a
   navy band, centred serif name; slightly tilted like stickers on a suitcase, straight on hover */
.vgrid:has(.vsticker) { gap: 28px 22px; padding: 6px 4px; }
.vsticker { display: block; text-decoration: none; color: var(--ink); max-width: none; }
.vsticker .stk { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 18px 18px; background: var(--paper); border: 3px solid var(--ink); border-radius: 18px;
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--sun), 0 6px 14px rgba(12,34,52,.18);
  transform: rotate(-1.5deg); transition: transform .2s, box-shadow .2s; }
.vgrid > .vsticker:nth-child(even) .stk { transform: rotate(1.2deg); }
.vgrid > .vsticker:nth-child(3n) .stk { transform: rotate(-.6deg); }
.vsticker:hover .stk { transform: rotate(0) translateY(-2px); box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--sun), 0 10px 20px rgba(12,34,52,.25); }
.stk-dest { align-self: stretch; margin: 10px -8px 14px; padding: 6px 10px 5px; background: var(--ink); color: var(--bg);
  border-radius: 999px; font: 700 var(--fs-caps)/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.vsticker .vname { display: block; font: 400 var(--fs-name)/1.15 var(--serif); }
.vsticker .vline { display: block; margin-top: 8px; font-size: var(--fs-small); }
.vsticker .vline .hl { color: var(--sun-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--sun);
  text-decoration-thickness: 2px; text-underline-offset: 4px; }
.vsticker .hit { display: block; margin-top: 10px; text-align: center; }
.stk-dest { margin: 12px -4px 14px; }   /* the band sits inside the gold ring */ .vsticker .stk { padding: 0 20px 18px; }

/* the offer as a chip on the contact button (Geri, 2026-10-23): it comes with contacting them here */
.booking .partnerbox .otherlist.partners li { grid-template-columns: minmax(0, 1fr) auto; }
.penq { position: relative; display: inline-block; padding-top: 12px; }
.btnchip { position: absolute; top: 0; left: 50%; transform: translate(-50%, -2px); z-index: 1; white-space: nowrap;
  padding: 3px 10px 2px; border-radius: 999px; background: var(--sun); color: var(--ink);
  font: 700 10px/1.2 var(--sans); letter-spacing: .04em; box-shadow: 0 2px 6px rgba(12,34,52,.2); }
.pacts { align-items: flex-end; }
@media (max-width: 820px) { .penq { display: block; padding-top: 14px; } }
@media (max-width: 820px) { .pacts .penq { display: block; width: 100%; } .pacts .penq .button { display: block; width: 100%; box-sizing: border-box; } }
.booking .partnerbox .otherlist.partners li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
@media (max-width: 820px) { .booking .partnerbox .otherlist.partners li { grid-template-columns: 1fr; } }

/* vintage luggage label (Geri: "a symbol of travel"): a little poster scene, a ribbon with the destination across it */
.vsticker .stk { padding: 0 0 18px; overflow: hidden; border-radius: 16px; }
.stk-scene { position: relative; display: block; align-self: stretch; height: 92px; overflow: hidden;
  background: linear-gradient(var(--sky) 0 62%, var(--ink) 62% 66%, #3f87b3 66% 100%); }
.stk-scene::before { content: ""; position: absolute; width: 58px; height: 58px; border-radius: 50%; background: var(--sun);
  left: 50%; top: 18px; transform: translateX(-50%); }
.stk-scene::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(246,238,223,.7) 0 14px, transparent 14px 26px); }
.vsticker .stk-dest { position: relative; z-index: 1; align-self: center; margin: -16px 0 12px; padding: 7px 22px 6px;
  background: var(--bg); color: var(--ink); border: 2px solid var(--ink); border-radius: 4px;
  font: 700 var(--fs-caps)/1.2 var(--sans); letter-spacing: .22em; box-shadow: 0 3px 0 var(--sun); }
.vsticker .vname, .vsticker .vline { padding: 0 16px; }
/* partner row in one line (Geri): the chip floats above the button without pushing it down, both buttons the same
   height, everything centred */
.penq { padding-top: 0; }
.btnchip { top: -11px; transform: translateX(-50%); }
.pacts { align-items: center; }
.pacts .viewlink, .penq .button { box-sizing: border-box; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0; }
.booking .partnerbox .otherlist.partners li { align-items: center; padding-top: 18px; padding-bottom: 16px; }
@media (max-width: 820px) { .pacts .penq { margin-top: 10px; } .pacts .viewlink, .penq .button { display: flex; width: 100%; } }
@media (max-width: 820px) {
  .pacts .penq { margin-top: 14px; }
  .pacts .penq .button, .pacts .viewlink { display: flex !important; align-items: center; justify-content: center; height: 46px; padding: 0 12px; }
}
.stk-scene::before { width: 44px; height: 44px; top: 10px; }   /* the sun in the sky, above the horizon */

/* simpler luggage label (Geri: "you overdid the sticker"): one thin navy border, a small destination tag, slight tilt */
.vsticker .stk { padding: 16px 18px 18px; border: 1.5px solid var(--ink); border-radius: 14px; overflow: visible;
  box-shadow: 0 4px 12px rgba(12,34,52,.12); }
.vsticker:hover .stk { box-shadow: 0 8px 18px rgba(12,34,52,.18); }
.vsticker .stk-dest { margin: 0 0 10px; padding: 4px 12px 3px; background: var(--ink); color: var(--bg); border: 0;
  border-radius: 999px; box-shadow: none; font: 700 10px/1.2 var(--sans); letter-spacing: .16em; }
.vsticker .vname, .vsticker .vline { padding: 0; }
/* no hover effect on the villa cards (Geri): they keep their tilt and shadow */
.vsticker:hover .stk { transform: rotate(-1.5deg); box-shadow: 0 4px 12px rgba(12,34,52,.12); }
.vgrid > .vsticker:nth-child(even):hover .stk { transform: rotate(1.2deg); }
.vgrid > .vsticker:nth-child(3n):hover .stk { transform: rotate(-.6deg); }
.vsticker .stk { transition: none; }
.vsticker:hover .vname { text-decoration: none; }

/* Agencies we check (Geri, 2026-10-23): one framed list in the villa record's card style */
.agencies-list { padding-top: 0; }
.alist { list-style: none; margin: 0 0 14px; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.alist li:nth-child(odd) { background: rgba(21,50,74,.035); }
.arow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1fr) 20px; gap: 12px;
  align-items: center; padding: 14px 16px; color: var(--ink); text-decoration: none; font-size: var(--fs-small); }
.arow:hover { background: var(--bg); }
.aname { font: 600 var(--fs-body)/1.3 var(--sans); }
.adest, .alast { color: var(--muted); }
.acount b { font-weight: 600; }
.ago { color: var(--muted); text-align: right; }
.ptag { margin-left: 8px; padding: 2px 8px 1px; border-radius: 999px; background: var(--sun); font: 700 10px/1.3 var(--sans);
  letter-spacing: .05em; text-transform: uppercase; vertical-align: 2px; }
@media (max-width: 820px) {
  .arow { grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px; }
  .aname { grid-column: 1; } .ago { grid-column: 2; grid-row: 1 / 4; }
  .adest, .acount, .alast { grid-column: 1; font-size: var(--fs-fine); }
}

.ameta { display: contents; }
@media (max-width: 820px) {
  .ameta { display: block; grid-column: 1; font-size: var(--fs-fine); }
  .ameta .adest::after { content: " · "; }
  .ameta .adest, .ameta .acount { font-size: var(--fs-fine); }
  .ago { grid-row: 1 / 4; }
  .cover.slim::before { width: 64px; height: 64px; right: 18px; top: 14px; left: auto; }   /* the sun clear of the title */
}
@media (max-width: 820px) { .cover.slim::before { width: 44px; height: 44px; right: 14px; top: 10px; } }

/* agency profile (Geri, 2026-10-23): one framed list, a row per villa */
.vlist .arow.vrow { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.3fr) 20px; }
.vlist .ahead { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.3fr) 20px; gap: 12px;
  padding: 10px 16px; background: var(--sand) !important; font: 700 var(--fs-caps)/1.3 var(--sans); letter-spacing: .05em; text-transform: uppercase; }
.vlist:not(.all) li.more { display: none; }
.acalls { color: var(--ink); }
.aalso { color: var(--muted); }
.cover.slim .crumb { margin: 0 0 6px; }
.cover.slim .crumb a { color: var(--bg); opacity: .85; font-size: var(--fs-small); }
.cover.slim h1 .ptag { font-size: 11px; vertical-align: 8px; }
@media (max-width: 820px) {
  .vlist .ahead { display: none; }
  .vlist .arow.vrow { grid-template-columns: 1fr auto; }
  .vlist .acalls, .vlist .aalso { grid-column: 1; font-size: var(--fs-fine); }
  .vlist .acalls::before { content: "Called "; color: var(--muted); }
  .vlist .aalso::before { content: "Also at "; }
}

/* villa list with the filters on the side (Geri, 2026-10-23); phones: a "Filters" button opens them */
.withside { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 32px; }
.filterside { position: sticky; top: 84px; padding: 20px; background: var(--paper); border-radius: 10px; box-shadow: 0 10px 28px rgba(12,34,52,.10); }
.fdetails summary { display: none; }
.filterside form.filters { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0; }
.filterside form.filters label { display: grid; gap: 5px; font: 700 var(--fs-caps)/1.2 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.filterside form.filters input, .filterside form.filters select { width: 100%; box-sizing: border-box; font: 400 16px var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); }
.filterside form.filters button { width: 100%; }
.filterside .fine { margin: 14px 0 0; }
.withside .vgrid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (max-width: 820px) {
  .withside { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
  .filterside { position: static; padding: 0; background: none; box-shadow: none; }
  .fdetails summary { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--ink);
    border-radius: 6px; font: 600 var(--fs-small) var(--sans); cursor: pointer; list-style: none; }
  .fdetails summary::-webkit-details-marker { display: none; }
  .fdetails summary::after { content: "▾"; }
  .fdetails[open] summary { margin-bottom: 14px; }
  .fdetails[open] summary::after { content: "▴"; }
}

/* methodology (Geri, 2026-10-23): short headed sections in the record's cards */
.mlist { margin: 0; display: grid; gap: 14px; }
.mlist > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.mlist > div:first-child { padding-top: 0; border-top: 0; }
.mlist dt { font-weight: 600; }
.mlist dd { margin: 0; color: var(--ink); line-height: 1.6; }
.mfoot { margin: 24px 0 0; }
@media (max-width: 820px) { .mlist > div { grid-template-columns: 1fr; gap: 4px; } }
.vcount { margin: 0 0 14px; font-size: var(--fs-small); color: var(--muted); }   /* results count above the villa list */
.vresults { min-width: 0; }
.filterside form.filters { border: 0; padding: 0; }   /* no stray lines in the sidebar */

/* the enquiry form as a pop-up (Geri, 2026-10-23): centred on desktop, the page behind dimmed and still; on phones a
   sheet from the bottom up to 80% of the screen */
html:has(dialog[open]) { overflow: hidden; }
.askdlg { width: min(560px, calc(100vw - 32px)); max-height: 88vh; overflow: auto; padding: 28px 28px 22px; border: 0;
  border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 60px rgba(12,34,52,.35); }
.askdlg::backdrop { background: rgba(12,34,52,.55); }
.askdlg .fileline { margin: 0 0 12px; font: 400 var(--fs-name)/1.2 var(--serif); }
.askdlg .filelabel { margin: 0 0 4px; }
.dlgclose { position: absolute; top: 10px; right: 12px; margin: 0; }
.dlgclose button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--bg); color: var(--ink);
  font: 400 24px/1 var(--sans); cursor: pointer; padding: 0; }
.dlgoffer { margin: 0 0 16px; padding: 8px 12px; border-radius: 6px; background: var(--sand); font-size: var(--fs-small); }
.dlgoffer span { display: block; font: 700 9px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--sun-ink); }
.askdlg form.stack { margin: 0; }
.askdlg .fine { margin: 12px 0 0; }
@media (max-width: 820px) {
  .askdlg { width: 100vw; max-width: 100vw; max-height: 80vh; margin: auto 0 0; padding: 22px 18px 18px;
    border-radius: 16px 16px 0 0; inset: auto 0 0 0; }
  .askdlg[open] { animation: sheetup .25s ease-out; }
}
@keyframes sheetup { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .askdlg[open] { animation: none; } }
/* only a click on the dimmed backdrop closes the pop-up: the content fills the dialog, the dialog has no padding */
.askdlg { padding: 0; }
.dlgbody { position: relative; padding: 28px 28px 22px; }
@media (max-width: 820px) { .askdlg { padding: 0; } .dlgbody { padding: 22px 18px 18px; } }

/* For agencies (Geri, 2026-10-23): two plans side by side, the claim form in a card */
.forag .fintro { max-width: 720px; margin: 28px 0 0; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.plans .plan { margin-top: 24px !important; display: flex; flex-direction: column; }
.plan .fileline { margin: 0 0 14px; font: 400 var(--fs-h2)/1.1 var(--serif); }
.pplan { outline: 2px solid var(--sun); outline-offset: -2px; }
.ticks { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 26px; line-height: 1.5; }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--sun-ink); font-weight: 700; }
.plan .button { margin-top: auto; align-self: flex-start; }
.ffair { margin: 18px 0 0; max-width: 760px; }
.claimform .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.claimform button { justify-self: start; }
@media (max-width: 820px) {
  .plans, .claimform .pair { grid-template-columns: 1fr; gap: 0; }
  .plans .plan { margin-top: 16px !important; }
  .plan .button { align-self: stretch; text-align: center; }
  .claimform button { justify-self: stretch; }
}
/* the plan cards get the same card look as the rest (they sit inside .plans, not straight under .report) */
.plans > section.plan { padding: 28px 30px 26px; background: var(--paper); border-radius: 10px; box-shadow: 0 10px 28px rgba(12,34,52,.12); }
.plans > section.pplan { outline: 2px solid var(--sun); outline-offset: -2px; }
@media (max-width: 820px) { .plans > section.plan { padding: 22px 16px 18px; } .cover.slim h1 { padding-right: 56px; } }

/* footer, tighter (Geri, 2026-10-23): logo, three short columns, the disclosure, one small line */
footer { padding: 40px 0 28px; }
footer .fcols { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; padding-bottom: 28px; align-items: start; }
footer .fdisclose { margin-top: 18px; font-size: var(--fs-fine); }
footer .flegal { margin-top: 8px; opacity: .8; }
@media (max-width: 820px) {
  footer { padding: 32px 0 22px; }
  footer .fcols { grid-template-columns: 1fr 1fr 1fr; gap: 22px 14px; }
  footer .fbrand { grid-column: 1 / -1; }
}

/* For booking sites (Geri, 2026-10-23) */
.plans.three { grid-template-columns: repeat(3, 1fr); }
.plans.three .plan .fileline { font-size: var(--fs-name); }
.plans.three .plan p:not(.filelabel) { margin: 0; line-height: 1.55; }
.bsflow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin-bottom: 18px; }
.bsin, .bsout { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.bsout { border-color: var(--sun); }
.bsin span, .bsout span { font: 700 var(--fs-caps)/1.2 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.bsin b, .bsout b { font: 600 var(--fs-body)/1.3 var(--sans); }
.bsout small { font-size: var(--fs-small); color: var(--muted); }
.bsarrow { font-size: 28px; color: var(--sun-ink); }
.bsdev summary { cursor: pointer; font: 600 var(--fs-small) var(--sans); }
.bsdev pre { white-space: pre-wrap; word-break: break-all; font-size: var(--fs-fine); }
@media (max-width: 820px) {
  .plans.three { grid-template-columns: 1fr; }
  .bsflow { grid-template-columns: 1fr; } .bsarrow { transform: rotate(90deg); justify-self: center; }
}
footer .flegal { margin-top: 18px; font-size: var(--fs-caps); line-height: 1.6; opacity: .7; }   /* the disclosure folded into the quiet bottom line (Geri) */
main:has(> .home-recent:last-child), main:has(.home-recent) { padding-bottom: 0; }   /* home: 40px from "Browse all villas" to the footer (Geri) */