/* assets/style.css */
/* The Mallorca List · "Island" design (base, ported from design/island/style.css)
   Page-specific styles live in assets/css/*.css and are appended at build time.
   Display: Noto Serif Display, condensed (wdth 62.5). Text and UI: Schibsted Grotesk.
   Every zone owns a colour; the same colour is used on the map, tiles, lists and area pages. */

:root {
  --sea: #0F3756;
  --sea-deep: #0A2840;
  --rust: #A44826;       /* 5.19:1 with limestone text */
  --rust-dark: #8A3B1D;
  --lime: #F5EFE4;       /* limestone / almond white */
  --stone: #EAE1CF;
  --sand: #DCC59C;
  --pine: #1F4637;
  --ink: #14202A;
  --muted: #5A646C;
  --rule: rgba(20, 32, 42, .16);
  --rule-strong: rgba(20, 32, 42, .85);
  --rule-light: rgba(245, 239, 228, .26);

  /* zone colours: land tones on a sea-blue map */
  --z-palma: #AA4B29;
  --z-southwest: #E39B6C;
  --z-west: #2F5E47;
  --z-north: #A7B898;
  --z-northeast: #5D6830;
  --z-east: #7B3048;
  --z-southeast: #86BDB3;
  --z-south: #CC8E86;
  --z-raiguer: #CF9C3E;
  --z-pla: #EFE5CF;

  /* The serif is kept only for the wordmark (header logo and footer); every other heading uses the sans,
     because the condensed serif read too tall and thin across the site. */
  --wordmark: "Noto Serif Display", "Times New Roman", Georgia, serif;
  --wordmark-stretch: 75%;
  --display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --stretch: 100%;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --max: 1360px;
  --gutter: 40px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--lime);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
p { margin: 0; }

.wrap { max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

.display {
  font-family: var(--display);
  font-stretch: var(--stretch);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.02em;
}
.display i, .display em { font-style: normal; font-weight: 400; }
h1.display, h2.display, h3.display { text-wrap: balance; }

.h-xl { font-size: clamp(33px, 4.33vw, 64px); }
.h-l { font-size: clamp(26px, 3.02vw, 45px); }
.h-m { font-size: clamp(20px, 1.85vw, 26px); }
.h-s { font: 700 22px/1.25 var(--sans); }

.lede { font-size: 20px; line-height: 1.5; max-width: 40ch; }
.muted { color: var(--muted); }

.arrow-link {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
  white-space: nowrap;
}
.arrow-link:hover { color: var(--rust); }

/* ---------- buttons, tags, fields ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 15px 24px;
  border: 2px solid var(--rust);
  border-radius: 2px;
  background: var(--rust);
  color: var(--lime);
  font: 600 16px/1.1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--rust-dark); border-color: var(--rust-dark); }
.btn--ink { background: var(--ink); border-color: var(--ink); }
.btn--ink:hover { background: #000; border-color: #000; }
.btn--light { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.btn--light:hover { background: #fff; border-color: #fff; }
.btn--line { background: transparent; border-color: currentColor; color: inherit; }
.btn--line:hover { background: rgba(20, 32, 42, .06); border-color: currentColor; }
.btn--sm { padding: 10px 16px; font-size: 15px; }

.tag {
  display: inline-block;
  font: 600 11px/1 var(--sans);
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 6px 3px;
  border: 1px solid currentColor;
  border-radius: 2px;
  vertical-align: middle;
  white-space: nowrap;
}
.tag--feat { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.tag--sample { border-style: dashed; }

.sw { display: inline-block; width: 14px; height: 14px; background: var(--z); box-shadow: inset 0 0 0 1px rgba(20, 32, 42, .14); flex: none; }

/* ---------- draft note ---------- */
.draft-note {
  background: var(--ink);
  color: var(--lime);
  font-size: 13px;
  letter-spacing: .01em;
  text-align: center;
  padding: 8px 16px;
  position: relative;
  z-index: 30;
}
.draft-note b { font-weight: 600; color: var(--sand); }

/* ---------- header ---------- */
.site-head { position: absolute; left: 0; right: 0; top: 0; z-index: 20; color: #fff; }
.head-row { display: flex; align-items: center; gap: 36px; height: 92px; }
.logo {
  font-family: var(--wordmark);
  font-stretch: var(--wordmark-stretch);
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -.005em;
}
.logo i { font-weight: 400; }
.main-nav { display: flex; gap: 26px; margin-left: auto; font-size: 15px; font-weight: 500; }
.main-nav a { text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.main-nav a:hover, .main-nav a.on { border-bottom-color: currentColor; }
.head-cta { display: flex; align-items: center; gap: 22px; font-size: 15px; font-weight: 500; }
.head-cta > a:first-child { text-decoration: none; white-space: nowrap; }
.menu-btn { display: none; margin-left: auto; background: none; border: 0; padding: 8px 0; font-weight: 600; font-size: 15px; color: inherit; cursor: pointer; align-items: center; gap: 10px; }
.menu-btn span { display: inline-block; width: 20px; height: 8px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }

/* ---------- home hero ---------- */
.hero { position: relative; height: min(760px, calc(100svh - 108px)); min-height: 620px; color: #fff; overflow: hidden; background: var(--sea-deep); }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* Darker where text sits: a band under the header (logo, menu, photo credit) and a fade behind the headline,
   bottom left, so white text stays readable on any photo. */
.hero-shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(8, 26, 40, .62) 0, rgba(8, 26, 40, .28) 150px, rgba(8, 26, 40, 0) 260px),
  linear-gradient(90deg, rgba(8, 26, 40, .55) 0, rgba(8, 26, 40, .2) 48%, rgba(8, 26, 40, 0) 70%),
  linear-gradient(0deg, rgba(8, 26, 40, .55) 0, rgba(8, 26, 40, 0) 55%); }
.hero-body { position: absolute; left: 0; right: 0; bottom: 0; }
/* Home headline keeps the serif wordmark face, at its earlier size (the user's choice) */
.hero-title { font-family: var(--wordmark); font-stretch: var(--wordmark-stretch); font-weight: 500; letter-spacing: -.004em; font-size: clamp(44px, 6.56vw, 95px); max-width: 9.4em; line-height: .95; margin-bottom: 36px; text-shadow: 0 2px 4px rgba(4, 18, 30, .35), 0 2px 30px rgba(4, 18, 30, .5); }
/* Savills-style solid panel: only the headline sits on the photo */
.hero-panel { background: var(--sea); color: var(--lime); max-width: 1020px; padding: 22px 28px 20px; }
.hero-sub { font-size: 20px; line-height: 1.4; margin: 0 0 16px; max-width: 40em; }

.search {
  display: grid;
  grid-template-columns: 1.35fr 1fr auto;
  background: #fff;
  color: var(--ink);
  max-width: 980px;
  border-radius: 2px;
}
.field { display: block; padding: 14px 22px 13px; position: relative; cursor: text; }
.field + .field { border-left: 1px solid var(--rule); }
.field > span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .02em; margin-bottom: 3px; }
.field select { padding-right: 26px !important; }
.field input, .field select {
  display: block; width: 100%;
  border: 0; padding: 0; margin: 0; background: transparent;
  font-size: 17px; line-height: 1.5; outline: none;
  -webkit-appearance: none; appearance: none;
}
.field input::placeholder { color: #7B848B; }
.field--select::after {
  content: ""; position: absolute; right: 22px; top: 50%; margin-top: 2px;
  width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}
.search .btn { border-radius: 0 2px 2px 0; padding: 0 34px; font-size: 17px; }

.hero-links { margin-top: 16px; font-size: 15px; display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; }
.hero-links b { font-weight: 600; opacity: .8; }
.hero-links a { text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .55); }
.hero-links a:hover { border-bottom-color: #fff; }
.hero-alt { margin-top: 8px; font-size: 15px; }
.hero-alt a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.photo-cap {
  position: absolute; right: var(--gutter); bottom: 24px;
  font-size: 13px; color: #fff; text-decoration: none; text-align: right;
  background: rgba(8, 26, 40, .62); padding: 4px 9px; border-radius: 2px; /* readable on any photo */
}
.photo-cap b { font-weight: 600; color: #fff; }
/* sits over the open sea, top right, so it never meets the search panel */
.hero .photo-cap { right: max(var(--gutter), calc((100% - var(--max)) / 2)); top: 104px; bottom: auto; }

/* ---------- trust band ---------- */
.trust { background: var(--sea); color: var(--lime); }
.trust-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-item { padding: 34px 28px 36px; border-left: 1px solid var(--rule-light); }
.trust-item:first-child { border-left: 0; padding-left: 0; }
.trust-item h2, .trust-item h3 { font-family: var(--display); font-stretch: var(--stretch); font-size: 22px; line-height: 1; margin-bottom: 8px; }
.trust-item p { font-size: 15px; line-height: 1.45; opacity: .86; max-width: 28ch; }

/* ---------- section heads ---------- */
.sec { padding: 120px 0; }
.sec-head { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: end; margin-bottom: 56px; }
.sec-head p { font-size: 18px; margin-bottom: 18px; }
.sec-head--line { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 40px; padding-bottom: 22px; border-bottom: 2px solid var(--ink); }

/* ---------- zone tiles ---------- */
.zone-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 440px; gap: 14px; }
.zt {
  position: relative; display: block; overflow: hidden;
  background: var(--z); color: #fff; text-decoration: none;
  container-type: inline-size;
}
.zt::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--z); z-index: 3; }
.zt > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.zt:hover > img { transform: scale(1.035); }
.zt::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(10, 22, 32, .78) 0, rgba(10, 22, 32, .35) 55%, rgba(10, 22, 32, .2) 100%); }
.zt.is-colour::after { display: none; }
.zt--wide { grid-column: span 2; }
.zt-text { position: absolute; left: 26px; right: 26px; bottom: 30px; z-index: 2; }
.zt h3 { font-size: clamp(16px, 10.82cqi, 42px); margin-bottom: 10px; text-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 2px 24px rgba(0, 0, 0, .45); }
.zt--wide h3 { font-size: clamp(26px, 7.54cqi, 55px); }
.zt p { font-size: 15px; line-height: 1.42; max-width: 32ch; text-shadow: 0 1px 14px rgba(0, 0, 0, .45); }
.zt.is-colour { color: var(--lime); }
.zt.is-colour p { text-shadow: none; }
.zt.is-colour h3 { font-size: clamp(16px, 13.12cqi, 42px); text-shadow: none; }
.zt.on-light { color: var(--ink); }
.zt.on-light h3 { text-shadow: none; }
/* colour tiles (no photo yet): three popular places set as type, top left */
.zt-places { position: absolute; top: 26px; left: 26px; right: 26px; z-index: 2; font-size: clamp(16px, 7.57cqi, 25px); line-height: 1.12; }
.zt-places span { display: block; padding: 7px 0 6px; border-top: 1px solid rgba(245, 239, 228, .3); }
.zt-places span:last-child { border-bottom: 1px solid rgba(245, 239, 228, .3); }
.zt.on-light .zt-places span { border-color: rgba(20, 32, 42, .22); }
.zt:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }

/* ---------- island map section ---------- */
.mapsec { background: var(--sea); color: var(--lime); padding: 112px 0 120px; position: relative; overflow: hidden; }
.mapsec .sec-head { margin-bottom: 40px; }
.mapsec .sec-head p { opacity: .9; }
.mapsec-grid { display: grid; grid-template-columns: 300px 1fr; gap: 64px; align-items: center; }
.mapsec-side h3 { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.legend { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-light); }
.legend a { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule-light); text-decoration: none; font-size: 16px; font-weight: 500; }
.legend a:hover { text-decoration: underline; text-underline-offset: 4px; }
.legend .kn { width: 22px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .8; }
.legend .sw { box-shadow: none; width: 16px; height: 16px; }

.map-stage { position: relative; }
.map-tools { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 16px; }
.seg { display: inline-flex; border: 1px solid var(--rule-light); }
.seg button { background: none; border: 0; padding: 9px 16px; font-size: 14px; font-weight: 600; color: var(--lime); cursor: pointer; opacity: .75; }
.seg button + button { border-left: 1px solid var(--rule-light); }
.seg button.on { background: var(--lime); color: var(--sea); opacity: 1; }
.zoom { display: inline-flex; flex-direction: row; gap: 6px; }
.zoom button { width: 40px; height: 40px; border: 1px solid var(--rule-light); background: none; color: var(--lime); font-size: 20px; line-height: 1; cursor: pointer; }
.zoom button:hover { background: rgba(255, 255, 255, .08); }
.map-frame { position: relative; }

.island-map { display: block; width: 100%; height: auto; overflow: visible; }
.island-map .zone { stroke: var(--sea); stroke-width: 2.5; stroke-linejoin: round; cursor: pointer; transition: opacity .2s; }
.island-map .zone[data-zone="palma"] { fill: var(--z-palma); }
.island-map .zone[data-zone="southwest"] { fill: var(--z-southwest); }
.island-map .zone[data-zone="west-tramuntana"] { fill: var(--z-west); }
.island-map .zone[data-zone="north"] { fill: var(--z-north); }
.island-map .zone[data-zone="northeast"] { fill: var(--z-northeast); }
.island-map .zone[data-zone="east"] { fill: var(--z-east); }
.island-map .zone[data-zone="southeast"] { fill: var(--z-southeast); }
.island-map .zone[data-zone="south"] { fill: var(--z-south); }
.island-map .zone[data-zone="central-raiguer"] { fill: var(--z-raiguer); }
.island-map .zone[data-zone="central-pla"] { fill: var(--z-pla); }
.island-map .zones:hover .zone { opacity: .72; }
.island-map .zones .zone:hover { opacity: 1; }
.island-map .muni { fill: none; stroke: rgba(10, 40, 64, .28); stroke-width: .9; opacity: 1; pointer-events: none; }
.island-map .zone-label { font: 600 16px var(--sans); fill: var(--ink); letter-spacing: .01em; pointer-events: none; paint-order: stroke; stroke-width: 4px; stroke-linejoin: round; }
.island-map .zone-label .zn { font-weight: 800; }
.island-map .zone-label[data-zone="palma"] { fill: var(--lime); stroke: var(--z-palma); }
.island-map .zone-label[data-zone="southwest"] { stroke: var(--z-southwest); }
.island-map .zone-label[data-zone="west-tramuntana"] { fill: var(--lime); stroke: var(--z-west); }
.island-map .zone-label[data-zone="north"] { stroke: var(--z-north); }
.island-map .zone-label[data-zone="northeast"] { fill: var(--lime); stroke: var(--z-northeast); }
.island-map .zone-label[data-zone="east"] { fill: var(--lime); stroke: var(--z-east); }
.island-map .zone-label[data-zone="southeast"] { stroke: var(--z-southeast); }
.island-map .zone-label[data-zone="south"] { stroke: var(--z-south); }
.island-map .zone-label[data-zone="central-raiguer"] { stroke: var(--z-raiguer); }
.island-map .zone-label[data-zone="central-pla"] { stroke: var(--z-pla); }
.island-map .place { fill: var(--lime); stroke: var(--ink); stroke-width: 1.6; cursor: pointer; }
.island-map .place:hover { fill: var(--ink); stroke: var(--lime); }
.island-map .place[data-place="santa-ponsa"] { fill: var(--ink); stroke: var(--lime); stroke-width: 2.4; r: 6; }

.map-pin {
  position: absolute; z-index: 3;
  transform: translate(-100%, 18px);
  margin-left: 26px;
  background: var(--lime); color: var(--ink);
  font-size: 14px; font-weight: 600; line-height: 1;
  padding: 9px 12px; text-decoration: none; white-space: nowrap;
}
.map-pin::before { content: ""; position: absolute; right: 22px; top: -14px; width: 1px; height: 14px; background: var(--lime); }
.map-pin:hover { background: #fff; }
.map-tip {
  position: absolute; z-index: 4; pointer-events: none;
  background: var(--ink); color: var(--lime); font-size: 13px; font-weight: 600;
  padding: 6px 9px; white-space: nowrap; transform: translate(-50%, -140%);
  display: none;
}
.map-note { margin-top: 20px; font-size: 13px; opacity: .8; }
.note-tap { display: none; }

/* ---------- popular places ---------- */
.places-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; }
.places-head { position: sticky; top: 40px; }
.places-head h2 { margin-bottom: 22px; }
.places-key { font-size: 15px; color: var(--muted); margin-bottom: 22px; max-width: 22ch; }
.places-key i { font-family: var(--display); font-size: 19px; color: var(--rust); }
.place-list { border-bottom: 1px solid var(--rule); }
.pl-row { padding: 20px 0 24px; border-top: 1px solid var(--rule); }
.pl-row:first-child { border-top: 2px solid var(--ink); }
.pl-zone { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.sw[data-pla] { box-shadow: inset 0 0 0 1px var(--ink); }

/* big typographic lists: the "/" belongs to the item, never to the link,
   and a slash that starts a line falls into the clipped negative margin */
.pl-names, .near { overflow-x: clip; overflow-y: visible; }
.pl-names { font-size: 29px; line-height: 1.16; }
.pl-inner { list-style: none; padding: 0; margin: 0 0 0 -.8em; display: flex; flex-wrap: wrap; }
.pl-inner li { white-space: nowrap; }
.pl-inner li::before { content: "/"; content: "/" / ""; display: inline-block; width: .8em; text-align: center; color: rgba(20, 32, 42, .22); font-weight: 300; }
.pl-inner a { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(20, 32, 42, .25); text-underline-offset: 8px; }
.pl-inner a:hover { color: var(--rust); text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.pl-inner a.has-guide { font-style: normal; font-weight: 400; color: var(--rust); text-decoration-color: rgba(164, 72, 38, .4); }
.pl-more { display: none; }

/* ---------- developments ---------- */
.sec.devs { padding-top: 0; }
.dev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dev { display: block; text-decoration: none; }
.dev-top { background: var(--z); min-height: 170px; padding: 22px 24px 24px; display: flex; flex-direction: column; justify-content: flex-end; color: var(--ink); }
.dev-top.on-dark { color: var(--lime); }
.dev-status { font-size: 28px; line-height: 1.06; }
.dev-status b { display: block; font-weight: 500; }
.dev-status i { display: block; font-weight: 400; }
.dev-body { padding-top: 22px; }
.dev-body h3 { font-size: 28px; margin-bottom: 8px; }
.dev:hover .dev-body h3 { color: var(--rust); }
.dev-loc { font-weight: 600; font-size: 15px; margin-bottom: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.dev-facts { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); font-size: 15px; }
.dev-facts li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.dev-facts li span:first-child { color: var(--muted); }
.dev-facts li span:last-child { text-align: right; }

/* ---------- how we list + guides (colour split) ---------- */
.split2 { display: grid; grid-template-columns: 1fr 1fr; }
.split2 > div { padding: 110px 72px 116px; }
.how { background: var(--rust); color: var(--lime); padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2)) !important; }
.guides { background: var(--pine); color: var(--lime); padding-right: max(var(--gutter), calc((100vw - var(--max)) / 2)) !important; }
.how, .guides { display: flex; flex-direction: column; }
.how-foot { margin-top: auto; }
.steps { margin-bottom: 40px !important; }
.guides .guide-list { margin-bottom: 30px; }
.guides .arrow-link { align-self: start; margin-top: auto !important; }
.how > p { font-size: 18px; margin: 22px 0 40px; max-width: 34ch; }
.guides > h2 { margin-bottom: 40px; }
.steps { list-style: none; padding: 0; margin: 0; }
.step { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 24px 0 26px; border-top: 1px solid var(--rule-light); }
.step-n { font-family: var(--display); font-stretch: var(--stretch); font-size: 42px; line-height: 1.06; }
.step h3 { font-weight: 700; font-size: 20px; margin-bottom: 6px; }
.step p { font-size: 16px; }
.how-foot { border-top: 1px solid var(--rule-light); padding-top: 24px; font-size: 15px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; align-items: baseline; }
.how-foot p { max-width: 40ch; }

