/* cyclone.ie shared stylesheet. Nav styles travel with _nav.html. */

@font-face { font-family: "Inter Tight"; src: url("/assets/fonts/InterTight-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/IBMPlexSans-Variable.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/IBMPlexSans-Variable-Italic.woff2") format("woff2"); font-weight: 100 700; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/IBMPlexMono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/IBMPlexMono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/IBMPlexMono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --yellow: #F3CC1A;          /* the dot, the trust band */
  --yellow-button: #FFCE0C;   /* buttons and highlighted words on dark */
  --yellow-hover: #F0BE00;
  --black: #000000;           /* heroes, footer */
  --ink: #111111;             /* body text, closing band */
  --ink-2: #1A1A1A;
  --text-secondary: #4A4A4A;
  --text-on-dark: rgba(255,255,255,0.82);
  --bg-light: #F7F6F2;        /* off-white sections */
  --white: #FFFFFF;
  --border: #E6E3DC;
  --radius: 12px;
  --radius-btn: 10px;
  --container: 1200px;
  --font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter Tight", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
.btn, .text-link { font-family: var(--font-display); }
p, li, cite { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; }

:where(a) { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
:where(a:hover) { color: var(--black); }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--yellow-button);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 1000;
  background: var(--yellow-button); color: var(--black);
  padding: 10px 16px; border-radius: var(--radius-btn); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 120px 0; }
