/* ============================================================
   PrimeStart — Location pages (/locations/{place}/)

   Loaded after page-industry.css, which supplies the shared module
   styles (plans, facts, steps, journey lists, the radial). This file
   holds the composition unique to the location system:

     1. hero compositions  city · county · area · editorial · sum · radial · banner · london
     2. intro modes        side · prose · strip · photo
     3. products modes     cards · ledger · stack
     4. searches modes     split · flip · row
     5. faq modes          centre · two · side
     6. nearby modes       cards · list · strip, and the London areas
     7. responsive         1200 / 1040 / 820 / 640 / 390
     8. phone composition  ≤640px: the distilled page (nothing here
                           reaches 641px and above)
   ============================================================ */

/* ============================================================
   1. HEROES
   ============================================================ */

/* ---------- shared ---------- */
.loc-hero{padding:64px 0 96px;overflow:clip;position:relative}
.loc-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.loc-hero-copy h1{max-width:15ch;margin-bottom:22px;font-size:clamp(36px,3.7vw,50px)}
.loc-hero .loc-lead{max-width:50ch;margin-bottom:30px}
.loc-lead-m{display:none}
.loc-hero .hero-ctas{margin-bottom:0}
.loc-facts{margin-top:34px;grid-template-columns:1fr 1fr}
.loc-facts div:nth-child(2){border-right:0}
.loc-facts div:nth-child(1),.loc-facts div:nth-child(2){border-bottom:1px solid var(--line)}
.loc-facts div:last-child{border-right:0}
.loc-hero-visual{position:relative}
.loc-hero-fig{margin:0;position:relative;padding-bottom:36px}
.loc-hero-img{
  width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center;
  border-radius:18px;display:block;
  box-shadow:0 34px 70px -38px rgba(18,33,47,.55);
}
/* No photograph yet: a quiet map-like panel with the local search resting on it,
   so the page still reads as "a search happening here" rather than a gap. */
.loc-hero-none{
  display:block;width:100%;aspect-ratio:4/3;border-radius:18px;border:1px solid var(--line);
  background-color:#F3EEE4;
  background-image:
    radial-gradient(60% 50% at 30% 30%,rgba(255,255,255,.75),transparent 70%),
    linear-gradient(0deg,rgba(255,255,255,.7) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.7) 1px,transparent 1px),
    linear-gradient(24deg,transparent 47%,rgba(255,255,255,.9) 47%,rgba(255,255,255,.9) 49.5%,transparent 49.5%),
    linear-gradient(116deg,transparent 60%,rgba(255,255,255,.9) 60%,rgba(255,255,255,.9) 62.5%,transparent 62.5%);
  background-size:100% 100%,56px 56px,56px 56px,100% 100%,100% 100%;
}
.loc-hero-nophoto .loc-hero-fig{padding-bottom:0}
.loc-hero-cap{
  position:absolute;left:0;bottom:0;margin:0;font-size:13px;color:var(--muted);letter-spacing:0;line-height:1.5;
  padding-left:14px;border-left:2px solid var(--amber);
}

/* the search card resting on the photograph's lower edge */
.loc-search{
  position:absolute;left:-30px;bottom:60px;width:min(64%,360px);z-index:3;
  border-radius:16px;padding-bottom:12px;
  box-shadow:0 1px 2px rgba(18,33,47,.06),0 30px 60px -30px rgba(18,33,47,.55);
}
.loc-search .gsr-head{padding:14px 14px 0}
.loc-search .gsr-field{height:42px}
.loc-search .gsr-q{font-size:15px}
.loc-search .gsr-sugg{left:14px;right:14px;top:56px}
.loc-search-note{
  margin:10px 16px 0;font-family:var(--fh);font-size:11.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
/* the same card in normal flow (radial, and any hero without a photograph) */
.loc-search.loc-search-flow{position:static;width:100%;max-width:420px;transform:none;margin-top:22px}

/* the facts as one hairline strip (editorial, london) */
.loc-facts-strip{
  display:grid;grid-template-columns:repeat(4,1fr);margin-top:34px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.loc-facts-strip div{padding:18px 22px 18px 0;border-left:1px solid var(--line);padding-left:22px}
.loc-facts-strip div:first-child{border-left:0;padding-left:0}
.loc-facts-strip strong{display:block;font-family:var(--fh);font-size:20px;font-weight:800;letter-spacing:-0.035em;line-height:1.1}
.loc-facts-strip span{display:block;font-size:13.5px;color:var(--muted);margin-top:4px;line-height:1.4}

/* the facts as a vertical hairline list (radial) */
.loc-facts-list{list-style:none;margin:34px 0 0;padding:0;max-width:440px;border-top:1px solid var(--line)}
.loc-facts-list li{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.loc-facts-list strong{font-family:var(--fh);font-size:17px;font-weight:800;letter-spacing:-0.03em}
.loc-facts-list span{font-size:14.5px;color:var(--muted)}

/* ---------- county: copy above, photograph below, towns beneath ---------- */
.loc-hero-county .loc-hero-grid{grid-template-columns:1fr;gap:44px}
.loc-hero-county .loc-hero-copy{display:grid;grid-template-columns:1.1fr .9fr;gap:0 56px;align-items:end}
.loc-hero-county .loc-hero-copy .eyebrow{grid-column:1/-1}
.loc-hero-county .loc-hero-copy h1{grid-column:1;grid-row:2/4;max-width:16ch}
.loc-hero-county .loc-hero-copy .loc-lead{grid-column:2;grid-row:2;margin-bottom:22px}
.loc-hero-county .loc-hero-copy .hero-ctas{grid-column:2;grid-row:3}
.loc-hero-county .loc-hero-copy .ind-facts{grid-column:1/-1;grid-template-columns:repeat(4,1fr)}
.loc-hero-county .loc-facts div:nth-child(1),.loc-hero-county .loc-facts div:nth-child(2){border-bottom:0}
.loc-hero-county .loc-facts div:nth-child(2){border-right:1px solid var(--line)}
.loc-hero-county .loc-hero-img,.loc-hero-county .loc-hero-none{aspect-ratio:21/9}
.loc-hero-county .loc-search{left:32px;bottom:68px;width:min(40%,380px)}
.loc-towns{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.loc-towns span{
  font-family:var(--fh);font-size:13.5px;font-weight:600;letter-spacing:-0.012em;color:var(--ink-2);
  background:var(--white);border:1px solid var(--line);border-radius:100px;padding:7px 13px;
}
.loc-towns .loc-towns-lbl{background:transparent;border:0;padding-left:0;color:var(--orange);font-weight:700}

/* ---------- area: photograph left, copy right ---------- */
.loc-hero-area .loc-hero-grid{grid-template-columns:.96fr 1.04fr}
.loc-hero-area .loc-hero-visual{order:-1}
.loc-hero-area .loc-search{left:auto;right:-26px}

/* no photograph: the search card sits centred on the map panel, whatever the family */
.loc-hero.loc-hero-nophoto .loc-hero-fig .loc-search{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);width:min(78%,380px)}
.loc-hero-county.loc-hero-nophoto .loc-hero-none{aspect-ratio:21/8}
/* long headlines step down a size so the hero stays balanced */
.loc-hero-copy h1.h1-long{font-size:clamp(32px,3.1vw,42px);max-width:18ch}

/* controlled right-edge bleed on wide screens (city only) */
@media (min-width:1320px){
  .loc-hero-city .loc-hero-visual{margin-right:calc((100vw - var(--w)) / -2 + 40px)}
  .loc-hero-city .loc-hero-img{border-radius:18px 0 0 18px;aspect-ratio:auto;height:560px}
  .loc-hero-city .loc-hero-none{border-radius:18px 0 0 18px;aspect-ratio:auto;height:560px}
  .loc-hero-city .loc-hero-cap{padding-right:var(--pad)}
  .loc-hero-city .loc-search{bottom:60px}
}

/* ---------- editorial: headline + numbered coverage, then the band ---------- */
.loc-hero-editorial{padding:56px 0 80px}
.loc-ed-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:72px;align-items:end;margin-bottom:44px}
.loc-ed-grid .loc-hero-copy h1{max-width:17ch;font-size:clamp(38px,4.1vw,56px)}
.loc-ed-grid .loc-hero-copy h1.h1-long{font-size:clamp(34px,3.4vw,46px);max-width:20ch}
.loc-ed-cover{padding-bottom:6px}
.loc-ed-cover .g-lbl{margin-bottom:10px}
.loc-ed-places{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.loc-ed-places li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line);font-family:var(--fh);font-size:16.5px;font-weight:700;letter-spacing:-0.022em}
.loc-ed-more{margin:12px 0 0;font-size:14px;color:var(--muted)}
.loc-ed-more a{color:var(--ink);border-bottom:1px solid var(--line)}
.loc-ed-more a:hover{border-bottom-color:var(--orange)}
.loc-ed-band{margin:0;position:relative;padding-bottom:34px}
.loc-ed-img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:center;border-radius:18px;display:block}
.loc-ed-band .loc-search{left:32px;bottom:64px;width:min(38%,380px)}
.loc-hero-editorial .loc-facts-strip{margin-top:38px}
.loc-hero-editorial.loc-hero-nophoto .loc-ed-grid{margin-bottom:8px}
.loc-hero-editorial.loc-hero-nophoto .loc-search-flow{margin-top:26px}

