/* Layout: established-carrier site in the All Freight Carrying brand — white pages, night-black feature bands, logo blue as the single accent, the logo's blue underline reused as the heading rule. */
[hidden] { display: none !important; }
/* NOTE on layout shift: self-hosting removed a render-blocking request, which
   means text now paints in the fallback face and swaps when the woff2 arrives -
   a 0.0157 CLS on the home page at phone width, the only shift left on the site
   and well inside Google's 0.1 "good" threshold. Metric-override fallback faces
   (size-adjust / ascent-override tuned to Archivo's own metrics) were tried and
   made it WORSE, because they depend on which local face actually resolves:
   where Arial is absent the overrides land on a different font entirely. Do not
   add them without measuring on real Windows and macOS clients first. */

/* ---------------------------------------------------------------- fonts
   Self-hosted. These used to come from fonts.googleapis.com, which is a
   render-blocking stylesheet on a third-party origin: the browser had to resolve
   a new host, negotiate TLS and parse that CSS before it could even discover
   which font files it needed. Serving them from here removes a round trip from
   first paint, removes the third-party dependency, and stops every visitor's IP
   being handed to Google on page load.

   Latin subsets only (240 KB for all four). The fallback stack below covers
   anything outside it. "wdth" files carry both axes the site uses:
   font-weight 100-900 and font-stretch 62%-125%. */
@font-face {
  font-family: "Archivo"; font-style: normal; font-display: swap;
  font-weight: 100 900; font-stretch: 62% 125%;
  src: url(fonts/archivo-wdth-normal.woff2) format("woff2-variations");
}
@font-face {
  font-family: "Archivo"; font-style: italic; font-display: swap;
  font-weight: 100 900; font-stretch: 62% 125%;
  src: url(fonts/archivo-wdth-italic.woff2) format("woff2-variations");
}
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-display: swap;
  font-weight: 200 900;
  src: url(fonts/source-sans-3-wght-normal.woff2) format("woff2-variations");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-display: swap;
  font-weight: 500;
  src: url(fonts/ibm-plex-mono-500.woff2) format("woff2");
}


:root {
  --bg: #ffffff;
  --bg-2: #f2f4f8;
  --ink: #0b0f19;
  --muted: #535b6a;
  --line: #dde2ea;
  --blue: #2e62ff;
  --blue-deep: #1a46d6;
  --link: #1d4fe6;
  --night: #0a0e18;
  --night-2: #131a2a;
  --on-night: #ffffff;
  --on-night-muted: #a9b3c6;
  --night-line: #263049;
  --good: #177a53; /* AA contrast on white for text uses */
  --btn-blue: #2e62ff;   /* button fill - must hold 4.5:1 with white text */
  --line-strong: #8b93a6; /* visible boundary of a form control (WCAG 1.4.11) */
  --cta-from: #1a46d6; --cta-to: #2e62ff; /* white text must clear 4.5:1 along the whole band */
  --required: #d23;
  --logo-l: block;
  --logo-d: none;
  --shadow: 0 1px 2px rgba(11,15,25,.06), 0 8px 24px rgba(11,15,25,.06);
  --font-display: "Archivo", "Arial", "Helvetica Neue", sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --wrap: 1200px;
  --r: 8px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0f19; --bg-2: #111726; --ink: #eef1f6; --muted: #a6afc1; --line: #232c3f;
    --blue: #4f7bff; --blue-deep: #3563f0; --link: #86a4ff; --night: #05070d; --night-2: #0f1522;
    --on-night: #ffffff; --on-night-muted: #a9b3c6; --night-line: #222b40; --good: #3cc58f;
    --btn-blue: #3563f0; --line-strong: #5a657e; --required: #ff6b7a;
    --cta-from: #2b55d8; --cta-to: #3b67e8;
    --logo-l: none; --logo-d: block; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b0f19; --bg-2: #111726; --ink: #eef1f6; --muted: #a6afc1; --line: #232c3f;
  --blue: #4f7bff; --blue-deep: #3563f0; --link: #86a4ff; --night: #05070d; --night-2: #0f1522;
  --on-night: #ffffff; --on-night-muted: #a9b3c6; --night-line: #222b40; --good: #3cc58f;
    --btn-blue: #3563f0; --line-strong: #5a657e; --required: #ff6b7a;
  --cta-from: #2b55d8; --cta-to: #3b67e8;
  --logo-l: none; --logo-d: block; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
.skip { position: absolute; left: -9999px; top: 0; }
/* heading announced to screen readers only, so the heading levels stay in order */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip:focus { left: 18px; top: 8px; z-index: 100; background: var(--bg); color: var(--ink);
  padding: 10px 14px; border: 2px solid var(--blue); border-radius: 6px; font-weight: 700; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--link); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--font-display); font-stretch: 112%; font-weight: 800; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.3rem, 4.6vw, 3.7rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.45rem); }
