/* Hammer & Pixel, astronaut hero playground.
   Standalone. Nothing here ships to the live site.
   British English. No em dashes anywhere in this file. */

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/InterVariable.woff2') format('woff2');
}

:root{
  --page:#0b0b0b;
  --ink:#ffffff;
  --muted:#b9b9b9;
  --accent:#f5c842;
  --accent-deep:#e6b800;
  --hair:rgba(255,255,255,.16);
  --hair-soft:rgba(255,255,255,.09);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --shell:1280px;
  --pad:clamp(1.15rem,4vw,3rem);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  font-family:var(--font);
  background:var(--page);
  color:var(--ink);
  line-height:1.55;
  font-size:clamp(1rem,.97rem + .2vw,1.06rem);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

a:focus-visible,button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:8px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--accent);color:#141004;padding:.7rem 1rem;font-weight:700;border-radius:0 0 10px 0;
}
.skip:focus{left:0}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem clamp(1.15rem,4vw,3rem);
  background:linear-gradient(to bottom,rgba(8,8,8,.72),rgba(8,8,8,0));
  transition:background .35s var(--ease),backdrop-filter .35s var(--ease);
}
.nav.scrolled{
  background:rgba(11,11,11,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair-soft);
}
.brand{font-weight:800;letter-spacing:-.03em;font-size:1.08rem;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:1.75rem}
.nav-links a{font-size:.94rem;color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:.7rem}

.pill{
  display:inline-flex;align-items:center;gap:.6rem;
  font:650 .98rem/1 var(--font);
  padding:.7rem .7rem .7rem 1.15rem;
  border-radius:999px;border:1px solid transparent;
  transition:transform .25s var(--ease),background .2s,color .2s,border-color .2s;
  white-space:nowrap;
}
.pill:active{transform:scale(.97)}
.arrow{
  width:26px;height:26px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:var(--accent);color:#141004;
}
.arrow svg{width:14px;height:14px}
.pill-ghost{border-color:var(--hair);color:var(--ink);background:rgba(255,255,255,.05)}
.pill-ghost:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.1)}
.pill-accent{background:var(--accent);color:#141004;padding:.75rem 1.3rem;font-size:1.02rem}
.pill-accent .wa{width:18px;height:18px;flex:none}
.pill-accent:hover{background:var(--accent-deep)}
.pill-light{background:#fff;color:#141004;padding:.75rem .75rem .75rem 1.3rem;font-size:1.02rem}
.pill-light .arrow{background:#141004;color:#fff}
.pill-light:hover{background:#ececec}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.45rem}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px}

/* ---------- full screen menu ---------- */
.menu{
  position:fixed;inset:0;z-index:60;
  background:rgba(8,8,8,.97);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;
  padding:2rem;
}
.menu[hidden]{display:none}
.menu-inner{display:flex;flex-direction:column;align-items:center;gap:1.25rem}
.menu-inner a{font-size:clamp(1.6rem,7vw,2.4rem);font-weight:750;letter-spacing:-.02em}
.menu-inner a:hover{color:var(--accent)}
.menu-close{
  background:none;border:1px solid var(--hair);color:var(--ink);
  border-radius:999px;padding:.6rem 1.4rem;font:650 .95rem/1 var(--font);cursor:pointer;
}
.menu-close:hover{border-color:rgba(255,255,255,.45)}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  max-height:900px;
  display:flex;
  isolation:isolate;
  overflow:hidden;
  background:#070707;
}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-video,.hero-poster img{
  width:100%;height:100%;
  object-fit:cover;object-position:62% 50%;
}
.hero-poster{position:absolute;inset:0;display:none}
.hero.is-static .hero-video{display:none}
.hero.is-static .hero-poster{display:block}
.hero.is-static .vid-toggle{display:none}

.hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.55) 30%,rgba(0,0,0,0) 60%);
}
.hero-fade{
  position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(to bottom,rgba(11,11,11,0),rgba(11,11,11,.92) 70%,var(--page) 100%);
}

.hero-inner{
  position:relative;z-index:2;
  width:100%;max-width:var(--shell);
  margin-inline:auto;padding-inline:var(--pad);
  padding-block:clamp(7rem,14vh,9rem) clamp(1.5rem,5vh,2.5rem);
  display:flex;flex-direction:column;justify-content:center;gap:clamp(2rem,6vh,3.5rem);
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}