.section--light { background: var(--bg-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .32 0 0 0 0 .24 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.section--white { background: var(--white); }

/* Section headers */
.section-label { font-family: var(--font-mono); font-weight: 500; letter-spacing: .06em; 
  display: inline-block;
  font-size: 12px;   text-transform: uppercase;
  color: var(--ink); margin-bottom: 14px;
}
.section-label::after {
  content: ""; display: inline-block; width: 10px; height: 10px;
  background: url("/assets/img/scribble-dot.png") center / contain no-repeat; margin-left: 6px; vertical-align: 0;
}
.section-header { max-width: 760px; margin-bottom: 64px; }
.section-header.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-title { font-size: 38px; letter-spacing: -0.025em; }
.section-subtitle { margin-top: 18px; font-size: 18px; color: var(--text-secondary); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 30px;
  font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1;
  border-radius: var(--radius-btn); border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.btn-primary { background: var(--yellow-button); color: var(--black); }
.btn-primary:hover { background: var(--yellow-hover); color: var(--black); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.btn-ghost { background: transparent; color: var(--ink); border-color: #BDBAB2; }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); }
.on-dark .btn-ghost { color: var(--white); border-color: rgba(255,255,255,.35); }
.on-dark .btn-ghost:hover { border-color: var(--white); color: var(--white); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 16px; white-space: nowrap; }

.text-link {
  font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap;
  background: url("/assets/img/scribble-link.png") 0 100% / 100% 7px no-repeat; padding-bottom: 6px;
  transition: background-size .3s ease;
}
.text-link:hover { color: var(--ink); background-size: 100% 10px; }
.text-link .arrow { display: inline-block; transition: transform .2s ease; }
.text-link:hover .arrow { transform: translateX(3px); }

/* Hero (home) */
.hero {
  position: relative; overflow: hidden; color: var(--white);
  background: var(--black);
  min-height: 780px;
  display: flex; align-items: center;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background: url("/assets/img/hero-street.webp") center / cover no-repeat;
  filter: grayscale(.25) brightness(.42);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.05) 75%);
}
.hero-copy { position: relative; }
.hero-copy::before {
  content: ""; position: absolute; z-index: -1; inset: -40px -80px -40px -200px;
  background: radial-gradient(closest-side, rgba(0,0,0,.35), rgba(0,0,0,0)); pointer-events: none;
}
.hero-rider {
  position: absolute; z-index: 2; top: 7%; height: 134%; width: auto; max-width: none;
  right: calc((100vw - 1440px) / 2 - 200px); pointer-events: none;
}
.hero-inner { position: relative; z-index: 3; width: 100%; padding-top: 168px; padding-bottom: 128px; }
.hero-copy { max-width: 540px; }
.hero h1 { font-size: clamp(42px, 3.8vw, 56px); letter-spacing: -0.035em; line-height: 1.04; text-wrap: initial; }
.hero h1 .line { display: block; white-space: nowrap; }
.hero h1 .accent { color: var(--yellow-button); }
.hero-lede { margin-top: 32px; font-size: 18px; line-height: 1.6; color: var(--white); max-width: 520px; }
.hero-lede strong { font-weight: 700; }
.hero-actions { margin-top: 44px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero-actions .or { font-size: 17px; color: var(--text-on-dark); }
.hero-actions .text-link { color: var(--white); font-size: 17px; }
.hero-actions .text-link:hover { color: var(--white); }
.hero-note { margin-top: 16px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .02em; color: var(--text-on-dark); }
.hero-rating {
  margin-top: 36px; display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--text-on-dark); text-decoration: none;
}
.hero-rating:hover { color: var(--white); }
.hero-rating .stars { display: inline-flex; gap: 2px; }
.hero-rating .stars svg { width: 18px; height: 18px; }
.hero-rating b { color: var(--white); font-weight: 700; }

/* Trust band */
.trust-band { background: var(--yellow); color: var(--black); padding: 56px 0 60px; }
.trust-band h2 { text-align: center; font-size: 24px; font-weight: 600; }
.logo-row {
  margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 32px 56px; list-style: none;
}
.logo-row li { display: flex; align-items: center; justify-content: center; height: 48px; }
.logo-row img { max-height: 40px; width: auto; }
.logo-row img.wide { max-height: 22px; }
.logo-row img.mid { max-height: 30px; }

/* Cards */
.grid { display: grid; gap: 28px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px 28px; display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.card { text-decoration: none; color: inherit; }
a.card:hover, .card.is-link:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.08); border-color: #D6D2C8; }
.card h3 { font-size: 21px; }
.card p { margin-top: 14px; color: var(--text-secondary); font-size: 16px; }
.card .card-foot { margin-top: auto; padding-top: 28px; }
.card .kicker { font-family: var(--font-mono); font-weight: 500; letter-spacing: .06em;  font-size: 12px;   text-transform: uppercase; color: var(--text-secondary); margin-bottom: 10px; }

/* Joe's scribble across the top of each service card, in place of a flat yellow bar */
.service-card { position: relative; }
/* No scribble across the top of service cards: the link underline is the only streak (Brendan, 3 Nov 2026) */
.service-card .promise { margin-top: 12px; font-weight: 600; color: var(--ink); font-size: 17px; }

.icon {
  width: 48px; height: 48px; border-radius: 12px; background: var(--black);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.icon svg { width: 24px; height: 24px; stroke: var(--yellow-button); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Pillars */
.pillar h3 { font-size: 22px; }
.pillar p { margin-top: 12px; color: var(--text-secondary); }

/* Hand-drawn marks */
.service-card { display: grid; grid-template-columns: 1fr 112px; gap: 20px; align-items: start; padding: 26px 26px 26px 30px; }
.service-card .service-text { display: flex; flex-direction: column; align-items: flex-start; }
.service-card .kicker { margin-bottom: 6px; }
.service-card h3 { font-size: 22px; }
.service-card .promise { margin-top: 8px; font-weight: 400; font-size: 16.5px; line-height: 1.5; color: var(--text-secondary); max-width: 34ch; }
.service-card .text-link { margin-top: 16px; font-size: 16px; }
.service-card .sketch { width: 100%; height: 76px; object-fit: contain; object-position: right top; }
.grid-3 > .service-card { grid-template-columns: 1fr 80px; column-gap: 16px; padding: 24px; }
.grid-3 > .service-card .sketch { height: 52px; }
.grid-3 > .service-card .promise { max-width: none; }
.pillar-sketch { width: 52px; height: 52px; object-fit: contain; object-position: center top; }
.pillar-list .pillar { grid-template-columns: 52px 1fr !important; gap: 22px; }
.route-card { flex-direction: row; gap: 22px; align-items: flex-start; }
.route-card > div { display: flex; flex-direction: column; align-self: stretch; flex: 1; }
.route-sketch { width: 56px; height: 56px; flex: 0 0 56px; object-fit: contain; }
.story-card { display: grid; grid-template-columns: 1fr 56px; column-gap: 20px; align-items: start; }
.story-sketch { grid-column: 2; grid-row: 1 / span 2; width: 56px; height: 56px; object-fit: contain; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.story-body { display: contents; }
.story-card .sector { font-family: var(--font-mono); font-weight: 500; letter-spacing: .06em;  grid-column: 1; grid-row: 1; }
.story-card h3 { grid-column: 1; grid-row: 2; }
.story-card p { grid-column: 1 / -1; grid-row: 3; }
.story-foot { grid-column: 1 / -1; grid-row: 4; align-self: end; }
.story-card .sector { margin-bottom: 6px; }
.story-card h3 { margin-top: 0; }
.story-card p { margin-top: 8px; }
.story-foot { margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.story-card p + .story-foot { margin-top: 18px; border-top: 1px solid var(--border); }
.story-logo { max-height: 22px; width: auto; filter: grayscale(1); opacity: .6; transition: opacity .25s ease; }
.story-logo-text { font-family: var(--font-mono); font-weight: 500; letter-spacing: .06em;  font-size: 12px;  color: #707070;  }
.story-card:hover .story-sketch { transform: translateY(-4px) scale(1.04); }
.story-card:hover .story-logo { opacity: .9; }

/* Split: real photo beside copy */
.split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 80px; align-items: center; }
.split-photo img { width: 100%; height: 100%; max-height: 620px; object-fit: cover; border-radius: 16px; }
.split-copy .section-title { margin-bottom: 40px; }
.pillar-list { display: grid; gap: 32px; }
.pillar-list .pillar { display: grid; grid-template-columns: 48px 1fr; gap: 20px; align-items: start; }
.pillar-list .icon { margin-bottom: 0; }
.pillar-list .pillar h3 { font-size: 21px; }
.pillar-list .pillar p { margin-top: 8px; }

/* Fleet */
.fleet-card { padding-top: 24px; }
.fleet-img { height: 96px; display: flex; align-items: center; justify-content: flex-start; margin-bottom: 18px; }
.fleet-img img { max-height: 96px; width: auto; max-width: 70%; object-fit: contain; }
.section-more { margin-top: 40px; }

/* Number strip */
.numbers {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.number { padding: 36px 28px; }
.number + .number { border-left: 1px solid var(--border); }
.number .figure { font-family: var(--font-display); font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.number .figure .unit { font-size: 22px; font-weight: 600; margin-left: 2px; }
.number p { margin-top: 12px; color: var(--text-secondary); font-size: 16px; }

/* Sub-block inside a section */
.sub-block { margin-top: 88px; padding-top: 56px; border-top: 1px solid var(--border); }
.sub-block > h3 { font-size: 24px; margin-bottom: 36px; }

/* Reviews */
.review { justify-content: space-between; }
.review .stars { display: flex; gap: 2px; margin-bottom: 16px; }
.review .stars svg { width: 18px; height: 18px; }
.review blockquote { margin: 0; text-wrap: pretty; font-size: 17.5px; line-height: 1.55; color: var(--ink); }
.review cite { display: block; margin-top: 20px; font-style: normal; font-weight: 700; font-size: 15px; }
.review cite span { display: block; font-weight: 400; color: var(--text-secondary); }

/* Story cards */
.story-card .sector { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }

/* Route cards */
.route-card { border: 2px solid var(--yellow); }
.route-card h3 { font-size: 21px; }
.route-card .btn { align-self: flex-start; }

/* Closing band */
.closing { background: var(--ink-2); color: var(--white); padding: 120px 0; text-align: center; }
.closing h2 { font-size: 38px; }
.closing p { margin: 20px auto 0; max-width: 540px; color: var(--text-on-dark); font-size: 18px; }
.closing .hero-actions { justify-content: center; }

/* Footer */
.site-footer { background: var(--black); color: var(--text-on-dark); padding: 72px 0 32px; font-size: 15.5px; }
.site-footer a { color: var(--text-on-dark); text-decoration: none; }
.site-footer a { background: url("/assets/img/scribble-link.png") 0 100% / 0% 6px no-repeat; padding-bottom: 4px; transition: background-size .3s ease, color .2s ease; }
.site-footer a:hover { color: var(--white); background-size: 100% 6px; }
.site-footer a[aria-label="Cyclone home"] { background: none; padding-bottom: 0; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1.25fr 1fr 1.2fr; gap: 32px; }
.footer-brand img { width: 140px; height: auto; }
.footer-brand p { margin-top: 18px; max-width: 280px; line-height: 1.55; }
.footer-col h2 { font-family: var(--font-mono); font-weight: 500; letter-spacing: .06em;  font-size: 12px;   text-transform: uppercase; color: var(--white); margin-bottom: 16px; }
.footer-col ul { list-style: none; }
.footer-col li + li { margin-top: 10px; }
.footer-col address { font-style: normal; line-height: 1.6; }
.footer-col address + p { margin-top: 12px; }
.footer-bottom {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; font-size: 14px; color: rgba(255,255,255,.66);
}
.footer-bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-bottom a { color: rgba(255,255,255,.66); }


/* Service page hero: copy left, product visual right */
.page-hero { background: radial-gradient(ellipse 55% 60% at 85% 35%, rgba(255,206,12,.10) 0%, rgba(255,206,12,0) 65%), linear-gradient(180deg, #000 0%, #0D0D0D 100%); color: var(--white); padding: 176px 0 112px; position: relative; overflow: hidden; }
.page-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 88px; align-items: center; }
.page-label { font-family: var(--font-mono); font-weight: 500; letter-spacing: .06em;  display: inline-block; font-size: 12px;   text-transform: uppercase; color: var(--yellow-button); margin-bottom: 18px; }
.page-hero h1 { font-size: clamp(38px, 3.6vw, 52px); letter-spacing: -0.03em; line-height: 1.06; }
.page-hero h1 .accent { color: var(--yellow-button); }
.page-hero .hero-lede { max-width: 540px; }
.page-hero .hero-note { margin-top: 16px; }

/* Booking card, after the agreed ClickaCourier design */
.book-visual { position: relative; max-width: 460px; justify-self: end; width: 100%; }
.book-card { position: relative; z-index: 1; background: #0B0B0B; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; padding: 26px 24px 24px; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.book-card .book-title { font-size: 22px; font-weight: 600; line-height: 1.15; }
.book-card .book-title span { display: block; color: var(--yellow-button); }
.book-field { margin-top: 18px; }
.book-field label { display: block; font-size: 13px; font-weight: 700; color: var(--yellow-button); margin-bottom: 6px; }
.book-field .field { border: 1px solid rgba(255,255,255,.2); border-radius: 10px; padding: 12px 14px; font-size: 15px; line-height: 1.35; }
.book-field .field b { display: block; color: var(--yellow-button); font-weight: 600; }
.book-field .field.empty { color: rgba(255,255,255,.5); }
.book-actions { margin-top: 20px; display: flex; align-items: center; gap: 18px; }
.book-actions .btn { min-height: 46px; padding: 0 26px; font-size: 16px; }
.book-actions span:not(.btn) { color: var(--yellow-button); font-weight: 700; font-size: 15px; }
.track-chip {
  z-index: 2;
  position: absolute; right: -28px; bottom: -36px; background: var(--yellow-button); color: var(--black);
  border-radius: 16px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.track-chip .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--black); box-shadow: 0 0 0 5px rgba(0,0,0,.15); }
.track-chip p { font-size: 15px; line-height: 1.3; }
.track-chip p b { display: block; font-size: 16px; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; counter-reset: step; list-style: none; padding: 0; margin: 0; }
.step { display: grid; grid-template-columns: 52px 1fr; gap: 20px; align-items: start; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.step { transition: transform .25s ease, box-shadow .25s ease; }
.step:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -20px rgba(0,0,0,.25); }
.step::before {
  counter-increment: step; content: counter(step);
  width: 52px; height: 52px; background: url("/assets/img/scribble-dot.png") center / contain no-repeat; color: var(--black);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 22px;
}
.step h3 { font-size: 21px; }
.step p { margin-top: 8px; color: var(--text-secondary); }

/* Vehicle table */
.vehicle-table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.vehicle-table th, .vehicle-table td { text-align: left; padding: 18px 22px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.vehicle-table thead th { font-family: var(--font-mono); font-weight: 500; letter-spacing: .06em;  font-size: 12px;   text-transform: uppercase; color: var(--text-secondary); background: #FBFAF7; }
.vehicle-table tbody tr:last-child td, .vehicle-table tbody tr:last-child th { border-bottom: 0; }
.vehicle-table tbody th { font-weight: 600; font-size: 17px; white-space: nowrap; }
.vehicle-table .thumb { display: flex; align-items: center; gap: 16px; }
.vehicle-table .thumb img { width: 92px; height: 60px; object-fit: contain; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.vehicle-table tbody tr { transition: background-color .2s ease; }
.vehicle-table tbody tr:hover { background: #FBFAF7; }
.vehicle-table tbody tr:hover .thumb img { transform: translateX(4px) scale(1.05); }
.vehicle-table td { color: var(--text-secondary); font-size: 16px; }
.vehicle-table td.load { color: var(--ink); font-weight: 600; white-space: nowrap; }
.tag-zero { display: inline-block; margin-left: 8px; padding: 3px 9px; border-radius: 99px; background: #EAF5EC; color: #1C6B33; font-size: 12px; font-weight: 700; letter-spacing: .02em; vertical-align: 2px; }

/* Price cards */
.price-card { transition: box-shadow .25s ease, transform .25s ease; }
.price-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(0,0,0,.25); }
.price-card h3 { font-size: 24px; }
.price-card .lead { margin-top: 12px; color: var(--ink); font-size: 17px; }
.checklist { list-style: none; margin-top: 20px; display: grid; gap: 12px; }
.checklist li { position: relative; padding-left: 30px; color: var(--text-secondary); }
.checklist li::before {
  content: ""; position: absolute; left: -2px; top: 1px; width: 24px; height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-8.2' fill='none' stroke='%23111' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat, url("/assets/img/scribble-dot.png") center / contain no-repeat;
}
.price-card .card-foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Proof story */
.story-proof .figure { font-size: 48px; font-weight: 700; line-height: 1; }
.story-proof .figure .unit { font-size: 22px; font-weight: 600; margin-left: 4px; }

/* FAQ */
.faq-list { max-width: 860px; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0; background: none; border: 0; cursor: pointer; text-align: left;
  font: 600 19px/1.35 var(--font-display); color: var(--ink); text-wrap: balance;
}
.faq-q::after { content: "+"; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-light); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 400; transition: transform .2s ease, background-color .2s ease; }
.faq-q:hover::after { background: var(--yellow-button); }
.faq-q[aria-expanded="true"]::after { transform: rotate(45deg); background: var(--yellow-button); }
.faq-a { padding: 0 56px 26px 0; color: var(--text-secondary); }
.faq-a a { font-weight: 600; }

/* Polish: one visual language from the hero to the footer */
.wash { background: url("/assets/img/scribble-underline.png") 0 100% / 100% .5em no-repeat; padding: 0 .1em; margin: 0 -.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 100%); pointer-events: none; }
.trust-band { position: relative; box-shadow: inset 0 10px 18px -12px rgba(0,0,0,.35); }
.split-photo { position: relative; isolation: isolate; }
.split-photo::before { content: ""; position: absolute; z-index: -1; right: -34px; bottom: -34px; width: 70%; height: 74%; background: url("/assets/img/scribble-patch.png") center / 100% 100% no-repeat; }
.split-photo img { box-shadow: 0 24px 50px -24px rgba(0,0,0,.45); }
/* One scribble stroke under every proof figure, its unit included, a little wider than the type */
.number .figure, .story-proof .figure { display: inline-block; background: url("/assets/img/scribble-figure.png") 0 100% / 100% .3em no-repeat; padding: 0 .1em .08em; margin: 0 -.1em; }

/* Card hovers */
.card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
a.card:hover, .route-card:hover, .fleet-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(0,0,0,.28); }
.route-card:hover { border-color: var(--yellow-hover); }
.service-card .sketch, .route-sketch, .fleet-img img, .pillar-sketch { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.service-card:hover .sketch { transform: translateX(8px) rotate(-1.5deg); }
.route-card:hover .route-sketch, .fleet-card:hover .fleet-img img { transform: translateY(-4px) scale(1.04); }
.pillar:hover .pillar-sketch { transform: rotate(-4deg) scale(1.06); }
.story-card h3, .service-card h3 { background: url("/assets/img/scribble-link.png") 0 100% / 0% 8px no-repeat; padding-bottom: 6px; transition: background-size .35s cubic-bezier(.2,.7,.2,1); }
.story-card:hover h3, .service-card:hover h3 { background-size: 100% 8px; }
.review { transition: box-shadow .25s ease; }
.review:hover { box-shadow: 0 14px 34px -20px rgba(0,0,0,.25); }

/* Closing band: dark, warm, with the chalk cargo bike */
.closing { position: relative; overflow: hidden; background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(255,206,12,.13) 0%, rgba(255,206,12,0) 60%), linear-gradient(180deg, #1C1C1C 0%, #141414 100%); }
.closing .container { position: relative; }
.closing-art { display: block; width: 150px; height: auto; margin: 0 auto 24px; opacity: .92; }
.closing h2 .accent { color: var(--yellow-button); }
.site-footer { border-top: 1px solid rgba(255,255,255,.06); }

@media (prefers-reduced-motion: reduce) {
  a.card:hover, .route-card:hover, .fleet-card:hover, .service-card:hover .sketch { transform: none; }
}

/* Live feel on the hero: tracking tags and a status strip of true facts */
.hero-hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hud-tag {
  position: absolute; left: var(--x); top: var(--y);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--white); padding: 6px 0 7px; border-bottom: 1px solid rgba(255,206,12,.85);
  opacity: 0; animation: hud 9s ease-in-out var(--d) infinite;
}
.hud-tag::before { content: ""; display: block; width: 14px; height: 2px; margin-bottom: 6px; background: var(--yellow-button); }
@keyframes hud { 0%, 8% { opacity: 0; transform: translateY(6px); } 14%, 46% { opacity: 1; transform: none; } 54%, 100% { opacity: 0; transform: translateY(-4px); } }
.hero-status { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; border-top: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.55); backdrop-filter: blur(6px); }
.hero-status-inner { display: flex; flex-wrap: wrap; gap: 8px 36px; padding-top: 14px; padding-bottom: 14px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.hero-status b { color: var(--white); font-weight: 500; }
.status-collection i { display: none; }
.status-collection.is-live i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow-button); margin-right: 10px; vertical-align: 1px; animation: blink 1.4s steps(1) infinite; }
.status-collection.is-live[title] { cursor: help; }
.hero-status .status-note { color: rgba(255,255,255,.5); }
.status-live i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow-button); margin-right: 10px; vertical-align: 1px; animation: blink 1.4s steps(1) infinite; }
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .2; } }
.hero-inner { padding-bottom: 168px; }
/* Text sits low in the hero, just above the status bar, with open sky above it (Joe's layout, Brendan 20 Oct 2026) */
.hero { min-height: max(780px, 100vh); align-items: flex-end; }
.hero-inner { padding-top: 200px; padding-bottom: 104px; }

/* Line-drawn cargo bike that rides into the closing band (drawing by Joe, Cyclone) */
.line-bike-wrap { width: min(420px, 80%); margin: 0 auto 30px; }
.line-bike { display: block; width: 100%; height: auto; overflow: visible; }
.line-bike .wheel { transform-box: fill-box; transform-origin: center; }
@supports (animation-timeline: view()) {
  .line-bike-wrap { animation: ride linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  .line-bike .wheel { animation: spin-rear linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  .line-bike .wheel-front { animation-name: spin-front; }
}
@keyframes ride { from { transform: translateX(60vw); } to { transform: none; } }
@keyframes spin-rear { from { transform: rotate(720deg); } to { transform: rotate(0); } }
@keyframes spin-front { from { transform: rotate(1020deg); } to { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) {
  .hud-tag { animation: none; opacity: 1; }
  .status-live i, .status-collection i, .line-bike-wrap, .line-bike .wheel { animation: none !important; }
}

/* Responsive */
@media (max-width: 1100px) {
  .service-card { grid-template-columns: 1fr 88px; column-gap: 16px; padding: 24px; }
  .grid.grid-services { grid-template-columns: 1fr; }
  .grid-4:has(> .fleet-card) { grid-template-columns: repeat(2, 1fr); }
  .split-photo::before { right: -16px; bottom: -18px; }
  .service-card .sketch { height: 60px; }
}
@media (max-width: 1024px) {
  .page-hero-grid { grid-template-columns: 1fr; gap: 64px; }
  .book-visual { justify-self: start; }
  .section { padding: 96px 0; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .hero-rider { height: 100%; top: 29%; right: -240px; }
  .hero-copy { max-width: 560px; }
  .numbers { grid-template-columns: repeat(2, 1fr); }
  .number:nth-child(3) { border-left: 0; }
  .number:nth-child(n+3) { border-top: 1px solid var(--border); }
  .footer-top { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split-photo img { max-height: 420px; }
}
@media (max-width: 860px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .hero-hud { display: none; }
  .hero-status-inner { gap: 6px 22px; font-size: 11px; }
  .hero-status-inner > span:nth-child(n+3) { display: none; }
  .line-bike-wrap { width: 78%; }
  .grid-4:has(> .fleet-card) { grid-template-columns: 1fr; }
  .page-hero { padding: 128px 0 88px; }
  .track-chip { position: relative; right: auto; bottom: auto; margin: -22px 0 0 auto; width: max-content; }
  .book-actions { flex-wrap: wrap; gap: 12px 18px; }
  .book-actions .btn { white-space: nowrap; }
  .steps { grid-template-columns: 1fr; }
  .step { grid-template-columns: 44px 1fr; padding: 22px; gap: 16px; }
  .step::before { width: 44px; height: 44px; font-size: 19px; }
  .vehicle-table thead { display: none; }
  .vehicle-table, .vehicle-table tbody, .vehicle-table tr, .vehicle-table th, .vehicle-table td { display: block; width: 100%; }
  .vehicle-table tr { padding: 18px 20px; border-bottom: 1px solid var(--border); }
  .vehicle-table tbody tr:last-child { border-bottom: 0; }
  .vehicle-table th, .vehicle-table td { padding: 4px 0; border: 0; }
  .vehicle-table td.load { margin-top: 6px; }
  .faq-q { font-size: 17px; }
  .card { padding: 26px 22px; }
  .card h3 { font-size: 19px; }
  .service-card, .grid-3 > .service-card { grid-template-columns: 1fr 52px; column-gap: 12px; }
  .service-card .sketch, .grid-3 > .service-card .sketch { height: 44px; }
  .service-card, .grid-3 > .service-card { padding: 20px; }
  .service-card .promise { font-size: 16px; }
  .step { grid-template-columns: 1fr; gap: 12px; }
  .faq-a { padding-right: 0; }
  body { font-size: 16px; }
  .section { padding: 72px 0; }
  .container { padding: 0 20px; }
  .section-title { font-size: 28px; }
  .section-subtitle { font-size: 17px; }
  .section-header { margin-bottom: 36px; }
  .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .hero { min-height: 0; display: block; }
  .hero-inner { padding-top: 112px; padding-bottom: 300px; }
  .hero h1 { font-size: min(36px, 8.6vw); }
  .hero-lede { font-size: 17px; margin-top: 24px; }
  .hero-actions { margin-top: 30px; gap: 14px; }
  .hero-actions .btn { width: 100%; }
  .hero-rider { top: auto; height: auto; width: 520px; max-width: 135vw; right: 50%; transform: translateX(50%); bottom: -150px; }
  .hero::after { background: linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.2) 100%); }
  .trust-band h2 { font-size: 22px; }
  .logo-row { gap: 20px 32px; }
  .logo-row img { max-height: 32px; }
  .number .figure { font-size: 36px; }
  .closing { padding: 80px 0; }
  .closing h2 { font-size: 28px; }
  .closing-art { width: 120px; }
  .split-photo::before { right: -12px; bottom: -14px; }
  .closing .btn { width: 100%; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .sub-block { margin-top: 48px; }
  .pillar-list .pillar { grid-template-columns: 1fr !important; gap: 10px; }
  .pillar-sketch { width: 44px; height: 44px; }
  .route-card { flex-direction: column; gap: 14px; }
  .story-card { grid-template-columns: 1fr 48px; column-gap: 14px; }
  .story-sketch { width: 48px; height: 48px; }
  .route-sketch { width: 48px; height: 48px; flex-basis: 48px; }
}
@media (max-width: 480px) {
  .numbers { grid-template-columns: 1fr; }
  .number + .number { border-left: 0; border-top: 1px solid var(--border); }
  .footer-top { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* Inbound pages (19 Oct 2026): short page hero, the Contact router, the contact form */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.page-hero--short { padding: 168px 0 96px; }
.page-hero-copy { max-width: 720px; }
.card-title { font-size: 22px; }
/* Contact Us opens straight on the choices (Brendan, 19 Oct 2026): no hero, black nav above, choices on 2 rows at most */
/* Action pages (Brendan, 19 Oct 2026): no hero; black nav, then a short header and the actions straight away */
.action-start { padding: 56px 0 104px; }
.action-head { max-width: 780px; margin-bottom: 32px; }
.action-head .section-title { font-size: clamp(34px, 3.4vw, 46px); }
.action-head .section-subtitle { margin-top: 12px; }
.action-cta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.action-cta .or { color: var(--text-secondary); }
.route-grid { gap: 18px; }
.route-card.is-compact { padding: 22px 20px; gap: 14px; }
.route-card.is-compact .route-sketch { width: 46px; height: 46px; flex-basis: 46px; }
.route-card.is-compact h3 { font-size: 18px; }
.route-card.is-compact p { font-size: 15px; margin-top: 4px; }
.route-card.is-compact .card-foot { padding-top: 16px; }
.router-options { display: flex; flex-wrap: wrap; gap: 12px; }
.router-option {
  font: 600 17px/1.2 var(--font-display); color: var(--ink); text-align: left; white-space: nowrap;
  background: var(--white); border: 2px solid var(--border); border-radius: var(--radius-btn);
  padding: 15px 20px; cursor: pointer; transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}
.router-option:hover { border-color: var(--ink); transform: translateY(-2px); }
.router-option[aria-expanded="true"] { border-color: var(--ink); background: url("/assets/img/scribble-link.png") 20px calc(100% - 10px) / calc(100% - 40px) 8px no-repeat, var(--white); }
.router-panel { margin-top: 20px; padding: 28px 32px; border: 2px solid var(--yellow); border-radius: var(--radius); background: var(--white); max-width: 760px; }
.router-lead { font-size: 19px; color: var(--ink); }
.router-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.contact-form { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-row label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.form-row input, .form-row textarea { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1.5px solid #CFCBC2; border-radius: 10px; background: var(--white); color: var(--ink); }
.form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--ink); }
.form-row--full { grid-column: 1 / -1; }
.meetings-embed { min-height: 160px; }
/* Notes for the review build only: shown on localhost and *.vercel.app by site.js, never on cyclone.ie */
.review-note { display: none; grid-column: 1 / -1; margin-top: 8px; padding: 14px 16px; border: 1.5px dashed #B9B4A8; border-radius: 10px; font-family: var(--font-mono); font-size: 13px; color: var(--text-secondary); }
.review-note.is-shown { display: block; }
@media (max-width: 768px) {
  .page-hero--short { padding: 128px 0 72px; }
  .action-start { padding: 36px 0 80px; }
  .router-option { white-space: normal; flex: 1 1 100%; }
  .router-panel { padding: 24px; }
  .contact-form { grid-template-columns: 1fr; }
}

/* Cyclone's own Sales booking tool (19 Oct 2026): calendar, times, details, confirmation */
.sch-step[hidden] { display: none !important; }
.scheduler { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px; box-shadow: 0 24px 50px -32px rgba(0,0,0,.28); }
.sch-pick { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(260px, 1fr); gap: 48px; }
.sch-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sch-month { font: 700 20px/1.2 var(--font-display); }
.sch-nav { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--white); font-size: 18px; cursor: pointer; color: var(--ink); }
.sch-nav:hover:not(:disabled) { border-color: var(--ink); }
.sch-nav:disabled { opacity: .3; cursor: default; }
.sch-weekdays, .sch-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.sch-weekdays span { font: 500 12px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); padding-bottom: 8px; }
.sch-day { aspect-ratio: 1; border: 0; background: none; border-radius: 50%; font: 500 16px/1 var(--font-display); color: #B3AFA6; }
.sch-day.is-open { color: var(--ink); font-weight: 700; cursor: pointer; background: #F6F4EF; }
.sch-day.is-open:hover { background: #EDEAE2; }
.sch-day.is-selected { background: url("/assets/img/scribble-dot.png") center / 100% 100% no-repeat; color: var(--black); }
.sch-day.is-blank { visibility: hidden; }
.sch-times-head { font: 700 20px/1.2 var(--font-display); }
.sch-times-note { margin-top: 6px; font-size: 15px; color: var(--text-secondary); }
.sch-times { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; max-height: 360px; overflow-y: auto; padding-right: 4px; }
.sch-time { font: 600 16px/1 var(--font-display); padding: 14px 8px; border: 2px solid var(--border); border-radius: var(--radius-btn); background: var(--white); color: var(--ink); cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.sch-time:hover { border-color: var(--ink); transform: translateY(-1px); }
.sch-chosen { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding: 18px 22px; border-radius: 12px; background: #FFF5CC; border: 2px solid var(--yellow); }
.sch-chosen p { margin: 0; }
.sch-chosen-label { display: block; font: 500 12px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.sch-chosen b { font: 700 18px/1.3 var(--font-display); }
.sch-change { background: none; border: 0; cursor: pointer; font-size: 16px; }
.sch-topics { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sch-topics legend { font-weight: 600; font-size: 15px; margin-bottom: 8px; padding: 0; }
.sch-topic input { position: absolute; opacity: 0; }
.sch-topic span { display: inline-block; padding: 11px 16px; border: 2px solid var(--border); border-radius: var(--radius-btn); font: 600 15px/1 var(--font-display); cursor: pointer; }
.sch-topic input:checked + span { border-color: var(--ink); background: url("/assets/img/scribble-link.png") 14px calc(100% - 6px) / calc(100% - 28px) 6px no-repeat; }
.sch-topic input:focus-visible + span { outline: 3px solid var(--yellow-button); outline-offset: 2px; }
.sch-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sch-error { grid-column: 1 / -1; color: #9A3412; font-weight: 600; }
.sch-done { display: flex; gap: 28px; align-items: flex-start; }
.sch-done-mark { width: 96px; height: auto; flex: 0 0 96px; }
.sch-done h3, .sch-offline h3 { font-size: 26px; margin-bottom: 10px; }
.sch-done p + p { margin-top: 8px; }
.sch-offline .btn { margin-top: 18px; }
@media (max-width: 860px) {
  .scheduler { padding: 22px; }
  .sch-pick { grid-template-columns: 1fr; gap: 28px; }
  .sch-times { max-height: none; }
  .sch-done { flex-direction: column; }
}

/* Booking tool, tighter (Brendan, 19 Oct 2026): fits the first screen; a chosen date shows at once */
.action-head { margin-bottom: 24px; }
.action-head .section-title { font-size: clamp(30px, 3vw, 40px); }
.scheduler { padding: 24px 28px; }
.sch-pick { grid-template-columns: 340px 1fr; gap: 40px; align-items: start; }
.sch-cal-head { margin-bottom: 10px; }
.sch-month, .sch-times-head { font-size: 18px; }
.sch-nav { width: 34px; height: 34px; font-size: 16px; }
.sch-weekdays, .sch-days { gap: 4px; }
.sch-weekdays span { font-size: 11px; padding-bottom: 6px; }
.sch-day { aspect-ratio: auto; height: 40px; font-size: 15px; }
.sch-day.is-selected, .sch-day.is-selected:hover { background: url("/assets/img/scribble-dot.png") center / 40px 40px no-repeat; color: var(--black); }
.sch-times-note { margin-top: 4px; font-size: 14px; }
.sch-times { margin-top: 14px; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; max-height: 300px; }
.sch-time { font-size: 15px; padding: 10px 6px; }
.sch-chosen { padding: 12px 18px; }
.sch-chosen b { font-size: 17px; }
.scheduler .contact-form { margin-top: 18px; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; }
.scheduler .form-row label { font-size: 14px; margin-bottom: 4px; }
.scheduler .form-row input { padding: 10px 12px; }
.scheduler .sch-topics legend { font-size: 14px; margin-bottom: 6px; }
.sch-topic span { padding: 9px 14px; font-size: 14px; }
@media (max-width: 860px) {
  .sch-pick { grid-template-columns: 1fr; gap: 20px; }
  .scheduler .contact-form { grid-template-columns: 1fr; }
  .sch-day { height: 38px; }
  .sch-day.is-selected, .sch-day.is-selected:hover { background-size: 38px 38px; }
}
/* Dates stay round at every width: a fixed circle centred in each column */
.sch-day { width: 40px; height: 40px; padding: 0; justify-self: center; }
@media (max-width: 860px) { .sch-day { width: 38px; height: 38px; } }

/* Contact choices: 4 on the first row and 3 on the second at desktop width (Brendan, 19 Oct 2026) */
.router-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1180px; }
.router-option { white-space: normal; font-size: 16px; padding: 14px 18px; min-height: 54px; }
@media (max-width: 900px) { .router-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .router-options { grid-template-columns: 1fr; } }
.action-head .section-subtitle .text-link { font-size: inherit; }

/* Help and Support (Brendan, 19 Oct 2026): answers first with a chat card beside them, then the routes as quiet cards with text links */
.help-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; margin-top: 8px; }
.help-layout .faq-list { max-width: none; }
.faq-a a { color: var(--ink); text-decoration-color: var(--yellow-button); text-decoration-thickness: 2px; }
.help-aside { position: sticky; top: 120px; padding: 28px; border: 2px solid var(--yellow); border-radius: var(--radius); background: var(--white); }
.help-aside img { width: 56px; height: auto; margin-bottom: 12px; }
.help-aside p { margin: 8px 0 18px; color: var(--text-secondary); font-size: 16px; }
.help-aside .help-aside-call { margin: 14px 0 0; font-size: 15px; }
.help-aside-call a { font-weight: 600; color: var(--ink); }
.route-card.is-quiet { border: 1px solid var(--border); padding: 22px 20px; gap: 14px; text-decoration: none; color: inherit; }
.route-card.is-quiet:hover { border-color: #CFCBC2; }
.route-card.is-quiet .route-sketch { width: 46px; height: 46px; flex-basis: 46px; }
.route-card.is-quiet h3, .route-card.is-chat h3 { font-size: 18px; }
.route-card.is-quiet p, .route-card.is-chat p { font-size: 15px; margin-top: 4px; color: var(--text-secondary); }
.route-link { display: inline-flex; gap: 6px; margin-top: 14px; font: 700 15px/1.2 var(--font-display); color: var(--ink); padding-bottom: 5px; background: url("/assets/img/scribble-link.png") 0 100% / 0% 6px no-repeat; transition: background-size .3s ease; }
.route-link .arrow { transition: transform .2s ease; }
a.card:hover .route-link { background-size: 100% 6px; }
a.card:hover .route-link .arrow { transform: translateX(3px); }
.route-card.is-chat { background: var(--yellow-button); border: 0; padding: 22px 20px; text-decoration: none; color: var(--black); }
.route-card.is-chat p { color: var(--black); }
.route-card.is-chat .route-link { background-image: none; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 960px) {
  .help-layout { grid-template-columns: 1fr; gap: 32px; }
  .help-aside { position: static; }
}
/* Help and Support answers on their own, leaving the right of the page for the open Intercom messenger */
.help-layout--solo { grid-template-columns: minmax(0, 860px); }

/* Slim chat bar on Help and Support, in place of Intercom's round launcher (Brendan, 19 Oct 2026) */
.chat-bar { position: fixed; right: 24px; bottom: 24px; z-index: 2147483000; display: none; align-items: center; gap: 12px; padding: 12px 18px 12px 14px; border: 0; border-radius: 999px; background: #111; color: #fff; text-align: left; cursor: pointer; box-shadow: 0 12px 30px -10px rgba(0,0,0,.45); font-family: var(--font-display); transition: transform .2s ease; }
.chat-bar.is-ready { display: inline-flex; }
.chat-bar[hidden] { display: none; }
.chat-bar:hover { transform: translateY(-2px); }
.chat-bar b { display: block; font-size: 16px; line-height: 1.2; }
.chat-bar small { display: block; font: 400 13px/1.3 var(--font-body, var(--font)); color: rgba(255,255,255,.72); }
.chat-bar-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--yellow-button); flex: 0 0 12px; }
.chat-bar-arrow { color: var(--yellow-button); font-size: 18px; }
@media (max-width: 560px) { .chat-bar { right: 16px; bottom: 16px; } .chat-bar small { display: none; } }

/* Contact Us next-step panels carry their drawing (Brendan, 19 Oct 2026: "a bit flat") */
.router-panel { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 28px; align-items: center; max-width: 820px; padding: 28px 32px 28px 28px; background: #FFFBEA; }
.router-panel[hidden] { display: none; }
.router-panel-mark { width: 112px; height: 96px; object-fit: contain; }
.router-panel-body .router-actions { margin-top: 16px; }
.router-panel-body .contact-form { margin-top: 18px; }
.router-panel:has(.contact-form) { align-items: start; }
@media (max-width: 640px) {
  .router-panel { grid-template-columns: 1fr; gap: 14px; }
  .router-panel-mark { width: 84px; height: 72px; }
}
/* An action page that is a single section fills the screen, so the footer starts below the fold
   (Brendan, 19 Oct 2026: Contact looked cramped with the footer pulled up) */
main > .action-start:last-child { min-height: calc(100vh - 92px); padding-bottom: 160px; }
@media (max-width: 1080px) { main > .action-start:last-child { min-height: calc(100vh - 76px); padding-bottom: 120px; } }
/* Panel drawings at the height of 2 lines of text, level with the first line (Brendan, 19 Oct 2026) */
.router-panel { grid-template-columns: 72px minmax(0, 1fr); gap: 24px; align-items: start; }
.router-panel-mark { width: 72px; height: 60px; object-fit: contain; object-position: center top; margin-top: 2px; }
.router-lead { line-height: 30px; }
@media (max-width: 640px) { .router-panel-mark { width: 60px; height: 50px; } }

/* Service / Measured strip under the hero, from Joe's site (Brendan, 20 Oct 2026); figures count up on view */
.measured { background: var(--black); color: var(--white); padding: 44px 0 40px; }
.measured-label { font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); display: flex; align-items: center; gap: 10px; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.18); }
.measured-label b { color: var(--white); font-weight: 600; }
.measured-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow-button); }
.measured-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.measured-figure { font: 700 clamp(64px, 7vw, 96px)/1 var(--font-display); letter-spacing: -0.05em; color: var(--white); display: flex; align-items: baseline; font-variant-numeric: tabular-nums; }
.measured-unit { font-size: .42em; letter-spacing: -0.02em; color: var(--yellow-button); margin-left: .06em; }
.measured-lt { margin: 0 .12em 0 0; }
.measured-caption { margin-top: 14px; max-width: 280px; font: 400 15px/1.55 var(--font-mono); color: rgba(255,255,255,.88); }
.measured-note { margin-top: 30px; font: 400 12px/1.5 var(--font-mono); color: rgba(255,255,255,.45); }
@media (max-width: 760px) {
  .measured-grid { grid-template-columns: 1fr; gap: 26px; }
  .measured-caption { max-width: none; }
}
/* Home hero: Instant Courier Booking, with "No account required" in small print beneath (Brendan, 20 Oct 2026) */
.hero-book { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
.hero-book-note { font: 500 12px/1 var(--font-mono); letter-spacing: .04em; color: rgba(255,255,255,.72); }
.action-cta .hero-book { align-items: flex-start; }
.action-cta .hero-book-note { color: var(--text-secondary); }
.action-cta:has(.hero-book) { align-items: flex-start; }
.hero-actions { align-items: flex-start; }
.hero-actions .or, .hero-actions > .text-link { margin-top: 14px; }
/* 3 figures (Keith, 6 Nov 2026, the 81-minute figure removed): figures no larger than the hero H1, captions on 2 lines */
.measured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.measured-figure { font-size: clamp(42px, 3.8vw, 56px); }
.measured-caption { margin-top: 12px; max-width: none; font-size: 13px; line-height: 1.5; letter-spacing: -0.02em; text-wrap: wrap; }
.measured-note { font-size: 11px; }
@media (max-width: 560px) {
  .measured-grid { grid-template-columns: 1fr; gap: 18px; }
  .measured-item { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 16px; }
  .measured-figure { font-size: 40px; }
  .measured-caption { margin-top: 0; }
}
/* Customer logos (Brendan, 20 Oct 2026): 2 rows drifting in opposite directions, every sector
   mixed into each row; sized by visual weight, so wide wordmarks and square marks read alike.
   Hover pauses; with reduced motion the rows sit still and wrap. */
.logo-marquee { margin-top: 36px; display: grid; gap: 30px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-track { display: flex; width: max-content; animation: logo-drift var(--logo-speed, 70s) linear infinite; }
.logo-track.is-reverse { animation-direction: reverse; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-track ul { display: flex; align-items: center; gap: 64px; padding-right: 64px; list-style: none; }
.logo-track li { display: flex; align-items: center; height: 48px; flex: none; }
.logo-track img { display: block; max-width: none; }
@keyframes logo-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .logo-marquee { -webkit-mask-image: none; mask-image: none; }
  .logo-track { animation: none; width: auto; }
  .logo-track ul { flex-wrap: wrap; justify-content: center; gap: 24px 48px; padding-right: 0; }
  .logo-track ul[aria-hidden] { display: none; }
}
@media (max-width: 760px) { .logo-marquee { gap: 22px; } .logo-track ul { gap: 44px; padding-right: 44px; } .logo-track { zoom: .8; } }
/* Hero video by Joe (Brendan, 20 Oct 2026): Cyclone's cargo bike, van and motorbike in the rain,
   in place of the street photo and rider cutout. The lighter file plays on phones; with reduced
   motion the poster frame stands still. Shading keeps the nav, the text and the status bar legible. */
/* Joe's footage centres each vehicle. On wide screens the video plays at its full 16:9 frame at 90% of
   the hero's height (the black above it stays behind the nav), set to the bottom and centred 62% across, so the riders sit clear of the text with the street
   visible behind the words; its top and left edges fade into the black (Brendan, 20 and 21 Oct 2026). */
.hero-video { position: absolute; top: auto; bottom: 0; z-index: 0; height: 90%; width: max(1248px, 160vh); object-fit: cover;
  left: calc(62% - max(624px, 80vh));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(180deg, transparent 0, #000 9%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(180deg, transparent 0, #000 9%);
  mask-composite: intersect; }
.hero::after { background:
  linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 22%),
  linear-gradient(0deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 45%),
  linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.4) 38%, rgba(0,0,0,0) 62%); }
@media (max-width: 768px) {
  .hero { display: flex; align-items: flex-end; min-height: max(640px, 100svh); }
  .hero-inner { padding-top: 140px; padding-bottom: 96px; }
  .hero-video { left: 0; top: 0; height: 100%; width: 100%; object-position: 50% 40%; -webkit-mask-image: none; mask-image: none; }
  .hero::after { background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.15) 30%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.8) 100%); }
}
/* Offer pages, Retail and Talk to Sales (Brendan, 20 Oct 2026): the case for the service first,
   beside a photo, then how it works, with the booking calendar last. */
.offer-split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.offer-copy .section-title { font-size: clamp(34px, 3.4vw, 46px); }
.offer-copy .section-subtitle { margin-top: 14px; }
.offer-points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.offer-points li { position: relative; padding-left: 34px; color: var(--text-secondary); line-height: 1.55; }
.offer-points li b { color: var(--black); font-weight: 600; }
.offer-points li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; background: url("/assets/img/scribble-dot.png") center / contain no-repeat; }
.offer-points li::after { content: ""; position: absolute; left: 7px; top: 7px; width: 8px; height: 5px; border-left: 2px solid var(--black); border-bottom: 2px solid var(--black); transform: rotate(-45deg); }
.offer-copy .action-cta { margin-top: 30px; }
.offer-photo { position: relative; isolation: isolate; }
.offer-photo::before { content: ""; position: absolute; z-index: -1; right: -28px; bottom: -28px; width: 70%; height: 74%; background: url("/assets/img/scribble-patch.png") center / 100% 100% no-repeat; }
.offer-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; box-shadow: 0 24px 50px -24px rgba(0,0,0,.45); }
.offer-photo.is-drawing img { aspect-ratio: auto; object-fit: contain; box-shadow: none; border-radius: 0; max-height: 380px; }
.offer-photo.is-drawing::before { display: none; }
.day-run { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--black); }
.day-run li { padding: 22px 24px 0 0; position: relative; }
.day-run li::before { content: ""; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--yellow-button); border: 2px solid var(--black); }
.day-time { display: block; font: 600 13px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.day-run p { margin-top: 8px; color: var(--text-secondary); }
.day-run-note { margin-top: 34px; max-width: 760px; color: var(--text-secondary); }
.qa-list { display: grid; gap: 22px; }
.qa-list h3 { font-size: 19px; }
.qa-list p { margin-top: 6px; color: var(--text-secondary); }
.split-link { margin-top: 28px; }
.split-photo img.is-portrait { max-height: 640px; }
.book-end { border-top: 1px solid var(--border); }
@media (max-width: 1024px) { .offer-split { grid-template-columns: 1fr; gap: 44px; } .day-run { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; } }
@media (max-width: 560px) { .day-run { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--black); padding-left: 22px; } .day-run li { padding: 0; } .day-run li::before { top: 4px; left: -31px; } .offer-photo::before { right: -12px; bottom: -14px; } }
/* Collect From Abroad: the number shows in place, to read on a computer or dial on a phone */
.phone-reveal { margin-top: 16px; padding: 16px 18px; background: var(--bg-light); border-radius: 10px; }
.phone-reveal p { margin: 0; color: var(--text-secondary); }
.phone-number { font-weight: 700; color: var(--black); white-space: nowrap; }
.day-run-note b { color: var(--black); font-weight: 600; }
/* Larger hero headline (Brendan, 21 Oct 2026), close to Joe's scale; phones keep their own size */
@media (min-width: 769px) { .hero h1 { font-size: clamp(46px, 4.6vw, 72px); } }
/* Last Mile (Brendan, 21 Oct 2026, after Simon's feedback that "last mile" brought people to the site) */
.lm-intro { max-width: 820px; display: grid; gap: 16px; font-size: 18px; color: var(--text-secondary); }
.service-card.is-wide { grid-column: 1 / -1; }
.service-card.is-wide .promise { max-width: 560px; }
.service-card.is-wide { grid-template-columns: 1fr 300px; }
.service-card.is-wide .sketch-wide { width: 300px; height: auto; max-width: none; max-height: none; align-self: center; }
@media (max-width: 760px) { .service-card.is-wide { grid-template-columns: 1fr 140px; } .service-card.is-wide .sketch-wide { width: 140px; } }

/* Joe's styling, taken into ours (Brendan, 21 Oct 2026): lighter hero shading with the video full width,
   Plex Mono small capitals for the menu and buttons, outlined "route" buttons that draw a yellow line
   on hover and then fill, labels that decode over the video, and the logo band off yellow. */
.btn { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border-radius: 0; }
.btn-sm { font-size: 12px; }
.btn.btn-ghost { position: relative; gap: 10px; border-width: 1px; border-color: #5c5c5c; transition: color .2s ease, background-color .2s ease; }
.on-dark .btn.btn-ghost { color: var(--white); border-color: #5c5c5c; }
.section .btn.btn-ghost { color: var(--ink); border-color: #BDBAB2; }
.btn-ghost .route-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow-button); flex: none; animation: blink 1.4s steps(1) infinite; }
.btn-ghost .route-line { position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px); overflow: visible; pointer-events: none; }
.btn-ghost .route-line rect { fill: none; stroke: var(--yellow-button); stroke-width: 2; stroke-dasharray: 100 100; stroke-dashoffset: 100; transition: stroke-dashoffset .25s ease; }
.btn.btn-ghost:hover, .btn.btn-ghost:focus-visible, .on-dark .btn.btn-ghost:hover, #site-nav .nav-cta.btn-ghost:hover {
  background: var(--yellow-button); color: var(--black); transform: none; border-color: #5c5c5c;
  transition: color .2s ease .42s, background-color .25s ease .42s; }
.btn-ghost:hover .route-line rect, .btn-ghost:focus-visible .route-line rect { stroke-dashoffset: 0; transition: stroke-dashoffset .45s cubic-bezier(.6,0,.25,1); }
.btn-ghost:hover .route-dot, .btn-ghost:focus-visible .route-dot { animation: none; background: var(--black); transition: background-color .2s ease .42s; }
@media (prefers-reduced-motion: reduce) { .btn-ghost .route-dot { animation: none; } .btn.btn-ghost, .btn-ghost .route-line rect { transition: none !important; } }
.hero-actions { gap: 16px; }

/* Hero shading: the video fills the width again (15% wider, cropped on the right, so the vehicles sit right of
   centre) under a bottom-up fade and a light left fade; no black band on wide screens */
.hero-video { top: 0; bottom: 0; left: 0; height: 100%; width: 115%; object-fit: cover; object-position: 50% 40%; -webkit-mask-image: none; mask-image: none; }
.hero::after { background:
  linear-gradient(0deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.05) 75%, rgba(0,0,0,.4) 100%),
  linear-gradient(90deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,0) 60%); }
@media (max-width: 768px) { .hero-video { width: 100%; object-position: 50% 40%; } }

/* Labels over the video, timed to the footage (built in site.js) */
.hero-hud { inset: 108px 0 56% 0; }
.hud-pop { position: absolute; white-space: nowrap; font: 500 clamp(10px, .78vw, 13px)/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 0 10px rgba(0,0,0,.55); opacity: 0; }
.hud-pop .hud-mark { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; }
.hud-pop .hud-mark i { width: 3px; height: 3px; background: currentColor; }
.hud-pop .hud-mark b { width: 12px; height: 1px; background: currentColor; }
.hud-pop .hud-sep { opacity: .55; }
.hud-pop .hud-bar { display: block; height: 1px; margin-top: 6px; width: 0; background: currentColor; }

/* Logo band off yellow */
.trust-band { background: var(--bg-light); box-shadow: none; }
.logo-track img { opacity: .8; }
.footer-iso { margin-top: 10px; }

/* Home's new video (22 Oct 2026) already frames the vehicles on the right, so it fills the hero with no
   extra width. The service pages carry Joe's stills (22 Oct 2026), each placed so its subject sits right
   of the text on wide screens and in view on phones. */
.hero-video.is-recut { width: 100%; object-position: 50% 45%; }
.hero-image { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 65% 50%); }
/* On wide screens the left edge is kept (0%), which moves each subject as far right as the frame allows;
   on phones each subject is centred */
.hero-picture.is-dublin-courier { --focus: 0% 50%; --focus-m: 74% 50%; }
.hero-picture.is-nationwide { --focus: 0% 50%; --focus-m: 84% 50%; }
.hero-picture.is-international { --focus: 0% 50%; --focus-m: 86% 50%; }
.hero-picture.is-last-mile { --focus: 0% 50%; --focus-m: 84% 50%; }
.hero-picture.is-retail { --focus: 0% 50%; --focus-m: 36% 50%; }
.offer-photo.is-screen { margin: 0; }
.offer-photo.is-screen img { aspect-ratio: auto; object-fit: contain; background: #fff; border-radius: 14px; box-shadow: 0 24px 50px -28px rgba(0,0,0,.35); border: 1px solid var(--border); }
/* Stills: a scrim on the text side only (Brendan, 22 Oct 2026: "more on the text side" without losing the
   background or the subject). Heaviest at the left edge, easing across the text column, clear by about
   60% across; the subject on the right keeps its full brightness. A soft dark glow sits behind the copy. */
.hero:has(.hero-image)::after { background:
  linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.25) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,.45) 100%),
  linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.62) 28%, rgba(0,0,0,.3) 44%, rgba(0,0,0,0) 60%); }