/* ---------- sum: the arithmetic leads ---------- */
.loc-hero-sum{padding:60px 0 84px}
.loc-sum-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.loc-sum-head h1{max-width:17ch;font-size:clamp(38px,4vw,54px)}
.loc-sum-head h1.h1-long{font-size:clamp(34px,3.3vw,46px);max-width:19ch}
.loc-sum-head .hero-ctas{margin-bottom:0}
.loc-sum-card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:26px 28px 8px;box-shadow:0 1px 2px rgba(18,33,47,.04),0 26px 50px -34px rgba(18,33,47,.35)}
.loc-sum-card::before{content:"How it adds up";display:block;font-family:var(--fh);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.loc-sum-price{display:flex;align-items:baseline;gap:2px;font-family:var(--fh);letter-spacing:-0.055em;padding-bottom:18px;border-bottom:1px solid var(--line)}
.loc-sum-price .cur{font-size:26px;font-weight:700;transform:translateY(-14px)}
.loc-sum-price .num{font-size:56px;font-weight:800;line-height:.9}
.loc-sum-price .per{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:-0.02em;margin-left:12px;line-height:1.25}
.loc-sum-row{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.loc-sum-row:last-child{border-bottom:0}
.loc-sum-row b{font-family:var(--fh);font-size:18px;font-weight:800;letter-spacing:-0.03em;white-space:nowrap}
.loc-sum-row span{font-size:14.5px;color:var(--muted);line-height:1.5}
.loc-sum-row.is-key b{color:var(--orange-dk)}
.loc-sum-band{margin:44px 0 0;position:relative;padding-bottom:34px}
.loc-sum-img{width:100%;aspect-ratio:21/8;object-fit:cover;object-position:center;border-radius:18px;display:block}
.loc-sum-band .loc-search{left:auto;right:32px;bottom:64px;width:min(38%,380px)}
.loc-sum-towns{margin-top:6px;align-items:center}
.loc-hero-sum.loc-hero-nophoto .loc-sum-towns{margin-top:34px}

/* ---------- radial: the places drawn around the name ---------- */
.loc-hero-radial{padding:56px 0 88px}
.loc-hero-radial .loc-hero-grid{grid-template-columns:1.05fr .95fr;gap:64px;align-items:start}
.loc-radial-wrap{display:grid;justify-items:center;gap:8px;padding-top:12px}
.loc-radial{width:min(100%,480px)}
.loc-radial .ind-radial-base span{color:var(--on-dark-muted)}
.loc-radial-search{margin-top:26px}

/* ---------- banner: the photograph first, the headline on a plate that breaks it ---------- */
.loc-hero-banner{padding:28px 0 84px}
.loc-bn-fig{margin:0;position:relative}
.loc-bn-img{width:100%;aspect-ratio:21/8;object-fit:cover;object-position:center;border-radius:22px;display:block}
.loc-bn-cap{position:absolute;right:28px;bottom:24px;margin:0;font-size:13px;line-height:1.5;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.55);padding-left:14px;border-left:2px solid var(--amber);max-width:30ch}
.loc-bn-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:start}
.loc-bn-plate{margin-top:-84px;position:relative;z-index:2;background:var(--paper);padding:30px 40px 0 0;border-radius:0 22px 0 0}
.loc-bn-plate h1{max-width:15ch;font-size:clamp(36px,3.6vw,48px);margin-bottom:0}
.loc-bn-plate h1.h1-long{font-size:clamp(32px,3.1vw,42px);max-width:18ch}
.loc-bn-side{padding-top:40px}
.loc-bn-side .loc-lead{margin-bottom:26px}
.loc-bn-search{margin-top:28px}
.loc-hero-banner .loc-facts-strip{margin-top:44px}
.loc-hero-banner.loc-hero-nophoto .loc-bn-plate{margin-top:0;padding-top:0}
.loc-hero-banner.loc-hero-nophoto .loc-bn-side{padding-top:6px}

