:root{
  /* Calm Authority palette — editorial serif over warm paper, green + gold */
  --ink:#1c1c1a;--ink-2:#3a3c3e;--ink-3:#4b4d4a;--muted:#6e7370;--bg:#f7f5f0;--card:#fff;
  --brand:#2b6a63;--brand-dark:#1f4f49;--brand-tint:#eef4f2;--footer:#14342f;
  --accent:#c98a2e;--accent-dark:#b57c26;
  --line:rgba(28,28,26,.08);--line-2:rgba(28,28,26,.16);
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Public Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* 8px spacing scale (8/16/24/32/48/72/88) */
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:72px;--s7:88px;
  --radius:18px;--radius-sm:12px;--maxw:1140px;--maxw-dash:1480px;
  --section-y:var(--s5);--card-gap:var(--s3);--card-pad:var(--s2);
  /* Site header height. Sticky followers use this so a line of text is not
     tucked under the bar. --sticky-gap is the breathing room under that bar. */
  --header-h:64px;--sticky-gap:8px;
  --shadow:0 1px 2px rgba(28,28,26,.04);
  --shadow-lg:0 12px 32px rgba(31,49,45,.12);
  --shadow-xl:0 20px 50px rgba(31,49,45,.1);
  --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light;
scroll-padding-top:calc(var(--header-h) + var(--sticky-gap))}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);
line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--brand-dark);text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3{letter-spacing:-.01em;line-height:1.14;font-weight:600}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s3)}

/* ── header ── */
header.top{background:rgba(247,245,240,.92);backdrop-filter:saturate(180%) blur(12px);
border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;
height:var(--header-h);min-height:var(--header-h)}
.logo{font-family:var(--serif);font-weight:600;font-size:22px;color:var(--brand-dark);letter-spacing:-.01em}
.logo span{color:var(--accent)}
.tagline{font-size:13px;color:var(--muted)}

/* ── homepage hero (2-col: message + proof card) ── */
.hero{background:var(--bg);padding:var(--section-y) 0 var(--s4)}
.hero .wrap{max-width:var(--maxw)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:var(--s4);align-items:center}
.free{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);
border-radius:999px;padding:6px 14px;font-size:13px;color:var(--brand-dark);
font-weight:500;margin-bottom:var(--s3);box-shadow:var(--shadow)}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5vw,52px);
line-height:1.1;letter-spacing:-.015em;margin:0 0 18px;color:var(--ink)}
.hero .lede{font-size:clamp(16px,2vw,18px);line-height:1.65;color:var(--ink-3);
margin:0 0 var(--s4);max-width:44ch}
.hero .microcopy{font-size:13px;color:var(--muted);margin:12px 0 0}
/* Wide enough for "Postcode, address, or funeral director" beside Near me
   and Compare. The field will not shrink below that wording; if the column
   is narrower, the buttons wrap under the input instead of cutting it off. */
.hero .search{max-width:40rem;margin:0;flex-wrap:wrap}
.hero .search .field{flex:1 1 23rem;min-width:min(100%,23rem)}
.hero .search .btn,.hero .search .btn-near{flex:0 0 auto}
.hero .search input{border-radius:14px}
.hero .search .btn,.hero .search .btn-near{border-radius:14px}

/* intent triage row (hairline-topped) */
.triage{display:flex;flex-wrap:wrap;gap:26px;margin-top:var(--s4);padding-top:26px;
border-top:1px solid var(--line)}
.triage a{font-size:14.5px;font-weight:600;color:var(--brand-dark);display:inline-flex;
align-items:center;gap:7px}
.triage a .arw{color:var(--accent)}

/* proof card — "the same funeral, one mile apart" (anonymised) */
.proof{background:#fff;border:1px solid var(--line);border-radius:20px;
box-shadow:var(--shadow-xl);overflow:hidden}
.proof-h{padding:16px 24px;border-bottom:1px solid var(--line);font-weight:600;font-size:14px}
.proof-tbl{width:100%;border-collapse:collapse;font-size:13px}
.proof-tbl th,.proof-tbl td{padding:10px 8px}
.proof-tbl th:first-child,.proof-tbl td:first-child{padding-left:24px;text-align:left;
color:var(--ink-3);font-weight:400}
.proof-tbl th:last-child,.proof-tbl td:last-child{padding-right:24px}
.proof-tbl th:not(:first-child),.proof-tbl td:not(:first-child){text-align:right;font-weight:600}
.proof-tbl thead th{font-size:12px;font-weight:700}
.proof-tbl thead th:nth-child(2){color:var(--brand-dark)}
.proof-tbl thead th:nth-child(3){color:var(--muted)}
.proof-tbl tbody tr{border-top:1px solid rgba(28,28,26,.06)}
.proof-tbl tr.tot td{border-top:2px solid var(--line-2);font-weight:700}
.proof-tbl tr.tot td:nth-child(2){color:var(--brand-dark)}
.proof-foot{padding:13px 24px;background:var(--brand-tint);color:var(--brand-dark);
font-size:13px;display:flex;justify-content:space-between;gap:var(--s2)}
.proof-cap{text-align:center;font-size:12px;color:var(--muted);margin:12px 0 0}

/* slim trust band (white, serif-green numerals) */
.trustband{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.trustband .wrap{display:flex;justify-content:center;gap:var(--s6);text-align:center;
flex-wrap:wrap;padding:var(--s3)}
.trustband .num{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--brand-dark)}
.trustband .lbl{font-size:13.5px;color:var(--muted);margin-left:8px}