.hero:has(.hero-image) .hero-copy::before { inset: -80px -160px -60px -260px; background: radial-gradient(closest-side, rgba(0,0,0,.5), rgba(0,0,0,0)); }
@media (max-width: 768px) { .hero:has(.hero-image)::after { background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.2) 28%, rgba(0,0,0,.6) 52%, rgba(0,0,0,.85) 100%); } }
@media (max-width: 768px) { .hero-image { object-position: var(--focus-m, 60% 50%); } .hero-video.is-recut { object-position: 72% 40%; } }
.offer-photo img.is-retail-hero { object-position: 30% 50%; }

/* Photo slot on the light page tops, until the photograph arrives (23 Oct 2026) */
.img-placeholder { aspect-ratio: 4 / 3; border-radius: 16px; background: #EDEAE3; border: 2px dashed #C2BCAF; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; text-align: center; box-shadow: 0 24px 50px -24px rgba(0,0,0,.25); }
.img-placeholder-label { font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.action-start .offer-split + * { margin-top: 72px; }
.img-placeholder p { max-width: 340px; color: var(--text-secondary); font-size: 15px; line-height: 1.5; }

/* Hero shading about 10% lighter on every hero (Joe, through Brendan, 3 Nov 2026: "he wants it brighter") */
.hero::after, .hero .hero-copy::before { opacity: .9; }
/* Home: the quotes follow the figures with no second rule and a tighter gap (Brendan, 3 Nov 2026) */
.sub-block.is-quotes { margin-top: 56px; padding-top: 0; border-top: 0; }

/* Legal pages: a single reading column (3 Nov 2026) */
.legal-body { max-width: 760px; margin-top: 40px; color: var(--text-secondary); }
.legal-body p, .legal-body ul { margin: 0 0 16px; }
.legal-body ul { padding-left: 22px; }
.legal-body li { margin-bottom: 6px; }
.legal-body h2 { font-size: 22px; color: var(--ink); margin: 40px 0 14px; }
.legal-body .legal-lead { font-weight: 600; color: var(--ink); }
.legal-body .legal-columns { columns: 3 180px; column-gap: 32px; padding-left: 20px; }
.legal-table-wrap { overflow-x: auto; margin: 8px 0 24px; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.legal-table th, .legal-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.legal-table th { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.legal-table td:first-child { font-family: var(--font-mono); font-size: 13px; color: var(--ink); white-space: nowrap; }
.offer-photo.is-story img { max-height: 240px; margin: 0 auto; }
@media (min-width: 1025px) { .numbers.is-3 { grid-template-columns: repeat(3, 1fr); } }
/* Customer story pages: the customer's logo above the label and headline (Brendan, 3 Nov 2026) */
.story-page-logo { display: block; height: 40px; width: auto; max-width: 220px; object-fit: contain; object-position: left center; margin-bottom: 28px; }
.story-page-logo-text { display: block; margin-bottom: 28px; font-family: var(--font-mono); font-weight: 500; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }

/* Cookie consent, the same system and layout as the group's other sites (3 Nov 2026): a centred card,
   with Reject All as easy as Accept All, as the Irish DPC expects. Cyclone's yellow marks the accept
   button and the toggles; text and links stay ink, since yellow text never sits on white. */
#cc-banner, #cc-modal { position: fixed; inset: 0; z-index: 2147483001; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(17, 17, 17, .5); }
#cc-banner[hidden], #cc-modal[hidden] { display: none; }
#cc-modal { z-index: 2147483002; }
.cc-card { background: #fff; border-radius: 14px; box-shadow: 0 24px 64px rgba(0,0,0,.28); padding: 30px 30px 26px; width: 100%; max-width: 470px; max-height: 88vh; overflow-y: auto; position: relative; color: var(--ink); font-family: var(--font-body, inherit); }
.cc-card-wide { max-width: 560px; }
.cc-card h2 { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0 0 10px; color: var(--ink); }
.cc-card h2 svg { color: var(--ink); flex-shrink: 0; }
.cc-card > p { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 22px; }
.cc-card > p a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cc-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.cc-choices .cc-btn { width: 100%; }
@media (max-width: 480px) { .cc-choices { grid-template-columns: 1fr; } } /* Manage Preferences needs more than half a phone-width card */
.cc-btn { appearance: none; border: 1px solid transparent; cursor: pointer; padding: 13px 18px; border-radius: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1; transition: background .15s ease, border-color .15s ease; white-space: nowrap; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.cc-wide { display: flex; width: 100%; }
.cc-primary { background: var(--yellow-button); color: var(--black); border-color: var(--yellow-button); }
.cc-primary:hover { background: var(--yellow-hover); border-color: var(--yellow-hover); }
.cc-ghost { background: #fff; color: var(--ink); border-color: #BDBAB2; }
.cc-ghost:hover { border-color: var(--ink); }
.cc-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--text-secondary); cursor: pointer; border-radius: 6px; }
.cc-close:hover { color: var(--ink); background: #f4f4f4; }
.cc-intro { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin: 0 0 20px; }
.cc-row { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-top: 1px solid var(--border); }
.cc-row:last-of-type { border-bottom: 1px solid var(--border); }
.cc-row-text { flex: 1; }
.cc-row-text h3 { font-size: 15px; font-weight: 600; margin: 0 0 4px; line-height: 1.3; }
.cc-row-text p { font-size: 13px; color: var(--text-secondary); margin: 0; line-height: 1.55; }
.cc-row-control { flex-shrink: 0; padding-top: 3px; }
.cc-always { display: inline-block; background: #f2f2f2; color: var(--text-secondary); font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; padding: 5px 11px; border-radius: 99px; }
.cc-toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.cc-toggle input { opacity: 0; width: 0; height: 0; }
.cc-toggle .cc-slider { position: absolute; inset: 0; background: #d1d5db; border-radius: 24px; cursor: pointer; transition: background .2s ease; }
.cc-toggle .cc-slider::before { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform .2s ease; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.cc-toggle input:checked + .cc-slider { background: var(--yellow-button); }
.cc-toggle input:checked + .cc-slider::before { transform: translateX(20px); }
.cc-toggle input:focus-visible + .cc-slider { outline: 2px solid var(--ink); outline-offset: 2px; }
.cc-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }
@media (max-width: 600px) { .cc-card { padding: 24px 20px 20px; } .cc-choices { gap: 12px; } .cc-modal-actions { flex-direction: column-reverse; } .cc-modal-actions .cc-btn { width: 100%; } }
/* Home hero (Brendan, 6 Nov 2026): 2 buttons, then the small print on its own line with Talk to Sales as a quiet link */
.hero-book-line { flex: 0 0 100%; margin-top: -8px; line-height: 1.5; }
.hero-book-line a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.hero-book-line a:hover { color: var(--yellow-button); }
@media (max-width: 560px) { .hero-book-sep { display: none; } .hero-book-line a { display: block; width: max-content; margin-top: 8px; } }

/* Tail-lift truck note under the vehicle tables (James, 7 Nov 2026): listed apart, price and availability on request */
.table-note { margin-top: 20px; max-width: 760px; font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.table-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Sister companies under the Company links (craft standard, 9 Nov 2026: every group site links its sisters by name) */
.footer-col ul + h2 { margin-top: 28px; }

/* 4 figures (Brendan, 9 Nov 2026: 25 minutes collection to delivery across Dublin added): 4 columns, 2 by 2 below 1180px, figure beside caption on phones */
.measured-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .measured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } }
@media (max-width: 560px) { .measured-grid { grid-template-columns: 1fr; gap: 18px; } }

/* Request a Callback dialog (Brendan, 9 Nov 2026) */
.callback { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; border: 0; border-radius: var(--radius); padding: 32px 28px 28px; color: var(--ink); background: var(--white); box-shadow: 0 24px 64px rgba(0,0,0,.35); }
.callback::backdrop { background: rgba(0,0,0,.55); }
.callback h2 { font: 700 26px/1.15 var(--font-display); letter-spacing: -.01em; margin: 0 40px 8px 0; }
.callback-lead { color: var(--text-secondary); margin: 0; }
.callback .callback-form { margin-top: 20px; gap: 14px 16px; }
.callback-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--bg-light); font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink); }
.callback-close:hover { background: var(--border); }
.callback-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.callback-error { grid-column: 1 / -1; margin: 0; color: #9A2A1A; font-size: 14px; }
.callback-privacy { margin: 0; font-size: 13px; color: var(--text-secondary); }
.callback-privacy a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.callback [data-callback-step="done"] .btn { margin-top: 20px; }
.callback-or { margin-left: 14px; font-size: 14px; white-space: nowrap; }
.callback-or a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.on-dark .callback-or, .card-foot .callback-or { font-size: 14px; }
@media (max-width: 560px) { .callback { padding: 28px 20px 22px; } .callback .callback-form { grid-template-columns: 1fr; } .callback-or { display: block; margin: 10px 0 0; } }
.callback-alt { margin-top: 10px; font-size: 15px; color: var(--text-secondary); }
.callback-alt a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.action-cta, .router-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* Callback form simplified to one column (Brendan, 9 Nov 2026, from a reference card): name, phone, work email, one full-width button */
.callback { width: min(460px, calc(100vw - 32px)); padding: 32px 32px 26px; }
.callback h2 { font-size: 24px; }
.callback-form { margin-top: 22px; display: grid; gap: 16px; }
.callback .form-row label { font-size: 14px; margin-bottom: 6px; }
.callback .req { color: var(--ink); margin-left: 2px; }
.callback-submit { width: 100%; justify-content: center; margin-top: 4px; }
.callback-privacy { font-size: 12.5px; line-height: 1.5; }
.callback-privacy a { color: var(--ink); font-weight: 600; }
@media (max-width: 560px) { .callback { padding: 28px 20px 22px; } }
/* Hero button pair stays on one line from tablet width up (Brendan, 9 Nov 2026: "This should not wrap") */
@media (min-width: 600px) { .hero-actions > .btn { white-space: nowrap; } }
/* Long button labels wrap inside cards on phones, so no card is wider than the screen (found 9 Nov 2026: International route cards ran 39px past a 390px screen) */
@media (max-width: 560px) { .card .btn { white-space: normal; text-align: center; line-height: 1.35; } .card, .grid > * { min-width: 0; } }
@media (max-width: 560px) { .section-more .text-link { white-space: normal; } }

/* The real Cyclone cargo bike, cut out (Brendan, 9 Nov 2026): shown on a yellow scribble patch on Home, Dublin Courier, Last Mile and Fleet Sustainability */
.bike-feature { position: relative; isolation: isolate; margin: 8px auto 48px; max-width: 520px; }
.bike-feature::before { content: ""; position: absolute; z-index: -1; left: 12%; right: 6%; bottom: 4%; height: 46%; background: url("/assets/img/scribble-patch.png") center / 100% 100% no-repeat; }
.bike-feature img { display: block; width: 100%; height: auto; }
.split-photo.is-cutout img { box-shadow: none; border-radius: 0; object-fit: contain; max-height: none; }
.split-photo.is-cutout::before { right: 0; bottom: 6%; height: 44%; width: 86%; }
.lm-with-bike { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.lm-with-bike .bike-feature { margin: 0; max-width: none; }
@media (max-width: 860px) { .lm-with-bike { grid-template-columns: 1fr; gap: 28px; } .lm-with-bike .bike-feature { max-width: 440px; } .bike-feature { margin-bottom: 36px; } }
/* Cargo bike placements revised (Brendan, 9 Nov 2026): beside Dublin Courier's vehicles heading, right-aligned; on Talk to Sales in place of the riders photo */
.header-with-bike { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 48px; align-items: center; margin-bottom: 40px; }
.header-with-bike .section-header { margin-bottom: 0; }
.bike-feature.is-beside { margin: 0 0 0 auto; max-width: 440px; width: 100%; }
.offer-photo.is-cutout img { aspect-ratio: auto; object-fit: contain; box-shadow: none; border-radius: 0; }
.offer-photo.is-cutout::before { right: 4%; bottom: 6%; width: 84%; height: 44%; }
@media (max-width: 860px) { .header-with-bike { grid-template-columns: 1fr; gap: 24px; } .bike-feature.is-beside { margin: 0 auto; max-width: 420px; } }
/* 3 figures again (Brendan, 9 Nov 2026): 13 min, 25 min and 89%; 3 columns, stacked on phones */
.measured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1180px) { .measured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .measured-grid { grid-template-columns: 1fr; } }
/* Billing routes (Brendan, 9 Nov 2026): invoice queries to accounts by form, booking queries to operations on chat */
.billing-routes { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.billing-side { display: grid; gap: 28px; }
.billing-invoice .contact-form { margin-top: 18px; }
.billing-invoice .req, .contact-form .req { color: var(--ink); margin-left: 2px; }
.billing-invoice { scroll-margin-top: 110px; }
@media (max-width: 900px) { .billing-routes { grid-template-columns: 1fr; } }
form.hs-form[hidden], .hs-done[hidden] { display: none; }
/* Paired header buttons stay on one line (Brendan, 9 Nov 2026: "These should not be wrapping") */
@media (min-width: 600px) { .action-cta .btn, .router-actions .btn { padding-left: 24px; padding-right: 24px; white-space: nowrap; } }
.card-foot:has(.callback-or) { display: flex; flex-wrap: wrap; align-items: center; row-gap: 10px; }
.card-foot .callback-or { margin-left: 14px; }
@media (min-width: 600px) and (max-width: 1180px) { .action-cta, .router-actions { column-gap: 8px; } .action-cta .btn, .router-actions .btn { padding-left: 18px; padding-right: 18px; } }
.card-foot:has(.callback-or) .btn { padding-left: 16px; padding-right: 16px; white-space: nowrap; }
.card-foot .callback-or { margin-left: 10px; font-size: 13px; }
.route-card .btn { white-space: normal; }
/* 404 page (9 Nov 2026) */
.not-found-links { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 36px; padding: 0; }
/* Contact: address and hours in the page body (9 Nov 2026, SEO audit) */
.visit-address { font-style: normal; font-size: 18px; line-height: 1.6; margin: 20px 0 12px; }
.visit-hours { margin-bottom: 16px; }

/* Talk to Us (Brendan, 11 Nov 2026): every button or link that opens the call-back pop-up carries a hand-drawn phone in Joe's marker style.
   The yellow scribble sits behind; the line takes the text colour, so it reads black on yellow and white buttons, white on dark. */
.talk-ico { position: relative; display: inline-block; width: 1.25em; height: 1.25em; flex: none; vertical-align: -.28em; margin-right: .45em; }
.talk-ico::before, .talk-ico::after { content: ""; position: absolute; inset: 0; }
.talk-ico::before { background: url("/assets/img/icon/phone-fill.svg?v=1") center / contain no-repeat; }
.talk-ico::after { background: currentColor; -webkit-mask: url("/assets/img/icon/phone-line.svg?v=1") center / contain no-repeat; mask: url("/assets/img/icon/phone-line.svg?v=1") center / contain no-repeat; }
.btn-primary .talk-ico::before { opacity: 0; }
.btn .talk-ico { width: 1.35em; height: 1.35em; margin-right: .5em; }
.talk-end { text-align: center; }
.talk-end .action-head { margin-left: auto; margin-right: auto; }
.talk-end .section-lead { margin-left: auto; margin-right: auto; }
.talk-end .action-cta { justify-content: center; margin-top: 28px; }

/* Careers applications (Brendan, 11 Nov 2026): first name, last name, email, phone and CV, sent to the careers inbox. */
.crumbs { margin: 0 0 18px; font: 500 12.5px/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.crumbs a { color: var(--text-secondary); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.apply-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.apply-box { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; box-shadow: 0 24px 50px -32px rgba(0,0,0,.28); }
.apply-form { margin-top: 0; }
.form-row select { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1.5px solid #CFCBC2; border-radius: 10px; background: var(--white); color: var(--ink); }
.form-row input[type="file"] { padding: 10px; background: var(--bg-light); cursor: pointer; }
.form-hint { display: block; margin-top: 6px; font-size: 13px; color: var(--text-secondary); }
.apply-done h3 { font: 700 24px/1.2 var(--font-display); margin: 0 0 8px; }
.apply-done p { margin: 0; color: var(--text-secondary); }
.apply-form[hidden], .apply-done[hidden] { display: none; }
@media (max-width: 900px) { .apply-wrap { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 560px) { .apply-box { padding: 22px 18px; } .apply-form { grid-template-columns: 1fr; } }