/* The British Network — thebritishnetwork.com
   Shared stylesheet. Calm, trustworthy palette with a quiet nod to
   the UK and US flags: deep navy, a warm off-white, a muted red accent. */

:root {
  --navy: #14284b;
  --navy-deep: #0d1c36;
  --blue: #2a5db0;
  --blue-soft: #eaf1fb;
  --red: #b3243a;
  --red-soft: #fbe9ec;
  --ink: #1f2733;
  --muted: #5b6675;
  --line: #e2e6ec;
  --paper: #fbfcfe;
  --card: #ffffff;
  --shadow: 0 2px 10px rgba(20, 40, 75, 0.06), 0 8px 28px rgba(20, 40, 75, 0.05);
  --radius: 14px;
  --wrap: 1080px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }

a { color: var(--blue); }
a:hover { color: var(--navy); }

h1, h2, h3 { color: var(--navy); line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-size: 2.1rem; margin: 0 0 .5rem; }
h2 { font-size: 1.5rem; margin: 2.4rem 0 1rem; }
h3 { font-size: 1.15rem; margin: 0 0 .5rem; }
p { margin: 0 0 1rem; }

/* ---------- Header / nav ---------- */
.site-header {
  background: var(--navy);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 6px 20px rgba(13,28,54,.18);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.brand .flagdot {
  width: 38px; height: 23px; border-radius: 4px; flex: 0 0 auto;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'><clipPath id='s'><path d='M0,0 v30 h60 v-30 z'/></clipPath><clipPath id='t'><path d='M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z'/></clipPath><g clip-path='url(%23s)'><path d='M0,0 v30 h60 v-30 z' fill='%23012169'/><path d='M0,0 L60,30 M60,0 L0,30' stroke='%23fff' stroke-width='6'/><path d='M0,0 L60,30 M60,0 L0,30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/><path d='M30,0 v30 M0,15 h60' stroke='%23fff' stroke-width='10'/><path d='M30,0 v30 M0,15 h60' stroke='%23C8102E' stroke-width='6'/></g></svg>");
  background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}
.brand b { font-size: 1.06rem; letter-spacing: -0.01em; }
.brand .tag {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .09em;
  color: #b9c6e0; display: block; font-weight: 600;
}
.nav-toggle {
  display: none; background: none; border: 1px solid rgba(255,255,255,.35);
  color: #fff; border-radius: 8px; padding: 8px 10px; font-size: 1rem; cursor: pointer;
}
nav.main { display: flex; gap: 4px; flex-wrap: wrap; }
nav.main a {
  color: #dbe4f3; text-decoration: none; font-size: .92rem; font-weight: 500;
  padding: 8px 12px; border-radius: 8px; white-space: nowrap;
}
nav.main a:hover { background: rgba(255,255,255,.10); color: #fff; }
nav.main a.active { background: #fff; color: var(--navy); font-weight: 700; }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(1200px 400px at 50% -10%, rgba(42,93,176,.22), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  padding: 64px 0 60px;
  text-align: center;
}
.hero h1 { color: #fff; font-size: 2.5rem; max-width: 20ch; margin-left: auto; margin-right: auto; }
.hero p.lead { color: #d5deec; font-size: 1.18rem; max-width: 62ch; margin: .5rem auto 0; }
.hero .pill {
  display: inline-block; background: rgba(255,255,255,.12); color: #cdd9ee;
  border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
  padding: 5px 14px; font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: 20px;
}

/* page intro band (interior pages) */
.page-intro { background: var(--blue-soft); border-bottom: 1px solid var(--line); padding: 40px 0 34px; }
.page-intro h1 { margin-bottom: .3rem; }
.page-intro p { color: var(--muted); max-width: 66ch; margin: 0; font-size: 1.05rem; }
.eyebrow { color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .76rem; margin: 0 0 .5rem; }

/* ---------- Sections / content ---------- */
main { padding: 40px 0 30px; }
.section { margin-bottom: 8px; }

/* card grid (home) */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 26px 0; }
.card {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 22px; text-decoration: none; color: inherit; display: block;
  box-shadow: var(--shadow);
  transition: transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s ease, border-color .24s ease;
}
.card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--red));
  transform: scaleX(0); transform-origin: left; transition: transform .34s ease;
}
a.card:hover {
  transform: translateY(-6px);
  border-color: #cdd9ee;
  box-shadow: 0 10px 22px rgba(20,40,75,.12), 0 22px 52px rgba(20,40,75,.16);
}
a.card:hover::before { transform: scaleX(1); }
.card .ico { font-size: 1.7rem; margin-bottom: 6px; display: block; transition: transform .24s cubic-bezier(.2,.7,.3,1); }
a.card:hover .ico { transform: scale(1.18) rotate(-6deg); }
.card h3 { margin-bottom: .35rem; }
.card p { color: var(--muted); font-size: .96rem; margin: 0; }
.card .go { color: var(--blue); font-weight: 600; font-size: .9rem; margin-top: 12px; display: inline-block; transition: transform .2s ease; }
a.card:hover .go { transform: translateX(5px); }

/* gentle staggered entrance for the cards */
@media (prefers-reduced-motion: no-preference) {
  .grid .card { opacity: 0; animation: cardIn .5s ease forwards; }
  .grid .card:nth-child(1) { animation-delay: .04s; }
  .grid .card:nth-child(2) { animation-delay: .10s; }
  .grid .card:nth-child(3) { animation-delay: .16s; }
  .grid .card:nth-child(4) { animation-delay: .22s; }
  .grid .card:nth-child(5) { animation-delay: .28s; }
  .grid .card:nth-child(6) { animation-delay: .34s; }
  @keyframes cardIn { from { opacity: 0; } to { opacity: 1; } }
}