h3 { font-size: 1.28rem; font-weight: 700; letter-spacing: 0; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
.eyebrow { font-family: var(--font-display); font-stretch: 125%; font-style: italic; font-weight: 700; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--link); }
.rule { display: block; width: 64px; height: 4px; background: var(--blue); border-radius: 2px; transform: skewX(-24deg); }
.lede { font-size: 1.18rem; color: var(--muted); max-width: 64ch; }
.muted { color: var(--muted); }
.sec-head { display: grid; gap: 12px; margin-bottom: 34px; max-width: 72ch; }
.sec-head.center { margin-inline: auto; text-align: center; justify-items: center; }
section.band { padding-block: clamp(56px, 7vw, 96px); }
section.band.tint { background: var(--bg-2); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .grid-4 { grid-template-columns: minmax(0, 1fr); } }
.prose { display: grid; gap: 1em; max-width: 70ch; align-content: start; min-width: 0; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-stretch: 112%; font-weight: 700; font-size: 1rem; text-decoration: none; padding: 13px 22px; border-radius: var(--r); border: 2px solid transparent; cursor: pointer; line-height: 1.1; transition: background .15s, transform .15s; }
.btn-blue { background: var(--btn-blue); color: #fff; }
.btn-blue:hover { background: var(--blue-deep); }
.btn-ghost { border-color: rgba(255,255,255,.55); color: #fff; background: transparent; }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-line { border-color: var(--line-strong); color: var(--ink); background: var(--bg); }
.btn-line:hover { border-color: var(--blue); }
.arrow::after { content: "→"; font-family: var(--font-body); }

/* utility bar */
.util { background: var(--night); color: var(--on-night-muted); font-size: .88rem; }
.util .wrap { display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: space-between; align-items: center; padding-block: 8px; }
.util a { color: var(--on-night); text-decoration: none; }
.util a:hover { color: #fff; text-decoration: underline; }
.util nav { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.util .ph { font-weight: 700; letter-spacing: .02em; }
@media (max-width: 640px) { .util .tag { display: none; } .util .wrap { justify-content: center; } }

/* header */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bg); }
.site-head { background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-block: 12px; }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 52px; width: auto; }
.brand .logo-l { display: var(--logo-l); }
.brand .logo-d { display: var(--logo-d); }
.mainnav { display: flex; align-items: center; gap: 2px; }
.mainnav > a, .dd > button { font: 600 .98rem var(--font-body); color: var(--ink); text-decoration: none; padding: 10px 11px; border-radius: 6px; background: none; border: 0; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.mainnav > a:hover, .dd > button:hover, .mainnav > a[aria-current="page"], .dd.cur > button { color: var(--link); }
.dd { position: relative; }
.dd > button::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .7; }
.dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.dd-menu { position: absolute; top: calc(100% + 6px); left: -10px; min-width: 300px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 10px; display: none; z-index: 70; }
.dd:hover .dd-menu, .dd.open .dd-menu { display: grid; }
.dd-menu a { display: grid; gap: 1px; padding: 9px 12px; border-radius: 6px; text-decoration: none; color: var(--ink); }
.dd-menu a:hover { background: var(--bg-2); }
.dd-menu a strong { font-weight: 700; font-size: .98rem; }
.dd-menu a span { font-size: .86rem; color: var(--muted); }
.dd-menu .all { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; color: var(--link); font-weight: 700; }
.mainnav > a.btn { margin-left: 10px; padding: 11px 18px; color: #fff; background: var(--btn-blue); border-radius: var(--r); font-family: var(--font-display); font-weight: 700; }
.mainnav > a.btn:hover { color: #fff; background: var(--blue-deep); }
.menu-btn { display: none; background: var(--bg); border: 1.5px solid var(--line); border-radius: 6px; padding: 8px 14px; font: 700 .95rem var(--font-body); color: var(--ink); cursor: pointer; }
@media (max-width: 1300px) {
  .brand img { height: 44px; }
  .menu-btn { display: inline-block; }
  .mainnav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); flex-direction: column; align-items: stretch; gap: 0; max-height: calc(100vh - 120px); overflow-y: auto; padding: 8px max(18px, env(safe-area-inset-right, 0px)) 18px max(18px, env(safe-area-inset-left, 0px)); }
  .mainnav.open { display: flex; }
  .mainnav > a, .dd > button { width: 100%; justify-content: space-between; padding: 13px 4px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .dd-menu { position: static; box-shadow: none; border: 0; padding: 0 0 8px 8px; min-width: 0; }
  .dd:hover .dd-menu { display: none; }
  .dd.open .dd-menu { display: grid; }
  .mainnav .btn { margin: 14px 0 0; }
}

/* hero */
.night { background: var(--night); color: var(--on-night); }
.hero { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 92px); isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(900px 500px at 85% 20%, rgba(46,98,255,.28), transparent 60%), linear-gradient(180deg, #0a0e18, #0d1322); }
.hero .wing { position: absolute; z-index: -1; right: -6%; top: -8%; width: min(760px, 70vw); opacity: .11; pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 920px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero-grid > *, .hero .wrap > * { min-width: 0; }
.quick .row > * { min-width: 0; }
.hero .eyebrow { color: #b9cbff; }
.hero h1 { margin-top: 14px; }
.hero h1 em { font-style: italic; color: #8fa9ff; }
.hero .lede { color: var(--on-night-muted); margin-top: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; color: var(--on-night-muted); font-size: .95rem; list-style: none; padding: 0; }
.hero-points li { display: flex; align-items: center; gap: 8px; }
.hero-points li::before { content: ""; width: 14px; height: 3px; background: var(--blue); transform: skewX(-24deg); }
.crumbs { font-size: .9rem; color: #dbe2f0; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { color: #fff; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.page-hero { padding-block: clamp(40px, 5.5vw, 72px); }
.page-hero h1 { max-width: 22ch; }

/* hero quick panel */
.quick { grid-template-columns: minmax(0, 1fr); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 22px; display: grid; gap: 16px; backdrop-filter: blur(6px); }
.quick h2 { font-size: 1.25rem; letter-spacing: 0; }
.quick .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quick .tile { display: grid; gap: 4px; padding: 14px; border-radius: 10px; background: rgba(255,255,255,.07); text-decoration: none; color: #fff; border: 1px solid rgba(255,255,255,.1); }
.quick .tile:hover { background: rgba(46,98,255,.25); border-color: rgba(143,169,255,.6); }
.quick .tile strong { font-family: var(--font-display); font-stretch: 112%; font-size: 1.05rem; }
.quick .tile span { font-size: .86rem; color: var(--on-night-muted); }
.checker label { font-weight: 700; font-size: .95rem; display: block; margin-bottom: 6px; }
.checker .ctl { display: flex; gap: 8px; }
.checker input { flex: 1; min-width: 0; font: inherit; padding: 12px 14px; border-radius: var(--r); border: 1.5px solid rgba(255,255,255,.45); background: rgba(5,7,13,.5); color: #fff; }
.checker input::placeholder { color: #8d97ab; }
@media (max-width: 360px) { .checker .ctl { flex-wrap: wrap; } .checker .ctl .btn { width: 100%; } }
.check-out { margin-top: 10px; font-size: .95rem; min-height: 1.5em; color: var(--on-night-muted); }
.check-out b { color: #fff; }
.check-out .yes { color: #6fe3b0; font-weight: 700; }
.check-out .maybe { color: #ffd27a; font-weight: 700; }

/* stats strip */
.stats { background: var(--night-2); color: var(--on-night); border-top: 1px solid var(--night-line); }
.stats .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: 26px; }
.stat { padding: 6px 18px; border-left: 1px solid var(--night-line); display: grid; gap: 2px; }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat b { font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1; font-variant-numeric: tabular-nums; }
.stat b small { font-size: .55em; font-weight: 700; color: #8fa9ff; margin-left: 2px; }
.stat span { color: var(--on-night-muted); font-size: .93rem; }

/* cards */
.card { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 26px; display: grid; gap: 12px; align-content: start; min-width: 0; }
a.card { text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s, box-shadow .15s; }
a.card:hover { border-color: var(--blue); box-shadow: var(--shadow); transform: translateY(-2px); }
.card p { color: var(--muted); }
.card .more { color: var(--link); font-weight: 700; font-size: .95rem; margin-top: 4px; }
.ico { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--blue) 12%, var(--bg)); color: var(--blue); }
.ico svg { width: 26px; height: 26px; }
section.tint .card { background: var(--bg); }

/* lane cards */
.lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1080px) { .lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lanes { grid-template-columns: 1fr; } }
/* Issue 50: a fifth lane (Sunshine Coast to Brisbane). Five across on a wide
   screen, three-and-two on a laptop, two-and-two-and-one on a tablet. */
.lanes.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1180px) { .lanes.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .lanes.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lanes.five { grid-template-columns: 1fr; } }
/* Google rating badge (visible proof only - no aggregateRating schema for
   Google-hosted reviews, which Google's review-markup rules do not allow) */
.gbadge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); color: #fff; text-decoration: none; font-weight: 600; font-size: .95rem; margin-top: 18px; }
.gbadge .stars { color: #ffb700; letter-spacing: 1px; font-size: 1rem; }
.gbadge:hover { background: rgba(255,255,255,.16); }
.band .gbadge { background: var(--bg-2); color: var(--ink); border-color: var(--line-strong); }
.lane { position: relative; overflow: hidden; display: grid; gap: 12px; grid-template-rows: auto auto 1fr auto; padding: 24px; border-radius: 12px; background: var(--night); color: #fff; text-decoration: none; min-height: 250px; isolation: isolate; transition: transform .15s; }
.lane:hover { transform: translateY(-3px); }
.lane::after { content: ""; position: absolute; z-index: -1; right: -40px; bottom: -40px; width: 170px; height: 170px; background: url("img/afc-wing-rev.png") center/contain no-repeat; opacity: .14; }
.lane .tag { font-family: var(--font-display); font-stretch: 125%; font-style: italic; font-weight: 700; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: #b9cbff; }
.lane h3 { font-size: 1.45rem; font-stretch: 112%; font-weight: 800; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.lane h3 i { font-style: normal; color: #8fa9ff; }
.lane p { color: var(--on-night-muted); font-size: .98rem; }
.lane .go { font-weight: 700; color: #fff; }

/* network map */
.netmap { background: var(--night); border-radius: 14px; padding: 18px; color: var(--on-night); }
/* The route diagram is drawn in a 640-unit viewBox, so its labels shrink with
   the box. Sitting in a two-column grid it occupied only ~46% of the wrap, and
   the town labels rendered at 6.6px at 768 and 10.9px at 1440 - about a third
   the size of the legend beneath them. Scaling the TYPE up does not work (the
   34 positions are hand-placed; see the note further down), but scaling the
   FIGURE does: geometry and labels grow together, so the hand-placed positions
   stay proportionally identical and no collision can appear. Spanning the grid
   from 760px up takes the labels to roughly 15px at 768 and 20px at 1100, and
   the max-width stops it becoming a billboard on a wide screen. */
@media (min-width: 760px) {
  /* width:100% matters - auto margins make a grid item shrink to fit, and an
     svg at width:100% has no intrinsic width, so the figure collapsed to its
     own padding. */
  .wrap.grid-2:has(> .netmap:not(.aumap)) { grid-template-columns: 1fr; }
  /* with the diagram on its own row the prose would otherwise run the full
     1340px wrap, which is far too wide to read comfortably */
  .wrap.grid-2:has(> .netmap:not(.aumap)) > .prose { max-width: 70ch; margin-inline: auto; }
  .wrap.grid-2 > .netmap:not(.aumap) {
    grid-column: 1 / -1; width: 100%; max-width: 860px;
    margin-inline: auto !important; margin-top: 8px !important;
  }
}
.netmap svg { width: 100%; height: auto; display: block; }
.netmap .legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .88rem; color: var(--on-night-muted); padding: 6px 6px 2px; }
.netmap .legend span { display: inline-flex; align-items: center; gap: 8px; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot.daily { background: var(--blue); box-shadow: 0 0 0 2px #fff inset; }
.dot.set { border: 2.5px solid #8fa9ff; background: var(--night); }
.dot.req { border: 2px dashed #8b93a6; }

/* ticks */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 32px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3L14.5 7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }

/* steps */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; counter-reset: s; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.steps li { counter-increment: s; display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 2px solid var(--line); position: relative; }
.steps li::before { content: "0" counter(s); font-family: var(--font-display); font-stretch: 125%; font-style: italic; font-weight: 800; font-size: .9rem; color: var(--link); }
.steps strong { font-family: var(--font-display); font-stretch: 112%; font-size: 1.15rem; }
.steps span { color: var(--muted); font-size: 1rem; }

/* quotes & partners */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 860px) { .quotes { grid-template-columns: 1fr; } }
blockquote { margin: 0; padding: 28px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 16px; position: relative; }
blockquote::before { content: "“"; font-family: var(--font-display); font-size: 4rem; line-height: .6; color: var(--blue); height: 26px; }
blockquote p { font-size: 1.06rem; }
blockquote cite { font-style: normal; display: grid; gap: 2px; }
blockquote cite b { font-family: var(--font-display); font-stretch: 112%; }
blockquote cite span { font-size: .9rem; color: var(--muted); }
.partners { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; padding-block: 30px; border-block: 1px solid var(--line); }
.partners span { font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: 1.35rem; color: var(--muted); letter-spacing: -.01em; }
.partners-label { text-align: center; color: var(--muted); font-size: .92rem; margin-bottom: 14px; }

/* service areas */
.sched { display: grid; gap: 22px; }
.sched-group h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 1.12rem; }
.pill { display: inline-flex; align-items: center; gap: 6px; font: 700 .76rem var(--font-body); letter-spacing: .04em; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pill.daily { background: color-mix(in srgb, var(--blue) 14%, var(--bg)); color: var(--link); }
.pill.set { background: color-mix(in srgb, var(--muted) 14%, var(--bg)); color: var(--ink); }
.pill.req { background: transparent; border: 1px dashed var(--muted); color: var(--muted); }
/* 12px bold on a tinted chip is not large text, so 4.5:1 applies, and the light
   --good (#177a53) measured 4.38:1 on this chip. --pill-col darkens it for the
   chip only, because --good is shared with .rate-hint, which passes on its own
   background. It MUST be redefined per scheme: the dark --good (#3cc58f) is
   light-on-dark and reaches 7:1 there, so forcing the darker value into dark
   mode would take it to 2.53:1 - worse than the problem being fixed. */
:root { --pill-col: #15704c; }                                  /* 5.01:1 on the light chip */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pill-col: #3cc58f; } }
:root[data-theme="dark"] { --pill-col: #3cc58f; }
.pill.col { background: color-mix(in srgb, var(--good) 14%, var(--bg)); color: var(--pill-col); }
.suburbs { columns: 3 210px; column-gap: 28px; padding: 0; margin: 0; list-style: none; }
.suburbs li { break-inside: avoid; padding: 5px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; }
.suburbs li .pc, .pc { font-family: var(--font-data); font-size: .84rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.sa-tools { display: grid; gap: 16px; margin-bottom: 22px; }
.sa-search { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sa-search input { flex: 1 1 280px; min-width: 0; font: inherit; font-size: 1.05rem; padding: 13px 16px; border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--bg); color: var(--ink); }
.sa-search input:focus { border-color: var(--blue); }
.sa-count { color: var(--muted); font-size: .95rem; }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
/* on a wide screen there is room for all eight filters, and scrolling them out
   of sight meant most people never saw the later ones */
@media (min-width: 760px) { .tabs { flex-wrap: wrap; overflow-x: visible; } }
.tabs button { flex: none; font: 700 .93rem var(--font-body); padding: 9px 15px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: var(--bg); color: var(--ink); cursor: pointer; white-space: nowrap; }
/* aria-pressed, not aria-selected: these are filter buttons over one table, not
   ARIA tabs - there is no tabpanel for a tab to control. */
.tabs button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tabs button .n { font-weight: 600; opacity: .65; margin-left: 4px; font-variant-numeric: tabular-nums; }
.sa-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
/* a scrollable region needs to be reachable by keyboard, and to show that it
   scrolls - these carry tabindex="0" from the generator */
.sa-table-wrap[tabindex]:focus-visible, .table-wrap[tabindex]:focus-visible {
  outline: 3px solid var(--link); outline-offset: 2px;
}
.sa-table { width: 100%; border-collapse: collapse; font-size: .98rem; min-width: 560px; }
.sa-table th { text-align: left; font: 700 .8rem var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--bg-2); padding: 11px 16px; position: sticky; top: 0; }
.sa-table td { padding: 10px 16px; border-top: 1px solid var(--line); vertical-align: middle; }
/* /service-areas/ renders a 678-row, 2,691-cell table, which cost a 106 ms long
   task in style and layout before anything was interactive. content-visibility
   lets the browser skip laying out rows that are off screen; contain-intrinsic-size
   gives it a height to assume for them so the scrollbar does not jump. The rows
   still exist for search, for Ctrl-F and for crawlers - this is a paint
   optimisation, not lazy loading. */
.sa-table tbody tr { content-visibility: auto; contain-intrinsic-size: auto 41px; }
.sa-table td:first-child { font-weight: 600; }

/* transit times: the suburb checker on a light band, and the main-centre tables */
.checker-light { min-width: 0; max-width: 100%; }
@media (max-width: 420px) { .checker-light .ctl { flex-wrap: wrap; } .checker-light .ctl .btn { width: 100%; } }
.checker-light label { color: var(--ink); }
.checker-light input { border: 1.5px solid var(--line-strong); background: var(--bg); color: var(--ink); }
.checker-light input::placeholder { color: var(--muted); opacity: 1; }
.checker-light .check-out { color: var(--muted); }
.checker-light .check-out b { color: var(--ink); }
.checker-light .check-out .yes { color: #0b7a4b; }
.checker-light .check-out .maybe { color: #8a5a00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .checker-light .check-out .yes { color: #6fe3b0; }
  :root:not([data-theme="light"]) .checker-light .check-out .maybe { color: #ffd27a; } }
:root[data-theme="dark"] .checker-light .check-out .yes { color: #6fe3b0; }
:root[data-theme="dark"] .checker-light .check-out .maybe { color: #ffd27a; }
.transit-table { min-width: 420px; }
/* On a phone these tables were scrolling sideways inside .sa-table-wrap with no
   scrollbar and no affordance, so every row of the core-lane table read
   "Next bu" and the service-frequency table showed "14 every bu". Worse, the
   wrap had no focusable children, so a keyboard-only user could not scroll it at
   all (WCAG 2.1.1). Stacking each row removes the scroll entirely: the
   destination sits on its own line and each remaining cell is labelled from its
   column heading, which is what data-l carries. */
@media (max-width: 560px) {
  .sa-table-wrap:has(.transit-table) { overflow-x: visible; }
  /* #sa-table is the 678-row suburb table on /service-areas/. It had the same
     fault: at 390px the Service column - "Every business day", the whole point
     of the page - was 0% visible, and "Maroochydore, Buderim & Mooloolaba"
     rendered as "Maroochydor". Same stacking, scoped by id so it does not
     disturb the transit tables that share the .sa-table class. */
  #sa-table { min-width: 0; }
  #sa-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #sa-table, #sa-table tbody, #sa-table tr, #sa-table td { display: block; width: auto; }
  #sa-table tr { padding: 12px 16px; border-top: 1px solid var(--line); }
  #sa-table td { border: 0; padding: 0; }
  #sa-table td:first-child { font-weight: 600; font-size: 1rem; }
  #sa-table td[data-l] { margin-top: 6px; }
  #sa-table td[data-l]::before {
    content: attr(data-l) / ""; display: block; color: var(--muted); font-size: .76rem;
    letter-spacing: .05em; text-transform: uppercase; margin-bottom: 1px;
  }
  /* the region heading rows keep their own look */
  #sa-table tr.region-h { padding: 0; }
  #sa-table tr.region-h td { font-weight: 700; }
  #sa-table tr.region-h td::before { content: none; }
  .transit-table { min-width: 0; }
  .transit-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .transit-table, .transit-table tbody, .transit-table tr, .transit-table td { display: block; width: auto; }
  .transit-table tr { padding: 12px 16px; border-top: 1px solid var(--line); }
  .transit-table tr:first-child { border-top: 0; }
  .transit-table td { border: 0; padding: 0; }
  .transit-table td:first-child { font-size: 1rem; }
  /* a plain block, not a flex row: "24 every business day, 9 on set service
     days" has to be able to wrap, and a text node inside a flex container
     cannot wrap independently of its label */
  .transit-table td[data-l] { margin-top: 6px; }
  .transit-table td[data-l]::before {
    /* "/ \"\"" gives the generated label an EMPTY accessible name, so the real
       <th> stays the single source of the column association and a screen
       reader in table mode does not announce "Transit" twice. Older Firefox
       ignores the alt-text slot and simply reads it, which is harmless. */
    content: attr(data-l) / ""; display: block; color: var(--muted); font-size: .76rem;
    letter-spacing: .05em; text-transform: uppercase; margin-bottom: 1px;
  }
  .transit-table .lane-note { margin-top: 4px; }
}
.est-note { background: color-mix(in srgb, var(--blue) 8%, var(--bg)); border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--bg));
            border-radius: 10px; padding: 14px 16px; margin: 0 0 30px; font-size: .96rem; max-width: 86ch; }
.core-table td:first-child { padding-top: 13px; padding-bottom: 13px; }
.core-table .lane-note { display: block; font-weight: 400; font-size: .88rem; color: var(--muted); margin-top: 3px; max-width: 54ch; }
.core-table td:last-child { font-weight: 700; }
.transit-table td:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ...but stacked on a phone it is a sentence on its own line, not a column, so it
   has to wrap. This has to sit AFTER the rule above to beat it at equal
   specificity - the stacking block further up cannot do it from where it is. */
@media (max-width: 560px) { .transit-table td:last-child { white-space: normal; } }
.transit-table .pcx { font-weight: 400; color: var(--muted); font-size: .86rem; margin-left: 6px; }
.band .transit-table + *, .wrap > h3 + .sa-table-wrap { margin-top: 0; }
.wrap > h3 { margin-top: 28px; margin-bottom: 10px; font-size: 1.15rem; }
.sa-table td a { color: inherit; text-decoration: none; }
.sa-table td a:hover { color: var(--link); text-decoration: underline; }
.sa-empty { padding: 22px 16px; color: var(--muted); }
.region-h td { background: var(--bg-2); font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: 1rem; }

/* faq */
.faq { display: grid; gap: 10px; max-width: 880px; }
.faq details { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 0 22px; }
.faq summary { cursor: pointer; padding: 18px 0; font-weight: 700; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--link); font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding-bottom: 20px; color: var(--muted); }

/* cta */
.cta { position: relative; overflow: hidden; isolation: isolate; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, var(--cta-from), var(--cta-to) 70%); }
.cta::after { content: ""; position: absolute; z-index: -1; right: -60px; top: -80px; width: 420px; height: 420px; background: url("img/afc-wing-rev.png") center/contain no-repeat; opacity: .16; }
.cta .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 22px; padding-block: 48px; color: #fff; }
.cta h2 { max-width: 24ch; }
.cta p { color: rgba(255,255,255,.95); margin-top: 8px; }
.cta .acts { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-white { background: #fff; color: #0b0f19; }
.btn-white:hover { background: #eef2ff; }

/* forms */
.form { display: grid; gap: 22px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow); }
.form fieldset { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .form fieldset { grid-template-columns: 1fr; } }
.form legend { font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: 1.15rem; margin-bottom: 10px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 700; font-size: .93rem; }
.field input, .field select, .field textarea { font: inherit; font-size: 1rem; padding: 11px 13px; border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--bg); color: var(--ink); width: 100%; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); }
.field textarea { min-height: 110px; resize: vertical; }
.form-note { font-size: .92rem; color: var(--muted); }
.form-done { background: color-mix(in srgb, var(--blue) 10%, var(--bg)); border: 1px solid var(--blue); border-radius: 12px; padding: 22px; display: grid; gap: 8px; }

.nap { display: grid; gap: 18px; align-content: start; }
.nap .item { display: grid; gap: 3px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.nap .k { font: 700 .78rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nap .v { font-size: 1.15rem; font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.copy { font: 700 .8rem var(--font-body); padding: 4px 10px; border-radius: 5px; border: 1px solid var(--muted); background: var(--bg-2); color: var(--ink); cursor: pointer; }

/* footer */
.foot { background: var(--night); color: var(--on-night-muted); font-size: .95rem; }
.foot .wrap { padding-block: 60px 30px; display: grid; gap: 40px; }
.foot-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; }
@media (max-width: 960px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .foot-cols { grid-template-columns: 1fr; } }
.foot img { width: 240px; height: auto; }
.foot .fh { font-family: var(--font-display); font-weight: 800; line-height: 1.08; letter-spacing: -.01em; font-size: 1rem; font-stretch: 112%; color: #fff; margin: 0 0 14px; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.foot a { color: var(--on-night-muted); text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot address { font-style: normal; display: grid; gap: 4px; margin-top: 18px; }
.foot address a { color: #fff; font-weight: 700; }
.foot .legal { border-top: 1px solid var(--night-line); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; font-size: .86rem; }
.foot .legal nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* mobile action bar */
.mbar { display: none; }
@media (max-width: 700px) {
  .mbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: var(--bg); border-top: 1px solid var(--line); padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); box-shadow: 0 -6px 20px rgba(0,0,0,.08); }
  .mbar .btn { padding: 12px; }
  body { padding-bottom: 70px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* photography */
/* .photo is the positioned wrapper (mask, overlay, opacity); the photograph is a
   real <picture> inside it - see hero_photo() in build.py for why it is no
   longer a background-image. object-fit: cover centred = background-size: cover. */
.hero .photo { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 60%; background-position: center; background-size: cover; background-repeat: no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%); mask-image: linear-gradient(90deg, transparent 0, #000 42%); opacity: .92; }
.hero .photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; display: block; }
.hero .photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,14,24,.34), rgba(10,14,24,.56)); }
.hero.has-photo .wing { display: none; }
.hero.has-photo .lede { color: #edf0f6; }
@media (max-width: 920px) {
  .hero .photo { width: 100%; opacity: .22; -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 85%); mask-image: linear-gradient(180deg, #000 0, transparent 85%); }
}
.quick { background: rgba(10,14,24,.74); }
.lane::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(10,14,24,.58) 0, rgba(10,14,24,.84) 45%, rgba(10,14,24,.96) 100%); }
/* the card photo is a decorative <img> behind the gradient (z-index -3), not a
   url() in an inline custom property - see hero_photo() in build.py */
.lane .lane-bg { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; transition: transform .4s ease; }
.lane:hover .lane-bg { transform: scale(1.04); }
.lane { min-height: 300px; }
.card.has-thumb { padding: 0; overflow: hidden; gap: 0; }
.card.has-thumb .thumb { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card.has-thumb .body { padding: 22px 24px 24px; display: grid; gap: 10px; align-content: start; }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 200px; gap: 12px; }
.gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.gallery .wide { grid-column: span 2; grid-row: span 2; }
@media (max-width: 860px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; } }
.photo-frame { border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grid-quote { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 860px) { .grid-quote { grid-template-columns: minmax(0, 1fr); } }
.checker .ctl > * { min-width: 0; }
.nat-band { padding-block: clamp(56px, 7vw, 96px); }
.nat-band h2 { margin-top: 14px; max-width: 18ch; }
.nat-band .wrap > * { max-width: 680px; }
.caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 26px; }
.cap-chip { background: rgba(10,14,24,.72); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 10px 12px; display: grid; gap: 1px; }
.cap-chip b { font-family: var(--font-display); font-stretch: 112%; font-size: 1rem; }
.cap-chip span { font-size: .78rem; letter-spacing: .1em; color: #8fa9ff; font-weight: 700; }
@media (max-width: 560px) { .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.brands { display: flex; align-items: center; gap: 16px; min-width: 0; }
.cobrand { display: flex; align-items: center; gap: 16px; flex: none; }
.cobrand .sep { width: 1px; height: 38px; background: var(--line); }
.cobrand img { height: 32px; width: auto; }
.cobrand .logo-l { display: var(--logo-l); }
.cobrand .logo-d { display: var(--logo-d); }
@media (max-width: 1300px) { .cobrand img { height: 27px; } .brands { gap: 12px; } .cobrand { gap: 12px; } }
@media (max-width: 600px) { .cobrand img { height: 22px; } .cobrand { gap: 9px; } .cobrand .sep { height: 26px; } .brands { gap: 9px; } .brand img { height: 36px; } }
@media (max-width: 430px) { .cobrand img { height: 19px; } .brand img { height: 31px; } .cobrand { gap: 7px; } .brands { gap: 7px; } }
@media (max-width: 360px) { .cobrand img { height: 16px; } .brand img { height: 26px; } .cobrand { gap: 5px; } .brands { gap: 5px; }
  .cobrand .sep { height: 22px; } .site-head .wrap { gap: 10px; } .menu-btn { padding: 8px 10px; font-size: .9rem; } }
.foot .foot-pl { width: 170px; margin-top: 18px; }
.logo-panel { background: #ffffff; display: grid; place-items: center; padding: 34px 28px; border-bottom: 1px solid var(--line); aspect-ratio: 16 / 6; }
.prose > .logo-panel { min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.prose > .logo-panel img { width: min(78%, 300px); max-width: 100%; height: auto; }
.logo-panel img { max-height: 92px; width: auto; max-width: 80%; }
/* deliberate global overrides - these are NOT the tail of the media query above */
.duo .card h3 { font-size: 1.35rem; }
.card { grid-template-columns: minmax(0, 1fr); }
.logo-panel img { width: min(78%, 300px); height: auto; max-height: none; }
.site-head .wrap { max-width: 1340px; }
.brands { flex: none; }
.mainnav > a, .dd > button { padding-inline: 9px; }
.util .wrap { max-width: 1340px; }
/* Australia map (from the Parcel Link site) */
.netmap { container-type: inline-size; }
/* KNOWN LIMITATION - the route diagram's labels are small on a phone.
   Measured effective sizes: 5.8px at 320, 7.5px at 390, 7.4px at 768, 12.1px at
   1440. That is roughly a third the size of the legend beneath it on a phone.
   Scaling the type up does NOT work: the 34 label positions are hand-placed for
   13.5-unit text, so at x1.3 four labels collide, at x1.6 seven do (measured).
   Shipping overlapping labels is worse than small ones, so the type is left as
   drawn. Fixing it properly means either re-laying out the label positions for
   larger type, or replacing the diagram below ~760px with a text route list.
   The diagram is decorative - it carries role="img" with a full <title>, the
   prose beside it says the same thing, and /service-areas/ has every suburb. */
/* A stray "}" used to sit here. At the top level the parser treats it as the
   start of a qualified rule whose prelude runs to the next "{", so it swallowed
   the @container rule below: the regional labels were never hidden, and in the
   two-column layout on the home page and /service-areas/ they rendered at
   6.3px (1024) to 7.5px (1280-1920). Verified via document.styleSheets - zero
   CSSContainerRule objects before the fix. */
@container (max-width: 640px) {
  .aumap-svg .rlbl { display: none; }
  /* with the regional labels gone there is room to grow the nine capital labels
     and the depot label, which otherwise render at 8-10px in this layout:
     24/19 units give 11.7/9.2px at 1024 and 13.9/11px at 1280 and above */
  .aumap-svg .lbl { font-size: 24px; }
  .aumap-svg .hublbl { font-size: 19px; }
}
.aumap-svg .land { fill: #1b2438; stroke: #2a3550; stroke-width: 1.5; }
.aumap-svg .rroute { fill: none; stroke: #8fa9ff; stroke-width: 1; opacity: .35; }
.aumap-svg .route { fill: none; stroke: #2e62ff; stroke-width: 2.6; stroke-linecap: round; }
.aumap-svg .rpin { fill: #8fa9ff; stroke: #0a0e18; stroke-width: 1.5; }
.aumap-svg .rlbl { font: 600 13px "Source Sans 3", sans-serif; fill: #a9b3c6; }
/* the map scales with its container, so regional labels become unreadable on a phone */
@media (max-width: 900px) { .aumap-svg .rlbl { display: none; } }
.aumap-svg .pin { fill: #2e62ff; stroke: #fff; stroke-width: 2.5; }
.aumap-svg .lbl { font: 700 17px "Archivo", "Source Sans 3", sans-serif; fill: #fff; }
.aumap-svg .hub { fill: #fff; }
.aumap-svg .hubring { fill: none; stroke: #fff; stroke-width: 2; opacity: .6; }
.aumap-svg .hublbl { fill: #fff; font-size: 15px; }
.dot.reg { background: #8fa9ff; width: 9px; height: 9px; }
.dot.hubd { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
.stats .wrap { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .stats .wrap { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0; } .stats .stat { padding: 4px 8px; border-left: 1px solid var(--night-line); } .stats .stat:first-child { border-left: 0; padding-left: 0; } .stats .stat:nth-child(3) { border-left: 1px solid var(--night-line); padding-left: 8px; } .stat b { font-size: 1.15rem; } .stat b small { font-size: .6em; } .stat span { font-size: .74rem; line-height: 1.25; } }
@media (max-width: 760px) { .stats .wrap { grid-template-columns: repeat(4, auto); justify-content: space-between; column-gap: 6px; } .stat b { font-size: 1.02rem; } .stats .stat { padding-inline: 8px 0; } }
/* Four stats across stopped fitting on a narrow phone: at 320px the fourth tile
   ran 12px past the viewport and the page scrolled sideways, and even at 390px
   every label wrapped to three lines. Two by two reads better and cannot
   overflow, because the columns are fractions of the width rather than content. */
@media (max-width: 440px) {
  .stats .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; row-gap: 14px; justify-content: stretch; }
  .stats .stat { padding-inline: 10px 0; border-left: 1px solid var(--night-line); }
  .stats .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stats .stat:nth-child(3) { padding-left: 0; }
  .stat span { font-size: .78rem; }
}
/* quote form */
.rate-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; background: color-mix(in srgb, var(--blue) 9%, var(--bg)); border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--line)); border-radius: 12px; padding: 16px 18px; margin-bottom: 18px; }
.rate-note b { color: var(--ink); }
.qf .fs-route { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 640px) { .qf .fs-route { grid-template-columns: minmax(0, 1fr); } }
.qf .lbl { font-weight: 700; font-size: .93rem; display: block; margin-bottom: 8px; }
.route-chip { padding: 11px 14px; border-radius: 8px; background: var(--bg-2); color: var(--muted); font-weight: 600; font-size: .95rem; }
.route-chip.ok { background: color-mix(in srgb, var(--good) 13%, var(--bg)); color: var(--ink); }
.route-chip.ok::before { content: "✓ "; color: var(--good); }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span { display: inline-block; padding: 9px 14px; border: 1.5px solid var(--line-strong); border-radius: 999px; font-weight: 600; font-size: .93rem; cursor: pointer; background: var(--bg); }
.seg input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.seg input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.items { display: grid; gap: 10px; }
.items-head, .item-row { display: grid; grid-template-columns: minmax(0, .7fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr) 36px; gap: 8px; align-items: end; }
.items-head span { font-size: .8rem; font-weight: 700; color: var(--muted); }
.item-row label span { display: none; font-size: .78rem; font-weight: 700; color: var(--muted); }
.item-row input { font: inherit; font-size: 1rem; padding: 10px; border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--bg); color: var(--ink); width: 100%; }
.item-row input:focus { border-color: var(--blue); }
.item-row .rm { height: 42px; border: 1.5px solid var(--line-strong); background: var(--bg); color: var(--muted); border-radius: var(--r); font-size: 1.2rem; cursor: pointer; }
.item-row .rm:hover { color: var(--ink); border-color: var(--ink); }
@media (max-width: 640px) {
  .items-head { display: none; }
  .item-row { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
  .item-row label span { display: block; margin-bottom: 4px; }
  .item-row .rm { grid-column: 3; }
}
.add-line { margin-top: 10px; padding: 9px 14px; font-size: .93rem; }
/* min-height reserves the panel's own height so it does not push the controls
   below it down the first time a result is written into it (0.054 CLS) */
.totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; background: var(--night); color: #fff; border-radius: 10px; padding: 14px 16px; min-height: 76px; }
.totals div { display: grid; gap: 2px; }
.totals b { font-family: var(--font-display); font-stretch: 112%; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.totals div:last-child b { color: #8fa9ff; }
.totals span { font-size: .8rem; color: var(--on-night-muted); }
@media (max-width: 520px) { .totals { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; } }
.checks { display: grid; gap: 8px; }
.checks label, label.inline { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: .97rem; }
.checks input, label.inline input { width: 18px; height: 18px; accent-color: var(--blue); }
.rate-hint { color: var(--good) !important; font-weight: 700; }
.transit-note { margin: 8px 0 0; font-size: .92rem; color: var(--muted); line-height: 1.45; }
.ref-line { margin: 10px 0 4px; font-size: 1rem; }
.ref-line b { font-family: "IBM Plex Mono", Consolas, monospace; letter-spacing: .04em; background: var(--bg-2); padding: 2px 8px; border-radius: 6px; }
.done-actions { margin-top: 18px; }
.done-actions .btn { box-shadow: 0 2px 10px rgba(27,73,212,.28); }
.done-actions .btn:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; }

#afc-print { display: none; }
#afc-print.ap-onscreen { display: block; position: fixed; inset: 0; z-index: 9999;
  overflow: auto; padding: 24px 18px 40px; background: var(--bg); color: var(--ink); }
#afc-print.ap-onscreen .ap-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; max-width: 820px; margin: 0 auto 18px; padding-bottom: 10px;
  border-bottom: 2px solid var(--blue-deep); }
#afc-print.ap-onscreen .ap-co b { display: block; font-size: 1.05rem; }
#afc-print.ap-onscreen .ap-co span { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
#afc-print.ap-onscreen .ap-nap { font-size: .82rem; color: var(--muted); line-height: 1.5; }
#afc-print.ap-onscreen .ap-title,
#afc-print.ap-onscreen .ap-meta,
#afc-print.ap-onscreen .ap-intro,
#afc-print.ap-onscreen .ap-actions { max-width: 820px; margin-left: auto; margin-right: auto; }
#afc-print.ap-onscreen .ap-title { font-size: 1.3rem; margin: 0 0 8px; }
#afc-print.ap-onscreen .ap-meta { margin: 0 0 12px; font-size: .9rem; }
#afc-print.ap-onscreen .ap-intro { margin: 0 0 16px; font-size: .95rem; }
#afc-print.ap-onscreen .ap-body { white-space: pre-wrap; word-break: break-word; font-size: .85rem;
  line-height: 1.5; border: 1px solid var(--line); border-radius: 8px; padding: 14px;
  margin: 0 auto; max-width: 820px; background: var(--bg-2); }
#afc-print.ap-onscreen .ap-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

@media print {
  /* The route diagram sits on a CSS background-colour, which print suppresses by
     default - leaving 39 white town labels on white paper, with only "YANDINA
     DEPOT" surviving because it sits on a real SVG rect. Repaint it for paper. */
  body:not(.afc-printing) .netmap { background: #fff !important; border: 1px solid #999; }
  body:not(.afc-printing) .netmap .t,
  body:not(.afc-printing) .netmap .depot { fill: #0a0e18 !important; }
  body:not(.afc-printing) .netmap .s,
  body:not(.afc-printing) .netmap .cap { fill: #444 !important; }
  body:not(.afc-printing) .netmap .legend,
  body:not(.afc-printing) .aumap .legend { color: #0a0e18 !important; }
  /* the swatches are CSS-painted, so print drops them and the three legend
     entries become indistinguishable - give each one an inked outline */
  body:not(.afc-printing) .legend .dot { border: 1.5px solid #0a0e18 !important; box-shadow: none !important; }
  body:not(.afc-printing) .legend .dot.daily { background: #0a0e18 !important; }
  body:not(.afc-printing) .legend .dot.set { background: #fff !important; }
  body:not(.afc-printing) .legend .dot.req { background: #fff !important; border-style: dashed !important; }
  body:not(.afc-printing) .legend .dot.reg { background: #6b7790 !important; }
  body:not(.afc-printing) .legend .dot.hubd { background: #0a0e18 !important; }
  /* On the Australia map the landmass is a real SVG fill, so it does print - but
     it prints DARK, and its white labels then lose whichever part of themselves
     overhangs the coast onto white paper. Rather than outline them, print the
     whole map the way paper wants it: pale land, dark labels, dark pins. */
  body:not(.afc-printing) .aumap-svg .land { fill: #e9edf4 !important; stroke: #9aa4b8 !important; }
  body:not(.afc-printing) .aumap-svg .lbl,
  body:not(.afc-printing) .aumap-svg .rlbl { fill: #0a0e18 !important; }
  body:not(.afc-printing) .aumap-svg .pin,
  body:not(.afc-printing) .aumap-svg .hub { fill: #0a0e18 !important; stroke: #fff !important; }
  body:not(.afc-printing) .aumap-svg .rpin { fill: #4a5570 !important; }
  body:not(.afc-printing) .aumap-svg .route,
  body:not(.afc-printing) .aumap-svg .rroute { stroke: #6b7790 !important; }
  /* ordinary pages: browsers print with background graphics off by default, so
     every dark band has to come back as black on white */
  body:not(.afc-printing) .util,
  body:not(.afc-printing) .site-head,
  body:not(.afc-printing) .mbar,
  body:not(.afc-printing) .cta,
  body:not(.afc-printing) .foot .foot-cols,
  body:not(.afc-printing) .foot nav,
  body:not(.afc-printing) .hero .wing,
  body:not(.afc-printing) .hero .photo { display: none !important; }
  body:not(.afc-printing) .night,
  body:not(.afc-printing) .hero,
  body:not(.afc-printing) .foot { background: #fff !important; color: #000 !important; }
  body:not(.afc-printing) .hero::before,
  body:not(.afc-printing) .lane::before,
  body:not(.afc-printing) .lane::after,
  body:not(.afc-printing) .lane .lane-bg,
  body:not(.afc-printing) .cta::before,
  body:not(.afc-printing) .cta::after { display: none !important; }
  body:not(.afc-printing) .hero h1,
  body:not(.afc-printing) .hero .lede,
  body:not(.afc-printing) .hero p,
  body:not(.afc-printing) .foot * { color: #000 !important; }
  body:not(.afc-printing) .foot .foot-pl { filter: invert(1); }
  /* print is always on white: show the dark-ink wordmark whatever the scheme */
  body:not(.afc-printing) .tv-inline.logo-l,
  body:not(.afc-printing) .tv-strip img.logo-l { display: block !important; }
  body:not(.afc-printing) .tv-inline.logo-d,
  body:not(.afc-printing) .tv-strip img.logo-d { display: none !important; }
  body:not(.afc-printing) .crumbs, body:not(.afc-printing) .crumbs a,
  body:not(.afc-printing) .tabs button { color: #000 !important; }
  body:not(.afc-printing) .tabs button { background: #fff !important; border: 1px solid #666 !important; }
  body:not(.afc-printing) .tabs { flex-wrap: wrap !important; overflow: visible !important; }
  body:not(.afc-printing) .totals { background: #fff !important; border: 1px solid #999; }
  body:not(.afc-printing) .totals, body:not(.afc-printing) .totals b,
  body:not(.afc-printing) .totals span, body:not(.afc-printing) .totals div:last-child b,
  body:not(.afc-printing) .btn, body:not(.afc-printing) .quick .tile strong,
  body:not(.afc-printing) .quick, body:not(.afc-printing) .quick * { color: #000 !important; }
  body:not(.afc-printing) .quick { background: #fff !important; }
  body:not(.afc-printing) .btn { border: 1px solid #666 !important; }
  /* the lane cards are white type on a photo - with the photo and gradient
     gone they printed as white on white; same for the pale-blue accents */
  body:not(.afc-printing) .lane { background: #fff !important; border: 1px solid #999; }
  body:not(.afc-printing) .lane, body:not(.afc-printing) .lane * { color: #000 !important; }
  body:not(.afc-printing) .hero h1 em, body:not(.afc-printing) .stat b small,
  body:not(.afc-printing) .cap-chip span, body:not(.afc-printing) .lane .tag { color: #333 !important; }
  .card, .lane, .faq details, .item-row, .sa-table tr, .facts tr { break-inside: avoid; }
  .wrap > h3, .sec-head, h2 { break-after: avoid; }
  body.afc-printing > *:not(#afc-print) { display: none !important; }
  body.afc-printing { background: #fff !important; }
  #afc-print { display: block !important; color: #000; font-size: 10.5pt; line-height: 1.5; }
  .ap-head { display: flex; justify-content: space-between; align-items: flex-start;
             border-bottom: 2px solid #0b1b3a; padding-bottom: 10px; margin-bottom: 18px; }
  .ap-co b { display: block; font-size: 13pt; color: #0b1b3a; }
  .ap-co span { font-size: 8.5pt; letter-spacing: .09em; text-transform: uppercase; color: #555; }
  .ap-nap { font-size: 9pt; text-align: right; color: #333; line-height: 1.5; }
  .ap-title { font-size: 14pt; margin: 0 0 8px; color: #0b1b3a; }
  .ap-meta { margin: 0 0 12px; font-size: 10pt; }
  .ap-intro { margin: 0 0 16px; font-size: 10pt; max-width: 165mm; }
  .ap-body { white-space: pre-wrap; word-break: break-word; font-size: 9pt; line-height: 1.45;
             border: 1px solid #999; border-radius: 4px; padding: 12px; margin: 0; }
  @page { margin: 16mm; }
  #afc-print .ap-actions { display: none !important; }
}
.reveal { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.reveal > label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 6px; }
.reveal select { width: 100%; }
.reveal .form-note { margin: 8px 0 0; }
.transit-note b { color: var(--ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { background: color-mix(in srgb, #d23 10%, var(--bg)); border: 1px solid #d23; color: var(--ink); padding: 12px 14px; border-radius: 8px; }
#qf-summary { white-space: pre-wrap; font-family: var(--font-data); font-size: .82rem; background: var(--bg-2); padding: 14px; border-radius: 8px; overflow-x: auto; margin: 10px 0 0; }
.form-done details summary { cursor: pointer; font-weight: 700; color: var(--link); }
/* terms */
.terms-box { background: var(--bg-2); border: 1.5px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.terms-box label.inline { align-items: flex-start; font-weight: 500; line-height: 1.5; }
.terms-box input { margin-top: 3px; flex: none; }
.legal-doc { max-width: 860px; display: grid; gap: 22px; }
.legal-notice { border-left: 5px solid var(--blue); background: color-mix(in srgb, var(--blue) 8%, var(--bg)); padding: 16px 20px; border-radius: 0 10px 10px 0; }
.legal-toc { background: var(--bg-2); border-radius: 12px; padding: 20px 24px; }
.legal-toc h2 { font-size: 1.2rem; margin-bottom: 10px; }
.legal-toc ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.legal-doc .part { display: grid; gap: 18px; padding-top: 10px; }
.legal-doc .part > h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); padding-bottom: 10px; border-bottom: 2px solid var(--line); }
.clause { display: grid; gap: 8px; scroll-margin-top: 110px; }
.clause h3 { font-size: 1.08rem; }
.clause .no { color: var(--link); font-variant-numeric: tabular-nums; }
.clause p { color: var(--ink); }
.legal-foot { font-size: .88rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 16px; }
.terms-inline { margin-top: 12px; }
.terms-inline summary { cursor: pointer; font-weight: 700; color: var(--link); }
.terms-scroll { margin-top: 10px; max-height: 340px; overflow-y: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; font-size: .9rem; display: grid; gap: 8px; }
.terms-scroll h4, .terms-scroll h2.tpart { font-size: 1rem; margin-top: 8px; }
.terms-scroll .legal-notice, .terms-scroll > p:first-child { margin: 0; }
.grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1100px) { .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .grid-5 { grid-template-columns: minmax(0, 1fr); } }
/* guides */
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 960px) { .article-grid { grid-template-columns: minmax(0, 1fr); } }
.article { max-width: 72ch; display: grid; gap: 1em; font-size: 1.06rem; }
.article .byline { font-size: .95rem; color: var(--muted); margin: 0; }
.article .byline a { color: inherit; }
.article h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin-top: .8em; }
.article ul, .article ol { margin: 0; padding-left: 1.3em; display: grid; gap: .45em; }
.article-side { display: grid; gap: 16px; position: sticky; top: 110px; }
@media (max-width: 960px) { .article-side { position: static; } }
.side-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: .95rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.data-table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 520px; }
.data-table th { text-align: left; background: var(--bg-2); padding: 10px 14px; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.data-table td { padding: 10px 14px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.tool-card { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; border: 2px solid var(--blue); }
@media (max-width: 640px) { .tool-card { grid-template-columns: minmax(0, 1fr); } }
.calc { gap: 16px; }
.totals.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 640px) { .totals.five { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; } }

/* Issue 22: town page link lists */
.town-links { margin-top: 18px; }
.town-links .eyebrow { margin-bottom: 8px; }
.town-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.town-links li a { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: .9rem; font-weight: 600; text-decoration: none; color: var(--ink); background: var(--bg); }
.town-links li a:hover { border-color: var(--blue); color: var(--blue); }
.town-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 8px 32px; }
.town-groups .town-links { margin-top: 10px; }
.totals.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.check-row { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: .93rem; }
.check-row input { width: 18px; height: 18px; }
.grid-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .grid-fields { grid-template-columns: minmax(0, 1fr); } }
.facts { width: 100%; border-collapse: collapse; background: var(--bg); font-size: .97rem; }
.facts th, .facts td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.facts tr:last-child th, .facts tr:last-child td { border-bottom: 0; }
.facts th { width: 200px; font-weight: 700; color: var(--ink); }
@media (max-width: 560px) { .facts th, .facts td { display: block; width: auto; } .facts th { padding-bottom: 2px; border-bottom: 0; } }
.review blockquote { margin: 0 0 12px; font-size: 1.05rem; line-height: 1.55; }
.review figcaption { font-size: .9rem; color: var(--muted); font-weight: 600; }
.review-flag { background: #fff3cd; border: 2px solid #d39e00; color: #5c4502; padding: 12px 16px; border-radius: 10px; margin-bottom: 22px; font-size: .92rem; line-height: 1.5; }
.review-flag b { font-weight: 800; }
.review { align-self: start; }
/* Powered-by badge */
.poweredby { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 20px 0 4px; border-top: 1px solid rgba(255,255,255,.14); margin-top: 26px; }
.poweredby > a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.poweredby .tv-logo { height: 26px; width: auto; display: block; }
.poweredby .tv-text { font-size: .9rem; color: var(--on-night-muted); }
.poweredby .tv-text b { color: #fff; font-weight: 700; }
.poweredby .tv-note { font-size: .86rem; color: var(--on-night-muted); }
/* underlined, not colour alone: #86a4ff against the #a9b3c6 text around it is
   1.13:1, so colour carries no information for a reader who cannot see it */
.poweredby .tv-note a { color: #86a4ff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .poweredby { flex-direction: column; align-items: flex-start; gap: 8px; } }
.tv-inline { height: 30px; width: auto; display: block; }
.tv-inline.logo-l, .tv-strip img.logo-l { display: var(--logo-l); }
.tv-inline.logo-d, .tv-strip img.logo-d { display: var(--logo-d); }

/* TMS: compact "switch on" option cards */
.card.opt { padding: 22px 20px; gap: 10px; }
.card.opt .ico { width: 34px; height: 34px; border-radius: 8px; }
.card.opt .ico svg { width: 19px; height: 19px; }
.card.opt h3 { font-size: 1.02rem; line-height: 1.3; }
.card.opt p { font-size: .92rem; line-height: 1.5; }
@media (max-width: 980px) { .opt-foot { grid-template-columns: minmax(0, 1fr); } }

/* home: powered-by TransVirtual strip */
.tv-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.tv-strip .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; padding-top: 20px; padding-bottom: 20px; }
.tv-strip img { height: 30px; width: auto; display: block; flex: none; padding-right: 22px; border-right: 1px solid var(--line); }
.tv-strip p { margin: 0; font-size: .95rem; color: var(--muted); min-width: 0; }
.tv-strip p b { color: var(--ink); font-weight: 700; }
.tv-strip .more { margin-left: auto; white-space: nowrap; font-weight: 700; color: var(--link); text-decoration: none; }
.tv-strip .more:hover { text-decoration: underline; }
@media (max-width: 760px) { .tv-strip .more { margin-left: 0; } }

/* credit account application form */
.checks.cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
@media (max-width: 560px) { .checks.cols { grid-template-columns: minmax(0, 1fr); } }
.lbl.sub { display: block; font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: 1rem; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.form .af fieldset + fieldset, .form.af fieldset + fieldset { border-top: 1px solid var(--line); padding-top: 22px; }
.field.small { max-width: 100%; }
.form.af .field:has(input:required, select:required) > label::after,
.form.af .field:has(input:required) > label::after { content: " *"; color: var(--required); font-weight: 800; }
.req-note { margin: -4px 0 0; }
.req-note span { color: var(--required); font-weight: 800; }

/* review cards are <figure>; clear the browser's default 40px side margins */
.review { margin: 0; }

/* suburb suggestions (quote.js suggestBox) */
.sg-list { position: absolute; z-index: 60; margin: 0; padding: 4px; list-style: none; max-height: 280px; overflow-y: auto; background: var(--bg); border: 1.5px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow); }
.sg-list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 6px; cursor: pointer; }
.sg-list li:hover, .sg-list li[aria-selected="true"] { background: var(--bg-2); }
.sg-list .pc { color: var(--muted); font-size: .86rem; }