.label{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:#e8e8e8;
  border:1px solid var(--hair);border-radius:999px;
  padding:.45rem .9rem;
  background:rgba(255,255,255,.06);
}
.label .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}

h1{
  margin-top:1.2rem;
  font-size:clamp(44px,7vw,92px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.02;
  max-width:13ch;
  overflow-wrap:break-word;
}
h1 .acc{color:var(--accent)}

.sub{
  margin-top:1.2rem;
  max-width:46ch;
  color:#e8e8e8;
  font-size:clamp(1rem,.95rem + .35vw,1.18rem);
  line-height:1.5;
}

/* outline tags */
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.tags li{
  font-size:.72rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;
  color:#ffffff;
  border:1px solid rgba(255,255,255,.25);border-radius:999px;
  padding:.5rem .8rem;
}

.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}

.guarantee{
  display:flex;align-items:center;gap:.5rem;
  margin-top:1.1rem;color:#ffffff;font-size:.95rem;font-weight:600;
}
.guarantee svg{width:18px;height:18px;flex:none;color:var(--accent)}

/* stats */
.stats{display:flex;gap:clamp(1.25rem,3vw,2.5rem);margin-top:1.8rem}
.stats dt{font-size:clamp(1.4rem,1.1rem + 1.1vw,2.05rem);font-weight:800;letter-spacing:-.03em;color:var(--accent);line-height:1.1}
.stats dd{font-size:.82rem;color:var(--muted);margin-top:.25rem}

/* video pause control */
.vid-toggle{
  position:absolute;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:3;
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--hair);background:rgba(11,11,11,.6);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(8px);
  transition:background .2s,border-color .2s;
}
.vid-toggle:hover{background:rgba(11,11,11,.85);border-color:rgba(255,255,255,.4)}
.vid-toggle .ico-play{display:none}
.vid-toggle.is-paused .ico-play{display:block}
.vid-toggle.is-paused .ico-pause{display:none}

/* ---------- shared section bits ---------- */
.eyebrow{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:650}

