/* zebrawaste.com: Zebra Waste Disposal Services, Fareham. Its own look (coastal: navy, sea blue, white and sand,
   with the yellow of the skips for anything to press). Nothing here is shared with tauruswaste.com's site.css;
   the class names the site's scripts look for (menu, cookie notice, offer, chat, prices, picker, booking) are kept. */
@font-face { font-family: "Inter"; src: url("/fonts/inter.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  --navy: #0b2540;
  --navy-2: #123a60;
  --sea: #1683b5;
  --sea-2: #0f6c97;
  --sky: #5cc8ee;
  --foam: #eaf5fa;
  --foam-2: #d7ebf4;
  --sand: #f7f2e8;
  --yellow: #ffc72c;
  --yellow-2: #f2b300;
  --ink: #10202f;
  --ink-2: #4a5c6d;
  --line: #d5e3ec;
  --white: #fff;
  --ok: #1f8a55;
  --warn: #b5551a;
  --r: 18px;
  --r-sm: 12px;
  --shadow: 0 1px 2px rgba(11, 37, 64, .06), 0 10px 30px rgba(11, 37, 64, .08);
  --shadow-lift: 0 2px 4px rgba(11, 37, 64, .08), 0 22px 50px rgba(11, 37, 64, .16);
  --wrap: 1180px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* the names the shared pieces (chat, offer, booking note) were written with */
  --red: var(--sea); --red-dark: var(--navy); --red-ink: var(--sea-2); --red-ink-2: var(--navy); --red-tint: var(--foam);
  --surface: #fff; --grey: var(--foam); --grey-2: var(--foam-2); --charcoal: var(--navy); --yellow-dark: var(--yellow-2);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--sea-2); text-underline-offset: .18em; }
a:hover { color: var(--navy); }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.1; color: var(--navy); font-weight: 800; letter-spacing: -.03em; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.55rem); }
h3 { font-size: 1.25rem; letter-spacing: -.015em; }
p { margin: 0 0 1em; }
address { font-style: normal; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 1000px; margin-left: auto; margin-right: auto; }
.center { text-align: center; }
.small { font-size: .9rem; }
.muted { color: var(--ink-2); }
.hd { font-weight: 800; color: var(--navy); font-size: 1.1rem; letter-spacing: -.01em; margin-bottom: .35em; }
.icon { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; display: inline-block; vertical-align: -.18em; }
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 12px; top: 12px; z-index: 2000; background: var(--yellow); color: var(--navy); padding: 10px 16px; border-radius: 10px; font-weight: 700; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.kicker, .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sea); }
.eyebrow .icon { display: none; }
.kicker::before, .eyebrow::before { content: ""; width: 22px; height: 8px; background: no-repeat center/100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 8'%3E%3Cpath d='M1 5c3-3 6 3 10 0s7-3 10 0' fill='none' stroke='%231683b5' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------- buttons: rounded pills */
.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 999px; border: 2px solid transparent; font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform .15s, background .15s, color .15s, border-color .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-2px); }
.btn-yellow { background: var(--yellow); color: var(--navy); box-shadow: 0 6px 18px rgba(242, 179, 0, .35); }
.btn-yellow:hover { background: #ffd24f; color: var(--navy); }
.btn-primary { background: var(--sea); color: #fff; }
.btn-primary:hover { background: var(--sea-2); color: #fff; }
.btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-ghost { border-color: var(--line); color: var(--navy); background: #fff; }
.btn-ghost-light { border-color: rgba(255, 255, 255, .7); color: #fff; background: rgba(255, 255, 255, .08); }
.btn-ghost-light:hover { background: #fff; color: var(--navy); }
.btn-lg { padding: 15px 30px; font-size: 1.08rem; }
.btn-sm { padding: 8px 16px; font-size: .9rem; }
.btn-block { width: 100%; }
.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--sea-2); }

/* ---------------------------------------------------------------- top strip and header */
.z-top { background: var(--navy); color: #cfe3f0; font-size: .85rem; }
.z-top-in { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 38px; }
.z-top a { color: #fff; text-decoration: none; font-weight: 700; }
.z-top .icon { color: var(--sky); }
.z-top-part a { font-weight: 600; color: #cfe3f0; text-decoration: underline; text-decoration-color: rgba(207, 227, 240, .4); }
@media (max-width: 760px) { .z-top-hours, .z-top-part { display: none; } .z-top-in { justify-content: center; } }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); transition: box-shadow .2s; }
.site-header.scrolled { box-shadow: 0 10px 30px rgba(11, 37, 64, .1); }
.z-head-in { display: flex; align-items: center; gap: 18px; min-height: 88px; }
.z-brand { flex: none; }
.z-brand img { width: 190px; height: auto; border-radius: 8px; box-shadow: 0 4px 12px rgba(125, 26, 38, .25); }
.menu-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--foam); color: var(--navy); font: inherit; font-weight: 700; cursor: pointer; }
.site-nav { display: none; }
.site-nav.open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 20px 40px rgba(11, 37, 64, .14); padding: 10px 22px 22px; max-height: calc(100vh - 120px); overflow: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav li a { display: block; padding: 13px 4px; border-bottom: 1px solid var(--foam-2); color: var(--navy); font-weight: 700; text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--sea); }
.z-nav-cta { display: grid; gap: 10px; margin-top: 16px; }
.z-phone { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: var(--foam); color: var(--navy); font-weight: 800; text-decoration: none; white-space: nowrap; }
@media (min-width: 1100px) {
  .menu-toggle { display: none; }
  .site-nav, .site-nav.open { display: flex; position: static; align-items: center; gap: 20px; flex: 1; padding: 0; box-shadow: none; border: 0; background: none; max-height: none; overflow: visible; }
  .site-nav ul { display: flex; gap: 4px; margin: 0 auto; }
  .site-nav li a { border: 0; padding: 9px 11px; border-radius: 999px; font-weight: 600; font-size: .95rem; white-space: nowrap; }
  .site-nav li a:hover { background: var(--foam); }
  .site-nav a[aria-current="page"] { background: var(--foam); color: var(--navy); }
  .z-nav-cta { display: flex; margin: 0; gap: 10px; }
  .z-brand img { width: 230px; }
}

/* breadcrumbs: a thin line on the sea-blue header */
.crumbs { position: relative; z-index: 2; padding-top: 14px; padding-bottom: 0; margin-bottom: -44px; font-size: .85rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; color: #bfe3f3; }
.crumbs li + li::before { content: "›"; margin-right: 6px; opacity: .7; }
.crumbs a { color: #fff; text-decoration: none; }

/* ---------------------------------------------------------------- the sea-blue header of every page */
.page-hero, .z-hero { position: relative; color: #fff; background: radial-gradient(120% 140% at 85% 0%, #1f9bd0 0%, var(--sea) 30%, var(--navy-2) 70%, var(--navy) 100%); padding: 64px 0 104px; overflow: hidden; }
.page-hero::after, .z-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 70px; background: no-repeat bottom/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 38c160-30 320-30 480 0s320 30 480 0 320-30 480 0v32H0z' fill='%23ffffff'/%3E%3Cpath d='M0 48c160-24 320-24 480 0s320 24 480 0 320-24 480 0' fill='none' stroke='%235cc8ee' stroke-opacity='.45' stroke-width='3'/%3E%3C/svg%3E"); }
.page-hero.on-sand::after, .z-hero.on-sand::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 38c160-30 320-30 480 0s320 30 480 0 320-30 480 0v32H0z' fill='%23f7f2e8'/%3E%3C/svg%3E"); }
.page-hero h1, .page-hero h2, .z-hero h1 { color: #fff; }
.page-hero h1 small, .z-hero h1 small { display: block; font-size: .42em; font-weight: 600; letter-spacing: 0; margin-top: .3em; color: #d6eef8; }
.page-hero h1 small.ex { display: inline; margin-left: .4em; }
.page-hero .eyebrow, .z-hero .kicker { color: var(--sky); }
.page-hero .eyebrow::before, .z-hero .kicker::before { filter: brightness(2.2); }
.page-hero .lead, .z-hero .lead { font-size: 1.18rem; color: #e1f1f8; max-width: 640px; }
.page-hero .lead a { color: #fff; }
.page-hero-inner { position: relative; z-index: 1; display: grid; gap: 34px; align-items: center; }
@media (min-width: 900px) { .page-hero-inner { grid-template-columns: 1.3fr 1fr; gap: 50px; } }
.page-hero-img img { margin: 0 auto; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .35)); }
.page-hero-img.photo img { border-radius: var(--r); border: 4px solid rgba(255, 255, 255, .9); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-actions .btn-outline { border-color: rgba(255, 255, 255, .75); color: #fff; }
.hero-actions .btn-outline:hover { background: #fff; color: var(--navy); }
.page-hero .pc-check { margin-top: 26px; max-width: 480px; }
/* the price on a header */
.price-both strong { font-weight: 800; }
.price-both small { color: inherit; opacity: .78; font-weight: 600; margin-left: .3em; }
.page-hero .price-both small, .z-hero .price-both small { color: #d6eef8; }

/* ---------------------------------------------------------------- sections */
.section { padding: 58px 0; }
.section.sand, .section.dark { background: var(--sand); }
.section.foam { background: var(--foam); }
.section.navy { background: var(--navy); color: #dcebf4; }
.section.navy h2, .section.navy h3 { color: #fff; }
.section-head { max-width: 880px; margin-bottom: 30px; }
.section-head.center { margin-left: auto; margin-right: auto; }
.section-head p { color: var(--ink-2); font-size: 1.1rem; }
.split-head { display: grid; gap: 10px 40px; max-width: none; align-items: end; }
@media (min-width: 880px) { .split-head { grid-template-columns: 1.1fr 1fr; } }
.split { display: grid; gap: 34px; }
@media (min-width: 880px) { .split { grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: start; } }
.panel { background: #fff; border-radius: var(--r); padding: 28px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.section.sand .panel, .section.dark .panel { border-color: transparent; }
.panel h2 { font-size: 1.6rem; }
.ticks, .crosses { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 10px; }
.ticks li, .crosses li { display: flex; gap: 10px; align-items: flex-start; }
.ticks .icon { color: #fff; background: var(--sea); border-radius: 50%; padding: 3px; width: 1.25em; height: 1.25em; margin-top: .15em; }
.crosses .icon { color: #fff; background: #c8462d; border-radius: 50%; padding: 3px; width: 1.25em; height: 1.25em; margin-top: .15em; }
.ticks.small li { font-size: .95rem; }
.link-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.link-list.inline { display: flex; flex-wrap: wrap; gap: 10px; }
.link-list.inline a { display: inline-block; padding: 9px 18px; border-radius: 999px; background: var(--foam); text-decoration: none; font-weight: 700; color: var(--navy); }
.town-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.town-list a { display: inline-block; padding: 9px 18px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); color: var(--navy); font-weight: 700; text-decoration: none; transition: border-color .15s, background .15s; }
.town-list a:hover { border-color: var(--sea); background: var(--foam); }
.stand-out { font-weight: 800; color: var(--sea-2); }

/* ---------------------------------------------------------------- Zebra's own blocks */
/* home: big header with the lorry on a disc of sea foam */
.z-hero { padding: 54px 0 140px; }
.z-hero-in { position: relative; z-index: 1; display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) { .z-hero-in { grid-template-columns: 1.15fr 1fr; } }
.z-hero h1 { font-size: clamp(2.6rem, 6.2vw, 4.6rem); letter-spacing: -.04em; }
.z-hero h1 em { font-style: normal; color: var(--yellow); }
.z-hero-art { position: relative; }
.z-hero-art::before { content: ""; position: absolute; inset: 6% 4% 0; border-radius: 50%; background: radial-gradient(circle, rgba(92, 200, 238, .45), rgba(92, 200, 238, 0) 68%); }
.z-hero-art img { position: relative; margin: 0 auto; width: min(520px, 100%); filter: drop-shadow(0 30px 34px rgba(0, 0, 0, .4)); }
.z-hero-badge { position: absolute; right: 4%; top: 2%; display: grid; place-items: center; width: 118px; height: 118px; border-radius: 50%; background: var(--yellow); color: var(--navy); text-align: center; font-weight: 800; line-height: 1.05; transform: rotate(8deg); box-shadow: 0 14px 30px rgba(0, 0, 0, .25); }
.z-hero-badge small { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.z-hero-badge b { font-size: 1.5rem; letter-spacing: -.03em; }
@media (max-width: 560px) { .z-hero-badge { width: 92px; height: 92px; } .z-hero-badge b { font-size: 1.15rem; } }

/* a white card with the postcode box, sitting over the wave */
.z-check { position: relative; z-index: 3; margin-top: -96px; }
.z-check-card { background: #fff; border-radius: 24px; box-shadow: var(--shadow-lift); padding: 28px; display: grid; gap: 20px; }
@media (min-width: 900px) { .z-check-card { grid-template-columns: 1fr 1.2fr; align-items: center; padding: 34px 40px; } }
.z-check-card h2 { font-size: 1.6rem; margin-bottom: .2em; }
.z-check-card p { margin: 0; color: var(--ink-2); }

/* four facts in a row, each in a foam circle */
.z-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .z-facts { grid-template-columns: repeat(4, 1fr); } }
.z-facts li { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 22px 12px; }
.z-facts .z-ring { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--foam); color: var(--sea); margin-bottom: 6px; }
.z-facts .z-ring .icon { width: 28px; height: 28px; }
.z-facts strong { font-size: 1.6rem; color: var(--navy); letter-spacing: -.03em; line-height: 1.1; }
.z-facts span { color: var(--ink-2); font-size: .95rem; }

/* how it works: three steps along a wave line */
.z-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; counter-reset: step; position: relative; }
@media (min-width: 880px) { .z-steps { grid-template-columns: repeat(3, 1fr); gap: 34px; } .z-steps::before { content: ""; position: absolute; left: 8%; right: 8%; top: 30px; height: 12px; background: repeat-x center/120px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M0 6c15-6 30 6 60 0s45-6 60 0' fill='none' stroke='%231683b5' stroke-opacity='.35' stroke-width='2.5'/%3E%3C/svg%3E"); } }
.z-steps li { position: relative; text-align: center; padding: 0 10px; }
.z-steps li::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; font-size: 1.4rem; position: relative; z-index: 1; box-shadow: 0 0 0 8px var(--sand); }
.section:not(.sand):not(.dark) .z-steps li::before { box-shadow: 0 0 0 8px #fff; }
.z-steps p { color: var(--ink-2); }

/* skip sizes as tall cards */
.z-sizes { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.z-size { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--r); padding: 44px 20px 20px; box-shadow: var(--shadow); border: 1px solid var(--line); transition: transform .2s, box-shadow .2s; }
.z-size:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.z-size > svg { margin: 0 auto 10px; height: 92px; width: auto; }
.z-size h3 { margin-bottom: .15em; }
.z-size .z-yd { position: absolute; top: 14px; left: 14px; padding: 4px 10px; border-radius: 999px; background: var(--foam); color: var(--sea-2); font-weight: 800; font-size: .8rem; }
.z-size p { color: var(--ink-2); font-size: .95rem; margin-bottom: .6em; }
.z-size .more { margin-top: auto; }

/* services: icon tiles */
.z-tiles { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.z-tile { position: relative; background: #fff; border-radius: var(--r); padding: 26px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.z-tile .z-ring { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, var(--sea), var(--navy-2)); color: #fff; margin-bottom: 16px; }
.z-tile .z-ring .icon { width: 24px; height: 24px; }
.z-tile p { color: var(--ink-2); margin: 0; }

/* areas: towns on a sea-blue panel, zones beside */
.z-area { display: grid; gap: 26px; }
@media (min-width: 960px) { .z-area { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.z-area-towns { background: linear-gradient(160deg, var(--navy-2), var(--navy)); color: #dcebf4; border-radius: 24px; padding: 30px; }
.z-area-towns h3 { color: #fff; }
.z-area-towns .town-list a { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #fff; }
.z-area-towns .town-list a:hover { background: #fff; color: var(--navy); }
.z-zones { display: grid; gap: 14px; }
.z-zone { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: center; background: #fff; border-radius: var(--r-sm); padding: 18px 20px; box-shadow: var(--shadow); border-left: 6px solid var(--sea); }
.z-zone b { grid-row: span 2; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--foam); color: var(--navy); font-size: 1.3rem; }
.z-zone p { margin: 0; color: var(--ink-2); font-size: .92rem; }
.z-zone .z-from { color: var(--navy); font-size: 1rem; font-weight: 700; }

/* the yard: an address card on a map-coloured block */
.z-yard { display: grid; gap: 26px; }
@media (min-width: 900px) { .z-yard { grid-template-columns: 1fr 1.2fr; align-items: stretch; } }
.z-yard-card { background: var(--navy); color: #dcebf4; border-radius: 24px; padding: 32px; }
.z-yard-card h2, .z-yard-card h3, .z-yard-card strong { color: #fff; }
.z-yard-card a { color: #fff; }
.z-yard-card .icon { color: var(--sky); margin-right: 6px; }
.z-yard-card p { margin-bottom: .8em; }

/* questions */
.faq { display: grid; gap: 12px; }
.faq details { background: #fff; border-radius: var(--r-sm); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(11, 37, 64, .04); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 56px 18px 22px; font-weight: 700; color: var(--navy); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--foam); color: var(--sea); font-size: 1.3rem; font-weight: 700; }
.faq details[open] summary::after { content: "–"; }
.faq-a { padding: 0 22px 18px; color: var(--ink-2); }
.faq-a p:last-child { margin-bottom: 0; }

/* reviews */
.review-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.review { margin: 0; background: #fff; border-radius: var(--r); padding: 26px; box-shadow: var(--shadow); position: relative; }
.review::before { content: "“"; position: absolute; right: 20px; top: 2px; font-size: 5rem; line-height: 1; color: var(--foam-2); font-family: Georgia, serif; }
.review blockquote { margin: 10px 0 16px; color: var(--ink); }
.review figcaption { display: grid; font-size: .9rem; color: var(--ink-2); }
.review figcaption strong { color: var(--navy); }
.review-stars { display: flex; gap: 2px; color: var(--yellow-2); }
.review-stars .icon.dim { color: var(--foam-2); }
.review-actions { margin-top: 24px; text-align: center; }

/* closing band: navy with a wave on top */
.cta-band { position: relative; background: var(--navy); color: #dcebf4; padding: 96px 0 70px; }
.cta-band::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 60px; background: no-repeat top/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v22c-160 30-320 30-480 0s-320-30-480 0-320 30-480 0z' fill='%23ffffff'/%3E%3C/svg%3E"); }
.section.sand + .cta-band::before, .section.dark + .cta-band::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v22c-160 30-320 30-480 0s-320-30-480 0-320 30-480 0z' fill='%23f7f2e8'/%3E%3C/svg%3E"); }
.cta-inner { display: grid; gap: 24px; align-items: center; }
@media (min-width: 880px) { .cta-inner { grid-template-columns: 1fr auto; } }
.cta-band h2 { color: #fff; }
.cta-band p { margin: 0; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------------------------------------------------------- postcode boxes and prices */
.pc-check { display: grid; gap: 8px; }
.pc-check label { font-weight: 800; color: var(--navy); }
.page-hero .pc-check label, .z-hero .pc-check label { color: #fff; }
.pc-row { display: flex; gap: 8px; padding: 6px; background: #fff; border-radius: 999px; border: 2px solid var(--line); box-shadow: 0 6px 18px rgba(11, 37, 64, .08); }
.pc-row input { flex: 1; min-width: 0; border: 0; padding: 10px 16px; font: inherit; font-size: 1.05rem; font-weight: 700; text-transform: uppercase; background: transparent; color: var(--navy); border-radius: 999px; }
.pc-row input::placeholder { text-transform: none; font-weight: 500; color: #8aa0b2; }
.pc-row input:focus { outline: none; }
.pc-row:focus-within { border-color: var(--sea); }
.pc-row .btn { flex: none; padding: 11px 22px; }
.pc-result { margin: 4px 0 0; min-height: 1.4em; font-weight: 600; font-size: .98rem; }
.pc-result.ok { color: var(--ok); }
.pc-result.warn { color: var(--warn); }
.page-hero .pc-result.ok, .page-hero .pc-result.warn, .page-hero .pc-result { color: #fff; }
.pc-result a { margin-left: 6px; font-weight: 800; }

.price-finder .pc-check { max-width: 560px; margin: 0 0 28px; }
.price-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); margin-bottom: 18px; }
.price-card { display: flex; flex-direction: column; background: #fff; border-radius: var(--r); padding: 22px 20px 20px; box-shadow: var(--shadow); border: 1px solid var(--line); border-bottom: 5px solid var(--sea); transition: transform .2s, box-shadow .2s; }
.price-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.price-card[hidden] { display: none; }
.price-card h3 { margin-bottom: .2em; font-size: 1.15rem; }
.price-card-note { color: var(--ink-2); font-size: .9rem; margin-bottom: 14px; }
.price-card-price { margin: auto 0 16px; }
.price-from { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: var(--sea); }
.price-card .price-both strong { display: block; color: var(--navy); font-size: 2rem; letter-spacing: -.04em; line-height: 1.1; }
.price-card .price-both small { display: block; margin: 0; }
.price-card .btn { padding: 11px 14px; font-size: .95rem; }
.price-call { display: block; font-weight: 800; color: var(--navy); font-size: 1.1rem; }
.table-scroll { overflow-x: auto; margin-bottom: 22px; border-radius: var(--r); box-shadow: var(--shadow); background: #fff; }
.price-table { width: 100%; min-width: 520px; border-collapse: collapse; }
.price-table caption { position: absolute; left: -9999px; }
.price-table th, .price-table td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--foam-2); }
.price-table thead th { background: var(--navy); color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.price-table tbody th small { display: block; font-weight: 600; font-size: .82rem; color: var(--ink-2); }
.price-table tbody tr:nth-child(even) { background: #f8fbfd; }
.price-table .price-both strong { color: var(--navy); font-size: 1.25em; }
.price-table .price-both small { display: block; margin: 0; }
.zone-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.zone h3 { margin-bottom: .3em; }
.zone p { margin: 0; color: var(--ink-2); font-size: .95rem; }

/* ---------------------------------------------------------------- the size picker */
.picker { background: #fff; border-radius: 24px; box-shadow: var(--shadow-lift); padding: 26px; }
.picker-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; background: var(--foam); border-radius: 999px; margin-bottom: 20px; }
.picker-tabs button { font: inherit; font-weight: 700; border: 0; border-radius: 999px; padding: 9px 18px; background: transparent; color: var(--ink-2); cursor: pointer; }
.picker-tabs button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.picker-stage { background: linear-gradient(180deg, var(--foam) 0%, #fff 100%); border-radius: 16px; padding: 22px 16px 10px; }
.picker-scene { width: 100%; }
.picker-range { margin: 20px 0 4px; display: block; width: 100%; accent-color: var(--sea); }
.picker-marks { display: flex; justify-content: space-between; font-weight: 700; color: var(--ink-2); font-size: .85rem; }
.picker-body { display: grid; gap: 28px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--foam-2); }
@media (min-width: 880px) { .picker-body { grid-template-columns: 1.15fr 1fr; align-items: start; } }
.picker-body h3 { font-size: 1.7rem; }
.bag-count { font-size: 1.1rem; color: var(--ink-2); margin-bottom: 4px; }
.picker-note { font-size: .92rem; color: var(--sea-2); font-weight: 700; min-height: 1em; }
.picker-dims { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 18px; }
.picker-dims div { background: var(--foam); border-radius: 12px; padding: 12px 14px; }
.picker-dims dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--sea); }
.picker-dims dd { margin: 0; font-weight: 800; font-size: 1.3rem; color: var(--navy); }

/* ---------------------------------------------------------------- town pages and lists */
.hero-facts { position: relative; z-index: 2; margin-top: -70px; }
.facts { margin: 0; display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); background: var(--foam-2); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lift); }
.facts > div { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; background: #fff; padding: 18px 20px; }
.facts .icon { grid-row: span 2; width: 38px; height: 38px; padding: 8px; border-radius: 50%; background: var(--foam); color: var(--sea); }
.facts dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--sea); }
.facts dd { margin: 0; font-weight: 700; color: var(--navy); }
.area-table { width: 100%; border-collapse: collapse; }
.area-table th, .area-table td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--foam-2); }
.area-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--sea); }
.area-table td a { font-weight: 700; }

/* yes / no lists */
.yesno { display: grid; gap: 18px; }
@media (min-width: 820px) { .yesno { grid-template-columns: 1fr 1fr; } }
.yesno > div { background: #fff; border-radius: var(--r); padding: 26px; box-shadow: var(--shadow); }
.yesno .hd { display: flex; align-items: center; gap: 10px; }
.yesno .yes .hd .icon { color: #fff; background: var(--sea); border-radius: 50%; padding: 4px; width: 28px; height: 28px; }
.yesno .no .hd .icon { color: #fff; background: #c8462d; border-radius: 50%; padding: 4px; width: 28px; height: 28px; }
.pill-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pill-list li { padding: 7px 14px; border-radius: 999px; background: var(--foam); color: var(--navy); font-weight: 600; font-size: .92rem; }
.no .pill-list li { background: #fbece8; color: #8c2a17; }

/* ---------------------------------------------------------------- a yard map (fetched only when asked for) */
.yard-map { display: grid; gap: 10px; justify-items: center; align-content: center; min-height: 260px; height: 100%; border-radius: 24px; background: var(--foam) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cpath d='M0 20c15-8 30 8 60 0s45-8 60 0' fill='none' stroke='%231683b5' stroke-opacity='.12' stroke-width='2'/%3E%3C/svg%3E") repeat center/120px 40px; padding: 20px; text-align: center; overflow: hidden; }
.yard-map a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.yard-map .map-show { padding: 8px 16px; font-size: .9rem; }
.yard-map.shown { padding: 0; display: block; }
.yard-map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

/* ---------------------------------------------------------------- documents, terms, articles, forms */
.prose { padding-top: 10px; font-size: 1.05rem; }
.prose h2 { margin-top: 1.5em; font-size: 1.6rem; }
.terms-list { padding-left: 1.4em; }
.terms-list > li { margin-bottom: .9em; }
.terms-parts { list-style: none; padding-left: .4em; }
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.doc-row { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 14px; background: #fff; border-radius: var(--r-sm); padding: 14px 16px; box-shadow: var(--shadow); }
.doc-row > a:last-child { display: flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; color: var(--navy); }
.doc-row small { padding: 2px 8px; border-radius: 6px; background: var(--foam); color: var(--sea-2); font-weight: 800; font-size: .72rem; }
.doc-get { padding: 8px 16px; font-size: .9rem; }
.cookie-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: .95rem; }
.cookie-table th, .cookie-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--foam-2); }
.embed-form { display: block; width: 100%; border: 0; background: #fff; border-radius: var(--r); box-shadow: var(--shadow); margin-bottom: 14px; }
.contact-strip { display: grid; gap: 12px; }
@media (min-width: 720px) { .contact-strip { grid-template-columns: repeat(3, 1fr); } }
.contact-strip a { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--r-sm); background: var(--foam); color: var(--navy); text-decoration: none; font-weight: 700; }
.contact-strip small { display: block; font-weight: 600; color: var(--ink-2); font-size: .8rem; }
.contact-strip .icon { color: var(--sea); width: 26px; height: 26px; }

/* ---------------------------------------------------------------- booking (Checkfront) */
.booking { background: #fff; border-radius: 24px; box-shadow: var(--shadow-lift); padding: 30px; max-width: 900px; margin: 0 auto 22px; border-top: 6px solid var(--sea); }
.booking-pc { max-width: 560px; margin: 0 auto; }
.booking-pc label { font-size: 1.15rem; }
#CHECKFRONT_WIDGET_01 { margin-top: 22px; }
#CHECKFRONT_WIDGET_01 iframe { scroll-margin-top: 110px; }
.booking-paused { max-width: 700px; margin: 0 auto 24px; text-align: center; }
.info-box { display: flex; align-items: flex-start; gap: 12px; margin: 18px 0; padding: 14px 18px; border-radius: var(--r-sm); background: #fff8e1; border: 1px solid #f0d98a; color: var(--ink); }
.info-box p { margin: 0; }
.info-mark { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--yellow-2); color: #fff; font-weight: 800; font-family: Georgia, serif; font-style: italic; }
@media (max-width: 760px) {
  .page-booking .chat-fab, .page-booking .chat-panel { display: none !important; }
  .page-booking .action-bar { display: none !important; }
  .page-booking .page-hero { padding: 34px 0 70px; }
  .page-booking .page-hero .lead { font-size: 1rem; }
  .page-booking .booking { margin: -40px -12px 18px; padding: 18px 10px 10px; border-radius: 18px; }
  .page-booking .pc-result { scroll-margin-top: 120px; }
}
.page-booking .chat-fab, .page-booking .chat-panel { display: none !important; }

/* ---------------------------------------------------------------- footer: deep navy with a wave on top */
.site-footer { position: relative; background: var(--navy); color: #b9cfdf; font-size: .95rem; }
.cta-band + .site-footer { border-top: 1px solid rgba(255, 255, 255, .08); }
main > :last-child:not(.cta-band) { margin-bottom: 0; }
.z-foot { padding: 60px 0 30px; display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.z-foot img { width: 220px; margin-bottom: 16px; border-radius: 8px; }
.z-foot .hd { color: #fff; font-size: 1rem; }
.z-foot a { color: #fff; text-decoration: none; }
.z-foot a:hover { color: var(--sky); }
.z-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.z-foot .icon { color: var(--sky); margin-right: 6px; }
.z-foot p { margin: 0 0 .7em; }
.z-sister { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .06); font-size: .9rem; }
.z-legal { border-top: 1px solid rgba(255, 255, 255, .1); padding: 22px 0 28px; display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: space-between; align-items: center; font-size: .85rem; }
.z-legal a { color: #fff; }
.z-cards { display: flex; flex-wrap: wrap; gap: 6px; }
.z-cards img { width: 46px; height: auto; border-radius: 4px; background: #fff; }
@media (max-width: 899px) { .z-legal { padding-bottom: 100px; } }

/* call / book bar on phones, and back to top */
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); box-shadow: 0 -8px 24px rgba(11, 37, 64, .14); transform: translateY(110%); transition: transform .25s; }
.action-bar.show { transform: none; }
.action-bar .btn { padding: 12px; }
.action-bar .btn-ghost { background: var(--navy); color: #fff; border-color: var(--navy); }
@media (min-width: 900px) { .action-bar { display: none; } }
.to-top { position: fixed; right: 18px; bottom: 18px; z-index: 44; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--navy); color: #fff; box-shadow: var(--shadow-lift); opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .2s, transform .2s; }
.to-top .icon { transform: rotate(-90deg); }
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
@media (max-width: 899px) { .to-top { bottom: calc(84px + env(safe-area-inset-bottom)); right: 12px; width: 42px; height: 42px; } }
body.has-chat .to-top { bottom: 96px; }

/* ---------------------------------------------------------------- cookie notice */
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--navy); color: #fff; box-shadow: 0 -8px 24px rgba(0, 0, 0, .25); font-size: .92rem; transition: opacity .6s, transform .6s; }
.cookie-bar[hidden] { display: none; }
.cookie-bar.going { opacity: 0; transform: translateY(100%); }
.cookie-inner { display: flex; align-items: center; gap: 16px; padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.cookie-inner p { margin: 0; flex: 1; }
.cookie-inner a { color: var(--sky); }
.cookie-bar .btn { padding: 8px 20px; }

/* ---------------------------------------------------------------- the offer: a pop-up card */
.promo[hidden] { display: none; }
.promo:not([hidden]) { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 22px; background: rgba(11, 37, 64, .66); color: #fff; animation: promo-dim .3s ease both; }
.promo-inner { position: relative; display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 440px; padding: 40px 30px 30px; border-radius: 26px; text-align: center; background: radial-gradient(120% 120% at 80% 0%, #1f9bd0 0%, var(--sea) 35%, var(--navy) 100%); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); border: 2px solid rgba(255, 255, 255, .2); animation: promo-pop .35s cubic-bezier(.2, .9, .3, 1.2) both; }
.promo p { margin: 0; line-height: 1.35; }
.promo p > strong { display: block; font-size: 1.7rem; line-height: 1.15; letter-spacing: -.02em; }
.promo p > span { display: block; margin-top: 10px; }
.promo-code b { display: inline-block; margin-left: 4px; padding: 5px 14px; border-radius: 10px; background: #fff; color: var(--navy); font-size: 1.15rem; letter-spacing: .08em; }
.promo .btn { align-self: center; min-width: 220px; }
.promo-close { align-self: center; border: 1.5px solid rgba(255, 255, 255, .6); background: transparent; color: #fff; border-radius: 999px; padding: 7px 18px; font: inherit; cursor: pointer; }
@keyframes promo-dim { from { opacity: 0; } to { opacity: 1; } }
@keyframes promo-pop { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
.promo-strip { background: var(--yellow); color: var(--navy); }
.promo-strip[hidden] { display: none; }
.promo-strip-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 28px; padding-top: 14px; padding-bottom: 14px; }
.promo-strip p { margin: 0; }
.promo-strip-code b { display: inline-block; margin: 0 6px; padding: 3px 12px; border-radius: 8px; background: var(--navy); color: #fff; letter-spacing: .08em; }

/* ---------------------------------------------------------------- the chat (static/js/chat.js), in Zebra's colours */
.chat-fab { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--chat-lift, 0px)); z-index: 60; display: inline-flex; align-items: center; gap: 12px; padding: 8px 22px 8px 8px; border: 2px solid rgba(255, 255, 255, .85); border-radius: 999px; background: linear-gradient(135deg, var(--sea), var(--navy)); color: #fff; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 12px 30px rgba(11, 37, 64, .4); animation: chat-in .45s ease both; }
.chat-fab-icon { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--yellow); color: var(--navy); flex: none; }
.chat-fab-icon i { position: absolute; right: 0; top: 0; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #fff; background: #9fb3c3; }
.chat-fab.is-open .chat-fab-icon i { background: #2fbf71; animation: chat-pulse 2.2s ease-out infinite; }
.chat-fab.has-new .chat-fab-icon i { background: #fff; border-color: var(--sea); animation: chat-pulse 1.1s ease-out infinite; }
.chat-fab-words { display: grid; line-height: 1.2; }
.chat-fab-text { font-weight: 800; }
.chat-fab-sub { font-size: .8125rem; opacity: .88; }
.chat-fab[aria-expanded="true"] { padding-right: 8px; }
.chat-fab[aria-expanded="true"] .chat-fab-words { display: none; }
@keyframes chat-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes chat-pulse { 0% { box-shadow: 0 0 0 0 rgba(47, 191, 113, .7); } 100% { box-shadow: 0 0 0 10px rgba(47, 191, 113, 0); } }
.chat-panel { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 78px + var(--chat-lift, 0px)); z-index: 60; width: min(372px, calc(100vw - 32px)); max-height: min(600px, calc(100vh - 126px - var(--chat-lift, 0px))); display: flex; flex-direction: column; background: #fff; color: var(--ink); border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px rgba(11, 37, 64, .3); animation: chat-in .22s ease both; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 12px 14px 20px; background: var(--navy); color: #fff; }
.chat-head-dot { width: 10px; height: 10px; border-radius: 50%; background: #9fb3c3; flex: none; }
.chat-head.is-live .chat-head-dot { background: #2fbf71; }
.chat-head-words { display: grid; flex: 1; line-height: 1.25; }
.chat-head-words strong { font-weight: 800; }
.chat-head-words span { font-size: .8125rem; opacity: .8; }
.chat-x { border: 0; background: transparent; color: #fff; font-size: 1.6rem; line-height: 1; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }
.chat-form { display: grid; gap: 12px; padding: 16px 20px 20px; overflow-y: auto; }
.chat-form label { display: grid; gap: 5px; font-size: .8125rem; font-weight: 600; color: var(--ink-2); }
.chat-form input[type=text], .chat-form textarea, .chat-send textarea, .chat-leave input { font: inherit; font-size: 16px; padding: 11px 14px; border: 1.5px solid transparent; border-radius: 12px; width: 100%; background: var(--foam); color: var(--ink); }
.chat-form input[type=text]:focus, .chat-form textarea:focus, .chat-send textarea:focus, .chat-leave input:focus { outline: none; border-color: var(--sea); background: #fff; }
.chat-form textarea, .chat-send textarea { resize: none; }
.chat-yards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; background: var(--foam); border-radius: 14px; }
.chat-form .chat-yard { display: block; position: relative; text-align: center; padding: 10px 6px; border-radius: 10px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.chat-yard input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chat-yard:has(input:checked) { background: #fff; color: var(--navy); box-shadow: 0 1px 4px rgba(11, 37, 64, .14); }
.chat-note { margin: 0; font-size: .9375rem; color: var(--ink-2); }
.chat-panel > .chat-note { padding: 12px 20px; }
.chat-error { margin: 0; padding: 9px 12px; border-radius: 10px; background: #fbece8; color: #8c2a17; font-size: .875rem; }
.chat-error[hidden], .chat-trap { display: none; }
.chat-form .btn { width: 100%; }
.chat-list { flex: 1; min-height: 150px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 16px; }
.chat-msg { max-width: 82%; padding: 9px 13px; border-radius: 16px 16px 16px 5px; background: var(--foam); align-self: flex-start; }
.chat-msg.me { align-self: flex-end; background: var(--sea); color: #fff; border-radius: 16px 16px 5px 16px; }
.chat-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9375rem; line-height: 1.4; }
.chat-time { display: block; margin-top: 2px; font-size: .6875rem; opacity: .7; }
.chat-send { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px 12px; border-top: 1px solid var(--foam-2); }
.chat-send textarea { border-radius: 22px; max-height: 120px; }
.chat-go { flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--sea); color: #fff; display: grid; place-items: center; cursor: pointer; }
.chat-leave { display: grid; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--foam-2); }
.chat-panel > .btn { margin: 0 20px 16px; }
@media (max-width: 480px) { .chat-panel { left: 8px; right: 8px; width: auto; top: max(8px, env(safe-area-inset-top)); bottom: max(8px, env(safe-area-inset-bottom)); max-height: none; z-index: 1000; } .chat-fab[aria-expanded="true"] { display: none; } }
@media (max-width: 720px) { .chat-fab { padding: 5px; right: 12px; bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--chat-lift, 0px) + var(--chat-bar, 0px)); } .chat-fab-words { display: none; } body.has-chat .to-top { display: none; } }

/* ---------------------------------------------------------------- gentle scroll-in */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js [data-reveal] { opacity: 1; transform: none; transition: none; } .promo:not([hidden]), .promo-inner, .chat-fab, .chat-panel { animation: none !important; } }
@media print { .z-top, .site-header, .site-footer, .cta-band, .action-bar, .chat-fab, .chat-panel, .to-top { display: none; } }

/* ---------------------------------------------------------------- fewer empty margins (Dan, 15/10/2026) */
/* inner page headers without a photo: a "talk to us" card fills the right-hand side */
.z-hero-card { display: none; }
@media (min-width: 900px) {
  .z-hero-card { display: grid; gap: 10px; align-content: start; justify-self: end; width: 100%; max-width: 340px; padding: 26px; border-radius: 22px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(6px); }
  .z-hero-card .kicker { margin: 0; }
  .z-hero-card p { margin: 0; color: #d6eef8; font-size: .95rem; }
  .z-hero-call { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; text-decoration: none; }
  .z-hero-call .icon { color: var(--yellow); }
  .page-booking .z-hero-card { display: none; }
}
/* questions: heading and a call card on the left, the questions on the right */
.z-faq { display: grid; gap: 28px; }
@media (min-width: 900px) { .z-faq { grid-template-columns: .8fr 1.4fr; gap: 50px; align-items: start; } .z-faq-side { position: sticky; top: 120px; } }
.z-faq-side h2 { margin-bottom: .4em; }
.z-faq-side p { color: var(--ink-2); }
/* long text (terms, cookie policy) in two columns on a wide screen */
@media (min-width: 1000px) {
  .terms-list { column-count: 2; column-gap: 48px; }
  .terms-list > li { break-inside: avoid; }
  .doc-list { grid-template-columns: 1fr 1fr; }
}
/* tighter on phones */
@media (max-width: 700px) {
  .section { padding: 42px 0; }
  .page-hero { padding: 40px 0 88px; }
  .z-hero { padding: 36px 0 120px; }
  .z-head-in { min-height: 76px; }
  .z-brand img { width: 170px; }
  .hero-actions .btn { flex: 1 1 auto; }
}
/* ---------------------------------------------------------------- denser home page (Dan, 15/10/2026: "sparse", "a lot of white space") */
.z-hero .pc-check { max-width: 520px; margin-top: 22px; }
.z-hero .pc-result, .z-hero .pc-result.ok, .z-hero .pc-result.warn { color: #fff; }
.z-hero .pc-result a { color: var(--yellow); }
/* the four facts on one white strip over the wave */
.z-strip { position: relative; z-index: 3; margin-top: -86px; }
.z-strip .z-facts { background: #fff; border-radius: 22px; box-shadow: var(--shadow-lift); padding: 8px; gap: 0; }
.z-strip .z-facts li { grid-template-columns: auto 1fr; justify-items: start; text-align: left; align-items: center; gap: 14px; padding: 16px 18px; }
.z-strip .z-facts li + li { border-left: 1px solid var(--foam-2); }
@media (max-width: 899px) { .z-strip .z-facts li:nth-child(3) { border-left: 0; } .z-strip .z-facts li:nth-child(n+3) { border-top: 1px solid var(--foam-2); } }
@media (max-width: 520px) { .z-strip .z-facts { grid-template-columns: 1fr; } .z-strip .z-facts li { border-left: 0 !important; } .z-strip .z-facts li + li { border-top: 1px solid var(--foam-2); } }
.z-strip .z-ring { width: 48px; height: 48px; margin: 0; }
.z-strip .z-ring .icon { width: 22px; height: 22px; }
.z-strip strong { display: block; font-size: 1.1rem; letter-spacing: -.01em; }
.z-strip span { font-size: .88rem; }
/* two and three columns */
.z-two { display: grid; gap: 34px; }
@media (min-width: 960px) { .z-two { grid-template-columns: 1fr 1fr; gap: 50px; } }
.z-three { display: grid; gap: 22px; }
@media (min-width: 1000px) { .z-three { grid-template-columns: 1fr 1.1fr 1fr; align-items: stretch; } }
.z-three .yard-map { min-height: 320px; }
/* steps down the side, numbers on the left */
.z-steps.v { grid-template-columns: 1fr; gap: 16px; }
.z-steps.v::before { display: none; }
.z-steps.v li { display: grid; grid-template-columns: 52px 1fr; gap: 2px 16px; text-align: left; padding: 0; }
.z-steps.v li::before { grid-row: span 2; width: 46px; height: 46px; margin: 0; font-size: 1.1rem; box-shadow: none; background: var(--sea); }
.z-steps.v p { margin: 0; }
.yesno.compact > div, .z-two .yesno > div { padding: 20px; }
.z-two .yesno { grid-template-columns: 1fr; }
/* size cards with measurements */
.z-dims { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
.z-dims span { padding: 3px 9px; border-radius: 999px; background: var(--foam); color: var(--navy); font-size: .78rem; font-weight: 700; }
.z-size .ticks { margin-bottom: 12px; gap: 6px; }
.z-size .ticks li { font-size: .88rem; }
/* the business band */
.z-biz { margin-top: 26px; display: grid; gap: 22px; align-items: center; padding: 30px; border-radius: 24px; color: #dcebf4; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 60%, var(--sea-2) 100%); }
@media (min-width: 1000px) { .z-biz { grid-template-columns: 1.3fr 1fr auto; gap: 34px; } }
.z-biz h2 { color: #fff; font-size: 1.8rem; }
.z-biz p { margin: 0; }
.z-biz .kicker { color: var(--sky); }
.z-biz-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.z-biz-list li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; color: #fff; }
.z-biz-list .icon { color: var(--yellow); margin-top: .15em; }
.z-biz-actions { display: grid; gap: 10px; }
/* zone names under the price headings */
.price-table thead th small { display: block; font-size: .7rem; font-weight: 600; letter-spacing: 0; text-transform: none; opacity: .75; margin-top: 2px; }
/* ---------------------------------------------------------------- photos, the lorry's colours, and the background picture (Dan, 15/10/2026) */
:root { --maroon: #5a1228; --cream: #e8dfc4; --pin: #e0262b; }
/* real photos of the Zebra lorries and yard, framed */
.z-photo, .page-hero-img.photo img { display: block; width: 100%; height: auto; border-radius: 22px; border: 5px solid #fff; box-shadow: 0 26px 50px rgba(0, 0, 0, .35); object-fit: cover; }
.z-hero-art img.z-photo { width: min(560px, 100%); filter: none; transform: rotate(-1.5deg); }
.z-hero-art::before { display: none; }
.page-hero-img.photo img { filter: none; transform: rotate(1.2deg); }
.z-figure { margin: 0; display: grid; gap: 8px; }
.z-figure .z-photo { border-width: 4px; box-shadow: var(--shadow-lift); height: 100%; min-height: 260px; }
.z-figure figcaption { font-size: .88rem; color: var(--ink-2); }
/* the closing band: the lorry lettering, darkened, behind the words */
.cta-band { background: linear-gradient(90deg, rgba(11, 37, 64, .94) 0%, rgba(11, 37, 64, .86) 55%, rgba(90, 18, 40, .78) 100%), url("/img/zebra-lettering.webp") center / cover no-repeat; }

/* the whole page sits on a soft, washed-out photo; the white areas let it show through */
body { background: #e7eaec; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)), url("/img/zebra-bg.webp") center 40% / cover no-repeat; }
.section { background: transparent; }
.section.sand, .section.dark { background: rgba(247, 242, 232, .72); }
.section.foam { background: rgba(234, 245, 250, .72); }
.section.navy { background: var(--navy); }
/* boxes over it: see-through white, frosted */
.panel, .z-size, .z-tile, .price-card, .review, .faq details, .yesno > div, .z-zone, .z-strip .z-facts, .picker, .table-scroll, .doc-row, .booking, .facts > div, .embed-form, .z-check-card {
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-color: rgba(255, 255, 255, .65);
}
.contact-strip a, .pill-list li, .z-dims span, .picker-dims div { background: rgba(234, 245, 250, .8); }
.site-header { background: rgba(255, 255, 255, .85); }
/* the waves are cut out of the blue headers (and the top of the closing band), so the picture shows through the curve */
.page-hero::after, .z-hero::after, .cta-band::before { display: none; }
.page-hero, .z-hero {
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 69px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V38C1280 8 1120 8 960 38C800 68 640 68 480 38C320 8 160 8 0 38Z'/%3E%3C/svg%3E") bottom / 100% 70px no-repeat;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 69px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V38C1280 8 1120 8 960 38C800 68 640 68 480 38C320 8 160 8 0 38Z'/%3E%3C/svg%3E") bottom / 100% 70px no-repeat;
}
.cta-band {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 22C160 52 320 52 480 22C640 -8 800 -8 960 22C1120 52 1280 52 1440 22V60H0Z'/%3E%3C/svg%3E") top / 100% 60px no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - 59px) no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 22C160 52 320 52 480 22C640 -8 800 -8 960 22C1120 52 1280 52 1440 22V60H0Z'/%3E%3C/svg%3E") top / 100% 60px no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - 59px) no-repeat;
}
/* the facts strip and other cards that overlap the header must stay above its cut-out */
.z-strip, .hero-facts { position: relative; z-index: 3; }
/* nothing may push the page wider than the screen (a phone showed the hero spilling off the right) */
html, body { overflow-x: clip; }
.z-hero-in, .page-hero-inner, .z-two, .z-three, .z-area, .z-yard, .split, .z-faq { grid-template-columns: minmax(0, 1fr); }
.z-hero-in > *, .page-hero-inner > *, .z-two > *, .z-three > *, .z-area > *, .z-yard > *, .split > *, .z-faq > * { min-width: 0; }
@media (min-width: 980px) { .z-hero-in { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
@media (min-width: 900px) { .page-hero-inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } .z-yard { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } .z-faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); } }
@media (min-width: 880px) { .split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
@media (min-width: 960px) { .z-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .z-area { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
@media (min-width: 1000px) { .z-three { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); } }
@media (max-width: 700px) { .hero-actions { display: grid; grid-template-columns: 1fr; } .z-hero h1 { font-size: 2.5rem; } }
/* the header on a laptop: the phone number is already in the strip above, so the bar keeps just the Book button */
@media (min-width: 1100px) and (max-width: 1440px) { .z-nav-cta .z-phone { display: none; } .z-brand img { width: 210px; } .site-nav ul { gap: 0; } }
/* ---------------------------------------------------------------- step-by-step booking (order.js; Dan, 15/10/2026: like Shorts' skip order) */
.bk-steps { list-style: none; margin: 22px 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: bk; }
.bk-steps li { counter-increment: bk; }
.bk-steps li > * { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 8px; border-radius: 999px; font: inherit; font-size: .88rem; font-weight: 700; border: 0; background: var(--grey); color: var(--ink-2); }
.bk-steps li > *::before { content: counter(bk); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; font-size: .78rem; }
.bk-steps li.done button { cursor: pointer; background: var(--red-tint); color: var(--red-ink); }
.bk-steps li.now span { background: var(--red); color: #fff; }
.bk-steps li.now span::before { color: var(--red); }
.bk { margin-top: 6px; }
.bk h2 { margin-bottom: .3em; }
.bk-lead { color: var(--ink-2); margin-bottom: 18px; }
.bk-back, .bk-link { border: 0; background: none; padding: 0; margin-bottom: 12px; font: inherit; font-weight: 700; color: var(--red-ink); cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.bk-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bk-msg { padding: 12px 16px; border-radius: 10px; background: #fdecea; color: #8c211e; font-weight: 600; }
/* waste types */
.bk-wastes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.bk-card { display: grid; gap: 6px; text-align: left; padding: 20px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.bk-card:hover { border-color: var(--red); transform: translateY(-2px); box-shadow: var(--shadow); }
.bk-card strong { font-size: 1.1rem; }
.bk-card span { color: var(--ink-2); font-size: .95rem; }
.bk-card em { font-style: normal; font-weight: 800; color: var(--red-ink); margin-top: 4px; }
.bk-waste.online { border-color: var(--red); background: var(--red-tint); }
.bk-waste.online em { display: inline-block; justify-self: start; padding: 6px 16px; border-radius: 999px; background: var(--yellow); color: #1c1a1e; }
/* the "important" box */
.bk-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 18px; background: rgba(20, 20, 30, .6); }
.bk-modal-card { width: 100%; max-width: 620px; max-height: calc(100vh - 36px); overflow: auto; background: #fff; color: var(--ink); border-radius: 20px; padding: 28px; box-shadow: 0 30px 70px rgba(0, 0, 0, .4); border-top: 8px solid var(--red); }
.bk-no { list-style: none; padding: 0; margin: 14px 0 18px; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.bk-no li { padding: 10px 14px; border-radius: 10px; background: #8c1d18; color: #fff; font-weight: 700; font-size: .95rem; }
.bk-tick { display: flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; }
.bk-tick input { width: 22px; height: 22px; accent-color: var(--red); flex: none; }
.bk-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
/* sizes */
.bk-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.bk-switch { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; cursor: pointer; }
.bk-switch input { width: 20px; height: 20px; accent-color: var(--red); }
.bk-sizes { display: grid; gap: 12px; margin-bottom: 14px; }
.bk-size { position: relative; overflow: hidden; display: grid; gap: 12px 20px; align-items: center; padding: 18px 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); grid-template-columns: 90px 1fr; }
.bk-size.popular { border: 2px solid var(--yellow); }
.bk-ribbon { position: absolute; left: -34px; top: 14px; transform: rotate(-40deg); width: 130px; text-align: center; background: var(--yellow); color: #1c1a1e; font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 0; }
.bk-size-pic svg { width: 90px; height: auto; }
.bk-size-name { display: flex; align-items: center; gap: 12px; }
.bk-size-name strong { display: block; font-size: 1.1rem; }
.bk-size-name span { display: block; color: var(--ink-2); font-size: .9rem; }
.bk-size-name .bk-warn { color: var(--red-ink); font-weight: 700; }
.bk-yd { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 800; font-size: 1.25rem; line-height: 1; flex: none; }
.bk-yd small { font-size: .62rem; font-weight: 700; }
.bk-size-ideal { grid-column: 1 / -1; font-size: .92rem; }
.bk-size-ideal ul { margin: 4px 0 0; padding-left: 1.1em; color: var(--ink-2); }
.bk-size-price strong { display: block; font-size: 1.6rem; letter-spacing: -.02em; line-height: 1.1; }
.bk-size-price small { color: var(--ink-2); font-weight: 600; }
.bk-size .btn { justify-self: stretch; }
@media (min-width: 860px) {
  .bk-size { grid-template-columns: 100px 1.2fr 1.4fr auto auto; }
  .bk-size-ideal { grid-column: auto; }
  .bk-size .btn { justify-self: end; }
}
/* calendar */
.bk-cal { max-width: 720px; }
.bk-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bk-cal-head strong { font-size: 1.35rem; color: var(--red-ink); }
.bk-mo { width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--ink); }
.bk-mo:disabled { opacity: .35; cursor: default; }
.bk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.bk-dow { text-align: center; font-weight: 700; font-size: .85rem; color: var(--ink-2); padding: 4px 0; }
.bk-day { display: grid; place-items: center; min-height: 52px; border-radius: 10px; font: inherit; font-size: 1.1rem; font-weight: 700; border: 0; }
.bk-day.pad { visibility: hidden; }
.bk-day.shut { color: #b3adb5; background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(0, 0, 0, .04) 8px 9px), var(--grey); }
.bk-day.open { background: var(--red); color: #fff; cursor: pointer; transition: transform .1s, filter .1s; }
.bk-day.open:hover { transform: scale(1.04); filter: brightness(1.1); }
.bk-day.picked { background: var(--yellow); color: #1c1a1e; box-shadow: 0 0 0 3px var(--ink) inset; }
.bk-day.start { box-shadow: 0 0 0 3px var(--yellow) inset; }
.bk-day.busy { opacity: .6; }
.bk-key { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .85rem; color: var(--ink-2); }
.bk-key .bk-day { min-height: 0; width: 26px; height: 26px; font-size: .75rem; display: inline-grid; margin-left: 8px; }
@media (max-width: 520px) { .bk-day { min-height: 42px; font-size: .95rem; border-radius: 8px; } .bk-cal-grid { gap: 4px; } }
/* review */
.bk-review { display: grid; gap: 20px; margin-bottom: 20px; }
@media (min-width: 860px) { .bk-review { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.bk-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.bk-table th, .bk-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.bk-table th { width: 34%; background: var(--grey); }
.bk-total { padding: 20px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.bk-total p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0 0 8px; }
.bk-total p span { flex: 1; font-weight: 700; color: var(--ink-2); }
.bk-total strong { font-size: 1.3rem; }
.bk-total .bk-sum { border-top: 2px solid var(--line); padding-top: 10px; }
.bk-total .bk-sum strong { font-size: 2rem; color: var(--red-ink); }
.bk-total .small { display: block; margin-top: 10px; }
.bk-place { border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; margin: 0 0 16px; display: grid; gap: 8px; background: var(--surface); }
.bk-place legend { font-weight: 800; padding: 0 6px; }
.bk-place label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.bk-place input { margin-top: .3em; accent-color: var(--red); width: 18px; height: 18px; flex: none; }
.bk-notice { padding: 18px 20px; border-radius: 14px; background: #fff4e5; border: 1px solid #f0cf96; margin-bottom: 18px; }
.bk-notice h3 { margin-bottom: .3em; }
.bk-yd { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.bk-yd small { display: block; }
.info-box[hidden], .bk[hidden], .bk-steps[hidden], #CHECKFRONT_WIDGET_01[hidden] { display: none !important; }
.bk-steps li > * { padding: 6px 11px 6px 7px; font-size: .84rem; }
.bk-size-name .bk-yd { display: flex; color: #fff; font-size: 1.25rem; }
.bk-size-name .bk-yd small { display: block; color: #fff; font-size: .62rem; }
/* phones: the steps already done or still to come show just their number */
@media (max-width: 600px) {
  .bk-steps li:not(.now) > * { font-size: 0; gap: 0; padding: 4px; }
  .bk-steps li:not(.now) > *::before { font-size: .78rem; }
}
/* waste types with a photo (order.js) */
.bk-waste { align-content: start; }
.bk-waste img { width: calc(100% + 40px); max-width: none; margin: -20px -20px 8px; height: 150px; object-fit: cover; border-radius: 14px 14px 0 0; }
.bk-waste:not(.has-pic)::before { content: ""; display: block; height: 150px; margin: -20px -20px 8px; border-radius: 14px 14px 0 0; background: repeating-linear-gradient(135deg, var(--grey) 0 14px, var(--grey-2) 14px 28px); }
/* the lorry with its background taken out, standing on the header */
.z-hero-art img.z-cut { position: relative; width: min(560px, 100%); margin: 0 auto; filter: drop-shadow(0 28px 26px rgba(0, 0, 0, .45)); }
.z-hero-art::before { display: block; inset: 10% 6% 4%; }

/* the customer's details (order.js) */
.bk-form h3 { margin: 22px 0 10px; }
.bk-grid { display: grid; gap: 12px 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-bottom: 8px; }
.bk-grid[hidden], [data-if-exchange][hidden], .bk-permit[hidden] { display: none !important; }
.bk-field { display: grid; gap: 5px; font-weight: 700; font-size: .92rem; margin-bottom: 12px; }
.bk-field.wide { grid-column: 1 / -1; }
.bk-field small { font-weight: 500; color: var(--ink-2); }
.bk-field input, .bk-field textarea { font: inherit; font-size: 16px; font-weight: 500; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); width: 100%; }
.bk-field input:focus, .bk-field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-tint); }
.bk-field [aria-invalid] { border-color: #c3322f; background: #fdf1f0; }
.bk-choice { border: 0; padding: 0; margin: 14px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bk-choice legend { width: 100%; font-weight: 800; margin-bottom: 8px; padding: 0; }
.bk-choice label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; font-weight: 600; }
.bk-choice label:has(input:checked) { border-color: var(--red); background: var(--red-tint); color: var(--red-ink); }
.bk-choice input { accent-color: var(--red); width: 18px; height: 18px; }
.bk-permit { padding: 12px 16px; border-radius: 10px; background: #fff4e5; border: 1px solid #f0cf96; }
.bk-saving strong { color: #1f8a55; }
.bk-terms { margin: 10px 0 14px; }
.bk-terms summary { cursor: pointer; font-weight: 700; color: var(--red-ink); }
.bk-terms > div { max-height: 260px; overflow: auto; margin-top: 8px; padding: 12px 14px; border-radius: 10px; background: var(--surface); font-size: .88rem; }
.bk-terms p { margin: 0 0 .6em; }

/* ---------------------------------------------------------------- the home page header, split (Dan, 15/10/2026):
   words and the postcode box on the left; the lorry, cut out, on the right, standing over the wave */
.z-split { padding-bottom: 150px; }
.z-split h1 { font-size: clamp(2.3rem, 4.6vw, 3.7rem); }
.z-split h1 em { display: block; }
.z-lorry-out { position: relative; z-index: 4; }
.z-lorry-out .z-hero-art { margin: -150px auto 0; width: min(560px, 94%); }
.z-lorry-out .z-hero-art::before { display: none; }
.z-lorry-out img.z-cut { width: 100%; transform: none; filter: drop-shadow(0 26px 22px rgba(11, 37, 64, .45)); }
@media (min-width: 980px) {
  .z-split { padding: 64px 0 120px; }
  .z-split .z-hero-in > div:last-child { min-height: 300px; }
  .z-lorry-out { height: 0; }
  .z-lorry-out .z-hero-art { position: absolute; right: 22px; bottom: -70px; margin: 0; width: min(600px, 47%); }
  .z-split + .z-lorry-out + .z-strip { margin-top: 26px; }
  .z-split + .z-lorry-out + .z-strip .z-facts { margin-right: 0; }
}
.z-lorry-out .z-hero-badge { right: 0; top: -6%; }

/* ---------------------------------------------------------------- less white (Dan: "as you scroll down it gets very white") */
body { background: #c9d6df; }
body::before { background: linear-gradient(180deg, rgba(11, 37, 64, .32) 0%, rgba(22, 131, 181, .22) 45%, rgba(11, 37, 64, .38) 100%), url("/img/zebra-bg.webp") center 40% / cover no-repeat; }
.section.sand, .section.dark { background: rgba(247, 242, 232, .9); }
.section.foam { background: rgba(225, 240, 248, .9); }
.section:not(.sand):not(.dark):not(.foam):not(.navy) .section-head h2,
.section:not(.sand):not(.dark):not(.foam):not(.navy) > .wrap > h2 { color: #fff; text-shadow: 0 2px 14px rgba(11, 37, 64, .45); }
.section:not(.sand):not(.dark):not(.foam):not(.navy) .section-head p,
.section:not(.sand):not(.dark):not(.foam):not(.navy) .section-head .kicker { color: #eaf6fb; text-shadow: 0 1px 8px rgba(11, 37, 64, .5); }
.section:not(.sand):not(.dark):not(.foam):not(.navy) .section-head a { color: #fff; }
.panel, .z-size, .z-tile, .price-card, .review, .faq details, .yesno > div, .z-zone, .z-strip .z-facts, .picker, .table-scroll, .doc-row, .booking, .facts > div, .embed-form, .z-check-card { background: rgba(255, 255, 255, .86); }

/* booking: the waste's EWC code, and the two-week collection picked for the customer */
.bk-ewc { display: inline-block; margin-top: 2px; padding: 2px 8px; border-radius: 6px; background: var(--grey); color: var(--ink-2); font-size: .74rem; font-weight: 700; letter-spacing: .03em; font-style: normal; }
.bk-auto { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; margin-bottom: 14px; border-radius: 14px; background: var(--red-tint); border: 2px solid var(--red); }
.bk-auto p { margin: 0; }
.bk-shorter summary { cursor: pointer; font-weight: 700; color: var(--red-ink); margin-bottom: 10px; }
/* ---- header: a shorter headline, so the lorry fills the right-hand side and still breaks out over the wave */
.z-split h1 { font-size: clamp(2.2rem, 3.6vw, 3.1rem); }
.z-split h1 em { display: inline; }
@media (min-width: 980px) {
  .z-split { padding: 56px 0 110px; }
  .z-lorry-out .z-hero-art { bottom: -64px; width: min(640px, 50%); right: 0; }
}
/* ---- words that sit straight on the photo are white; anything in a box stays dark */
.section:not(.sand):not(.dark):not(.foam):not(.navy) { color: #eef7fb; }
.section:not(.sand):not(.dark):not(.foam):not(.navy) :is(h1, h2, h3, .hd, .kicker) { color: #fff; text-shadow: 0 2px 14px rgba(11, 37, 64, .5); }
.section:not(.sand):not(.dark):not(.foam):not(.navy) :is(p, .muted, .small) { text-shadow: 0 1px 8px rgba(11, 37, 64, .45); }
.section:not(.sand):not(.dark):not(.foam):not(.navy) .muted { color: #e1eef5; }
.section:not(.sand):not(.dark):not(.foam):not(.navy) a:not(.btn) { color: #fff; }
:is(.panel, .z-size, .z-tile, .price-card, .review, .faq details, .yesno > div, .z-zone, .picker, .table-scroll, .doc-row, .booking, .facts, .z-check-card, .contact-strip, .z-yard-card, .z-area-towns, .z-biz, .bk-modal-card) { color: var(--ink); text-shadow: none; }
:is(.panel, .z-size, .z-tile, .price-card, .review, .faq details, .yesno > div, .z-zone, .picker, .table-scroll, .doc-row, .booking, .facts, .z-check-card) :is(h2, h3, .hd, p, .muted, .small, a:not(.btn), .kicker, summary) { text-shadow: none; }
:is(.panel, .z-size, .z-tile, .price-card, .review, .faq details, .yesno > div, .z-zone, .picker, .table-scroll, .doc-row, .booking, .facts, .z-check-card) :is(h2, h3, .hd, summary) { color: var(--navy); }
:is(.panel, .z-size, .z-tile, .price-card, .review, .faq details, .yesno > div, .z-zone, .picker, .table-scroll, .doc-row, .booking, .facts, .z-check-card) :is(p, li, td, th, dd, span) { color: inherit; }
:is(.panel, .z-size, .z-tile, .price-card, .review, .faq details, .yesno > div, .z-zone, .picker, .table-scroll, .doc-row, .booking, .facts, .z-check-card) .muted { color: var(--ink-2); }
:is(.panel, .z-size, .z-tile, .price-card, .review, .faq details, .yesno > div, .z-zone, .picker, .table-scroll, .doc-row, .booking, .facts, .z-check-card) a:not(.btn) { color: var(--sea-2); }
:is(.panel, .z-size, .z-tile, .price-card, .review, .faq details, .yesno > div, .z-zone, .picker, .table-scroll, .doc-row, .booking, .facts, .z-check-card) .kicker { color: var(--sea); }
.z-yard-card :is(h2, h3, strong) , .z-area-towns h3, .z-biz h2 { color: #fff; }
.z-yard-card, .z-area-towns, .z-biz { color: #dcebf4; }
/* the postcode box must fit a phone */
.pc-check { min-width: 0; max-width: 100%; }
.pc-row { min-width: 0; max-width: 100%; }
.pc-row input { width: 0; }

/* ================================================================ phones first (Dan, 15/10/2026: "need to really nail the mobile version")
   1. Text straight on the background picture: the picture is darkened enough that white text always reads.
   2. Text inside a box keeps the box's own colours, whatever section the box is in (these rules are written with
      the same section prefix as the white-text rules, so they always win). */
body::before { background: linear-gradient(180deg, rgba(11, 37, 64, .78) 0%, rgba(15, 75, 112, .72) 50%, rgba(11, 37, 64, .82) 100%), url("/img/zebra-bg.webp") center 40% / cover no-repeat; }
body { background: var(--navy); }
.section:not(.sand):not(.dark):not(.foam):not(.navy) :is(.panel, .z-size, .z-tile, .price-card, .review, .faq details, .yesno > div, .z-zone, .picker, .table-scroll, .doc-row, .booking, .facts, .z-check-card, .contact-strip a, .bk-modal-card) { color: var(--ink); }
.section:not(.sand):not(.dark):not(.foam):not(.navy) :is(.panel, .z-size, .z-tile, .price-card, .review, .faq details, .yesno > div, .z-zone, .picker, .table-scroll, .doc-row, .booking, .facts, .z-check-card) :is(h1, h2, h3, .hd, summary, strong, b, th, legend, dd) { color: var(--navy); text-shadow: none; }
.section:not(.sand):not(.dark):not(.foam):not(.navy) :is(.panel, .z-size, .z-tile, .price-card, .review, .faq details, .yesno > div, .z-zone, .picker, .table-scroll, .doc-row, .booking, .facts, .z-check-card) :is(p, li, td, span, address, label, small, em) { color: inherit; text-shadow: none; }
.section:not(.sand):not(.dark):not(.foam):not(.navy) :is(.panel, .z-size, .z-tile, .price-card, .review, .faq details, .yesno > div, .z-zone, .picker, .table-scroll, .doc-row, .booking, .facts, .z-check-card) :is(.muted, .price-card-note, .bag-count, .bk-lead) { color: var(--ink-2); }
.section:not(.sand):not(.dark):not(.foam):not(.navy) :is(.panel, .z-size, .z-tile, .price-card, .review, .faq details, .yesno > div, .z-zone, .picker, .table-scroll, .doc-row, .booking, .facts, .z-check-card) a:not(.btn) { color: var(--sea-2); text-shadow: none; }
.section:not(.sand):not(.dark):not(.foam):not(.navy) :is(.panel, .z-size, .z-tile, .price-card, .review, .faq details, .yesno > div, .z-zone, .picker, .table-scroll, .doc-row, .booking, .facts, .z-check-card) :is(.kicker, .price-from, dt) { color: var(--sea); text-shadow: none; }
.section:not(.sand):not(.dark):not(.foam):not(.navy) .town-list a { color: var(--navy); text-shadow: none; }
/* boxes that are dark keep white words, wherever they are */
.price-table thead th, .section:not(.sand):not(.dark):not(.foam):not(.navy) .price-table thead th { color: #fff; }
.price-table thead th small { color: #cfe3f0; }
:is(.z-yard-card, .z-area-towns, .z-biz), .section:not(.sand):not(.dark):not(.foam):not(.navy) :is(.z-yard-card, .z-area-towns, .z-biz) { color: #dcebf4; }
.section:not(.sand):not(.dark):not(.foam):not(.navy) :is(.z-yard-card, .z-area-towns, .z-biz) :is(h2, h3, strong, address, p, a:not(.btn)) { color: #fff; text-shadow: none; }
.section:not(.sand):not(.dark):not(.foam):not(.navy) .z-area-towns .town-list a { color: #fff; }
.section:not(.sand):not(.dark):not(.foam):not(.navy) :is(.z-yard-card, .z-area-towns, .z-biz) .kicker { color: var(--sky); }
/* the light (sand and pale blue) sections: dark words, as before */
.section:is(.sand, .dark, .foam) { color: var(--ink); }
.section:is(.sand, .dark, .foam) .section-head p { color: var(--ink-2); text-shadow: none; }
/* the yellow skip-size circle and links on the photo */
.section:not(.sand):not(.dark):not(.foam):not(.navy) .z-yd { color: var(--sea-2); }
.section:not(.sand):not(.dark):not(.foam):not(.navy) .section-head a, .section:not(.sand):not(.dark):not(.foam):not(.navy) > .wrap > p a { color: var(--yellow); }

/* ---------------------------------------------------------------- the call button on phones: big, and always there */
@media (max-width: 899px) {
  .z-top-in { min-height: 0; padding-top: 8px; padding-bottom: 8px; }
  .z-top-in > a { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; border-radius: 14px; background: var(--yellow); color: var(--navy); font-size: 1.2rem; font-weight: 800; letter-spacing: .01em; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
  .z-top-in > a .icon { color: var(--navy); width: 1.3em; height: 1.3em; }
  .z-top-in > a::before { content: "Call"; font-weight: 700; }
  .action-bar { transform: none; grid-template-columns: 1.5fr 1fr; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(11, 37, 64, .97); }
  .action-bar .btn { min-height: 56px; font-size: 1.1rem; }
  .action-bar .btn-ghost { background: var(--yellow); border-color: var(--yellow); color: var(--navy); font-size: 1.15rem; }
  .action-bar .btn-yellow { background: #fff; border-color: #fff; color: var(--navy); box-shadow: none; }
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .z-legal { padding-bottom: 28px; }
  .to-top { display: none; }
  .chat-fab { --chat-bar: 84px; }
}
/* ---------------------------------------------------------------- phones: tidier header text and bigger tap targets */
@media (max-width: 600px) {
  .page-hero { padding: 30px 0 84px; }
  .page-hero h1 { font-size: 2.1rem; }
  .page-hero .lead { font-size: 1.02rem; }
  .z-split h1 { font-size: 2.05rem; line-height: 1.12; }
  .z-split .lead { font-size: 1rem; }
  .z-split .kicker { font-size: .7rem; letter-spacing: .1em; }
  .crumbs { font-size: .78rem; }
  .section { padding: 38px 0; }
  .section-head { margin-bottom: 20px; }
  .section-head h2, .section > .wrap > h2 { font-size: 1.65rem; }
  .btn-lg { padding: 15px 22px; }
  .pc-row .btn { padding: 12px 18px; }
  .faq summary { padding: 16px 52px 16px 18px; }
  .z-strip { margin-top: 18px; }
  .z-lorry-out .z-hero-art { margin-top: -120px; width: 92%; }
  .z-lorry-out .z-hero-badge { width: 84px; height: 84px; }
}
/* remaining colour fixes from the phone check */
.section .table-scroll .price-table thead th, .section:not(.sand):not(.dark):not(.foam):not(.navy) .table-scroll .price-table thead th { color: #fff; }
.section:not(.sand):not(.dark):not(.foam):not(.navy) .table-scroll .price-table thead th small { color: #cfe3f0; }
.section:not(.sand):not(.dark):not(.foam):not(.navy) .pc-check label { color: #fff; }
.section:not(.sand):not(.dark):not(.foam):not(.navy) .stand-out { color: var(--yellow); }
.section:not(.sand):not(.dark):not(.foam):not(.navy) :is(.panel, .price-card, .table-scroll, .booking) .stand-out { color: var(--sea-2); }
.section:not(.sand):not(.dark):not(.foam):not(.navy) .z-faq-side p { color: #e1eef5; }
.section .z-yard-card, .section .z-yard-card :is(p, address, li, span) { color: #dcebf4; }
.section .z-yard-card :is(h2, h3, strong, a:not(.btn)) { color: #fff; }
.section:not(.sand):not(.dark):not(.foam):not(.navy) .yard-map a, .section .yard-map a { color: var(--sea-2); text-shadow: none; }
/* phones: the four prices two to a row, and the number shown once at the top and once at the bottom only */
@media (max-width: 600px) {
  .price-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .price-card { padding: 14px 12px 12px; border-bottom-width: 4px; }
  .price-card h3 { font-size: .98rem; }
  .price-card-note { font-size: .78rem; margin-bottom: 8px; }
  .price-card .price-both strong { font-size: 1.55rem; }
  .price-card .price-both { font-size: .8rem; }
  .price-card .btn { padding: 10px 8px; font-size: .9rem; }
  .z-split .hero-actions .btn-ghost-light { display: none; }
  .z-sizes { grid-template-columns: 1fr 1fr; gap: 10px; }
  .z-size { padding: 40px 12px 14px; }
  .z-size h3 { font-size: 1rem; }
  .z-size > p:not(.z-dims) { font-size: .85rem; }
  .z-size .ticks { display: none; }
  .z-dims span { font-size: .7rem; padding: 2px 7px; }
}
@media (max-width: 600px) { .z-strip .z-facts { grid-template-columns: 1fr 1fr; } .z-strip .z-facts li { grid-template-columns: 1fr; gap: 6px; padding: 14px 12px; border: 0 !important; } .z-strip .z-facts li:nth-child(n+3) { border-top: 1px solid var(--foam-2) !important; } .z-strip .z-facts li:nth-child(even) { border-left: 1px solid var(--foam-2) !important; } .z-strip .z-ring { width: 40px; height: 40px; } .z-strip strong { font-size: 1rem; } .z-strip span { font-size: .8rem; } }

@media (max-width: 600px) { .bk-auto .btn, .bk-actions .btn, .bk-form .btn { width: 100%; } .bk-steps { gap: 4px; } .bk-steps li > * { padding: 3px; } .bk-steps li.now > * { padding: 5px 10px 5px 5px; } }

/* ---------------------------------------------------------------- phones: one bar at the bottom with three buttons (Dan, 15/10/2026);
   no call strip at the top */
@media (max-width: 899px) {
  .z-top { display: none; }
  .action-bar { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .action-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 60px; border-radius: 14px; font-weight: 800; font-size: .95rem; text-decoration: none; line-height: 1.1; }
  .action-bar a .icon { width: 24px; height: 24px; }
  .ab-call { background: var(--yellow); color: var(--navy); }
  .ab-book { background: #fff; color: var(--navy); }
  .ab-contact { background: var(--sea); color: #fff; }
  .page-booking .action-bar { display: grid !important; }
}
/* ---------------------------------------------------------------- the home page below the prices (Dan, 15/10/2026: "more professional") */
.z-story { padding: 70px 0; background: linear-gradient(160deg, #0b2540 0%, #123a60 60%, #0f4f7a 100%) !important; color: #cfe3f0; }
.z-story h2 { color: #fff; }
.z-story .kicker { color: var(--sky); }
.z-story-grid { display: grid; gap: 34px; }
@media (min-width: 960px) { .z-story-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 60px; align-items: start; } }
.z-story-lead { font-size: 1.15rem; color: #fff; }
.z-story strong { color: #fff; }
.z-timeline { list-style: none; margin: 0; padding: 0 0 0 26px; border-left: 3px solid rgba(92, 200, 238, .35); display: grid; gap: 22px; }
.z-timeline li { position: relative; display: grid; gap: 4px; }
.z-timeline li::before { content: ""; position: absolute; left: -35px; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(255, 199, 44, .25); }
.z-timeline b { font-size: 1.5rem; color: var(--yellow); letter-spacing: -.02em; line-height: 1; }
.z-timeline span { color: #cfe3f0; }
.z-numbers { list-style: none; margin: 46px 0 0; padding: 26px 0 0; border-top: 1px solid rgba(255, 255, 255, .14); display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .z-numbers { grid-template-columns: repeat(4, 1fr); } }
.z-numbers li { display: grid; gap: 2px; }
.z-numbers strong { font-size: clamp(2rem, 4vw, 2.8rem); color: #fff; letter-spacing: -.03em; line-height: 1; }
.z-numbers span { color: #9fc3d9; font-size: .92rem; }
/* who we work for */
.z-sectors { display: grid; gap: 18px; }
@media (min-width: 900px) { .z-sectors { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.z-sector { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r); background: rgba(255, 255, 255, .92); box-shadow: var(--shadow); color: var(--ink); }
.z-sector img { width: 100%; height: 170px; object-fit: cover; }
.z-sector > div { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.z-sector p { color: var(--ink-2); }
.z-sector .more { margin-top: auto; }
.section:not(.sand):not(.dark):not(.foam):not(.navy) .z-sector :is(h3) { color: var(--navy); text-shadow: none; }
.section:not(.sand):not(.dark):not(.foam):not(.navy) .z-sector :is(p, li, span) { color: var(--ink-2); text-shadow: none; }
.section:not(.sand):not(.dark):not(.foam):not(.navy) .z-sector a { color: var(--sea-2); text-shadow: none; }
/* where your waste goes */
.z-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); counter-reset: flow; }
.z-flow li { position: relative; padding: 22px 20px; border-radius: var(--r); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(6px); }
.z-flow .z-ring { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--yellow); color: var(--navy); margin-bottom: 12px; }
.z-flow .z-ring .icon { width: 24px; height: 24px; }
.section:not(.sand):not(.dark):not(.foam):not(.navy) .z-flow .hd { color: #fff; font-size: 1.15rem; }
.z-flow p { margin: 0; }
@media (min-width: 900px) { .z-flow li:not(:last-child)::after { content: "→"; position: absolute; right: -14px; top: 34px; color: var(--yellow); font-weight: 800; font-size: 1.3rem; } }
/* credentials */
.z-creds { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.z-cred { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--r-sm); background: #fff; box-shadow: var(--shadow); }
.z-cred .z-ring { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--foam); color: var(--sea); }
.z-cred b { display: block; color: var(--navy); }
.z-cred span { display: block; color: var(--ink-2); font-size: .92rem; }
.z-cred a { font-size: .88rem; font-weight: 700; }
/* visit */
.z-visit { display: grid; gap: 20px; }
@media (min-width: 900px) { .z-visit { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; } }
.z-visit .z-photo { height: 100%; min-height: 260px; }
.z-cred-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; margin-bottom: 10px; padding: 18px 22px; border-radius: var(--r); background: rgba(255, 255, 255, .92); box-shadow: var(--shadow); }
.z-cred-band p { display: flex; gap: 12px; align-items: center; margin: 0; color: var(--ink); }
.z-cred-band .icon { width: 30px; height: 30px; color: var(--sea); flex: none; }
.z-cred-band strong { color: var(--navy); }
@media (max-width: 600px) { .z-cred-band .btn { width: 100%; } }

.section:not(.sand):not(.dark):not(.foam):not(.navy) .z-cred a, .z-cred a { color: var(--sea-2); text-shadow: none; }
.section:not(.sand):not(.dark):not(.foam):not(.navy) .z-cred :is(b) { color: var(--navy); text-shadow: none; }
.section:not(.sand):not(.dark):not(.foam):not(.navy) .z-cred span { color: var(--ink-2); text-shadow: none; }

/* straight dealing (home page) */
.z-trust { display: grid; gap: 28px; }
@media (min-width: 960px) { .z-trust { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 50px; align-items: start; } }
.z-promises { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 700px) { .z-promises { grid-template-columns: 1fr 1fr; } }
.z-promises li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--r-sm); background: #fff; box-shadow: var(--shadow); }
.z-promises .icon { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--foam); color: var(--sea); }
.z-promises b { display: block; color: var(--navy); margin-bottom: 4px; }
.z-promises span { display: block; color: var(--ink-2); font-size: .94rem; }
/* price zones: dropdowns on phones only */
.z-zones-drop { display: none; }
@media (max-width: 760px) {
  .z-zones-full { display: none; }
  .z-zones-drop { display: grid; gap: 10px; }
  .z-zone-d { border-radius: var(--r-sm); background: #fff; box-shadow: var(--shadow); border-left: 6px solid var(--sea); }
  .z-zone-d summary { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; list-style: none; position: relative; padding-right: 46px; }
  .z-zone-d summary::-webkit-details-marker { display: none; }
  .z-zone-d summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 700; color: var(--sea); }
  .z-zone-d[open] summary::after { content: "–"; }
  .z-zone-d summary b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--foam); color: var(--navy); font-size: 1.1rem; flex: none; }
  .z-zone-d summary span { display: grid; font-weight: 800; color: var(--navy); }
  .z-zone-d summary small { font-weight: 600; color: var(--ink-2); font-size: .85rem; }
  .z-zone-d p { margin: 0; padding: 0 16px 16px; color: var(--ink-2); font-size: .92rem; }
  .section .z-zone-d :is(span, small, p, b) { text-shadow: none; }
  .z-area-towns p.small:first-of-type { display: none; }
}
.section:not(.sand):not(.dark):not(.foam):not(.navy) .z-zone-d :is(p, span, small, b) { text-shadow: none; }
.section:not(.sand):not(.dark):not(.foam):not(.navy) .z-zone-d p { color: var(--ink-2); }

/* ---------------------------------------------------------------- the footer on phones (Dan, 15/10/2026) */
.z-foot { padding-left: 22px; padding-right: 22px; }
.z-legal { padding-left: 22px; padding-right: 22px; }
@media (max-width: 700px) {
  .z-foot { grid-template-columns: 1fr 1fr; gap: 26px 18px; padding-top: 40px; padding-bottom: 20px; }
  .z-foot > div:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; }
  .z-foot > div:first-child > a { grid-row: span 2; }
  .z-foot > div:first-child img { width: 150px; margin: 0; }
  .z-foot > div:first-child > p:not(.z-sister) { margin: 0; font-size: .88rem; }
  .z-foot .z-sister { grid-column: 1 / -1; margin-top: 8px; font-size: .84rem; }
  .z-foot > div:last-child { grid-column: 1 / -1; }
  .z-foot > div:last-child ul { columns: 2; column-gap: 18px; display: block; }
  .z-foot > div:last-child li { break-inside: avoid; margin-bottom: 8px; }
  .z-foot { font-size: .92rem; }
  .z-foot .hd { font-size: .95rem; margin-bottom: 8px; }
  .z-foot p { margin-bottom: .5em; }
  .z-foot ul { gap: 8px; }
  .z-foot a { display: inline-block; padding: 2px 0; }
  .z-legal { flex-direction: column; align-items: flex-start; gap: 12px; font-size: .78rem; padding-top: 18px; }
  .z-cards img { width: 38px; }
}
.bk-poa { font-size: 1.15rem !important; color: var(--navy); }

/* the contact form (zebrawaste.com) */
.z-contact { display: grid; gap: 30px; }
@media (min-width: 960px) { .z-contact { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: 50px; align-items: start; } }
.z-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.z-form .wide { grid-column: 1 / -1; }
.z-field { display: grid; gap: 6px; font-weight: 700; font-size: .92rem; color: var(--navy); margin: 0; }
.z-field small { font-weight: 500; color: var(--ink-2); }
.z-field :is(input, select, textarea) { font: inherit; font-size: 16px; font-weight: 500; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); width: 100%; }
.z-field :is(input, select, textarea):focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px var(--foam); }
.z-field select { appearance: auto; }
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin: 0; padding: 14px 16px; border-radius: 10px; font-weight: 600; }
.form-note.ok { background: #e9f6ee; border: 1px solid #b7dec6; color: #1d5e36; }
.form-note.fail { background: #fdecea; border: 1px solid #f3c1bd; color: #8c211e; }
@media (max-width: 600px) { .z-form { grid-template-columns: 1fr; } }
/* The logo, bigger (Dan, 17/10/2026) */
.z-brand img { width: 220px; }
@media (min-width: 1100px) { .z-brand img { width: 270px; } }
@media (min-width: 1100px) and (max-width: 1440px) { .z-brand img { width: 245px; } }
@media (min-width: 1100px) and (max-width: 1199px) { .z-brand img { width: 180px; } }
/* the phone number pill only where the bigger logo leaves room for it (the number is in the strip above anyway) */
@media (min-width: 1100px) and (max-width: 1699px) { .z-nav-cta .z-phone { display: none; } }
@media (max-width: 760px) { .z-brand img { width: 205px; } }
/* ---------------------------------------------------------------- charcoal header bar behind the logo and the menu (Dan, 17/10/2026).
   The phone menu that drops down stays white. */
.site-header { background: #2c282d; backdrop-filter: none; border-bottom-color: #3d383f; }
.site-header.scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.z-brand img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 4px 12px rgba(0, 0, 0, .35); }
.menu-toggle { background: rgba(255, 255, 255, .1); color: #fff; }
@media (min-width: 1100px) {
  .site-nav li a { color: #f1f4f7; }
  .site-nav li a:hover { background: rgba(255, 255, 255, .1); }
  .site-nav a[aria-current="page"] { background: rgba(255, 255, 255, .14); color: #fff; }
  .z-nav-cta .z-phone { background: rgba(255, 255, 255, .1); color: #fff; }
  .z-nav-cta .z-phone .icon { color: var(--sky); }
}
/* Dan, 17/10/2026: green headers tried, then "just do your suggestion": claret and blue. The header bar and the strip
   above it are navy, the family of the blue page below, so the maroon logo and the yellow buttons are the only accents */
.site-header { background: #0f3352; border-bottom-color: #1d4a70; }
.site-header.scrolled { box-shadow: 0 10px 30px rgba(5, 20, 35, .35); }
.z-top { background: var(--navy); color: #cfe3f0; }
/* town pages: a pointer to the size guide instead of the full sizes section (17/10/2026) */
.town-sizes { text-align: center; padding-top: 22px; padding-bottom: 6px; margin: 0 auto; }
.town-sizes { color: #d6e7f3 !important; font-size: .95rem; } .town-sizes a { color: #fff; font-weight: 700; }

/* ---------------------------------------------------------------- the "More services" drop-down (17/10/2026), like tauruswaste.com's */
.nav-sub-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 13px 4px; background: none; border: 0; border-bottom: 1px solid var(--foam-2); color: var(--navy); font: inherit; font-weight: 700; cursor: pointer; text-align: left; }
.nav-sub-toggle .chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: 0 4px 4px 8px; transition: transform .15s; }
.has-sub.open .chev { transform: rotate(-135deg); margin-bottom: 0; }
.site-nav .sub { display: none; list-style: none; margin: 0; padding: 0 0 6px 10px; }
.site-nav .has-sub.open .sub { display: block; }
.site-nav .sub a { display: block; padding: 10px 4px; }
.site-nav .sub a strong { display: block; color: var(--navy); }
.site-nav .sub a span { display: block; font-weight: 500; font-size: .85rem; color: #4f6478; }
@media (min-width: 1100px) {
  .site-nav > ul > li { position: relative; }
  .nav-sub-toggle { width: auto; border: 0; padding: 9px 11px; border-radius: 999px; font-weight: 600; font-size: .95rem; white-space: nowrap; color: #f1f4f7; }
  .nav-sub-toggle:hover, .has-sub.open .nav-sub-toggle { background: rgba(255, 255, 255, .1); }
  .site-nav .sub { position: absolute; top: calc(100% + 10px); left: 0; min-width: 290px; background: #fff; border-radius: 16px; box-shadow: 0 20px 44px rgba(11, 37, 64, .22); padding: 8px; z-index: 60; }
  .site-nav .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
  .site-nav .has-sub:hover .sub, .site-nav .has-sub:focus-within .sub, .site-nav .has-sub.open .sub { display: block; }
  .site-nav .sub li a { padding: 10px 12px; border-radius: 10px; background: none; }
  .site-nav .sub li a:hover { background: var(--foam); }
  .site-nav .sub li a[aria-current="page"] { background: var(--foam); }
}
/* the recycled materials enquiry form's own spacing */
.materials-form { scroll-margin-top: 110px; }
/* home: the recycled aggregate panel; commercial bins: the bin pictures (17/10/2026) */
.z-aggregate { display: grid; gap: 26px; align-items: center; padding: 34px; border-radius: 24px; color: #e4eef6; background: radial-gradient(520px 320px at 100% 0, rgba(255, 199, 44, .16) 0, rgba(255, 199, 44, 0) 70%), linear-gradient(135deg, #0f3352 0%, var(--navy) 100%); box-shadow: 0 20px 44px rgba(11, 37, 64, .2); }
.z-aggregate h2 { color: #fff; }
.z-aggregate .kicker { color: var(--sky); }
.z-aggregate p { color: #d6e7f3; }
.z-aggregate .more { color: #fff; }
.z-aggregate-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 18px; }
.z-aggregate-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.z-aggregate-list li { display: grid; gap: 2px; padding: 14px 18px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.z-aggregate-list b { color: #fff; }
.z-aggregate-list span { font-size: .9rem; color: #bcd6ea; }
@media (min-width: 900px) { .z-aggregate { grid-template-columns: 1.2fr 1fr; padding: 44px; } }
.z-bins { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(46%, 170px), 1fr)); }
.z-bin { margin: 0; background: #fff; border-radius: 16px; padding: 14px; text-align: center; box-shadow: var(--shadow); border: 1px solid var(--line); }
.z-bin img { width: 100%; height: auto; max-height: 160px; object-fit: contain; }
.z-bin figcaption { margin-top: 8px; font-weight: 700; color: var(--navy); }