.guide-list { list-style: none; padding: 0; margin: 0; border-bottom: 1px solid var(--rule-light); }
.guide-list a { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; padding: 20px 0 22px; border-top: 1px solid var(--rule-light); text-decoration: none; }
.guide-list b { font-family: var(--display); font-stretch: var(--stretch); font-weight: 500; font-size: 26px; line-height: 1; }
.guide-list span { grid-column: 1; font-size: 15px; opacity: .8; }
.guide-list i { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-size: 26px; transition: transform .2s; }
.guide-list a:hover i { transform: translateX(6px); }
.guide-list a:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.guides .arrow-link { display: inline-block; margin-top: 28px; }

/* ---------- for agents (photo + colour field) ---------- */
.agents-cta { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; }
.agents-cta figure { margin: 0; position: relative; overflow: hidden; }
.agents-cta figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.agents-cta figcaption { position: absolute; left: 24px; bottom: 20px; color: #fff; font-size: 13px; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.agents-panel { background: var(--sand); padding: 96px max(var(--gutter), calc((100vw - var(--max)) / 2)) 96px 80px; display: flex; flex-direction: column; justify-content: center; }
.agents-panel p { font-size: 19px; margin: 26px 0 34px; max-width: 34ch; }
.agents-panel .btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: var(--lime); padding: 72px 0 34px; overflow: hidden; }
.foot-cols { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 40px; }
.foot-mark { font-family: var(--wordmark); font-stretch: var(--wordmark-stretch); font-weight: 600; letter-spacing: -.005em; font-size: 32px; line-height: .95; white-space: normal; margin: 0 0 16px; }
.foot-about p:not(.foot-mark) { font-size: 16px; opacity: .85; margin-bottom: 26px; max-width: 30ch; }
.foot h4, .foot .foot-h { font-size: 15px; font-weight: 700; line-height: 1.3; margin-bottom: 14px; }
.foot ul { list-style: none; padding: 0; margin: 0; font-size: 15px; }
.foot li { padding: 4px 0; }
.foot ul a { text-decoration: none; opacity: .8; }
.foot ul a:hover { opacity: 1; text-decoration: underline; }
.foot-fine { margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--rule-light); font-size: 13px; opacity: .7; display: grid; gap: 8px; }

/* ===================== AREA PAGE ===================== */
/* Inigo-style split: solid sea blue with the title on the left, the photo on the right */
.area-hero {
  position: relative; height: 520px; color: var(--lime); background: var(--sea);
  display: grid; grid-template-columns: 56fr 44fr; padding-bottom: 8px;
}
.area-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--zone, var(--z-southwest)); z-index: 2; }
.area-hero-text {
  align-self: end; min-width: 0;
  padding: 0 48px 46px max(var(--gutter), calc((100vw - var(--max)) / 2));
}
.area-hero-photo { margin: 92px 0 0; position: relative; overflow: hidden; }
.area-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 65%; }
.area-hero .photo-cap { right: 20px; bottom: 16px; font-size: 12px; }
.crumbs { font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 20px; }
.crumbs a { text-decoration: none; border-bottom: 1px solid rgba(245, 239, 228, .5); }
.crumbs a:hover { border-bottom-color: var(--lime); }
.crumbs span[aria-hidden] { opacity: .6; }
.area-title { font-size: clamp(38px, 5.42vw, 79px); line-height: 1.06; margin-left: -.03em; }
.area-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 24px; font-size: 17px; font-weight: 500; align-items: center; }
.area-meta .sw { width: 16px; height: 16px; box-shadow: none; margin-right: 10px; vertical-align: -2px; }

.subnav { position: sticky; top: 0; z-index: 15; background: var(--lime); border-bottom: 1px solid var(--rule); }
.subnav-row { display: flex; gap: 34px; overflow-x: auto; scrollbar-width: none; }
.subnav-row::-webkit-scrollbar { display: none; }
.subnav a { flex: none; padding: 20px 0 18px; font-size: 15px; font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; color: var(--muted); }
.subnav a.on { color: var(--ink); border-bottom-color: var(--rust); }
.subnav a:hover { color: var(--ink); }
.subnav a span { font-weight: 500; margin-left: 4px; opacity: .7; }

.area-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  grid-template-areas: "main aside";
  column-gap: 72px;
}
.area-main { grid-area: main; min-width: 0; padding: 40px 0 112px; }
/* the right column is a full-height sea-blue map pane that bleeds to the window edge */
.area-aside {
  grid-area: aside; align-self: stretch;
  background: var(--sea); color: var(--lime);
  margin-right: calc(-1 * max(var(--gutter), (100vw - var(--max)) / 2));
}
.aside-inner {
  position: sticky; top: 77px; /* 65px subnav + 12px */
  max-height: calc(100vh - 77px); overflow-y: auto; scrollbar-width: thin;
  padding: 20px max(var(--gutter), calc((100vw - var(--max)) / 2)) 28px 36px;
}

.a-sec { padding-top: 88px; }
.a-sec:first-child { padding-top: 0; }
.a-sec > h2 { margin-bottom: 26px; }
.a-sec .prose p { font-size: 18px; line-height: 1.65; max-width: 62ch; }
.a-sec .prose p + p { margin-top: 18px; }

.agents-head { margin-bottom: 28px; }
.agents-head p { font-size: 16px; color: var(--muted); margin-top: 14px; }
.agents-head p a { color: var(--ink); font-weight: 600; }
.facts-strip { display: none; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; padding: 12px 0; margin-bottom: 14px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.facts-strip .sw { box-shadow: none; }

.filters { display: grid; grid-template-columns: repeat(3, 1fr) auto; border: 1px solid var(--rule-strong); margin-bottom: 8px; background: #fff; }
.filters .field { padding: 11px 18px 10px; }
.filters .field + .field { border-left: 1px solid var(--rule); }
.filters .field input, .filters .field select { font-size: 16px; }
.chk { display: flex; align-items: center; gap: 10px; padding: 0 18px; border-left: 1px solid var(--rule); font-size: 15px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.chk input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 1.5px solid var(--ink); border-radius: 1px; margin: 0; background: #fff; }
.sortline { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--muted); padding: 8px 0 0; }
.sortline a { color: var(--ink); font-weight: 600; }

.ag-group { margin-top: 44px; }
.ag-group-head { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: end; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.ag-num { font-size: 39px; line-height: 1.06; color: var(--rust); }
.ag-group-head h3 { font-size: 21px; font-weight: 700; line-height: 1.2; }
.ag-group-head p { font-size: 15px; color: var(--muted); margin-top: 2px; }
.ag-count { font-size: 14px; color: var(--muted); white-space: nowrap; }

.agent { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 0 26px; padding: 28px 24px 26px; border-bottom: 1px solid var(--rule); position: relative; }
.agent.is-featured { background: var(--stone); }
.agent.is-featured::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--rust); }
.agent-logo { width: 84px; height: 84px; display: grid; place-items: center; background: var(--c, var(--sea)); color: var(--lime); font-family: var(--display); font-stretch: var(--stretch); font-size: 30px; line-height: 1; }
.agent-top { display: flex; justify-content: space-between; gap: 24px; align-items: start; }
.agent-name { font-size: 30px; line-height: 1.06; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.agent-name a { text-decoration: none; }
.agent-name a:hover { color: var(--rust); }
.agent-name .tag { font-family: var(--sans); font-stretch: 100%; }
.agent-office { font-size: 15px; margin-top: 8px; }
.agent-office b { font-weight: 600; }
.agent-actions { display: flex; flex-direction: column; align-items: end; gap: 10px; flex: none; }
.agent-actions a.more { font-size: 15px; font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; }
.agent-facts { grid-column: 2; display: grid; grid-template-columns: 1.15fr 1fr .8fr 1fr; margin-top: 18px; border-top: 1px solid var(--rule); }
.agent-facts > div { padding: 12px 16px 0 0; }
.agent-facts > div + div { padding-left: 16px; border-left: 1px solid var(--rule); }
.agent-facts dt { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.agent-facts dd { margin: 0; font-size: 15px; line-height: 1.4; }
.agent-facts .rating { font-family: var(--display); font-stretch: var(--stretch); font-size: 24px; line-height: 1.06; margin-right: 6px; }
.agent-facts .rating-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 4px; }
.agent-facts .rating-row small { font-size: 13px; color: var(--muted); }
.agent-meta { grid-column: 2; margin-top: 14px; font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 18px; }
.agent-meta b { color: var(--ink); font-weight: 600; }
.reg::before { content: ""; display: inline-block; width: 9px; height: 5px; border-left: 2px solid var(--pine); border-bottom: 2px solid var(--pine); transform: rotate(-45deg) translate(1px, -2px); margin-right: 8px; }
.list-note { margin-top: 22px; font-size: 15px; color: var(--muted); }
.list-note a { color: var(--ink); font-weight: 600; }

/* single development row */
.a-sec > h2.h-m { margin-bottom: 24px; }
.dev-row { display: grid; grid-template-columns: 260px 1fr; border: 1px solid var(--rule); text-decoration: none; background: #fff; }
.dev-row .dev-top { height: auto; min-height: 220px; }
.dev-row .dev-status { font-size: 26px; }
.dev-row-body { padding: 26px 30px; }
.dev-row-body h3 { font-size: 28px; margin-bottom: 6px; }
.dev-row-body .dev-facts { margin-top: 16px; }

/* getting around */
.times { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--ink); }
.times li { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 17px; }
.times b { font-family: var(--display); font-stretch: var(--stretch); font-weight: 500; font-size: 24px; line-height: 1; white-space: nowrap; }
.times b small { font-family: var(--sans); font-stretch: 100%; font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 4px; }
.times li span small { display: block; color: var(--muted); font-size: 14px; }

/* pros and cons */
.pc { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.pc h3 { font-family: var(--display); font-stretch: var(--stretch); font-size: 26px; padding: 18px 22px 16px; color: var(--lime); line-height: 1; }
.pc .for h3 { background: var(--pine); }
.pc .against h3 { background: var(--rust); }
.pc ul { list-style: none; padding: 0; margin: 0; }
.pc li { padding: 15px 22px; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 1.45; }
.pc .for ul { border-left: 1px solid var(--rule); }
.pc .against ul { border-right: 1px solid var(--rule); border-left: 1px solid var(--rule); }

/* faq */
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; gap: 20px; padding: 20px 0; font-size: 20px; font-weight: 600; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.06; text-align: right; color: var(--rust); }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { padding: 0 48px 24px 0; font-size: 17px; line-height: 1.6; max-width: 62ch; }

/* nearby list (uses .pl-inner, see popular places) */
.near { font-size: 26px; line-height: 1.16; }
.near small { font-family: var(--sans); font-stretch: 100%; font-size: 15px; color: var(--muted); font-weight: 500; }

.guide-rows { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.guide-rows a { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-size: 19px; font-weight: 600; }
.guide-rows a:hover { color: var(--rust); }
.guide-rows a i { font-style: normal; font-size: 22px; }

/* aside: call to action first, then the map, then the facts */
.aside-map { color: var(--lime); border: 1px solid var(--rule-light); margin-top: 22px; }
.aside-map-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--rule-light); }
.aside-map-head a { text-decoration: none; border-bottom: 1px solid currentColor; font-weight: 500; }
.aside-map .island-map { display: block; width: 100%; height: 220px; background: var(--sea); overflow: hidden; }
.aside-map .island-map .zone { fill: rgba(245, 239, 228, .12); stroke-width: 1.2; cursor: default; }
.aside-map .island-map .zone[data-zone="southwest"] { fill: rgba(245, 239, 228, .2); }
.aside-map .island-map .zone[data-zone="palma"] { fill: rgba(245, 239, 228, .2); }
.aside-map .island-map .zone[data-zone="west-tramuntana"] { fill: rgba(245, 239, 228, .14); }
.aside-map .island-map .zones:hover .zone { opacity: 1; }
.aside-map .island-map .muni { stroke: rgba(10, 40, 64, .45); stroke-width: .7; }
/* only Calvià, the municipality Santa Ponsa is in, takes the zone colour */
.aside-map .island-map .muni[data-name="Calvià"] { fill: var(--z-southwest); stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 3 2; }
.aside-map .island-map .labels { display: none; }
.aside-map .island-map .place { fill: var(--lime); stroke: var(--ink); stroke-width: 1; r: 2.4; }
.aside-map .island-map .place[data-place="santa-ponsa"] { fill: var(--ink); stroke: var(--lime); stroke-width: 1.6; r: 4.2; }
.annot text { font: 600 9px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--z-southwest); stroke-width: 3px; stroke-linejoin: round; }
.annot text.lite { fill: var(--lime); stroke: none; }
.annot text.big { font: 500 20px var(--display); font-stretch: var(--stretch); }
.annot text.muni-l { font: 700 8.5px var(--sans); letter-spacing: .12em; fill: rgba(20, 32, 42, .8); }
.annot text.muni-l.lite { fill: rgba(245, 239, 228, .85); }
.annot .lead { stroke: var(--lime); stroke-width: 1; fill: none; }

.facts { margin: 18px 0 0; border-top: 1px solid var(--rule-light); }
.facts div { display: grid; grid-template-columns: 128px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--rule-light); font-size: 15px; }
.facts dt { opacity: .72; font-weight: 500; }
.facts dd { margin: 0; font-weight: 600; }
.facts dd .sw { width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; box-shadow: none; }

.aside-cta { background: var(--lime); color: var(--ink); padding: 18px 22px 20px; }
.aside-cta h3 { font-size: 24px; margin-bottom: 6px; }
.aside-cta p { font-size: 15px; margin-bottom: 16px; }
.aside-cta .btn { width: 100%; }

/* ===================== AREA GUIDE (full width, after the agent list) ===================== */
.guide-part { border-top: 1px solid var(--rule); }
.g-sec { padding-top: 104px; padding-bottom: 0; }
.g-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 72px; align-items: start; }
.g-grid > h2 { position: sticky; top: 89px; }
.prose--lg p { font-size: 20px; line-height: 1.6; max-width: 60ch; }
.prose--lg p + p { margin-top: 20px; }
.prose--lg p.lead-p { font-size: 25px; line-height: 1.45; letter-spacing: -.005em; margin-bottom: 30px; }
.g-two { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.g-two > div { border-top: 2px solid var(--ink); padding-top: 26px; }
.g-two h2 { margin-bottom: 12px; }
.g-two p { font-size: 18px; line-height: 1.6; max-width: 52ch; }

.times-band { background: var(--sea); color: var(--lime); margin-top: 112px; padding: 96px 0 100px; }
.times-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 44px; }
.times-head p { font-size: 16px; opacity: .8; }
.times-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--rule-light); }
.times-row li { padding: 26px 22px 0 0; }
.times-row li + li { padding-left: 22px; border-left: 1px solid var(--rule-light); }
.times-row b { font-family: var(--display); font-stretch: var(--stretch); font-weight: 500; font-size: 84px; line-height: 1.06; display: inline-block; }
.times-row b + span { font-family: var(--display); font-stretch: var(--stretch); font-style: normal; font-size: 24px; margin-left: 6px; }
.times-row p { margin-top: 18px; font-size: 16px; line-height: 1.4; max-width: 22ch; opacity: .92; }
.times-row p small { display: block; font-size: 14px; opacity: .75; margin-top: 4px; }

.pc-wrap .pc { margin-top: 28px; }
.pc h3 { font-size: 22px; padding: 18px 26px 14px; }
.pc li { font-size: 18px; padding: 18px 26px; }
.pc { gap: 24px; }
.pc .for ul, .pc .against ul { border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); }

.near-wrap .near { margin-top: 26px; font-size: 29px; line-height: 1.16; }
.g-last { padding-bottom: 120px; }

