:root{
    --paper:#f6f3ec;
    --paper-2:#fdfbf6;
    --ink:#1c1b18;
    --ink-soft:#4a4843;
    --line:#ddd6c8;
    --line-soft:#e8e2d6;
    --navy:#0f2f3d;
    --navy-2:#143f51;
    --post-red:#c8362a;     /* Royal-Mail-inspired accent, used sparingly */
    --gold:#b07d2b;
    --shadow:0 1px 2px rgba(28,27,24,.06), 0 8px 24px -12px rgba(28,27,24,.18);
    --radius:14px;
    --maxw:1180px;
    --serif:"Newsreader", Georgia, "Times New Roman", serif;
    --sans:"Hanken Grotesk", system-ui, sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth; scroll-padding-top:84px}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--sans); font-size:17px; line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  a{color:var(--navy-2); text-underline-offset:3px; text-decoration-thickness:1px}
  a:hover{color:var(--post-red)}
  img{max-width:100%; display:block}

  /* ---------- top bar ---------- */
  .topbar{
    position:sticky; top:0; z-index:50;
    background:var(--navy); color:#f3efe6;
    border-bottom:3px solid var(--post-red);
  }
  .topbar .wrap{max-width:var(--maxw); margin:0 auto; padding:11px 20px;
    display:flex; align-items:center; gap:18px}
  .brand{display:flex; align-items:center; gap:10px; font-weight:800;
    letter-spacing:.2px; font-size:1.05rem; color:#fff; text-decoration:none}
  .brand .pin{width:26px; height:26px; flex:none}
  .search{margin-left:auto; flex:1; max-width:420px; position:relative}
  .search input{
    width:100%; padding:9px 14px 9px 38px; border-radius:999px; border:0;
    font-family:var(--sans); font-size:.95rem; background:#fbf8f1; color:var(--ink);
  }
  .search svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.5}
  .topnav{display:flex; gap:18px; font-size:.92rem}
  .topnav a{color:#cfe0e6; text-decoration:none; font-weight:600}
  .topnav a:hover{color:#fff}
  @media(max-width:820px){.topnav{display:none} .search{max-width:none}}

  /* ---------- breadcrumb ---------- */
  .crumbs{max-width:var(--maxw); margin:0 auto; padding:14px 20px 4px;
    font-size:.85rem; color:var(--ink-soft)}
  .crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0}
  .crumbs li::after{content:"›"; margin-left:6px; color:var(--line)}
  .crumbs li:last-child::after{content:""}
  .crumbs a{text-decoration:none; color:var(--ink-soft)}
  .crumbs a:hover{color:var(--post-red)}
  .crumbs [aria-current]{color:var(--ink); font-weight:700}

  /* ---------- page head ---------- */
  .pagehead{max-width:var(--maxw); margin:0 auto; padding:6px 20px 0}
  .eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:.78rem;
    text-transform:uppercase; letter-spacing:.14em; font-weight:700; color:var(--post-red)}
  .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--post-red)}
  h1{font-family:var(--serif); font-weight:600; font-size:clamp(2.3rem,6vw,3.6rem);
    line-height:1.02; margin:.25em 0 .15em; letter-spacing:-.01em}
  h1 .code{font-variant:normal}
  .lede{font-family:var(--serif); font-size:clamp(1.05rem,2.4vw,1.35rem);
    color:var(--ink-soft); max-width:62ch; margin:0 0 4px}
  .head-rule{max-width:var(--maxw); margin:18px auto 0; padding:0 20px}
  .head-rule hr{border:0; border-top:1px solid var(--line)}

  /* ---------- layout ---------- */
  .layout{max-width:var(--maxw); margin:0 auto; padding:26px 20px 70px;
    display:grid; grid-template-columns:230px minmax(0,1fr) 320px; gap:36px; align-items:start}
  @media(max-width:1080px){.layout{grid-template-columns:minmax(0,1fr) 300px}
    .toc{display:none}}
  @media(max-width:840px){.layout{grid-template-columns:1fr; gap:24px}}

  /* table of contents */
  .toc{position:sticky; top:96px; font-size:.9rem}
  .toc h2{font-family:var(--sans); font-size:.72rem; text-transform:uppercase;
    letter-spacing:.14em; color:var(--ink-soft); margin:0 0 10px}
  .toc ol{list-style:none; margin:0; padding:0; border-left:2px solid var(--line)}
  .toc li a{display:block; padding:5px 0 5px 14px; margin-left:-2px;
    border-left:2px solid transparent; color:var(--ink-soft); text-decoration:none; line-height:1.3}
  .toc li a:hover{color:var(--ink)}
  .toc li a.active{color:var(--navy); border-left-color:var(--post-red); font-weight:700}

  /* main column */
  main{min-width:0}
  section.block{scroll-margin-top:90px; margin:0 0 40px}
  section.block > h2{
    font-family:var(--serif); font-weight:600; font-size:1.7rem; line-height:1.1;
    margin:0 0 4px; padding-bottom:8px; border-bottom:1px solid var(--line);
    display:flex; align-items:center; gap:11px;
  }
  section.block > h2 .ic{width:24px;height:24px;flex:none;color:var(--navy-2)}
  .sec-sub{color:var(--ink-soft); margin:.5em 0 1.1em; font-size:.97rem}
  p{margin:0 0 1em}
  h3{font-family:var(--serif); font-weight:600; font-size:1.18rem; margin:1.4em 0 .4em}

  /* map */
  .mapwrap{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
    box-shadow:var(--shadow); background:#fff}
  .mapwrap iframe{width:100%; height:380px; border:0; display:block}
  .map-meta{display:flex; flex-wrap:wrap; gap:8px 18px; padding:12px 16px;
    background:var(--paper-2); border-top:1px solid var(--line-soft); font-size:.86rem; color:var(--ink-soft)}
  .map-meta b{color:var(--ink)}
  .map-meta a{font-weight:600; text-decoration:none}

  /* infobox */
  aside.infobox{position:sticky; top:96px; background:var(--paper-2);
    border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
  .infobox .ib-head{background:var(--navy); color:#fff; padding:16px 18px}
  .infobox .ib-head .code{font-family:var(--serif); font-size:1.9rem; font-weight:600; letter-spacing:.02em}
  .infobox .ib-head .sub{font-size:.84rem; opacity:.85; margin-top:2px}
  .infobox .ib-photo{aspect-ratio:4/3; background:
     linear-gradient(165deg,#23586d 0%,#163b4d 45%,#0c2733 100%); position:relative; overflow:hidden}
  .infobox .ib-photo .shardline{position:absolute; inset:0; width:100%; height:100%}
  .infobox .ib-photo .cap{position:absolute; left:0; right:0; bottom:0; padding:8px 12px;
    font-size:.74rem; color:#dfeaee; background:linear-gradient(transparent,rgba(0,0,0,.55))}
  dl.facts{margin:0; padding:6px 4px}
  dl.facts > div{display:grid; grid-template-columns:42% 58%; gap:8px;
    padding:8px 14px; border-top:1px solid var(--line-soft)}
  dl.facts > div:first-child{border-top:0}
  dl.facts dt{font-size:.8rem; text-transform:uppercase; letter-spacing:.04em;
    color:var(--ink-soft); font-weight:700; margin:0}
  dl.facts dd{margin:0; font-size:.92rem; font-weight:500}
  .pill{display:inline-block; font-size:.72rem; font-weight:700; padding:2px 9px;
    border-radius:999px; background:#e6f0e6; color:#2f6b3a}

  /* amenity card grids */
  .cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:14px}
  .card{background:var(--paper-2); border:1px solid var(--line); border-radius:12px;
    padding:15px 16px; transition:transform .15s ease, box-shadow .15s ease}
  .card:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
  .card .ct{font-family:var(--serif); font-weight:600; font-size:1.06rem; margin:0 0 2px; line-height:1.2}
  .card .cmeta{font-size:.78rem; color:var(--post-red); font-weight:700;
    text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px}
  .card p{font-size:.88rem; color:var(--ink-soft); margin:0}
  .card .dist{display:inline-block; margin-top:9px; font-size:.78rem; font-weight:700;
    color:var(--navy-2); background:#e7efe9; padding:2px 8px; border-radius:6px}

  /* transport list rows */
  .rows{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--paper-2)}
  .row{display:flex; align-items:center; gap:14px; padding:13px 16px; border-top:1px solid var(--line-soft)}
  .row:first-child{border-top:0}
  .badge{flex:none; width:46px; height:46px; border-radius:10px; display:grid; place-items:center;
    font-weight:800; font-size:.8rem; color:#fff; text-align:center; line-height:1}
  .b-tube{background:var(--post-red)} .b-rail{background:#1f6f5c} .b-bus{background:#c8362a}
  .b-cycle{background:#0f2f3d} .b-pier{background:#1c6e8c}
  .row .rt{font-weight:700; margin:0}
  .row .rs{font-size:.85rem; color:var(--ink-soft); margin:0}
  .row .rdist{margin-left:auto; font-size:.82rem; color:var(--ink-soft); white-space:nowrap}
  .routes{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
  .routes span{font-size:.74rem; font-weight:700; background:#eee7d8; color:#5a4a22;
    padding:2px 7px; border-radius:5px}

  /* key facts strip under overview */
  .stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin:6px 0 4px}
  .stat{background:var(--paper-2); border:1px solid var(--line); border-radius:12px; padding:14px 16px}
  .stat .n{font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--navy)}
  .stat .l{font-size:.78rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; font-weight:700}

  /* horizontal bars (crime / review breakdown) */
  .bars{display:grid; gap:9px; margin:4px 0 4px}
  .bar,.rb{display:grid; grid-template-columns:160px 1fr 44px; align-items:center; gap:12px; font-size:.86rem}
  .rb{grid-template-columns:130px 1fr}
  .bar .bl,.rb span:first-child{color:var(--ink-soft); font-weight:600}
  .bt{height:10px; background:var(--line-soft); border-radius:99px; overflow:hidden}
  .bt i{display:block; height:100%; background:linear-gradient(90deg,var(--navy-2),var(--post-red)); border-radius:99px}
  .bar .bv{font-size:.74rem; font-weight:700; color:var(--ink-soft); text-align:right}

  /* rating box */
  .ratingbox{display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center;
    background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
    padding:20px 24px; box-shadow:var(--shadow); margin-bottom:6px}
  .rscore{text-align:center; padding-right:24px; border-right:1px solid var(--line)}
  .rnum{font-family:var(--serif); font-size:3rem; font-weight:600; line-height:1; color:var(--navy)}
  .rstars{color:var(--gold); letter-spacing:2px; font-size:1.1rem; margin:4px 0}
  .rcount{font-size:.78rem; color:var(--ink-soft)}
  .rbreak{display:grid; gap:8px}
  code{background:#eee7d8; color:#5a4a22; padding:1px 6px; border-radius:5px; font-size:.85em}
  @media(max-width:560px){
    .bar,.rb{grid-template-columns:110px 1fr 40px}
    .rb{grid-template-columns:100px 1fr}
    .ratingbox{grid-template-columns:1fr; gap:16px}
    .rscore{border-right:0; border-bottom:1px solid var(--line); padding:0 0 14px}
  }

  /* FAQ */
  .faq details{border:1px solid var(--line); border-radius:12px; background:var(--paper-2);
    padding:0 18px; margin-bottom:10px}
  .faq summary{cursor:pointer; list-style:none; padding:15px 0; font-weight:700;
    font-family:var(--serif); font-size:1.08rem; display:flex; justify-content:space-between; align-items:center; gap:12px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary .chev{transition:transform .2s; flex:none}
  .faq details[open] summary .chev{transform:rotate(180deg)}
  .faq details > p{padding:0 0 16px; margin:0; color:var(--ink-soft)}

  /* nearby */
  .nearby{display:flex; flex-wrap:wrap; gap:9px}
  .nearby a{font-family:var(--serif); font-weight:600; background:var(--paper-2);
    border:1px solid var(--line); border-radius:999px; padding:7px 16px; text-decoration:none; color:var(--navy)}
  .nearby a:hover{border-color:var(--post-red); color:var(--post-red)}

  .callout{background:#fbf6ec; border:1px solid var(--line); border-left:4px solid var(--gold);
    border-radius:10px; padding:14px 18px; font-size:.92rem; color:var(--ink-soft)}
  .callout b{color:var(--ink)}

  footer{background:var(--navy); color:#cfe0e6; margin-top:30px}
  footer .wrap{max-width:var(--maxw); margin:0 auto; padding:34px 20px;
    display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:26px}
  footer h4{color:#fff; font-family:var(--serif); font-weight:600; margin:0 0 10px; font-size:1.05rem}
  footer a{color:#cfe0e6; text-decoration:none; display:block; padding:3px 0; font-size:.9rem}
  footer a:hover{color:#fff}
  footer .legal{grid-column:1/-1; border-top:1px solid rgba(255,255,255,.12);
    padding-top:16px; font-size:.8rem; opacity:.75}
  @media(max-width:680px){footer .wrap{grid-template-columns:1fr 1fr}}

  .totop{position:fixed; right:18px; bottom:18px; z-index:40; width:46px; height:46px;
    border-radius:50%; background:var(--navy); color:#fff; border:0; cursor:pointer;
    display:grid; place-items:center; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .25s}
  .totop.show{opacity:1; pointer-events:auto}

  .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ============ HOME PAGE ============ */
.hero{position:relative; overflow:hidden; background:
  radial-gradient(1200px 400px at 80% -10%, rgba(200,54,42,.18), transparent 60%),
  linear-gradient(160deg,#0f2f3d,#143f51 60%,#0c2733)}
.hero .wrap{max-width:var(--maxw); margin:0 auto; padding:54px 20px 60px;
  display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
.hero h1{color:#fff; margin:.1em 0 .25em}
.hero .lede{color:#cfe0e6}
.hero .bigsearch{margin-top:22px; position:relative; max-width:520px}
.hero .bigsearch input{width:100%; padding:16px 18px 16px 50px; border-radius:14px; border:0;
  font-family:var(--sans); font-size:1.05rem; background:#fbf8f1; color:var(--ink); box-shadow:var(--shadow)}
.hero .bigsearch svg{position:absolute; left:18px; top:50%; transform:translateY(-50%); opacity:.5}
.hero .quickstats{display:flex; gap:26px; margin-top:24px; color:#cfe0e6; flex-wrap:wrap}
.hero .quickstats b{display:block; font-family:var(--serif); font-size:1.7rem; color:#fff}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr; gap:26px}}

/* clickable region map (stylised tile cartogram of UK) */
.ukmap{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; width:100%;
  max-width:340px; margin-left:auto; box-sizing:border-box}
.ukmap a{aspect-ratio:1; min-width:0; box-sizing:border-box; border-radius:10px;
  display:grid; place-items:center; text-align:center;
  font-size:.56rem; font-weight:800; text-transform:uppercase; letter-spacing:.02em;
  text-decoration:none; color:#eaf2f4; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18); padding:4px; line-height:1.15;
  overflow:hidden; overflow-wrap:anywhere; hyphens:auto; transition:.15s}
.ukmap a:hover{background:var(--post-red); color:#fff; transform:translateY(-2px)}
.ukmap a.spacer{visibility:hidden; pointer-events:none}
.ukmap a[data-nation="SCT"]{background:rgba(80,140,170,.28)}
.ukmap a[data-nation="NIR"]{background:rgba(120,160,110,.28)}
.ukmap a[data-nation="WLS"]{background:rgba(170,120,90,.28)}
.maplegend{display:flex; gap:14px; justify-content:flex-end; margin-top:12px; font-size:.74rem; color:#cfe0e6}
.maplegend span{display:inline-flex; align-items:center; gap:5px}
.maplegend i{width:11px;height:11px;border-radius:3px;display:inline-block}
@media(max-width:860px){.ukmap{margin:0 auto}}

/* browse hierarchy grids */
.browsegrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px}
.browsegrid a{display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:11px; padding:13px 16px;
  text-decoration:none; color:var(--navy); font-weight:600; transition:.15s}
.browsegrid a:hover{border-color:var(--post-red); transform:translateY(-2px); box-shadow:var(--shadow)}
.browsegrid a .count{font-size:.76rem; font-weight:700; color:var(--ink-soft);
  background:#e7efe9; padding:2px 8px; border-radius:6px}
.section-pad{max-width:var(--maxw); margin:0 auto; padding:40px 20px}
.section-pad h2{font-family:var(--serif); font-weight:600; font-size:1.8rem; margin:0 0 4px}
.section-pad .sub{color:var(--ink-soft); margin:0 0 20px}
.alpha-index{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px}
.alpha-index a{width:38px;height:38px;display:grid;place-items:center;border-radius:9px;
  background:var(--paper-2); border:1px solid var(--line); text-decoration:none; font-weight:700; color:var(--navy)}
.alpha-index a:hover{background:var(--post-red); color:#fff}

/* ============ STATIC PAGES & CONTACT FORM ============ */
.prose{max-width:70ch}
.prose h3{font-family:var(--serif); font-weight:600; font-size:1.18rem; margin:1.4em 0 .4em; color:var(--navy)}
.prose p{margin:0 0 1em; line-height:1.7}
.prose ul{margin:0 0 1em; padding-left:1.2em} .prose li{margin:.25em 0; line-height:1.6}
.prose a{color:var(--post-red)}
.contactform label{font-weight:700; font-size:.92rem; color:var(--navy)}
.contactform input, .contactform textarea{width:100%; padding:11px 13px; border:1px solid var(--line);
  border-radius:10px; font:inherit; background:var(--paper-2); box-sizing:border-box; margin-top:5px}
.contactform textarea{min-height:150px; resize:vertical}
.contactform p{margin:0 0 14px}
.btn-submit{background:var(--post-red); color:#fff; border:0; border-radius:10px; padding:12px 22px;
  font:inherit; font-weight:800; cursor:pointer}
.btn-submit:hover{background:#b02f24}