/* ---------- london: the photograph carries the headline ---------- */
.loc-hero-london{padding:34px 0 72px}
.loc-ldn-fig{margin:0;position:relative;padding-bottom:0}
.loc-ldn-img{width:100%;aspect-ratio:auto;height:600px;object-fit:cover;object-position:center 55%;border-radius:22px;display:block}
.loc-ldn-none{height:600px;aspect-ratio:auto;border-radius:22px}
/* the panel sits right so St Paul's, on the left of the photograph, stays in view */
.loc-ldn-panel{
  position:absolute;right:36px;bottom:36px;width:min(56%,600px);
  background:rgba(18,33,47,.93);color:#fff;border-radius:18px;padding:36px 38px 34px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.loc-ldn-panel .eyebrow{color:var(--amber)}
.loc-ldn-panel .eyebrow::before{background:var(--amber)}
.loc-ldn-panel h1{color:#fff;max-width:17ch;font-size:clamp(34px,3.4vw,46px);margin-bottom:18px}
.loc-ldn-panel h1.h1-long{font-size:clamp(30px,3vw,40px);max-width:20ch}
.loc-ldn-panel .loc-lead{color:var(--on-dark-muted);font-size:17px;max-width:52ch;margin-bottom:24px}
.loc-ldn-panel .btn-ghost{border-color:rgba(255,255,255,.32);color:#fff}
.loc-ldn-panel .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.loc-ldn-search{left:36px;right:auto;bottom:auto;top:36px;width:min(34%,360px)}
.loc-ldn-cap{position:absolute;left:36px;right:auto;bottom:36px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45);border-left-color:var(--amber);max-width:30ch;text-align:left}
.loc-hero-london .loc-facts-strip{margin-top:36px}

/* ============================================================
   2. INTRO MODES
   ============================================================ */

/* ---------- side: copy + sticky side lists ---------- */
.loc-intro{display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:start}
.loc-intro-copy h2{max-width:20ch}
.loc-p{font-size:17.5px;line-height:1.68;color:var(--ink-2);margin-top:22px;max-width:60ch}
.loc-intro-copy h2 + .loc-p{margin-top:26px}
.loc-intro-side{position:sticky;top:calc(var(--hdr) + 24px);display:grid;gap:22px}
.loc-side-block{border:1px solid var(--line);border-radius:16px;background:var(--white);padding:24px 26px 22px}
.loc-side-block .g-lbl{margin-bottom:14px}
.loc-places{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 0}
.loc-places li{font-size:15px;color:var(--ink-2);line-height:1.5;padding-right:12px;margin-right:10px;border-right:1px solid var(--line)}
.loc-places li:last-child{border-right:0;padding-right:0;margin-right:0}
.loc-side-note{font-size:14px;color:var(--muted);margin-top:14px;line-height:1.55}
.loc-types{list-style:none;margin:0;padding:0;display:grid}
.loc-types li{border-top:1px solid var(--line-2)}
.loc-types li:first-child{border-top:0}
.loc-types a{
  display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;
  font-family:var(--fh);font-size:15.5px;font-weight:700;letter-spacing:-0.022em;color:var(--ink);
}
.loc-types a i{font-style:normal;color:var(--orange);transition:transform .2s var(--ease)}
.loc-types a:hover{color:var(--orange-dk)}
.loc-types a:hover i{transform:translateX(4px)}

/* ---------- prose: standfirst + columns, coverage strip beneath ---------- */
.loc-prose-head{display:grid;grid-template-columns:1fr;max-width:none;margin-bottom:34px}
.loc-prose-head h2{max-width:24ch}
.loc-prose-cols{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.loc-standfirst{font-size:20.5px;line-height:1.55;color:var(--ink);margin-top:0;max-width:none}
.loc-prose-rest .loc-p{margin-top:0;max-width:none;font-size:16.5px}
.loc-prose-rest .loc-p + .loc-p{margin-top:18px}
.loc-cover-strip{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;margin-top:44px;padding-top:34px;border-top:1px solid var(--line)}
.loc-cover-block .g-lbl{margin-bottom:12px}
.loc-places-inline li{font-size:15px}
.loc-type-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.loc-type-chips a{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--fh);font-size:14px;font-weight:700;letter-spacing:-0.018em;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:100px;padding:8px 14px;transition:border-color .15s ease,color .15s ease;
}
.loc-type-chips a i{font-style:normal;color:var(--orange)}
.loc-type-chips a:hover{border-color:var(--ink);color:var(--orange-dk)}

/* ---------- strip: narrative column, then a bordered coverage band ---------- */
.loc-narrative-copy{max-width:66ch}
.loc-narrative-copy h2{max-width:20ch}
.loc-cover-band{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;margin-top:52px;padding:34px 38px;background:var(--white);border:1px solid var(--line);border-radius:18px}
.loc-places-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 18px}
.loc-places-grid li{border-right:0;padding:6px 0;margin:0;border-bottom:1px solid var(--line-2);font-size:14.5px}

/* ---------- photo: the photograph beside the copy ---------- */
.loc-intro-photo{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.loc-intro-fig{margin:0;position:sticky;top:calc(var(--hdr) + 24px);padding-bottom:30px}
.loc-intro-img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center;border-radius:18px;display:block;box-shadow:0 30px 60px -36px rgba(18,33,47,.5)}
.loc-intro-cap{position:absolute;bottom:0}
.loc-cover-strip-tight{grid-template-columns:1fr;gap:26px;margin-top:34px;padding-top:28px}

/* ============================================================
   3. PRODUCTS MODES
   ============================================================ */
.loc-plans{margin-top:8px}
.loc-plan-more{margin-top:14px;text-align:center}
.loc-plan-more .link-u{font-size:14.5px}

/* ---------- ledger: one comparison table ---------- */
.loc-ledger-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:var(--white);box-shadow:0 1px 2px rgba(18,33,47,.04),0 26px 50px -36px rgba(18,33,47,.3)}
.loc-ledger{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.55}
.loc-ledger th,.loc-ledger td{text-align:left;vertical-align:top;padding:20px 26px;border-top:1px solid var(--line)}
.loc-ledger thead th{border-top:0;padding-top:26px;padding-bottom:18px;background:var(--paper)}
.loc-ledger thead th.is-key{background:var(--wash)}
.loc-ledger-plan{font-family:var(--fh);font-size:18px;font-weight:800;letter-spacing:-0.03em;display:block}
.loc-ledger thead th i{font-style:normal;display:inline-block;margin-top:8px;font-family:var(--fh);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-dk);background:var(--white);border:1px solid #F0D9C0;border-radius:6px;padding:4px 8px}
.loc-ledger tbody th{font-family:var(--fh);font-size:14px;font-weight:700;letter-spacing:-0.012em;color:var(--muted);width:20%;padding-top:24px}
.loc-ledger td{width:40%;color:var(--ink-2)}
.loc-ledger td.is-key{background:rgba(251,235,221,.35)}
/* Three-plan ledger (standalone SEO added 8 September 2026): three narrower
   value columns rather than two wide ones. The wrap above still scrolls
   horizontally, so a small screen never overflows the page. */
.loc-ledger-3 tbody th{width:16%}
.loc-ledger-3 td{width:28%}
.loc-ledger-price{display:block;font-family:var(--fh);font-size:30px;font-weight:800;letter-spacing:-0.045em;color:var(--ink);line-height:1;margin-bottom:6px}
.loc-ledger td[data-plan] > span{display:block;font-size:14px;color:var(--muted)}
.loc-ledger-cta td{padding-top:24px;padding-bottom:28px}
.loc-ledger-cta .btn{display:inline-flex;margin-bottom:12px}
.loc-ledger-cta .link-u{display:block;font-size:14.5px;width:max-content}