/* ===================== responsive ===================== */
@media (max-width: 1340px) {
  .main-nav { gap: 18px; font-size: 14px; }
  .head-cta > a:first-child { display: none; }
}
@media (max-width: 1100px) {
  .main-nav, .head-cta { display: none; }
  .menu-btn { display: inline-flex; }
  .area-split { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 48px; }
  .mapsec-grid { grid-template-columns: 1fr; }
  .legend { columns: 2; column-gap: 32px; }
  .legend li { break-inside: avoid; }
  .split2 { grid-template-columns: 1fr; }
  .how, .guides { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
  .places-grid { grid-template-columns: 1fr; gap: 0; }
  .places-head { position: static; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 28px; margin-bottom: 26px; }
  .places-head h2 { flex-basis: 100%; margin-bottom: 4px; }
  .places-key { margin: 0; max-width: none; }
}
@media (max-width: 900px) {
  :root { --gutter: 24px; }
  .sec { padding: 88px 0; }
  .sec-head { grid-template-columns: 1fr; gap: 20px; }
  .trust-row { grid-template-columns: 1fr 1fr; }
  .trust-item { padding: 24px 20px; border-left: 0; border-top: 1px solid var(--rule-light); }
  .trust-item:nth-child(-n+2) { border-top: 0; }
  .trust-item:nth-child(odd) { padding-left: 0; }
  .trust-item:nth-child(even) { border-left: 1px solid var(--rule-light); }
  .zone-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 320px; }
  .dev-grid { grid-template-columns: 1fr; }
  .agents-cta { grid-template-columns: 1fr; }
  .agents-cta figure { min-height: 320px; }
  .agents-panel { padding: 64px var(--gutter); }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-about { grid-column: 1 / -1; }

  /* map: numbers at every width, names only above 900px */
  .mapsec-grid { grid-template-columns: 1fr; gap: 28px; }
  .map-stage { order: -1; }
  .island-map .zone-label .zname { display: none; }
  .island-map .zone-label { font-size: 26px; stroke-width: 6px; }
  .note-hover { display: none; }
  .note-tap { display: inline; }

  /* area page: title and agents first, map and facts after the list */
  .area-hero { display: block; height: auto; }
  .area-hero-text { padding: 124px var(--gutter) 32px; }
  .area-hero-photo { margin: 0; height: 320px; }
  .area-split { grid-template-columns: 1fr; grid-template-areas: "main" "aside"; }
  .area-aside { margin: 0 calc(-1 * var(--gutter)); }
  .aside-inner { position: static; max-height: none; overflow: visible; padding: 36px var(--gutter) 40px; }
  .aside-map .island-map { height: 240px; }
  .area-main { padding-top: 32px; padding-bottom: 64px; }
  .facts-strip { display: flex; }
  .g-grid, .g-two { grid-template-columns: 1fr; gap: 24px; }
  .g-grid > h2 { position: static; }
  .g-two { gap: 48px; }
  .times-row { grid-template-columns: 1fr 1fr; }
  .times-row li { padding: 22px 16px 22px 0; border-bottom: 1px solid var(--rule-light); }
  .times-row li + li { padding-left: 0; border-left: 0; }
  .times-row li:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--rule-light); }
}
@media (max-width: 600px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; }
  .draft-note { font-size: 12px; padding: 7px 12px; line-height: 1.35; }
  .head-row { height: 72px; }
  .logo { font-size: 25px; }

  /* home hero: headline on the photo, full-width panel below it */
  .hero { height: auto; min-height: 0; }
  .hero > img { object-position: 22% 30%; }
  .hero-body { position: relative; bottom: auto; padding-top: 128px; }
  .hero-title { font-size: 43px; line-height: .95; margin-bottom: 28px; }
  .hero-panel { margin: 0 calc(-1 * var(--gutter)); padding: 20px var(--gutter) 22px; }
  .hero-sub { font-size: 17px; margin-bottom: 14px; }
  .search { grid-template-columns: 1fr; }
  .field + .field { border-left: 0; border-top: 1px solid var(--rule); }
  .search .btn { padding: 17px; border-radius: 0 0 2px 2px; }
  .search .field input, .search .field select { font-size: 16px; }
  .hero-links { font-size: 14px; gap: 4px 14px; margin-top: 14px; }
  .hero-alt { font-size: 14px; }
  .hero .photo-cap { top: 84px; right: var(--gutter); font-size: 12px; }

  .trust-item { padding: 18px 12px 18px 0; }
  .trust-item:nth-child(even) { padding: 18px 0 18px 14px; }
  .trust-item h3 { font-size: 22px; margin-bottom: 6px; }
  .trust-item p { font-size: 14px; line-height: 1.4; }

  .sec { padding: 64px 0; }
  .sec-head { margin-bottom: 28px; }
  .sec-head p { font-size: 16px; margin-bottom: 14px; }
  .sec-head--line { flex-direction: column; align-items: start; gap: 10px; padding-bottom: 16px; margin-bottom: 24px; }

  .zone-grid { grid-auto-rows: 210px; gap: 8px; }
  .zt h3 { margin-bottom: 0; }
  .zt--wide h3 { font-size: 26px; margin-bottom: 8px; }
  .zt-text { left: 14px; right: 14px; bottom: 16px; }
  .zt p { display: none; }
  .zt--wide p { display: block; font-size: 14px; }
  .zt-places { top: 14px; left: 14px; right: 14px; font-size: 17px; }
  .zt-places span { padding: 5px 0 4px; }
  .zt::before { height: 6px; }

  .mapsec { padding: 64px 0 56px; }
  .legend { columns: 1; }
  .legend a { font-size: 15px; padding: 9px 0; }
  .map-tools { margin: 0 0 10px; }
  .seg button { padding: 8px 10px; font-size: 13px; }
  .zoom button { width: 36px; height: 36px; }
  .island-map .zone-label { font-size: 30px; stroke-width: 10px; }
  .island-map .place { stroke-width: 1; }
  /* the pin hangs to the right of the dot so it stays inside the gutter */
  .map-pin { font-size: 12px; padding: 7px 9px; margin-left: 0; transform: translate(-12px, 16px); }
  .map-pin::before { right: auto; left: 11px; }

  .places-head { margin-bottom: 18px; }
  .pl-names { font-size: 25px; line-height: 1.26; }
  .pl-row { padding: 14px 0 16px; }
  .pl-inner a { text-underline-offset: 5px; }
  .pl-names.has-more:not(.is-open) .pl-inner li:nth-child(n+5) { display: none; }
  .pl-more { display: inline-block; margin-top: 6px; background: none; border: 0; padding: 4px 0; font: 600 15px/1.2 var(--sans); color: var(--ink); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

  /* developments: a swipeable row instead of three stacked cards */
  .dev-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
  .dev-grid::-webkit-scrollbar { display: none; }
  .dev { scroll-snap-align: start; }
  .dev-top { height: 120px; padding: 16px 18px 18px; }
  .dev-status { font-size: 25px; }
  .dev-body { padding-top: 16px; }
  .dev-body h3 { font-size: 26px; }
  .dev-facts { font-size: 14px; }

  .split2 > div { padding-top: 64px; padding-bottom: 68px; }
  .how > p { font-size: 16px; margin: 16px 0 26px; }
  .step { grid-template-columns: 40px 1fr; gap: 12px; padding: 18px 0 20px; }
  .step-n { font-size: 27px; }
  .step h3 { font-size: 18px; }
  .step p { font-size: 15px; }
  .guides > h2 { margin-bottom: 24px; }
  .guide-list a { padding: 16px 0 18px; }
  .guide-list b { font-size: 24px; }
  .guide-list span { font-size: 14px; }

  .agents-cta figure { min-height: 260px; }
  .agents-panel { padding: 56px var(--gutter); }
  .agents-panel p { font-size: 17px; margin: 18px 0 26px; }
  .foot { padding-top: 56px; }
  .foot-mark { font-size: 35px; }
  .foot-cols { gap: 32px 20px; }

  /* area */
  .area-hero-text { padding: 90px var(--gutter) 22px; }
  .area-title { font-size: 40px; }
  .area-meta { display: none; }
  .crumbs { font-size: 13px; margin-bottom: 14px; }
  .area-hero-photo { height: 200px; }
  .area-hero .photo-cap { right: 12px; bottom: 10px; font-size: 11px; }
  .subnav-row { gap: 22px; }
  .subnav a { padding: 16px 0 14px; font-size: 14px; }
  .a-sec { padding-top: 56px; }
  .filters { grid-template-columns: 1fr 1fr; }
  .filters .field:nth-child(3) { border-left: 0; }
  .filters .field:nth-child(n+3), .chk { border-top: 1px solid var(--rule); }
  .chk { padding: 12px 18px; }
  .sortline { flex-direction: column; gap: 2px; }
  .ag-group { margin-top: 36px; }
  .ag-group-head { grid-template-columns: 40px 1fr; align-items: start; }
  .ag-count { display: none; }
  .ag-num { font-size: 29px; }
  .agent { grid-template-columns: 52px minmax(0, 1fr); gap: 0 14px; padding: 22px 14px; }
  .agent-logo { width: 52px; height: 52px; font-size: 24px; }
  .agent-top { flex-direction: column; gap: 14px; }
  .agent-name { font-size: 22px; }
  .agent-actions { flex-direction: row; align-items: center; gap: 18px; }
  .agent-facts { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; margin-top: 16px; }
  .agent-facts > div { padding: 12px 12px 12px 0; }
  .agent-facts > div + div { padding-left: 0; border-left: 0; }
  .agent-facts > div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--rule); }
  .agent-facts > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .agent-meta { grid-column: 1 / -1; margin-top: 8px; }
  .dev-row { grid-template-columns: 1fr; }
  .dev-row .dev-top { min-height: 0; height: 120px; }
  .dev-row .dev-status { font-size: 25px; }
  .dev-row-body { padding: 20px 18px; }
  .dev-row-body h3 { font-size: 26px; }
  .aside-cta h3 { font-size: 22px; }
  .facts div { grid-template-columns: 116px 1fr; }

  .g-sec { padding-top: 64px; }
  .prose--lg p { font-size: 17px; }
  .prose--lg p.lead-p { font-size: 20px; margin-bottom: 22px; }
  .g-two p { font-size: 16px; }
  .times-band { margin-top: 64px; padding: 60px 0 52px; }
  .times-head { flex-direction: column; align-items: start; gap: 10px; margin-bottom: 26px; }
  .times-row b { font-size: 55px; }
  .times-row b + span { font-size: 24px; }
  .times-row p { font-size: 14px; margin-top: 12px; }
  .times-row li:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .pc { grid-template-columns: 1fr; gap: 20px; }
  .pc h3 { font-size: 25px; padding: 14px 20px 12px; }
  .pc li { font-size: 16px; padding: 14px 20px; }
  .faq summary { font-size: 18px; }
  .faq details p { padding-right: 0; font-size: 16px; }
  .near-wrap .near { font-size: 25px; line-height: 1.26; }
  .near-wrap .pl-inner a { text-underline-offset: 5px; }
  .g-last { padding-bottom: 72px; }
}

/* No italics anywhere on the site (also covers <em>, <i>, <cite>, <address>, <var>, <dfn>). */
em, i, cite, address, var, dfn { font-style: normal; }

/* assets/css/00-foundation.css */
/* Foundation additions for the full site: shell, generic page head, map, notices, prose, forms.
   Uses the tokens and type scale from style.css. */

/* ---------- shell ---------- */
.top { position: relative; }
.site-head--ink { color: var(--ink); }
.site-head--ink .btn--light { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.main-nav a[aria-current] { border-bottom-color: currentColor; }
body.menu-open { overflow: hidden; }
.menu {
  position: fixed; inset: 0; z-index: 40; overflow-y: auto;
  background: var(--sea); color: var(--lime);
  padding: 96px 0 48px;
}
.menu[hidden] { display: none; }
.menu nav { display: grid; border-top: 1px solid var(--rule-light); margin-bottom: 28px; }
.menu nav a { font-size: 26px; line-height: 1; padding: 14px 0 12px; border-bottom: 1px solid var(--rule-light); text-decoration: none; }
.menu p { margin-bottom: 18px; font-weight: 600; }
.menu-open .site-head { position: fixed; z-index: 50; color: var(--lime); }

/* ---------- generic first band (non-home, non-area pages) ---------- */
.page-head { position: relative; background: var(--sea); color: var(--lime); padding: 150px 0 72px; }
.page-head--pine { background: var(--pine); }
.page-head--rust { background: var(--rust); }
.page-head--ink { background: var(--ink); }
.page-head[style*="--zone"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--zone); }
.page-head-row { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: end; }
.page-head-row.has-aside { grid-template-columns: minmax(0, 1fr) 420px; }
.page-title { font-size: clamp(28px, 4.13vw, 62px); line-height: 1.06; margin-left: -.02em; }
.page-lede { font-size: 21px; line-height: 1.45; max-width: 46ch; margin-top: 26px; opacity: .94; text-wrap: pretty; }
.page-head .crumbs { margin-bottom: 22px; }