/* ---------- proof strip ---------- */
.cred{background:var(--page);padding-block:clamp(3rem,8vh,5rem)}
.cred-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:1.6rem;
}
.cred-stats li{
  border:1px solid rgba(255,255,255,.12);border-radius:14px;
  padding:1.1rem 1.15rem;background:rgba(255,255,255,.02);
}
.cred-stats b{display:block;font-size:clamp(1.05rem,1rem + .5vw,1.3rem);font-weight:750;letter-spacing:-.02em;color:#fff}
.cred-stats span{display:block;margin-top:.4rem;font-size:.84rem;color:var(--muted);line-height:1.45}

/* ---------- quote section ---------- */
.quote{background:var(--page);padding-block:clamp(3rem,8vh,5.5rem)}
.quote h2{font-size:clamp(1.6rem,1.2rem + 2vw,2.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.08;max-width:18ch}
.quote-micro{margin-top:1rem;text-align:center;font-size:.85rem;color:var(--muted)}

/* ---------- trusted ---------- */
.trusted{background:var(--page);padding-block:clamp(3rem,9vh,6rem)}
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;margin-top:1.4rem}
.client{font-size:clamp(1.3rem,1.1rem + 1vw,1.9rem);font-weight:750;letter-spacing:-.02em}
.quote-block{margin-top:1.4rem;border-left:2px solid var(--accent);padding-left:1.2rem;max-width:56ch}
.quote-block blockquote{font-size:clamp(1.05rem,1rem + .5vw,1.35rem);line-height:1.45;color:#f0f0f0}
.quote-block figcaption{margin-top:.8rem;font-size:.9rem;color:var(--muted)}
.proof-more{margin-top:1.1rem;font-size:.95rem}
.proof-more a{color:#e4e4e4;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.proof-more a:hover{color:var(--accent)}
.proof-card{
  display:block;border:1px solid rgba(255,255,255,.12);border-radius:16px;overflow:hidden;
  background:rgba(255,255,255,.03);transition:border-color .25s;
}
.proof-card:hover{border-color:rgba(255,255,255,.3)}
.proof-card img{width:100%;height:auto;aspect-ratio:1280/880;object-fit:cover}
.proof-card p{padding:.95rem 1.1rem;font-size:.92rem;color:#e8e8e8}

/* ---------- slabs ---------- */
.slab{background:var(--page);padding-block:clamp(2.5rem,7vh,4.5rem);border-top:1px solid var(--hair-soft)}
.slab-alt{background:#0e0e0e}
.slab-line{margin-top:1rem;font-size:clamp(1.25rem,1.05rem + 1vw,1.85rem);font-weight:750;letter-spacing:-.02em;max-width:26ch}
.slab-sub{margin-top:.5rem;color:var(--muted)}
.slab-body{margin-top:1rem;max-width:68ch;color:#e4e4e4;line-height:1.6}
.contact-list{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}
.contact-list a{
  display:inline-flex;align-items:center;min-height:44px;
  border:1px solid var(--hair);border-radius:999px;padding:0 1.2rem;
  font-weight:650;font-size:.96rem;transition:border-color .2s,background .2s;
}
.contact-list a:hover{border-color:var(--accent);background:rgba(245,200,66,.1)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--hair-soft);padding-block:2.2rem;background:var(--page)}
.foot p{font-size:.86rem;color:var(--muted);max-width:70ch}

/* ---------- reveal ----------
   Default is the visible state, so a page with no JS shows everything.
   hero.js adds .reveal-armed to set the hidden start state before observing. */
.reveal{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.reveal-armed{opacity:0;transform:translateY(22px)}
.reveal-2{transition-delay:.1s}
.reveal-3{transition-delay:.2s}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.reveal-armed{opacity:1;transform:none;transition:none}
  .pill{transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  /* links out, hamburger in, at the same width: there is a visible nav control
     at every viewport from 320 up. */
  .nav-links{display:none}
  .nav-toggle{display:block}
  .hero-grid{grid-template-columns:1fr}
  .cred-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof-grid{grid-template-columns:1fr}
}

@media (max-width:700px){
  .nav{padding:.85rem 1.15rem}
  .nav-right .pill-ghost{display:none}
  /* first screen: pill sits just under the nav, headline high in the viewport */
  .hero{min-height:100svh;max-height:none}
  .hero-inner{justify-content:flex-start;padding-block:6.5rem 2rem}
  /* match the reference: one screen. Text finishes by two thirds down, the astronaut stands clear beneath the buttons */
  .hero{min-height:100svh}
  .hero-video,.hero-poster img{object-position:60% 50%}
  .hero-inner{padding-block:5.5rem 0}
  .hero-left{display:flex;flex-direction:column}
  .sub{font-size:.95rem;line-height:1.45;margin-bottom:.9rem}
  .stats{order:5;margin:0 0 1rem;width:100%;justify-content:space-between}
  .cta-row{order:6;flex-direction:column;align-items:flex-start;gap:.6rem}
  .cta-row .pill{flex:0 0 auto;width:auto;min-width:0;padding:.85rem 1.4rem}
  h1{font-size:clamp(34px,9.6vw,46px)}
  .hero-scrim{
    background:
      linear-gradient(to bottom,rgba(0,0,0,.22) 0%,rgba(0,0,0,.08) 40%,rgba(0,0,0,.12) 100%),
      linear-gradient(90deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.06) 55%,rgba(0,0,0,0) 100%);
  }
  .hero-fade{height:14%;background:linear-gradient(to bottom,rgba(11,11,11,0),rgba(11,11,11,.7) 70%,var(--page) 100%)}
  h1,.sub,.stats dt,.stats dd{text-shadow:0 1px 8px rgba(0,0,0,.55)}
  h1{font-size:clamp(38px,10.5vw,52px);max-width:none}
  .sub{font-size:1rem}
  .cta-row{gap:.65rem}
  .cta-row .pill{flex:1 1 100%;justify-content:center}
  .cta-row .pill-light{justify-content:space-between}
  .stats{justify-content:space-between;width:100%;gap:.75rem;margin-top:1.4rem}
  .stats dt{font-size:1.25rem}
  .stats dd{font-size:.72rem}
  .cred-stats{grid-template-columns:1fr}
}

/* ---------- footer link row (added for the inner pages, additive only) ---------- */
.foot-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-bottom:1.1rem}
.foot-nav a{
  display:inline-flex;align-items:center;min-height:36px;
  font-size:.9rem;font-weight:640;color:var(--muted);transition:color .2s;
}
.foot-nav a:hover{color:var(--ink)}

/* ================================================================
   SHARED SITE CHROME (added by the final wiring sweep, 15 Sept 2026)
   Footer columns, the sticky mobile contact bar and the desktop
   WhatsApp float. These load on every page, so the same furniture
   behaves the same way whichever stylesheet a page also pulls in.
   Written last on purpose: .foot-nav.foot-cols beats the plain
   .foot-nav rules in cleaning.css on specificity, not order.
   ================================================================ */

.foot-nav.foot-cols{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1.6rem 1.6rem;margin:.4rem 0 0;align-items:start;
}
.foot-nav.foot-cols h4{
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:#d8d8d8;margin-bottom:.55rem;font-weight:700;
}
.foot-nav.foot-cols a{
  display:block;font-size:.88rem;font-weight:500;color:var(--muted);
  padding:.2rem 0;min-height:0;transition:color .2s;
}
.foot-nav.foot-cols a:hover{color:var(--ink)}
.foot .foot-mid{
  border-top:1px solid var(--hair-soft);margin-top:1.6rem;padding-top:1.3rem;
  font-size:.82rem;color:var(--muted);line-height:1.7;max-width:none;
}
.foot .foot-mid a{text-decoration:underline}

/* Nav links collapse to the hamburger a little earlier now that the row
   carries six items including "Websites for your trade". */
@media (max-width:1080px){
  .nav-links{display:none}
  .nav-toggle{display:block}
}
.nav-links{gap:1.35rem}

/* Desktop WhatsApp float, as the live site carries it. Hidden on phones,
   where the sticky bar does the same job. */
.whatsapp-float{
  position:fixed;right:20px;bottom:22px;z-index:44;
  width:52px;height:52px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#25d366;color:#0b2b16;
  box-shadow:0 10px 26px rgba(0,0,0,.34);transition:transform .2s;
}
.whatsapp-float:hover{transform:translateY(-2px)}
.whatsapp-float svg{width:27px;height:27px}
@media (prefers-reduced-motion:reduce){.whatsapp-float{transition:none}}

/* Sticky mobile contact bar. */
.mbar{display:none}
@media (max-width:720px){
  .whatsapp-float{display:none}
  .mbar{
    display:flex;gap:.55rem;position:fixed;left:0;right:0;bottom:0;z-index:45;
    padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
    background:rgba(11,11,11,.95);backdrop-filter:blur(10px);
    border-top:1px solid var(--hair-soft);
  }
  .mbar a{
    flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
    min-height:46px;border-radius:999px;font-weight:700;font-size:.95rem;
  }
  .mbar .m-wa{background:var(--accent);color:#141004}
  .mbar .m-call{border:1px solid rgba(255,255,255,.28);color:#fff}
  .mbar svg{width:17px;height:17px;flex:none}
  body{padding-bottom:70px}
  .cookie-pill{bottom:78px}
}
@media (max-width:1180px){
  .foot-nav.foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .foot-nav.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .foot-nav.foot-cols{grid-template-columns:1fr}
}

/* The full-screen menu, light variant. Lived only in cleaning.css before the
   wiring sweep, so the trade, blog and case-study pages showed a dark menu
   under a light nav. Defined here so every light page matches. Fully opaque:
   at .97 the page underneath ghosted through on a dark hero. */
.menu{background:#080808}
.menu-light{background:#f3f3f1;color:var(--ink-d,#181818)}
.menu-light .menu-inner a{color:#181818}
.menu-light .menu-inner a:hover{color:#7a5300}
.menu-light .menu-close{border-color:rgba(24,24,24,.14);color:#181818}
.menu-light .menu-close:hover{border-color:#181818}

/* ================================================================
   CROSS-LINK ROWS
   One shared component for the "read more about this" link grids
   added in the second wiring sweep: the services overview grid, the
   compare row and the service page links back to the trade hub.
   Global on purpose, so it works under every body class in the tree.
   ================================================================ */
.xlink-row{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.7rem;margin:1.7rem 0 0;padding:0;list-style:none;
}
.xlink-row li{margin:0}
.xlink-row a{
  display:block;background:#fcfcfb;border:1px solid rgba(24,24,24,.14);
  border-radius:12px;padding:.85rem 1rem;font-weight:600;color:#181818;
  text-decoration:none;transition:border-color .2s,transform .2s;
}
.xlink-row a:hover{border-color:#181818;transform:translateY(-1px)}
.xlink-row a .xs{display:block;font-weight:500;font-size:.86rem;color:#54524e;margin-top:.2rem}
@media (max-width:900px){.xlink-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.xlink-row{grid-template-columns:1fr}}

/* ================================================================
   Nav: the free site check link, sat before the Contact pill.
   Added with the pricing and offer wiring, 15 September 2026.
   ================================================================ */
.nav-check{
  display:inline-flex;align-items:center;gap:.35rem;font-weight:700;font-size:.9rem;
  color:#8a5200;padding:.35rem .1rem;margin-right:.2rem;
  border-bottom:2px solid rgba(138,82,0,.3);transition:border-color .2s,color .2s;
}
.nav-check:hover{border-bottom-color:#8a5200}
.nav:not(.nav-light) .nav-check{color:#f5c842;border-bottom-color:rgba(245,200,66,.42)}
.nav:not(.nav-light) .nav-check:hover{border-bottom-color:#f5c842}
@media (max-width:620px){.nav-check{display:none}}

/* ================================================================
   POLISH PASS, 17 September 2026 (branch polish-taste, findings 1,
   2, 3, 5 and 7). Homepage only.

   The hero is four elements now: H1, one line, the two buttons and
   the numbers. The eyebrow pill, the outline tags and the line under
   the buttons have gone, so the headline sits higher on a phone and
   the seam under the hero carries no box. The three trust facts are
   still on the page, in the answer band directly under the hero.

   Five section eyebrows have gone with them (two survive, "Trusted
   by" and "Fifteen trades, 180 towns"). Each of those sections used
   to open on the eyebrow, so the element under it carried a top
   margin. Those margins go to zero and the section padding does the
   spacing, which keeps the rhythm deliberate rather than nudged.
   ================================================================ */

.hero-left h1{margin-top:0}

.cred > .shell > .cred-stats:first-child{margin-top:0}
.slab > .shell > .slab-line:first-child,
.slab > .shell > .slab-body:first-child,
.slab > .shell > .contact-list:first-child{margin-top:0}
.slab > .shell > h2:first-child{margin-top:0}

/* the closing contact block asks its question out loud */
.slab h2{font-size:clamp(1.3rem,1.1rem + 1vw,1.9rem);font-weight:750;letter-spacing:-.02em;max-width:22ch;line-height:1.2}
/* the proof strip carries its evidence on the link, not beside it */
.cred-stats b a{color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.cred-stats b a:hover{color:var(--accent)}
.cred-stats span a{color:#e4e4e4;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:2px}
.cred-stats span a:hover{color:var(--accent)}

/* The final contact CTA, the one place besides the hero that says
   "See it live". */
.cta-row-contact{margin-top:1.4rem}

/* The mid page offer band is a plain ruled list, not a card wall, so it scans
   on a phone. Defined here because the trade pages do not load inner.css. */
.offer-list{list-style:none;margin:1.5rem 0 0;padding:0;max-width:62ch}
.offer-list li{margin:0;padding:.9rem 0;border-top:1px solid rgba(128,128,128,.32);line-height:1.55}
.offer-list li:last-child{border-bottom:1px solid rgba(128,128,128,.32)}
.offer-list b{font-weight:700}
.band.offer-line .micro{margin-top:1.2rem}

/* The readable WhatsApp number, kept beside the closing buttons so the route
   to the phone is visible and not only inside a link. Plain text, never a
   button or a pill. */
.wa-num{
  margin:.7rem 0 0;font-size:.85rem;line-height:1.4;
  color:currentColor;opacity:.72;text-align:center;
}
.closer .wa-num,.gcta .wa-num,.lcta .wa-num,.bcta .wa-num,.cs-cta .wa-num,.pr-cta .wa-num{text-align:center}

/* Homepage source lines: the named town page is reachable from the source
   phrase itself. */
.tt-srclink{color:inherit;text-decoration:underline;text-underline-offset:2px}
.tt-srclink:hover{text-decoration-thickness:2px}