/* ---------- stack: the two plans as a decision, one above the other ---------- */
.loc-stack{display:grid;gap:0}
.loc-stack-item{display:grid;grid-template-columns:300px 1fr;gap:56px;padding:40px 44px;background:var(--white);border:1px solid var(--line);border-radius:18px;align-items:start}
.loc-stack-item.is-key{border-color:#E9C9A6;box-shadow:0 30px 60px -40px rgba(217,98,14,.35)}
.loc-stack-side .ind-n{display:block;margin-bottom:14px}
.loc-stack-side .plan-name{margin-bottom:14px}
.loc-stack-side .amount .num{font-size:52px}
.loc-stack-body h3{font-size:24px;letter-spacing:-0.03em;max-width:20ch;margin-bottom:6px}
.loc-stack-body .svc-best{margin-top:8px;max-width:58ch}
.loc-stack-list{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}
.loc-stack-list li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink-2);line-height:1.5}
.loc-stack-list .tick{flex:none;width:18px;height:18px;margin-top:3px;color:var(--orange)}
.loc-stack-body .ind-btn-row{margin-top:26px}
.loc-stack-or{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:18px 0}
.loc-stack-or::before,.loc-stack-or::after{content:"";height:1px;background:var(--line)}
.loc-stack-or span{font-family:var(--fh);font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ============================================================
   4. SEARCHES MODES
   ============================================================ */
.loc-wash{background:var(--wash);border-top:1px solid #F0E3D0;border-bottom:1px solid #F0E3D0}
.loc-searches{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:start}
.loc-searches .ind-head{margin-bottom:30px}
.loc-journey li{padding-bottom:22px}
.loc-journey b em{font-style:normal;color:var(--orange-dk)}
.loc-journey p{margin:6px 0 0;color:var(--muted);font-size:15.5px;line-height:1.55}
.loc-searches-visual{position:sticky;top:calc(var(--hdr) + 24px)}
.loc-gsr{max-width:470px;margin-left:auto}
.loc-gsr .gsr-head{padding:16px 16px 0}
.loc-gsr .gsr-body{padding:12px 16px 14px}
.loc-gsr .gsr-local{margin-bottom:0}
.loc-gsr-foot{max-width:470px;margin:14px 0 0 auto;font-size:13px;color:var(--muted);line-height:1.5}
/* flip: the results card leads on the left */
.loc-searches-flip .loc-searches-visual{order:-1}
.loc-searches-flip .loc-gsr,.loc-searches-flip .loc-gsr-foot{margin-left:0;margin-right:auto}
/* row: centred card, the three intents beneath as a row */
.loc-searches-row .ind-head{margin-bottom:36px}
.loc-searches-centre{max-width:520px;margin:0 auto}
.loc-searches-centre .loc-gsr,.loc-searches-centre .loc-gsr-foot{max-width:none;margin-left:0}
.loc-searches-centre .loc-gsr-foot{text-align:center}
.loc-intents{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.loc-intents li{display:grid;gap:12px;padding:24px 26px;background:var(--white);border:1px solid var(--line);border-radius:16px}
.loc-intents b{display:block;font-family:var(--fh);font-size:17.5px;font-weight:800;letter-spacing:-0.025em;line-height:1.25}
.loc-intents b em{font-style:normal;color:var(--orange-dk)}
.loc-intents p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.loc-note-c{text-align:center;max-width:64ch;margin-left:auto;margin-right:auto;margin-top:26px}
.loc-searches-row .ind-btn-row{justify-content:center}
/* pins drop and rows settle once, when the scene runs */
[data-scene="loc-pins"] .gsr-biz li{opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .5s var(--ease-out)}
[data-scene="loc-pins"] .gsr-biz li.on{opacity:1;transform:none}
[data-scene="loc-pins"] .gsr-you{opacity:0;transform:translateY(3px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
[data-scene="loc-pins"] .gsr-biz li.on .gsr-you{opacity:1;transform:none}
html:not(.js) [data-scene="loc-pins"] .gsr-biz li,[data-scene="loc-pins"].is-done .gsr-biz li{opacity:1;transform:none}
html:not(.js) [data-scene="loc-pins"] .gsr-pin,[data-scene="loc-pins"].is-done .gsr-pin{transform:rotate(-45deg) scale(1)}
html:not(.js) [data-scene="loc-pins"] .gsr-you,[data-scene="loc-pins"].is-done .gsr-you{opacity:1;transform:none}

/* ============================================================
   5. FAQ MODES
   ============================================================ */
.loc-faq-two{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;align-items:start}
.loc-faq-two .faq-list{border-top:1px solid var(--line)}
.loc-faq-side{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:start}
.loc-faq-side-head{position:sticky;top:calc(var(--hdr) + 24px)}
.loc-faq-side-head h2{max-width:14ch}
.loc-faq-side-head .lede{margin-top:16px;max-width:36ch}
.loc-faq-side-head .faq-more{margin-top:24px}
.loc-faq-side-list{max-width:none}

/* ============================================================
   6. NEARBY MODES, LONDON AREAS
   ============================================================ */
.loc-ind-head{margin-bottom:40px}

/* cards */
.loc-nearby{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.loc-near{
  display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:var(--white);overflow:hidden;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.loc-near:hover{transform:translateY(-3px);box-shadow:0 22px 44px -28px rgba(18,33,47,.45);border-color:#DCD4C7}
.loc-near-img{display:block;aspect-ratio:16/10;overflow:hidden}
.loc-near-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.loc-near:hover .loc-near-img img{transform:scale(1.04)}
.loc-near-body{display:grid;gap:8px;padding:18px 20px 20px}
.loc-near-body b{font-family:var(--fh);font-size:18px;font-weight:800;letter-spacing:-0.03em}
.loc-near-body span{font-size:14.5px;color:var(--muted);line-height:1.5}
.loc-near-body i{font-style:normal;font-family:var(--fh);font-size:14px;font-weight:700;color:var(--orange);margin-top:6px}

/* list: hairline rows */
.loc-near-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.loc-near-list a{display:grid;grid-template-columns:200px 1fr auto;gap:28px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.loc-near-list b{font-family:var(--fh);font-size:20px;font-weight:800;letter-spacing:-0.03em}
.loc-near-list span{font-size:15px;color:var(--muted);line-height:1.5}
.loc-near-list i{font-style:normal;font-family:var(--fh);font-size:14px;font-weight:700;color:var(--orange);white-space:nowrap;transition:transform .2s var(--ease)}
.loc-near-list a:hover b{color:var(--orange-dk)}
.loc-near-list a:hover i{transform:translateX(4px)}

/* strip: chips beside a short head */
.loc-near-strip{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;padding:34px 38px;background:var(--white);border:1px solid var(--line);border-radius:18px}
.loc-near-strip-copy h2{max-width:16ch}
.loc-near-strip-copy .lede{margin-top:12px;font-size:16px}
.loc-near-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.loc-near-chips a{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--fh);font-size:16px;font-weight:700;letter-spacing:-0.022em;color:var(--ink);
  border:1px solid var(--line);border-radius:100px;padding:12px 18px;background:var(--paper);transition:border-color .15s ease,color .15s ease;
}
.loc-near-chips a i{font-style:normal;color:var(--orange)}
.loc-near-chips a:hover{border-color:var(--ink);color:var(--orange-dk)}
.loc-near-chips a.is-all{background:var(--ink);color:#fff;border-color:var(--ink)}
.loc-near-chips a.is-all i{color:var(--amber)}
.loc-near-strip-wrap .groups-note{margin-top:22px}

/* London areas */
.loc-areas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.loc-area{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:var(--white);overflow:hidden;transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease)}
.loc-area:hover{transform:translateY(-3px);box-shadow:0 22px 44px -28px rgba(18,33,47,.45);border-color:#DCD4C7}
.loc-area-img{display:block;aspect-ratio:4/3;overflow:hidden}
.loc-area-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.loc-area:hover .loc-area-img img{transform:scale(1.04)}
.loc-area-body{display:grid;gap:6px;padding:16px 18px 18px}
.loc-area-body b{font-family:var(--fh);font-size:17px;font-weight:800;letter-spacing:-0.03em}
.loc-area-body span{font-size:13.5px;color:var(--muted);line-height:1.5}
.loc-area-body i{font-style:normal;font-family:var(--fh);font-size:13.5px;font-weight:700;color:var(--orange);margin-top:4px}

/* ---------- Editorial module, value stack ---------- */
.loc-editorial{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.loc-points{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:22px}
.loc-points li{display:grid;grid-template-columns:44px 1fr;gap:18px}
.loc-points .ind-n{width:44px;height:44px;border-radius:50%;background:var(--white);border:2px solid var(--orange);display:grid;place-items:center;font-family:var(--fh);font-size:12px;font-weight:800}
.loc-points b{display:block;font-family:var(--fh);font-weight:700;font-size:17.5px;letter-spacing:-0.02em;padding-top:9px}
.loc-points p{margin:6px 0 0;color:var(--muted);font-size:15.5px;line-height:1.55}
.loc-vsum{margin-top:8px}

/* ============================================================
   7. RESPONSIVE (tablet and below; desktop unchanged above 1200)
   ============================================================ */
@media (max-width:1200px){
  .loc-search{left:-16px}
  .loc-hero-area .loc-search{right:-12px}
  .loc-ed-grid{gap:48px}
  .loc-ldn-panel{width:min(64%,620px)}
  .loc-areas{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1040px){
  .loc-hero{padding:40px 0 72px}
  .loc-hero-grid,.loc-hero-area .loc-hero-grid,.loc-hero-radial .loc-hero-grid{grid-template-columns:1fr;gap:40px}
  .loc-hero-area .loc-hero-visual{order:0}
  .loc-hero-copy h1{max-width:18ch}
  .loc-hero-county .loc-hero-copy{grid-template-columns:1fr}
  .loc-hero-county .loc-hero-copy h1,.loc-hero-county .loc-hero-copy .loc-lead,.loc-hero-county .loc-hero-copy .hero-ctas,.loc-hero-county .loc-hero-copy .ind-facts{grid-column:1;grid-row:auto}
  .loc-hero-county .loc-hero-img,.loc-hero-county .loc-hero-none{aspect-ratio:16/9}
  .loc-hero-county .loc-search{left:20px;bottom:56px;width:min(56%,360px)}
  .loc-hero-county .loc-hero-copy .loc-facts{grid-template-columns:1fr 1fr}
  .loc-hero-county .loc-hero-copy .loc-facts div:nth-child(1),.loc-hero-county .loc-hero-copy .loc-facts div:nth-child(2){border-bottom:1px solid var(--line)}
  .loc-hero-county .loc-hero-copy .loc-facts div:nth-child(2){border-right:0}
  .loc-ed-grid{grid-template-columns:1fr;gap:32px;align-items:start}
  .loc-ed-img,.loc-sum-img{aspect-ratio:16/9}
  .loc-ed-band .loc-search,.loc-sum-band .loc-search{width:min(56%,360px);bottom:56px}
  .loc-facts-strip{grid-template-columns:1fr 1fr}
  .loc-facts-strip div:nth-child(3){border-left:0;padding-left:0}
  .loc-facts-strip div:nth-child(1),.loc-facts-strip div:nth-child(2){border-bottom:1px solid var(--line)}
  .loc-sum-grid{grid-template-columns:1fr;gap:28px}
  .loc-sum-card{max-width:560px}
  .loc-radial-wrap{padding-top:0}
  .loc-bn-img{aspect-ratio:16/8}
  .loc-bn-grid{grid-template-columns:1fr;gap:20px}
  .loc-bn-plate{margin-top:-64px;padding:26px 28px 0 0;max-width:80%}
  .loc-bn-side{padding-top:0}
  .loc-ldn-img,.loc-ldn-none{height:auto;aspect-ratio:16/9}
  .loc-ldn-panel{position:static;width:auto;margin-top:-60px;margin-left:20px;margin-right:20px;padding:28px 30px}
  .loc-ldn-search{top:20px;left:20px;width:min(52%,360px)}
  .loc-ldn-cap{position:static;color:var(--muted);text-shadow:none;margin:14px 0 0 20px;border-left-color:var(--amber)}
  .loc-intro{grid-template-columns:1fr;gap:40px}
  .loc-intro-side{position:static;grid-template-columns:1fr 1fr}
  .loc-prose-cols{grid-template-columns:1fr;gap:18px}
  .loc-cover-strip,.loc-cover-band{grid-template-columns:1fr;gap:30px}
  .loc-places-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .loc-intro-photo{grid-template-columns:1fr;gap:36px}
  .loc-intro-fig{position:static}
  .loc-intro-img{aspect-ratio:16/9}
  .loc-stack-item{grid-template-columns:1fr;gap:26px;padding:30px 30px}
  .loc-searches{grid-template-columns:1fr;gap:40px}
  .loc-searches-visual{position:static}
  .loc-gsr,.loc-gsr-foot{margin-left:0}
  .loc-searches-flip .loc-searches-visual{order:0}
  .loc-intents{grid-template-columns:1fr;gap:12px}
  .loc-faq-two{grid-template-columns:1fr;gap:0}
  .loc-faq-two > div + div .faq-list{border-top:0}
  .loc-faq-side{grid-template-columns:1fr;gap:32px}
  .loc-faq-side-head{position:static}
  .loc-nearby{grid-template-columns:1fr 1fr}
  .loc-near-list a{grid-template-columns:160px 1fr auto;gap:18px}
  .loc-near-strip{grid-template-columns:1fr;gap:26px;padding:28px 30px}
  .loc-editorial{grid-template-columns:1fr;gap:36px}
  .loc-facts{grid-template-columns:1fr 1fr}
  .loc-facts div:nth-child(2){border-right:0}
  .loc-facts div:nth-child(1),.loc-facts div:nth-child(2){border-bottom:1px solid var(--line)}
}
@media (max-width:820px){
  .loc-ledger th,.loc-ledger td{padding:16px 18px}
  .loc-ledger tbody th{width:24%}
  .loc-ledger-price{font-size:26px}
  .loc-near-list a{grid-template-columns:1fr;gap:6px}
  .loc-near-list i{justify-self:start}
  .loc-areas{grid-template-columns:1fr 1fr}
  .loc-stack-list{grid-template-columns:1fr}
}

/* ============================================================
   8. PHONE COMPOSITION (≤640px only)

   The owner wants the phone page short and distilled, never a stacked
   desktop page and never folded behind "read more" controls. On a phone
   a location page is: hero (headline, one-line lead, one CTA, two
   facts, the photograph) · products · one compact searches block · the
   ownership timeline · four questions · nearby links · final CTA.
   Everything else is removed from the flow here. Nothing in this block
   applies at 641px and above.
   ============================================================ */
@media (max-width:640px){
  /* --- hero: every composition collapses to the same short stack --- */
  .loc-hero,.loc-hero-editorial,.loc-hero-sum,.loc-hero-radial,.loc-hero-london,.loc-hero-banner{padding:26px 0 40px}
  .loc-hero-grid,.loc-ed-grid,.loc-sum-grid,.loc-bn-grid{grid-template-columns:1fr;gap:22px;margin:0}
  .loc-hero-copy h1,.loc-ed-grid .loc-hero-copy h1,.loc-sum-head h1,.loc-ldn-panel h1,.loc-bn-plate h1{max-width:none;font-size:31px;letter-spacing:-0.035em;margin-bottom:14px}
  /* banner: headline first, then the lead and CTA, then the photograph */
  .loc-hero-banner .wrap{display:flex;flex-direction:column}
  .loc-hero-banner .loc-bn-fig{order:1;margin-top:18px}
  .loc-bn-img{aspect-ratio:16/9;border-radius:14px}
  .loc-bn-cap{display:none}
  .loc-bn-plate{margin:0;padding:0;max-width:none;background:transparent}
  .loc-bn-side{padding-top:0}
  .loc-hero-banner .loc-facts-strip{order:2}
  .loc-hero-copy h1.h1-long,.loc-ldn-panel h1.h1-long{font-size:28px}
  .loc-hero .loc-lead{display:none}
  .loc-hero .loc-lead-m{display:block;font-size:16.5px;line-height:1.55;margin-bottom:20px;max-width:none}
  .loc-hero .hero-ctas{margin-bottom:0;gap:10px}
  .loc-hero .hero-ctas .btn{width:100%}
  .loc-hero .hero-ctas .btn-ghost{display:none}
  /* two facts, side by side */
  .loc-facts{margin-top:22px;grid-template-columns:1fr 1fr}
  .loc-facts div:nth-child(n+3){display:none}
  .loc-facts div:nth-child(1),.loc-facts div:nth-child(2){border-bottom:0}
  .loc-facts div:nth-child(1){border-right:1px solid var(--line)}
  .loc-facts div{padding:14px 14px}
  .loc-facts strong{font-size:16px}
  .loc-facts-strip{grid-template-columns:1fr 1fr;margin-top:22px}
  .loc-facts-strip div:nth-child(n+3){display:none}
  .loc-facts-strip div:nth-child(1),.loc-facts-strip div:nth-child(2){border-bottom:0}
  .loc-facts-strip div:nth-child(2){border-left:1px solid var(--line);padding-left:16px}
  .loc-facts-strip div{padding:14px 0}
  .loc-facts-strip strong{font-size:17px}
  .loc-facts-list{margin-top:22px;max-width:none}
  .loc-facts-list li:nth-child(n+3){display:none}
  .loc-facts-list li{grid-template-columns:1fr;gap:2px;padding:10px 0}
  /* the photograph stays; the search card, caption, suggestions and towns go */
  .loc-hero-visual{order:1}
  .loc-hero-fig{padding-bottom:0}
  .loc-hero-img,.loc-hero-none,.loc-hero-county .loc-hero-img,.loc-hero-county .loc-hero-none,.loc-ed-img,.loc-sum-img{aspect-ratio:16/9;border-radius:14px;box-shadow:none}
  .loc-hero-nophoto .loc-hero-none{display:none}
  .loc-hero-area .loc-hero-visual{order:1}
  .loc-search,.loc-hero-cap,.loc-towns,.loc-ed-cover,.loc-sum-card,.loc-sum-towns,.loc-radial-wrap,.loc-ldn-search,.loc-ldn-cap{display:none}
  .loc-ed-band,.loc-sum-band{margin:0;padding-bottom:0}
  .loc-hero-editorial .loc-facts-strip,.loc-hero-london .loc-facts-strip{margin-top:22px}
  .loc-hero-editorial .loc-ed-band{order:1}
  .loc-hero-editorial .wrap,.loc-hero-sum .wrap,.loc-hero-london .wrap{display:flex;flex-direction:column}
  .loc-hero-editorial .loc-facts-strip{order:2}
  .loc-hero-sum .loc-sum-grid{order:0}
  .loc-hero-sum .loc-sum-band{order:1;margin-top:22px}
  .loc-hero-london .loc-ldn-fig{order:1;display:flex;flex-direction:column}
  .loc-ldn-img,.loc-ldn-none{height:auto;aspect-ratio:16/9;border-radius:14px;order:2;margin-top:18px}
  .loc-ldn-panel{position:static;width:auto;margin:0;padding:0;background:transparent;color:var(--ink);border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none;order:1}
  .loc-ldn-panel .eyebrow{color:var(--orange)}
  .loc-ldn-panel .eyebrow::before{background:var(--orange)}
  .loc-ldn-panel h1{color:var(--ink)}
  .loc-ldn-panel .loc-lead-m{color:var(--muted)}
  .loc-hero-london .loc-facts-strip{order:2}
  .loc-hero-radial .loc-hero-grid{gap:0}

  /* --- every module stays on the phone (owner: less clutter, not less
     value); each is presented compactly --- */
  .loc-sec{padding:40px 0}
  .loc-sec .ind-head{margin-bottom:18px;max-width:none}
  .loc-sec .head{margin-bottom:22px}
  .loc-sec .lede{font-size:16px}
  /* intro: the local copy in one column, the places and business types as
     compact inline lists */
  .loc-prose-cols,.loc-narrative,.loc-intro-photo,.loc-intro{grid-template-columns:1fr;gap:16px}
  .loc-prose-head h2,.loc-narrative-copy h2{max-width:none}
  .loc-p{font-size:15px;line-height:1.55}
  .loc-standfirst{font-size:16.5px}
  .loc-p + .loc-p{margin-top:12px}
  .loc-cover-strip,.loc-cover-band{grid-template-columns:1fr;gap:16px;margin-top:20px;padding:18px 16px}
  .loc-places-grid,.loc-places-inline{display:flex;flex-wrap:wrap;gap:6px 10px}
  .loc-places li,.loc-types li{font-size:14px}
  .loc-places-note{font-size:13.5px}
  .loc-intro-fig{margin:0}
  .loc-intro-img{aspect-ratio:16/9;border-radius:12px}
  .loc-intro-cap{display:none}
  .loc-intro-side{display:grid;grid-template-columns:1fr;gap:10px}
  .loc-intro > *,.loc-prose-cols > *,.loc-narrative > *,.loc-intro-photo > *{min-width:0}
  .loc-intro-side .loc-places,.loc-intro-side .loc-types{display:flex;flex-wrap:wrap;gap:6px 10px;margin:8px 0 0}
  .loc-side-note{font-size:13.5px;margin-top:8px}
  .loc-side-block{padding:18px 18px 16px;position:static}
  /* industries: the strip swipes sideways */
  .loc-sec-industries .loc-ind-head{margin-bottom:16px}
  .loc-sec-industries .istrip{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:10px;scroll-snap-type:x mandatory;margin:0 calc(var(--pad) * -1);padding:2px var(--pad) 8px;scrollbar-width:none}
  .loc-sec-industries .istrip::-webkit-scrollbar{display:none}
  .loc-sec-industries .istrip > *{flex:0 0 54%;max-width:230px;scroll-snap-align:start}
  .loc-sec-industries .groups-note{margin-top:14px;font-size:14.5px}
  /* included: the value stack reads as a short sum */
  .loc-sec-included .head-solo{margin-bottom:16px}
  .loc-sec-included .head-solo .lede{display:none}
  .loc-vsum{padding:16px 16px}
  .loc-vsum .vsum-row{flex-direction:column;align-items:flex-start;gap:12px}
  .loc-vsum .vsum-items{font-size:13.5px;row-gap:5px}
  .loc-vsum .vsum-total{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:12px;width:100%}
  .loc-sec-included .ind-foot{font-size:14.5px;margin-top:16px}
  /* process: the short spine as a hairline list */
  .loc-sec-process .ind-steps{display:block;border-top:1px solid var(--line)}
  .loc-sec-process .ind-steps > li{padding:14px 0;border-bottom:1px solid var(--line);margin:0}
  .loc-sec-process .ind-steps-rail{padding-top:0}
  .loc-sec-process .ind-steps-rail::before,.loc-sec-process .ind-steps-rail > li::before{display:none}
  .loc-sec-process .ind-step-n{display:inline;margin:0 8px 0 0}
  .loc-sec-process .ind-steps h3{display:inline}
  .loc-sec-process .ind-steps p{margin-top:4px}
  .loc-sec-process .ind-timing{grid-template-columns:1fr;gap:10px;margin-top:18px}
  .loc-sec-process .ind-timing div{padding:16px 16px}
  .loc-sec-process .ind-timing p{font-size:14.5px}
  .loc-sec-process .ind-steps p{font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .loc-sec-process .ind-steps > li{padding:11px 0}
  .loc-sec-process .ind-steps h3{font-size:16.5px}
  /* editorial: copy then the numbered points */
  .loc-editorial{grid-template-columns:1fr;gap:18px}
  .loc-points li{padding:12px 0}
  .loc-points p{font-size:14.5px}

  /* --- London areas: a compact list of the five pages --- */
  .loc-areas{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
  .loc-area{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
  .loc-area:hover{transform:none;box-shadow:none}
  .loc-area-img,.loc-area-body span{display:none}
  .loc-area-body{padding:0;gap:0;display:flex;justify-content:space-between;align-items:center;width:100%}
  .loc-area-body i{margin:0}

  /* --- products --- */
  .loc-plan-more,.ind-plans-foot{display:none}
  .loc-plans .duo-col{padding:20px 18px}
  .loc-plans .duo-col li{font-size:14.5px;padding:6px 0}
  /* Feature bullets past the fourth are clutter on a phone and go. The
     "best for" line does NOT: it is the page's own locally written argument
     for who this plan suits in THIS place, which is the whole reason the
     page exists. Standing owner rule for phones is less clutter, not less
     value, and hiding the local line inverts that. Found by reading the
     deployed stylesheet during pilot QA on 8 September 2026. */
  .loc-plans .duo-col ul li:nth-child(n+5){display:none}
  .loc-plans .svc-best{display:block;font-size:14.5px;margin-top:10px}
  .loc-plans .duo-col .btn{margin-top:18px!important}
  .loc-sec-products .ind-head .lede{display:none}
  .loc-ledger-wrap{border:0;background:transparent;box-shadow:none;overflow:visible}
  .loc-ledger,.loc-ledger tbody,.loc-ledger tr,.loc-ledger th,.loc-ledger td{display:block;width:auto}
  .loc-ledger thead{display:none}
  .loc-ledger tr{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--white);margin-bottom:10px}
  .loc-ledger tbody th{grid-column:1/-1;border-top:0;padding:14px 16px 6px;width:auto}
  .loc-ledger td{padding:0 16px 14px;border-top:0;font-size:14px}
  .loc-ledger td.is-key{background:transparent}
  .loc-ledger td::before{content:attr(data-plan);display:block;font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-dk);margin-bottom:4px}
  .loc-ledger td.is-key{border-left:1px solid var(--line-2)}
  .loc-ledger-price{font-size:24px}
  .loc-ledger-cta td{padding-top:8px}
  .loc-ledger-cta .btn{width:100%;justify-content:center;font-size:14px;padding:12px 10px;margin-bottom:0}
  .loc-ledger-cta .link-u{display:none}
  .loc-stack-item{padding:24px 20px;gap:18px}
  .loc-stack-side .amount .num{font-size:44px}
  .loc-stack-body h3{font-size:20px}
  .loc-stack-body .svc-best{display:block;font-size:14.5px;margin-top:10px}
  .loc-stack-list li:nth-child(n+5){display:none}
  .loc-stack-body .ind-btn-row .link-u{display:none}
  .loc-stack-body .ind-btn-row .btn{width:100%}
  .loc-stack-or{padding:12px 0}

  /* --- searches: one compact block --- */
  .loc-sec-searches .ind-head .lede,.loc-sec-searches .ind-demo-note,.loc-gsr-foot,.loc-journey p,.loc-intents p,.gsr-tabs{display:none}
  .loc-searches,.loc-searches-row{gap:22px}
  .loc-searches-visual,.loc-searches-flip .loc-searches-visual{order:-1}
  .loc-searches-centre{max-width:none}
  .loc-gsr{max-width:none}
  .loc-journey li{padding-bottom:12px}
  .loc-journey b,.loc-intents b{font-size:15.5px}
  .loc-intents{margin-top:18px;gap:8px}
  .loc-intents li{padding:14px 16px;gap:0}
  .loc-sec-searches .ind-btn-row{margin-top:18px;flex-direction:column;align-items:stretch}
  .loc-sec-searches .ind-btn-row .btn{width:100%}

  /* --- term: the four moments, with the paragraph kept only on the key one --- */
  .loc-sec-term .ind-head{margin-bottom:18px}
  .loc-sec-term .term-tl-step:not(.is-key) p,.loc-sec-term .term-tl-note{display:none}

  /* --- final: one action --- */
  .loc-final .btn-ghost-dk{display:none}
  .loc-final .btns .btn{width:100%}

  /* --- faq: every local question, collapsed (details/summary) --- */
  .loc-faq-two{gap:0}
  .loc-faq-two > div + div .faq-list{border-top:0}
  .loc-faq-side{grid-template-columns:1fr;gap:16px}
  .loc-faq-side-head .lede,.loc-faq-side-head .faq-more{display:none}
  .loc-sec-faq .q summary{padding:12px 0;font-size:15.5px}
  .loc-sec-faq .q .a{font-size:14.5px}
  .loc-sec-faq .faq-more{margin-top:18px}

  /* --- nearby: a short list of links --- */
  .loc-sec-nearby .groups-note,.loc-near-img,.loc-near-body span,.loc-near-list span,.loc-near-strip-copy .lede{display:none}
  .loc-nearby{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
  .loc-near{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
  .loc-near:hover{transform:none;box-shadow:none}
  .loc-near-body{padding:12px 0;display:flex;justify-content:space-between;align-items:center;gap:12px}
  .loc-near-body i{margin:0;font-size:13px}
  .loc-near-list a{grid-template-columns:1fr auto;gap:12px;padding:12px 0;align-items:center}
  .loc-near-list b{font-size:17px}
  .loc-near-strip{padding:20px 20px;gap:16px}
  .loc-near-chips{gap:8px}
  .loc-near-chips a{font-size:14px;padding:9px 13px}
}
@media (max-width:390px){
  .loc-facts div,.loc-facts-strip div{padding:12px 12px}
  .loc-side-block{padding:20px 20px 18px}
}

/* ---------- Motion: reduced ---------- */
@media (prefers-reduced-motion:reduce){
  [data-scene="loc-pins"] .gsr-biz li,[data-scene="loc-pins"] .gsr-you{opacity:1;transform:none;transition:none}
  [data-scene="loc-pins"] .gsr-pin{transform:rotate(-45deg) scale(1);transition:none}
  .loc-near,.loc-near-img img,.loc-area,.loc-area-img img,.loc-types a i,.loc-near-list i{transition:none}
}

/* ---------- the two plans, row for row (5 September 2026) ----------
   Subgrid puts the plan name, the price, the included list and the actions on
   shared baselines in both columns, so the comparison reads as one object.
   The "Website included" badge sits beside the plan name rather than above the
   price, where it used to push the SEO column out of step. */
.sec .loc-plans{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto}
.sec .loc-plans .duo-col{display:grid;grid-template-rows:subgrid;grid-row:1 / span 4;align-content:start}
/* Three-plan variant (8 September 2026): standalone SEO as a third column,
   still one baseline for name/price/body/action across all three. Only
   engages when the profile supplies a best_seo line - see loc-plans-3 on
   the wrapper, added by PHP only when a third plan is actually rendered. */
.sec .loc-plans.loc-plans-3{grid-template-columns:1fr 1fr 1fr}
.loc-plan-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:34px}
.loc-plan-head .plan-name{margin:0}
.loc-plans .active-badge{position:static;margin:0;align-self:center}
.loc-plan-price{align-self:start}
.loc-plan-price .amount{margin-top:10px}
.loc-plan-body{align-self:start}
.loc-plan-body ul{margin:0}
.loc-plan-act{align-self:end;padding-top:26px}
.loc-plan-act .btn{width:100%}
.loc-plan-act .loc-plan-more{margin:14px 0 0;text-align:center}
@media (max-width:820px){
  .sec .loc-plans{grid-template-columns:1fr;grid-template-rows:none;gap:26px}
  .sec .loc-plans .duo-col{display:block;grid-row:auto}
  .loc-plan-act{padding-top:20px}
  /* loc-plans-3 has higher selector specificity than the bare rule above (an
     extra class), so it needs its own override here or three columns would
     win out over stacking on a narrow screen. */
  .sec .loc-plans.loc-plans-3{grid-template-columns:1fr}
}

/* ============================================================
   PHONE, SECOND PASS (5 September 2026)

   Measured at 390px a location page ran to 10,731px over fifteen
   sections. The rhythm was close to right, so this pass is mostly
   about reading: twenty area links and ten summary rows were still
   rendering at 13.5 and 14px, under the 14.5px the system sets for
   anything carrying a sentence. The cover strip and the two plan
   cards also stacked at their desktop proportions, which spent two
   screens on pictures. Nothing leaves the DOM: the unique local
   prose, the searches, the areas and the FAQ all earn this page its
   search traffic and all stay exactly as they are.
   ============================================================ */
@media (max-width:640px){
  .loc-places li,.loc-places li a{font-size:14.5px;line-height:1.5}
  .loc-places li a{display:inline-block;padding:9px 0}
  .vsum-items li{font-size:14.5px;line-height:1.5;padding:8px 0}
  .loc-cover-block .g-lbl,.loc-side-note,.term-tl-when{font-size:13.5px}
  .loc-cover-strip{gap:14px}
  .loc-cover-block img,.loc-cover-block picture{aspect-ratio:16/10;object-fit:cover}
  .loc-prose-cols{gap:18px}
  .loc-prose-head{margin-bottom:16px}
  /* the two plans: one complete plan after the other, each with its
     own price, terms and action, rather than two squeezed columns */
  .loc-products .duo{gap:18px}
  .loc-plan-head{padding-bottom:10px}
  .loc-plan-body li{padding:8px 0;font-size:14.5px}
  .loc-plan-act .btn{width:100%}
  .loc-searches-centre{margin-bottom:16px}
  .loc-intents li{padding:9px 0}
}
/* At 320px the industries strip bled 25px off the right edge: it pulls
   itself out to the page edge with a negative margin of one --pad, but
   the wrap's real gutter is narrower than --pad at that width, so the
   strip ended up wider than the viewport. Below 360px it simply sits
   inside the wrap. */
@media (max-width:360px){
  .loc-sec-industries .istrip{margin:0;padding:2px 0 8px}
  .loc-sec-industries .istrip > *{flex:0 0 62%}
  /* The nearby-places list keeps each link on one line, which is right
     for "Web design in Kent" and wrong for "Web design in
     Hertfordshire": on the London page that single line pushed the
     document 25px wider than a 320px screen. Below 360px it wraps. */
  .loc-near-list a i{white-space:normal}
  .loc-near-list a{flex-wrap:wrap}
}
/* Photograph attribution. CC BY and CC BY-SA require it wherever the work
   appears, and the credits were recorded on every page but printed on none:
   the gate checked the data, nothing checked the page.

   Scoped .final p.loc-credits because .final p already sets 19px at the same
   specificity and won; and coloured with the on-dark token because this block
   sits inside the dark closing section, where the ordinary muted grey would
   have been quiet in the wrong sense. */
.final p.loc-credits{
  margin:30px auto 0;font-size:12px;line-height:1.7;
  color:var(--on-dark-muted);opacity:.75;max-width:78ch;
}

/* ------------------------------------------------------------------
   The separately designed mobile composition.

   Every page carries a mobile block — its own section order, hero
   treatment, CTA placement, image position, FAQ and nearby modes — and
   until now nothing read it. The gate FAILED a page that lacked one, so
   it was enforced in the data and absent from every phone.

   Done with CSS order rather than a second render, so the markup and the
   page cache stay single-source. A section the mobile order omits gets
   --mob-order:99 and falls to the end; it is never hidden, because
   hiding content on phones is how the locally written argument
   disappeared from these pages once already.
   ------------------------------------------------------------------ */
@media (max-width: 760px){
  .loc-body{display:flex;flex-direction:column}
  .loc-body > .loc-sec{order:var(--mob-order,50)}

  /* Nearby: chips read as a compact row, strip as a scroller, list as rows. */
  .loc-body[data-mob-nearby="chips"] .loc-sec-nearby .loc-near-img,
  .loc-body[data-mob-nearby="list"]  .loc-sec-nearby .loc-near-img{display:none}
  .loc-body[data-mob-nearby="chips"] .loc-sec-nearby .loc-near{
    display:inline-flex;align-items:center;margin:0 6px 8px 0;padding:8px 14px;
    border:1px solid var(--line);border-radius:999px;
  }
  .loc-body[data-mob-nearby="strip"] .loc-sec-nearby .loc-near-grid{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .loc-body[data-mob-nearby="strip"] .loc-sec-nearby .loc-near{
    flex:0 0 78%;scroll-snap-align:start;
  }

  /* FAQ: list keeps every answer open, accordion is the default collapse. */
  .loc-body[data-mob-faq="list"] .loc-sec-faq details{border-bottom:1px solid var(--line)}
  .loc-body[data-mob-faq="list"] .loc-sec-faq summary{pointer-events:none}
  .loc-body[data-mob-faq="list"] .loc-sec-faq summary::marker,
  .loc-body[data-mob-faq="list"] .loc-sec-faq summary::-webkit-details-marker{display:none}

  /* Intro image position within its own section. */
  .loc-body[data-mob-image="first"]  .loc-sec-intro .loc-intro-img{order:-1;margin-bottom:18px}
  .loc-body[data-mob-image="mid-page"] .loc-sec-intro .loc-intro-img{order:2;margin-top:18px}
}

/* ============================================================
   Under the standard hero (MASTER SPECIFICATION, 9 September 2026): the
   full local paragraph and the search illustration on the left, and the
   verified local photograph - displaced from the hero by the illustration
   rule - on the right with its caption. No photograph, no column. (The
   older .loc-intro-* names belong to the photo intro mode further up.)
   ============================================================ */
.loc-search-wrap.has-photo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.loc-local-lead{max-width:52ch;margin-bottom:26px}
.loc-local-photo{display:block;margin:0;position:relative}
.loc-local-img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:16px;box-shadow:0 30px 60px -38px rgba(18,33,47,.45)}
.loc-local-photo figcaption{margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--muted)}
@media (max-width:1040px){.loc-search-wrap.has-photo{grid-template-columns:1fr;gap:32px}}