/* Q&A blocks */
.qa {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; margin: 0 0 18px; box-shadow: var(--shadow);
}
.qa h3 { display: flex; gap: 10px; align-items: baseline; }
.qa h3 .q { color: var(--red); font-weight: 800; flex: 0 0 auto; }
.qa p { margin-bottom: .8rem; }
.qa p:last-child { margin-bottom: 0; }
.official {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  background: var(--blue-soft); color: var(--navy); font-weight: 600; font-size: .92rem;
  border: 1px solid #d3e0f5; border-radius: 9px; padding: 8px 14px; margin-top: 4px;
}
.official:hover { background: #dce8fb; }
.official::before { content: "\2197"; font-weight: 700; color: var(--blue); }
.linkrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* callout / note boxes */
.note {
  border-left: 4px solid var(--blue); background: var(--blue-soft);
  border-radius: 10px; padding: 14px 18px; margin: 16px 0; font-size: .97rem;
}
.note.good { border-left-color: #1f8a54; background: #e9f6ef; }
.note.warn { border-left-color: var(--red); background: var(--red-soft); }
.note b { color: var(--navy); }
.note .label { display: block; font-weight: 700; margin-bottom: 2px; }

/* professional signpost */
.signpost {
  border: 1px dashed #c3cede; background: #f6f9fe; border-radius: var(--radius);
  padding: 20px 22px; margin: 22px 0 6px;
}
.signpost h3 { color: var(--navy); margin-top: 0; }
.signpost p { color: var(--muted); margin-bottom: 0; }

/* city blocks (community) */
.city { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 0 18px; overflow: hidden; }
.city > summary {
  cursor: pointer; list-style: none; padding: 18px 22px; font-weight: 700; color: var(--navy);
  font-size: 1.15rem; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.city > summary::-webkit-details-marker { display: none; }
.city > summary::after { content: "+"; color: var(--blue); font-weight: 700; font-size: 1.3rem; }
.city[open] > summary::after { content: "\2013"; }
.city > summary:hover { background: #f7faff; }
.city .body { padding: 4px 22px 20px; border-top: 1px solid var(--line); }
.place { margin: 14px 0; padding-bottom: 14px; border-bottom: 1px dotted var(--line); }
.place:last-child { border-bottom: none; padding-bottom: 0; }
.place .name { font-weight: 700; color: var(--ink); }
.place .kind { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--blue); background: var(--blue-soft); border-radius: 6px; padding: 2px 8px; margin-left: 6px; }
.place .meta { color: var(--muted); font-size: .92rem; margin: 2px 0; }
.tbc { color: var(--red); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }

ul.clean { padding-left: 1.2rem; }
ul.clean li { margin-bottom: .5rem; }

/* misc */
.lastcheck { color: var(--muted); font-size: .85rem; margin-top: 26px; font-style: italic; }
hr.soft { border: none; border-top: 1px solid var(--line); margin: 34px 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: #c3cee2; margin-top: 40px; padding: 40px 0 46px; font-size: .92rem; }
.site-footer h4 { color: #fff; margin: 0 0 10px; font-size: 1rem; }
.site-footer .cols { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; }
.site-footer a { color: #a9bde0; }
.disclaimer { border-top: 1px solid rgba(255,255,255,.12); margin-top: 26px; padding-top: 18px; color: #8fa0c0; font-size: .82rem; line-height: 1.6; }
.brand-slot { border: 1px dashed rgba(255,255,255,.25); border-radius: 10px; padding: 12px 14px; color: #93a4c4; font-size: .8rem; }

/* ---------- Directory ---------- */
.jumpmenu { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.jumpmenu a {
  text-decoration: none; font-size: .86rem; font-weight: 600; color: var(--navy);
  background: var(--blue-soft); border: 1px solid #d3e0f5; border-radius: 999px; padding: 6px 13px;
}
.jumpmenu a:hover { background: #dce8fb; }

.dir-section { margin: 36px 0 8px; scroll-margin-top: 84px; }
.dir-section > h2 { margin: 0 0 .3rem; }
.dir-section .sec-desc { color: var(--muted); max-width: 72ch; margin: 0 0 14px; }
.subhead { color: var(--navy); font-size: 1.05rem; font-weight: 700; margin: 24px 0 12px; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 6px; }
.chips span {
  font-size: .78rem; color: var(--muted); background: #f2f5fa; border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 11px;
}

.dir-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin: 8px 0 6px; }
.listing {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 20px 18px; box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.listing .lname { font-weight: 700; color: var(--navy); font-size: 1.08rem; margin: 0 0 2px; }
.listing .desc { color: var(--ink); font-size: .93rem; margin: 6px 0 10px; }
.listing .loc { color: var(--muted); font-size: .85rem; margin: 0 0 14px; }
.listing .loc b { color: var(--navy); font-weight: 600; }
.listing-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: auto; }
.btn {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 600;
  font-size: .9rem; border-radius: 9px; padding: 8px 15px; cursor: pointer; border: 1px solid transparent;
}
.btn-web { background: var(--blue-soft); color: var(--navy); border-color: #d3e0f5; }
.btn-web:hover { background: #dce8fb; color: var(--navy); }
.btn-web::before { content: "\2197"; font-weight: 700; color: var(--blue); }
.btn-enq { background: var(--navy); color: #fff; }
.btn-enq:hover { background: var(--navy-deep); color: #fff; }

.badge {
  display: inline-block; font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; border-radius: 6px; padding: 2px 8px; margin-left: 8px; vertical-align: middle;
}
.badge-tbc { color: var(--red); background: var(--red-soft); border: 1px solid #f3c9d1; }
.badge-caution { color: #8a5a00; background: #fdf3e0; border: 1px solid #f0d9ac; }

.listing.placeholder { border-style: dashed; background: #f9fbfe; }
.listing.placeholder .desc { color: var(--muted); }

.empty-note {
  border: 1px dashed #c3cede; background: #f6f9fe; border-radius: var(--radius);
  padding: 16px 18px; color: var(--muted); font-size: .94rem;
}
.empty-note a { font-weight: 600; }

.notice {
  border-left: 4px solid var(--navy); background: #eef2f8; border-radius: 10px;
  padding: 14px 18px; margin: 18px 0; font-size: .95rem; color: var(--ink);
}
.notice b { color: var(--navy); }

/* ---------- Data capture (newsletter + enquiry) ---------- */
.capture {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 26px 24px; margin: 22px 0; scroll-margin-top: 84px;
}
.capture.lead { background: linear-gradient(180deg, #f4f8ff, #ffffff); border-color: #d3e0f5; }
.capture h2 { margin-top: 0; }
.capture .sub { color: var(--muted); max-width: 66ch; }
.form-row { margin: 0 0 15px; }
.form-row label { display: block; font-weight: 600; color: var(--navy); font-size: .9rem; margin: 0 0 5px; }
.form-row input[type="text"], .form-row input[type="email"], .form-row input[type="tel"], .form-row select, .form-row textarea {
  width: 100%; font-family: var(--font); font-size: 1rem; color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; background: #fff;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft);
}
.form-row textarea { min-height: 120px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--muted); margin: 4px 0 16px; }
.consent input { margin-top: 4px; flex: 0 0 auto; }
.btn-submit {
  background: var(--red); color: #fff; border: none; border-radius: 9px;
  padding: 11px 24px; font-weight: 700; font-size: 1rem; cursor: pointer;
}
.btn-submit:hover { background: #9a1e31; }
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 620px) { .formgrid { grid-template-columns: 1fr; } }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  body { font-size: 16px; }
  .hero { padding: 46px 0 42px; }
  .hero h1 { font-size: 2rem; }
  .nav-toggle { display: inline-block; }
  nav.main {
    display: none; position: absolute; top: 66px; left: 0; right: 0;
    background: var(--navy); flex-direction: column; gap: 0; padding: 8px 14px 16px;
    box-shadow: 0 12px 24px rgba(0,0,0,.25);
  }
  nav.main.open { display: flex; }
  nav.main a { padding: 12px 10px; border-radius: 8px; font-size: 1rem; }
  .site-footer .cols { grid-template-columns: 1fr; }
  h1 { font-size: 1.7rem; }
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;padding-bottom:clamp(90px,10vw,140px)}
.hero .wrap{position:relative;z-index:3}
.hero .lead{max-width:60ch;margin-left:auto;margin-right:auto}
.hero-glow{position:absolute;right:9%;top:16%;width:150px;height:150px;border-radius:50%;z-index:0;
 background:radial-gradient(circle,rgba(179,36,58,.26),rgba(179,36,58,0) 70%);
 animation:breathe 13s ease-in-out infinite;pointer-events:none}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.14);opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-glow{animation:none}}
@media (max-width:640px){.hero-glow{width:98px;height:98px;right:4%}}

/* ---------- rolling London photography, sits above the drawn skyline ---------- */
/* Photographs live in assets/hero/ as london-1.jpg, london-2.jpg ...             */
/* Currently running TWO images. Add more and I will extend the cycle.            */
.hero-photos{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-photos figure{position:absolute;inset:0;margin:0;background-size:cover;background-position:center;
 opacity:0;animation:crossfade 44s infinite;will-change:opacity,transform}
.hero-photos figure:nth-child(1){background-image:url("hero/hero-1.jpg");animation-delay:0s}
.hero-photos figure:nth-child(2){background-image:url("hero/hero-2.jpg");animation-delay:11s}
.hero-photos figure:nth-child(3){background-image:url("hero/hero-3.jpg");animation-delay:22s}
.hero-photos figure:nth-child(4){background-image:url("hero/hero-4.jpg");animation-delay:33s}
@keyframes crossfade{
  0%{opacity:0;transform:scale(1.04)}
  4.5%{opacity:1}
  22%{opacity:1;transform:scale(1.10)}
  26.5%{opacity:0;transform:scale(1.10)}
  100%{opacity:0}
}
.hero-photos::after{content:"";position:absolute;inset:0;
 background:linear-gradient(180deg,rgba(13,28,54,.62) 0%,rgba(13,28,54,.30) 38%,rgba(20,40,75,.80) 100%)}
@media (prefers-reduced-motion:reduce){
  .hero-photos figure{animation:none;opacity:0}
  .hero-photos figure:nth-child(1){opacity:1}
}

/* ---------- newsflash strip (assets/newsflash.js) ---------- */
.newsflash{background:var(--navy-deep);color:#e8eefa;border-bottom:1px solid rgba(255,255,255,.1)}
.newsflash .nf-row{display:flex;align-items:center;gap:14px;padding:9px 0;flex-wrap:wrap}
.nf-badge{flex:none;font-size:.66rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
 background:var(--red);color:#fff;border-radius:999px;padding:4px 10px;white-space:nowrap}
.newsflash .nf-head{flex:1 1 320px;display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;
 background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.nf-tag{flex:none;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#f2b3c0}
.nf-title{font-size:.95rem;font-weight:600;line-height:1.35;color:#fff}
.newsflash .nf-head:hover .nf-title{text-decoration:underline;text-underline-offset:3px}
.newsflash .nf-head:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px}
.nf-chev{flex:none;width:9px;height:9px;border-right:2px solid #a9bde0;border-bottom:2px solid #a9bde0;
 transform:rotate(45deg) translateY(-2px);transition:transform .22s ease}
.newsflash.nf-open .nf-chev{transform:rotate(225deg) translateY(-2px)}
.nf-dots{flex:none;display:flex;gap:6px;margin-left:auto}
.nf-dot{width:9px;height:9px;padding:0;border-radius:50%;border:1px solid #7f95bd;
 background:none;cursor:pointer;transition:background .18s ease}
.nf-dot.on,.nf-dot:hover{background:#e8eefa}
.nf-dot:focus-visible{outline:2px solid #fff;outline-offset:3px}
.nf-panel{border-top:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);padding:16px 0 18px}
.nf-panel p{margin:0 0 9px;font-size:.94rem;line-height:1.62;color:#dbe4f4;max-width:76ch}
.nf-panel b{color:#fff}
.nf-panel .nf-more{margin:0 0 9px;font-weight:600}
.nf-panel .nf-more a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.nf-panel .nf-small{margin:0;font-size:.78rem;color:#9fb0cd}
@media (max-width:620px){
  .nf-title{font-size:.9rem}
  .nf-dots{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){.nf-chev{transition:none}}

/* eight nav items now, so tighten the desktop row a little */
@media (min-width:641px){
  nav.main a { font-size: .875rem; padding: 8px 9px; }
}
@media (min-width:641px) and (max-width:1024px){
  nav.main a { font-size: .82rem; padding: 7px 7px; }
}

/* ---------- "your enquiry is about" line (assets/enquiry-source.js) ---------- */
.enq-about{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
 background:var(--blue-soft);border:1px solid #c6d8f2;border-left:4px solid var(--blue);
 border-radius:10px;padding:11px 14px;margin:0 0 18px}
.enq-about .ea-label{font-size:.72rem;font-weight:700;letter-spacing:.09em;
 text-transform:uppercase;color:var(--blue)}
.enq-about .ea-name{font-weight:700;color:var(--navy)}
.enq-about .ea-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 font-size:.78rem;letter-spacing:.04em;background:#fff;border:1px solid #c6d8f2;
 border-radius:999px;padding:3px 9px;color:var(--muted)}
.enq-about .ea-clear{margin-left:auto;background:none;border:0;padding:4px 2px;cursor:pointer;
 font:inherit;font-size:.84rem;font-weight:600;color:var(--blue);text-decoration:underline;
 text-underline-offset:3px}
.enq-about .ea-clear:hover{color:var(--navy)}
.enq-about .ea-clear:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
@media (max-width:560px){.enq-about .ea-clear{margin-left:0}}

/* photo credit line in the home page footer */
.photo-credit{margin:0 0 14px;font-size:.78rem;line-height:1.6;color:#8fa0c0}
.photo-credit a{color:#a9bde0;text-decoration:underline;text-underline-offset:2px}
.photo-credit a:hover{color:#fff}

/* lighter wash over the hero photos, so give the type its own contrast */
.hero h1{text-shadow:0 2px 18px rgba(8,18,38,.55),0 1px 3px rgba(8,18,38,.4)}
.hero p.lead{text-shadow:0 1px 12px rgba(8,18,38,.6)}
.hero .pill{backdrop-filter:blur(3px);background:rgba(10,22,44,.42);border:1px solid rgba(255,255,255,.18)}

/* ---------- Directory as a separate utility, not a nav item ---------- */
.dir-btn{
  flex:none; display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; white-space:nowrap;
  color:#fff; font-size:.84rem; font-weight:600; letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.42); border-radius:9px;
  padding:8px 14px; background:rgba(255,255,255,.05);
  transition:background .18s ease, border-color .18s ease;
}
.dir-btn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.7)}
.dir-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.dir-btn .ic{
  width:15px;height:15px;flex:none;opacity:.85;
  background:currentColor;
  -webkit-mask:var(--bk) center/contain no-repeat; mask:var(--bk) center/contain no-repeat;
  --bk:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M4 5h10M4 10h10M4 15h7'/><circle cx='18.5' cy='16.5' r='3.2'/><path d='M20.9 18.9L23 21'/></svg>");
}
.dir-btn.active{background:#fff;color:var(--navy);border-color:#fff}
/* it stays visible on mobile, beside the Menu button */
@media (max-width:980px){
  .dir-btn{padding:7px 11px;font-size:.8rem}
  .dir-btn .lbl{display:inline}
}
@media (max-width:420px){
  .dir-btn .lbl{display:none}
  .dir-btn{padding:8px 10px}
}
.header-right{display:flex;align-items:center;gap:10px;flex:none}

/* keep the brand on one line now that the Directory button shares the bar */
.brand{flex:none}
.brand b{white-space:nowrap}
.brand .tag{white-space:nowrap}
.site-header .wrap{gap:20px}
@media (min-width:1101px){
  nav.main{flex-wrap:nowrap}
  nav.main a{font-size:.86rem;padding:8px 9px}
}
/* below 1100px the seven guide links no longer fit beside the Directory
   button, so the nav collapses to the Menu button and the button stays */
@media (max-width:1100px){
  .nav-toggle{display:inline-block}
  nav.main{
    display:none; position:absolute; top:66px; left:0; right:0;
    background:var(--navy); flex-direction:column; gap:0; padding:8px 14px 16px;
    box-shadow:0 12px 24px rgba(0,0,0,.25);
  }
  nav.main.open{display:flex}
  nav.main a{padding:12px 10px;border-radius:8px;font-size:1rem}
}

/* Enquiry form: optional label + "Would you like a phone call?" section */
.form-row .opt{font-weight:400;color:var(--muted)}
.callback{border:1px solid var(--line);border-radius:12px;padding:14px 16px 4px;margin:0 0 16px;background:#fff}
.callback .cb-q{font-weight:700;color:var(--navy);margin:0 0 8px}
.callback .cb-tick{color:var(--ink);margin:0 0 12px}
.callback .cb-note{color:var(--muted);font-size:.85rem;margin:0 0 12px}

/* Anything marked hidden stays hidden, even if a rule above gives it display:flex (fixes the empty
   "Your enquiry is about" bar that showed on the form before a listing was clicked). */
[hidden]{display:none!important}

/* ---------- Photo banners behind the page title (Shopping, Money & Finance, Community) ----------
   Each page's banner has a class (photo-shopping, photo-money, photo-community) that picks its photo below.
   Swap a photo by replacing the file in assets/pages/ with one of the same name. */
.page-intro.page-photo{position:relative;isolation:isolate;overflow:hidden;border-bottom:0;
  padding:clamp(70px,9vw,120px) 0 clamp(56px,7vw,92px);background:var(--navy)}
.page-intro.page-photo::before{content:"";position:absolute;inset:0;z-index:-2;
  background-size:cover;background-repeat:no-repeat;background-position:center}
.page-intro.page-photo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(13,28,54,.86) 0%,rgba(13,28,54,.62) 55%,rgba(13,28,54,.30) 100%)}
.page-intro.page-photo h1{color:#fff;text-shadow:0 2px 16px rgba(8,18,38,.5)}
.page-intro.page-photo p{color:#e3e9f4;text-shadow:0 1px 10px rgba(8,18,38,.55)}
.page-intro.page-photo .eyebrow{color:#ffb3c0}
.page-intro.photo-shopping::before{background-image:url("pages/shopping.jpg");background-position:center 0%}
.page-intro.photo-money::before{background-image:url("pages/money.jpg");background-position:center 45%}
.page-intro.photo-community::before{background-image:url("pages/community.jpg");background-position:center 42%}
.page-intro.photo-community{padding-bottom:clamp(90px,11vw,150px)}  /* a little taller, to fit the crowd */

/* ---------- Community: football clubs list + What's on (added 24 Sep 2026) ---------- */
.place ul.clubs { list-style: none; margin: 6px 0 0; padding: 0; }
.place ul.clubs li { color: var(--muted); font-size: .92rem; margin: 4px 0; padding-left: 16px; position: relative; }
.place ul.clubs li::before { content: "\26BD"; position: absolute; left: -2px; font-size: .75rem; top: 2px; }
.place ul.clubs a { color: var(--blue); font-weight: 600; text-decoration: none; }
.place ul.clubs a:hover { text-decoration: underline; }
details.whatson summary .count { font-size: .78rem; font-weight: 600; color: var(--muted); margin-left: 10px; margin-right: auto; }
ul.events { list-style: none; margin: 0; padding: 0; }
ul.events li { display: grid; grid-template-columns: 11.5rem 1fr; column-gap: 14px; row-gap: 2px; padding: 12px 0; border-bottom: 1px dotted var(--line); }
ul.events li:last-child { border-bottom: none; }
ul.events .ev-date { grid-column: 1; grid-row: 1; font-weight: 700; color: var(--navy); font-size: .92rem; }
ul.events .ev-city { grid-column: 1; grid-row: 2; justify-self: start; align-self: start; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--blue); background: var(--blue-soft); border-radius: 6px; padding: 2px 8px; }
ul.events .ev-name { grid-column: 2; grid-row: 1; font-weight: 700; color: var(--ink); text-decoration: none; }
ul.events .ev-name:hover { color: var(--blue); text-decoration: underline; }
ul.events .ev-meta { color: var(--muted); font-size: .9rem; grid-column: 2; grid-row: 2; }
@media (max-width: 640px) {
  ul.events li { grid-template-columns: 1fr; }
  ul.events .ev-date, ul.events .ev-city, ul.events .ev-name, ul.events .ev-meta { grid-column: 1; grid-row: auto; }
}

/* ---------- Site search (added 24 Sep 2026) ---------- */
.search-btn { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.10); color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; padding: 7px 11px; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.search-btn:hover { background: rgba(255,255,255,.2); }
@media (max-width: 520px) { .search-btn span { display: none; } }
.sr-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(13,28,54,.55); display: flex; justify-content: center; align-items: flex-start; padding: 8vh 16px 16px; }
.sr-overlay[hidden] { display: none; }
body.sr-open { overflow: hidden; }
.sr-panel { background: #fff; width: 100%; max-width: 680px; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow: hidden; display: flex; flex-direction: column; max-height: 80vh; }
.sr-bar { display: flex; gap: 8px; padding: 14px; border-bottom: 1px solid var(--line); }
.sr-input { flex: 1; min-width: 0; font: inherit; font-size: 1.05rem; padding: 11px 14px; border: 2px solid var(--blue); border-radius: 10px; outline: none; }
.sr-close { font: inherit; font-weight: 600; background: var(--blue-soft); color: var(--navy); border: none; border-radius: 10px; padding: 0 14px; cursor: pointer; }
.sr-results { overflow-y: auto; padding: 6px 8px 12px; }
.sr-item { display: block; padding: 11px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.sr-item:hover, .sr-item:focus { background: var(--blue-soft); outline: none; }
.sr-page { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--blue); }
.sr-head { display: block; font-weight: 700; margin: 2px 0; }
.sr-snip { display: block; font-size: .88rem; color: var(--muted); }
.sr-item mark { background: #fff1b8; color: inherit; border-radius: 2px; }
.sr-hint { color: var(--muted); padding: 14px 12px; margin: 0; }
[id^="s-"] { scroll-margin-top: 90px; }
.search-hit { animation: srflash 2.6s ease-out; }
@keyframes srflash { 0%, 35% { box-shadow: 0 0 0 4px #ffd84d; } 100% { box-shadow: 0 0 0 4px transparent; } }

/* ---------- Chat assistant (added 24 Sep 2026) ---------- */
.cb-root { position: fixed; right: 18px; bottom: 18px; z-index: 900; font-size: .95rem; }
.cb-launch { display: inline-flex; align-items: center; gap: 8px; background: var(--navy); color: #fff; border: none; border-radius: 999px; padding: 12px 18px; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 8px 24px rgba(13,28,54,.35); }
.cb-launch:hover { background: var(--blue); }
.cb-open .cb-launch { display: none; }
.cb-panel { width: min(380px, calc(100vw - 24px)); height: min(600px, calc(100vh - 36px)); background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(13,28,54,.35); display: flex; flex-direction: column; overflow: hidden; }
.cb-panel[hidden] { display: none; }
.cb-head { background: var(--navy); color: #fff; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; }
.cb-head small { display: block; color: #b9c6e0; font-size: .75rem; }
.cb-x { background: none; border: none; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.cb-note { margin: 0; padding: 8px 14px; font-size: .76rem; color: var(--muted); background: var(--blue-soft); }
.cb-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.cb-msg { max-width: 88%; padding: 9px 12px; border-radius: 14px; line-height: 1.45; }
.cb-msg p { margin: 0 0 6px; } .cb-msg p:last-child { margin: 0; }
.cb-msg ul { margin: 4px 0 6px; padding-left: 18px; }
.cb-bot { background: #f1f4f9; color: var(--ink); align-self: flex-start; border-bottom-left-radius: 4px; }
.cb-user { background: var(--blue); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.cb-bot a { color: var(--blue); font-weight: 600; }
.cb-dots i { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; background: var(--muted); animation: cbdot 1s infinite ease-in-out; }
.cb-dots i:nth-child(2) { animation-delay: .15s; } .cb-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes cbdot { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
.cb-starters { padding: 0 12px 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.cb-starters button { font: inherit; font-size: .8rem; background: #fff; color: var(--navy); border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; cursor: pointer; text-align: left; }
.cb-starters button:hover { border-color: var(--blue); }
.cb-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.cb-form textarea { flex: 1; font: inherit; resize: none; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; max-height: 110px; }
.cb-form textarea:focus { outline: 2px solid var(--blue); border-color: transparent; }
.cb-form button { font: inherit; font-weight: 700; background: var(--red); color: #fff; border: none; border-radius: 10px; padding: 0 14px; cursor: pointer; }
.cb-form button:disabled { opacity: .5; cursor: default; }
.cb-foot { margin: 0; padding: 0 12px 10px; font-size: .78rem; color: var(--muted); }
@media (max-width: 520px) { .cb-root { right: 10px; bottom: 10px; } .cb-launch span { display: none; } .cb-launch { padding: 14px; } }

/* Google-style search bar on the home page hero (added 24 Sep 2026) */
.hero-search { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; max-width: 640px; margin: 26px auto 0; background: #fff; border-radius: 999px; padding: 6px 6px 6px 18px; box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.hero-search svg { color: var(--muted); flex: 0 0 auto; }
.hero-search input { flex: 1; min-width: 0; border: none; outline: none; font: inherit; font-size: 1.05rem; color: var(--ink); background: transparent; padding: 10px 0; }
.hero-search input::-webkit-search-cancel-button { display: none; }
.hero-search button { font: inherit; font-weight: 700; background: var(--red); color: #fff; border: none; border-radius: 999px; padding: 11px 22px; cursor: pointer; }
.hero-search button:hover { background: #971d31; }
.hero-search-tips { position: relative; z-index: 2; margin: 12px auto 0; font-size: .88rem; color: #dbe4f3; }
.hero-search-tips a { color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 3px 10px; margin: 3px 2px; display: inline-block; }
.hero-search-tips a:hover { background: rgba(255,255,255,.15); }
@media (max-width: 520px) { .hero-search button { padding: 11px 14px; } .hero-search input { font-size: 1rem; } }
/* Chat bubble search results (added 24 Sep 2026) */
.cb-results { list-style: none; margin: 6px 0 4px; padding: 0; }
.cb-results li { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 6px 0; }
.cb-results a { color: var(--navy); font-weight: 700; text-decoration: none; }
.cb-results a:hover { color: var(--blue); text-decoration: underline; }
.cb-rpage { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--blue); margin-top: 2px; }
.cb-rsnip { display: block; font-size: .8rem; color: var(--muted); margin-top: 2px; }
.cb-results mark { background: #fff1b8; color: inherit; }
.cb-more { font-size: .82rem; }
/* Send us your question (added 24 Sep 2026) */
.sr-ask { display: block; margin: 8px 4px 2px; padding: 12px; border-radius: 10px; background: #fbe9ec; color: var(--ink); text-decoration: none; font-size: .92rem; }
.sr-ask b { color: var(--red); }
.sr-ask:hover { background: #f7dce1; }
.cb-ask { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.cb-ask p { font-size: .85rem; }
.cb-ask input { width: 100%; font: inherit; font-size: .85rem; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; margin: 4px 0 6px; }
.cb-ask-send { font: inherit; font-size: .85rem; font-weight: 700; background: var(--red); color: #fff; border: none; border-radius: 8px; padding: 7px 12px; cursor: pointer; }
.cb-ask-send:disabled { opacity: .6; }
.cb-sent { color: #1f6b3a; font-weight: 600; }
.ask-wrap { max-width: 640px; }
.ask-form label { display: block; margin: 14px 0 6px; }
.ask-form textarea, .ask-form input[type=email] { width: 100%; font: inherit; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.ask-form textarea:focus, .ask-form input[type=email]:focus { outline: 2px solid var(--blue); border-color: transparent; }
.ask-hint { color: var(--muted); font-size: .85rem; margin: 6px 0 0; }
.ask-send { margin-top: 18px; font: inherit; font-weight: 700; background: var(--red); color: #fff; border: none; border-radius: 10px; padding: 13px 24px; cursor: pointer; }
.ask-send:disabled { opacity: .6; }
.ask-thanks { background: #eef7f0; border: 1px solid #cfe8d6; border-radius: 14px; padding: 22px 24px; }
/* Home page search: dropdown under the bar (added 24 Sep 2026) */
.hs-drop { position: absolute; z-index: 950; background: #fff; border-radius: 14px; box-shadow: 0 18px 50px rgba(13,28,54,.35); max-height: min(420px, 60vh); overflow-y: auto; padding: 6px; text-align: left; }
.hs-drop[hidden] { display: none; }
.hs-item { display: block; padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.hs-item .sr-head { font-weight: 700; display: block; }
.hs-item .sr-page { display: block; margin-top: 1px; }
.hs-item:hover, .hs-item.hs-active { background: var(--blue-soft); }
.hs-item mark, .hs-drop mark { background: #fff1b8; color: inherit; border-radius: 2px; }
.hs-all { display: block; padding: 9px 12px; font-size: .9rem; font-weight: 600; color: var(--blue); text-decoration: none; border-top: 1px solid var(--line); margin-top: 4px; }
.hs-all:hover { text-decoration: underline; }
.hs-none { margin: 0; padding: 12px; color: var(--muted); }
.hs-drop .sr-ask { margin: 6px 0 0; }
/* Small search bar on the right of the page banner (Thinking of Moving, Just Arrived, Been Here a While) */
.intro-split { display: grid; grid-template-columns: 1fr minmax(260px, 330px); gap: 36px; align-items: center; }
.hero-search.mini { margin: 0; max-width: none; padding: 4px 4px 4px 14px; gap: 8px; box-shadow: 0 6px 18px rgba(20,40,75,.12); border: 1px solid var(--line); }
.hero-search.mini input { font-size: .95rem; padding: 8px 0; }
.hero-search.mini button { padding: 9px 16px; font-size: .9rem; }
@media (max-width: 820px) {
  .intro-split { grid-template-columns: 1fr; gap: 18px; }
}
/* Directory banner: "Advertise on this page" box (added 24 Sep 2026) */
.ad-card { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--red); border-radius: 14px; padding: 18px 20px; box-shadow: 0 8px 22px rgba(20,40,75,.10); }
.ad-eyebrow { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin-bottom: 4px; }
.ad-title { display: block; color: var(--navy); font-size: 1.02rem; line-height: 1.3; }
.ad-card p { color: var(--muted); font-size: .9rem; margin: 6px 0 12px; }
.ad-btn { display: inline-block; background: var(--navy); color: #fff; font-weight: 700; text-decoration: none; border-radius: 10px; padding: 10px 16px; font-size: .92rem; }
.ad-btn:hover { background: var(--blue); }
.ask-form input[type=text], .ask-form input[type=tel], .ask-form input[type=url], .ask-form select { width: 100%; font: inherit; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.ask-form input[type=text]:focus, .ask-form input[type=tel]:focus, .ask-form input[type=url]:focus, .ask-form select:focus { outline: 2px solid var(--blue); border-color: transparent; }
/* Home: full-width "New here?" box above the section cards (added 24 Sep 2026) */
.card.card-wide { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.card.card-wide .ico { margin: 0; flex: 0 0 auto; }
.card.card-wide .cw-text { flex: 1; }
.card.card-wide h3 { margin-top: 0; }
.card.card-wide p { margin-bottom: 0; }
.card.card-wide .go { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 640px) { .card.card-wide { flex-direction: column; align-items: flex-start; gap: 8px; } }
/* Search bar on photo banners: navy button and a softer glassy bar so it sits with the picture */
.page-photo .hero-search.mini { background: rgba(255,255,255,.93); border: 1px solid rgba(255,255,255,.6); box-shadow: 0 10px 30px rgba(8,18,38,.35); backdrop-filter: blur(4px); }
.page-photo .hero-search.mini button { background: var(--navy); }
.page-photo .hero-search.mini button:hover { background: var(--blue); }

/* Cookie choice banner (assets/analytics.js) */
#tbn-cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;max-width:760px;margin:0 auto;
  background:var(--navy-deep);color:#fff;border-radius:var(--radius);box-shadow:0 8px 30px rgba(0,0,0,.25);
  padding:16px 18px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:15px;line-height:1.45}
#tbn-cookies p{margin:0;flex:1 1 320px}
#tbn-cookies a{color:#cfe0ff;text-decoration:underline}
.tbn-cookie-btns{display:flex;gap:10px;flex:0 0 auto}
.tbn-cookie-btns button{font:inherit;font-weight:600;border-radius:999px;padding:9px 18px;cursor:pointer;border:1.5px solid #fff}
.tbn-no{background:transparent;color:#fff}
.tbn-yes{background:#fff;color:var(--navy-deep)}
.tbn-cookie-btns button:focus-visible{outline:3px solid #9cc0ff;outline-offset:2px}

/* =====================================================================
   REDESIGN TRIAL (preview only). Crisper, more editorial look:
   self-hosted Source Serif 4 headings + Inter body, warm paper, calmer
   cards, line icons, visible hero photography, "On this page" contents.
   ===================================================================== */
@font-face{font-family:"Inter";src:url("fonts/inter-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/source-serif-4-latin-wght-italic.woff2") format("woff2");font-weight:200 900;font-style:italic;font-display:swap}

:root{
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --navy:#132746; --navy-deep:#0b1a33; --ink:#1c2430; --muted:#5a6472;
  --paper:#faf8f4; --line:#e7e3da; --line-soft:#efece6;
  --blue:#1f4f99; --blue-soft:#eef2f8; --red:#b3243a;
  --shadow:0 1px 2px rgba(19,39,70,.05),0 4px 16px rgba(19,39,70,.05);
  --radius:12px; --wrap:1140px;
}
body{font-size:16.5px;line-height:1.7;background:var(--paper);font-feature-settings:"cv11","ss01"}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.012em;color:var(--navy)}
h1{font-size:clamp(2rem,3.4vw,2.8rem);line-height:1.12}
h2{font-size:clamp(1.45rem,2.2vw,1.85rem);line-height:1.2}
h3{font-size:1.2rem;line-height:1.3}
a{color:var(--blue);text-underline-offset:3px;text-decoration-thickness:1px}

/* header */
.site-header{background:var(--navy);box-shadow:0 1px 0 rgba(255,255,255,.05)}
.site-header .wrap{min-height:70px}
.brand{gap:12px}
.brand .flagdot{width:36px;height:36px;border-radius:50%;background-size:170% auto;
  box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(255,255,255,.18)}
.brand b{font-family:var(--serif);font-size:1.28rem;font-weight:600;letter-spacing:-.01em}
.brand .tag{font-size:.62rem;letter-spacing:.16em;color:#9fb1d0;margin-top:1px}
nav.main a{font-weight:500;color:#cfd9ea;border-radius:6px}
nav.main a.active{background:transparent;color:#fff;box-shadow:inset 0 -2px 0 #fff;border-radius:0;font-weight:600}
.dir-btn{border-radius:8px}

/* hero: photos visible, text left-aligned */
.hero{text-align:left;padding:88px 0 96px;min-height:520px;display:flex;align-items:center;background:var(--navy-deep)}
.hero .wrap{width:100%}
.hero-glow{display:none}
.hero-photos::after{background:
  linear-gradient(90deg,rgba(11,26,51,.92) 0%,rgba(11,26,51,.78) 38%,rgba(11,26,51,.25) 72%,rgba(11,26,51,.10) 100%),
  linear-gradient(0deg,rgba(11,26,51,.55) 0%,rgba(11,26,51,0) 40%)}
.hero .pill{background:none;border:0;padding:0;margin:0 0 18px;color:#f0b8c2;letter-spacing:.14em;font-size:.74rem}
.hero h1{margin:0 0 18px;max-width:15ch;font-size:clamp(2.3rem,4.6vw,3.7rem);line-height:1.06;font-weight:600;text-wrap:balance}
.hero h1 em{font-style:italic;font-weight:500;color:#fff}
.hero p.lead,.hero .lead{margin:0;max-width:48ch;font-size:1.15rem;color:#dbe3f0;line-height:1.6}
.hero-search{margin:30px 0 0;max-width:600px}
.hero-search-tips{margin:14px 0 0;text-align:left}

/* sections + cards */
main{padding:56px 0 40px}
.eyebrow{letter-spacing:.14em;font-size:.72rem;color:var(--red)}
.grid{gap:18px}
.card{border:1px solid var(--line);box-shadow:none;border-radius:var(--radius);padding:26px 24px 22px;background:#fff}
.card::before{display:none}
a.card:hover{transform:translateY(-3px);border-color:#d5cfc2;box-shadow:0 10px 30px rgba(19,39,70,.09)}
.card h3{font-size:1.25rem;margin:0 0 .4rem}
.card p{font-size:.95rem;line-height:1.6}
.card .go{font-weight:600;color:var(--navy);font-size:.88rem;margin-top:16px}
.icon-tile{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;
  background:#f1eee7;color:var(--navy);margin-bottom:16px;transition:background .2s ease,color .2s ease}
.icon-tile svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
a.card:hover .icon-tile{background:var(--navy);color:#fff}
.card-wide{border-left:3px solid var(--red)}
.card-wide .icon-tile{margin:0}
hr.soft{border-top-color:var(--line);margin:56px 0}

/* interior page intro: editorial, not pale blue */
.page-intro{background:#fff;border-bottom:1px solid var(--line);padding:52px 0 44px}
.page-intro h1{margin-bottom:.6rem}
.page-intro p{font-size:1.08rem;color:var(--muted);max-width:62ch;line-height:1.65}

/* Q&A: hairline-separated editorial blocks instead of boxed cards */
.qa{background:#fff;border:1px solid var(--line);box-shadow:none;border-radius:var(--radius);padding:28px 30px;margin:0 0 16px;scroll-margin-top:96px}
.qa h3{font-size:1.32rem;gap:12px;margin-bottom:.8rem}
.qa h3 .q{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--red)}
.qa ul.clean{padding-left:1.1rem}
.qa ul.clean li::marker{color:var(--red)}
.note{border-left-width:3px;border-radius:8px;background:var(--blue-soft)}
.note.warn{background:#fbf1ef}

/* source links: quiet list, not chunky pills */
.linkrow{gap:4px 22px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
.official{background:none;border:0;padding:2px 0;margin:0;font-size:.88rem;font-weight:600;color:var(--blue);border-radius:0}
.official:hover{background:none;color:var(--navy);text-decoration:underline}
.official::before{color:var(--red);font-size:.8rem}

/* chips & jump links calmer */
.jumpmenu a,.hero-search-tips a{border-radius:6px}
.jumpmenu a{background:#fff;border-color:var(--line)}
.chips span{background:transparent;border-color:var(--line)}

/* listings + buttons */
.listing{border-color:var(--line);box-shadow:none}
.listing .lname{font-family:var(--serif);font-size:1.2rem;font-weight:600}
.btn{border-radius:8px}
.btn-web{background:#fff;border-color:var(--line)}
.btn-web:hover{background:#f6f4ef}

/* footer */
.site-footer{background:var(--navy-deep);padding:56px 0 50px}
.site-footer h4{font-family:var(--serif);font-weight:600;font-size:1.15rem}

/* "On this page" contents for long Q&A pages (assets/toc.js) */
.has-toc{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:48px;align-items:start}
.toc{position:sticky;top:96px;font-size:.88rem;border-left:1px solid var(--line);padding:4px 0 4px 20px}
.toc h4{font-family:var(--font);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
.toc li{margin:0 0 10px;line-height:1.4}
.toc a{color:var(--ink);text-decoration:none;display:block;opacity:.8}
.toc a:hover,.toc a.on{color:var(--red);opacity:1}
@media (max-width:1099px){.has-toc{display:block}.toc{display:none}}

/* phones */
@media (max-width:820px){
  .hero{padding:56px 0 64px;min-height:0}
  .hero h1{font-size:2.2rem}
  .hero-photos::after{background:linear-gradient(180deg,rgba(11,26,51,.80),rgba(11,26,51,.72))}
  .qa{padding:22px 20px}
  .page-intro{padding:36px 0 30px}
}
@media (max-width:620px){
  .newsflash .nf-row{flex-wrap:nowrap;gap:10px;padding:8px 0}
  .newsflash .nf-head{flex:1 1 auto;min-width:0}
  .nf-tag,.nf-dots{display:none}
  .nf-title{font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:100%}
}
/* header fit: give the bar more room and tighten links on laptop widths */
.site-header .wrap{max-width:1300px}
@media (max-width:1340px) and (min-width:1101px){
  nav.main a{padding:8px 7px;font-size:.84rem}
  .brand b{font-size:1.14rem}
  .brand .tag{letter-spacing:.12em}
}
.hero h1{max-width:17ch}
:root{--wrap:1200px}
.site-header .wrap{max-width:var(--wrap)}
.hero h1{max-width:20ch}
@media (max-width:520px){
  .brand{gap:9px}
  .brand .flagdot{width:30px;height:30px}
  .brand b{font-size:1.05rem}
  .brand .tag{font-size:.56rem;letter-spacing:.1em}
  .header-right{gap:6px}
  .nav-toggle{padding:7px 9px;font-size:.92rem}
  .nf-chev{display:none}
  .newsflash .wrap{padding-left:16px;padding-right:16px}
}

/* British-owned star on Directory listings (founded, owned or run by Brits) */
.badge-brit{display:inline-flex;align-items:center;gap:5px;color:var(--navy);background:#fff;
  border:1px solid #e3c9ce;text-transform:none;letter-spacing:0;font-size:.74rem;font-weight:600;
  border-radius:999px;padding:2px 9px 2px 7px;margin-left:8px;vertical-align:middle;white-space:nowrap}
.badge-brit svg{width:12px;height:12px;fill:var(--red);flex:none}
.brit-key{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.9rem;color:var(--muted);margin:10px 0 4px}
.brit-key .badge-brit{margin-left:0}
.badge-brit{font-family:var(--font)}
.listing-actions{align-items:center}
.listing-actions .badge-brit{margin-left:auto;font-size:.78rem;padding:4px 11px 4px 9px}
.listing-actions .badge-brit svg{width:13px;height:13px}
.listing-actions .badge-brit.star-only{width:36px;height:36px;padding:0;justify-content:center;border-radius:50%;border-color:#ecd3d8;background:#fdf6f7}
.listing-actions .badge-brit.star-only svg{width:17px;height:17px}

/* British-owned key box + filter (assets/brit-filter.js) */
.brit-key-box{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);
  border-left:3px solid var(--red);border-radius:var(--radius);padding:16px 20px;margin:16px 0 8px;scroll-margin-top:90px}
.brit-key-star{width:40px;height:40px;border-radius:50%;background:#fdf6f7;border:1px solid #ecd3d8;display:inline-flex;align-items:center;justify-content:center;flex:none}
.brit-key-star svg{width:19px;height:19px;fill:var(--red)}
.brit-key-text{flex:1 1 320px;font-size:.93rem;color:var(--ink);line-height:1.55}
.brit-key-text b{font-family:var(--serif);font-size:1.02rem;color:var(--navy)}
.brit-filter{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;
  background:var(--navy);color:#fff;border:1px solid var(--navy);border-radius:8px;padding:9px 15px}
.brit-filter svg{width:15px;height:15px;fill:#ff8a9d}
.brit-filter:hover{background:var(--navy-deep)}
.brit-filter[aria-pressed="true"]{background:#fff;color:var(--navy);border-color:var(--line)}
.brit-filter[aria-pressed="true"] svg{fill:var(--red)}
.brit-filter:focus-visible,.listing .badge-brit:focus-visible{outline:3px solid #9cc0ff;outline-offset:2px}
.brit-status{margin:6px 0 0;font-size:.92rem;color:var(--muted)}
.brit-status button{font:inherit;font-weight:600;color:var(--blue);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.listing .badge-brit{cursor:pointer;transition:transform .15s ease,background .15s ease}
.listing .badge-brit:hover{transform:scale(1.08);background:#fbe9ec}
body.brit-only main .chips{display:none}

/* ---------- Directory: easier to scan (trial) ---------- */
.dir-bar{position:sticky;top:70px;z-index:20;background:var(--paper);margin:0 -22px;padding:10px 22px;border-bottom:1px solid var(--line)}
.dir-bar .jumpmenu{flex-wrap:nowrap;overflow-x:auto;margin:0;padding-bottom:2px;scrollbar-width:none}
.dir-bar .jumpmenu::-webkit-scrollbar{display:none}
.dir-bar .jumpmenu a{white-space:nowrap;background:#fff;display:inline-flex;align-items:center;gap:7px}
.jm-count{font-size:.72rem;font-weight:700;color:var(--muted);background:#f1eee7;border-radius:999px;padding:1px 7px}
.brit-key-box{padding:12px 16px;margin:18px 0 6px;gap:12px}
.brit-key-star{width:32px;height:32px}
.brit-key-text{font-size:.92rem}
.brit-key-text b{font-family:var(--font);font-size:.92rem}
.dir-disclaimer{font-size:.84rem;color:var(--muted);margin:6px 0 0}
main .chips{display:none}
.dir-section{margin:44px 0 8px}
.dir-section > h2{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sec-count{font-family:var(--font);font-size:.8rem;font-weight:600;color:var(--muted)}
.dir-section .sec-desc{font-size:1rem;margin-bottom:16px}
.subhead{font-family:var(--font);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:26px 0 10px}
p.subhead{font-size:.75rem}
.dir-grid{gap:16px}
.listing{padding:20px}
.listing .lname{font-size:1.15rem;margin-bottom:4px}
.listing .desc{font-size:.92rem;line-height:1.55;color:#3b4452;margin:4px 0 4px}
.listing .desc.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.desc-more{align-self:flex-start;font:inherit;font-size:.84rem;font-weight:600;color:var(--blue);background:none;border:0;padding:0;margin:0 0 10px;cursor:pointer}
.listing .loc{font-size:.84rem;margin:4px 0 8px}
.listing .loc.loc-place{padding-left:18px;position:relative}
.listing .loc.loc-place::before{content:"";position:absolute;left:0;top:3px;width:12px;height:12px;background:var(--muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") no-repeat center/contain}
.listing .loc.loc-place b{display:none}
.listing .listing-actions{margin-top:auto;padding-top:8px}
.empty-note{font-size:.9rem;padding:12px 16px}
@media (max-width:820px){.dir-bar{top:60px}}

/* ---------- Directory search + browse (trial) ---------- */
.dir-search{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;margin:22px 0 0;background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 6px 24px rgba(19,39,70,.07);max-width:720px}
.ds-field{display:flex;flex-direction:column;gap:5px;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ds-field input{font:inherit;font-size:1rem;letter-spacing:0;text-transform:none;font-weight:400;color:var(--ink);
  border:1px solid var(--line);border-radius:9px;padding:11px 12px;background:var(--paper)}
.ds-field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft);background:#fff}
.ds-go{font:inherit;font-weight:700;background:var(--red);color:#fff;border:0;border-radius:9px;padding:12px 22px;cursor:pointer;height:46px}
.ds-go:hover{background:#9a1e31}
.cat-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:8px 0 12px}
.cat-head h2{margin:0}
.cat-all{font:inherit;font-weight:600;font-size:.9rem;color:var(--blue);background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:0 0 18px}
.cat-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;font:inherit;color:var(--ink);text-decoration:none;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.cat-card:hover{border-color:#d5cfc2;box-shadow:0 8px 22px rgba(19,39,70,.08);transform:translateY(-2px)}
.cat-card .icon-tile{margin:0 0 8px;width:38px;height:38px}
.cat-card .icon-tile svg{width:19px;height:19px}
.cc-name{font-family:var(--serif);font-weight:600;font-size:1.08rem;color:var(--navy);line-height:1.25}
.cc-meta{font-size:.8rem;font-weight:600;color:var(--muted)}
.cc-subs{font-size:.8rem;color:var(--muted);line-height:1.4;margin-top:4px}
.cat-card.on{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.cat-card.on .icon-tile{background:var(--navy);color:#fff}
.cat-card.soon{opacity:.55;cursor:default}
.cat-card.soon:hover{transform:none;box-shadow:none;border-color:var(--line)}
.results-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--navy);color:#fff;
  border-radius:10px;padding:12px 16px;margin:14px 0 4px;scroll-margin-top:90px;font-size:.95rem}
.results-bar a{color:#fff}
.rb-clear{font:inherit;font-weight:600;font-size:.88rem;background:#fff;color:var(--navy);border:0;border-radius:7px;padding:7px 12px;cursor:pointer}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;
  font-family:var(--font);font-size:.78rem;font-weight:700;letter-spacing:.02em;margin-right:10px;vertical-align:middle;flex:none}
.listing .lname{display:flex;align-items:center}
@media (max-width:720px){.dir-search{grid-template-columns:1fr}.ds-go{width:100%}}
.brit-key-box.in-intro{max-width:720px;margin:14px 0 0;box-shadow:0 6px 24px rgba(19,39,70,.06)}
main .brit-key-box:first-child,main .wrap > .brit-key-box{margin:0 0 30px}

/* ---------- Faded "shadow" photos behind page headings (trial) ----------
   Photos: public domain (CC0) from StockSnap via Openverse, in assets/pages/.  */
.page-intro.page-shadow{position:relative;isolation:isolate;overflow:hidden}
.page-intro.page-shadow::before{content:"";position:absolute;top:0;right:0;bottom:0;width:62%;z-index:-1;
  background-size:cover;background-position:center;opacity:.42;filter:saturate(.75);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%);mask-image:linear-gradient(90deg,transparent 0%,#000 55%)}
.page-intro.shadow-thinking::before{background-image:url("pages/thinking.jpg");background-position:center 55%}
.page-intro.shadow-arriving::before{background-image:url("pages/arriving.jpg");background-position:center 30%}
.page-intro.shadow-settled::before{background-image:url("pages/settled.jpg");background-position:center 50%}
@media (max-width:820px){
  .page-intro.page-shadow::before{width:100%;opacity:.16;-webkit-mask-image:none;mask-image:none}
}
.page-intro.shadow-arriving::before{opacity:.36}

/* Faded photo behind the whole page body on the three journey pages (trial).
   Fixed to the window, so it stays put while the white question cards scroll over it. */
main.page-bg{position:relative;isolation:isolate}
main.page-bg::before{content:"";position:fixed;inset:0;z-index:-1;background-size:cover;background-position:center;
  opacity:.16;filter:saturate(.7);pointer-events:none}
main.bg-thinking::before{background-image:url("pages/thinking.jpg")}
main.bg-arriving::before{background-image:url("pages/arriving.jpg");opacity:.13}
main.bg-settled::before{background-image:url("pages/settled.jpg")}
main.page-bg .toc{background:rgba(250,248,244,.86);border-radius:10px;padding:12px 14px 12px 20px}
main.page-bg > .wrap > h2, main.page-bg .has-toc > div > h2{display:inline-block;background:rgba(250,248,244,.8);border-radius:8px;padding:2px 10px;margin-left:-10px}
/* no dividing line (or white band) under the heading when the page has a full-page photo */
.page-intro:has(+ main.page-bg){border-bottom:0;background:transparent}
/* Community: hands joined on a tree trunk (photo: Shane Rounce, Unsplash), soft and light like the journey pages */
main.bg-community::before{background-image:url("pages/community-hands.jpg");background-position:center 55%;opacity:.16}

/* ---------- Homepage ticker (assets/ticker.js) ---------- */
.hero{padding-bottom:120px}
.ticker{position:absolute;left:0;right:0;bottom:0;z-index:4;overflow:hidden;background:rgba(11,26,51,.78);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-top:1px solid rgba(255,255,255,.14);font-size:.9rem}
.tk-track{display:flex;width:max-content;animation:tk-scroll var(--tk-dur,60s) linear infinite}
.ticker:hover .tk-track{animation-play-state:paused}
.tk-run{display:flex;align-items:center;flex:none;padding:11px 0}
.tk-item{display:inline-flex;align-items:baseline;gap:6px;color:#dbe3f0;text-decoration:none;white-space:nowrap;padding:0 4px}
a.tk-item:hover .tk-value{text-decoration:underline;text-underline-offset:3px}
.tk-label{color:#aebbd3}
.tk-value{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.tk-note{color:#8fa0c0;font-size:.8rem}
.tk-sep{color:#e05a70;font-size:.7rem;padding:0 18px}
@keyframes tk-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tk-track{animation:none}.ticker{overflow-x:auto}}
@media (max-width:620px){.ticker{font-size:.82rem}.hero{padding-bottom:96px}}

/* ---------- What's on: List / Calendar toggle (assets/whatson-calendar.js) ---------- */
.wo-toggle{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:10px;padding:3px;margin:4px 0 14px;gap:3px}
.wo-toggle button{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:.9rem;font-weight:600;color:var(--muted);
  background:none;border:0;border-radius:7px;padding:8px 14px;cursor:pointer}
.wo-toggle button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wo-toggle button[aria-pressed="true"]{background:var(--navy);color:#fff}
.wo-toggle button:focus-visible{outline:3px solid #9cc0ff;outline-offset:2px}
.wo-cal{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:0 0 18px}
.wo-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
.wo-head h3{margin:0;font-size:1.3rem}
.wo-nav{font:inherit;font-size:1.5rem;line-height:1;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer}
.wo-nav:disabled{opacity:.3;cursor:default}
.wo-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.wo-dow{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center;padding:4px 0}
.wo-day{min-height:96px;border:1px solid var(--line-soft);border-radius:8px;padding:5px;background:var(--paper);display:flex;flex-direction:column;gap:3px;overflow:hidden}
.wo-blank{background:transparent;border-color:transparent}
.wo-day.past{opacity:.55}
.wo-day.has{background:#fff;border-color:var(--line);cursor:pointer}
.wo-day.today{box-shadow:inset 0 0 0 2px var(--red)}
.wo-day.sel{box-shadow:inset 0 0 0 2px var(--navy)}
.wo-num{font-size:.8rem;font-weight:700;color:var(--navy)}
.wo-chip{display:block;font-size:.72rem;line-height:1.25;color:var(--ink);text-decoration:none;background:var(--blue-soft);border-left:3px solid var(--red);
  border-radius:4px;padding:3px 5px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wo-chip:hover{background:#dde7f6}
.wo-city{font-weight:700;color:var(--navy)}
.wo-until{color:var(--muted);font-style:italic}
.wo-more{font-size:.72rem;font-weight:600;color:var(--blue)}
.wo-dots{display:none}
.wo-panel{margin-top:14px}
.wo-panel:empty{display:none}
.wo-panel h4{font-family:var(--serif);font-size:1.1rem;color:var(--navy);margin:0 0 8px}
@media (max-width:760px){
  .wo-cal{padding:10px}
  .wo-day{min-height:52px;align-items:center}
  .wo-chip,.wo-more{display:none}
  .wo-dots{display:flex;gap:3px;margin-top:auto}
  .wo-dots i{width:6px;height:6px;border-radius:50%;background:var(--red)}
}
/* keep the header name white on hover (the general a:hover rule turned it navy on the navy bar) */
.site-header .brand:hover,.site-header .brand:focus{color:#fff;opacity:.85}
.site-footer a:hover{color:#fff}
a.tk-item:hover{color:#dbe3f0}
.guide-box .guide-dl{display:inline-flex;align-items:center;text-decoration:none;margin-top:6px}
.guide-box .guide-dl:hover{color:#fff}
.nf-search{margin:0 0 30px;max-width:640px;background:#fff;border:1px solid var(--line)}
/* Shopping and Money: soft full-page public-domain photos (StockSnap CC0), replacing the old banners */
main.bg-shopping::before{background-image:url("pages/shopping-market.jpg")}
main.bg-money::before{background-image:url("pages/money-coins.jpg")}
.mb-link{margin-top:12px !important;font-weight:600}


/* Paid "Featured Listing" in the Directory: spans the row, logo on the left, clearly labelled Sponsored.
   Use: <div class="listing featured"> ... see _MOCKUP-featured-listing.html. Sponsored listings go first in
   their category, and the category note must then say "Sponsored listings first, then alphabetical". */
.listing.featured{grid-column:1/-1;display:grid;grid-template-columns:104px 1fr;gap:6px 20px;align-items:start;
  background:#fff;border:1.5px solid var(--navy);border-top-width:4px;position:relative;padding-top:22px}
.listing.featured .flogo{width:104px;height:104px;border-radius:14px;border:1px solid var(--line);
  background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.listing.featured .flogo img{max-width:88%;max-height:88%;object-fit:contain}
.listing.featured .lname{font-size:1.32rem}
.listing.featured .desc{font-size:.97rem;max-width:68ch}
.listing.featured .loc{margin-bottom:12px}
.badge-sponsored{position:absolute;top:-1px;right:18px;transform:translateY(-50%);background:var(--navy);color:#fff;
  font-family:var(--font);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;padding:4px 12px}
.listing.featured .fbody{display:flex;flex-direction:column;min-width:0}
.listing.featured .listing-actions{margin-top:2px}
@media(max-width:620px){.listing.featured{grid-template-columns:1fr}.listing.featured .flogo{width:84px;height:84px}}