/* reassurance split (CMA facsimile + bullets) */
.reassure{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:center;
padding:var(--s7) var(--s3)}
.reassure h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,4vw,36px);
line-height:1.18;margin:0 0 18px}
.reassure p.body{font-size:16px;line-height:1.7;color:var(--ink-3);margin:0 0 26px}
.reassure-pts{display:flex;flex-direction:column;gap:14px}
.reassure-pt{display:flex;gap:12px;align-items:flex-start}
.reassure-pt .tick{color:var(--brand-dark);font-weight:700;margin-top:1px}
.reassure-pt p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-3)}
.reassure-pt b{color:var(--ink)}
.spl-wrap{position:relative;padding:20px 10px}
.spl-doc{background:#fff;border:1px solid var(--line-2);border-radius:6px;box-shadow:var(--shadow-xl);
padding:26px 30px;transform:rotate(-1deg);max-width:400px;margin:0 auto}
.spl-doc .k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.spl-doc .nm{font-weight:700;font-size:15px;margin-bottom:2px}
.spl-doc .sub{font-size:11px;color:var(--muted);margin-bottom:16px}
.spl-doc .r{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.spl-doc .r:last-child{border-bottom:0}
.spl-doc .r span{color:var(--ink-3)}
.spl-stamp{position:absolute;top:6px;right:16px;background:var(--brand-dark);color:#fff;font-size:11.5px;
font-weight:700;letter-spacing:.04em;padding:9px 14px;border-radius:999px;
box-shadow:0 8px 20px rgba(31,79,73,.35);transform:rotate(3deg)}

/* price-gap band (solid green) */
.pricegap{background:var(--brand-dark);color:#fff}
.pricegap .inner{max-width:760px;margin:0 auto;padding:76px var(--s3);text-align:center}
.pricegap h2{font-family:var(--serif);font-weight:500;font-size:clamp(26px,4vw,34px);
letter-spacing:-.01em;margin:0 0 14px;color:#fff}
.pricegap p{font-size:15.5px;line-height:1.65;color:#c3ddd4;margin:0 auto 32px;max-width:52ch}
.cta-gold{display:inline-block;background:var(--accent);color:#fff;border-radius:999px;
padding:15px 32px;font-weight:600;font-size:15.5px;transition:background .2s var(--ease)}
.cta-gold:hover{background:var(--accent-dark);color:#fff}
/* reusable filled-green pill CTA (FAQ, home) */
.cta-pill{display:inline-block;background:var(--brand-dark);color:#fff;border-radius:999px;
padding:15px 32px;font-weight:600;font-size:15.5px;transition:background .2s var(--ease)}
.cta-pill:hover{background:var(--brand);color:#fff}

@media(max-width:860px){
  .hero{padding:var(--s5) 0 var(--s4)}
  .hero-grid,.reassure{grid-template-columns:1fr;gap:var(--s4)}
  .trustband .wrap{gap:var(--s3)}
  .triage{gap:16px}
  .pricegap .inner{padding:var(--s6) var(--s3)}
}
.search{display:flex;gap:var(--s1);max-width:540px;margin:0 auto;position:relative}
.search .field{flex:1;position:relative}
.search input{width:100%;border:1px solid var(--line-2);border-radius:999px;
padding:16px 20px 16px 48px;font-size:16px;background:#fff;color:var(--ink);
-webkit-appearance:none;appearance:none;box-shadow:var(--shadow);
transition:box-shadow .2s var(--ease),border-color .2s var(--ease)}
.search input::placeholder{color:var(--muted);opacity:1}
.search input:focus{outline:none;border-color:var(--brand-dark);
box-shadow:0 0 0 4px rgba(31,79,73,.12)}
.search .pin{position:absolute;left:16px;top:50%;transform:translateY(-50%);
display:flex;align-items:center;color:var(--muted);pointer-events:none}
.search .btn{background:var(--brand-dark);color:#fff;border:0;border-radius:999px;
padding:0 26px;font-weight:600;font-size:15px;cursor:pointer;transition:background .2s var(--ease)}
.search .btn:hover{background:var(--brand)}
.btn-near{display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--brand-dark);
border:1px solid var(--line-2);border-radius:999px;padding:0 16px;font-weight:600;font-size:14px;
cursor:pointer;white-space:nowrap;transition:all .15s var(--ease)}
.btn-near:hover{border-color:var(--brand);background:var(--brand-tint)}
.btn-near svg{flex:0 0 auto}
.btn-near.loading{opacity:.55;pointer-events:none}
.btn-near.loading svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* The list is a child of .search, so it spans the field and the buttons.
   On a phone the field is already the full row, so the list stays inside the page. */
.ac{position:absolute;top:60px;left:0;right:0;background:#fff;border-radius:var(--radius-sm);
box-shadow:var(--shadow-lg);overflow:hidden;z-index:20;display:none;text-align:left}
.ac.show{display:block}
.ac .row{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;
color:var(--ink);font-size:14px;border-bottom:1px solid var(--line)}
.ac .row:last-child{border-bottom:0}
.ac .row:hover,.ac .row.sel{background:var(--brand-tint)}
.ac a.row{text-decoration:none;color:inherit}
.ac .row .ico{opacity:.45}
.ac .row .lbl{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac .row .ct{flex:0 0 auto;margin-left:auto;color:var(--muted);font-size:12px;min-width:0;
max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.poweredby{font-size:12px;color:var(--muted);margin-top:var(--s2)}
.poweredby b{color:var(--ink-2);font-weight:600}
.stats{display:flex;gap:var(--s5);justify-content:center;margin-top:var(--s5);flex-wrap:wrap}
.stats div{font-size:14px;color:var(--muted)}
.stats b{display:block;font-size:28px;color:var(--ink);font-weight:700;letter-spacing:-.02em}

/* ── steps (quiet secondary band) ── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin:var(--s6) 0 var(--s5)}
.step{padding:var(--s2) 4px}
.step .n{width:32px;height:32px;border-radius:50%;background:var(--brand-tint);
color:var(--brand-dark);display:flex;align-items:center;justify-content:center;
font-weight:700;margin-bottom:var(--s1);font-size:15px}
.step h3{margin:0 0 4px;font-size:17px}.step p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}

/* ── sort bar ── */
.bar{display:flex;align-items:center;justify-content:space-between;margin:var(--s3) 0 var(--s3);
flex-wrap:wrap;gap:var(--s2)}.bar h2{font-size:22px;margin:0}
.sort{display:flex;gap:6px;flex-wrap:wrap}
.sort button{background:#fff;border:1px solid var(--line-2);border-radius:999px;
padding:9px 17px;font-size:13px;cursor:pointer;color:var(--ink-2);font-weight:500;
transition:all .15s var(--ease)}
.sort button:hover{border-color:var(--brand-dark);color:var(--brand-dark)}
.sort button.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600}
.sponsored-flag{position:relative;display:inline-flex;vertical-align:middle;
  color:#fff;background:#E36B2C;border-radius:999px;line-height:1.2}
.sponsored-hit{appearance:none;-webkit-appearance:none;position:relative;display:inline-flex;
  align-items:center;gap:4px;margin:0;border:0;background:transparent;color:#fff;
  font:inherit;font-size:12px;font-weight:700;letter-spacing:.01em;line-height:1.2;
  padding:4px 8px;border-radius:999px;cursor:pointer}
.sponsored-star{font-size:11px;line-height:1}
.sponsored-word{font-size:12px}
.sponsored-tip{display:none;position:absolute;z-index:6;top:calc(100% + 6px);left:0;
  width:max-content;max-width:240px;padding:10px 12px;border-radius:10px;
  background:#1c1c1a;color:#fff;font-size:13px;font-weight:500;line-height:1.45;
  text-align:left;white-space:normal;box-shadow:var(--shadow-lg)}
.sponsored-tip strong{display:block;margin:0 0 4px;font-size:13px;font-weight:700;color:#fff}
.sponsored-flag.open .sponsored-tip{display:block}
@media(min-width:1025px){
  .sponsored-flag:hover .sponsored-tip,
  .sponsored-flag:focus-within .sponsored-tip{display:block}
}
/* On the photo, beside the heart, so Independent stays ownership. */
.card>.sponsored-flag{position:absolute;top:16px;left:16px;z-index:3;margin:0}
.sponsored-flag-inline{position:static;margin-left:8px;vertical-align:middle}
@media(max-width:1024px){
  .card>.sponsored-flag .sponsored-hit::before{content:"";position:absolute;
    left:-8px;right:-8px;top:-12px;bottom:-12px}
}
.sponsored-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--card-gap);margin:0 0 var(--s3)}
.sponsored-strip.is-hidden{display:none}
.sponsored-strip .card[data-sponsored="1"]{border-color:#e8cc90;box-shadow:0 0 0 1px #e8cc90,var(--shadow)}
.card[data-sponsored="1"]{border-color:#e8cc90;box-shadow:0 0 0 1px #e8cc90,var(--shadow)}
@media(max-width:860px){.sponsored-strip{grid-template-columns:1fr}}
/* Area results: up to 3 real Sponsored cards. No filler cards, no empty slots.
   The caption sits on its own row. Phone stacks to one column. */
.sponsored-caption{grid-column:1 / -1;margin:0;font-size:12px;font-weight:600;color:var(--muted)}
.listpane .area-sponsored-strip{min-width:0;margin:0 0 var(--card-gap)}
.listpane .area-sponsored-strip>.card{min-width:0}
.listpane .area-sponsored-strip[data-n="1"]{grid-template-columns:minmax(0,1fr)}
.listpane .area-sponsored-strip[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.listpane .area-sponsored-strip[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:860px){
  .listpane .area-sponsored-strip,
  .listpane .area-sponsored-strip[data-n="1"],
  .listpane .area-sponsored-strip[data-n="2"],
  .listpane .area-sponsored-strip[data-n="3"]{grid-template-columns:minmax(0,1fr)}
}
.map-legend .legend-star{color:#E36B2C;font-weight:700}
.owner-confirmed{font-size:13px;color:var(--muted);margin:8px 0 0}
.own-filter{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden}
.own-filter button{background:#fff;border:0;padding:9px 15px;font-size:13px;cursor:pointer;
color:var(--ink-2);font-weight:500;transition:all .15s var(--ease)}
.own-filter button+button{border-left:1px solid var(--line-2)}
.own-filter button:hover{color:var(--brand-dark)}
.own-filter button.on{background:var(--brand-dark);color:#fff;font-weight:600}

/* ── cards (imagery-forward, Calm Authority) ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
gap:var(--card-gap);padding-bottom:var(--s3)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);
transition:box-shadow .2s var(--ease),transform .2s var(--ease),border-color .15s var(--ease)}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.card-hi,.card-hi:hover{border-color:var(--brand-dark);
box-shadow:0 0 0 2px var(--brand-dark),var(--shadow-lg);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.card-hi{transform:none}}
.card-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--brand-tint);
margin:8px 8px 0;border-radius:12px}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-img .attr,.hero-img .attr{position:absolute;right:6px;bottom:5px;font-size:10px;
color:#fff;background:rgba(0,0,0,.4);padding:1px 6px;border-radius:4px;letter-spacing:.01em}
.ph{display:flex;align-items:center;justify-content:center;
background:linear-gradient(140deg,var(--g1),var(--g2))}
.ph-i{font-family:var(--serif);font-size:44px;font-weight:600;color:rgba(255,255,255,.92);letter-spacing:-.02em}
.card-body{padding:var(--card-pad) 18px 18px;display:flex;flex-direction:column;flex:1}
.card-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card-head .own{margin-left:0}
.card h3{margin:0;font-size:16.5px;font-weight:600;letter-spacing:-.01em}
.card .loc{color:var(--muted);font-size:13px;margin:3px 0 8px}
.dist{display:none;margin-left:8px;background:var(--brand-dark);color:#fff;border-radius:999px;
padding:2px 9px;font-size:11px;font-weight:600}.dist.on{display:inline-block}
.own{display:inline-block;margin-left:8px;border-radius:999px;padding:3px 9px;font-size:10.5px;
font-weight:700;text-transform:uppercase;letter-spacing:.04em;vertical-align:middle}
.own-ind{background:var(--brand-tint);color:var(--brand-dark)}
.own-chain{background:#f0f1f3;color:#5a6470;border:1px solid var(--line)}
.rating{display:flex;align-items:center;gap:7px;font-size:13.5px;margin-bottom:14px}
.stars{color:var(--accent);letter-spacing:1px}
.rating b{font-weight:700}.rating .c{color:var(--muted);font-size:13px}
.rating .none{color:var(--muted);font-size:13px}
.prices{display:flex;flex-direction:column;margin-top:auto;
padding-top:13px;border-top:1px solid var(--line)}
.price{flex:1}.price .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;
color:var(--muted);margin-bottom:2px}
.price .v{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.price .na{font-size:13px;color:var(--muted);line-height:1.35}
.price-total{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.3}
/* all-in hero: label + serif price + demoted (honest) breakdown sub-line */
.price-hero .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;
color:var(--muted);margin-bottom:2px;font-weight:600}
.price-hero .hero-v{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--ink);
letter-spacing:-.01em;line-height:1.1}
.price-hero .hero-sub{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.3}
.price-hero .na{font-size:14px;color:var(--muted);line-height:1.45;padding:6px 0}
.price-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);
margin-top:8px;padding-top:8px;border-top:1px dashed rgba(28,28,26,.1)}
.price-row .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;
color:var(--muted);margin:0;font-weight:600}
.price-row .v{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap}
.price-row .na{font-size:12px;color:var(--muted);text-align:right}
.fp-total{font-size:12px;color:var(--muted);margin-top:2px}
.ptable tr.sub td{color:var(--muted);font-size:14px;border-bottom:0;padding-top:4px;padding-bottom:4px}
.ptable tr.total td{border-top:2px solid var(--line)}
.ptable .hint{color:var(--muted);font-weight:400;font-size:12px}
.cta{margin-top:14px}
.cta a{display:block;text-align:center;background:var(--brand-dark);color:#fff;border-radius:999px;
padding:11px;font-weight:600;font-size:14px;transition:background .2s var(--ease)}
.cta a:hover{background:var(--brand)}

/* ── footer ── */
footer{margin-top:var(--s6);background:var(--footer)}
footer .fwrap{max-width:var(--maxw);margin:0 auto;padding:var(--section-y) var(--s3) var(--s4)}
footer .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s4)}
footer .flogo{font-family:var(--serif);font-weight:600;font-size:23px;letter-spacing:-.01em;color:#fff}
footer .flogo span{color:var(--accent)}
footer .ftag{margin:var(--s2) 0 0;max-width:34ch;line-height:1.6;color:#c3ddd4;font-size:14px}
footer .fbadges{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--s3)}
footer .fbadge{font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;
background:rgba(255,255,255,.09);color:#dcece7}
footer h4{margin:0 0 var(--s2);font-size:12px;letter-spacing:.07em;text-transform:uppercase;
color:rgba(255,255,255,.5);font-weight:700}
footer .fcol a{display:block;color:#dcece7;font-size:14px;text-decoration:none;padding:5px 0;
transition:color .15s var(--ease)}
footer .fcol a:hover{color:var(--accent)}
footer .fstat b{color:#fff;font-size:26px;font-weight:700;display:block;letter-spacing:-.02em}
footer .fstat span{font-size:13px;color:#a9c9c0}
footer .flegal{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.14);
font-size:12px;line-height:1.65;color:#a9c9c0;max-width:78ch}
footer .fbottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:var(--s3);
font-size:12px;color:rgba(255,255,255,.4)}
footer .fbottom a{color:rgba(255,255,255,.55);text-decoration:none}
footer .fbottom a:hover{color:var(--accent)}
@media (max-width:720px){
  footer .fgrid{grid-template-columns:1fr 1fr;row-gap:var(--s4)}
  footer .fbrand,footer .fstat{grid-column:1/-1}
  footer .fstat{order:-1}
}

/* cookie consent banner — equal-weight Accept / Reject, above the map toggle */
.ff-consent{position:fixed;z-index:90;left:0;right:0;bottom:0;background:#fff;
border-top:1px solid var(--line-2);box-shadow:0 -8px 28px rgba(31,49,45,.12);
padding:16px var(--s3)}
.ff-consent-inner{max-width:var(--maxw);margin:0 auto;display:flex;gap:var(--s3);
align-items:center;flex-wrap:wrap}
.ff-consent p{margin:0;flex:1;min-width:220px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.ff-consent p a{text-decoration:underline}
.ff-consent-actions{display:flex;gap:10px;flex-wrap:wrap}
.ff-consent-btn{appearance:none;-webkit-appearance:none;cursor:pointer;font-family:inherit;
border:1px solid var(--brand-dark);background:var(--brand-dark);color:#fff;
border-radius:999px;padding:11px 18px;font-weight:600;font-size:14px;line-height:1.2}
.ff-consent-btn:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.ff-consent-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media(max-width:720px){
  .ff-consent-inner{flex-direction:column;align-items:stretch}
  .ff-consent-actions{display:grid;grid-template-columns:1fr 1fr}
  .ff-consent-btn{width:100%;text-align:center}
}

/* ── profile ── */
.back{display:inline-block;margin:var(--s3) 0 0;font-size:14px;color:var(--muted)}
.back:hover{color:var(--brand-dark)}
.pf{background:var(--card);border:1px solid var(--line);border-radius:20px;
overflow:hidden;margin-top:var(--s2);box-shadow:var(--shadow)}
.hero-img{position:relative;aspect-ratio:21/8;background:var(--brand-tint)}
.hero-img img{width:100%;height:100%;object-fit:cover}
.hero-img.ph{display:flex;align-items:center;justify-content:center}
.hero-img.ph .ph-i{font-size:72px}
.pf-body{padding:32px 36px 36px}
.pf h1{font-family:var(--serif);margin:0;font-size:clamp(26px,4vw,34px);font-weight:600;letter-spacing:-.01em}
.pf .loc{color:var(--muted);font-size:15px;margin-top:6px}
.pf-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-top:var(--s4)}
.ptable{width:100%;border-collapse:collapse;margin:var(--s1) 0 0}
.ptable td{padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink-3)}
.ptable tr:last-child td{border-bottom:0}
.ptable td:last-child{text-align:right;font-weight:700;color:var(--ink);letter-spacing:-.01em;padding-left:24px;white-space:nowrap}
.ptable tr.grp td{padding-top:18px;font-size:12px;font-weight:700;text-transform:uppercase;
letter-spacing:.05em;color:var(--muted);border-bottom:1px solid var(--line);text-align:left}
.leads{display:flex;flex-direction:column;gap:12px;margin-top:var(--s1)}
.lead-price{border:1px solid var(--line);border-radius:14px;padding:16px 20px;
background:var(--brand-tint)}
.lead-price.alt{background:#fff}
.lead-price .lp-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;
color:var(--muted);font-weight:600}
.lead-price .lp-v{font-family:var(--serif);font-size:32px;font-weight:600;letter-spacing:-.01em;
color:var(--ink);margin:2px 0}
.lead-price.alt .lp-v{font-size:26px}
.lead-price .lp-v .lp-plus{font-family:var(--sans);font-size:15px;color:var(--muted);font-weight:500}
.lead-price .lp-sub{font-size:13px;color:var(--muted)}
.price-fresh{margin-top:14px;font-size:13px;line-height:1.55;color:var(--ink-3);
border-left:3px solid var(--brand-dark);background:var(--brand-tint);
padding:10px 14px;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.price-fresh strong{color:var(--brand-dark);font-weight:700}
.price-detail{margin-top:14px;border:1px solid var(--line);border-radius:var(--radius-sm)}
.price-detail summary{cursor:pointer;padding:12px 16px;font-size:14px;font-weight:600;color:var(--ink-2)}
.price-detail summary:hover{color:var(--brand-dark)}
.price-detail[open] summary{border-bottom:1px solid var(--line)}
.price-detail .ptable{padding:0 16px 8px}
.rev{background:var(--bg);border:1px solid rgba(28,28,26,.07);border-radius:14px;
padding:18px 20px;margin:var(--s1) 0;font-size:14px;line-height:1.65;color:var(--ink-3)}
.rev .s{color:var(--accent)}
.rev-summary{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink);margin:0 0 2px}
.rev-sub{font-size:13px;color:var(--muted);margin:0 0 var(--s2)}
/* Off-site links (Website/Map) are deliberately quiet — the eye should land on
   the filled Call / Enquire pills above. Soft demotion: muted outline chips. */
.contact{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s2)}
.contact a{display:inline-flex;align-items:center;gap:5px;background:transparent;
color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 13px;
font-size:13px;font-weight:500;transition:color .15s var(--ease),border-color .15s var(--ease)}
.contact a:hover{color:var(--brand-dark);border-color:var(--brand)}
.section-t{font-family:var(--serif);font-size:20px;font-weight:600;margin:0 0 var(--s1);color:var(--ink)}

/* ── motion (respect reduced-motion) ── */
@media (prefers-reduced-motion:no-preference){
  .grid .card{animation:rise .5s var(--ease) both}
  .grid .card:nth-child(1){animation-delay:.02s}.grid .card:nth-child(2){animation-delay:.06s}
  .grid .card:nth-child(3){animation-delay:.10s}.grid .card:nth-child(4){animation-delay:.14s}
  .grid .card:nth-child(5){animation-delay:.18s}.grid .card:nth-child(6){animation-delay:.22s}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}

/* ── header nav ── */
.topnav{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:500}
.topnav a{color:var(--ink-2)}
.topnav a:hover{color:var(--brand-dark)}
.topnav a.nav-cta{background:var(--brand-dark);color:#fff;padding:9px 18px;border-radius:999px;
font-weight:600;transition:background .2s var(--ease)}
.topnav a.nav-cta:hover{background:var(--brand);color:#fff}
.fd-session-links{display:none}
.fd-session-links.on{display:contents}
.shortlist-link{display:inline-flex;align-items:center;gap:4px}
.shortlist-badge{color:var(--brand-dark);font-weight:700}
.navtoggle{display:none}   /* hamburger: shown only on mobile (see @media) */

/* ── controls: sort + radius ── */
.controls{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.radius{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.radius select{border:1px solid var(--line-2);border-radius:999px;padding:7px 12px;
font-size:13px;background:#fff;color:var(--ink);cursor:pointer;-webkit-appearance:none;
appearance:none}

/* ── area results page = fixed-viewport app (Toddle/Airbnb) ──────────── */
/* Default (no JS / no key): a normal scrolling document. The fixed app layout
   is gated entirely on body.area-app, added by JS in enterSplit(). */
.splitview{display:block}
.mappane{display:none;position:relative}
.gm-mini{font-size:13px;line-height:1.5;min-width:160px}
.gm-mini b{font-size:14px;color:var(--ink)}.gm-mini a{color:var(--brand-dark);font-weight:600}
/* AdvancedMarkerElement custom pin */
.pin{width:16px;height:16px;border-radius:50%;background:var(--brand);
border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);transition:transform .12s var(--ease)}
.pin-hi{background:var(--accent);transform:scale(1.5)}
.map-legend{position:absolute;bottom:18px;left:18px;z-index:2;background:#fff;border-radius:12px;
padding:10px 14px;font-size:12px;color:var(--ink-3);box-shadow:0 4px 14px rgba(28,28,26,.12);max-width:60%}

/* slim app header (search + sort + radius), replaces the old hero/bar */
.appbar{background:var(--card);border-bottom:1px solid var(--line);padding:14px var(--s3);
display:flex;flex-direction:column;gap:10px}
.appbar-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.appbar-title{font-family:var(--serif);font-size:20px;font-weight:600;margin:0;
white-space:normal;letter-spacing:-.01em;min-width:0}
/* Wide enough for "Address, postcode, town, or funeral director" beside
   Near me and Search. If that will not fit next to the title, the bar wraps
   onto its own line. */
.appbar-search{max-width:38rem;flex:1 1 38rem;min-width:min(100%,38rem);margin:0;box-shadow:none}
.appbar-search .field{flex:1 1 22.5rem;min-width:min(100%,22.5rem)}
.appbar-search .btn,.appbar-search .btn-near{flex:0 0 auto}
.appbar-search input{padding:10px 16px 10px 40px;font-size:14.5px;box-shadow:none;background:var(--bg)}
.appbar-search input:focus{background:#fff}
.appbar-controls{justify-content:space-between}
.appbar #count{font-size:13.5px;color:var(--muted);font-weight:600}

/* visually-hidden SEO block (town links stay crawlable, off the app frame) */
.seo-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Scrape canary: same clip, not page content. aria-hidden on the span. */
.ff-canary{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* citable area lede — collapsible card (teaser on mobile, full prose on desktop);
   the full text stays in the DOM so it's crawlable even when collapsed.
   It sits between two grids: the fold above, the denser list below. */
/* The scrolling list is not the query container. Chrome's query width on
   .listpane counts the scrollbar (about 693px) while the cards sit in the
   content box (about 678px). A browser that stops the layout loop on the
   smaller figure keeps two columns, because 678 is only just over a 660px
   cut taken on the wrong box. listpane-in is that content box: no scrollbar,
   no padding. 660px there is the width around the cards. */
.listpane-in{container-type:inline-size;container-name:listpane;min-width:0}
.grid-lede{margin:0 0 var(--card-gap)}
.grid-lede .area-about{margin:0}
/* Fold above the area note fills the list pane. Four equal columns when the
   pane is wide enough. Two by two when four would be cramped, so the row does
   not leave an empty cream track before the map. One column on a phone. The
   cards under the note stay on .grid (auto-fill, unchanged). width:100% so the
   row uses the whole pane even when a later .grid rule sets auto-fill.
   .listpane .grid.grid-fold beats body.area-app.no-map .grid. Without the
   extra class, that auto-fill rule wins and a wide list stays two or three
   columns. */
.grid.grid-fold{padding-bottom:0;margin:0 0 var(--card-gap);align-items:stretch;width:100%}
.grid.grid-fold>.card{min-width:0}
.listpane .grid.grid-fold[data-n="0"]{display:none;margin:0}
.listpane .grid.grid-fold[data-n="1"]{grid-template-columns:minmax(0,1fr)}
.listpane .grid.grid-fold[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.listpane .grid.grid-fold[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.listpane .grid.grid-fold[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.area-about{margin:var(--s2) 0 var(--s2);border:1px solid rgba(28,28,26,.09);border-radius:16px;
  background:var(--card);overflow:hidden}
.area-about>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:var(--s2);padding:14px var(--s2);
  font-size:15px;font-weight:600;color:var(--ink)}
.area-about>summary::-webkit-details-marker{display:none}
.area-about .about-lead{line-height:1.4}
.area-about .about-more{flex:0 0 auto;font-size:13px;font-weight:600;color:var(--brand-dark);
  background:var(--brand-tint);border-radius:999px;padding:4px 12px}
.area-about[open] .about-more{color:var(--muted);background:transparent}
.area-about[open]>summary{border-bottom:1px solid var(--line)}
.area-about-body{padding:14px var(--s2)}
.area-about .area-intro{margin:0;font-size:14px;line-height:1.6;color:var(--ink-3)}
.area-about .area-intro strong{color:var(--ink);font-weight:600}
.area-about .area-note{margin-top:8px;font-size:13px}

/* profile About + nearby: three type roles, 32px stack (24px on a phone) */
.pf-band{display:flex;flex-direction:column;gap:32px;margin-top:32px}
.pf-about{margin:0}
.pf-about h2.section-t,.pf-nearby h2.section-t{font-family:var(--serif);font-size:22px;
  font-weight:600;margin:0 0 12px;color:var(--ink)}
.pf-about .about-copy{font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--ink-2);
  margin:0;min-height:2.5em;padding:0 0 4px}
.pf-about .src-note{font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--muted);
  margin:8px 0 0}
.pf-nearby{margin:0}
@media(max-width:639px){
  .pf-band{gap:24px;margin-top:24px}
  .pf-about h2.section-t,.pf-nearby h2.section-t{font-size:20px}
  a.nearby-more{width:100%;min-height:44px}
}
.claim-cta{margin:var(--s4) 0 0;border-top:1px solid var(--line);padding-top:var(--s3)}
.claim-cta p{font-size:13px;color:var(--muted);margin:0 0 var(--s2)}
.claim-cta-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.claim-cta-btn{display:inline-block;background:var(--brand-dark);color:#fff;text-decoration:none;
  border-radius:999px;padding:11px 22px;font-size:15px;font-weight:600;font-family:var(--sans)}
.claim-cta-btn:hover{background:var(--brand);color:#fff}
.claim-cta-dev{font-size:13px;color:var(--brand-dark);text-decoration:none}
.claim-cta-dev:hover{text-decoration:underline}

/* area-page FAQ — visible at the foot of the scrollable list pane */
.area-faq{margin:var(--s4) 0 var(--s2)}
.area-faq h2{font-size:20px;margin:0 0 var(--s2)}

/* national price-index hub: regional median table */
.hubtable-wrap{overflow-x:auto;margin:var(--s3) 0}
.hubtable{width:100%;border-collapse:collapse;font-size:15px}
.hubtable th,.hubtable td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line)}
.hubtable th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
font-weight:600;white-space:nowrap}
.hubtable td.num,.hubtable th.num{text-align:right;white-space:nowrap}
.hubtable tbody tr:hover{background:var(--brand-tint)}
.hubtable a{color:var(--brand-dark);font-weight:600}

@media(min-width:721px){
  /* Area note stays behind Details. Listings lead; the full prose stays in the page. */
  .area-about>summary{cursor:pointer}
  /* fixed app frame: page itself doesn't scroll; the list column scrolls */
  body.area-app{display:flex;flex-direction:column;height:100vh;overflow:hidden}
  body.area-app header.top,body.area-app .appbar{flex:0 0 auto}
  body.area-app .splitview{flex:1 1 auto;min-height:0;display:flex}
  /* Airbnb split: scrollable multi-column card list (~58%) + sticky full-height map (~42%) */
  body.area-app .listpane{flex:1 1 58%;min-width:360px;overflow-y:auto;
    border-right:1px solid var(--line);padding:var(--s3)}
  /* Cards under the note. The fold is .grid.grid-fold, which is more specific
     and sets its own columns plus width:100%, so this auto-fill does not
     squeeze the fold or leave a cream track. */
  body.area-app .grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s3)}
  body.area-app .mappane{display:block;flex:1 1 42%;min-width:320px;height:100%}
  body.area-app .mappane #map{width:100%;height:100%}
  body.area-app footer{display:none}
  /* no Maps key: list takes the whole frame (back to a multi-col grid) */
  body.area-app.no-map .listpane{flex:1;max-width:none;border-right:0}
  body.area-app.no-map .grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}
@media(min-width:1025px){
  body.area-app .grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  body.area-app.no-map .grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
}
/* mobile: floating Map button + full-screen overlay (area-app is a no-op here) */
.maptoggle-mobile{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:60;
background:var(--ink);color:#fff;border:0;border-radius:999px;padding:12px 22px;font-size:14px;
font-weight:600;box-shadow:0 4px 16px rgba(0,0,0,.25);cursor:pointer}
body.show-map-mobile .mappane{display:block;position:fixed;inset:0;z-index:55}
body.show-map-mobile .mappane #map{width:100%;height:100%}
body.show-map-mobile .listpane,body.show-map-mobile header.top,
body.show-map-mobile .appbar{display:none}

/* ── detail panel: covers the map when a provider is clicked ── */
.fdpanel{position:absolute;inset:0;z-index:5;background:#fff;overflow-y:auto;
opacity:0;transform:translateY(8px);transition:opacity .2s var(--ease),transform .2s var(--ease);
pointer-events:none}
body.show-panel .fdpanel:not([hidden]){opacity:1;transform:none;pointer-events:auto}
.fdpanel[hidden]{display:none}
.fdpanel-close{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;
border-radius:50%;border:0;background:rgba(255,255,255,.95);color:var(--ink);font-size:22px;
line-height:1;cursor:pointer;box-shadow:0 1px 6px rgba(0,0,0,.25)}
.fp-img{aspect-ratio:16/9;background:var(--brand-tint);overflow:hidden}
.fp-img img{width:100%;height:100%;object-fit:cover}
.fp-img.ph{display:flex;align-items:center;justify-content:center;
background:linear-gradient(140deg,var(--brand),var(--brand-dark))}
.fp-img .ph-i{font-size:48px;font-weight:700;color:rgba(255,255,255,.92)}
.fp-body{padding:var(--s3)}
.fp-body h3{margin:0 0 2px;font-size:20px}
.fp-loc{color:var(--muted);font-size:14px;margin-bottom:8px}
.fp-prices{display:flex;gap:var(--s3);margin:var(--s2) 0;padding:var(--s2) 0;
border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fp-price{flex:1}.fp-price span{display:block;font-size:11px;text-transform:uppercase;
letter-spacing:.05em;color:var(--muted);margin-bottom:2px}
.fp-price b{font-size:18px;color:var(--ink)}.fp-price .na{font-size:13px;color:var(--muted)}
.fp-cta{display:flex;gap:var(--s1);margin:var(--s2) 0}
.fp-more{display:inline-block;margin-top:6px;color:var(--brand-dark);font-weight:600;font-size:15px}
@media(prefers-reduced-motion:reduce){.fdpanel{transition:none}}

/* ── see-more (pagination) and View more (radius step) ── */
.more{text-align:center;padding-bottom:var(--s3)}
.more button{background:#fff;border:1px solid var(--line-2);border-radius:999px;
padding:12px 28px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;
transition:all .15s var(--ease)}
.more button:hover{border-color:var(--brand);color:var(--brand-dark)}
.radius-more{text-align:center;margin:0 0 var(--s4)}
.radius-more-btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:8px 18px;background:#fff;color:var(--brand-dark);
  border:1.5px solid var(--brand-dark);border-radius:999px;font-size:15px;font-weight:600;
  font-family:inherit;cursor:pointer}
.radius-more-btn:hover:not(:disabled){background:var(--brand-tint)}
.radius-more-btn:disabled{background:transparent;color:var(--muted);border-color:var(--line-2);
  cursor:default}
@media(max-width:639px){
  .grid{grid-template-columns:1fr}
  .radius-more-btn{width:100%;min-height:44px}
}
/* Window width for ordinary grids only. The fold is not in this block: a
   640–1024px window can still have a wide list, and these rules used to force
   the fold to two columns anyway. */
@media(min-width:640px) and (max-width:1024px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* List pane content box, not the window and not the scrolling list's border.
   Four across at 660px of listpane-in. A 1280px window with the map open is
   about 678px there, so it is four columns. An iPad with the map (about 430px)
   stays two by two. */
@container listpane (max-width:659px){
  .listpane .grid.grid-fold[data-n="3"],
  .listpane .grid.grid-fold[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .listpane .grid.grid-fold[data-n="3"]>.card:nth-child(3){grid-column:1/-1}
}
@container listpane (min-width:660px){
  .listpane .grid.grid-fold[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .listpane .grid.grid-fold[data-n="3"]>.card:nth-child(3){grid-column:auto}
  .listpane .grid.grid-fold[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* Four narrow cards: keep the direct cremation price on the card. It wraps
     under the label when the row is too tight, and stays beside it when not. */
  .grid.grid-fold[data-n="4"] .price-row{flex-wrap:wrap;row-gap:2px}
  .grid.grid-fold[data-n="4"] .price-row .lbl{flex:1 1 8em;min-width:0}
  .grid.grid-fold[data-n="4"] .price-row .v{flex:0 0 auto;margin-left:auto}
}
/* Phone last, so a narrow window stays one column even when the list pane
   query above would otherwise use two. */
@media(max-width:639px){
  .listpane .grid.grid-fold[data-n]{grid-template-columns:minmax(0,1fr)}
  .listpane .grid.grid-fold>.card{grid-column:auto}
}

/* ── profile review tools ── */
.revtools{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--s2)}
.chip{background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:6px 13px;
font-size:13px;cursor:pointer;color:var(--ink-2);font-weight:500;transition:all .15s var(--ease)}
.chip:hover{border-color:var(--brand)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.rsort{margin-left:auto}
.rev-body.clamp{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.rev-expand{margin-top:8px;background:none;border:0;padding:0;color:var(--brand-dark);
font-weight:700;font-size:14px;cursor:pointer;font-family:inherit}
.rev-expand:hover{text-decoration:underline}
.rev.hide{display:none}
.morerev{margin-top:var(--s1)}
.morerev button{background:#fff;border:1px solid var(--line-2);border-radius:999px;
padding:9px 18px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.morerev button:hover{border-color:var(--brand)}

/* ── trust strip ── */
.truststrip{background:var(--brand-tint);border-top:1px solid var(--line);
border-bottom:1px solid var(--line)}
.truststrip .wrap{padding:12px var(--s3);text-align:center;font-size:14px;color:var(--ink-2)}
.truststrip b{color:var(--brand-dark)}

/* ── area cost-stats module ── */
.coststats{padding:var(--s5) 0 var(--s2)}
.coststats h2{font-family:var(--serif);font-weight:600;font-size:26px;margin:0 0 6px}
.coststats .muted{color:var(--muted);font-size:14px;max-width:640px;margin:0 0 var(--s3)}
.costbars-wrap{display:grid;gap:var(--s3);max-width:680px}
.costrow{display:grid;gap:8px}
.costlabel{font-weight:600;font-size:15px}
.natfigs{display:flex;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s2)}
.natfig{display:flex;flex-direction:column;gap:2px}
.natfig-lbl{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.natfig-v{font-family:var(--serif);font-size:32px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.costbars{display:grid;gap:8px}
.cbar{display:flex;align-items:center;gap:8px;min-height:34px;height:auto;overflow:visible;
background:transparent}
.cbar-track{flex:1 1 auto;min-width:48px;height:12px;background:var(--bg);border-radius:8px;
overflow:hidden;border:1px solid var(--line)}
.cbar-fill{display:block;height:100%;border-radius:8px;max-width:100%}
.cbar-fill.area{background:var(--brand)}
.cbar-fill.nat{background:var(--line-2)}
.cbar-v{flex:0 0 auto;font-weight:700;color:var(--ink);font-size:14px}
.cbar-t{flex:0 0 auto;font-size:12px;color:var(--muted)}

/* ── nearby/town links ── */
.nearby-areas{padding:var(--s4) 0 var(--s5);border-top:1px solid var(--line);margin-top:var(--s4)}
/* When it lives at the foot of the scrollable list column, drop the centring
   .wrap so the town links left-align with the cards above (no double indent). */
.listpane .nearby-areas .wrap{max-width:none;padding:0}
.nearby-areas h3{font-size:17px;margin:0 0 var(--s2)}
.townlinks{display:flex;flex-wrap:wrap;gap:8px;line-height:1.3;font-size:14px}
.townlinks a{display:inline-flex;align-items:center;color:var(--brand-dark);font-weight:600;
background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:6px 12px}
.nearby-areas .muted{color:var(--muted);font-size:14px}

/* ── homepage areas grid + message ── */
.homemsg{margin-top:var(--s2);font-size:15px;color:var(--ink-2)}
.homemsg a{color:var(--brand-dark);font-weight:600}
.areagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s2);
margin-top:var(--s2)}
/* homepage browse lists: a normal titled section on desktop, but collapsible on
   mobile so the long county/town grids don't become a scroll-wall. All tiles stay
   in the DOM (open by default) — a small inline script closes them on phones, so
   there is no SEO/crawl cost. */
.homelist{margin-top:var(--s6)}
.homelist>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;
gap:12px;cursor:pointer}
.homelist>summary::-webkit-details-marker{display:none}
.homelist>summary .section-t{margin:0}
.homelist>summary .chev{flex:0 0 auto;font-size:13px;font-weight:600;color:var(--brand-dark)}
@media(min-width:721px){.homelist>summary{cursor:default}.homelist>summary .chev{display:none}}
.areatile{display:flex;flex-direction:column;gap:4px;padding:var(--s2) var(--s3);
border:1px solid var(--line);border-radius:var(--radius);background:#fff;
transition:all .15s var(--ease)}
.areatile.live:hover{border-color:var(--brand-dark);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.areatile.soon{opacity:.55}
.areaname{font-weight:700;font-size:16px;color:var(--ink)}
.areacount{font-size:13px;color:var(--muted)}

/* ── FAQ accordion ── */
.faq details{border:1px solid rgba(28,28,26,.09);border-radius:14px;margin-bottom:10px;
background:#fff;overflow:hidden}
.faq summary{padding:16px 20px;font-weight:600;font-size:15.5px;cursor:pointer;list-style:none;
display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--brand-dark);font-size:20px;font-weight:400}
.faq details[open] summary::after{content:'−'}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq p{padding:14px 20px 18px;margin:0;color:var(--ink-3);line-height:1.7}

/* ── article / guides ── */
.article{max-width:760px;padding-top:var(--s4);padding-bottom:var(--s6)}
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:var(--s2)}
.breadcrumb a{color:var(--brand-dark)}
.article h1{font-size:clamp(28px,4vw,38px);margin:0 0 var(--s2)}
.article .lead{font-size:18px;color:var(--ink-2);margin-bottom:var(--s3)}
.article .section-t{margin-top:var(--s4)}
.article p{line-height:1.7;color:var(--ink-2)}
.article ul,.article ol{margin:var(--s2) 0;padding-left:1.3em;color:var(--ink-2);line-height:1.7}
.article li{margin-bottom:8px}
.how-list{list-style:none;padding-left:0;margin:var(--s2) 0}
.how-list li{position:relative;padding-left:30px;margin-bottom:12px;line-height:1.6;color:var(--ink-2)}
.how-list li::before{content:'✓';position:absolute;left:0;top:0;color:var(--brand);font-weight:700}
.how-list strong{color:var(--ink)}
.guidegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s3);
margin-top:var(--s3)}
.guidecard{display:block;padding:var(--s3);border:1px solid var(--line);border-radius:var(--radius);
background:#fff;transition:all .15s var(--ease)}
.guidecard:hover{border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-2px)}
.guidecard h3{margin:0 0 6px;font-size:18px}
.guidecard p{margin:0 0 10px;color:var(--muted);font-size:14px;line-height:1.5}
.guidecard .readmore{color:var(--brand-dark);font-weight:600;font-size:14px}
.cta-band{background:var(--brand-tint);border-radius:var(--radius);padding:var(--s3);
text-align:center;margin:var(--s5) 0}
.cta-band p{font-weight:600;margin:0 0 var(--s2)}
.btn-primary{display:inline-block;background:var(--brand);color:#fff;border-radius:999px;
padding:12px 24px;font-weight:600;font-size:15px}
.btn-primary:hover{background:var(--brand-dark)}
.related{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line)}
.related h3{font-size:16px;margin:0 0 var(--s1)}
.related a{display:inline-block;margin:0 14px 8px 0;color:var(--brand-dark);font-weight:500}

/* ── profile: enquiry CTA, mini-map, near-here ── */
.trust{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s2)}
.trust-badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
border-radius:999px;padding:6px 12px;line-height:1.2;white-space:normal;max-width:100%}
.trust-badge.body{background:#eef2fb;color:#28407a;border:1px solid #cdd8f0}
.trust-badge.owner{background:#fdf6e9;color:#7a5300;border:1px solid #e8cc90;white-space:normal}
.trust-badge.owner .as-of{font-weight:500;opacity:.9}
.trust-badge.claimed{background:#eef4f2;color:#1f4f49;border:1px solid #c5d8d3}
.enquiry{display:flex;gap:10px;flex-wrap:wrap;margin:var(--s3) 0 var(--s1)}
.enq-primary{display:inline-flex;align-items:center;justify-content:center;gap:6px;
background:var(--brand-dark);color:#fff;border-radius:999px;padding:13px 22px;font-weight:600;
font-size:15px;transition:background .2s var(--ease)}
.enq-primary:hover{background:var(--brand)}
.enq-secondary{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#fff;
border:1.5px solid var(--brand-dark);color:var(--brand-dark);border-radius:999px;padding:12px 22px;
font-weight:600;font-size:15px;transition:background .15s var(--ease)}
.enq-secondary:hover{background:var(--brand-tint)}
a.nearby-more{display:inline-flex;align-items:center;justify-content:center;
margin-top:12px;min-height:40px;padding:8px 18px;width:auto;background:#fff;
border:1.5px solid var(--brand-dark);color:var(--brand-dark);border-radius:999px;
font-weight:600;font-size:15px;text-decoration:none}
a.nearby-more:hover{background:var(--brand-tint);color:var(--brand-dark)}
/* ── on-site enquiry (lead capture) form ── */
.enq-form{margin:var(--s2) 0 var(--s1);padding:var(--s3);border:1px solid var(--line);
border-radius:var(--radius);background:var(--brand-tint)}
.enq-form h3{margin:0 0 6px;font-size:18px}
.enq-intro{margin:0 0 var(--s3);font-size:16px;line-height:1.6;color:var(--ink-2)}
.enq-form label{display:block;margin-bottom:var(--s2);font-size:13px;font-weight:600;color:var(--ink)}
.enq-form .opt{font-weight:400;color:var(--muted)}
.enq-form input,.enq-form select,.enq-form textarea{display:block;width:100%;margin-top:5px;
padding:11px 12px;border:1px solid var(--line-2);border-radius:var(--radius-sm);font-size:15px;
font-family:inherit;background:#fff;color:var(--ink);box-sizing:border-box}
.enq-form input:focus,.enq-form select:focus,.enq-form textarea:focus{outline:none;border-color:var(--brand)}
.enq-form textarea{resize:vertical}
.enq-form .cf-turnstile{margin:var(--s2) 0}
.enq-send{margin-top:4px;border:0;cursor:pointer;width:auto}
.enq-send:disabled{opacity:.6;cursor:default}
.enq-status{margin:var(--s2) 0 0;font-size:14px;font-weight:600;color:var(--brand-dark);min-height:1em}
.enq-privacy{margin:var(--s2) 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.enq-success{margin:0;font-size:15px;line-height:1.55;font-weight:600;color:var(--brand-dark)}
.nearby{display:grid;grid-template-columns:1fr;gap:12px;margin-top:0}
.nearcard{display:flex;justify-content:space-between;align-items:center;gap:12px;
padding:16px 20px;border:1px solid rgba(28,28,26,.09);border-radius:14px;background:#fff;
color:var(--ink);transition:all .15s var(--ease)}
.nearcard:hover{border-color:var(--brand-dark);box-shadow:0 6px 18px rgba(31,49,45,.08)}
.nearcard .nleft{display:flex;flex-direction:column;gap:3px;min-width:0}
.nearcard b{font-family:var(--sans);font-size:16px;font-weight:600;color:var(--ink);line-height:1.3}
.nearcard .nmeta{font-size:13px;color:var(--muted);line-height:1.5}
.nearcard .nprice{font-family:var(--sans);font-size:16px;color:var(--ink);font-weight:600;white-space:nowrap}
.nearcard .nprice.pending{font-size:13px;color:var(--muted);font-weight:500}
@media(min-width:640px) and (max-width:899px){.nearby{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.nearby{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ── shortlist button + compare ── */
.card{position:relative}
.card .shortlist-btn{position:absolute;top:16px;right:16px;z-index:2;width:34px;height:34px;
border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--muted);font-size:16px;
cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:all .15s var(--ease)}
.card .shortlist-btn:hover{background:#fff}
.shortlist-btn.on{color:#b3541e!important;background:#fff}
.enq-secondary.shortlist-btn{position:static;width:auto;height:auto;border-radius:999px;
border:1px solid var(--line-2);box-shadow:none}
.compare-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
gap:var(--s3);margin-top:var(--s3)}
.ccard{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;
display:flex;flex-direction:column;padding-bottom:var(--s2)}
.ccard .cimg{aspect-ratio:16/10;background:var(--brand-tint);overflow:hidden}
.ccard .cimg img{width:100%;height:100%;object-fit:cover}
.ccard .ph-sm{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
font-size:40px;font-weight:700;color:#fff;background:linear-gradient(140deg,var(--brand),var(--brand-dark))}
.ccard h3{margin:var(--s2) var(--s2) 2px;font-size:16px}
.ccard .cmeta{margin:0 var(--s2) var(--s1);color:var(--muted);font-size:13px}
.ccard .crow{display:flex;justify-content:space-between;padding:6px var(--s2);font-size:13px;
border-top:1px solid var(--line)}
.ccard .crow span{color:var(--muted)}
.ccard .btn-primary.sm{margin:var(--s2) var(--s2) 6px;padding:9px;text-align:center;font-size:13px}
.ccard .cremove{margin:0 var(--s2);background:none;border:0;color:var(--muted);font-size:12px;
cursor:pointer;text-decoration:underline}
.slempty{text-align:center;padding:var(--s6) 0;color:var(--muted)}
.slempty .btn-primary{margin-top:var(--s2)}

@media (max-width:720px){
  .hero{padding:var(--s5) 0 var(--s4)}
  /* Solid bar: backdrop blur was painting over the first line under the header. */
  header.top{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
  h1,h2,.town-head,.appbar,.card{scroll-margin-top:calc(var(--header-h) + var(--sticky-gap))}
  .proof-foot{flex-wrap:wrap;gap:8px;padding:12px 14px}
  .proof-tbl th,.proof-tbl td{padding:8px 6px}
  .proof-tbl th:first-child,.proof-tbl td:first-child{padding-left:12px}
  .proof-tbl th:last-child,.proof-tbl td:last-child{padding-right:12px}
  .spl-doc{transform:none;padding:20px 16px}
  .spl-stamp{position:static;display:block;width:fit-content;max-width:100%;margin:0 auto 8px;
    transform:none;white-space:normal;text-align:center}
  .pricegap h2,.pricegap p,.truststrip .wrap,.spl-stamp,.proof-foot,.trust-badge{
    overflow-wrap:anywhere}
  .listpane .card-img,.grid .card-img{aspect-ratio:2/1}
  .appbar-title{font-size:clamp(20px,5.2vw,24px)}
  /* hero search: full-width input, then Near me + Compare paired on one tidy row */
  .search{flex-wrap:wrap;gap:8px}
  .search .field,.hero .search .field{flex:1 1 100%;min-width:0}
  .search .btn-near,.search .btn,
  .hero .search .btn,.hero .search .btn-near{flex:1 1 0;justify-content:center;padding:14px;
    font-size:15px;height:auto;white-space:nowrap}
  /* A phone input is the full row. A little less side padding lets the
     homepage wording fit without shrinking the type. */
  .hero .search input{padding-left:42px;padding-right:10px}
  /* area appbar: full-width input, then Near me + Search paired on one tidy row */
  .appbar-search{flex-direction:row;flex-wrap:wrap;gap:8px;border-radius:0}
  .appbar-search .field{flex:1 1 100%}
  .appbar-search .btn-near,.appbar-search .btn{flex:1 1 0;justify-content:center;
    padding:13px 14px;font-size:15px;height:auto}
  .steps{grid-template-columns:1fr;gap:var(--s1);margin:var(--s4) 0}
  .stats{gap:var(--s3)}
  .pf-cols{grid-template-columns:1fr;gap:var(--s4)}
  .pf-body{padding:var(--s3)}
  .mapview{height:420px}
  /* Filter chips wrap onto the next line. A sideways scroller was clipping
     the last chip and showing a scrollbar. */
  .appbar{padding:8px var(--s2);gap:6px}
  .appbar-controls{gap:6px;align-items:flex-start}
  .appbar #count{font-size:13px}
  .controls{width:100%;gap:8px;align-items:flex-start}
  .sort{flex-wrap:wrap;overflow:visible;gap:6px;margin:0;padding:0}
  .sort button{white-space:normal;flex:0 1 auto}
  .radius{font-size:13px;flex-wrap:wrap}
  /* comfortable touch targets (>=44px) */
  .fdpanel-close{width:44px;height:44px;font-size:26px}
  .card .shortlist-btn{width:44px;height:44px;font-size:18px}
  /* Ownership chips wrap instead of clipping inside overflow:hidden. */
  .own-filter{display:flex;flex-wrap:wrap;width:100%;max-width:100%;overflow:visible;
    border-radius:12px}
  .own-filter button{flex:1 1 auto;text-align:center;white-space:normal;min-width:0}
  /* mobile header: collapse nav behind a hamburger so it never overflows */
  header.top .wrap{padding-left:var(--s2);padding-right:var(--s2)}
  .logo{font-size:18px}
  .navtoggle{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
    color:var(--ink);padding:8px;margin:-8px;border-radius:10px;-webkit-tap-highlight-color:transparent}
  .navtoggle:active{background:var(--brand-tint)}
  .topnav{display:none}
  .nav-cbx:checked ~ .topnav{display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;right:var(--s2);top:56px;min-width:210px;background:#fff;
    border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
    padding:6px;z-index:60;font-size:15px}
  .nav-cbx:checked ~ .topnav a{padding:12px 14px;border-radius:8px;text-align:left}
  .nav-cbx:checked ~ .topnav a:active{background:var(--brand-tint)}
  /* trim tall/wide elements for small screens */
  .fp-prices{gap:var(--s2)}
  .fp-cta{flex-wrap:wrap}
  /* Airbnb-style refined cards: a touch more breathing room + tactile tap state */
  .card-body{padding:var(--s2) var(--s2) calc(var(--s2) + 2px)}
  .card:active{transform:scale(.985)}
  .nearcard:active{transform:scale(.99)}
  /* bigger, thumb-friendly CTAs — Call is the full-width hero, the rest stack
     equally beneath it so the primary conversion is unmissable on a phone */
  .enquiry{gap:10px}
  .enq-primary{width:100%;justify-content:center;padding:16px 22px;font-size:17px;
    box-shadow:0 4px 14px rgba(43,106,99,.28)}
  .enq-secondary{flex:1 1 140px;justify-content:center;padding:14px;font-size:15px}
}
@media(min-width:640px) and (max-width:720px){
  .pf-cols{grid-template-columns:1fr 1fr;gap:var(--s4)}
}