/* ---------- interactive map (Leaflet, assets/map.js) ---------- */
.lmap { position: relative; width: 100%; background: var(--sea); color: var(--lime); }
.lmap .leaflet-container, .lmap.leaflet-container { background: var(--sea); font-family: var(--sans); }
.lmap .leaflet-tile-pane { filter: grayscale(.55) contrast(.92) brightness(1.04); transition: opacity .35s; }
.lmap .leaflet-control-zoom { border: 0 !important; box-shadow: none !important; }
.lmap .leaflet-control-zoom a {
  width: 40px !important; height: 40px !important; line-height: 38px !important;
  border-radius: 0 !important; border: 1px solid var(--rule-light) !important;
  background: var(--sea) !important; color: var(--lime) !important; font: 400 22px/38px var(--sans) !important;
}
.lmap .leaflet-control-zoom a + a { margin-top: 6px; }
.lmap .leaflet-control-zoom a:hover { background: var(--sea-deep) !important; }
.lmap .leaflet-control-attribution { background: rgba(10, 40, 64, .7) !important; color: rgba(245, 239, 228, .8); font-size: 11px; }
.lmap .leaflet-control-attribution a { color: var(--lime); }
.lmap .leaflet-tooltip.zlabel {
  background: transparent; border: 0; box-shadow: none; padding: 0;
  font: 700 15px/1.1 var(--sans); color: var(--ink); text-align: center; white-space: nowrap;
  text-shadow: 0 0 3px var(--zc, #fff), 0 0 3px var(--zc, #fff), 0 0 6px var(--zc, #fff);
}
.lmap .leaflet-tooltip.zlabel.on-dark { color: var(--lime); text-shadow: 0 0 3px var(--zc), 0 0 3px var(--zc), 0 0 6px var(--zc); }
.lmap .leaflet-tooltip.zlabel b { font-weight: 800; margin-right: 5px; }
.lmap .leaflet-tooltip.plabel, .lmap .leaflet-tooltip.mlabel {
  background: var(--lime); color: var(--ink); border: 0; border-radius: 0; box-shadow: 0 1px 0 rgba(0,0,0,.2);
  font: 600 13px/1 var(--sans); padding: 6px 8px;
}
.lmap .leaflet-tooltip.plabel::before, .lmap .leaflet-tooltip.mlabel::before { display: none; }
.lmap .leaflet-tooltip.plabel.is-focus { background: var(--ink); color: var(--lime); font-size: 14px; }
.lmap .leaflet-popup-content-wrapper { border-radius: 0; background: var(--lime); color: var(--ink); box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.lmap .leaflet-popup-tip { background: var(--lime); }
.lmap .leaflet-popup-content { margin: 14px 16px; font: 15px/1.4 var(--sans); }
.lmap .leaflet-popup-content b { display: block; font: 500 26px/1 var(--display); font-stretch: var(--stretch); margin-bottom: 6px; }
.lmap .leaflet-popup-content a { font-weight: 600; color: var(--ink); }
.lmap-hint { position: absolute; left: 12px; bottom: 12px; z-index: 500; background: rgba(10, 40, 64, .82); color: var(--lime); font-size: 12px; padding: 6px 9px; pointer-events: none; }

/* ---------- notices ---------- */
.pending { border: 1px dashed var(--rule-strong); background: var(--stone); padding: 22px 26px 24px; margin: 0 0 32px; max-width: 62ch; }
.pending-title { font-size: 24px; line-height: 1; margin-bottom: 8px; }
.pending p:not(.pending-title) { font-size: 16px; }
.empty { border-top: 2px solid var(--ink); padding: 22px 0; font-size: 17px; }
.empty p + p { margin-top: 8px; font-weight: 600; }

/* ---------- prose (articles, guides, policy pages) ---------- */
.prose h2 { font-family: var(--display); font-stretch: var(--stretch); font-weight: 500; font-size: 26px; line-height: 1.06; margin: 56px 0 18px; }
.prose h3 { font: 700 21px/1.25 var(--sans); margin: 32px 0 10px; }
.prose p, .prose li { font-size: 18px; line-height: 1.65; max-width: 64ch; }
.prose p + p { margin-top: 16px; }
.prose ul, .prose ol { padding-left: 22px; margin: 14px 0; }
.prose li + li { margin-top: 8px; }
.prose a { color: var(--rust); font-weight: 600; }

/* ---------- utilities ---------- */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.agent[hidden], .dev[hidden], .dev-row[hidden] { display: none !important; }
.chk input:checked { background: var(--ink); box-shadow: inset 0 0 0 3px #fff; }
.chk input:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--rule-strong); background: #fff; }
.form-grid .field { border-bottom: 1px solid var(--rule); }
.form-grid .field + .field { border-top: 0; border-left: 0; }
.form-grid .field:nth-child(even) { border-left: 1px solid var(--rule); }
.form-grid .field--full { grid-column: 1 / -1; border-left: 0 !important; }
.form-grid textarea { display: block; width: 100%; border: 0; padding: 0; background: transparent; font: 17px/1.5 var(--sans); resize: vertical; min-height: 96px; outline: none; }
.field:focus-within { outline: 2px solid var(--rust); outline-offset: -2px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 20px; }
.form-actions p { font-size: 14px; color: var(--muted); max-width: 46ch; }

@media (max-width: 1100px) {
  .page-head-row.has-aside { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .page-head { padding: 112px 0 48px; }
  .page-title { font-size: 29px; }
  .page-lede { font-size: 18px; margin-top: 18px; }
  .menu { padding-top: 84px; }
  .menu nav a { font-size: 26px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .field:nth-child(even) { border-left: 0; }
  .prose h2 { font-size: 26px; margin-top: 44px; }
  .prose p, .prose li { font-size: 17px; }
}

/* assets/css/10-home.css */
/* HOME module: home page, areas hub (/areas/) and compare (/areas/compare/).
   Builds on the mockup classes in style.css (hero, trust, zone-grid, mapsec, places, devs, split2, agents-cta). */

/* ===================== HOME ===================== */
/* trust headings are h2 here (heading order), styled like the mockup's h3 */
.home-trust .trust-item h2 { font-family: var(--display); font-stretch: var(--stretch); font-weight: 500; font-size: 22px; line-height: 1; margin-bottom: 8px; }

/* the datalist arrow would eat the placeholder on phones; the suggestions still open as you type */
.search input[list]::-webkit-calendar-picker-indicator { display: none !important; }
.search-msg { margin-top: 12px; font-size: 15px; line-height: 1.45; max-width: 64ch; }
.search-msg:empty { display: none; }
.search-msg a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* the real interactive map replaces the mockup's static SVG */
.home-map .map-stage, .hub-map .map-stage { min-width: 0; }
.home-map .map-note, .hub-map .map-note { max-width: 74ch; line-height: 1.5; }
/* "Click the map, then scroll" means nothing on a touch screen; the note under the map covers pinching */
@media (hover: none) {
  .home-lmap .lmap-hint, .hub-lmap .lmap-hint { display: none; }
}

/* zone tiles: a deeper shade of the Northeast olive so small limestone text passes AA (5.26:1) */
/* Northeast tile colour now comes from the zone colour (#5D6830, AA with limestone). */
/* keep the moored boats' white hulls clear of the Southwest tagline. The photo is landscape in an
   upright tile, so object-position alone can't move it vertically: crop the bottom quarter instead.
   The hulls start at 74% of the photo's height, so at 135% they fall just below the tile's edge */
.zt[href="/areas/southwest/"] > img { bottom: auto; height: 135%; object-position: 50% 0; }

/* ===================== AREAS HUB ===================== */
.hub-head { padding-bottom: 56px; }
/* the ten zone colours, in key order, as one strip along the foot of the band */
.hub-strip { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; display: flex; }
.hub-strip span { flex: 1; background: var(--z); }

.hub-map { padding: 56px 0 104px; }
.hub-map .sec-head p { margin-bottom: 0; }

.hub-all { padding-top: 120px; }
.hub-all-head { display: grid; grid-template-columns: 1fr 420px; gap: 48px; align-items: end; margin-bottom: 48px; }
.hub-all-head p { font-size: 18px; }
.hub-all-head p i, .hub-az-head p i { font-family: var(--display); font-size: 1.15em; color: var(--rust); }
.hub-subnav { border-top: 1px solid var(--rule); }
.hub-subnav a { display: inline-flex; align-items: center; }
.hub-subnav a .sw { width: 12px; height: 12px; margin-right: 8px; }
.hub-subnav a b { font-weight: 700; margin-right: 5px; }
@media (min-width: 1101px) { .hub-subnav .subnav-row { gap: 26px; } }
@media (min-width: 1101px) { .hub-map .mapsec-grid { grid-template-columns: 340px minmax(0, 1fr); } }
.hub-legend small { margin-left: auto; font-size: 13px; font-weight: 400; opacity: .7; white-space: nowrap; }

/* zone bands alternate limestone and stone instead of ten hairline-split repeats */
.hub-zone { padding: 72px 0 80px; scroll-margin-top: 66px; }
.hub-zone:nth-of-type(even) { background: var(--stone); }
.hub-zone:last-child { padding-bottom: 120px; }
.hub-zone-grid { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 64px; align-items: start; }
.hub-zside { position: sticky; top: 89px; }
.hub-zside .zt { height: 420px; }
.hub-zmeta { margin: 18px 0 14px; font-size: 15px; color: var(--muted); }
.hub-zmeta b { color: var(--ink); font-weight: 700; }

/* the fold for phones; on wider screens the lists are always open and the summary is hidden */
.hub-more { min-width: 0; }
.hub-more > summary { display: none; }

.hub-row { padding: 18px 0 22px; border-top: 1px solid var(--rule); }
.hub-row:first-child { border-top: 2px solid var(--ink); }
.hub-row:last-child { border-bottom: 1px solid var(--rule); }
.hub-row-label { font-size: 15px; font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
.hub-row-label::before { content: ""; width: 14px; height: 14px; background: var(--z); flex: none; box-shadow: inset 0 0 0 1px rgba(20, 32, 42, .14); }
.hub-row-label a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hub-row-label a:hover { color: var(--rust); }
#zone-central-pla .hub-row-label::before { box-shadow: inset 0 0 0 1px var(--ink); }
.hub-names { font-size: 26px; line-height: 1.2; }
.hub-row--munis .hub-names { font-size: 27px; line-height: 1.16; }
/* long names ("Northern Eixample (Arxiduc & Plaça de Toros)") wrap under their own first letter,
   never past the edge of the column and never under the clipped "/" */
.hub-names .pl-inner li { display: flex; white-space: normal; min-width: 0; }
.hub-names .pl-inner li::before { flex: none; }
.hub-names .pl-inner a { min-width: 0; }

.hub-why { background: var(--sand); padding: 104px 0 116px; }
.hub-why .g-grid > * { min-width: 0; }
.hub-why .g-grid > h2 { position: static; }
.hub-why .prose a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hub-why .prose .hub-why-links { margin-top: 32px; font-size: 18px; }
.hub-why-links b { font-weight: 600; margin-right: 6px; }
.hub-why .prose .hub-why-links .arrow-link { text-decoration: none; }
.hub-why .prose .hub-why-alt { margin-top: 14px; font-size: 16px; font-weight: 600; }

/* every municipality and place, A to Z */
.hub-az { padding: 112px 0 120px; scroll-margin-top: 0; }
.hub-az-head { display: grid; grid-template-columns: 1fr 420px; gap: 48px; align-items: end; margin-bottom: 40px; }
.hub-az-head p { font-size: 18px; }
.az-letters { display: flex; flex-wrap: wrap; gap: 0 18px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 12px 0 10px; margin-bottom: 44px; font-size: 24px; line-height: 1; }
.az-letters a { text-decoration: none; padding: 2px 0; }
.az-letters a:hover { color: var(--rust); }
.hub-az-cols { columns: 4; column-gap: 32px; }
/* letters may continue into the next column, so the columns come out even; a letter never ends a column */
.az-group { padding-bottom: 26px; scroll-margin-top: 24px; }
.az-group h3 { font-size: 26px; line-height: 1; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--rule); break-after: avoid; break-inside: avoid; }
.az-group li { break-inside: avoid; }
.az-group ul { list-style: none; margin: 0; padding: 0; }
.az-group li { padding: 3px 0; font-size: 16px; line-height: 1.35; }
.az-group a { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.az-group a .sw { width: 11px; height: 11px; transform: translateY(1px); }
.az-group a span:last-child { text-decoration: underline; text-decoration-color: rgba(20, 32, 42, .25); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.az-group a:hover span:last-child { color: var(--rust); text-decoration-color: currentColor; }
.az-group a.has-guide span:last-child { font-family: var(--display); font-stretch: var(--stretch); font-style: normal; font-size: 19px; color: var(--rust); }

/* ===================== COMPARE ===================== */
.cmp-soon { border: 1px dashed rgba(245, 239, 228, .55); padding: 24px 26px 26px; }
.cmp-soon-title { font-size: 37px; line-height: 1.06; margin-bottom: 12px; }
.cmp-soon p:not(.cmp-soon-title) { font-size: 16px; line-height: 1.5; }

.cmp-list-sec { padding: 104px 0 112px; }
.cmp-list { list-style: none; margin: 0; padding: 0; }
.cmp-row a { display: grid; grid-template-columns: 116px minmax(0, 1fr) 40px; gap: 32px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.cmp-block { width: 116px; height: 116px; background: var(--z); color: var(--ink); display: flex; align-items: flex-end; padding: 0 14px 10px; }
.cmp-block.on-dark { color: var(--lime); }
.cmp-block.is-pale { box-shadow: inset 0 0 0 1px var(--ink); }
.cmp-block .display { font-size: 47px; line-height: 1.06; }
.cmp-text { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 6px 36px; align-items: center; }
.cmp-name { font-size: 35px; line-height: 1.06; }
.cmp-desc { display: grid; gap: 4px; }
.cmp-tag { font-size: 18px; line-height: 1.45; max-width: 52ch; }
.cmp-munis { font-size: 14px; color: var(--muted); line-height: 1.45; }
.cmp-row i { font-style: normal; font-size: 25px; text-align: right; transition: transform .2s; }
.cmp-row a:hover .cmp-name { color: var(--rust); }
.cmp-row a:hover i { transform: translateX(6px); }

.cmp-cta { background: var(--sand); padding: 96px 0 104px; }
.cmp-cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.cmp-cta p { font-size: 19px; max-width: 38ch; margin-bottom: 26px; }
.cmp-cta .btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ===================== responsive ===================== */
@media (max-width: 1240px) {
  .hub-az-cols { columns: 3; }
}
@media (max-width: 1100px) {
  .hub-zone-grid { grid-template-columns: 320px minmax(0, 1fr); gap: 44px; }
  .hub-zside .zt { height: 360px; }
  .cmp-text { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hub-all { padding-top: 88px; }
  .hub-all-head, .hub-az-head { grid-template-columns: 1fr; gap: 16px; }
  .hub-zone-grid { grid-template-columns: 1fr; gap: 28px; }
  .hub-zside { position: static; display: grid; grid-template-columns: 1fr; }
  /* the arrow link keeps its own width, so its underline never becomes a second heavy rule */
  .hub-zside .arrow-link { justify-self: start; }
  .hub-zside .zt { height: 280px; }
  .hub-lmap { height: 520px !important; }
  .hub-az { padding: 88px 0 96px; }
  .cmp-cta-row { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 600px) {
  .home-trust .trust-item h2 { font-size: 22px; margin-bottom: 6px; }
  .home-lmap { height: 350px !important; }
  .home-map .map-note, .hub-map .map-note { font-size: 13px; margin-top: 14px; }
  .search-msg { font-size: 14px; }

  .hub-head { padding-bottom: 48px; }
  .hub-strip { height: 8px; }
  .hub-map { padding: 48px 0 56px; }
  .hub-lmap { height: 380px !important; }
  .hub-all { padding-top: 64px; }
  .hub-all-head { margin-bottom: 28px; }
  .hub-all-head p, .hub-az-head p { font-size: 16px; }
  .hub-subnav a .sw { width: 10px; height: 10px; margin-right: 6px; }
  .hub-zone { padding: 36px 0 40px; scroll-margin-top: 54px; }
  .hub-zone:last-child { padding-bottom: 64px; }
  .hub-zside .zt { height: 200px; }
  .hub-zmeta { margin: 12px 0 10px; font-size: 14px; }
  .hub-zone-grid { gap: 24px; }

  /* "All places in …": one ruled row that opens the zone's lists */
  .hub-more > summary {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    list-style: none; cursor: pointer;
    padding: 14px 0 13px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule);
    font-size: 16px; font-weight: 600;
  }
  .hub-more > summary::-webkit-details-marker { display: none; }
  .hub-more > summary::after { content: "+"; font-size: 24px; font-weight: 400; line-height: 1; }
  .hub-more[open] > summary::after { content: "−"; }
  .hub-more .hub-row:first-child { border-top: 0; }

  .hub-row { padding: 14px 0 16px; }
  .hub-row-label { font-size: 14px; }
  .hub-names { font-size: 24px; line-height: 1.3; }
  .hub-row--munis .hub-names { font-size: 26px; line-height: 1.24; }
  .hub-names .pl-inner a { text-underline-offset: 5px; }
  /* same wrapping for the home page's popular places */
  .places .pl-inner li { display: flex; white-space: normal; min-width: 0; }
  .places .pl-inner li::before { flex: none; }
  .hub-why { padding: 64px 0 72px; }

  .hub-az { padding: 64px 0 72px; }
  .hub-az-head { margin-bottom: 24px; }
  .az-letters { font-size: 26px; gap: 0 13px; padding: 10px 0 8px; margin-bottom: 30px; }
  .hub-az-cols { columns: 2; column-gap: 18px; }
  .az-group { padding-bottom: 16px; }
  .az-group h3 { font-size: 22px; padding-bottom: 5px; }
  .az-group li { font-size: 15px; line-height: 1.3; padding: 2px 0; }
  .az-group a { gap: 8px; }
  .az-group a .sw { width: 9px; height: 9px; }
  .az-group a.has-guide span:last-child { font-size: 18px; }

  .cmp-soon { padding: 18px 18px 20px; }
  .cmp-soon-title { font-size: 30px; }
  .cmp-list-sec { padding: 56px 0 64px; }
  .cmp-row a { grid-template-columns: 64px minmax(0, 1fr) 20px; gap: 16px; align-items: start; padding: 14px 0 16px; }
  .cmp-block { width: 64px; height: 64px; padding: 0 8px 6px; }
  .cmp-block .display { font-size: 28px; }
  .cmp-name { font-size: 24px; }
  .cmp-tag { font-size: 15px; }
  .cmp-munis { font-size: 13px; }
  .cmp-row i { font-size: 20px; align-self: center; }
  .cmp-cta { padding: 64px 0 72px; }
  .cmp-cta p { font-size: 17px; }
}

/* assets/css/20-areas.css */
/* AREAS module: zone, municipality and place pages (/areas/<slug>/).
   Builds on the AREA PAGE / AREA GUIDE rules in style.css. Everything here is scoped to .ap / .ap-* / .zh*. */

/* ---------- split header (place, municipality, colour zones) ---------- */
.area-hero.ap-hero { height: auto; min-height: 520px; }
.ap-hero .area-title.t-m { font-size: clamp(31px, 4.04vw, 60px); }
.ap-hero .area-title.t-s { font-size: clamp(26px, 3.15vw, 46px); line-height: 1.06; }
.ap-hero .area-title.t-xs { font-size: clamp(23px, 2.61vw, 38px); line-height: 1.06; }
.ap-hero .area-title.t-l.w-l { font-size: clamp(34px, 4.82vw, 72px); }
.ap-hero .area-title.w-xl { font-size: clamp(31px, 4.23vw, 62px); }
.ap-hero .area-title.t-s.w-xl, .ap-hero .area-title.t-xs.w-xl { font-size: clamp(23px, 2.61vw, 38px); }
/* titles with a g, j, p, q, y or ç: room under the last line so descenders clear the meta line */
.ap-hero .area-title.has-desc { padding-bottom: .16em; }
.ap-hero .t-paren { display: block; font-size: .52em; font-style: normal; font-weight: 400; line-height: 1; margin-top: .3em; }
.ap-lede { font-size: 20px; line-height: 1.45; max-width: 36ch; margin-top: 22px; opacity: .94; }

/* map plate in place of a photo: sea blue, the municipality in its zone colour */
.ap-plate { background: var(--sea); }
.smap { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.smap .o { fill: rgba(245, 239, 228, .09); stroke: var(--sea); stroke-width: 1.6; stroke-linejoin: round; }
.smap .z { fill: rgba(245, 239, 228, .19); stroke: var(--sea); stroke-width: 1.6; stroke-linejoin: round; }
.smap .f { fill: var(--zone); stroke: var(--sea); stroke-width: 1.6; stroke-linejoin: round; }
.smap .fo { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 5 4; stroke-linejoin: round; }
.smap .ml { font: 700 13px var(--sans); letter-spacing: .14em; fill: rgba(245, 239, 228, .82); }
.smap .ml--f { fill: var(--ink); }
.smap .ml--fd { fill: var(--lime); }
.smap .pd { fill: var(--lime); stroke: var(--ink); stroke-width: 1.5; }
.smap .pf { fill: var(--ink); stroke: var(--lime); stroke-width: 3.5; }
/* labels sit wholly on one colour: limestone on the sea and on dark zones, ink on light zones (set in areas.mjs) */
.smap .sl { font: 600 13px var(--sans); fill: var(--lime); }
.smap .sl--ink { fill: var(--ink); }
.smap .lead { stroke: var(--lime); stroke-width: 1.6; }
.smap .lead--ink { stroke: var(--ink); }
.smap .pl { font: 500 calc(var(--fs, 46) * 1px) var(--display); font-stretch: var(--stretch); fill: var(--lime); }
.smap .pl--ink { fill: var(--ink); }
.smap .pl--halo { paint-order: stroke; stroke: var(--sea); stroke-width: 8px; stroke-linejoin: round; } /* only if no one-colour spot exists */
.smap--dark .fo { stroke: var(--lime); stroke-opacity: .7; }

/* zone colour block with the best-known places set as type (zones without a photo) */
.ap-block { background: var(--zone); color: var(--lime); }
.ap-block.on-light { color: var(--ink); }
.ap-block-places { position: absolute; top: 30px; left: 34px; right: 34px; list-style: none; margin: 0; padding: 0; font-size: clamp(18px, 1.76vw, 26px); line-height: 1.08; }
.ap-block-places li { border-top: 1px solid rgba(245, 239, 228, .32); }
.ap-block-places li:last-child { border-bottom: 1px solid rgba(245, 239, 228, .32); }
.ap-block.on-light .ap-block-places li { border-color: rgba(20, 32, 42, .24); }
.ap-block-places a { display: block; padding: 9px 0 8px; text-decoration: none; }
.ap-block-places a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }

/* ---------- zone header with a photo: full bleed, title on the photo, sea-blue panel below ---------- */
.zh { position: relative; height: clamp(560px, 74vh, 760px); color: var(--lime); background: var(--sea); overflow: hidden; display: flex; align-items: flex-end; padding-top: 92px; }
/* the header sits on a sea-blue strip (as on the place pages), so its text never lands on a bright sky */
.zh-img { position: absolute; left: 0; right: 0; top: 92px; width: 100%; height: calc(100% - 92px); object-fit: cover; }
.zh-shade { position: absolute; left: 0; right: 0; bottom: 0; top: 92px; background: linear-gradient(0deg, rgba(8, 26, 40, .72) 0, rgba(8, 26, 40, .12) 55%, rgba(8, 26, 40, 0) 75%), rgba(8, 26, 40, calc(var(--shade, .4) * .7)); }
.zh-title { text-shadow: 0 2px 4px rgba(4, 18, 30, .3), 0 2px 30px rgba(4, 18, 30, .45); }
.zh-body { position: relative; z-index: 2; width: 100%; padding-bottom: 42px; }
.zh-title { font-size: clamp(41px, 6.69vw, 104px); line-height: 1.06; margin-left: -.03em; max-width: 10.8em; }
.zh-title.has-desc { padding-bottom: .14em; }
.zh-panel { position: relative; background: var(--sea); color: var(--lime); padding: 26px 0 46px; }
/* crumbs on the left, the photo credit on the right, both on solid sea blue */
.zh-panel-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 32px; margin-bottom: 22px; }
.zh-panel .crumbs { margin-bottom: 0; }
.zh-cap { font-size: 12px; opacity: .82; }
.zh-cap b { font-weight: 600; }
.zh-panel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--zone); }
.zh-panel-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px 56px; }
.zh-lede { font-size: 23px; line-height: 1.38; max-width: 36ch; }
.zh-panel .area-meta { margin-top: 0; }

/* ---------- agent list, filters, developments ---------- */
.ap [id] { scroll-margin-top: 70px; }
.ap .agent[hidden], .ap .ag-group[hidden], .ap-empty[hidden] { display: none; }
.ap-empty { border-top: 2px solid var(--ink); margin-top: 36px; padding: 22px 0 6px; font-size: 17px; }
.ap-empty button { margin-top: 8px; background: none; border: 0; padding: 0; font: 600 16px/1.3 var(--sans); color: var(--ink); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.ap-devs { display: grid; gap: 18px; }
.ap-more { margin-top: 26px; }

/* side panel extras */
.ap .aside-map .lmap { border-top: 0; }
.ap .facts dd a { color: inherit; text-decoration-color: rgba(245, 239, 228, .45); text-underline-offset: 3px; }
.ap .facts dd a:hover { text-decoration-color: currentColor; }
.facts-note { margin-top: 16px; font-size: 14px; line-height: 1.5; opacity: .85; max-width: 42ch; }
.ap .aside-map .lmap-hint { font-size: 11px; padding: 4px 7px; left: 8px; bottom: 8px; }
/* the small side map names only the focus place until it is used; the other names show on hover or focus */
.ap .aside-map .lmap:not(:hover):not(:focus-within) .leaflet-tooltip.plabel:not(.is-focus) { display: none; }
/* laptop screens: the pane must fit the window without its own scroll */
@media (min-width: 901px) and (max-height: 860px) {
  .ap .aside-map .lmap { height: 200px !important; }
  .ap .aside-cta p { display: none; }
  .ap .aside-cta h3 { margin-bottom: 12px; }
}

/* ---------- guide part ---------- */
.ap-times .times-row { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
.ap-times .times-row.has-range b { font-size: 66px; }
.ap-nw { white-space: nowrap; }
.ap-times-note { margin-top: 34px; font-size: 16px; line-height: 1.5; opacity: .86; max-width: 64ch; }

.ap-bd { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.ap-bd > li { padding: 22px 0 24px; border-bottom: 1px solid var(--rule); }
.ap-bd-places { overflow-x: clip; font-size: 26px; line-height: 1.16; margin-bottom: 10px; }
.ap-bd-places .pl-inner a { text-underline-offset: 6px; }
.ap-bd > li > p:last-child { font-size: 18px; line-height: 1.55; max-width: 58ch; }

/* where no guide is written yet: one plain line above the nearby list */
.ap-noguide { font-size: 18px; line-height: 1.5; max-width: 60ch; margin-bottom: 40px; }
.ap-noguide .arrow-link { margin-left: 6px; }
.ap-barris { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 16px; line-height: 1.55; color: var(--muted); max-width: 70ch; }

/* section heads with a short note on the right */
.ap-sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 48px; }
.ap-sec-head p { font-size: 16px; color: var(--muted); max-width: 50ch; }
.ap-sec-head p i { font-family: var(--display); font-stretch: var(--stretch); font-size: 20px; color: var(--rust); }

/* Big typographic lists: an item moves to the next line whole; only a name longer than the whole line wraps,
   inside its own item. The slash stays in the clipped gutter and wrapped lines start at the edge. */
.ap .pl-inner li { white-space: normal; padding-left: .8em; text-indent: -.8em; }
.ap .pl-inner li::before { text-indent: 0; }
/* a small municipality note stays whole, on the line of its name where it fits */
.ap .pl-inner small { display: inline-block; white-space: nowrap; text-indent: 0; }
.ap .pl-tail { white-space: nowrap; }

/* municipalities and places (zone pages) */
.ap-places { padding-top: 104px; }
.ap-places .places-grid { grid-template-columns: 300px minmax(0, 1fr); }
.ap-places .places-head { top: 89px; }
.ap-places .places-head h2 { font-size: clamp(20px, 1.85vw, 26px); }
.ap-places .pl-zone a { text-decoration: none; border-bottom: 1.5px solid currentColor; }
.ap-places .pl-zone a:hover { color: var(--rust); }
.pl-count { font-weight: 500; color: var(--muted); margin-left: 4px; }
.ap-places .pl-names small { font-family: var(--sans); font-stretch: 100%; font-size: 15px; color: var(--muted); font-weight: 500; }

/* ten sub-navigation items (written zone guides) still fit one line on a 1280px laptop */
@media (max-width: 1360px) and (min-width: 901px) { .ap .subnav-row { gap: 26px; } }
@media (max-width: 1100px) {
  .zh-title { max-width: none; }
  .ap-places .places-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .area-hero.ap-hero { min-height: 0; }
  .ap-hero .area-title.t-m { font-size: 41px; }
  .ap-hero .area-title.t-s { font-size: 34px; }
  .ap-hero .area-title.t-xs, .ap-hero .area-title.t-s.w-xl, .ap-hero .area-title.t-xs.w-xl { font-size: 29px; }
  .ap-hero .area-title.t-l.w-l, .ap-hero .area-title.w-xl { font-size: 45px; }
  .ap-block { height: auto !important; min-height: 0; }
  .ap-block-places { position: static; padding: 22px var(--gutter) 26px; }
  .zh { height: 520px; }
  .ap-places .places-head { position: static; }
  .ap-times .times-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .ap-hero .area-title.t-l { font-size: 38px; }
  .ap-hero .area-title.t-l.w-l { font-size: 32px; }
  .ap-hero .area-title.w-xl { font-size: 26px; }
  .ap-hero .area-title.t-m { font-size: 28px; }
  .ap-hero .area-title.t-s { font-size: 22px; }
  .ap-hero .area-title.t-xs, .ap-hero .area-title.t-s.w-xl, .ap-hero .area-title.t-xs.w-xl { font-size: 20px; }
  .ap-lede { font-size: 17px; margin-top: 14px; }
  .smap .ml { font-size: 20px; }
  .smap .pl { font-size: calc(var(--fs, 46) * 1.35px); }
  .smap .pl--halo { stroke-width: 11px; }
  .smap .sl { font-size: 20px; }
  .smap .pd { r: 7; }
  .ap-block-places { font-size: 26px; padding: 16px var(--gutter) 20px; }
  .zh { height: 420px; padding-top: 72px; }
  .zh-img { top: 72px; height: calc(100% - 72px); }
  .zh-shade { top: 72px; }
  .zh-body { padding-bottom: 26px; }
  .zh-title.has-desc { padding-bottom: .1em; }
  .zh-title { font-size: 35px; }
  .zh-panel-top { margin-bottom: 16px; }
  .zh-cap { font-size: 11px; }
  .zh-panel { padding: 22px 0 32px; }
  .zh-lede { font-size: 18px; }
  .ap-times .times-row.has-range { grid-template-columns: 1fr; }
  .ap-times .times-row.has-range li { padding: 20px 0 22px !important; border-left: 0 !important; border-bottom: 1px solid var(--rule-light) !important; }
  .ap-times .times-row.has-range li:last-child { border-bottom: 0 !important; }
  .ap-times .times-row.has-range b { font-size: 50px; }
  .ap-times .times-row.has-range p { max-width: 36ch; }
  .ap-times .times-row.is-even li:last-child { grid-column: auto; }
  .ap-times .times-row.is-even li:nth-last-child(2) { border-bottom: 0; }
  .ap-times-note { font-size: 14px; margin-top: 22px; }
  .ap-bd-places { font-size: 27px; }
  .ap-bd > li > p:last-child { font-size: 16px; }
  .ap-noguide { font-size: 16px; margin-bottom: 26px; }
  .ap-noguide .arrow-link { display: inline-block; margin: 4px 0 0; }
  .near.has-more:not(.is-open) .pl-inner li:nth-child(n+5) { display: none; }
  .filters--3 .field:nth-child(3) { grid-column: 1 / -1; } /* no office checkbox: price takes the whole row */
  .ap-places { padding-top: 64px; }
  .ap-more .arrow-link { white-space: normal; }
}

/* no price filter (real agencies have no price data yet) */
.filters--noprice { grid-template-columns: repeat(2, 1fr) auto; }
.filters--noprice.filters--3 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) { .filters--noprice, .filters--noprice.filters--3 { grid-template-columns: 1fr 1fr; } .filters--noprice .chk { grid-column: 1 / -1; } }

/* long agent groups: first ten, the rest behind "Show all" (always shown while filtering) */
.ag-group:not(.is-open) .agent[data-more] { display: none; }
#agent-list.is-filtering .agent[data-more]:not([hidden]) { display: grid; }
#agent-list.is-filtering .ag-more-btn { display: none; }
.ag-more-btn { margin: 18px 0 8px; }

/* assets/css/30-agents.css */
/* ===================== AGENTS (hub, language and specialty pages, agency profiles) =====================
   Owned by scripts/pages/agents.mjs. Everything is scoped to agt-* classes so other modules are untouched. */

/* ---------- first band extras ---------- */
.agt-strip { display: flex; height: 8px; }
.agt-strip span { flex: 1; background: var(--z); }
/* Pla almond is close to the page colour: outline it, as data-pla swatches are */
.agt-strip span:last-child { box-shadow: inset 0 -1px 0 var(--rule-strong), inset 0 1px 0 var(--rule-strong); }
.page-head .agt-links { margin-top: 30px; max-width: 760px; }
.page-head .agt-links a { border-bottom-color: rgba(245, 239, 228, .55); }
.page-head .agt-links a:hover { border-bottom-color: var(--lime); }
.page-head--rust .page-title i, .page-head--pine .page-title i { font-weight: 400; }

/* ---------- results + sea pane ---------- */
.agt-split .area-main { padding-top: 64px; }
.agt-split .aside-inner { top: 0; max-height: 100vh; padding-top: 20px; }
.agt-aside-h { font-size: 15px; font-weight: 700; margin: 22px 0 10px; }
.agt-aside-p { font-size: 14px; opacity: .8; margin: -6px 0 12px; }
.agt-legend a, .agt-legend .agt-zero { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--rule-light); font-size: 15px; line-height: 1.3; font-weight: 500; text-decoration: none; }
.agt-legend .agt-kname { flex: 1; min-width: 0; }
.agt-legend .agt-n { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* zones with no agency: dim the swatch, keep the text readable (about 6:1 on sea and pine) */
.agt-legend .agt-zero .sw { opacity: .4; }
.agt-legend .agt-zero .agt-kname, .agt-legend .agt-zero .agt-n { color: rgba(245, 239, 228, .78); }
.agt-legend .agt-zero .agt-n { font-weight: 500; font-style: normal; }
.agt-legend a:hover .agt-kname { text-decoration: underline; text-underline-offset: 4px; }
.agt-legend .sw[data-pla] { box-shadow: none; }
.agt-split .aside-map { margin-top: 18px; }
.agt-split .aside-map .lmap-hint { display: none; }
.agt-split .aside-cta p { font-size: 14px; }
/* the sticky pane must always fit the screen: drop the small map on short windows */
@media (min-width: 901px) and (max-height: 899px) { .agt-split .aside-map { display: none; } }
/* landing pages: facts under the call to action */
.agt-facts { margin-top: 24px; }
.agt-facts div { grid-template-columns: 112px 1fr; }
.agt-aside-more { margin-top: 14px; font-size: 14px; font-weight: 600; }
.agt-aside-more a { text-decoration: none; border-bottom: 1px solid currentColor; }

/* the filter (reuses .filters / .field / .chk from the area page) */
.agt-filter .chk { user-select: none; }
.agt-filter .chk input { flex: none; cursor: pointer; }
.agt-filter .chk input:checked {
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3.2 3L14 5.5' fill='none' stroke='%23F5EFE4' stroke-width='2.2'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.agt-filter .chk input:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
.agt-filter .chk.is-off { color: var(--muted); cursor: default; }
.agt-filter .chk.is-off input { border-color: rgba(20, 32, 42, .35); cursor: default; }
.agt-chk-t { display: grid; line-height: 1.2; }
.agt-chk-t small { font-size: 12px; font-weight: 500; }
.agt-chk-t small[hidden] { display: none; }
.agt-results { margin-top: 26px; border-top: 2px solid var(--ink); }
.agt-results .agent[hidden] { display: none; }
/* area chosen: the two area-page groups */
.agt-results.is-grouped { border-top: 0; }
.agt-gh { margin-top: 40px; }
.agt-gh:first-child { margin-top: 6px; }
/* phones: a way past the long list */
.agt-skip { display: none; }
.agt-empty[hidden] { display: none; }
.agt-empty { margin-top: 26px; }
.agt-reset { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.agt-reset:hover { color: var(--rust); }
#agt-order a, .sortline a { white-space: nowrap; }
.agt-few { margin-top: 48px; padding: 22px 0 0; border-top: 2px solid var(--ink); max-width: 60ch; }
.agt-few p { font-size: 17px; }
.agt-few p + p { margin-top: 12px; }

/* ---------- browse by language / specialty (big typographic lists) ---------- */
.agt-browse-sec { border-top: 1px solid var(--rule); padding: 104px 0 112px; }
.agt-browse { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.agt-browse-col { min-width: 0; }
.agt-browse-head { margin-bottom: 18px; padding-bottom: 18px; align-items: flex-end; }
.agt-big { font-size: 26px; line-height: 1.18; }
.agt-big small, .agt-cov-places small {
  display: inline-block; /* keeps the count out of the link underline */
  font-family: var(--sans); font-stretch: 100%; font-style: normal; font-size: 14px; font-weight: 500;
  color: var(--muted); letter-spacing: 0; margin-left: 2px; white-space: nowrap;
}
/* landing pages end on a colour band (pine after a rust head, rust after a pine one) */
.agt-browse-sec.is-colour { border-top: 0; color: var(--lime); padding: 110px 0 116px; }
.agt-browse-sec.is-pine { background: var(--pine); }
.agt-browse-sec.is-rust { background: var(--rust); }
.is-colour .sec-head--line { border-bottom-color: var(--lime); }
.is-colour .arrow-link:hover { color: var(--lime); border-bottom-style: dashed; }
.is-colour .pl-inner li::before { color: rgba(245, 239, 228, .4); }
.is-colour .pl-inner a { text-decoration-color: rgba(245, 239, 228, .45); }
.is-colour .pl-inner a:hover { color: var(--lime); text-decoration-color: currentColor; }
.is-colour .agt-big small { color: var(--lime); }
.agt-devs + .agt-guides { padding-top: 0; }

/* new developments on the new-builds page */
.agt-devs { padding: 0 0 112px; }
@media (min-width: 901px) {
  .agt-devs .dev-grid.agt-dev2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agt-devs .dev-grid.agt-dev1 { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
}

/* landing pages: the zone key in the first band (wide screens), in the sea pane below 1100px */
.agt-headkey { padding-bottom: 4px; }
.agt-headkey .agt-aside-h { margin-top: 0; }
.agt-headkey .agt-aside-p { opacity: 1; }
.agt-headkey .legend .kn { opacity: 1; }
.agt-headkey .sw { box-shadow: inset 0 0 0 1px rgba(245, 239, 228, .45); }
.agt-headkey .legend a:hover .agt-kname { text-decoration: underline; }
.page-head--rust .agt-headkey .agt-zero .agt-kname, .page-head--rust .agt-headkey .agt-zero .agt-n { color: var(--lime); }
.agt-asidekey { display: none; }
@media (min-width: 1101px) { .page-head.agt-few-head { padding: 120px 0 48px; } }
@media (max-width: 1100px) {
  .agt-headkey, .page-head-aside:has(.agt-headkey) { display: none; }
  .page-head-row.has-aside:has(.agt-headkey) { gap: 0; }
  .agt-asidekey { display: block; }
}

/* ---------- hub: how we list + for agents ---------- */
.agt-join > h2 { margin-bottom: 22px !important; }
.agt-join > p { font-size: 18px; margin: 0 0 34px; max-width: 36ch; opacity: .94; }
.agt-results.is-empty { border-top: 0; }

/* ===================== AGENCY PROFILE ===================== */
.agt-hero { height: auto; min-height: 580px; }
.agt-hero .area-hero-text { padding-top: 124px; }
.agt-hero-id { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.agt-hero-logo { width: 92px; height: 92px; font-size: 39px; flex: none; box-shadow: inset 0 0 0 1px rgba(245, 239, 228, .35); }
.agt-hero-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 14px; }
.agt-hero-tags span:not(.tag) { opacity: .85; margin-left: 4px; }
.agt-hero .tag--feat { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.agt-hero-title { font-size: clamp(32px, 3.65vw, 56px); line-height: 1.06; margin-left: -.02em; }
.agt-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 24px; font-size: 17px; font-weight: 500; }
.agt-hero-meta b { font-weight: 700; }
.agt-hero-meta a { text-decoration: none; border-bottom: 1px solid rgba(245, 239, 228, .5); }
.agt-hero-meta a:hover { border-bottom-color: var(--lime); }
.agt-hero-meta .sw { width: 14px; height: 14px; box-shadow: none; margin-right: 9px; vertical-align: -1px; }
.agt-hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; }
.agt-hero-link { font-size: 15px; font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; }
/* no photo of the office's place: the zone colour as a block, one per office */
.agt-hero-colour { margin: 92px 0 0; display: flex; flex-direction: column; min-height: 0; }
.agt-hero-colour > div { flex: 1; background: var(--z); color: var(--lime); padding: 28px 36px 34px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.agt-hero-colour > div.on-light { color: var(--ink); }
.agt-hero-colour > div + div { border-top: 3px solid var(--sea); }
.agt-hero-colour b { font-weight: 500; font-size: clamp(29px, 3.02vw, 47px); line-height: 1.06; }
.agt-hero-colour span { font-size: 15px; font-weight: 600; }
/* a zone colour where neither text colour reaches 4.5:1: set the label large (3:1 rule) */
.agt-hero-colour > div.is-large span { font-size: 19px; font-weight: 700; }

.agt-prof [id], .agt-prof { scroll-margin-top: 72px; }
.agt-gl { position: sticky; top: 92px; }
.agt-gl > p { font-size: 16px; color: var(--muted); margin-top: 14px; max-width: 32ch; }
.agt-gl > p .arrow-link { color: var(--ink); }
.agt-gr { min-width: 0; }
.agt-sec.g-sec { padding-top: 96px; }
.agt-prof > .agt-sec:first-child { padding-top: 72px; }

/* key facts */
.agt-kf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 2px solid var(--ink); }
.agt-kf > div { padding: 18px 20px 24px 0; border-bottom: 1px solid var(--rule); }
.agt-kf > div:not(:nth-child(3n+1)) { padding-left: 20px; border-left: 1px solid var(--rule); }
.agt-kf dt { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.agt-kf dd { margin: 0; font-family: var(--display); font-stretch: var(--stretch); font-weight: 500; font-size: 24px; line-height: 1; }
.agt-kf dd small { display: block; font-family: var(--sans); font-stretch: 100%; font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--muted); margin-top: 8px; }
.agt-kf .reg::before { width: 14px; height: 8px; border-width: 0 0 3px 3px; margin-right: 12px; transform: rotate(-45deg) translate(2px, -6px); }
.agt-prof .pending { margin: 32px 0 0; }
.agt-prof .pending .pending-title { font-size: 26px; line-height: 1; }

/* areas covered */
.agt-cov { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.agt-cov > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 28px; padding: 22px 0 24px; border-bottom: 1px solid var(--rule); align-items: start; }
.agt-cov-zone { display: flex; align-items: center; gap: 14px; font-size: 28px; line-height: 1; }
.agt-cov-zone .sw { width: 18px; height: 18px; }
.agt-cov-zone a { text-decoration: none; }
.agt-cov-zone a:hover { color: var(--rust); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.agt-cov-detail { padding-top: 4px; }
.agt-cov-lead2 { font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.agt-cov-places { font-size: 25px; line-height: 1.25; }
.agt-cov-places .pl-inner a { text-underline-offset: 5px; }
.agt-cov-office { margin-top: 10px; font-size: 15px; font-weight: 600; }
.agt-cov-office a { color: var(--rust); }
.agt-cov-lead { font-size: 18px; line-height: 1.55; max-width: 56ch; margin-bottom: 22px; }
.agt-cov-lead a { font-weight: 600; color: var(--rust); }
.agt-cov-all { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; border-top: 2px solid var(--ink); }
.agt-cov-all a { display: flex; align-items: center; gap: 12px; padding: 14px 0 12px; border-bottom: 1px solid var(--rule); text-decoration: none; }
.agt-cov-all .kn { width: 22px; font-size: 14px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.agt-cov-all .display { font-size: 22px; line-height: 1; }
.agt-cov-all a:hover .display { color: var(--rust); }

/* rating and reviews band */
.agt-band { background: var(--sea); color: var(--lime); margin-top: 104px; padding: 72px 0 76px; }
.agt-band-row { display: grid; grid-template-columns: 1fr 1.15fr 1.15fr; border-top: 1px solid var(--rule-light); }
.agt-band-row > div { padding: 28px 32px 0 0; }
.agt-band-row > div + div { padding-left: 32px; border-left: 1px solid var(--rule-light); }
.agt-rate-line { display: flex; align-items: baseline; gap: 14px; }
.agt-rate { font-size: 74px; line-height: 1.06; }
.agt-rate-sub { margin-top: 14px; font-size: 16px; }
.agt-band h3 { font-size: 20px; font-weight: 700; line-height: 1.25; margin-bottom: 10px; }
.agt-band-row p:not(.agt-rate):not(.agt-rate-sub) { font-size: 16px; line-height: 1.55; max-width: 38ch; opacity: .9; }

/* office + map */
.agt-office .lmap { border: 1px solid var(--rule); }
/* the office map is about one place: no hint over the labels, and only the office's place is named
   (other places still open their popup on click) */
.agt-office .lmap-hint { display: none; }
.agt-office .leaflet-tooltip.plabel:not(.is-focus) { display: none; }
.agt-addr { list-style: none; margin: 26px 0 18px; padding: 0; border-top: 2px solid var(--ink); }
.agt-addr li { display: grid; gap: 4px; padding: 16px 0 18px; border-bottom: 1px solid var(--rule); font-size: 15px; }
.agt-addr b { font-family: var(--display); font-stretch: var(--stretch); font-weight: 500; font-size: 22px; line-height: 1; margin-bottom: 4px; }
.agt-addr b a { text-decoration: none; }
.agt-addr b a:hover { color: var(--rust); }
.agt-addr-z { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 500; }
.agt-addr-z .sw { width: 12px; height: 12px; }

/* developments + other agencies */
.agt-gr .dev-row + .dev-row { margin-top: 18px; }
.agt-others .ag-group:first-child { margin-top: 0; }
.agt-others .ag-group + .ag-group { margin-top: 40px; }
.agt-gap { height: 120px; }

/* closing call to action */
.agt-cta { background: var(--rust); color: var(--lime); padding: 96px 0 104px; }
.agt-cta-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px 72px; align-items: end; }
.agt-cta p { font-size: 20px; line-height: 1.5; max-width: 40ch; margin-top: 22px; }
.agt-cta-act { display: flex; flex-direction: column; align-items: start; gap: 18px; padding-bottom: 6px; }
.agt-cta .btn--light { padding: 17px 30px; font-size: 17px; }

/* ===================== responsive ===================== */
@media (max-width: 1100px) {
  .agt-browse { gap: 48px; }
  .agt-big { font-size: 28px; }
  .agt-band-row { grid-template-columns: 1fr 1fr; }
  .agt-rate-cell { grid-column: 1 / -1; padding-bottom: 28px !important; border-bottom: 1px solid var(--rule-light); }
  .agt-band-row > div:nth-child(2) { padding-left: 0; border-left: 0; }
  .agt-cov > li { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 900px) {
  .agt-split .aside-inner { padding-top: 36px; }
  .agt-browse { grid-template-columns: 1fr; gap: 64px; }
  .agt-hero { min-height: 0; }
  .agt-hero .area-hero-text { padding-top: 124px; }
  .agt-hero-colour { margin: 0; height: auto; }
  .agt-hero-colour > div { min-height: 150px; }
  .agt-hero-colour > div { padding: 18px var(--gutter) 22px; }
  .agt-gl { position: static; }
  .agt-kf { grid-template-columns: 1fr 1fr; }
  .agt-kf > div:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .agt-kf > div:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--rule); }
  .agt-cta-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .page-head .agt-links { margin-top: 22px; }
  .agt-split .area-main { padding-top: 36px; }
  .agt-results { margin-top: 18px; }
  .agt-browse-sec { padding: 64px 0 72px; }
  .agt-browse { gap: 52px; }
  .agt-big { font-size: 26px; line-height: 1.3; }
  .agt-big small { font-size: 13px; }
  /* stacked list with the count on the right, instead of ragged "/" lines */
  .agt-big .pl-inner { margin-left: 0; display: block; }
  .agt-big .pl-inner li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--rule); padding: 6px 0; white-space: normal; }
  .agt-big .pl-inner li::before, .agt-big .pl-inner li::after { display: none; }
  .agt-big .pl-inner a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; text-decoration: none; }
  .is-colour .agt-big .pl-inner li { border-bottom-color: var(--rule-light); }
  .agt-browse-sec.is-colour { padding: 64px 0 72px; }
  .agt-browse-head { align-items: start; }
  .page-head.agt-hub-head { padding-bottom: 36px; }
  .agt-hub .agents-head p { display: none; }
  .agt-hub .agents-head { margin-bottom: 20px; }
  .agt-skip { display: block; padding: 18px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
  .agt-skip[hidden] { display: none; }
  .agt-devs { padding-bottom: 72px; }

  .agt-hero .area-hero-text { padding: 96px var(--gutter) 26px; }
  .agt-hero-id { gap: 14px; margin-bottom: 18px; align-items: start; }
  .agt-hero-logo { width: 60px; height: 60px; font-size: 28px; }
  .agt-hero-tags { font-size: 13px; }
  .agt-hero-title { font-size: 28px; line-height: 1.06; }
  .agt-hero-meta { font-size: 15px; gap: 6px 18px; margin-top: 16px; }
  .agt-hero-meta b { flex-basis: 100%; }
  .agt-hero-meta .agt-founded { flex-basis: 100%; }
  .agt-hero-act { margin-top: 22px; gap: 14px 20px; }
  .agt-hero-colour > div { min-height: 112px; }
  .agt-hero-colour b { font-size: 28px; }
  .agt-hero-colour span { font-size: 13px; }

  .agt-sec.g-sec { padding-top: 64px; }
  .agt-prof > .agt-sec:first-child { padding-top: 44px; }
  .agt-kf dd { font-size: 26px; }
  .agt-kf > div { padding: 14px 12px 18px 0; }
  .agt-kf > div:nth-child(even) { padding-left: 14px; }
  .agt-cov-zone { font-size: 22px; }
  .agt-cov-places { font-size: 23px; line-height: 1.32; }
  .agt-cov-lead { font-size: 16px; }
  .agt-cov-all { grid-template-columns: 1fr; }
  .agt-cov-all .display { font-size: 26px; }
  .agt-band { margin-top: 64px; padding: 56px 0 52px; }
  .agt-band-row { grid-template-columns: 1fr; }
  .agt-band-row > div, .agt-band-row > div + div { padding: 22px 0; border-left: 0; }
  .agt-band-row > div + div { border-top: 1px solid var(--rule-light); }
  .agt-rate-cell { border-bottom: 0; padding-bottom: 22px !important; }
  .agt-rate { font-size: 55px; }
  .agt-office .lmap { height: 320px !important; }
  .agt-addr b { font-size: 25px; }
  .agt-gap { height: 72px; }
  .agt-cta { padding: 60px 0 64px; }
  .agt-cta p { font-size: 17px; }
  .agt-cta-act { width: 100%; }
  .agt-cta .btn--light { width: 100%; }
}
.agt-hub-head .page-lede { text-wrap: balance; }

/* Real agencies: where the details come from */
.agt-src { margin: 18px 0 0; font-size: 0.9rem; color: var(--muted, #5a6670); }
.agt-src a { color: inherit; }

/* Website and phone in the key facts: plain text, so long domains don't wrap in big serif */
.agt-kf dd a[href^="http"], .agt-kf dd a[href^="tel:"] { font-family: var(--sans); font-stretch: 100%; font-size: 18px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }

/* hub: first 30 agencies, then "Show all" */
.agt-results .agent.is-more { display: none; }
.agt-more-wrap { margin: 24px 0 0; }

/* assets/css/40-developments.css */
/* New developments module: hub, zone, place, status, project and developer pages.
   Every class here is prefixed nd- (or scoped under one) so it can't collide with other modules.
   Builds on style.css: .dev / .dev-row cards, .area-split + .area-aside, .facts, .steps, .guide-rows. */

/* ---------- section rhythm ---------- */
.nd-sec { padding: 104px 0; }
.nd-sec--rule { border-top: 1px solid var(--rule); }
.nd-head { align-items: end; }
.nd-head > p { font-size: 16px; color: var(--muted); margin: 0; max-width: 46ch; text-align: right; text-wrap: balance; }
.nd-head .arrow-link { margin-bottom: 4px; }

/* hub title: one line for "New developments", the place on the second */
.nd-hub .page-title { font-size: clamp(28px, 3.44vw, 51px); text-wrap: balance; }

/* ---------- status filter (big numerals in the first band) ---------- */
.nd-sx { border-top: 1px solid var(--rule-light); }
.nd-sx a {
  display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 14px 16px 12px; border-bottom: 1px solid var(--rule-light); text-decoration: none;
}
.nd-sx b { font-family: var(--display); font-stretch: var(--stretch); font-weight: 500; font-size: 39px; line-height: 1.06; }
.nd-sx span { font-size: 19px; font-weight: 600; line-height: 1.2; }
.nd-sx i { font-style: normal; font-size: 22px; transition: transform .2s; }
.nd-sx a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.nd-sx a:hover i { transform: translateX(4px); }
.nd-sx a[aria-current] { background: var(--lime); color: var(--sea); }
.nd-sx a[aria-current] i { visibility: hidden; }
.page-head--pine .nd-sx a[aria-current] { color: var(--pine); }

/* ---------- zone-coloured first band (zone, place and project pages) ---------- */
.nd-band {
  --pad: max(var(--gutter), calc((100vw - var(--max)) / 2));
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
  column-gap: 72px; align-items: end; min-height: 560px;
  padding: 150px var(--pad) 64px; background: var(--band); color: var(--lime);
}
.nd-band.is-light { color: var(--ink); }
.nd-band.has-photo { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); column-gap: 0; align-items: stretch; padding: 0 0 0 var(--pad); }
.nd-band.has-photo .nd-band-text { align-self: end; padding: 150px 48px 60px 0; }
.nd-band-text { min-width: 0; }
.nd-band-photo { margin: 92px 0 0; position: relative; overflow: hidden; min-height: 420px; }
.nd-band-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 62%; }
.nd-band-photo .photo-cap { right: 20px; bottom: 16px; font-size: 12px; }
.nd-band .crumbs { margin-bottom: 22px; }
.nd-band.is-light .crumbs a { border-bottom-color: rgba(20, 32, 42, .45); }
.nd-band-title { font-size: clamp(32px, 4.04vw, 58px); line-height: 1.06; margin-left: -.02em; }
.nd-band-title small { display: block; font-size: .4em; font-style: normal; font-weight: 400; line-height: 1; margin: 0 0 .2em .03em; }
.nd-band-lede { font-size: 20px; line-height: 1.45; max-width: 44ch; margin-top: 26px; }
.nd-band-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; margin-top: 22px; font-size: 16px; font-weight: 500; }
.nd-band-meta a { font-weight: 600; text-underline-offset: 3px; }
.nd-band-side { min-width: 0; }
/* place pages with a photo: the approved area header (title on sea blue, photo right, zone colour strip) */
.nd-band.has-photo.is-photo-sea { background: var(--sea); color: var(--lime); padding-bottom: 8px; }
.nd-band.is-photo-sea::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--z); z-index: 2; }
.nd-band-meta .sw { width: 16px; height: 16px; box-shadow: none; margin-right: 10px; vertical-align: -2px; }
/* the almond Pla is barely darker than the page: give the band an ink edge, as the Pla gets everywhere */
.nd-band.is-pla { border-bottom: 1px solid var(--rule-strong); }

/* side: places as type (zone pages) */
.nd-side-cap { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.nd-places { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgba(245, 239, 228, .32); }
.nd-places li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 10px 0 9px; border-top: 1px solid rgba(245, 239, 228, .32);
  font-family: var(--display); font-stretch: var(--stretch); font-size: 26px; line-height: 1.05;
}
.nd-places a { text-decoration: none; }
.nd-places a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.nd-places li span { flex: none; font: 600 15px/1.2 var(--sans); }
.is-light .nd-places, .is-light .nd-places li { border-color: rgba(20, 32, 42, .24); }

/* side: count (place pages without a photo) */
.nd-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.nd-count b { font-size: clamp(86px, 8.53vw, 131px); font-weight: 500; line-height: 1.06; }
.nd-count i { font-size: 28px; }

/* side: status and stage (project pages) */
.nd-stage-status { font-size: clamp(30px, 2.75vw, 39px); line-height: 1.06; }
.nd-stage-status b { display: block; font-weight: 500; }
.nd-stage-status i { display: block; font-weight: 400; }
.nd-track { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.nd-track li { padding-top: 12px; border-top: 6px solid rgba(245, 239, 228, .3); font-size: 14px; font-weight: 500; line-height: 1.25; }
.nd-track li.is-done { border-top-color: var(--lime); }
.nd-track li.is-now { font-weight: 700; }
.is-light .nd-track li { border-top-color: rgba(20, 32, 42, .2); }
.is-light .nd-track li.is-done { border-top-color: var(--ink); }

/* ---------- results layout under the band (reuses .area-split) ---------- */
.area-main.nd-main { padding-top: 72px; }
.nd-aside .aside-inner { top: 0; max-height: 100vh; padding-top: 36px; }
.nd-aside .facts dd a { text-underline-offset: 3px; }
.nd-aside-links { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; font-size: 15px; }
.nd-aside-links .arrow-link { white-space: normal; }
.nd-aside .aside-cta h3 { text-wrap: balance; }
.nd-rows .dev-row + .dev-row { margin-top: 16px; }
.nd-main .agents-head p { margin-top: 12px; }
.nd-main .list-note { margin-top: 18px; }

/* development grids: two columns for 2 or 4, stacked (not swiped) on phones */
@media (min-width: 901px) {
  .dev-grid.nd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .dev-grid.nd-grid--2 .dev-top { min-height: 210px; }
  .nd-grid--2 .dev-status { font-size: 29px; }
  .nd-grid--2 .dev-body h3 { font-size: 26px; }
}
.nd-grid .dev-body h3 { text-wrap: balance; }
/* the colour block grows with its text rather than letting a long status spill out of it */
.nd-grid .dev-top { height: auto; min-height: 170px; }
@media (min-width: 901px) and (max-width: 1100px) {
  .nd-grid:not(.nd-grid--2) .dev-status { font-size: 22px; }
  .nd-grid:not(.nd-grid--2) .dev-body h3 { font-size: 24px; }
}

/* ---------- zones as colour tiles ---------- */
.nd-zsec { padding: 100px 0 112px; border-top: 1px solid var(--rule); }
.nd-zones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px 14px; }
.nd-zones a { display: block; text-decoration: none; }
.nd-zt {
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  height: 180px; padding: 16px 18px 18px; background: var(--z); color: var(--ink);
}
.nd-zones a.is-dark .nd-zt { color: var(--lime); }
.nd-zones a[data-pla] .nd-zt { box-shadow: inset 0 0 0 1px var(--rule-strong); }
.nd-zt-n { font-size: 24px; line-height: 1.06; }
.nd-zt-name { font-size: 26px; line-height: 1.06; }
.nd-zones a:hover .nd-zt-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nd-zcount { display: block; margin-top: 10px; padding-top: 8px; border-top: 2px solid var(--ink); font-size: 15px; font-weight: 600; }
.nd-zcount.is-none { font-weight: 500; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 9px; }
.nd-here { color: var(--rust); font-weight: 600; }
.nd-head + .nd-devlist { border-top: 0; }
.nd-hfacts a { text-underline-offset: 3px; }
.nd-zones a[aria-current] .nd-zt { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---------- empty states ---------- */
.nd-empty { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 34px; padding: 30px 0 34px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.nd-empty--plain { grid-template-columns: minmax(0, 1fr); }
.nd-empty-mark {
  width: 150px; height: 150px; background: var(--z); color: var(--ink);
  display: flex; align-items: flex-end; padding: 14px 16px; font-size: 53px; line-height: 1.06;
}
.nd-empty-mark.is-dark { color: var(--lime); }
.nd-empty-mark[data-pla] { box-shadow: inset 0 0 0 1px var(--rule-strong); }
.nd-empty h2 { margin-bottom: 14px; }
.nd-empty p { font-size: 18px; line-height: 1.55; max-width: 54ch; }
.nd-links { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 30px; }
.nd-links .arrow-link { white-space: normal; }

/* ---------- project page ---------- */
.nd-main .a-sec > h2.h-m { margin-bottom: 24px; }
.nd-glance { display: grid; grid-template-columns: repeat(4, auto); margin: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.nd-glance > div { padding: 16px 20px 22px 0; min-width: 0; }
.nd-glance > div + div { padding-left: 20px; border-left: 1px solid var(--rule); }
.nd-glance dt { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.nd-glance dd { margin: 0; font-family: var(--display); font-stretch: var(--stretch); font-weight: 500; font-size: 24px; line-height: 1; text-wrap: balance; }
.nd-facts { margin: 36px 0 0; border-top: 1px solid var(--rule-strong); }
.nd-facts > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; padding: 15px 0 14px; border-bottom: 1px solid var(--rule); }
.nd-facts dt { font-size: 15px; font-weight: 500; color: var(--muted); padding-top: 2px; }
.nd-facts dd { margin: 0; font-size: 18px; line-height: 1.45; font-weight: 500; }
.nd-facts a { font-weight: 600; text-underline-offset: 3px; }
.nd-facts a:hover { color: var(--rust); }
.nd-chain span[aria-hidden] { margin: 0 10px; color: var(--muted); }
.nd-feats { list-style: none; margin: 0; padding: 0; }
.nd-feats li + li { margin-top: 4px; }
.nd-sold { margin-top: 0; }
.nd-sold .ag-group-head { grid-template-columns: minmax(0, 1fr) auto; }
.nd-sold .ag-group-head h2 { margin-bottom: 10px; }
.nd-sold + .list-note, .nd-main #agents .list-note { margin-top: 18px; }

.nd-offplan { background: var(--rust); color: var(--lime); padding: 40px 44px 44px; }
.nd-offplan h2 { font-size: clamp(26px, 2.5vw, 37px); margin-bottom: 14px; }
.nd-offplan p { font-size: 18px; line-height: 1.55; max-width: 50ch; }
.nd-offplan .btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 26px; }
.nd-light-link { font-weight: 600; text-underline-offset: 4px; }

/* ---------- hub: developers, split, call to action ---------- */
.nd-two { display: grid; grid-template-columns: 1fr 2fr; gap: 72px; align-items: start; }
.nd-two-head { position: sticky; top: 40px; }
.nd-two-head p { font-size: 17px; margin: 18px 0 22px; max-width: 32ch; }
.nd-two-head h2 + .arrow-link { display: inline-block; margin-top: 22px; }

.nd-devlist { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.nd-devlist a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: center;
  padding: 24px 0 22px; border-bottom: 1px solid var(--rule); text-decoration: none;
}
.nd-dl-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.nd-dl-name .display { font-size: 26px; line-height: 1.06; }
.nd-dl-meta { grid-column: 1; font-size: 16px; }
.nd-dl-meta b { font-weight: 600; }
.nd-dl-zones { grid-column: 1; display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 14px; font-weight: 600; color: var(--muted); }
.nd-dl-zones span { display: inline-flex; align-items: center; gap: 8px; }
.nd-dl-zones .sw { width: 12px; height: 12px; }
.nd-devlist i { grid-column: 2; grid-row: 1 / span 3; font-style: normal; font-size: 25px; transition: transform .2s; }
.nd-devlist a:hover .display { color: var(--rust); }
.nd-devlist a:hover i { transform: translateX(6px); }
/* developments as compact rows (empty zone pages) */
.nd-devlist--devs a { padding: 18px 0 16px; gap: 6px 20px; }
.nd-devlist--devs .nd-dl-name .display { font-size: 24px; }
.nd-devlist--devs .nd-dl-meta { font-size: 15px; }

/* a single development on a status page: two-thirds column beside its heading */
.nd-solo .nd-two-head p { color: var(--muted); font-size: 16px; }

.nd-split { display: grid; grid-template-columns: 1fr 1fr; }
.nd-split > div { padding: 104px 72px 110px; display: flex; flex-direction: column; }
.nd-split-a { background: var(--rust); color: var(--lime); padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2)) !important; }
.nd-split-a--pine { background: var(--pine); }
.nd-split-a--pine .guide-rows { border-top-color: var(--rule-light); }
.nd-split-a--pine .nd-split-foot { border-top: 0; padding-top: 32px; }
.nd-split-a--pine .guide-rows a { border-bottom-color: var(--rule-light); }
.nd-split-a--pine .guide-rows a:hover { color: var(--sand); }
.nd-split-a--pine .nd-guides small { color: var(--lime); opacity: .78; }
.nd-split-a .arrow-link:hover { color: var(--sand); }
.nd-split + .nd-zsec { border-top: 0; }
.nd-split-b { background: var(--sand); color: var(--ink); padding-right: max(var(--gutter), calc((100vw - var(--max)) / 2)) !important; justify-content: center; }
.nd-split-lede { font-size: 18px; margin: 22px 0 36px; max-width: 40ch; }
.nd-split-a .steps { margin-bottom: 0 !important; }
.nd-split-foot { border-top: 1px solid var(--rule-light); padding-top: 24px; margin-top: auto; }
.nd-split-b p { font-size: 19px; margin: 24px 0 34px; max-width: 34ch; }
.nd-split-b .btns, .nd-cta .btns { display: flex; flex-wrap: wrap; gap: 12px; }

.nd-cta { background: var(--sand); }
.nd-cta-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px 72px; align-items: end; padding-top: 88px; padding-bottom: 92px; }
.nd-cta p { font-size: 19px; margin-top: 20px; max-width: 46ch; }

/* ---------- developer pages (pine page head) ---------- */
.nd-head-tags { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 15px; }
.nd-hfacts { margin-top: 0; }
.nd-hfacts div { grid-template-columns: 136px 1fr; }
.nd-zl { display: inline-flex; align-items: center; margin-right: 16px; }

/* ---------- guides list ---------- */
.nd-guides a > span { display: block; }
.nd-guides b { font-weight: 600; }
.nd-guides small { display: block; margin-top: 3px; font-size: 15px; font-weight: 400; color: var(--muted); }

/* ===================== responsive ===================== */
@media (max-width: 1100px) {
  .nd-band { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); column-gap: 48px; }
  .nd-zt-name { font-size: 26px; }
  .nd-glance { grid-template-columns: 1fr 1fr; }
  .nd-glance > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .nd-glance > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .nd-split { grid-template-columns: 1fr; }
  .nd-split > div { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
}
@media (min-width: 601px) and (max-width: 1100px) {
  /* the main column is narrow beside the map pane: agent facts go 2 x 2, rows get a slimmer colour block */
  .nd-main .agent-facts { grid-template-columns: 1fr 1fr; }
  .nd-main .agent-facts > div { padding: 12px 12px 12px 0; }
  .nd-main .agent-facts > div + div { padding-left: 0; border-left: 0; }
  .nd-main .agent-facts > div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--rule); }
  .nd-main .agent-facts > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .nd-main .agent-name { font-size: 24px; }
  .nd-main .agent-name a { white-space: nowrap; }
  .nd-main .dev-row { grid-template-columns: 190px minmax(0, 1fr); }
  .nd-main .dev-row .dev-status { font-size: 26px; }
}
@media (max-width: 900px) {
  .nd-sec { padding: 80px 0; }
  .nd-band, .nd-band.has-photo { grid-template-columns: 1fr; row-gap: 36px; min-height: 0; padding: 124px var(--gutter) 44px; }
  .nd-band.has-photo { padding: 0; row-gap: 0; }
  .nd-band.has-photo .nd-band-text { padding: 124px var(--gutter) 32px; }
  .nd-band-photo { margin: 0; min-height: 260px; }
  .nd-zones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nd-two { grid-template-columns: 1fr; gap: 28px; }
  .nd-two-head { position: static; }
  .nd-cta-row { grid-template-columns: 1fr; padding-top: 64px; padding-bottom: 68px; }
  .nd-head > p { text-align: left; }
  .area-main.nd-main { padding-top: 48px; }
  .nd-aside .aside-inner { max-height: none; }
}
@media (max-width: 600px) {
  .nd-sec { padding: 60px 0; }
  .nd-head { flex-direction: column; align-items: start; }

  .nd-hub .page-title { font-size: 20px; }
  .nd-sx a { grid-template-columns: 50px minmax(0, 1fr) auto; gap: 10px; padding: 11px 12px 10px; }
  .nd-sx b { font-size: 26px; }
  .nd-sx span { font-size: 17px; }

  .nd-band { padding: 100px var(--gutter) 36px; row-gap: 28px; }
  .nd-band.has-photo .nd-band-text { padding: 100px var(--gutter) 26px; }
  .nd-band-photo { min-height: 0; }
  .nd-band-photo img { position: static; height: 210px; }
  .nd-band-photo .photo-cap { position: static; display: block; text-align: left; color: inherit; text-shadow: none; background: none; border-radius: 0; padding: 10px var(--gutter) 14px; font-size: 12px; opacity: .85; }
  .nd-band-photo .photo-cap b { color: inherit; }
  .nd-band-title { font-size: 28px; line-height: 1.06; }
  .nd-band-title small { font-size: 20px; }
  .nd-band-lede { font-size: 17px; margin-top: 18px; }
  .nd-band-meta { font-size: 14px; gap: 6px 18px; margin-top: 16px; }
  .nd-band .crumbs { margin-bottom: 16px; }
  .nd-places li { font-size: 25px; padding: 8px 0 7px; }
  .nd-places li span { font-size: 13px; }
  .nd-count b { font-size: 72px; }
  .nd-count i { font-size: 26px; }
  .nd-stage-status { font-size: 26px; }
  .nd-track { margin-top: 20px; }
  .nd-track li { font-size: 13px; }

  .nd-grid .dev-top { min-height: 120px; }
  .dev-grid.nd-grid {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; gap: 36px;
    overflow: visible; scroll-snap-type: none; margin: 0; padding: 0;
  }

  .nd-zsec { padding: 60px 0 68px; }
  .nd-zones { grid-template-columns: 1fr 1fr; gap: 20px 10px; }
  .nd-zt { height: 116px; padding: 12px 14px 14px; }
  .nd-zt-n { font-size: 26px; }
  .nd-zt-name { font-size: 26px; }
  .nd-zcount { font-size: 14px; margin-top: 8px; padding-top: 6px; }
  .nd-here { display: none; }

  .nd-empty { grid-template-columns: 1fr; gap: 18px; padding-top: 22px; }
  .nd-empty-mark { width: 84px; height: 84px; font-size: 27px; padding: 10px 12px; }
  .nd-empty p { font-size: 16px; }

  .nd-glance dd { font-size: 25px; }
  .nd-glance > div { padding: 14px 12px 16px 0; }
  .nd-glance > div:nth-child(even) { padding-left: 14px; }
  .nd-facts > div { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
  .nd-facts dt { font-size: 13px; font-weight: 700; }
  .nd-facts dd { font-size: 16px; }
  .nd-sold .ag-group-head { grid-template-columns: 1fr; }
  .nd-offplan { padding: 28px 22px 30px; }
  .nd-offplan p { font-size: 16px; }

  .nd-dl-name .display { font-size: 24px; }
  .nd-devlist a { padding: 18px 0 16px; }
  .nd-split > div { padding-top: 60px; padding-bottom: 64px; }
  .nd-split-lede, .nd-split-b p { font-size: 16px; margin: 16px 0 26px; }
  .nd-cta p { font-size: 17px; }
  .nd-hfacts div { grid-template-columns: 116px 1fr; }
}

/* assets/css/50-editorial.css */
/* EDITORIAL module: guides, news, blog, market, find me an agent, for agents, services,
   about, how we list agents, contact, legal pages, 404. Every class here starts with .ed-
   (or is scoped under one) so nothing leaks into other modules. */

/* ---------- sections and the two-column grid ---------- */
.ed-sec { padding: 104px 0 120px; }
.ed-sec--rule { border-top: 1px solid var(--rule); }
.ed-band { padding: 104px 0 112px; color: var(--lime); }
.ed-band--sea { background: var(--sea); }
.ed-band--pine { background: var(--pine); }
.ed-band--rust { background: var(--rust); }

.ed-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 72px; align-items: start; }
.ed-grid--next { margin-top: 112px; }
.ed-grid--group + .ed-grid--group { margin-top: 104px; }
.ed-side { position: sticky; top: 32px; }
.ed-side-note { font-size: 16px; line-height: 1.5; color: var(--muted); margin-top: 18px; max-width: 30ch; }
.ed-band .ed-side-note { color: inherit; }
.ed-side .arrow-link { display: inline-block; margin-top: 22px; }
.ed-group-n { display: block; font-size: 84px; line-height: 1.06; color: var(--rust); margin-bottom: 22px; }
.ed-after { margin-top: 28px; }
.ed-links { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 24px; }
.ed-two { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; margin-top: 112px; }
.ed-two > div { border-top: 2px solid var(--ink); padding-top: 26px; }
.ed-two h2 { margin-bottom: 14px; }
.ed-two p { font-size: 18px; line-height: 1.6; max-width: 48ch; margin-bottom: 20px; }

/* status box on the right of a page head ("In preparation", "Coming soon") */
.ed-status { background: var(--lime); color: var(--ink); padding: 24px 26px 26px; }
.ed-status-k { font-size: 30px; line-height: 1.06; margin-bottom: 12px; }
.ed-status p:not(.ed-status-k) { font-size: 16px; line-height: 1.5; }
.ed-status .ed-status-meta { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 15px; }
.ed-status-meta a { font-weight: 600; }
.ed-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* ---------- big guide rows on limestone (the mockup's pine list, in ink) ---------- */
.ed-glist { border-bottom-color: var(--rule); }
.ed-glist a { border-top-color: var(--rule); padding: 22px 0 24px; }
.ed-glist li:first-child a { border-top: 2px solid var(--ink); }
.ed-glist b { font-size: 26px; }
.ed-glist span { opacity: 1; color: var(--muted); font-size: 16px; margin-top: 6px; }
.ed-glist i { color: var(--rust); }
.ed-glist a:hover b { color: var(--rust); }

/* rows of links with a note (area page "Useful guides") */
.ed-rows a { align-items: center; }
.ed-rows a > span { display: block; }
.ed-rows b { display: block; font-weight: 600; }
.ed-rows small { display: block; margin-top: 3px; font-size: 15px; font-weight: 400; line-height: 1.4; color: var(--muted); }

/* numbered list set large: guide contents, things you'll be able to do */
.ed-cover { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.ed-cover li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 18px; align-items: baseline; padding: 22px 0 24px; border-bottom: 1px solid var(--rule); }
.ed-cover-n { font-size: 38px; line-height: 1.06; color: var(--rust); }
.ed-cover p { font-size: 30px; line-height: 1; }
.ed-cover small { display: block; margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--muted); max-width: 54ch; }
.ed-cover--plain li { grid-template-columns: minmax(0, 1fr); }

/* ten zones with number and colour */
.ed-zlist { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 40px; }
.ed-zlist li { display: flex; }
.ed-zlist a { flex: 1; display: grid; grid-template-columns: 26px 18px minmax(0, 1fr) auto; gap: 0 14px; align-items: center; padding: 15px 0 14px; border-bottom: 1px solid var(--rule); text-decoration: none; }
.ed-zlist .kn { font-size: 15px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.ed-zlist .sw { width: 18px; height: 18px; }
.ed-zname { font-size: 22px; line-height: 1; }
.ed-zlist i { font-style: normal; font-size: 20px; line-height: 1; color: var(--rust); }
.ed-zlist a:hover .ed-zname { color: var(--rust); }

/* photo + sand panel; the caption gets a dark backing so it reads on any photo */
.ed-cta figcaption { background: rgba(10, 22, 32, .62); padding: 5px 9px; text-shadow: none; }
/* photo on the right */
.ed-cta--flip figure { order: 2; }
.ed-cta--flip .agents-panel { padding: 96px 80px 96px max(var(--gutter), calc((100vw - var(--max)) / 2)); }

/* ---------- guides hub: glossary band ---------- */
.ed-gloss { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 72px; align-items: center; }
.ed-gloss-text p { font-size: 19px; line-height: 1.5; margin: 20px 0 28px; max-width: 34ch; opacity: .92; }
.ed-words { font-size: clamp(37px, 4.98vw, 76px); line-height: 1.06; }
.ed-words .pl-inner { flex-direction: column; }
.ed-words .pl-inner li::before { color: rgba(245, 239, 228, .3); }
.ed-words .pl-inner span { font-style: normal; font-weight: 400; }

/* ---------- news ---------- */
.ed-pending { margin-bottom: 44px; }
/* .pending p (foundation) would otherwise shrink the title to body size */
.ed-pending p.pending-title { font-size: 24px; line-height: 1; margin-bottom: 10px; }
.ed-pending .ed-links { margin-top: 14px; }

/* ---------- blog ---------- */
.ed-headnote { font-size: 15px; color: var(--muted); }
.ed-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.ed-post { display: grid; grid-template-columns: 240px minmax(0, 1fr); background: #fff; border: 1px solid var(--rule); }
.ed-post-top { background: var(--z); color: var(--ink); padding: 20px 22px 22px; min-height: 200px; display: flex; flex-direction: column; justify-content: flex-end; }
.ed-post-top.on-dark { color: var(--lime); }
.ed-post-zone { font-size: 24px; font-weight: 500; line-height: 1; }
.ed-post-body { padding: 28px 32px 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.ed-post-body h3 { font-size: clamp(20px, 2.02vw, 30px); line-height: 1.06; max-width: 19em; }
.ed-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 15px; color: var(--muted); }
.ed-post-meta a { color: var(--ink); font-weight: 600; }
.ed-post-meta a:hover { color: var(--rust); }

/* ---------- find me an agent ---------- */
.ed-match { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 64px; align-items: start; }
.ed-match [hidden] { display: none !important; }
.ed-agent-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; padding: 14px 18px; background: var(--stone); font-size: 17px; }
.ed-agent-note b { font-weight: 700; }
.ed-form .form-grid .field:nth-child(odd) { border-left: 0; }
.ed-form .field input { font-size: 17px; }
.ed-zones { border: 0; margin: 0; min-width: 0; padding: 14px 22px 16px; cursor: default; }
.ed-zones legend { float: left; width: 100%; padding: 0; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.ed-zones legend small, .ed-req { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; white-space: nowrap; }
.ed-form-notes p + p { margin-top: 4px; }
.ed-form-notes a { color: var(--ink); font-weight: 600; white-space: nowrap; }
.ed-zone-grid { clear: both; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.ed-zone { display: grid; grid-template-columns: 20px 20px 14px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 16px; font-weight: 500; cursor: pointer; }
.ed-zone input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--ink); border-radius: 1px; background: #fff; cursor: pointer; }
.ed-zone input:checked { background: var(--ink); box-shadow: inset 0 0 0 3px #fff; }
.ed-zone input:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
.ed-zone .kn { font-size: 14px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.ed-zone:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.ed-next { background: var(--rust); color: var(--lime); padding: 34px 34px 30px; position: sticky; top: 24px; }
.ed-next h2 { margin-bottom: 24px; }
.ed-next .steps { margin-bottom: 0 !important; }
.ed-next .step { grid-template-columns: 46px 1fr; }
.ed-next .step h3 { text-wrap: balance; }
.ed-next .step:last-child { padding-bottom: 22px; }
.ed-next-foot { border-top: 1px solid var(--rule-light); padding-top: 18px; font-size: 15px; line-height: 1.5; }
.ed-next-foot a { font-weight: 600; }
.ed-thanks { background: var(--stone); padding: 44px 44px 48px; outline: none; }
.ed-thanks p:not(.ed-links) { font-size: 19px; line-height: 1.5; margin-top: 16px; max-width: 44ch; }

/* ---------- for agents ---------- */
.ed-demo { border-top: 2px solid var(--ink); }
.ed-demo-h { font-size: 15px; font-weight: 700; color: var(--muted); padding: 22px 0 10px; border-bottom: 1px solid var(--rule); }

/* plans: a ruled comparison (the .times / .faq rules), stacked per plan on phones */
.ed-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ed-cmp { width: 100%; border-collapse: collapse; table-layout: fixed; border-top: 2px solid var(--ink); }
.ed-cmp thead td { width: 34%; }
.ed-cmp thead th { text-align: left; vertical-align: bottom; padding: 30px 24px 14px; border-bottom: 8px solid var(--c); }
.ed-cmp thead th span { display: block; font-weight: 500; font-size: clamp(29px, 2.89vw, 42px); line-height: 1.06; }
.ed-cmp tbody tr { border-bottom: 1px solid var(--rule); }
.ed-cmp tbody th { text-align: left; vertical-align: middle; padding: 17px 24px 17px 0; font-size: 17px; font-weight: 600; line-height: 1.35; }
.ed-cmp tbody th small { display: block; margin-top: 3px; font-size: 14px; font-weight: 400; color: var(--muted); }
.ed-cmp td { padding: 17px 24px; vertical-align: middle; }
.ed-cmp tr.ed-cmp-pricerow th, .ed-cmp tr.ed-cmp-pricerow td { vertical-align: bottom; padding-top: 34px; padding-bottom: 26px; }
.ed-cmp-pricerow { border-bottom: 2px solid var(--ink) !important; }
.ed-cmp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.ed-cmp-price small { flex-basis: 100%; font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.ed-cmp-price b { font-weight: 500; font-size: 42px; line-height: 1.06; }
.ed-cmp-price i { font-size: 26px; }
.ed-cmp-tag { margin-top: 14px; }
.ed-cmp tr.ed-cmp-actions { border-bottom: 0; }
.ed-cmp tr.ed-cmp-actions td { vertical-align: top; padding-top: 28px; }
.ed-cmp-soon { font-size: 14px; color: var(--muted); }
.ed-yes { display: inline-block; width: 16px; height: 9px; border-left: 3px solid var(--pine); border-bottom: 3px solid var(--pine); transform: rotate(-45deg) translate(2px, -2px); }
.ed-no { font-size: 22px; line-height: 1; color: var(--muted); }
.ed-cmp-m { display: none; }
.ed-cmp-plan { border-top: 2px solid var(--ink); }
.ed-cmp-plan h2 { font-size: 26px; line-height: 1.06; padding: 18px 0 12px; border-bottom: 8px solid var(--c); }
.ed-cmp-plan .ed-cmp-price { margin-top: 20px; }
.ed-cmp-plan .ed-cmp-price b { font-size: 39px; }
.ed-cmp-facts { margin-top: 18px; border-top-color: var(--rule); }
.ed-cmp-facts div { grid-template-columns: minmax(0, 1fr) 28px; align-items: center; border-bottom-color: var(--rule); }
.ed-cmp-facts dt { opacity: 1; font-weight: 600; }
.ed-cmp-facts dt small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.ed-cmp-facts dd { text-align: center; }
.ed-cmp-plan > .btn, .ed-cmp-plan > .ed-cmp-soon { margin-top: 18px; }

/* ---------- services ---------- */
.ed-svc { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.ed-svc li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: baseline; padding: 26px 0 24px; border-bottom: 1px solid var(--rule); }
.ed-svc h2 { font-size: clamp(29px, 3.41vw, 51px); line-height: 1.06; }
.ed-svc .arrow-link { justify-self: end; white-space: normal; }

/* ---------- about ---------- */
.ed-trust .trust-item h2 { font-family: var(--display); font-stretch: var(--stretch); font-weight: 500; font-size: 22px; line-height: 1; margin-bottom: 8px; }

/* ---------- how we list agents: the rust band with the numbered steps ---------- */
.ed-order .steps { margin-bottom: 0 !important; border-bottom: 1px solid var(--rule-light); }
.ed-order .step { grid-template-columns: 72px 1fr; padding: 28px 0 30px; }
.ed-order .step-n { font-size: 55px; }
.ed-order .step h3 { font-size: 23px; }
.ed-order .step p { font-size: 18px; line-height: 1.5; max-width: 52ch; }
.ed-order .step p a { font-weight: 600; }
.ed-order-foot { margin-top: 26px; font-size: 16px; line-height: 1.55; max-width: 62ch; }
.ed-tag-note { font-size: 15px; color: var(--muted); margin-left: 8px; }

/* ---------- contact ---------- */
.ed-mail-addr { font-size: clamp(29px, 5.12vw, 78px); line-height: 1.06; overflow-wrap: anywhere; }
.ed-mail-note { margin-top: 24px; font-size: 18px; color: var(--muted); }

/* ---------- legal pages ---------- */
.ed-legal { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 72px; align-items: start; }
.ed-legal-nav ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.ed-legal-nav a { display: block; padding: 14px 0 13px; border-bottom: 1px solid var(--rule); font-size: 17px; font-weight: 600; text-decoration: none; }
.ed-legal-nav a:hover { color: var(--rust); }
.ed-legal-nav a[aria-current] { color: var(--rust); box-shadow: inset 4px 0 0 var(--rust); padding-left: 18px; }
.ed-draft { background: var(--stone); padding: 40px 44px 44px; }
.ed-draft h2 { margin-bottom: 20px; }

/* ---------- 404 ---------- */
.search.ed-search { grid-template-columns: minmax(0, 1fr) auto; max-width: 760px; margin-top: 36px; }
.ed-nf-msg { margin-top: 14px; font-size: 16px; }
.ed-nf-msg[hidden] { display: none; }
.ed-nf-msg a { font-weight: 600; }
.ed-plain { list-style: none; margin: 0; padding: 0; }
.ed-plain a { display: block; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 18px; font-weight: 600; text-decoration: none; }
.ed-plain a:hover { color: var(--rust); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .ed-match { grid-template-columns: 1fr; gap: 40px; }
  .ed-next { position: static; }
}
@media (max-width: 900px) {
  .ed-sec { padding: 72px 0 80px; }
  .ed-band { padding: 72px 0 80px; }
  .ed-grid { grid-template-columns: 1fr; gap: 26px; }
  .ed-side { position: static; }
  .ed-grid--next { margin-top: 72px; }
  .ed-grid--group + .ed-grid--group { margin-top: 72px; }
  .ed-group-n { font-size: 55px; margin-bottom: 14px; }
  .ed-two { grid-template-columns: 1fr; gap: 48px; margin-top: 72px; }
  .ed-gloss { grid-template-columns: 1fr; gap: 36px; }
  .ed-cmp thead td { width: 30%; }
  .ed-cmp thead th, .ed-cmp td { padding-left: 14px; padding-right: 14px; }
  .ed-cmp-price b { font-size: 29px; }
  .ed-cmp-price i { font-size: 20px; }
  .ed-legal { grid-template-columns: 1fr; gap: 40px; }
  .ed-legal .ed-draft { order: -1; }
  .ed-svc li { grid-template-columns: 1fr; gap: 10px; }
  .ed-svc .arrow-link { justify-self: start; }
  .ed-cta--flip figure { order: 0; }
  .ed-cta--flip .agents-panel { padding: 64px var(--gutter); }
}
@media (max-width: 600px) {
  .ed-sec { padding: 56px 0 64px; }
  .ed-band { padding: 56px 0 60px; }
  .ed-grid--next, .ed-grid--group + .ed-grid--group { margin-top: 56px; }
  .ed-group-n { font-size: 42px; }
  .ed-side-note { margin-top: 10px; font-size: 15px; }
  .ed-two { margin-top: 56px; gap: 40px; }
  .ed-two p { font-size: 16px; }
  .ed-status { padding: 18px 20px 20px; }
  .ed-status-k { font-size: 22px; }
  .ed-hero-btns { margin-top: 24px; }
  .ed-glist b { font-size: 26px; }
  .ed-glist span { font-size: 14px; }
  .ed-glist a { padding: 16px 0 18px; }
  .ed-cover li { grid-template-columns: 38px minmax(0, 1fr); gap: 0 12px; padding: 16px 0 18px; }
  .ed-cover--plain li { grid-template-columns: minmax(0, 1fr); }
  .ed-cover-n { font-size: 30px; }
  .ed-cover p { font-size: 26px; }
  .ed-cover small { font-size: 15px; }
  .ed-zlist { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .ed-zname { font-size: 25px; }
  .ed-cta--flip .agents-panel { padding: 56px var(--gutter); }
  .ed-words { font-size: 30px; }
  .ed-gloss-text p { font-size: 17px; }
  .ed-post { grid-template-columns: 1fr; }
  .ed-post-top { min-height: 0; padding: 16px 18px 14px; }
  .ed-post-zone { font-size: 25px; }
  .ed-post-body { padding: 20px 18px 22px; gap: 18px; }
  .ed-post-body h3 { font-size: 26px; }
  .ed-form .form-grid .field + .field { border-top: 0; }
  .ed-zones { padding: 14px 18px 12px; }
  .ed-zone-grid { grid-template-columns: 1fr; }
  .ed-next { margin: 0 calc(-1 * var(--gutter)); padding: 30px var(--gutter) 26px; }
  .ed-sec--form { padding-bottom: 0; }
  .ed-trust .trust-item h2 { font-size: 22px; margin-bottom: 6px; }
  .ed-thanks { padding: 28px 22px 32px; }
  .ed-thanks p:not(.ed-links) { font-size: 17px; }
  .ed-cmp { display: none; }
  .ed-cmp-m { display: grid; gap: 52px; }
  .ed-svc h2 { font-size: 26px; }
  .ed-order .step { grid-template-columns: 44px 1fr; padding: 20px 0 22px; }
  .ed-order .step-n { font-size: 35px; }
  .ed-order .step h3 { font-size: 19px; }
  .ed-order .step p { font-size: 16px; }
  .ed-mail-addr { font-size: 26px; overflow-wrap: break-word; }
  .ed-mail-note { font-size: 16px; }
  .ed-draft { margin: 0 calc(-1 * var(--gutter)); padding: 28px var(--gutter) 32px; }
  .ed-legal-nav a { font-size: 16px; }
  .search.ed-search { grid-template-columns: 1fr; margin-top: 26px; }
}

/* ───────────── written buying guides (articlePage) ───────────── */
.bg-glance ul { list-style: none; margin: 0; padding: 0; }
.bg-glance li { font-size: 16px; line-height: 1.45; padding: 9px 0 9px 22px; border-top: 1px solid var(--rule); position: relative; }
.bg-glance li:first-child { border-top: 0; padding-top: 0; }
.bg-glance li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 8px; height: 8px; background: var(--pine); }
.bg-glance li:first-child::before { top: 8px; }
.bg-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 72px; padding-top: 88px; padding-bottom: 24px; align-items: start; }
.bg-toc { position: sticky; top: 28px; font-size: 15px; }
.bg-toc-k { font-weight: 700; margin-bottom: 12px; }
.bg-toc ol { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); counter-reset: toc; }
.bg-toc li { counter-increment: toc; border-bottom: 1px solid var(--rule); }
.bg-toc a { display: grid; grid-template-columns: 26px 1fr; padding: 10px 0; text-decoration: none; line-height: 1.35; }
.bg-toc a::before { content: counter(toc); font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.bg-toc a:hover { color: var(--rust); }
.bg-toc-date { margin-top: 16px; font-size: 13px; color: var(--muted); }
.bg-article { min-width: 0; max-width: 760px; }
.bg-sec { scroll-margin-top: 24px; }
.bg-sec + .bg-sec { margin-top: 64px; }
.bg-article.prose h2 { margin-top: 0; font-size: 29px; }
.bg-article.prose h3 { margin: 0 0 6px; }
.bg-article.prose a { color: var(--rust); }
.bg-list { padding-left: 20px; }
.bg-note { background: var(--stone); border-left: 4px solid var(--pine); padding: 18px 22px 20px; margin: 26px 0; }
.bg-note-k { font: 700 13px/1 var(--sans) !important; letter-spacing: .02em; color: var(--pine); margin-bottom: 8px !important; }
.bg-note p:not(.bg-note-k) { font-size: 17px !important; margin: 0; }
.bg-steps { list-style: none; padding: 0 !important; margin: 24px 0 !important; border-top: 2px solid var(--ink); }
.bg-steps li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 20px 0 22px; border-bottom: 1px solid var(--rule); margin: 0 !important; }
.bg-step-n { font-size: 37px; line-height: 1.06; color: var(--rust); }
.bg-steps h3 { font: 700 19px/1.3 var(--sans) !important; }
.bg-steps p { font-size: 17px !important; margin: 0 !important; }
.bg-terms { margin: 22px 0; border-top: 2px solid var(--ink); }
.bg-terms div { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 24px; }
.bg-terms dt { font-size: 26px; line-height: 1; }
.bg-terms dd { margin: 0; font-size: 17px; line-height: 1.55; }
.bg-table-wrap { overflow-x: auto; margin: 26px 0; }
.bg-table { width: 100%; border-collapse: collapse; font-size: 16px; background: #fff; }
.bg-table caption { text-align: left; font-weight: 700; font-size: 15px; padding-bottom: 10px; caption-side: top; }
.bg-table th, .bg-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.bg-table thead th { background: var(--pine); color: var(--lime); font-weight: 600; font-size: 14px; }
.bg-table tbody th { font-weight: 600; }
.bg-sources ol { padding-left: 22px; }
.bg-sources li { font-size: 15px !important; line-height: 1.5 !important; }
.bg-sources li span { color: var(--muted); margin-left: 6px; }
.bg-sources li span::before { content: "· "; }
.bg-small { font-size: 15px !important; color: var(--muted); }
.bg-disclaimer { margin-top: 28px !important; padding: 18px 22px; border: 1px solid var(--rule-strong); font-size: 15px !important; line-height: 1.55 !important; max-width: none !important; }
.bg-next { padding-top: 72px; }
@media (max-width: 1100px) {
  .bg-layout { grid-template-columns: 1fr; gap: 40px; padding-top: 56px; }
  .bg-toc { position: static; }
}
@media (max-width: 600px) {
  .bg-article.prose h2 { font-size: 26px; }
  .bg-steps li { grid-template-columns: 44px 1fr; }
  .bg-step-n { font-size: 30px; }
  .bg-terms div { grid-template-columns: 1fr; gap: 6px; }
  .bg-terms dt { font-size: 26px; }
  .bg-table { font-size: 14px; }
  .bg-table th, .bg-table td { padding: 10px; }
}
.bg-article .bg-steps li, .bg-article .bg-terms div, .bg-article .bg-table-wrap, .bg-article .bg-note { max-width: none; }
.bg-article .bg-steps li p, .bg-article .bg-terms dd { max-width: 60ch; }

/* blog */
.ed-post-sum { margin: 8px 0 0; color: var(--muted); }
.ed-post-meta time { color: var(--muted); }
.ed-post h3 a { text-decoration: none; color: inherit; }
.ed-post h3 a:hover { text-decoration: underline; }
a.ed-post-top { display: block; text-decoration: none; }
.bg-update { border-color: var(--rust); }
.bg-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border-top: 1px solid var(--rule); padding-top: 24px; }
.bg-pn a { text-decoration: none; color: inherit; font-weight: 600; }
.bg-pn a:last-child:not(:first-child) { text-align: right; }
.bg-pn small { display: block; font-weight: 500; color: var(--muted); margin-bottom: 4px; }
@media (max-width: 600px) { .bg-pn { grid-template-columns: 1fr; } .bg-pn a:last-child:not(:first-child) { text-align: left; } }
.ed-posts--month { margin-bottom: 64px; }

/* market data */
.mk-figs { list-style: none; margin: 0 0 56px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.mk-fig { background: #fff; border: 1px solid var(--rule); padding: 22px 22px 20px; }
.mk-area { margin: 0 0 8px; font-weight: 600; font-size: 15px; }
.mk-val { margin: 0; font-family: var(--display); font-weight: 600; font-size: 34px; line-height: 1.1; letter-spacing: -.02em; }
.mk-chg { margin: 4px 0 0; font-weight: 600; color: var(--pine); }
.mk-label { margin: 10px 0 0; }
.mk-src, .mk-note { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.mk-disc { margin-top: 8px; }

/* services directory */
.svc-guide { margin: -8px 0 18px; }
.svc-list { list-style: none; margin: 0 0 56px; padding: 0; display: grid; gap: 14px; }
.svc-row { background: #fff; border: 1px solid var(--rule); padding: 22px 24px; }
.svc-name { margin: 0; font-family: var(--display); font-weight: 600; font-size: 22px; }
.svc-sum { margin: 6px 0 12px; color: var(--muted); }
.svc-facts { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 0; }
.svc-facts dt { font-size: 12px; font-weight: 700; color: var(--muted); }
.svc-facts dd { margin: 2px 0 0; }
.mk-unit { margin: 2px 0 0; font-weight: 600; color: var(--muted); }